/* ============================================================
   TDT GAMES — OLGA
   Brand: the TDT sunburst. Chrome: a Mario-3 theatre curtain.
   Every screen is sized to fit; the page itself never scrolls.
   ============================================================ */

:root{
  /* brand, sampled from the TDT icon */
  --deep:#f03000;
  --mid:#ff5a00;
  --light:#ff8a1f;
  --sun:#ffb020;
  --cream:#fff3e0;

  --ink:#180c08;
  --ink-2:#2c1710;
  --paper:#fff4e2;
  --paper-2:#ffe3bd;
  --night:#1a0b06;

  --curtain-1:#e0300f;
  --curtain-2:#c4180b;
  --curtain-3:#8b0c05;
  --curtain-4:#5e0703;
  --gold:#ffb020;
  --gold-d:#c97900;
  --green:#2fae3c;
  --green-d:#17701f;
  --red:#d92b26;
  --red-d:#9a1a16;

  --b:4px;
  --r:12px;
  --font-pixel:'Press Start 2P','Courier New',ui-monospace,monospace;
  --font-ui:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --gutter:clamp(10px,1.8vw,22px);
  --nav-h:clamp(56px,8.5vh,74px);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;margin:0;}
html{overflow:hidden;}
body{
  background:var(--night);
  color:var(--paper);
  font-family:var(--font-ui);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
img{max-width:100%;display:block;}
button{font:inherit;color:inherit;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
[hidden]{display:none !important;}

/* ---------- custom scrollbar ----------
   Drawn, not styled: overlay scrollbars ignore ::-webkit-scrollbar entirely. */
.scroller{position:relative;flex:1;min-height:0;display:flex;}
.scroll-y{flex:1;min-height:0;overflow-y:auto;padding-right:30px;
  scrollbar-width:none;-ms-overflow-style:none;}
.scroll-y::-webkit-scrollbar{width:0;height:0;display:none;}
.vbar{position:absolute;right:2px;top:2px;bottom:2px;width:18px;cursor:pointer;
  background:#2b1409;border:3px solid var(--ink);border-radius:99px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6);}
.vthumb{position:absolute;left:0;right:0;top:0;min-height:30px;border-radius:99px;
  background:linear-gradient(180deg,#ffd06a,var(--sun) 45%,var(--deep));
  border:2px solid var(--ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.4);
  cursor:grab;touch-action:none;}
.vthumb:active{cursor:grabbing;filter:brightness(1.1);}
[data-device="mobile"] .scroll-y{padding-right:24px;}
[data-device="mobile"] .vbar{width:14px;}

/* ============================================================
   BACKDROP — the icon's sunburst
   ============================================================ */
.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(circle at 50% 46%,#ff9f34 0%,#ff6a12 34%,#ef4308 68%,#b52706 100%);}
.rays{position:absolute;left:50%;top:46%;width:130vmax;height:130vmax;
  transform:translate(-50%,-50%);will-change:transform;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,255,255,.18) 0deg 2.4deg, rgba(255,255,255,0) 2.4deg 10deg);
  animation:spin 150s linear infinite;}
.glow{position:absolute;inset:0;
  background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.34),rgba(255,255,255,0) 44%),
             radial-gradient(circle at 50% 120%,rgba(60,10,0,.55),transparent 55%);}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg);}}
/* the board covers the backdrop during a game: stop paying for the spin */
body[data-playing="1"] .rays{animation-play-state:paused;}

/* ============================================================
   CURTAIN BAR — persistent
   ============================================================ */
.curtain{position:relative;z-index:30;flex:none;
  background:repeating-linear-gradient(90deg,
    var(--curtain-3) 0 5px, var(--curtain-2) 5px 20px,
    var(--curtain-1) 20px 28px, var(--curtain-2) 28px 43px);
  box-shadow:0 8px 20px rgba(0,0,0,.42);}
.curtain-rod{height:9px;background:linear-gradient(180deg,#ffd98a,var(--gold) 45%,var(--gold-d));
  border-bottom:3px solid var(--ink);}
.curtain-inner{height:var(--nav-h);display:flex;align-items:center;gap:8px;
  padding:0 var(--gutter);}
.curtain-hem{height:15px;
  background:radial-gradient(circle at 50% 0,var(--curtain-3) 0 10px,rgba(0,0,0,0) 10px) 0 0/22px 15px repeat-x;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.35));}

.brand{display:flex;align-items:center;gap:9px;text-decoration:none;min-height:44px;flex:none;}
.brand img{height:clamp(24px,3.4vh,34px);width:auto;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.4));}
.brand-games{font-family:var(--font-pixel);font-size:clamp(10px,1.5vw,15px);color:var(--cream);
  text-shadow:2px 2px 0 var(--curtain-4);letter-spacing:1px;}
[data-device="mobile"] .brand-games{display:none;}

.nav-back{width:44px;height:44px;flex:none;display:none;place-items:center;cursor:pointer;
  background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:9px;
  box-shadow:0 3px 0 var(--ink);}
.nav-back svg{width:22px;height:22px;fill:currentColor;}
.nav-back.on{display:grid;}
.nav-back:active{transform:translateY(3px);box-shadow:none;}

.nav-right{margin-left:auto;display:flex;align-items:center;gap:7px;}
.nav-pts{display:flex;align-items:center;gap:7px;font-family:var(--font-pixel);
  font-size:clamp(9px,1.2vw,12px);color:var(--gold);background:rgba(0,0,0,.42);
  border:3px solid var(--curtain-4);border-radius:9px;padding:8px 11px;white-space:nowrap;}
.coin{width:15px;height:15px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 30%,#fff2a8,var(--gold) 55%,var(--gold-d));
  border:2px solid var(--ink);}
.icon-btn{width:44px;height:44px;flex:none;display:grid;place-items:center;background:var(--cream);
  color:var(--ink);border:3px solid var(--ink);border-radius:9px;box-shadow:0 3px 0 var(--ink);
  cursor:pointer;transition:background .12s,transform .1s;}
.icon-btn svg{width:21px;height:21px;fill:currentColor;}
.icon-btn:hover{background:var(--sun);}
.icon-btn:active{transform:translateY(3px);box-shadow:none;}
.icon-btn .ico-off{display:none;}
.icon-btn[aria-pressed="false"] .ico-on{display:none;}
.icon-btn[aria-pressed="false"] .ico-off{display:block;}
.icon-btn[aria-pressed="false"]{background:#bdae9f;}
/* the points chip grows with the score: let it give ground, not the buttons */
.nav-pts{min-width:0;overflow:hidden;}
.brand{min-width:0;overflow:hidden;}
[data-device="mobile"] .curtain-inner{gap:5px;padding:0 8px;}
[data-device="mobile"] .nav-right{gap:5px;}
[data-device="mobile"] .brand img{height:20px;}
[data-device="mobile"] .nav-pts{padding:6px 7px;font-size:9px;gap:4px;max-width:92px;}
[data-device="mobile"] .coin{width:12px;height:12px;}

/* ============================================================
   WIPE — the curtain drops between screens
   ============================================================ */
.wipe{position:fixed;inset:0;z-index:60;pointer-events:none;}
.wipe.closed{pointer-events:auto;}
.wipe i{position:absolute;top:0;height:100%;width:12.7%;transform:translateY(-101%);
  background:repeating-linear-gradient(90deg,
    var(--curtain-3) 0 5px, var(--curtain-2) 5px 20px,
    var(--curtain-1) 20px 28px, var(--curtain-2) 28px 43px);
  border-right:2px solid var(--curtain-4);
  transition:transform .34s cubic-bezier(.4,0,.6,1);}
.wipe i:nth-child(1){left:0%;transition-delay:0ms}
.wipe i:nth-child(2){left:12.5%;transition-delay:26ms}
.wipe i:nth-child(3){left:25%;transition-delay:52ms}
.wipe i:nth-child(4){left:37.5%;transition-delay:78ms}
.wipe i:nth-child(5){left:50%;transition-delay:78ms}
.wipe i:nth-child(6){left:62.5%;transition-delay:52ms}
.wipe i:nth-child(7){left:75%;transition-delay:26ms}
.wipe i:nth-child(8){left:87.5%;transition-delay:0ms}
.wipe.closed i{transform:translateY(0);}
.wipe.opening i{transform:translateY(-101%);transition-duration:.4s;}

/* ============================================================
   LAYOUT
   ============================================================ */
.app{position:relative;z-index:5;flex:1;min-height:0;display:flex;padding:var(--gutter);}
.app[data-bleed="1"]{padding:0;}
.screen{flex:1;min-height:0;width:100%;max-width:1140px;margin:0 auto;
  display:flex;flex-direction:column;gap:clamp(8px,1.4vh,16px);
  animation:screen-in .3s var(--ease-pop) both;}
@keyframes screen-in{from{opacity:0;transform:translateY(10px) scale(.99);}to{opacity:1;transform:none;}}

.head{flex:none;text-align:center;}
.eyebrow{font-family:var(--font-pixel);font-size:clamp(7px,1.1vw,10px);letter-spacing:2px;
  color:var(--paper-2);margin:0 0 6px;text-shadow:2px 2px 0 rgba(0,0,0,.45);}
.title-md{font-family:var(--font-pixel);font-size:clamp(13px,2.4vw,22px);margin:0;color:#fff;
  text-shadow:3px 3px 0 var(--ink),0 0 18px rgba(0,0,0,.35);}
.title-xl{font-family:var(--font-pixel);font-size:clamp(20px,4.4vw,40px);margin:0;color:var(--gold);
  text-shadow:0 4px 0 var(--ink),4px 4px 0 var(--ink),-4px 4px 0 var(--ink);}
.sub{font-size:clamp(12px,1.5vw,15px);color:rgba(255,255,255,.9);margin:6px 0 0;line-height:1.45;}

.panel{background:var(--paper);color:#3a2419;border:var(--b) solid var(--ink);border-radius:var(--r);
  box-shadow:0 7px 0 var(--ink),0 14px 30px rgba(0,0,0,.35);padding:clamp(12px,2vw,22px);position:relative;}
.panel-dark{background:rgba(26,11,6,.86);color:var(--paper);border-color:var(--ink);
  backdrop-filter:blur(3px);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:13px 24px;font-family:var(--font-pixel);
  font-size:clamp(9px,1.3vw,13px);letter-spacing:1px;
  background:var(--sun);color:var(--ink);border:var(--b) solid var(--ink);border-radius:var(--r);
  box-shadow:0 6px 0 var(--gold-d),0 6px 0 4px var(--ink);cursor:pointer;
  transition:transform .12s var(--ease-pop),filter .12s;text-decoration:none;}
.btn:hover{filter:brightness(1.08);transform:translateY(-2px);}
.btn:active{transform:translateY(6px);box-shadow:0 0 0 4px var(--ink);}
.btn-lg{min-height:60px;padding:16px 32px;font-size:clamp(11px,1.8vw,17px);}
.btn-green{background:var(--green);color:var(--ink);box-shadow:0 6px 0 var(--green-d),0 6px 0 4px var(--ink);}
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 0 var(--red-d),0 6px 0 4px var(--ink);}
.btn-ghost{background:var(--paper-2);box-shadow:0 6px 0 #a3744a,0 6px 0 4px var(--ink);}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:grayscale(.6);}
:where(button,a,[tabindex]):focus-visible{outline:4px solid #6ff0ff;outline-offset:3px;border-radius:6px;}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;}
.foot{flex:none;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

/* ============================================================
   TITLE
   ============================================================ */
.title-screen{align-items:center;justify-content:center;text-align:center;gap:clamp(6px,1.6vh,18px);}
.logo-big{width:min(62vw,430px);filter:drop-shadow(0 8px 0 rgba(0,0,0,.35));}
.logo-sub{font-family:var(--font-pixel);font-size:clamp(9px,1.6vw,14px);color:#fff;
  letter-spacing:3px;text-shadow:2px 2px 0 var(--ink);margin:0;}
.logo-sub b{color:var(--gold);}
.cast-row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(2px,1vw,14px);
  flex:0 1 auto;min-height:0;width:100%;}
.cast-row img{width:clamp(56px,11vw,140px);height:auto;min-height:0;
  filter:drop-shadow(0 6px 0 rgba(0,0,0,.3));animation:bob 2.6s ease-in-out infinite;}
.cast-row img:nth-child(2){animation-delay:.2s}
.cast-row img:nth-child(3){animation-delay:.4s}
.cast-row img:nth-child(4){animation-delay:.6s}
.cast-row img:nth-child(5){animation-delay:.8s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* set the way NAVCOL sets it: JetBrains Mono, uppercase, wide, between rules */
.navcol{margin-top:auto;display:inline-flex;align-items:center;gap:clamp(8px,1.4vw,14px);
  min-height:44px;padding:10px 2px;text-decoration:none;
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:500;font-size:clamp(8.5px,1vw,11px);letter-spacing:.2em;text-transform:uppercase;
  color:#fff;opacity:.92;
  text-shadow:0 2px 10px rgba(0,0,0,.7),0 1px 0 rgba(0,0,0,.5);
  transition:opacity .15s,transform .15s;}
.navcol::before,.navcol::after{content:'';flex:none;width:clamp(16px,4vw,44px);height:1px;
  background:rgba(255,255,255,.55);box-shadow:0 1px 3px rgba(0,0,0,.5);}
.navcol:hover{opacity:1;transform:translateY(-1px);}
.press{font-family:var(--font-pixel);font-size:clamp(9px,1.5vw,13px);color:#fff;
  margin:clamp(14px,3.2vh,34px) 0 0;
  text-shadow:2px 2px 0 var(--ink);animation:blink 1.15s steps(2,end) infinite;}
@keyframes blink{50%{opacity:.25}}

/* ============================================================
   MOSAIC SELECTION — characters, games, modes
   ============================================================ */
.mosaic-grid{flex:1;min-height:0;display:grid;gap:clamp(7px,1.2vw,14px);}
[data-device="desktop"] .grid-cast{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,1fr);}
[data-device="desktop"] .grid-cast .tile:nth-child(-n+3){grid-column:span 2;}
[data-device="desktop"] .grid-cast .tile:nth-child(n+4){grid-column:span 3;}
[data-device="desktop"] .grid-games{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);}
[data-device="desktop"] .grid-games .tile:nth-child(1){grid-row:span 2;}
.grid-cast{grid-template-columns:repeat(5,1fr);}
.grid-games{grid-template-columns:repeat(3,1fr);}
.grid-modes{grid-template-columns:repeat(2,1fr);max-width:820px;margin:0 auto;width:100%;}

.tile{position:relative;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);border:var(--b) solid var(--ink);border-radius:var(--r);
  box-shadow:0 6px 0 var(--ink);cursor:pointer;padding:0;text-align:left;
  transition:transform .16s var(--ease-pop),box-shadow .16s;}
.tile:hover:not(.locked){transform:translateY(-6px);box-shadow:0 12px 0 var(--ink);}
.tile:active:not(.locked){transform:translateY(0);box-shadow:0 4px 0 var(--ink);}
.tile-art{flex:1;min-height:0;position:relative;display:grid;place-items:center;overflow:hidden;
  background:var(--accent,#ddd);}
.tile-art::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.10) 0 14px,transparent 14px 28px);}
.tile-art img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:bottom center;padding:5% 4% 0;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.24));transition:transform .2s var(--ease-pop);}
.tile-art svg{width:min(50%,196px);height:auto;filter:drop-shadow(0 5px 0 rgba(0,0,0,.3));}
.tile:hover:not(.locked) .tile-art img{transform:scale(1.05);}
.tile-body{flex:none;padding:8px 10px 10px;display:flex;flex-direction:column;gap:5px;
  border-top:3px solid var(--ink);background:var(--paper);}
.tile-name{font-family:var(--font-pixel);font-size:clamp(9px,1.25vw,12px);color:var(--ink);}
.tile-desc{font-size:clamp(11px,1.15vw,13px);line-height:1.35;color:#6b4a35;}
.tile-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-family:var(--font-pixel);font-size:clamp(7px,.95vw,9px);color:#7a5238;}
.tile-meta b{color:var(--ink);}
.tile[aria-pressed="true"]{box-shadow:0 6px 0 var(--ink),0 0 0 5px var(--sun),0 0 26px 6px rgba(255,176,32,.55);
  transform:translateY(-6px);}
.tile[aria-pressed="true"] .tile-name{color:#b81f00;}
.tile.locked{cursor:not-allowed;}
.tile.locked .tile-art img{filter:grayscale(.5) brightness(.78);}
.lock-veil{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;text-align:center;padding:8px;
  background:linear-gradient(180deg,rgba(24,12,8,.12),rgba(24,12,8,.72));color:#fff;}
.lock-veil svg{width:26px;height:26px;fill:var(--sun);filter:drop-shadow(0 2px 0 rgba(0,0,0,.6));}
.lock-need{font-family:var(--font-pixel);font-size:clamp(7px,.95vw,10px);text-shadow:2px 2px 0 var(--ink);}
.lock-bar{width:min(62%,170px);height:10px;background:rgba(0,0,0,.6);border:2px solid var(--ink);border-radius:99px;overflow:hidden;}
.lock-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#fff3b0);}
.medal{width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;
  font-size:9px;font-family:var(--font-pixel);color:var(--ink);flex:none;}
.medal svg,.medal-big svg{width:62%;height:62%;fill:var(--ink);}
.medal.none{background:#d3c3b3;color:#8a7a6a;}
.medal.bronze{background:#cd7f32;}
.medal.silver{background:#dcdce4;}
.medal.gold{background:var(--gold);}
.medal.star{background:radial-gradient(circle at 35% 30%,#fff,#ff77e0);}

/* ============================================================
   LOADING
   ============================================================ */
.load-screen{align-items:center;justify-content:center;text-align:center;gap:clamp(10px,2vh,22px);}
.load-mark{width:min(48vw,300px);animation:pulse 1.5s ease-in-out infinite;
  filter:drop-shadow(0 8px 0 rgba(0,0,0,.35));}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.load-name{font-family:var(--font-pixel);font-size:clamp(12px,2.2vw,20px);color:#fff;
  text-shadow:3px 3px 0 var(--ink);margin:0;}
.load-bar{width:min(78vw,460px);height:22px;background:rgba(0,0,0,.45);border:4px solid var(--ink);
  border-radius:99px;overflow:hidden;box-shadow:0 5px 0 rgba(0,0,0,.3);}
.load-bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--sun),#fff1c0);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.18);transition:width .2s linear;}
.load-tip{font-size:clamp(12px,1.5vw,15px);color:#fff;max-width:44ch;margin:0;min-height:2.6em;line-height:1.4;}
.load-pct{font-family:var(--font-pixel);font-size:clamp(9px,1.3vw,12px);color:var(--gold);margin:0;}

/* ============================================================
   OVERLAYS — brief, countdown, results
   ============================================================ */
.overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:var(--gutter);
  background:rgba(20,8,3,.82);backdrop-filter:blur(4px);animation:fade .18s both;overflow:auto;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{width:min(560px,100%);max-height:100%;overflow:auto;text-align:center;
  animation:pop-in .34s var(--ease-pop) both;}
@keyframes pop-in{from{transform:scale(.88) translateY(18px);opacity:0}to{transform:none;opacity:1}}
.sheet h2{font-family:var(--font-pixel);font-size:clamp(13px,2.5vw,22px);margin:0 0 6px;color:var(--ink);}
.sheet .lead{font-size:14px;color:#7a5238;margin:0 0 14px;line-height:1.45;}

.rules{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left;}
.rules li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4;color:#4a3022;
  background:#f7e7cd;border:3px solid var(--ink);border-radius:9px;padding:10px 12px;}
.rules b{flex:none;width:24px;height:24px;border-radius:50%;background:var(--sun);color:var(--ink);
  border:2px solid var(--ink);display:grid;place-items:center;font-family:var(--font-pixel);font-size:9px;}
.payout{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:14px;}
.pay{display:flex;align-items:center;gap:6px;background:#f7e7cd;border:3px solid var(--ink);
  border-radius:99px;padding:5px 11px 5px 5px;font-size:12px;font-weight:700;color:#4a3022;}
.pay img{width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);object-fit:cover;background:#fff;}
.pay.top{background:var(--sun);}

/* countdown */
.count-wrap{position:absolute;inset:0;z-index:20;display:grid;place-items:center;
  background:rgba(20,8,3,.62);backdrop-filter:blur(2px);}
.count-num{font-family:var(--font-pixel);color:#fff;text-align:center;
  font-size:clamp(34px,13vw,120px);text-shadow:0 6px 0 var(--ink),6px 6px 0 var(--ink),-6px 6px 0 var(--ink);
  animation:count-pop .62s var(--ease-pop);}
.count-num.small{font-size:clamp(16px,4.6vw,40px);color:var(--gold);}
@keyframes count-pop{0%{transform:scale(2.2);opacity:0}45%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:1}}

/* results */
.ribbon{display:inline-block;font-family:var(--font-pixel);font-size:10px;background:var(--red);color:#fff;
  padding:8px 15px;border:3px solid var(--ink);border-radius:7px;box-shadow:0 4px 0 var(--ink);
  transform:rotate(-3deg);margin-bottom:10px;}
.medal-big{width:78px;height:78px;border-radius:50%;border:5px solid var(--ink);margin:0 auto 8px;
  display:grid;place-items:center;font-family:var(--font-pixel);font-size:13px;color:var(--ink);
  background:#d3c3b3;box-shadow:0 6px 0 var(--ink);animation:stamp .45s var(--ease-pop) both;}
@keyframes stamp{from{transform:scale(2.2) rotate(-16deg);opacity:0}to{transform:none;opacity:1}}
.medal-big.none{background:#d3c3b3;color:#8a7a6a;}
.medal-big.bronze{background:#cd7f32;}
.medal-big.silver{background:#dcdce4;}
.medal-big.gold{background:var(--gold);}
.medal-big.star{background:radial-gradient(circle at 35% 30%,#fff,#ff77e0);}
.score-rows{display:flex;flex-direction:column;gap:6px;margin:12px 0;text-align:left;}
.score-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:14px;font-weight:600;line-height:1.3;padding:10px 12px;background:#f7e7cd;
  border:3px solid var(--ink);border-radius:8px;color:#4a3022;
  animation:slide-in .28s var(--ease-pop) both;}
.score-row b{font-family:var(--font-pixel);font-size:11px;color:var(--ink);white-space:nowrap;}
.score-row.total{background:var(--sun);font-size:15px;}
.score-row.total b{font-size:14px;}
@keyframes slide-in{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.unlock-art{width:min(46vw,190px);margin:0 auto;filter:drop-shadow(0 8px 0 rgba(0,0,0,.28));
  animation:bob 2s ease-in-out infinite;}

/* ============================================================
   GAME SHELL
   ============================================================ */
.play{gap:8px;}
.hud{flex:none;display:flex;align-items:stretch;gap:6px;flex-wrap:wrap;
  background:rgba(20,8,3,.82);border:3px solid var(--ink);border-radius:10px;padding:6px;
  box-shadow:0 5px 0 rgba(0,0,0,.35);}
.hud-cell{flex:1 1 auto;min-width:70px;display:flex;flex-direction:column;gap:2px;justify-content:center;
  padding:5px 9px;background:rgba(255,255,255,.08);border-radius:6px;}
.hud-k{font-family:var(--font-pixel);font-size:7px;color:#ffd6a8;letter-spacing:1px;}
.hud-v{font-family:var(--font-pixel);font-size:clamp(11px,1.6vw,16px);color:#fff;}
.hud-v.gold{color:var(--gold);}
.hud-v.hot{color:#ff9de0;}
.hud-face{flex:none;width:48px;padding:0;display:grid;place-items:center;overflow:hidden;
  background:var(--accent,#333);border-radius:6px;}
.hud-face img{width:100%;height:100%;object-fit:cover;}
.strikes{display:flex;gap:4px;align-items:center;flex-wrap:wrap;}
.strike{width:13px;height:13px;border-radius:50%;border:2px solid var(--ink);background:#5a463c;}
.strike.on{background:var(--red);box-shadow:0 0 9px var(--red);}
.timer-bar{height:9px;background:rgba(0,0,0,.55);border:2px solid var(--ink);border-radius:99px;overflow:hidden;}
.timer-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--green),#b6ff6a);
  transition:width .2s linear;}
.timer-bar.warn i{background:linear-gradient(90deg,var(--red),var(--sun));}

.stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;
  contain:paint;background:#2b1409;border:3px solid var(--ink);border-radius:var(--r);
  box-shadow:0 6px 0 rgba(0,0,0,.35);padding:clamp(8px,1.6vw,18px);overflow:hidden;}
.shake{animation:shake .36s;}
@keyframes shake{0%,100%{transform:translate(0,0)}15%{transform:translate(-7px,4px)}
  35%{transform:translate(6px,-5px)}55%{transform:translate(-5px,-3px)}75%{transform:translate(4px,3px)}}

/* full-bleed variant (archery) */
.play.bleed{gap:0;max-width:none;}
.play.bleed .stage{border:0;border-radius:0;padding:0;box-shadow:none;background:#0d1330;
  display:block;}
.play.bleed .hud{position:absolute;z-index:6;top:8px;left:8px;right:8px;
  background:rgba(14,6,2,.72);backdrop-filter:blur(5px);}

/* ============================================================
   GAME 1 — TRIO / Maquinita
   ============================================================ */
.reels{display:flex;gap:clamp(6px,1.4vw,14px);justify-content:center;align-items:center;
  height:100%;width:100%;max-width:660px;}
.reel{position:relative;flex:1 1 0;min-width:0;aspect-ratio:3/4;max-height:100%;background:#160a04;
  border:3px solid var(--ink);border-radius:10px;overflow:hidden;
  box-shadow:inset 0 0 0 3px #6b3a1c,0 5px 0 rgba(0,0,0,.35);}
.reel-track{position:absolute;inset:0;display:flex;flex-direction:column;will-change:transform;}
.reel-cell{flex:none;width:100%;height:100%;display:grid;place-items:center;padding:8%;}
.reel-cell img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 0 rgba(0,0,0,.4));}
.reel::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 22%,transparent 78%,rgba(0,0,0,.55));}
.reel.spinning{box-shadow:inset 0 0 0 3px var(--sun),0 5px 0 rgba(0,0,0,.35);}
.reel.locked{box-shadow:inset 0 0 0 3px var(--green),0 5px 0 rgba(0,0,0,.35);}
.reel.win{animation:reel-win .5s ease 3;}
@keyframes reel-win{50%{box-shadow:inset 0 0 0 6px var(--sun),0 0 36px 8px rgba(255,176,32,.6);}}

.trio-wrap{display:flex;flex-direction:column;gap:10px;height:100%;width:100%;align-items:center;}
.trio-board{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;width:100%;}
.pips{display:flex;gap:5px;justify-content:center;flex:none;}
.pip{width:11px;height:11px;border-radius:3px;background:#5a463c;border:2px solid var(--ink);}
.pip.done{background:var(--sun);}
.pip.now{background:#fff;animation:blink 1s steps(2) infinite;}
.trio-cta{flex:none;}

/* Apilados: three horizontal rows, stopped top to bottom */
.stack-wrap{display:flex;flex-direction:column;gap:clamp(6px,1.4vh,14px);height:100%;width:100%;
  align-items:center;}
.rows{flex:1;min-height:0;width:100%;max-width:760px;display:flex;flex-direction:column;
  gap:clamp(6px,1.4vh,14px);}
.srow{position:relative;flex:1 1 0;min-height:0;overflow:hidden;background:#160a04;
  border:3px solid var(--ink);border-radius:10px;
  box-shadow:inset 0 0 0 3px #6b3a1c,0 5px 0 rgba(0,0,0,.35);}
.srow-track{position:absolute;top:0;bottom:0;left:0;display:flex;flex-direction:row;
  will-change:transform;}
.srow-cell{position:relative;flex:none;width:var(--cell,80px);height:100%;}
.srow-cell img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.4));}
.srow::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.6),transparent 20%,transparent 80%,rgba(0,0,0,.6));}
.srow-window{position:absolute;left:50%;top:3px;bottom:3px;width:var(--cell,80px);
  transform:translateX(-50%);border:3px solid var(--sun);border-radius:8px;pointer-events:none;
  box-shadow:0 0 14px rgba(255,176,32,.55);z-index:2;}
.srow.spinning{box-shadow:inset 0 0 0 3px var(--sun),0 5px 0 rgba(0,0,0,.35);}
.srow.locked{box-shadow:inset 0 0 0 3px var(--green),0 5px 0 rgba(0,0,0,.35);}
.srow.locked .srow-window{border-color:var(--green);box-shadow:0 0 14px rgba(47,174,60,.55);}
.srow.win{animation:reel-win .5s ease 3;}

/* ============================================================
   GAME 2 — MOSAICO
   ============================================================ */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,1fr);
  gap:clamp(5px,1vw,11px);height:100%;width:100%;max-width:860px;margin:0 auto;}
.mcard{position:relative;min-height:0;perspective:800px;background:none;border:0;padding:0;cursor:pointer;}
.mcard-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .32s var(--ease-pop);}
.mcard[data-face="up"] .mcard-inner{transform:rotateY(180deg);}
.mface{position:absolute;inset:0;backface-visibility:hidden;border:3px solid var(--ink);border-radius:9px;
  display:grid;place-items:center;overflow:hidden;box-shadow:0 4px 0 rgba(0,0,0,.4);}
.mback{background:linear-gradient(150deg,var(--deep),#ff8a1f);}
.mback::after{content:'';position:absolute;inset:9%;border:3px solid rgba(255,255,255,.4);border-radius:6px;}
.mback img{position:relative;width:62%;filter:drop-shadow(0 2px 0 rgba(0,0,0,.45));}
.mfront{background:var(--accent,#fff4e2);transform:rotateY(180deg);padding:6%;}
.mfront img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;}
.mcard[data-state="matched"]{cursor:default;}
.mcard[data-state="matched"] .mfront{box-shadow:0 0 0 3px var(--sun),0 0 20px 4px rgba(255,176,32,.6);}
.mcard[data-state="matched"] .mcard-inner{animation:pop .38s var(--ease-pop);}
@keyframes pop{50%{transform:rotateY(180deg) scale(1.11);}}
.mcard[data-state="wrong"] .mcard-inner{animation:nope .38s;}
@keyframes nope{25%{transform:rotateY(180deg) translateX(-6px)}75%{transform:rotateY(180deg) translateX(6px)}}

/* ============================================================
   GAME 3 — ARQUERIA
   ============================================================ */
#arch-canvas{width:100%;height:100%;display:block;touch-action:manipulation;cursor:crosshair;}
.arch-pips{position:absolute;left:0;right:0;bottom:8px;z-index:5;display:flex;gap:4px;
  justify-content:center;flex-wrap:wrap;pointer-events:none;}
.apip{width:8px;height:22px;background:var(--sun);border:2px solid var(--ink);border-radius:2px;}
.apip.spent{background:rgba(255,255,255,.18);}

/* ============================================================
   RECORDS / PRIZES
   ============================================================ */
.tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;flex:none;}
.tab{font-family:var(--font-pixel);font-size:clamp(7px,1vw,10px);padding:11px 13px;min-height:44px;
  background:var(--paper-2);color:var(--ink);border:3px solid var(--ink);border-radius:9px;
  box-shadow:0 4px 0 var(--ink);cursor:pointer;}
.tab[aria-selected="true"]{background:var(--sun);transform:translateY(2px);box-shadow:0 2px 0 var(--ink);}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-bottom:12px;}
.stat{background:#f7e7cd;border:3px solid var(--ink);border-radius:9px;padding:9px 11px;}
.stat-k{font-size:11px;color:#7a5238;margin-bottom:4px;}
.stat-v{font-family:var(--font-pixel);font-size:13px;color:var(--ink);}
.chart{display:flex;align-items:flex-end;justify-content:center;gap:14px;height:124px;padding:10px;
  background:#2b1409;border:3px solid var(--ink);border-radius:9px;margin-bottom:12px;}
.chart-col{flex:0 0 auto;width:clamp(36px,8vw,58px);display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;gap:5px;height:100%;}
.chart-bar{width:100%;background:linear-gradient(180deg,var(--sun),var(--deep));border:2px solid var(--ink);
  border-radius:4px 4px 0 0;min-height:4px;animation:grow .45s var(--ease-pop) both;}
@keyframes grow{from{height:0 !important}}
.chart-lab{font-family:var(--font-pixel);font-size:9px;color:#ffe0bb;}
.chart-val{font-family:var(--font-pixel);font-size:9px;color:var(--gold);}
.rec-table{width:100%;border-collapse:collapse;font-size:13px;}
.rec-table th{font-family:var(--font-pixel);font-size:8px;text-align:left;color:#7a5238;padding:7px 5px;
  border-bottom:3px solid var(--ink);}
.rec-table td{padding:7px 5px;border-bottom:2px dashed #e0c9a8;color:#4a3022;}
.rec-rank{font-family:var(--font-pixel);font-size:10px;color:var(--ink);width:34px;}
.rec-face{width:28px;height:28px;border-radius:6px;border:2px solid var(--ink);object-fit:cover;background:#fff;}
.rec-score{font-family:var(--font-pixel);font-size:11px;color:var(--ink);text-align:right;}
.empty{text-align:center;padding:18px;color:#9a7a60;font-size:13px;}
.thr-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px;}
.thr{display:flex;align-items:center;gap:5px;font-size:11px;background:#f7e7cd;border:2px solid var(--ink);
  border-radius:99px;padding:4px 9px;color:#6b4a35;}
.thr.hit{background:var(--sun);color:var(--ink);font-weight:700;}

/* prizes */
.prize-char{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.prize-char img{width:46px;height:46px;border-radius:9px;border:3px solid var(--ink);object-fit:cover;background:var(--accent,#fff);}
.prize-name{font-family:var(--font-pixel);font-size:12px;color:var(--ink);}
.prize-pts{font-size:12px;color:#7a5238;margin-top:3px;}
.prize-block{background:#f7e7cd;border:3px solid var(--ink);border-radius:10px;padding:11px;margin-bottom:10px;}
.ladder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.ladder li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#4a3022;
  background:#fff4e2;border:2px solid #d8bb95;border-radius:8px;padding:7px 9px;}
.ladder li.won{background:var(--sun);border-color:var(--ink);font-weight:700;}
.ladder .at{font-family:var(--font-pixel);font-size:9px;color:var(--ink);flex:none;min-width:58px;}
.ladder .note{margin-left:auto;font-size:11px;color:#7a5238;text-align:right;}
.ladder li.won .note{color:#6b4a35;}
.bar{height:11px;background:rgba(0,0,0,.25);border:2px solid var(--ink);border-radius:99px;overflow:hidden;margin-top:7px;}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--deep),var(--sun));}

/* ============================================================
   FX
   ============================================================ */
.fx-layer{position:fixed;inset:0;z-index:55;pointer-events:none;overflow:hidden;}
.pop-score{position:absolute;font-family:var(--font-pixel);font-size:clamp(11px,1.8vw,18px);color:var(--sun);
  text-shadow:2px 2px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink);
  animation:pop-up 1s ease-out forwards;white-space:nowrap;will-change:transform,opacity;}
.pop-score.bad{color:#ff8a8a;}
.pop-score.big{font-size:clamp(16px,3vw,30px);color:#fff;}
@keyframes pop-up{0%{transform:translate(-50%,0) scale(.6);opacity:0}
  20%{transform:translate(-50%,-14px) scale(1.14);opacity:1}
  100%{transform:translate(-50%,-70px) scale(1);opacity:0}}
.confetti{position:absolute;top:-20px;width:9px;height:13px;animation:fall linear forwards;will-change:transform;}
@keyframes fall{to{transform:translateY(105vh) rotate(700deg);opacity:.2}}

/* ============================================================
   MOBILE
   ============================================================ */
[data-device="mobile"] .grid-cast{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);}
[data-device="mobile"] .grid-cast .tile:nth-child(5){grid-column:span 2;}
[data-device="mobile"] .grid-cast .tile:nth-child(5) .tile-art img{object-position:center;padding:2% 4%;}
[data-device="mobile"] .grid-games{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr);}
[data-device="mobile"] .grid-games .tile{flex-direction:row;}
[data-device="mobile"] .grid-games .tile-art{flex:0 0 34%;}
[data-device="mobile"] .grid-games .tile-body{flex:1;border-top:0;border-left:3px solid var(--ink);
  justify-content:center;}
[data-device="mobile"] .grid-modes{grid-template-columns:1fr;grid-template-rows:repeat(2,1fr);}
[data-device="mobile"] .grid-modes .tile{flex-direction:row;}
[data-device="mobile"] .grid-modes .tile-art{flex:0 0 34%;}
[data-device="mobile"] .grid-modes .tile-body{flex:1;border-top:0;border-left:3px solid var(--ink);
  justify-content:center;}
[data-device="mobile"] .mosaic{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(6,1fr);}
[data-device="mobile"] .tile-desc{display:none;}
[data-device="mobile"] .grid-games .tile-desc,
[data-device="mobile"] .grid-modes .tile-desc{display:block;}
[data-device="mobile"] .hud-cell{min-width:58px;padding:4px 7px;}
[data-device="mobile"] .hud-face{width:40px;}
[data-device="mobile"] .rays{animation:none;}
[data-device="mobile"] .stage{padding:7px;}
[data-device="mobile"] .reels{max-width:none;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.05ms !important;}
  .rays{animation:none !important;}
}