:root {
    --night: #0a1428;
    --terrace: #13213a;
    --stand: #1b2d4d;
    --seat: #2b4270;
    --chalk: #eef2f5;
    --mist: #9fb0c9;
    --amber: #ffb000;
    --pitch: #1e7a46;
    --pitch-2: #22874e;
    --kit: #d7263d;
    --violet: #6b4bd8;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; min-height: 100%; overflow-x: hidden; }
  body { background: var(--night); color: var(--chalk); font-family: 'Pixelify Sans', sans-serif; font-size: 17px; line-height: 1.4; font-variant-ligatures: none; }
  #bg { position: fixed; inset: 0; width: 100vw; height: 100vh; image-rendering: pixelated; z-index: 0; }
  .veil { position: fixed; inset: 0; z-index: 0; background: radial-gradient(90% 70% at 50% 45%, rgba(10,20,40,.55), rgba(10,20,40,.88)); }
  main { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; padding: 28px 16px 48px; }
  [hidden] { display: none !important; }
  html.loading body { opacity: 0; }
  body { transition: opacity .15s ease-out; }
  body.playing { height: 100vh; overflow: hidden; }
  body.playing main { height: 100vh; overflow: hidden; }

  .panel { background: rgba(19,33,58,.86); backdrop-filter: blur(3px); border-radius: 8px; box-shadow: inset 0 0 0 2px var(--seat), 0 10px 30px rgba(0,0,0,.35); }

  /* hub */
  .sublogo { font-family: 'Jersey 10', sans-serif; font-size: clamp(24px, 6vw, 34px); letter-spacing: .04em; color: var(--amber); margin: 6px 0 0; }
  .logo { font-family: 'Jersey 10', sans-serif; font-size: clamp(56px, 16vw, 112px); line-height: .82; margin: 36px 0 0; color: var(--chalk); text-shadow: 4px 4px 0 var(--kit), 8px 8px 0 rgba(0,0,0,.35); }
  .lede { color: var(--mist); max-width: 34ch; margin: 18px 0 26px; }
  .kick { display: block; width: 100%; font-family: 'Jersey 10', sans-serif; font-size: 40px; letter-spacing: .02em; color: var(--night); background: var(--amber); border: 0; border-radius: 6px; padding: 10px 0 6px; cursor: pointer; box-shadow: 0 6px 0 #b37b00, 0 0 30px rgba(255,176,0,.35); transition: transform .08s, box-shadow .08s; }
  .kick:active { transform: translateY(4px); box-shadow: 0 2px 0 #b37b00; }
  .meta { display: flex; justify-content: space-between; color: var(--mist); font-size: 14px; margin-top: 14px; }
  .legend { margin-top: 30px; padding: 14px 16px; }
  .legend h2 { font-family: 'Jersey 10', sans-serif; font-weight: 400; font-size: 28px; margin: 0 0 8px; }
  .legend ul { list-style: none; margin: 0; padding: 0; }
  .legend li { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
  .legend li canvas { width: 40px; height: 26px; image-rendering: pixelated; }
  #copyFlags { margin-top: 10px; }
  .legend li span:last-child { margin-left: auto; font-family: Doto, monospace; font-weight: 900; color: var(--amber); }

  /* play */
  .top { display: flex; align-items: center; justify-content: space-between; }
  .pips { display: flex; gap: 6px; }
  .pip { width: 12px; height: 12px; background: var(--seat); }
  .pip.done { background: var(--chalk); }
  .pip.miss { background: #55657f; }
  .pip.now { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
  .clock { font-family: Doto, monospace; font-weight: 900; font-size: 34px; color: var(--amber); text-shadow: 0 0 12px rgba(255,176,0,.45); }
  .clock.low { color: var(--kit); text-shadow: 0 0 12px rgba(215,38,61,.6); animation: blink .5s steps(2) infinite; }
  @keyframes blink { 50% { opacity: .45; } }
  .prompt { font-family: 'Jersey 10', sans-serif; font-size: clamp(44px, 11vw, 60px); line-height: .9; margin: 12px 0 16px; min-height: 2em; }
  .prompt.enter { animation: drop .32s steps(4) both; }
  @keyframes drop { from { transform: translateY(-14px); opacity: 0; } }
  form { display: flex; gap: 8px; }
  /* No answer box during the 3-2-1 or before the prompt's clock has started; visibility keeps the layout still */
  .qlayer.waiting form { visibility: hidden; }
  #guess { flex: 1; min-width: 0; font-family: 'Pixelify Sans', sans-serif; font-size: 22px; color: var(--chalk); background: rgba(10,20,40,.7); border: 0; border-radius: 6px; padding: 10px 12px; box-shadow: inset 0 0 0 2px var(--seat); }
  #guess:focus { outline: none; box-shadow: inset 0 0 0 2px var(--amber); }
  #guess:disabled { opacity: .6; }
  .shoot { font-family: 'Jersey 10', sans-serif; font-size: 28px; color: var(--night); background: var(--chalk); border: 0; border-radius: 6px; padding: 4px 16px 0; cursor: pointer; }
  .shoot:disabled { opacity: .4; cursor: default; }

  .ask { margin-top: 12px; padding: 12px 14px; }
  .ask p { margin: 0 0 10px; }
  .ask.bad { box-shadow: inset 0 0 0 2px var(--kit); }
  .ask.bad p { color: #ff7a8a; font-weight: 600; }
  #guess.nope { animation: nope .3s steps(4); box-shadow: inset 0 0 0 2px var(--kit); }
  @keyframes nope { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
  .choices { display: flex; flex-wrap: wrap; gap: 8px; }
  .choices button, .ghost { font-family: 'Pixelify Sans', sans-serif; font-size: 16px; color: var(--chalk); background: var(--stand); border: 0; border-radius: 4px; padding: 8px 12px; cursor: pointer; box-shadow: inset 0 0 0 2px var(--seat); }
  .choices button:hover, .ghost:hover { box-shadow: inset 0 0 0 2px var(--mist); }
  .choices button.yes { background: var(--chalk); color: var(--night); box-shadow: none; }

  .tier { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 14px; border-radius: 6px; animation: pop .34s cubic-bezier(.2,1.6,.4,1) both; }
  @keyframes pop { from { transform: scale(.85); opacity: 0; } }
  .tier canvas { width: 60px; height: 39px; image-rendering: pixelated; flex: none; }
  .tier .txt { flex: 1; min-width: 0; }
  .tier .name { font-family: 'Jersey 10', sans-serif; font-size: 34px; line-height: .9; }
  .tier .why { font-size: 14px; opacity: .9; margin-top: 4px; }
  .tier .pts { font-family: Doto, monospace; font-weight: 900; font-size: 34px; }
  .after { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
  .next { width: 100%; font-family: 'Jersey 10', sans-serif; font-size: 30px; color: var(--night); background: var(--amber); border: 0; border-radius: 6px; padding: 6px 16px 2px; cursor: pointer; box-shadow: 0 4px 0 #b37b00; }

  /* the question fills the screen over a dimmed table; answering fades it away and the table takes over */
  .qlayer { position: relative; z-index: 2; min-height: calc(100vh - 76px); display: flex; flex-direction: column; justify-content: center; transition: opacity .3s ease, transform .3s ease; }
  .qlayer .top { position: absolute; top: 0; left: 0; right: 0; }
  .qlayer .prompt { font-size: clamp(52px, 13vw, 76px); text-shadow: 0 4px 24px rgba(10,20,40,.9); }
  .qlayer::before { content: ''; position: absolute; inset: -20vh -16px; z-index: -1; background: radial-gradient(60% 45% at 50% 50%, rgba(10,20,40,.82), rgba(10,20,40,0)); pointer-events: none; }
  #play.climbing .qlayer, #play.landed .qlayer { opacity: 0; transform: translateY(-28px); pointer-events: none; }
  .board { position: fixed; top: 0; bottom: 0; left: 50%; width: min(520px, calc(100vw - 32px)); transform: translateX(-50%); overflow: hidden; z-index: 1; border-radius: 0; opacity: .2; transition: opacity .35s ease; }
  #play.climbing .board, #play.landed .board { opacity: 1; }
  .ride { position: absolute; right: 10px; top: -15px; z-index: 3; display: none; align-items: center; gap: 6px; font-family: 'Pixelify Sans', sans-serif; font-size: 14px; font-weight: 600; padding: 2px 8px; border-radius: 4px; white-space: nowrap; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
  .ride.show { display: flex; animation: pop .34s cubic-bezier(.2,1.6,.4,1) both; }
  .ride b, .pin b { font-family: Doto, monospace; font-weight: 900; }
  .pin { position: absolute; right: 10px; top: 0; z-index: 1; display: flex; gap: 4px; height: 20px; will-change: transform; pointer-events: none; }
  .pin span { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; padding: 0 7px; border-radius: 3px; white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,.35); }
  .pin::before { content: ''; position: absolute; right: 100%; top: 50%; width: 600px; border-top: 1px dashed rgba(238,242,245,.28); }
  .shaker { position: absolute; inset: 0; }
  .dock { position: fixed; left: 50%; bottom: 16px; width: min(520px, calc(100vw - 32px)); transform: translateX(-50%); z-index: 3; }
  .dock .tier { box-shadow: 0 10px 30px rgba(0,0,0,.45); }
  /* the GOAT moment: blackout with a spotlight, then the table steps aside for the crowd's tifo */
  /* a spotlight frame around your row; its huge shadow is the dark. it sits between the table and the card, so the card stays lit */
  /* GOAT spotlight (user): the stadium's two floodlight towers throw beams that cross on your row,
     over a soft round glow with no hard edge. The beams are positioned in trackSpot. */
  #spot { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .12s steps(2); --x: 50vw; --y: 50vh; --r: 200px;
    background: radial-gradient(circle var(--r) at var(--x) var(--y), rgba(255,244,214,.32) 0%, rgba(255,240,200,.18) 45%, rgba(2,4,10,.5) 78%, rgba(2,4,10,.94) 100%); }
  /* Both beams are painted on one canvas as solid light on black, each pixel keeping the brighter
     beam, so where they cross the light never adds up; the canvas is blurred once and screened over
     the scene, where black adds nothing */
  /* the light bars and their corner housings (user's sketch), drawn above the light */
  #fixtures { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2; pointer-events: none; opacity: 0; }
  #beams { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2; pointer-events: none; opacity: 0; filter: blur(8px); mix-blend-mode: screen; }
  #play.goatshow .board { opacity: .1 !important; }
  #play.goatshow .dock { opacity: 0; }
  .dock { transition: opacity .25s; }
  .you.goldrow { box-shadow: 0 0 0 2px #ffc93a, 0 0 28px rgba(255,201,58,.7); }
  .row { position: absolute; left: 0; right: 0; top: 0; height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 16px; font-size: 18px; will-change: transform; border-top: 1px solid rgba(159,176,201,.1); }
  .row .rk, .you .rk { width: 22px; font-family: Doto, monospace; font-weight: 700; color: var(--mist); }
  .row img, .you img { width: 21px; height: 24px; image-rendering: pixelated; }
  .row .club, .you .club { flex: 1; }
  .row .p { font-family: Doto, monospace; font-weight: 700; color: var(--amber); }
  .row.div { justify-content: center; font-family: 'Jersey 10', sans-serif; font-size: 28px; color: var(--amber); background: rgba(255,176,0,.07); }
  .you { position: absolute; left: 0; right: 0; top: 0; height: 48px; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: repeating-linear-gradient(90deg, var(--pitch) 0 36px, var(--pitch-2) 36px 72px); box-shadow: 0 0 0 2px var(--chalk), 0 8px 24px rgba(0,0,0,.35); font-family: 'Jersey 10', sans-serif; font-size: 28px; }
  .you .rk { color: var(--chalk); }
  .you .p { font-family: Doto, monospace; font-weight: 900; font-size: 20px; }
  .shade { position: absolute; left: 0; right: 0; height: 22vh; z-index: 2; pointer-events: none; }
  .shade.t { top: 0; background: linear-gradient(var(--night), transparent); }
  .shade.b { bottom: 0; background: linear-gradient(transparent, var(--night)); }
  .promo { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; }
  .promo span { font-family: 'Jersey 10', sans-serif; font-size: 40px; color: var(--night); background: var(--amber); padding: 4px 18px 0; border-radius: 4px; opacity: 0; transform: scale(.8); transition: opacity .15s, transform .3s cubic-bezier(.2,1.6,.4,1); }
  .promo.show span { opacity: 1; transform: none; }

  .count { position: fixed; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; font-family: 'Jersey 10', sans-serif; font-size: 200px; color: var(--amber); text-shadow: 6px 6px 0 var(--kit); pointer-events: none; }
  .count span { animation: zoom .6s steps(5) both; }
  @keyframes zoom { from { transform: scale(1.8); opacity: 0; } 40% { opacity: 1; } }

  /* full time */
  .ft { font-family: 'Jersey 10', sans-serif; font-size: 80px; line-height: .85; margin: 24px 0 6px; text-shadow: 4px 4px 0 var(--kit); }
  .finish { color: var(--mist); margin: 0 0 18px; }
  .finish b { color: var(--chalk); font-weight: 600; }
  .total { font-family: Doto, monospace; font-weight: 900; font-size: 56px; color: var(--amber); text-shadow: 0 0 16px rgba(255,176,0,.4); }
  .recap { list-style: none; margin: 18px 0 0; padding: 6px 14px; }
  .recap li { border-top: 1px solid rgba(159,176,201,.12); }
  .recap li:first-child { border-top: 0; }
  .recap summary { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; list-style: none; }
  .recap summary::-webkit-details-marker { display: none; }
  .recap summary::after { content: '+'; font-family: 'Jersey 10', sans-serif; font-size: 26px; color: var(--mist); width: 14px; text-align: center; }
  .recap details[open] summary::after { content: '-'; }
  .recap canvas { width: 40px; height: 26px; image-rendering: pixelated; flex: none; }
  .pool { padding: 0 0 14px; }
  .final { margin-top: 18px; padding: 6px 0 0; overflow: hidden; }
  .final h2 { font-family: 'Jersey 10', sans-serif; font-weight: 400; font-size: 32px; color: var(--amber); margin: 2px 16px 6px; }
  .frow { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 16px; border-top: 1px solid rgba(159,176,201,.1); }
  .frow .rk { width: 22px; font-family: Doto, monospace; font-weight: 700; color: var(--mist); }
  .frow img { width: 21px; height: 24px; image-rendering: pixelated; }
  .frow .club { flex: 1; }
  .frow .p { font-family: Doto, monospace; font-weight: 700; color: var(--amber); }
  .frow.me { background: repeating-linear-gradient(90deg, var(--pitch) 0 36px, var(--pitch-2) 36px 72px); box-shadow: inset 0 0 0 2px var(--chalk); font-family: 'Jersey 10', sans-serif; font-size: 26px; }
  .frow.me .rk, .frow.me .p { color: var(--chalk); }
  .tierlist { margin-top: 10px; }
  .th { display: flex; align-items: center; gap: 8px; font-family: 'Jersey 10', sans-serif; font-size: 22px; }
  .th canvas { width: 30px; height: 20px; }
  .th .n { margin-left: auto; font-family: Doto, monospace; font-weight: 900; font-size: 14px; color: var(--amber); }
  .names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .names span { font-size: 14px; background: var(--stand); padding: 3px 8px; border-radius: 4px; }
  .names span.mine { background: var(--amber); color: var(--night); font-weight: 600; }
  .goatline { font-size: 14px; margin-top: 6px; color: var(--mist); }
  .goatline b { color: #ffc93a; font-weight: 600; }
  .goatline.mine b { background: var(--amber); color: var(--night); padding: 0 6px; border-radius: 4px; }
  .recap .q { color: var(--mist); font-size: 13px; }
  .recap .a { font-weight: 600; }
  .recap .p { margin-left: auto; font-family: Doto, monospace; font-weight: 900; color: var(--amber); }
  .end-btns { display: flex; gap: 8px; margin-top: 18px; }
  .end-btns .kick { font-size: 32px; }
  .copied { color: var(--mist); font-size: 14px; margin-top: 8px; min-height: 1.4em; }
  button:focus-visible, input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

  /* the goat that follows you around */
  #buddy { position: fixed; left: 0; top: 0; width: 80px; height: 55px; image-rendering: pixelated; z-index: 4; pointer-events: none; filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
  #buddy.gold { filter: drop-shadow(0 0 10px rgba(255,201,58,.8)) drop-shadow(0 4px 0 rgba(0,0,0,.35)); }

  .you.bump { animation: bump .35s ease-out; }
  @keyframes bump { 12% { transform: translateY(-16px); } 45% { transform: translateY(3px); } }

  /* celebrations */
  #fx { position: fixed; inset: 0; width: 100vw; height: 100vh; image-rendering: pixelated; z-index: 6; pointer-events: none; }
  .flash { position: fixed; inset: 0; z-index: 5; background: #fffbe0; pointer-events: none; opacity: 0; }
  .flash.go { animation: flash .5s steps(5) both; }
  @keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }
  .shake { animation: shake .45s steps(6) both; }
  @keyframes shake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, -2px); } 80% { transform: translate(3px, 4px); } }
  .big { position: fixed; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; opacity: 0; }
  .big.show { animation: bigin 1.7s both; }
  @keyframes bigin { 0% { opacity: 0; transform: scale(1.6); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
  .big::before, .big::after { content: ''; position: absolute; top: -10vh; width: 40vw; height: 130vh; background: linear-gradient(rgba(255,251,224,.4), rgba(255,251,224,0) 80%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); animation: sweep 1.7s ease-in-out both; }
  .big::before { left: 0; transform-origin: 50% 0; --r: -18deg; }
  .big::after { right: 0; transform-origin: 50% 0; --r: 18deg; }
  @keyframes sweep { from { transform: rotate(var(--r)); } to { transform: rotate(calc(var(--r) * -1)); } }
  .big .t1 { position: relative; font-family: 'Jersey 10', sans-serif; font-size: clamp(90px, 24vw, 170px); line-height: .8; color: var(--amber); text-shadow: 6px 6px 0 var(--kit), 12px 12px 0 rgba(0,0,0,.4); }
  .big .t2 { position: relative; font-family: 'Jersey 10', sans-serif; font-size: clamp(34px, 8vw, 56px); color: var(--chalk); background: rgba(10,20,40,.85); padding: 2px 18px 0; margin-top: 10px; border-radius: 4px; }
  .big.goat .t1 { color: #ffc93a; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

  /* Language: a small segmented toggle, top right, off while a prompt is on screen (the clock lives there) */
  .corner { position: fixed; top: 12px; right: 12px; z-index: 5; display: flex; gap: 8px; align-items: stretch; }
  .playing .corner { display: none; }
  .langs { display: flex; padding: 3px; gap: 2px; border-radius: 6px; background: rgba(10,20,40,.78); box-shadow: inset 0 0 0 2px var(--seat); }
  .langs button { display: flex; align-items: center; gap: 6px; font-family: 'Pixelify Sans', sans-serif; font-size: 14px; font-weight: 600; color: var(--mist); background: transparent; border: 0; border-radius: 4px; padding: 5px 8px; cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .12s ease-out; }
  .langs button svg { width: 20px; height: 14px; image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(0,0,0,.35); opacity: .6; transition: opacity .15s ease; }
  .langs button[aria-pressed="true"] { color: var(--night); background: var(--amber); }
  .langs button[aria-pressed="true"] svg { opacity: 1; }
  .langs button:active { transform: scale(.97); }
  @media (hover: hover) and (pointer: fine) { .langs button[aria-pressed="false"]:hover { color: var(--chalk); } }
  .langs button:focus-visible { outline: 2px solid var(--chalk); outline-offset: 1px; }

  /* Extra time: a red whistle by the clock, and the fourth official's board when it's used */
  .perk { display: flex; justify-content: flex-start; margin-top: 10px; }
  .qlayer.waiting .perk { visibility: hidden; }
  .whistle { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 0; border-radius: 6px; background: rgba(10,20,40,.7); box-shadow: inset 0 0 0 2px var(--seat); color: var(--chalk); font-family: Doto, monospace; font-weight: 900; font-size: 20px; cursor: pointer; transition: transform .12s ease-out, opacity .15s ease, box-shadow .15s ease; }
  .whistle canvas { width: 36px; height: 24px; image-rendering: pixelated; }
  @media (hover: hover) and (pointer: fine) { .whistle:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--kit); } }
  .whistle:active:not(:disabled) { transform: scale(.96); }
  .whistle:disabled { opacity: .3; cursor: default; }
  .whistle:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
  .board4 { position: fixed; top: 22%; left: 50%; z-index: 6; display: flex; gap: 14px; padding: 10px 18px; transform: translateX(-50%); background: #050608; border-radius: 6px; box-shadow: 0 0 0 3px #2a2f3a, 0 10px 30px rgba(0,0,0,.6); font-family: Doto, monospace; font-weight: 900; font-size: 56px; line-height: 1; animation: board-up .18s ease-out; }
  .board4 .min { color: #36e27a; text-shadow: 0 0 14px rgba(54,226,122,.6); }
  .board4 .add { color: #ff3b4e; text-shadow: 0 0 14px rgba(255,59,78,.6); }
  @keyframes board-up { from { opacity: 0; transform: translate(-50%, 12px) scale(.96); } }
  @media (prefers-reduced-motion: reduce) { .board4 { animation: none; } }

  /* Sound on/off, next to the language toggle */
  .mute { display: grid; place-items: center; width: 40px; padding: 0; border: 0; border-radius: 6px; background: rgba(10,20,40,.78); box-shadow: inset 0 0 0 2px var(--seat); cursor: pointer; transition: transform .12s ease-out; }
  .mute canvas { width: 22px; height: 18px; image-rendering: pixelated; }
  .mute:active { transform: scale(.94); }
  .mute:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }

  /* GOAT opening (user): red velvet curtains sweep shut, then part on the spotlit row */
  .curtain { position: fixed; top: 0; bottom: 0; width: 51vw; z-index: 5; pointer-events: none;
    background: repeating-linear-gradient(90deg, #6e0b18 0 6px, #a3152a 6px 18px, #c41f35 18px 24px, #8a0f1f 24px 32px);
    transition: transform .38s cubic-bezier(.77, 0, .175, 1); }
  .curtain::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: repeating-linear-gradient(90deg, #ffc93a 0 6px, #d99a1e 6px 10px); }
  .curtain.l { left: 0; transform: translateX(-102%); box-shadow: inset -6px 0 0 #ffc93a; }
  .curtain.r { right: 0; transform: translateX(102%); box-shadow: inset 6px 0 0 #ffc93a; }
  .curtain.shut { transform: none; }
  @media (prefers-reduced-motion: reduce) { .curtain { display: none; } }