/* === PornVotes Game Console – alarm-clock timer + blinking warning === */

/* --- Timer: constructed geometry (no scaleY); uniform stroke; --pv-timer-fit scales all dims equally --- */
#pv-console-timer {
  --pv-timer-fit: 1;
  --pv-console-scale: calc(var(--pv-ui-scale) * var(--pv-timer-fit, 1));
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: calc(22px * var(--pv-console-scale)) calc(6px * var(--pv-console-scale)) calc(26px * var(--pv-console-scale));
  box-sizing: border-box;
}

#pv-console-timer .pv-timer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  justify-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 calc(4px * var(--pv-console-scale));
}

#pv-console-timer .pv-timer-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

#pv-console-timer .pv-timer-digit-pair {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
  gap: calc(2px * var(--pv-console-scale));
  min-width: 0;
  width: 100%;
}

.pv-timer-row,
.pv-timer-digits-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: calc(2px * var(--pv-console-scale));
  align-items: flex-end;
}

.pv-timer-cell {
  display: inline-flex;
  align-items: center;
  gap: calc(2px * var(--pv-console-scale));
}

.pv-seg-digit {
  position: relative;
  display: inline-block;
  width: calc(20px * var(--pv-console-scale));
  height: calc(32px * var(--pv-console-scale));
  vertical-align: middle;
  margin: 0 calc(1px * var(--pv-console-scale));
  transform: scaleY(2.25);
  transform-origin: center center;
}

.pv-seg-digit .seg {
  position: absolute;
  background-color: #111;
  border-radius: 2px;
  transition: background-color 0.15s ease;
}

.pv-seg-digit .seg.a { left: calc(2px * var(--pv-console-scale)); top: 0; width: calc(16px * var(--pv-console-scale)); height: calc(3px * var(--pv-console-scale)); }
.pv-seg-digit .seg.b { right: 0; top: calc(2px * var(--pv-console-scale)); width: calc(3px * var(--pv-console-scale)); height: calc(12px * var(--pv-console-scale)); }
.pv-seg-digit .seg.c { right: 0; bottom: calc(2px * var(--pv-console-scale)); width: calc(3px * var(--pv-console-scale)); height: calc(12px * var(--pv-console-scale)); }
.pv-seg-digit .seg.d { left: calc(2px * var(--pv-console-scale)); bottom: 0; width: calc(16px * var(--pv-console-scale)); height: calc(3px * var(--pv-console-scale)); }
.pv-seg-digit .seg.e { left: 0; bottom: calc(2px * var(--pv-console-scale)); width: calc(3px * var(--pv-console-scale)); height: calc(12px * var(--pv-console-scale)); }
.pv-seg-digit .seg.f { left: 0; top: calc(2px * var(--pv-console-scale)); width: calc(3px * var(--pv-console-scale)); height: calc(12px * var(--pv-console-scale)); }
.pv-seg-digit .seg.g { left: calc(2px * var(--pv-console-scale)); top: 50%; margin-top: calc(-2px * var(--pv-console-scale)); width: calc(16px * var(--pv-console-scale)); height: calc(3px * var(--pv-console-scale)); }

.pv-seg-digit.v0 .seg.a, .pv-seg-digit.v0 .seg.b, .pv-seg-digit.v0 .seg.c,
.pv-seg-digit.v0 .seg.d, .pv-seg-digit.v0 .seg.e, .pv-seg-digit.v0 .seg.f,
.pv-seg-digit.v1 .seg.b, .pv-seg-digit.v1 .seg.c,
.pv-seg-digit.v2 .seg.a, .pv-seg-digit.v2 .seg.b, .pv-seg-digit.v2 .seg.d,
.pv-seg-digit.v2 .seg.e, .pv-seg-digit.v2 .seg.g,
.pv-seg-digit.v3 .seg.a, .pv-seg-digit.v3 .seg.b, .pv-seg-digit.v3 .seg.c,
.pv-seg-digit.v3 .seg.d, .pv-seg-digit.v3 .seg.g,
.pv-seg-digit.v4 .seg.b, .pv-seg-digit.v4 .seg.c, .pv-seg-digit.v4 .seg.f, .pv-seg-digit.v4 .seg.g,
.pv-seg-digit.v5 .seg.a, .pv-seg-digit.v5 .seg.c, .pv-seg-digit.v5 .seg.d,
.pv-seg-digit.v5 .seg.f, .pv-seg-digit.v5 .seg.g,
.pv-seg-digit.v6 .seg.a, .pv-seg-digit.v6 .seg.c, .pv-seg-digit.v6 .seg.d,
.pv-seg-digit.v6 .seg.e, .pv-seg-digit.v6 .seg.f, .pv-seg-digit.v6 .seg.g,
.pv-seg-digit.v7 .seg.a, .pv-seg-digit.v7 .seg.b, .pv-seg-digit.v7 .seg.c,
.pv-seg-digit.v8 .seg.a, .pv-seg-digit.v8 .seg.b, .pv-seg-digit.v8 .seg.c,
.pv-seg-digit.v8 .seg.d, .pv-seg-digit.v8 .seg.e, .pv-seg-digit.v8 .seg.f, .pv-seg-digit.v8 .seg.g,
.pv-seg-digit.v9 .seg.a, .pv-seg-digit.v9 .seg.b, .pv-seg-digit.v9 .seg.c,
.pv-seg-digit.v9 .seg.d, .pv-seg-digit.v9 .seg.f, .pv-seg-digit.v9 .seg.g {
  background-color: #ff3b3b;
}

/* Console timer digits: tall box, uniform stroke width (horiz + vert), no post-transform stretch */
#pv-console-timer .pv-seg-digit {
  --sd-w: calc(20px * var(--pv-console-scale));
  --sd-h: calc(72px * var(--pv-console-scale));
  --sd-stroke: calc(3px * var(--pv-console-scale));
  width: var(--sd-w);
  height: var(--sd-h);
  transform: none;
  margin: 0 calc(2px * var(--pv-console-scale));
}

#pv-console-timer .pv-seg-digit .seg.a {
  left: var(--sd-stroke);
  top: 0;
  width: calc(var(--sd-w) - 2 * var(--sd-stroke));
  height: var(--sd-stroke);
}

#pv-console-timer .pv-seg-digit .seg.b {
  right: 0;
  top: var(--sd-stroke);
  width: var(--sd-stroke);
  height: calc(var(--sd-h) / 2 - 1.5 * var(--sd-stroke));
}

#pv-console-timer .pv-seg-digit .seg.c {
  right: 0;
  bottom: var(--sd-stroke);
  width: var(--sd-stroke);
  height: calc(var(--sd-h) / 2 - 1.5 * var(--sd-stroke));
}

#pv-console-timer .pv-seg-digit .seg.d {
  left: var(--sd-stroke);
  bottom: 0;
  width: calc(var(--sd-w) - 2 * var(--sd-stroke));
  height: var(--sd-stroke);
}

#pv-console-timer .pv-seg-digit .seg.e {
  left: 0;
  bottom: var(--sd-stroke);
  width: var(--sd-stroke);
  height: calc(var(--sd-h) / 2 - 1.5 * var(--sd-stroke));
}

#pv-console-timer .pv-seg-digit .seg.f {
  left: 0;
  top: var(--sd-stroke);
  width: var(--sd-stroke);
  height: calc(var(--sd-h) / 2 - 1.5 * var(--sd-stroke));
}

#pv-console-timer .pv-seg-digit .seg.g {
  left: var(--sd-stroke);
  top: 50%;
  margin-top: calc(-0.5 * var(--sd-stroke));
  width: calc(var(--sd-w) - 2 * var(--sd-stroke));
  height: var(--sd-stroke);
}

@keyframes pvColonBlink {
  0%   { opacity: 1; }
  50%  { opacity: 0.2; }
  100% { opacity: 1; }
}

.pv-timer-colon {
  color: #ff3b3b;
  font-size: calc(18px * var(--pv-console-scale));
  font-weight: bold;
  padding: 0 calc(2px * var(--pv-console-scale));
  line-height: calc(36px * var(--pv-console-scale));
  animation: pvColonBlink 1s infinite;
}

#pv-console-timer .pv-timer-colon {
  line-height: calc(40px * var(--pv-console-scale));
  align-self: center;
  justify-self: center;
}

/* Label sits under digits in the same column (grid alignment vs old flex row). */
.pv-timer-labels-row,
#pv-console-timer .pv-timer-labels-row {
  display: flex;
  justify-content: space-between;
  margin-top: calc(18px * var(--pv-console-scale));
  padding: 0 calc(8px * var(--pv-console-scale));
  gap: 0 calc(4px * var(--pv-console-scale));
}

.pv-timer-label,
#pv-console-timer .pv-timer-label {
  flex: 1;
  text-align: center;
  font-size: calc(11px * var(--pv-console-scale));
  letter-spacing: calc(3px * var(--pv-console-scale));
  padding-left: calc(2px * var(--pv-console-scale));
  padding-right: calc(2px * var(--pv-console-scale));
  color: #bbb;
}

#pv-console-timer .pv-timer-label {
  flex: none;
  width: 100%;
  max-width: 100%;
  margin-top: calc(18px * var(--pv-console-scale));
  padding: 0 calc(2px * var(--pv-console-scale));
  box-sizing: border-box;
}

/* Keep the countdown timer typography unchanged (do not follow global font). */
#pv-console{
  --pv-console-scale: var(--pv-ui-scale);
  font-family:"Trebuchet MS","Arial Rounded MT Bold",sans-serif;
}

#pv-console * {
  font-family: inherit;
}

/* Logo “V” must keep its dedicated custom font (do not inherit). */
#pv-console .pv-v {
  font-family: 'VLegs';
}

#pv-console .pv-console-ends-in {
  order: 0;
  flex: 0 0 auto;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ffd700;
  margin: 0;
  transform: none;
  font-size: calc(clamp(11px, 1.05vw, 14px) * var(--pv-console-scale));
  line-height: calc(1.1 * var(--pv-console-scale));
}

#pv-timer,
#pv-console-timer,
#pv-timer *,
#pv-console-timer * {
  font-family: Arial, sans-serif !important;
}

#pv-console #pv-console-timer,
#pv-console .pv-console-timer {
  order: 1;
  flex: 0 0 auto;
}

/* --- Blinking warning --- */
@keyframes pvTimerBlink {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}

#pv-timer,
#pv-console-timer {
  animation: none;
}

#pv-timer.pv-timer-warning,
#pv-console-timer.pv-timer-warning {
  animation: pvTimerBlink var(--pv-blink-speed, 2s) infinite;
}

/* === Game console: ONE column = 6× flex spacers + 5 blocks (equal inter-block space) === */
#pv-console-trigger.pv-console-stack,
.pv-console-stack.console-root {
  /* One rail width: everything matches square panel inner width */
  --pv-console-rail: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  cursor: pointer;
  overflow-x: hidden;
  overflow-y: visible;
  box-sizing: border-box;
}

#pv-console-trigger.pv-console-stack > .pv-console-v-spacer,
#pv-console-trigger.pv-console-stack > #pv-console-brand,
#pv-console-trigger.pv-console-stack > .pv-console-block-clock,
#pv-console-trigger.pv-console-stack > .console-panel {
  width: var(--pv-console-rail);
  max-width: 100%;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/*
 * Six vertical gaps — never collapse. Top + bottom larger than internal (16% min total).
 * flex: 1 1 0 shares extra height equally across all six.
 */
#pv-console-trigger.pv-console-stack > .pv-console-v-spacer:first-child,
#pv-console-trigger.pv-console-stack > .pv-console-v-spacer:last-child {
  min-height: max(4px, 4%);
}

#pv-console-trigger.pv-console-stack > .pv-console-v-spacer:not(:first-child):not(:last-child) {
  min-height: max(4px, 2%);
}

.pv-console-v-spacer {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
}

.pv-console-block-clock {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Shared panel frame: three identical squares (width of column, height = width) */
#pv-console .console-panel {
  flex: 0 0 auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #e53935;
  border-radius: 6px;
  background: #000;
  padding: calc(6px * var(--pv-console-scale)) calc(6px * var(--pv-console-scale));
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  box-sizing: border-box;
}

.console-root.competition-mode .console-panel-leaderboard {
  display: none;
}

.console-root.competition-mode .console-panel-prizes,
.console-root.competition-mode .console-panel-feed {
  flex: 0 0 auto;
}

/* Logo block: rail width; no horizontal bleed (V scale removed — game_console wins over index). */
#pv-console-brand {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0;
  overflow-x: hidden;
  overflow-y: visible;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: pv-console-brand;
}

#pv-console .pv-brand-link {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

#pv-console .pv-brand-title {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  gap: 4px;
}

#pv-console .pv-v {
  transform: none;
  margin-right: 0;
  font-size: 2.35em;
  line-height: 0.88;
  vertical-align: baseline;
}

#pv-console .pv-slogan {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

#pv-console .pv-slogan-personal {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  text-align: center;
  box-sizing: border-box;
}

/* Logo + slogan: standard link so middle/right-click work; no layout change */
.pv-brand-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.pv-brand-link:hover,
.pv-brand-link:focus {
  text-decoration: none;
  color: inherit;
}

/* Center label+clock as a unit above the frames. */
.pv-console-countdown-block {
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: max(4px, calc(6px * var(--pv-console-scale)));
}

/* --- Section 1: Prize jackpot panel (Las Vegas style) --- */
.console-panel-prizes {
  --pv-prize-line4-fs: clamp(8px, min(3.8cqi, 2.4vw), 18px);
  --pv-awards-scale: 1;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  font-family: inherit;
  flex: 0 0 auto;
  min-height: 0;
  overflow: hidden;
  padding: 3% !important;
  box-sizing: border-box;
}

/* Layout-sized awards (avoid transform scale — it fights padding % and hierarchy). */
.console-prizes-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  flex: 1;
  height: 100%;
  justify-content: space-between;
  transform: none;
  transform-origin: center center;
}

/* Title = same body size as last prize line (spec); hierarchy on prize rows only */
.console-prizes-title {
  font-size: calc(var(--pv-prize-line4-fs) * var(--pv-awards-scale, 1));
  font-weight: 500;
  color: #ffd700;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  letter-spacing: calc(0.04em * var(--pv-console-scale));
  text-transform: uppercase;
  flex-shrink: 0;
  font-family: inherit;
  opacity: 0.95;
  width: 100%;
}

.console-prizes-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  justify-content: space-between;
  padding: 0;
  width: 100%;
}

/* Full rail: ordinal + fixed 2ch + flex + amount (edges align to panel padding) */
.console-prize-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  width: 100%;
  white-space: nowrap;
  overflow: visible;
  padding: 0;
  color: #ffd700;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  box-sizing: border-box;
}

.console-prize-ordinal {
  text-align: left;
  opacity: 0.95;
  flex: 0 0 auto;
}

/* Exactly two “0”-width chars; never grows/shrinks with flex */
.console-prize-gap-2 {
  flex: 0 0 2ch;
  min-width: 2ch;
  max-width: 2ch;
  width: 2ch;
  overflow: hidden;
  white-space: pre;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  box-sizing: content-box;
}

.console-prize-amount {
  text-align: left;
  font-weight: 400;
  flex: 0 1 auto;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
}

.console-prize-line1 {
  font-size: calc(clamp(18px, min(12cqi, 7.5vw), 56px) * var(--pv-awards-scale, 1));
  line-height: 1.05;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(255, 215, 0, 0.65);
  color: #ffd700;
}

.console-prize-line2 {
  font-size: calc(clamp(14px, min(7cqi, 4.2vw), 34px) * var(--pv-awards-scale, 1));
  line-height: 1.05;
  font-weight: 600;
  color: #ffd700;
}

.console-prize-line3 {
  font-size: calc(clamp(11px, min(5.2cqi, 3.2vw), 26px) * var(--pv-awards-scale, 1));
  line-height: 1.05;
  color: #ffd700;
}

.console-prize-line4 {
  font-size: calc(var(--pv-prize-line4-fs) * var(--pv-awards-scale, 1));
  line-height: 1.05;
  color: #ffd700;
}

/* --- Section 2: Leaderboard panel --- */
.console-panel-leaderboard {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--pv-console-scale));
  padding-left: calc(4px * var(--pv-console-scale));
  padding-right: calc(4px * var(--pv-console-scale));
  flex: 0 0 auto;
  min-height: 0;
  overflow: hidden;
}

.console-lb-section {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.console-lb-title {
  display: block;
  font-size: calc(clamp(10px, 1vw, 12px) * var(--pv-console-scale));
  color: #fff;
  text-align: center;
  margin: calc(2px * var(--pv-console-scale)) 0 calc(4px * var(--pv-console-scale)) 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Top 25: viewport shows exactly 4 rows; inner scrolls (~30% taller for comfort) */
.console-lb-scroll-viewport {
  height: calc(64px * var(--pv-console-scale));
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background: #000;
  border-radius: 4px;
}

.console-lb-scroll-inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  will-change: transform;
}

.console-lb-scroll-inner .console-lb-row {
  height: calc(16px * var(--pv-console-scale));
  line-height: calc(16px * var(--pv-console-scale));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Do NOT use tiny cqw multipliers (e.g. 2.8cqw): cqw is 1% of narrow console width → ~5–8px. */
  font-size: calc(clamp(10px, 1.05vw, 13px) * var(--pv-console-scale));
  font-family: inherit;
  letter-spacing: calc(clamp(0.2px, 0.5vw, 0.5px) * var(--pv-console-scale));
  color: #ccc;
}

.console-lb-scroll-inner .console-lb-row.standings-you {
  color: #ff3b3b;
  font-weight: 600;
}

.console-lb-scroll-inner.animate {
  animation: consoleLbScrollUp 12s linear infinite;
}

@keyframes consoleLbScrollUp {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.console-lb-user-section {
  flex: 1 1 auto;
  min-height: 0;
}

.console-lb-user-window {
  height: auto;
  flex: 1 1 auto;
  min-height: calc(48px * var(--pv-console-scale));
  max-height: calc(48px * var(--pv-console-scale));
  font-size: calc(clamp(10px, 1.05vw, 13px) * var(--pv-console-scale));
  line-height: calc(16px * var(--pv-console-scale));
  letter-spacing: calc(clamp(0.2px, 0.5vw, 0.5px) * var(--pv-console-scale));
  font-family: inherit;
  color: #ccc;
  background: #000;
  border-radius: 4px;
  padding: 0 calc(2px * var(--pv-console-scale)) 0 0;
  overflow: hidden;
}

.console-lb-scroll-viewport.lb-paused {
  overflow-y: auto;
  overflow-x: hidden;
}

.console-lb-scroll-viewport.lb-paused .console-lb-scroll-inner {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  transform: none;
  will-change: auto;
  animation: none;
}

.console-lb-user-window .console-lb-row {
  height: calc(16px * var(--pv-console-scale));
  line-height: calc(16px * var(--pv-console-scale));
}

.console-lb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(16px * var(--pv-console-scale));
  line-height: calc(16px * var(--pv-console-scale));
  white-space: nowrap;
  overflow: hidden;
  font-size: calc(clamp(10px, 1.05vw, 13px) * var(--pv-console-scale));
  margin: 0;
  padding: 0 calc(2px * var(--pv-console-scale)) 0 0;
}

.console-lb-rank {
  width: calc(14px * var(--pv-console-scale));
  text-align: right;
  margin-right: calc(2px * var(--pv-console-scale));
}

.console-lb-key {
  flex: 1.6;
  min-width: 0;
  max-width: 22ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

.console-lb-row.standings-you .console-lb-key,
.console-lb-row.you .console-lb-key {
  min-width: min(20ch, 72%);
  text-overflow: clip;
}

.console-lb-points {
  width: auto;
  min-width: calc(22px * var(--pv-console-scale));
  flex-shrink: 0;
  text-align: right;
  color: #81c784;
}

.console-lb-row.you {
  color: #e53935;
  font-weight: bold;
}

.standings-you {
  color: #ff3b3b;
  font-weight: 600;
}

/* --- Section 3: Image rolling viewer --- */
.console-panel-feed {
  overflow: hidden;
  padding: calc(6px * var(--pv-console-scale));
}

.console-feed-viewport {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  border-radius: calc(4px * var(--pv-console-scale));
  background: #000;
}

.console-feed-viewport .scrolling-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: calc(10px * var(--pv-console-scale));
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  padding: calc(4px * var(--pv-console-scale)) 0;
}

.console-feed-viewport .thumbnail-wrap {
  border-radius: calc(4px * var(--pv-console-scale));
  overflow: hidden;
  background: #111;
}

.console-feed-viewport .thumbnail,
.console-feed-viewport .mockery-image {
  width: 100%;
  height: auto;
  display: block;
}

.console-feed-viewport .pv-console-feed-placeholder {
  aspect-ratio: 1 / 1;
  min-height: calc(120px * var(--pv-console-scale, 1));
  background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
  box-sizing: border-box;
}

.console-feed-viewport .mockery-image {
  object-fit: contain;
}

@keyframes consoleScrollUp {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.console-feed-viewport .scrolling-grid.animate {
  animation: consoleScrollUp 103s linear infinite;
}

/* --- Extended Game Console drawer (overlays grid only, triggered by timer/panels) --- */
.pv-extended-console-drawer {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  overflow: hidden;
  background: #000;
  z-index: 500;
  transition: width 0.35s ease-out;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

/* Force drawer top row flush under ADS - no gap */
body.pv-drawer-open #pv-content {
  gap: 0;
}

body.pv-drawer-open #pv-main {
  overflow: hidden !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.pv-extended-console-drawer.open {
  width: 100%;
}

.pv-extended-console-drawer-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
}

.pv-extended-console-drawer-left {
  width: 75%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid #222;
  padding-right: calc(12px * var(--pv-ui-scale));
  box-sizing: border-box;
  font-family: inherit;
}

.pv-extended-console-drawer-right {
  width: 25%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Right column: two stacked panels — USER ACTIONS (top), HOW TO PLAY (bottom) */
.pv-extended-console-right-panel {
  padding: calc(12px * var(--pv-ui-scale));
  border-bottom: 1px solid #222;
  font-size: 0.95em;
  color: #888;
  box-sizing: border-box;
}

.pv-extended-console-right-panel:last-child {
  border-bottom: none;
}

.pv-user-actions-panel {
  flex: 0 0 50%;
  min-height: 0;
  position: relative;
}

.pv-user-actions-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  /* Even inset top/bottom within the USER ACTIONS panel (close control is absolutely positioned). */
  padding: calc(28px * var(--pv-ui-scale, 1)) calc(10px * var(--pv-ui-scale, 1));
  min-height: 0;
}

.pv-how-to-play-panel {
  flex: 0 0 50%;
  min-height: 0;
  overflow-x: visible;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.pv-right-panel-title {
  margin: 0;
  font-size: calc(clamp(10px, 1.1vw, 14px) * var(--pv-ui-scale));
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- How to Play (content in bottom panel) --- */

.pv-how-to-play-inner {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  padding: calc(4px * var(--pv-ui-scale)) calc(6px * var(--pv-ui-scale));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  overflow-wrap: break-word;
  word-break: break-word;
}

.pv-how-to-play-title {
  align-self: center;
  margin: 0 0 calc(10px * var(--pv-ui-scale)) 0;
  font-size: calc(clamp(12px, 1.2vw, 14px) * var(--pv-ui-scale));
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

.pv-how-to-play-rules {
  margin: 0;
  width: 100%;
  max-width: 100%;
  padding-left: calc(6px * var(--pv-ui-scale));
  padding-right: calc(6px * var(--pv-ui-scale));
  list-style-position: inside;
  text-align: left;
  align-self: stretch;
  font-size: calc(clamp(13px, 1.1vw, 16px) * var(--pv-ui-scale));
  line-height: 1.5;
  color: #fff;
  overflow-wrap: break-word;
  word-break: break-word;
}

.pv-how-to-play-rules li {
  margin-bottom: calc(6px * var(--pv-ui-scale));
  text-align: left;
  overflow-wrap: break-word;
  word-break: break-word;
}

.pv-how-to-play-rules li:last-child {
  margin-bottom: 0;
}

.pv-how-to-play-more {
  margin: calc(14px * var(--pv-ui-scale)) 0;
  font-size: calc(clamp(11px, 0.95vw, 13px) * var(--pv-ui-scale));
  text-align: center;
}

.pv-how-to-play-link {
  color: #888;
  text-decoration: none;
  cursor: pointer;
}

.pv-how-to-play-link:hover {
  color: #aaa;
  text-decoration: underline;
}

.pv-how-to-play-disclaimer {
  margin: 0;
  font-size: calc(clamp(11px, 0.95vw, 13px) * var(--pv-ui-scale));
  color: #888;
  line-height: 1.3;
  text-align: center;
}

/* --- Gallery header: left-aligned above gallery grid, with breathing room --- */
.pv-extended-console-gallery-header {
  flex-shrink: 0;
  font-size: calc(1.1em * var(--pv-ui-scale));
  color: #ffd700;
  letter-spacing: 0.02em;
  text-align: center;
  font-family: inherit;
  padding: calc(12px * var(--pv-ui-scale)) calc(12px * var(--pv-ui-scale)) calc(8px * var(--pv-ui-scale)) calc(12px * var(--pv-ui-scale));
  margin: 0 0 calc(4px * var(--pv-ui-scale)) 0;
  line-height: 1.2;
}

/* Emphasis used by the dynamic gallery header. */
.pv-vote-now {
  color: #e53935;
  font-weight: 700;
}

/* Close button inside USER ACTIONS panel: top-right corner */
.pv-user-actions-panel .pv-extended-console-drawer-close {
  position: absolute;
  top: calc(8px * var(--pv-ui-scale, 1));
  right: calc(8px * var(--pv-ui-scale, 1));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(6px * var(--pv-ui-scale, 1));
  min-width: 0;
}

#key-card > header,
#pv-legal-card > header,
#username-card > header {
  position: relative;
  padding-right: calc(116px * var(--pv-ui-scale, 1));
  box-sizing: border-box;
}

.pv-unified-close {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(6px * var(--pv-ui-scale, 1));
  min-width: 0;
}

.pv-user-actions-panel .pv-right-panel-title {
  align-self: center;
  text-align: center;
  width: 100%;
  padding-right: 0;
  margin: 0 0 calc(8px * var(--pv-ui-scale, 1)) 0;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Five actions: equal spacing between items and equal space above first / below last. */
.pv-user-actions-buttons {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-evenly;
  min-height: 0;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Match top-bar photo status pill (NOT UPLOADED / UPLOADED) visual language. */
.pv-user-actions-btn {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  margin: 0;
  padding: calc(4.5px * var(--pv-ui-scale, 1)) calc(12px * var(--pv-ui-scale, 1));
  border-radius: 999px;
  border: calc(2px * var(--pv-ui-scale, 1)) solid #fff;
  background: #c62828;
  color: #fff;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", sans-serif;
  font-weight: 600;
  font-size: calc(14px * var(--pv-ui-scale));
  letter-spacing: 0.05em;
  line-height: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, filter 0.15s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  align-self: center;
}

.pv-user-actions-btn:hover {
  filter: brightness(1.05);
  text-decoration: none;
}

.pv-user-actions-btn.is-disabled,
.pv-user-actions-btn:disabled,
.pv-user-actions-btn[aria-disabled="true"] {
  background: #2a2a2a;
  color: #8a8a8a;
  border-color: #6a6a6a;
  pointer-events: none;
  cursor: default;
  box-shadow: none;
}

.pv-user-actions-btn.is-muted {
  background: #2a2a2a;
  color: #8a8a8a;
  border-color: #6a6a6a;
  box-shadow: none;
}

.pv-how-to-play-more {
  margin: calc(14px * var(--pv-ui-scale)) 0;
  text-align: center;
}

.pv-how-to-play-more .pv-how-to-play-more-btn {
  width: auto;
  min-width: min(100%, calc(210px * var(--pv-ui-scale)));
  margin: 0 auto;
  display: inline-flex;
}

/* --- Competition gallery (3 columns, infinite scroll) --- */
.pv-extended-console-gallery {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(10px * var(--pv-ui-scale)) calc(12px * var(--pv-ui-scale)) calc(12px * var(--pv-ui-scale));
  -webkit-overflow-scrolling: touch;
}

.pv-extended-console-bottom-link {
  flex-shrink: 0;
  display: block;
  padding: calc(8px * var(--pv-ui-scale)) calc(12px * var(--pv-ui-scale)) calc(10px * var(--pv-ui-scale));
  font-size: calc(1.125em * var(--pv-ui-scale));
  font-weight: bold;
  font-family: inherit;
  color: #c9a227;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
  border-top: 1px solid #1a1a1a;
}

.pv-extended-console-bottom-link:hover {
  color: #e0b83d;
}

.pv-extended-console-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 12px;
  align-content: start;
}

.pv-extended-console-gallery-card {
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pv-extended-console-gallery-card.selected {
  border-color: #e53935;
  box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.35);
}

.pv-extended-console-gallery-card--owner-highlight {
  border-color: #32cd32;
  box-shadow: 0 0 0 1px rgba(50, 205, 50, 0.75);
}

.pv-extended-console-gallery-card-image-wrap {
  position: relative;
  aspect-ratio: 1;
  background: #0a0a0a;
  overflow: hidden;
  cursor: pointer;
}

.pv-extended-console-gallery-card-image-wrap--empty {
  cursor: default;
}

.pv-extended-console-gallery-card-placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: center;
  background: linear-gradient(155deg, #151515 0%, #080808 100%);
  color: #4a4a4a;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
}

.pv-extended-console-gallery-card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  vertical-align: middle;
  pointer-events: none;
}

.pv-extended-console-gallery-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px 4px;
  font-size: 11px;
  font-family: inherit;
  color: #999;
  letter-spacing: 0.5px;
  gap: 8px;
}

.pv-extended-console-gallery-card-key {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pv-extended-console-gallery-card-standing {
  flex-shrink: 0;
  color: #aaa;
}

.pv-extended-console-gallery-card-votes {
  flex-shrink: 0;
  color: #ccc;
  font-variant-numeric: tabular-nums;
}

.pv-extended-console-vote-btn {
  position: absolute;
  bottom: calc(8px * var(--pv-ui-scale));
  right: calc(8px * var(--pv-ui-scale));
  padding: calc(6px * var(--pv-ui-scale)) calc(12px * var(--pv-ui-scale));
  border-radius: 999px;
  border: calc(2px * var(--pv-ui-scale)) solid #fff;
  font-size: calc(11px * var(--pv-ui-scale));
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  background: #444;
  color: #ccc;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.pv-extended-console-vote-btn:hover {
  background: #555;
  color: #fff;
}

.pv-extended-console-vote-btn.selected {
  background: #2e7d32;
  color: #fff;
}

.pv-extended-console-vote-btn.disabled,
.pv-extended-console-vote-btn:disabled {
  background: #2a2a2a;
  color: #8a8a8a;
  border-color: #6a6a6a;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}

.pv-extended-console-vote-btn.disabled:hover,
.pv-extended-console-vote-btn:disabled:hover {
  background: #2a2a2a;
  color: #8a8a8a;
}

/* --- Gallery image focus overlay (below ads) --- */
.pv-gallery-image-focus-overlay {
  display: none;
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
}

.pv-gallery-image-focus-overlay.visible {
  display: flex;
}

.pv-gallery-image-focus-backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.pv-gallery-image-focus-content {
  position: relative;
  width: 40vw;
  height: 40vh;
  min-width: 280px;
  min-height: 200px;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pv-gallery-image-focus-content img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.pv-gallery-image-focus-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 40px;
  height: 40px;
  border: 1px solid #444;
  border-radius: 8px;
  background: #1a1a1a;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.pv-gallery-image-focus-close:hover {
  background: #333;
}

.pv-extended-console-close-label {
  font-size: calc(12px * var(--pv-ui-scale, 1));
  color: #888;
  text-transform: lowercase;
}

.pv-extended-console-close-btn {
  width: calc(33px * var(--pv-ui-scale, 1));
  height: calc(33px * var(--pv-ui-scale, 1));
  padding: 0;
  border: 1px solid #444;
  border-radius: calc(6px * var(--pv-ui-scale, 1));
  background: #111;
  color: #fff;
  font-size: calc(21px * var(--pv-ui-scale, 1));
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.pv-extended-console-close-btn:hover {
  background: #222;
  border-color: #666;
}

/* Upload Photo reader (legal modal) */
.pv-upload-layout {
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--pv-ui-scale, 1));
}

.pv-upload-layout-title {
  width: 100%;
  text-align: center;
}

.pv-upload-layout-body {
  display: flex;
  align-items: flex-start;
  gap: calc(14px * var(--pv-ui-scale, 1));
  width: 100%;
}

.pv-upload-layout-left {
  flex: 2 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pv-upload-layout-right {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pv-upload-current-photo-title,
.pv-upload-share-title {
  font-weight: 700;
  text-align: center;
}

.pv-upload-current-photo-box {
  min-height: calc(220px * var(--pv-ui-scale, 1));
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: calc(12px * var(--pv-ui-scale, 1));
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(8px * var(--pv-ui-scale, 1));
  box-sizing: border-box;
}

.pv-upload-current-photo-box--highlight {
  border-color: #7fd0ff;
  box-shadow: 0 0 0 2px rgba(127, 208, 255, 0.35);
}

.pv-upload-current-photo-empty {
  font-size: 0.78em;
  opacity: 0.85;
  text-align: center;
}

.pv-upload-current-photo-img {
  width: 100%;
  max-height: calc(320px * var(--pv-ui-scale, 1));
  object-fit: contain;
  border-radius: calc(8px * var(--pv-ui-scale, 1));
}

.pv-upload-share-link {
  text-align: center;
  color: #9ec6ff;
  font-size: 0.78em;
  text-decoration: underline;
  cursor: pointer;
}

.pv-upload-share-qr-wrap {
  display: flex;
  justify-content: center;
}

.pv-upload-share-qr-img {
  width: calc(120px * var(--pv-ui-scale, 1));
  height: calc(120px * var(--pv-ui-scale, 1));
  border-radius: calc(6px * var(--pv-ui-scale, 1));
}

.pv-upload-copy-link-btn {
  width: auto;
  min-width: calc(160px * var(--pv-ui-scale, 1));
  align-self: center;
}

.pv-upload-share-status {
  min-height: 1.2em;
  text-align: center;
  font-size: 0.72em;
}

.pv-upload-reader-root .pv-upload-requirements li {
  font-weight: 400;
}

.pv-upload-reader-root .pv-upload-legal-fineprint {
  font-size: 0.6em;
  line-height: 1.55;
  margin: 4px 0 0 0;
  padding-left: 1.35em;
  font-weight: 400;
  list-style-type: disc;
}

.pv-upload-reader-root .pv-upload-legal-fineprint li {
  font-weight: 400;
  margin-bottom: 0.4em;
}

.pv-upload-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(120px * var(--pv-ui-scale, 1));
  margin-top: 6px;
  padding: calc(16px * var(--pv-ui-scale, 1));
  border: 2px dashed rgba(255, 255, 255, 0.35);
  border-radius: calc(12px * var(--pv-ui-scale, 1));
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.pv-upload-dropzone:hover,
.pv-upload-dropzone--hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(30, 30, 30, 0.55);
}

.pv-upload-dropzone-text {
  font-weight: 400;
  font-size: 0.92em;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.pv-upload-file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pv-upload-status {
  font-weight: 400;
  font-size: 0.85em;
  min-height: 1.2em;
}

@media (max-width: 980px) {
  .pv-upload-layout-body {
    flex-direction: column;
  }
}