:root {
  --video-background-primary: #120b07;
  --video-background-secondary: #2b1b12;
  --subtitle-text-color: #fff7ef;
  --subtitle-background-primary: #2b1b12;
  --subtitle-background-secondary: #5a2410;
  --playground-text-color: #fff7ef;
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  background: var(--video-background-primary);
  color: #fff7ef;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(135deg, var(--video-background-primary), var(--video-background-secondary), var(--video-background-primary)); background-size: 200% 200%; animation: video-background 12s ease-in-out infinite alternate; }
a { color: inherit; }
.background-effects { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.player-shell { position: relative; z-index: 2; }

@keyframes video-background {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

.catalog-page {
  --brand-logo-w: clamp(3.2rem, 9vw, 4.5rem);
  --digit-h: clamp(4.556rem, 10.336vw, 6.8rem);
  --digit-w: clamp(2.285rem, 5.168vw, 3.4rem);
  --countdown-headline-h: calc(var(--digit-h) + 1.15rem);
}

.catalog-shell,
.player-shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: clamp(.5rem, 2vw, 1.25rem) clamp(1rem, 4vw, 2rem) clamp(1rem, 4vw, 2rem);
}
.catalog-page .catalog-shell {
  padding-top: clamp(.55rem, 1.8vw, 1rem);
  padding-bottom: .75rem;
}

.catalog-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "premiere power brand";
  align-items: end;
  gap: clamp(.65rem, 2vw, 1.35rem);
  width: 100%;
  margin-bottom: clamp(.65rem, 1.8vw, 1rem);
  position: relative;
  z-index: 5;
}
.catalog-topbar__premiere {
  grid-area: premiere;
  min-width: 0;
  margin: 0;
  text-align: right;
  position: relative;
  z-index: 5;
}
.catalog-topbar .countdown-power {
  grid-area: power;
}
.catalog-topbar .site-brand {
  grid-area: brand;
}
.catalog-page.is-countdown-off .food-digits,
.catalog-page.is-countdown-off .digit-flash-layer {
  display: none !important;
}
.site-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3rem;
  flex: 0 0 auto;
  margin-left: 0;
  flex-shrink: 0;
  z-index: 2;
}
.catalog-page .site-brand .site-logo {
  width: calc(var(--brand-logo-w) * 1.596);
}
.catalog-page .site-brand .site-logo-link {
  filter:
    drop-shadow(0 0 5px rgba(255, 195, 105, .62))
    drop-shadow(0 0 16px rgba(255, 139, 48, .34))
    drop-shadow(0 5px 10px rgba(0, 0, 0, .58));
  transition: filter .25s ease;
}
.catalog-page .site-brand .site-lang-button {
  min-width: var(--brand-logo-w);
  max-width: var(--brand-logo-w);
  text-align: center;
  border-color: rgba(235, 169, 89, .72);
  box-shadow:
    0 0 7px rgba(255, 188, 94, .34),
    0 0 16px rgba(255, 128, 42, .18);
  transition: box-shadow .25s ease, border-color .25s ease, filter .25s ease;
}

.catalog-page .video-catalog {
  padding-top: 0;
  gap: 1rem;
}

.countdown-power {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: .14rem;
  position: relative;
  width: 1.85rem;
  height: var(--digit-h);
  margin: 0 0 .72rem;
  padding: .28rem .32rem .24rem;
  border: 2px solid #9a6438;
  border-radius: .5rem;
  background:
    linear-gradient(180deg, rgba(255, 214, 140, .14), transparent 28%),
    linear-gradient(180deg, #3a2418 0%, #1a0f0a 55%, #120a06 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 170, .22),
    inset 0 -3px 8px rgba(0, 0, 0, .55),
    0 0 8px rgba(255, 184, 77, .36),
    0 0 20px rgba(255, 119, 32, .16),
    0 4px 14px rgba(0, 0, 0, .42);
  cursor: pointer;
  font-family: "Courier New", Courier, ui-monospace, monospace;
  flex: 0 0 auto;
  flex-shrink: 0;
  overflow: visible;
  align-self: end;
  transform: scale(1.1);
  transform-origin: center bottom;
  transition: box-shadow .25s ease, border-color .25s ease, filter .25s ease;
}
.countdown-power::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: .4rem;
  border: 1px solid rgba(255, 196, 120, .12);
  pointer-events: none;
}
.countdown-power::after {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: .65rem;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(120, 255, 160, .28), transparent 42%),
    radial-gradient(circle at 50% 82%, rgba(255, 150, 70, .22), transparent 46%);
  transition: opacity .2s ease;
}
.countdown-power:hover,
.countdown-power:focus-visible {
  outline: none;
  filter: brightness(1.12);
  border-color: #c47a42;
}
.countdown-power-tag {
  font-size: clamp(.558rem, 1.35vw, .702rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .04em;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .7),
    0 0 6px currentColor,
    0 0 12px currentColor;
  transition: text-shadow .2s ease, opacity .2s ease, filter .2s ease;
}
.countdown-power-tag--on { color: #7dff9a; opacity: .45; }
.countdown-power-tag--off { color: #ff8d6b; opacity: .85; }
.countdown-power-track {
  position: relative;
  flex: 1 1 auto;
  width: .82rem;
  min-height: 1.5rem;
  border-radius: .3rem;
  background:
    linear-gradient(180deg, #0a0604, #1a100b 45%, #0a0604);
  box-shadow:
    inset 0 0 0 1px #4a3020,
    inset 0 3px 6px rgba(0, 0, 0, .85),
    inset 0 -2px 4px rgba(255, 200, 120, .08);
}
.countdown-power-knob {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 1.05rem;
  height: .82rem;
  transform: translate(-50%, -50%);
  border-radius: .28rem;
  background:
    linear-gradient(180deg, #ffe8c8 0%, #d08840 38%, #7a4018 100%);
  box-shadow:
    0 3px 6px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 3px rgba(0, 0, 0, .35);
  transition: top .22s cubic-bezier(.2, .9, .25, 1), box-shadow .22s ease;
}
.countdown-power-knob::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .55rem;
  height: .22rem;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(90, 40, 12, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.countdown-power.is-on .countdown-power-tag--on { opacity: 1; }
.countdown-power.is-on .countdown-power-tag--off { opacity: .4; }
.countdown-power.is-on .countdown-power-knob {
  top: 24%;
  box-shadow:
    0 0 10px rgba(73, 255, 122, .5),
    0 3px 6px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 3px rgba(0, 0, 0, .35);
}
.countdown-power:not(.is-on) .countdown-power-knob { top: 76%; }

.catalog-page.is-power-surge-on .site-brand .site-logo-link,
.catalog-page.is-power-surge-off .site-brand .site-logo-link {
  animation: power-logo-surge .7s ease-out;
}
.catalog-page.is-power-surge-on .site-brand .site-lang-button,
.catalog-page.is-power-surge-off .site-brand .site-lang-button {
  animation: power-lang-surge .7s ease-out;
}
.catalog-page.is-power-surge-on .countdown-power,
.catalog-page.is-power-surge-off .countdown-power {
  animation: power-switch-surge .72s ease-out;
}
.catalog-page.is-power-surge-on .countdown-power::after {
  opacity: 1;
  animation: power-switch-halo-on .72s ease-out;
}
.catalog-page.is-power-surge-off .countdown-power::after {
  opacity: 1;
  animation: power-switch-halo-off .82s ease-out;
}
.catalog-page.is-power-surge-on .countdown-power-tag--on,
.catalog-page.is-power-surge-off .countdown-power-tag--off {
  filter: brightness(1.45);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .7),
    0 0 8px currentColor,
    0 0 18px currentColor,
    0 0 28px currentColor;
}
@keyframes power-logo-surge {
  0% {
    filter:
      drop-shadow(0 0 4px rgba(255, 195, 105, .4))
      drop-shadow(0 5px 10px rgba(0, 0, 0, .58));
  }
  35% {
    filter:
      drop-shadow(0 0 10px rgba(255, 220, 140, 1))
      drop-shadow(0 0 28px rgba(255, 150, 50, .85))
      drop-shadow(0 0 48px rgba(255, 110, 30, .45))
      drop-shadow(0 5px 10px rgba(0, 0, 0, .58));
  }
  100% {
    filter:
      drop-shadow(0 0 5px rgba(255, 195, 105, .62))
      drop-shadow(0 0 16px rgba(255, 139, 48, .34))
      drop-shadow(0 5px 10px rgba(0, 0, 0, .58));
  }
}
@keyframes power-lang-surge {
  0% {
    box-shadow:
      0 0 4px rgba(255, 188, 94, .2),
      0 0 8px rgba(255, 128, 42, .1);
  }
  40% {
    border-color: #ffc878;
    box-shadow:
      0 0 12px rgba(255, 210, 120, .85),
      0 0 28px rgba(255, 140, 50, .55),
      0 0 42px rgba(255, 110, 30, .3);
  }
  100% {
    border-color: rgba(235, 169, 89, .72);
    box-shadow:
      0 0 7px rgba(255, 188, 94, .34),
      0 0 16px rgba(255, 128, 42, .18);
  }
}
@keyframes power-switch-surge {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.35); }
  100% { filter: brightness(1); }
}
@keyframes power-switch-halo-on {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes power-switch-halo-off {
  0% { opacity: .85; }
  55% { opacity: .45; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .countdown-power-knob { transition: none; }
  .catalog-page.is-power-surge-on .site-brand .site-logo-link,
  .catalog-page.is-power-surge-off .site-brand .site-logo-link,
  .catalog-page.is-power-surge-on .site-brand .site-lang-button,
  .catalog-page.is-power-surge-off .site-brand .site-lang-button,
  .catalog-page.is-power-surge-on .countdown-power,
  .catalog-page.is-power-surge-off .countdown-power {
    animation: none;
  }
}

.site-corner {
  position: fixed;
  top: .55rem;
  right: .55rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3rem;
}
.site-corner-top {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.site-logo-link {
  display: block;
  line-height: 0;
  opacity: .92;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
  transition: opacity .15s ease, transform .15s ease;
  transform-origin: center center;
}
.site-logo-link:hover,
.site-logo-link:focus-visible {
  opacity: 1;
  transform: scale(1.06);
  outline: none;
}
.site-logo-link.is-idle {
  animation: site-logo-pulse 1s ease-in-out infinite;
}
.site-logo {
  display: block;
  width: clamp(3.4rem, 10vw, 4.75rem);
  height: auto;
}
@keyframes site-logo-pulse {
  0%, 100% { opacity: .88; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .site-logo-link.is-idle { animation: none; }
}
.site-lang {
  position: relative;
  display: flex;
  justify-content: flex-end;
}
.site-lang-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.site-lang-button {
  max-width: 5.6rem;
  padding: .18rem .4rem;
  border: 1px solid #6b4833;
  background: rgba(43, 27, 18, .88);
  color: #ffe8d2;
  font-size: .65rem;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.site-lang-button:hover,
.site-lang-button:focus-visible {
  border-color: #c47a42;
  outline: none;
}
.site-lang-menu {
  position: absolute;
  top: 0;
  right: calc(100% + .3rem);
  z-index: 41;
  margin: 0;
  padding: .2rem 0;
  list-style: none;
  min-width: 8.5rem;
  max-height: min(70vh, 18rem);
  overflow: auto;
  border: 1px solid #6b4833;
  background: rgba(24, 15, 10, .96);
  box-shadow: -8px 8px 22px rgba(0, 0, 0, .45);
  text-align: right;
}
.site-lang-menu [role="option"] {
  padding: .28rem .55rem;
  font-size: .72rem;
  color: #ffe8d2;
  cursor: pointer;
  white-space: nowrap;
}
.site-lang-menu [role="option"]:hover,
.site-lang-menu [role="option"]:focus {
  background: #3a2418;
  outline: none;
}
.site-lang-menu [role="option"].is-selected {
  color: #ffb36b;
  font-weight: 700;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.eyebrow { margin: 0; color: #f38b42; font-weight: 700; }
h1 { margin: .2rem 0 0; font-size: clamp(2rem, 6vw, 3.5rem); }

.premiere-countdown {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  text-align: left;
  width: 100%;
  min-height: var(--countdown-headline-h);
}
.premiere-label {
  margin: 0 0 .35rem;
  color: #ffb36b;
  font-size: clamp(.75rem, 1.6vw, .9rem);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: right;
}
.countdown-board {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: end;
  gap: clamp(.12rem, .55vw, .28rem) clamp(.08rem, .4vw, .2rem);
  max-width: 100%;
  min-height: var(--digit-h);
}
.countdown-unit {
  display: grid;
  gap: .08rem;
  justify-items: center;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
}
.food-digits { display: flex; gap: clamp(.08rem, .35vw, .16rem); align-items: end; flex-shrink: 0; }
.sausage-digits {
  display: none;
  gap: clamp(.08rem, .35vw, .16rem);
  align-items: end;
}
.catalog-page.is-countdown-off .sausage-digits {
  display: flex;
}
.sausage-digit {
  position: relative;
  width: var(--digit-w);
  height: var(--digit-h);
  flex: 0 0 auto;
}
.sausage-segment {
  --sausage-tilt: 0deg;
  --sausage-bulge: 1;
  position: absolute;
  display: block;
  border: 1.5px solid #5a1f0c;
  border-radius: 62% 48% 58% 42% / 48% 58% 42% 62%;
  background:
    radial-gradient(circle at 24% 28%, rgba(255, 214, 160, .55) 0 5%, transparent 6%),
    radial-gradient(circle at 72% 62%, rgba(90, 24, 10, .4) 0 6%, transparent 7%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 170, 90, .22), transparent 58%),
    linear-gradient(165deg, #e89a4a 0%, #c45a28 38%, #7a2a14 78%, #4a1608 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 220, 170, .35),
    inset 0 -2px 3px rgba(50, 12, 6, .4),
    0 2px 4px rgba(0, 0, 0, .4);
}
.catalog-page.is-countdown-off .sausage-segment {
  filter: brightness(.58) saturate(.72);
  opacity: .78;
  animation: sausage-sway 2.2s ease-in-out infinite;
  transform-origin: 40% 55%;
}
.catalog-page.is-countdown-off .sausage-segment:nth-child(2n) {
  animation-delay: -.55s;
  animation-duration: 2.55s;
}
.catalog-page.is-countdown-off .sausage-segment:nth-child(3n) {
  animation-delay: -1.15s;
  animation-duration: 2.85s;
}
.catalog-page.is-countdown-off .sausage-segment:nth-child(4n) {
  animation-delay: -1.75s;
}
@keyframes sausage-sway {
  0%, 100% {
    transform: translate(0, 0) rotate(var(--sausage-tilt)) scaleX(var(--sausage-bulge)) scaleY(1);
  }
  25% {
    transform: translate(1px, -2px) rotate(calc(var(--sausage-tilt) + 3.2deg)) scaleX(calc(var(--sausage-bulge) * 1.04)) scaleY(.97);
  }
  50% {
    transform: translate(-1px, -3px) rotate(calc(var(--sausage-tilt) - 2.4deg)) scaleX(calc(var(--sausage-bulge) * .96)) scaleY(1.04);
  }
  75% {
    transform: translate(1.5px, -1px) rotate(calc(var(--sausage-tilt) + 2deg)) scaleX(calc(var(--sausage-bulge) * 1.03)) scaleY(.98);
  }
}
.sausage-segment--a,
.sausage-segment--g,
.sausage-segment--d {
  left: 12%;
  width: 76%;
  height: 18%;
}
.sausage-segment--a { top: 2%; --sausage-tilt: -4deg; --sausage-bulge: 1.05; border-radius: 70% 55% 60% 40% / 55% 65% 40% 55%; }
.sausage-segment--g { top: 41%; --sausage-tilt: 3deg; --sausage-bulge: 1.08; border-radius: 50% 70% 45% 65% / 60% 45% 65% 45%; }
.sausage-segment--d { bottom: 2%; --sausage-tilt: 5deg; --sausage-bulge: 1.04; border-radius: 45% 65% 55% 70% / 50% 55% 50% 60%; }
.sausage-segment--f,
.sausage-segment--b,
.sausage-segment--e,
.sausage-segment--c {
  width: 24%;
  height: 36%;
}
.sausage-segment--f { --sausage-tilt: -8deg; --sausage-bulge: .94; top: 10%; left: 2%; border-radius: 55% 45% 60% 40% / 40% 60% 45% 55%; }
.sausage-segment--b { --sausage-tilt: 7deg; --sausage-bulge: .95; top: 10%; right: 2%; border-radius: 40% 60% 45% 55% / 55% 40% 60% 45%; }
.sausage-segment--e { --sausage-tilt: 6deg; --sausage-bulge: .93; bottom: 10%; left: 2%; border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%; }
.sausage-segment--c { --sausage-tilt: -7deg; --sausage-bulge: .94; bottom: 10%; right: 2%; border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; }

/* Off-food look comes from --off-food-* vars set per digit group (expandable via digit-groups.json) */
.catalog-page.is-countdown-off .sausage-segment {
  border-color: var(--off-food-border, #5a3028);
  background: var(--off-food-bg,
    radial-gradient(circle at 30% 28%, rgba(255, 200, 160, .28) 0 8%, transparent 9%),
    linear-gradient(155deg, #b07050 0%, #7a4030 50%, #4a2818 100%));
  filter: var(--off-food-filter, brightness(.6) saturate(.65));
  opacity: var(--off-food-opacity, .62);
}
.catalog-page.is-countdown-off .countdown-sep::after {
  content: var(--countdown-sep, "\1F374");
  opacity: .45;
}

.catalog-page .food-digit-slot {
  width: var(--digit-w);
  height: var(--digit-h);
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .45));
}
.food-digit-slot.is-flashing {
  overflow: visible;
  z-index: 6;
  filter:
    drop-shadow(0 0 18px rgba(255, 190, 90, .65))
    drop-shadow(0 10px 16px rgba(0, 0, 0, .45));
}
.food-digit-slot.is-flashing .food-digit-reel {
  opacity: .62;
  transform: scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
.food-digit-slot.is-standing-lamp {
  overflow: visible;
  z-index: 5;
  filter:
    drop-shadow(0 0 18px var(--lamp-glow-soft, rgba(57, 255, 136, .55)))
    drop-shadow(0 0 32px var(--lamp-glow, rgba(20, 255, 90, .25)))
    drop-shadow(0 10px 16px rgba(0, 0, 0, .45));
}
.food-digit-slot.is-standing-lamp .food-digit-reel {
  opacity: .58;
  transform: scale(.98);
  transition: opacity .25s ease, transform .25s ease;
}
.digit-standing-light {
  position: absolute;
  inset: -10%;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-size: calc(var(--digit-h) * .96);
  line-height: 1;
  min-width: 1.15em;
  padding: .12em .18em;
  border-radius: .18em;
  background: var(--lamp-bg, #040a05);
  border: 2px solid var(--lamp-border, #1d4a28);
  color: var(--lamp-text, #4dff9a);
  font-family: "Courier New", Courier, ui-monospace, monospace;
  font-weight: 900;
  -webkit-text-stroke: .045em color-mix(in srgb, var(--lamp-text, #4dff9a) 70%, #000 30%);
  paint-order: stroke fill;
  box-shadow:
    inset 0 0 22px var(--lamp-inner, rgba(40, 255, 120, .35)),
    0 0 22px var(--lamp-glow, rgba(20, 255, 90, .55)),
    0 0 44px var(--lamp-glow-soft, rgba(20, 255, 90, .35)),
    0 8px 20px rgba(0, 0, 0, .5);
  text-shadow:
    0 0 8px var(--lamp-text, #39ff88),
    0 0 20px var(--lamp-glow, rgba(57, 255, 136, 1)),
    0 0 40px var(--lamp-glow-soft, rgba(20, 220, 90, .85)),
    0 2px 0 rgba(0, 0, 0, .55);
  animation: digit-standing-glow 1.35s ease-in-out infinite;
}
@keyframes digit-standing-glow {
  0%, 100% {
    opacity: .94;
    filter: brightness(1);
    transform: scale(1);
    text-shadow:
      0 0 8px var(--lamp-text, #39ff88),
      0 0 20px var(--lamp-glow, rgba(57, 255, 136, 1)),
      0 0 40px var(--lamp-glow-soft, rgba(20, 220, 90, .85)),
      0 2px 0 rgba(0, 0, 0, .55);
  }
  50% {
    opacity: 1;
    filter: brightness(1.28);
    transform: scale(1.07);
    text-shadow:
      0 0 12px var(--lamp-text, #39ff88),
      0 0 28px var(--lamp-glow, rgba(57, 255, 136, 1)),
      0 0 52px var(--lamp-glow-soft, rgba(20, 220, 90, .95)),
      0 3px 0 rgba(0, 0, 0, .65);
  }
}
.food-digit-slot:not(.is-flashing):not(.is-standing-lamp) .food-digit-reel {
  opacity: 1;
  transform: scale(1);
  transition: opacity .35s ease, transform .35s ease;
}
.food-digit-reel {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.food-digit-slot.is-spinning .food-digit-reel {
  transition: transform .72s cubic-bezier(.12, .75, .18, 1);
}
.catalog-page:not(.is-countdown-off) .food-digit {
  width: var(--digit-w);
  height: var(--digit-h);
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
  background: none;
  border: 0;
  border-radius: 0;
  animation: food-digit-hop .55s ease-in-out infinite;
  animation-delay: var(--hop, 0s);
}
.food-digit-slot:nth-child(2n) .food-digit {
  animation-duration: .48s;
}
.food-digit-slot:nth-child(3n) .food-digit {
  animation-duration: .62s;
}
.food-digit-slot.is-spinning .food-digit {
  animation: none;
}
.countdown-sep {
  position: relative;
  display: inline-grid;
  place-items: center;
  align-self: center;
  min-width: .45em;
  min-height: 1em;
  padding-bottom: calc(var(--digit-h) * 0.1);
  color: #ffcf7a;
  font-size: calc(var(--digit-h) * 0.38);
  font-weight: 900;
  line-height: 1;
  z-index: 1;
  animation: sep-blink .45s steps(1) infinite;
}
.catalog-page.is-countdown-off .countdown-sep {
  align-self: center;
  display: grid !important;
  min-width: 1.2rem;
  min-height: 1.2rem;
  margin: 0 clamp(.25rem, .7vw, .5rem) calc(var(--digit-h) * .12);
  padding: 0;
  color: transparent;
  font-size: 0;
  opacity: .72;
  animation: none;
  background: none;
  box-shadow: none;
}
.catalog-page.is-countdown-off .countdown-sep::after {
  content: "\1F374";
  display: block;
  font-size: clamp(.72rem, 1.45vw, 1.05rem);
  line-height: 1;
  filter: grayscale(1) sepia(.45) saturate(.75) brightness(.9);
}
.countdown-sep.is-flashing,
.countdown-sep.is-standing-lamp {
  animation: none;
  color: rgba(255, 207, 122, .14);
  text-shadow: none;
}
.countdown-sep.is-flashing {
  overflow: visible;
  z-index: 6;
  filter:
    drop-shadow(0 0 18px rgba(255, 190, 90, .55))
    drop-shadow(0 8px 14px rgba(0, 0, 0, .4));
}
.countdown-sep.is-standing-lamp {
  overflow: visible;
  z-index: 5;
  filter:
    drop-shadow(0 0 18px var(--lamp-glow-soft, rgba(57, 255, 136, .55)))
    drop-shadow(0 0 32px var(--lamp-glow, rgba(20, 255, 90, .25)))
    drop-shadow(0 8px 14px rgba(0, 0, 0, .4));
}
.countdown-sep.is-flashing:has(.is-long-hold) {
  filter:
    drop-shadow(0 0 20px rgba(255, 200, 100, .55))
    drop-shadow(0 10px 16px rgba(0, 0, 0, .45));
}
.countdown-sep.is-flashing:has(.is-mega-hold),
.countdown-sep.is-jackpot {
  filter:
    drop-shadow(0 0 26px rgba(255, 220, 130, .7))
    drop-shadow(0 0 42px rgba(255, 170, 60, .35))
    drop-shadow(0 10px 16px rgba(0, 0, 0, .45));
}
.countdown-sep .digit-flash--on-slot,
.countdown-sep .digit-standing-light {
  font-size: clamp(1.36rem, 5.168vw, 2.924rem) !important;
  inset: -40% -55%;
  min-width: .9em;
  padding: .08em .12em;
}
.countdown-sep .digit-flash.is-font {
  letter-spacing: 0;
}
.unit-label {
  color: #d9b79a;
  font-size: clamp(.48rem, 1vw, .62rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}
.premiere-meta {
  margin: .28rem 0 0;
  color: #ffe0c2;
  font-size: clamp(.72rem, 1.4vw, .86rem);
  text-align: right;
  line-height: 1.15;
}

@keyframes food-digit-hop {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  25% { transform: translateY(-3px) rotate(2deg); }
  50% { transform: translateY(-5px) rotate(-2deg); }
  75% { transform: translateY(-2px) rotate(3deg); }
}
@keyframes sep-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: .2; }
}

.digit-flash-layer {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
}
.digit-flash {
  position: absolute;
  display: grid;
  place-items: center;
  line-height: 1;
  opacity: 0;
  transform: scale(.82) rotate(var(--flash-rot, 0deg));
  animation: digit-flash-pop var(--flash-dur, .4s) ease-out forwards;
  user-select: none;
}
.digit-flash--on-slot {
  position: absolute;
  inset: -12%;
  width: auto;
  height: auto;
  left: auto;
  top: auto;
  font-size: calc(var(--digit-h) * .92) !important;
  z-index: 7;
  transform: scale(.7) rotate(var(--flash-rot, 0deg));
  animation: digit-flash-slot-pop var(--flash-dur, .6s) ease-in-out forwards;
}
.digit-flash--on-slot.is-long-hold {
  font-size: calc(var(--digit-h) * 1.02) !important;
  font-weight: 900;
  animation-name: digit-flash-slot-pop-long;
}
.digit-flash--on-slot.is-mega-hold {
  font-size: calc(var(--digit-h) * 1.1) !important;
  font-weight: 900;
  animation-name: digit-flash-slot-pop-mega;
}
.food-digit-slot.is-flashing:has(.is-long-hold) {
  filter:
    drop-shadow(0 0 20px rgba(255, 200, 100, .55))
    drop-shadow(0 10px 16px rgba(0, 0, 0, .45));
}
.food-digit-slot.is-flashing:has(.is-mega-hold),
.food-digit-slot.is-jackpot {
  filter:
    drop-shadow(0 0 26px rgba(255, 220, 130, .7))
    drop-shadow(0 0 42px rgba(255, 170, 60, .35))
    drop-shadow(0 10px 16px rgba(0, 0, 0, .45));
}
.digit-flash.is-font {
  color: #fff8e8;
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow:
    0 1px 0 #5a3418,
    0 0 12px rgba(255, 210, 120, .95),
    0 0 28px rgba(255, 160, 60, .85),
    0 0 48px rgba(255, 120, 40, .55),
    0 10px 22px rgba(0, 0, 0, .45);
}
.digit-flash.is-long-hold.is-font {
  letter-spacing: .05em;
  -webkit-text-stroke: .035em #ffe8b8;
  paint-order: stroke fill;
  text-shadow:
    0 2px 0 #5a3418,
    0 0 16px rgba(255, 220, 140, 1),
    0 0 34px rgba(255, 170, 60, .95),
    0 0 56px rgba(255, 120, 40, .7),
    0 12px 24px rgba(0, 0, 0, .5);
}
.digit-flash.is-mega-hold.is-font {
  letter-spacing: .07em;
  -webkit-text-stroke: .05em #fff0c8;
  paint-order: stroke fill;
  text-shadow:
    0 3px 0 #4a2810,
    0 0 20px rgba(255, 235, 170, 1),
    0 0 42px rgba(255, 190, 80, 1),
    0 0 68px rgba(255, 130, 40, .85),
    0 14px 28px rgba(0, 0, 0, .55);
}
.digit-flash.is-lamp {
  min-width: 1.15em;
  padding: .12em .18em;
  border-radius: .18em;
  background: var(--lamp-bg, #040a05);
  border: 1px solid var(--lamp-border, #1d4a28);
  box-shadow:
    inset 0 0 18px var(--lamp-inner, rgba(40, 255, 120, .35)),
    0 0 18px var(--lamp-glow, rgba(20, 255, 90, .55)),
    0 0 36px var(--lamp-glow-soft, rgba(20, 255, 90, .35)),
    0 8px 20px rgba(0, 0, 0, .5);
  color: var(--lamp-text, #4dff9a);
  font-family: "Courier New", Courier, ui-monospace, monospace;
  font-weight: 700;
  text-shadow:
    0 0 6px var(--lamp-text, #39ff88),
    0 0 16px var(--lamp-glow, rgba(57, 255, 136, 1)),
    0 0 32px var(--lamp-glow-soft, rgba(20, 220, 90, .85));
}
.digit-flash.is-long-hold.is-lamp {
  border-width: 2px;
  font-weight: 900;
  -webkit-text-stroke: .04em color-mix(in srgb, var(--lamp-text, #4dff9a) 70%, #000 30%);
  paint-order: stroke fill;
  box-shadow:
    inset 0 0 24px var(--lamp-inner, rgba(40, 255, 120, .45)),
    0 0 24px var(--lamp-glow, rgba(20, 255, 90, .65)),
    0 0 44px var(--lamp-glow-soft, rgba(20, 255, 90, .45)),
    0 10px 22px rgba(0, 0, 0, .5);
}
.digit-flash.is-mega-hold.is-lamp {
  border-width: 2px;
  font-weight: 900;
  -webkit-text-stroke: .055em color-mix(in srgb, var(--lamp-text, #4dff9a) 75%, #000 25%);
  paint-order: stroke fill;
  box-shadow:
    inset 0 0 28px var(--lamp-inner, rgba(40, 255, 120, .55)),
    0 0 30px var(--lamp-glow, rgba(20, 255, 90, .75)),
    0 0 54px var(--lamp-glow-soft, rgba(20, 255, 90, .55)),
    0 12px 26px rgba(0, 0, 0, .55);
}
@keyframes digit-flash-pop {
  0% { opacity: 0; transform: scale(.55) rotate(var(--flash-rot, 0deg)); }
  12% { opacity: 1; transform: scale(1.28) rotate(var(--flash-rot, 0deg)); }
  55% { opacity: 1; transform: scale(1.05) rotate(var(--flash-rot, 0deg)); }
  100% { opacity: 0; transform: scale(.9) rotate(var(--flash-rot, 0deg)); }
}
.premiere-countdown.is-jackpot .countdown-sep:not(.is-flashing) {
  animation: none;
  opacity: 1;
  color: #ffe7a8;
  text-shadow: 0 0 12px rgba(255, 210, 90, .7);
}
.food-digit-slot.is-jackpot {
  overflow: visible;
  z-index: 8;
  filter:
    drop-shadow(0 0 16px rgba(255, 220, 140, .55))
    drop-shadow(0 8px 14px rgba(0, 0, 0, .45));
}
.digit-flash.is-jackpot {
  animation-name: digit-flash-jackpot;
  transform: scale(1) rotate(0deg);
}
.digit-flash.is-jackpot.is-font {
  color: #fffdf4;
  -webkit-text-stroke: .055em #fff0c8;
  paint-order: stroke fill;
  text-shadow:
    0 3px 0 #4a2810,
    0 0 18px rgba(255, 235, 170, 1),
    0 0 38px rgba(255, 190, 80, 1),
    0 0 62px rgba(255, 130, 40, .85),
    0 12px 22px rgba(0, 0, 0, .45);
}
@keyframes digit-flash-jackpot {
  0% { opacity: 0; transform: scale(.82); }
  10% { opacity: 1; transform: scale(1.16); }
  20% { opacity: 1; transform: scale(1.1); }
  80% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.02); }
}
@keyframes digit-flash-slot-pop {
  0% { opacity: 0; transform: scale(.55) rotate(var(--flash-rot, 0deg)); }
  16% { opacity: 1; transform: scale(1.28) rotate(var(--flash-rot, 0deg)); }
  42% { opacity: 1; transform: scale(1.04) rotate(var(--flash-rot, 0deg)); }
  72% { opacity: .85; transform: scale(1) rotate(var(--flash-rot, 0deg)); }
  100% { opacity: 0; transform: scale(.92) rotate(var(--flash-rot, 0deg)); }
}
@keyframes digit-flash-slot-pop-long {
  0% { opacity: 0; transform: scale(.58) rotate(var(--flash-rot, 0deg)); }
  10% { opacity: 1; transform: scale(1.38) rotate(var(--flash-rot, 0deg)); }
  22% { opacity: 1; transform: scale(1.22) rotate(var(--flash-rot, 0deg)); }
  72% { opacity: 1; transform: scale(1.16) rotate(var(--flash-rot, 0deg)); }
  88% { opacity: .95; transform: scale(1.1) rotate(var(--flash-rot, 0deg)); }
  100% { opacity: 0; transform: scale(.94) rotate(var(--flash-rot, 0deg)); }
}
@keyframes digit-flash-slot-pop-mega {
  0% { opacity: 0; transform: scale(.65) rotate(var(--flash-rot, 0deg)); }
  8% { opacity: 1; transform: scale(1.45) rotate(var(--flash-rot, 0deg)); }
  18% { opacity: 1; transform: scale(1.28) rotate(var(--flash-rot, 0deg)); }
  82% { opacity: 1; transform: scale(1.24) rotate(var(--flash-rot, 0deg)); }
  94% { opacity: .98; transform: scale(1.18) rotate(var(--flash-rot, 0deg)); }
  100% { opacity: 0; transform: scale(1.04) rotate(var(--flash-rot, 0deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .digit-flash { animation: none; opacity: .85; }
  .catalog-page.is-countdown-off .sausage-segment { animation: none; }
}

@media (max-width: 720px) {
  .catalog-page {
    --brand-logo-w: clamp(2.8rem, 16vw, 3.4rem);
    --digit-h: clamp(3.672rem, 17vw, 4.76rem);
    --digit-w: clamp(1.836rem, 8.5vw, 2.38rem);
  }
  .catalog-topbar {
    gap: .45rem .55rem;
  }
  .countdown-power {
    width: 1.65rem;
    margin-bottom: .62rem;
  }
  .countdown-sep { padding-bottom: calc(var(--digit-h) * 0.08); }
  .premiere-meta {
    font-size: .68rem;
  }
  .countdown-board {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .countdown-board::-webkit-scrollbar { display: none; }
}

@media (max-width: 720px) and (orientation: portrait) {
  .catalog-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "premiere premiere"
      "power brand";
    row-gap: .45rem;
  }
  .catalog-topbar .countdown-power {
    justify-self: end;
  }
  .catalog-topbar .site-brand {
    justify-self: end;
  }
}

.video-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
  margin: 0 0 1.25rem;
}
.catalog-search-wrap {
  flex: 1 1 16rem;
}
.catalog-search-wrap input {
  width: 100%;
  max-width: 28rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid #5a4030;
  border-radius: 0.45rem;
  background: rgba(18, 11, 7, 0.55);
  color: #fff7ef;
  font: inherit;
}
.yt-subscribe {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: #c4302b;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}
.yt-subscribe:hover { background: #a82520; color: #fff; }
.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 247, 239, 0.12);
  font-size: 0.92rem;
}
.site-footer a { color: #dcc9b8; text-decoration: none; }
.site-footer a:hover { color: #fff7ef; text-decoration: underline; }
.page-prose {
  max-width: 42rem;
  padding: 1.5rem 0 3rem;
  line-height: 1.55;
  color: #fff7ef;
}
.page-prose h1 { margin: 0 0 1rem; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.page-prose a { color: #ffb37a; }
.related-strip {
  margin-top: 1.25rem;
  grid-column: 1 / -1;
}
.related-strip h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: #dcc9b8;
}
.related-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.85rem;
}
.related-list a {
  display: block;
  text-decoration: none;
  color: #fff7ef;
}
.related-list img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  margin-bottom: 0.4rem;
}
.related-list span {
  display: block;
  font-size: 0.88rem;
  line-height: 1.3;
}
.video-card {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.video-card a { display: block; text-decoration: none; }
.video-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.video-card h2 { margin: .65rem 0 .2rem; font-size: 1.1rem; }
.video-card p { margin: 0; color: #dcc9b8; }

.subtitle-output {
  --subtitle-scale: 1;
  display: flex;
  height: clamp(8.5rem, 18vw, 12.5rem);
  margin-bottom: 1rem;
  padding: 1rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-left: 4px solid #e85d04;
  background: linear-gradient(135deg, var(--subtitle-background-primary), var(--subtitle-background-secondary), var(--subtitle-background-primary));
  background-size: 200% 200%;
  animation: subtitle-background 9s ease-in-out infinite alternate;
  font-size: calc(clamp(2.35rem, 6vw, 3.8rem) * var(--subtitle-scale));
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: var(--subtitle-text-color);
}
.subtitle-output.is-title { line-height: 1.08; }

@keyframes subtitle-background {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

.player-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "video";
}
.player-layout .playground {
  display: none;
}
.player-stage {
  grid-area: video;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.player-stage .player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background: #000;
}
.player iframe { width: 100%; height: 100%; border: 0; }
.playground {
  grid-area: playground;
  position: relative;
  width: 100%;
  min-height: 0;
  background: transparent;
  pointer-events: none;
}
/* Empty right gutter — no moments/text */
.playground > * { display: none !important; }
.moment {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translate(var(--motion-x, 0), var(--motion-y, .5rem));
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.moment.is-visible { opacity: 1; visibility: visible; transform: translate(0); transition: opacity .22s ease, transform .22s ease; }
.moment button { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.moment button[hidden] { display: none !important; }
.moment img { max-width: var(--moment-size, 100%); max-height: var(--moment-size, 100%); width: 100%; height: 100%; object-fit: contain; }
.moment-text { padding: 1rem; color: var(--playground-text-color); font-size: clamp(1.4rem, 4vw, 2.5rem); font-weight: 700; text-align: center; }
.moment-label { position: absolute; right: 0; bottom: 0; left: 0; margin: 0; padding: .65rem .8rem; color: var(--playground-text-color); text-align: center; text-shadow: 0 1px 4px #000; }
.moment-label a { color: inherit; }
.player-stage .language-controls {
  position: absolute;
  right: .45rem;
  bottom: .45rem;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  gap: .35rem;
  padding: .18rem;
  border-radius: .25rem;
  background: rgba(18, 11, 7, .78);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  pointer-events: auto;
}
.language-controls button,
.player-stage .language-controls button {
  width: 2rem;
  padding: .35rem;
  border: 1px solid #6b4833;
  background: #2b1b12;
  color: #f4ebe3;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.language-controls .share-button,
.player-stage .language-controls .share-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  color: #f4ebe3;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.language-controls .share-button:hover,
.player-stage .language-controls .share-button:hover {
  border-color: #c47a4a;
  background: #3a2418;
  color: #fff;
}
.share-button__icon {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}
.share-button__done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 700;
  color: #7dffb0;
  opacity: 0;
  transform: scale(.7);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.share-button.is-done .share-button__icon {
  opacity: 0;
}
.share-button.is-done .share-button__done {
  opacity: 1;
  transform: scale(1);
}
.dialog { width: min(1100px, 96vw); max-height: 94vh; padding: 0; border: 0; background: #000; }
.dialog::backdrop { background: rgba(0, 0, 0, .8); }
.dialog img { display: block; max-width: 100%; max-height: 94vh; margin: auto; }
.dialog button { position: absolute; top: .75rem; right: .75rem; border: 0; border-radius: 50%; background: rgba(0,0,0,.75); color: #fff; font-size: 1.8rem; }

@media (orientation: landscape) {
  .subtitle-output {
    height: clamp(4.5rem, 10vw, 6.5rem);
    margin-bottom: .65rem;
    padding: .5rem .75rem;
    font-size: calc(clamp(1.7rem, 4.2vw, 2.6rem) * var(--subtitle-scale));
  }
  .player-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "video playground";
    align-items: stretch;
    gap: 0.75rem;
  }
  .player-layout .playground {
    display: block;
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
    align-self: stretch;
  }
  .player-stage {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
  }
}

/* Bigger player shell on desktop */
@media (min-width: 900px) and (orientation: landscape) {
  .player-page .player-shell,
  body:not(.catalog-page) .player-shell {
    width: min(96vw, 1400px);
  }
  .player-layout {
    grid-template-columns: minmax(0, 2fr) minmax(120px, 1fr);
  }
}