/* ===================== Cardanto — styles ===================== */
:root{
  --cw:70px; --ch:98px; --gap:6px;
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; touch-action:manipulation; }
body{
  font-family:var(--font); font-size:15px; color:var(--text,#fff);
  background:var(--desktop,#0b3d24); background-attachment:fixed; overflow:hidden;
  -webkit-user-select:none; user-select:none; -webkit-text-size-adjust:100%;
  touch-action:manipulation; /* no double-tap-to-zoom */
}
.hidden{ display:none !important; }

/* default (modern) theme variables */
body{
  --text:#fff; --muted:rgba(255,255,255,.72); --edge:rgba(255,255,255,.16);
  --panel:rgba(255,255,255,.10); --panel2:rgba(255,255,255,.06); --tile:rgba(0,0,0,.30);
  --accent:#16a34a; --accent2:#22c55e; --on-accent:#fff;
  --title:#0f7a45; --title2:#0a5230;
  --red:#d12b3e; --black:#1c1c22; --field-bg:#fff; --field-text:#111;
  --slot-line:rgba(255,255,255,.30); --slot-text:rgba(255,255,255,.8);
  --back1:#0f7a45; --back2:#14a35a; --gold:#ffd54a;
  --fx1:#ffd54a; --fx2:#ffffff; --fx3:#22c55e;
  --desktop:radial-gradient(120% 120% at 50% 0%, #1aa35a 0%, #0c5a32 45%, #073b22 100%);
  --felt:radial-gradient(120% 90% at 50% 0%, #0e7a43 0%, #0a4d2c 70%, #06351e 100%);
}

/* ===================== window / screen ===================== */
.screen{ position:fixed; inset:0; display:flex; align-items:stretch; justify-content:center; }
.window{
  position:relative; background:var(--panel); display:flex; flex-direction:column;
  width:100%; height:100%; overflow:hidden;
  border:1px solid var(--edge); box-shadow:0 30px 70px rgba(0,0,0,.45);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
@media (min-width:820px){
  .screen{ padding:20px; }
  .window{ max-width:1060px; height:min(95vh,920px); margin:auto; border-radius:20px; }
}

.titlebar{
  display:flex; align-items:center; gap:8px; height:52px; padding:0 10px; flex:0 0 auto;
  background:linear-gradient(180deg,var(--title),var(--title2)); color:var(--on-accent,#fff);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 2px 8px rgba(0,0,0,.18);
}
.tb-title{ font-weight:800; font-size:1.15rem; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.3px; }
.tb-ico{ margin-right:2px; }
.tb-btns{ display:flex; gap:6px; }
.tb-btn{ width:34px; height:34px; font-family:var(--font); font-size:16px; font-weight:800; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.22); border-radius:9px;
  display:flex; align-items:center; justify-content:center; transition:background .12s, transform .08s; }
.tb-btn:hover{ background:rgba(255,255,255,.28); }
.tb-btn:active{ transform:scale(.92); }
.back-btn{ font-size:24px; }
.close-btn:hover{ background:#e23b4e; border-color:#e23b4e; }

.menubar{ display:none; }
.statusbar{ display:flex; align-items:center; gap:8px; padding:8px 14px; flex:0 0 auto;
  background:var(--panel2); color:var(--muted); font-size:.82rem; border-top:1px solid var(--edge); }
.status-cell:first-child{ flex:1; }
.linklike{ background:none; border:none; color:var(--muted); cursor:pointer; font-family:var(--font);
  font-weight:700; font-size:.82rem; }
.linklike:hover{ color:#fff; text-decoration:underline; }

.win-body{ flex:1; overflow:auto; padding:16px; }

/* ===================== buttons / fields ===================== */
.btn{ font-family:var(--font); font-size:.9rem; font-weight:700; cursor:pointer; color:var(--text);
  background:var(--panel); border:1px solid var(--edge); border-radius:11px; padding:9px 15px; min-height:38px;
  display:inline-flex; align-items:center; gap:7px; box-shadow:0 2px 5px rgba(0,0,0,.18);
  transition:transform .08s, filter .12s, background .12s; }
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn.primary{ background:linear-gradient(180deg,var(--accent2),var(--accent)); color:var(--on-accent); border-color:transparent;
  box-shadow:0 4px 12px rgba(0,0,0,.28); font-weight:800; }
.btn b{ font-weight:400; font-size:1.05rem; line-height:1; }
.field{ font-family:var(--font); font-size:1rem; padding:10px 13px; border-radius:11px;
  background:var(--field-bg); color:var(--field-text); border:1px solid var(--edge); box-shadow:inset 0 1px 3px rgba(0,0,0,.15); }
.field::placeholder{ color:#888; }
.field:focus{ outline:2px solid var(--accent); outline-offset:1px; }

/* ===================== HOME ===================== */
.home-body{ display:flex; flex-direction:column; }
/* the body scrolls; its sections keep their natural height (don't get squished) */
.home-body > *{ flex:0 0 auto; }
.home-head{ text-align:center; padding:8px 0 12px; }
.logo{ margin:0; font-weight:900; font-size:clamp(2.4rem,12vw,4rem); letter-spacing:1px; line-height:1; display:inline-flex; }
.logo span{ display:inline-block; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.3);
  background:linear-gradient(180deg,#fff,var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:bob 2.6s ease-in-out infinite; }
.logo span:nth-child(2n){ animation-delay:.12s } .logo span:nth-child(3n){ animation-delay:.24s }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
.tagline{ margin:8px 0 0; font-weight:600; font-size:.95rem; color:var(--muted); }

.home-bar{ display:flex; gap:10px; margin:8px 0; }
.search{ flex:1; min-width:0; }
#themeBtn{ flex:0 0 auto; white-space:nowrap; }
@media (max-width:360px){ #themeBtn .lbl{ display:none; } }

/* casino bar / coins */
.casino-bar{ display:flex; align-items:center; gap:10px; margin:6px 0 2px; }
.coin-chip{ display:inline-flex; align-items:center; gap:6px; font-weight:800; padding:6px 13px; border-radius:999px;
  background:linear-gradient(160deg,#4a3a0c,#241b06); color:#ffd966; border:1px solid rgba(255,217,102,.45);
  box-shadow:0 2px 7px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15); white-space:nowrap; }
.coin-chip.small{ padding:5px 10px; font-size:.85rem; }
.coin-ico{ filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.coin-chip.bump{ animation:coinbump .42s ease; }
@keyframes coinbump{ 0%,100%{ transform:scale(1) } 40%{ transform:scale(1.28) } }
.spin-cta{ margin-left:auto; background:linear-gradient(160deg,#ffd34d,#f59e0b); color:#3a2400; border:none; font-weight:800; }
.spin-cta.ready{ animation:ctaGlow 1.6s ease-in-out infinite; }
@keyframes ctaGlow{ 0%,100%{ box-shadow:0 4px 12px rgba(245,158,11,.45) } 50%{ box-shadow:0 4px 24px rgba(245,158,11,.85) } }
.slots-cta{ background:linear-gradient(160deg,#ff5fb0,#c026d3); color:#fff; border:none; font-weight:800;
  box-shadow:0 4px 12px rgba(192,38,211,.4); }

/* slot machine */
.slots-window{ max-width:400px; }
.slot-machine{ position:relative; display:flex; gap:8px; justify-content:center; padding:14px; margin:6px auto 12px;
  border-radius:16px; background:linear-gradient(160deg,#2a0030,#11001a); border:3px solid #ffd23f;
  box-shadow:0 0 0 3px #b8860b, 0 12px 30px rgba(0,0,0,.5); width:fit-content; }
.reel{ width:64px; height:84px; overflow:hidden; border-radius:10px; background:#fff;
  box-shadow:inset 0 6px 10px rgba(0,0,0,.25), inset 0 -6px 10px rgba(0,0,0,.25); }
.reel-strip{ display:flex; flex-direction:column; will-change:transform; }
.reel-cell{ height:84px; display:flex; align-items:center; justify-content:center; font-size:2.6rem; line-height:1; }
.slot-line-mark{ position:absolute; left:6px; right:6px; top:50%; height:2px; transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,59,150,.8),transparent); pointer-events:none; }
.slot-pay{ font-size:.66rem; color:var(--muted); margin:10px 2px 0; line-height:1.5; }
.slot-machine.win{ animation:slotWin .7s ease; }
@keyframes slotWin{ 0%,100%{ box-shadow:0 0 0 3px #b8860b, 0 12px 30px rgba(0,0,0,.5) } 50%{ box-shadow:0 0 22px 6px #ffd23f, 0 0 0 3px #ffd23f } }

/* prize wheel */
.wheel-window{ max-width:380px; }
.wheel-wrap{ position:relative; width:min(76vw,300px); height:min(76vw,300px); margin:6px auto 14px; }
.wheel{ position:absolute; inset:0; border-radius:50%; border:6px solid #b8860b;
  box-shadow:0 0 0 4px #3a2f08, 0 12px 34px rgba(0,0,0,.55); will-change:transform; }
.wheel-pointer{ position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:0; height:0; z-index:5;
  border-left:15px solid transparent; border-right:15px solid transparent; border-top:26px solid #ffd700;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.wheel-hub{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:48px; height:48px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff,#d9d2c0); display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; box-shadow:0 0 0 4px #b8860b, 0 2px 6px rgba(0,0,0,.45); z-index:4; }
.wheel-label{ position:absolute; left:50%; top:50%; color:#fff; font-weight:900; font-size:.82rem;
  text-shadow:0 1px 2px rgba(0,0,0,.65); white-space:nowrap; pointer-events:none; }
.wheel-msg{ font-weight:800; min-height:1.5em; margin:2px 0 12px; }

.family-tabs{ display:flex; gap:7px; overflow-x:auto; padding:10px 0; scrollbar-width:none; flex:0 0 auto; min-height:48px; }
.family-tabs::-webkit-scrollbar{ display:none; }
.tab{ flex:0 0 auto; display:inline-flex; align-items:center; font-family:var(--font); font-size:.85rem; font-weight:700; cursor:pointer; white-space:nowrap;
  min-height:38px; padding:8px 16px; background:var(--panel); color:var(--text); border:1px solid var(--edge); border-radius:999px;
  transition:background .12s, transform .08s; }
.tab:active{ transform:scale(.96); }
.tab.on{ background:var(--accent); color:var(--on-accent); border-color:transparent; box-shadow:0 3px 10px rgba(0,0,0,.25); }

.game-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; padding-top:6px; }
.game-card{ position:relative; text-align:left; cursor:pointer; padding:13px; min-height:118px;
  background:var(--tile); color:var(--text); border:1px solid var(--edge); border-radius:15px;
  display:flex; flex-direction:column; gap:8px; box-shadow:0 5px 16px rgba(0,0,0,.25);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s; }
.game-card:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,.32); filter:brightness(1.05); }
.game-card:active{ transform:translateY(-1px) scale(.99); }
.gc-top{ display:flex; align-items:center; gap:10px; }
.gc-icon{ flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; line-height:1; background:linear-gradient(160deg,#ffffff,#eef1f5); color:#111;
  box-shadow:0 3px 8px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.6); }
.gc-head{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.gc-fam{ font-size:.62rem; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--accent2); }
.gc-name{ font-size:1.0rem; font-weight:800; line-height:1.1; }
.gc-blurb{ font-size:.8rem; color:var(--muted); line-height:1.3; }
.gc-win{ position:absolute; top:11px; right:13px; font-size:.68rem; font-weight:800; color:var(--gold); }
.no-results{ grid-column:1/-1; text-align:center; color:var(--muted); padding:40px; }

/* ===================== PLAY ===================== */
.toolbar{ display:flex; align-items:center; gap:7px; padding:8px 10px; flex:0 0 auto; overflow-x:auto; scrollbar-width:none;
  background:var(--panel2); border-bottom:1px solid var(--edge); }
.toolbar::-webkit-scrollbar{ display:none; }
.toolbar .tool{ font-size:.85rem; padding:8px 12px; min-height:42px; white-space:nowrap; }
.toolbar .tool b{ font-size:1.05rem; }
.toolbar-stat{ margin-left:auto; font-size:.8rem; color:var(--muted); padding:0 6px; white-space:nowrap; }
@media (max-width:640px){
  .toolbar .tool .lbl{ display:none; }
  .toolbar .tool{ padding:8px 12px; min-width:44px; justify-content:center; }
  .toolbar .tool b{ font-size:1.25rem; }
}

.board{ position:relative; flex:1; overflow:hidden; padding:12px 8px; touch-action:none; background:var(--felt);
  box-shadow:inset 0 12px 40px rgba(0,0,0,.28); }
/* touch-action is not inherited: kill zoom/pan on every board element so taps
   never zoom and drags aren't hijacked by the browser */
.board *{ touch-action:none; }

/* ===================== CARDS ===================== */
.card{ position:absolute; left:0; top:0; width:var(--cw); height:var(--ch); border-radius:calc(var(--cw)*0.12);
  background:linear-gradient(160deg,#fff 0%,#f4f5f8 70%,#e9eaf0 100%);
  border:1px solid rgba(0,0,0,.28); box-shadow:0 1px 3px rgba(0,0,0,.35); overflow:hidden; will-change:transform; }
.card.red{ color:var(--red,#d12b3e); }
.card.black{ color:var(--black,#1c1c22); }
/* corner index: rank over a smaller suit, top-left and bottom-right (rotated) */
.cn{ position:absolute; width:calc(var(--cw)*0.34); font-weight:800; line-height:.82;
  display:flex; flex-direction:column; align-items:center; }
.cn b{ font-size:calc(var(--cw)*0.27); font-weight:900; letter-spacing:-.5px; }
.cn i{ font-style:normal; font-size:calc(var(--cw)*0.22); margin-top:1px; }
.cn.tl{ top:calc(var(--cw)*0.08); left:calc(var(--cw)*0.06); }
.cn.br{ bottom:calc(var(--cw)*0.08); right:calc(var(--cw)*0.06); transform:rotate(180deg); }
/* number cards: real pip layout inside a central field that clears the corners */
.pips{ position:absolute; left:0; right:0; top:14%; bottom:14%; }
.pip{ position:absolute; font-style:normal; line-height:1; font-size:calc(var(--cw)*0.24);
  transform:translate(-50%,-50%); text-shadow:0 1px 0 rgba(255,255,255,.45); }
/* ace: one large central pip */
.ace-pip{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--cw)*0.62); text-shadow:0 1px 0 rgba(255,255,255,.5); }
/* court cards: framed letter + suit */
.court-face{ position:absolute; inset:22% 17%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid currentColor; border-radius:5px; background:linear-gradient(160deg,rgba(0,0,0,.02),rgba(0,0,0,.06)); }
.court-face b{ font-size:calc(var(--cw)*0.46); font-weight:900; line-height:1; }
.court-face i{ font-style:normal; font-size:calc(var(--cw)*0.30); margin-top:calc(var(--cw)*0.02); }
.card.down{ background:repeating-linear-gradient(45deg, var(--back1,#0f7a45) 0 6px, var(--back2,#14a35a) 6px 12px);
  border:1px solid rgba(0,0,0,.45); box-shadow:0 1px 3px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.85), inset 0 0 0 3px rgba(0,0,0,.25); }
.card.down::after{ content:""; position:absolute; inset:16%; border-radius:5px;
  background:repeating-linear-gradient(-45deg, rgba(255,255,255,.22) 0 4px, transparent 4px 8px); }
.card.slot-empty,.ph{ background:transparent; box-shadow:none; border:none; }

/* zones */
.board-inner{ margin:0 auto; }
.top-zone{ display:flex; justify-content:space-between; gap:8px; align-items:flex-start; margin-bottom:12px; width:100%; }
.tab-zone{ width:100%; }
.zone-group{ display:flex; gap:var(--gap); flex-wrap:wrap; }
.zone-group.right{ justify-content:flex-end; }
.slot{ position:relative; flex:0 0 var(--cw); width:var(--cw); min-width:var(--cw); height:var(--ch); border-radius:calc(var(--cw)*0.12);
  box-shadow:inset 0 0 0 2px var(--slot-line,rgba(255,255,255,.3)); }
.slot .card{ position:absolute; }
.ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--cw)*0.5); opacity:.5; color:var(--slot-text,rgba(255,255,255,.8)); }
.count{ position:absolute; bottom:3px; right:4px; font-size:.6rem; font-weight:800;
  background:rgba(0,0,0,.6); color:#fff; padding:0 5px; border-radius:7px; }

.tab-zone{ display:flex; gap:var(--gap); justify-content:center; align-items:flex-start; }
.col{ position:relative; flex:0 0 var(--cw); width:var(--cw); min-width:var(--cw); max-width:var(--cw);
  min-height:var(--ch); border-radius:calc(var(--cw)*0.12); }
.col.empty{ box-shadow:inset 0 0 0 2px var(--slot-line,rgba(255,255,255,.28)); }

/* special */
.special-zone{ position:relative; width:100%; height:100%; }
.cellwrap{ position:absolute; width:var(--cw); height:var(--ch); }
.cellwrap .card{ left:0; top:0; }
.cellwrap .ph{ box-shadow:inset 0 0 0 2px var(--slot-line,rgba(255,255,255,.25)); border-radius:calc(var(--cw)*0.12); }
.blocked .card{ filter:brightness(.66) saturate(.7); }
.hot .card{ box-shadow:0 0 0 2px var(--gold,#ffd54a), 0 2px 6px rgba(0,0,0,.5); }

/* selection / target / hint */
.card.sel{ outline:3px solid var(--gold,#ffd54a); outline-offset:-1px; transform:translateY(-5px); z-index:60;
  box-shadow:0 8px 14px rgba(0,0,0,.45); }
.target::after{ content:""; position:absolute; inset:0; border-radius:calc(var(--cw)*0.12);
  box-shadow:0 0 0 3px var(--gold,#ffd54a); animation:glow 1s ease-in-out infinite; pointer-events:none; }
@keyframes glow{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }
.pulse{ animation:pulse .6s ease 2; z-index:70; }
@keyframes pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.13) } }
.shake{ animation:shake .35s; }
@keyframes shake{ 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-6px) } 75%{ transform:translateX(6px) } }

/* card entrance (deal) + flip reveal */
.card.enter{ animation:dealIn .36s cubic-bezier(.2,.8,.25,1) both; }
@keyframes dealIn{ from{ transform:translateY(-30px) scale(.8); opacity:0 } to{ transform:none; opacity:1 } }
.card.reveal{ animation:flipUp .28s ease; }
@keyframes flipUp{ 0%{ transform:rotateY(85deg) } 100%{ transform:rotateY(0) } }
.card.moving{ z-index:120; }

/* foundation receives a card -> pop */
.slot.pop{ animation:pop .36s cubic-bezier(.2,1.3,.4,1); z-index:40; }
@keyframes pop{ 0%{ transform:scale(1) } 40%{ transform:scale(1.18) } 100%{ transform:scale(1) } }
/* a suit completed (A..K) -> golden flourish */
.slot.complete{ animation:complete .76s ease; z-index:41; }
@keyframes complete{
  0%{ box-shadow:inset 0 0 0 2px var(--slot-line) }
  35%{ box-shadow:0 0 22px 7px var(--gold,#ffd54a), inset 0 0 0 2px var(--gold,#ffd54a) }
  100%{ box-shadow:inset 0 0 0 2px var(--slot-line) }
}
/* stock recycled (waste -> stock) -> quick flip-spin */
.slot.recycle{ animation:recycle .46s ease; }
@keyframes recycle{ 0%{ transform:rotateY(0) } 50%{ transform:rotateY(180deg) scale(.94) } 100%{ transform:rotateY(360deg) } }

/* drag ghost */
.ghost{ position:fixed; z-index:999; pointer-events:none; width:var(--cw); height:var(--ch); filter:drop-shadow(0 12px 14px rgba(0,0,0,.5)); }
.ghost .card{ position:absolute; }

/* fx */
.fx{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:200; }

/* ===================== MODALS ===================== */
.modal{ position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.5); padding:16px; backdrop-filter:blur(3px); }
.modal-window{ width:100%; max-width:460px; max-height:88vh; height:auto; border-radius:18px; }
@media (min-width:820px){ .modal-window{ height:auto; } }
.modal-window .win-body{ overflow-y:auto; }
.modal-hint{ margin:0 0 12px; color:var(--muted); }
.theme-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.theme-chip{ display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer; padding:10px;
  background:var(--tile); color:var(--text); border:1px solid var(--edge); border-radius:13px; font-family:var(--font);
  transition:transform .1s, filter .1s; }
.theme-chip:hover{ filter:brightness(1.08); }
.theme-chip:active{ transform:scale(.97); }
.theme-chip.cur{ outline:2px solid var(--accent); outline-offset:1px; }
.tc-prev{ width:36px; height:36px; flex:0 0 auto; display:grid; grid-template-rows:1fr 1fr; overflow:hidden; border-radius:9px; box-shadow:0 1px 3px rgba(0,0,0,.4); }
.tc-prev .tc-top{ background:var(--pc1); }
.tc-prev .tc-bot{ display:flex; }
.tc-prev .tc-bot b{ flex:1; display:block; }
.tc-text{ display:flex; flex-direction:column; line-height:1.2; }
.tc-name{ font-weight:800; font-size:.9rem; }
.tc-note{ font-size:.72rem; color:var(--muted); }

.win-window{ max-width:380px; }
.win-body-center{ text-align:center; padding:26px 20px; }
.win-title{ margin:4px 0 10px; font-weight:900; font-size:2.2rem;
  background:linear-gradient(180deg,#fff,var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:bob 1.5s ease-in-out infinite; }
.win-sub{ margin:0 0 18px; font-weight:700; color:var(--muted); }
.win-actions{ display:flex; gap:10px; justify-content:center; }
.help-body{ font-size:.92rem; line-height:1.6; }
.help-blurb{ font-style:italic; color:var(--muted); margin-top:0; }

/* toast */
.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(16px);
  background:rgba(20,20,28,.92); color:#fff; padding:10px 16px; border-radius:999px; font-weight:700; font-size:.88rem;
  box-shadow:0 8px 22px rgba(0,0,0,.4); opacity:0; transition:all .22s ease; z-index:600; pointer-events:none; }
.toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===================== COLOR THEMES (modern skin) ===================== */
.theme-vibrancy{ --accent:#ff3da6; --accent2:#ffd23f; --on-accent:#2a0030; --title:#7a1fa2; --title2:#ff3da6;
  --edge:rgba(255,255,255,.2); --muted:rgba(255,255,255,.8); --gold:#ffd23f;
  --desktop:linear-gradient(135deg,#7a1fa2 0%,#ff3da6 38%,#5b21b6 66%,#0ea5b7 100%);
  --felt:radial-gradient(120% 95% at 50% 0%,#6a1f9e 0%,#3a0f63 60%,#220741 100%);
  --back1:#ff3da6; --back2:#ffd23f; --slot-line:rgba(255,210,63,.55);
  --fx1:#ff3da6; --fx2:#ffd23f; --fx3:#22d3ee; }
.theme-emerald{ --accent:#16a34a; --accent2:#22c55e; --title:#0f7a45; --title2:#0a5230;
  --desktop:radial-gradient(120% 120% at 50% 0%,#1aa35a,#0c5a32 45%,#073b22 100%);
  --felt:radial-gradient(120% 90% at 50% 0%,#0e7a43,#0a4d2c 70%,#06351e 100%);
  --back1:#0f7a45; --back2:#14a35a; --fx3:#22c55e; }
.theme-ocean{ --accent:#0ea5b7; --accent2:#22d3ee; --title:#0b6b78; --title2:#073b4c;
  --desktop:radial-gradient(120% 120% at 50% 0%,#16a6c0,#0a5666 45%,#062b38 100%);
  --felt:radial-gradient(120% 90% at 50% 0%,#0c6f80,#083f4c 70%,#052a33 100%);
  --back1:#0b6b78; --back2:#11a3b8; --fx1:#7dd3fc; --fx3:#22d3ee; }
.theme-grape{ --accent:#8b5cf6; --accent2:#a78bfa; --title:#5b21b6; --title2:#3b0f73;
  --desktop:radial-gradient(120% 120% at 50% 0%,#7c3aed,#3b0f73 50%,#1e0a3c 100%);
  --felt:radial-gradient(120% 90% at 50% 0%,#5b21b6,#2e1065 70%,#1c0a40 100%);
  --back1:#6d28d9; --back2:#9333ea; --fx1:#ddd6fe; --fx3:#a78bfa; }
.theme-sunset{ --accent:#fb7185; --accent2:#fb923c; --title:#c2410c; --title2:#7c2d12;
  --desktop:linear-gradient(180deg,#fb923c,#f43f5e 55%,#7c2d12 100%);
  --felt:radial-gradient(120% 90% at 50% 0%,#b9472a,#7c2d12 70%,#4a1709 100%);
  --back1:#c2410c; --back2:#ea580c; --fx1:#fed7aa; --fx2:#fff; --fx3:#fb7185; }
.theme-rose{ --accent:#ec4899; --accent2:#f472b6; --title:#9d174d; --title2:#831843;
  --desktop:radial-gradient(120% 120% at 50% 0%,#f472b6,#9d174d 55%,#500724 100%);
  --felt:radial-gradient(120% 90% at 50% 0%,#a21456,#831843 70%,#500724 100%);
  --back1:#be185d; --back2:#db2777; --fx1:#fbcfe8; --fx3:#f472b6; }
.theme-crimson{ --accent:#ef4444; --accent2:#f87171; --title:#991b1b; --title2:#450a0a;
  --desktop:radial-gradient(120% 120% at 50% 0%,#dc2626,#7f1d1d 50%,#3b0808 100%);
  --felt:radial-gradient(120% 90% at 50% 0%,#9b1c1c,#5a1010 70%,#360808 100%);
  --back1:#991b1b; --back2:#dc2626; --fx1:#fecaca; --fx2:#fff; --fx3:#f87171; }
.theme-noir{ --accent:#3b82f6; --accent2:#60a5fa; --title:#1e293b; --title2:#0b1020;
  --panel:rgba(255,255,255,.07); --tile:rgba(255,255,255,.06); --edge:rgba(255,255,255,.12);
  --desktop:radial-gradient(120% 120% at 50% 0%,#1e293b,#0b1020 60%,#05070f 100%);
  --felt:radial-gradient(120% 90% at 50% 0%,#16213b,#0b1020 70%,#05070f 100%);
  --back1:#1e3a8a; --back2:#2563eb; --fx1:#60a5fa; --fx2:#fff; --fx3:#38bdf8; }
.theme-vaporwave{ --accent:#ff5fd2; --accent2:#36e6ff; --title:#7a1fa2; --title2:#3a0f63; --on-accent:#1a0b2e;
  --desktop:linear-gradient(180deg,#ff8fe0,#7a3cff 55%,#2a0f4d 100%);
  --felt:radial-gradient(120% 90% at 50% 0%,#5a1d8c,#2a0f4d 70%,#170733 100%);
  --back1:#7a3cff; --back2:#ff5fd2; --slot-line:rgba(54,230,255,.4); --gold:#ffe66d;
  --fx1:#ff5fd2; --fx2:#36e6ff; --fx3:#ffe66d; }
.theme-arcade{ --accent:#22d3ee; --accent2:#f472b6; --title:#111133; --title2:#0b0b1a; --on-accent:#06121a;
  --panel:rgba(255,255,255,.06); --tile:rgba(0,0,0,.4); --edge:rgba(34,211,238,.25);
  --desktop:radial-gradient(120% 120% at 50% 0%,#1a1140,#0b0b1a 70%);
  --felt:linear-gradient(180deg,#12122e,#0b0b1a);
  --back1:#5b21b6; --back2:#22d3ee; --slot-line:rgba(34,211,238,.4); --gold:#fde047;
  --fx1:#22d3ee; --fx2:#f472b6; --fx3:#fde047; }

/* ===================== WINDOWS 98 SKIN (opt-in) ===================== */
.theme-win98{
  --font:"Tahoma","MS Sans Serif","Segoe UI",sans-serif; font-size:14px;
  --text:#000; --muted:#000; --edge:#000;
  --face:#c0c0c0; --panel:#c0c0c0; --panel2:#c0c0c0; --tile:#fff;
  --accent:#000080; --accent2:#1084d0; --on-accent:#fff;
  --title:#000080; --title2:#1084d0; --field-bg:#fff; --field-text:#000;
  --red:#c00000; --black:#000; --slot-line:rgba(255,255,255,.35);
  --back1:#0a3d8f; --back2:#1450b0; --gold:#000080;
  --desktop:#1d6b39; --felt:#0c5a30;
  --hl:#fff; --lt:#dfdfdf; --sh:#808080; --dk:#000;
}
.theme-win98 .window{ border-radius:0; backdrop-filter:none; border:1px solid #000;
  box-shadow:inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--lt), inset -2px -2px 0 var(--sh), inset 2px 2px 0 var(--hl); }
@media (min-width:820px){ .theme-win98 .window{ border-radius:0; } }
.theme-win98 .titlebar{ height:30px; padding:0 4px 0 7px; box-shadow:none;
  background:linear-gradient(90deg,#000080,#1084d0); }
.theme-win98 .tb-title{ font-size:14px; text-shadow:1px 1px 0 rgba(0,0,0,.4); }
.theme-win98 .tb-btn{ width:24px; height:22px; border-radius:0; color:#000; background:#c0c0c0; border:none;
  box-shadow:inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--lt), inset -2px -2px 0 var(--sh), inset 2px 2px 0 var(--hl); }
.theme-win98 .tb-btn:hover{ background:#c0c0c0; }
.theme-win98 .tb-btn:active{ box-shadow:inset 1px 1px 0 var(--sh), inset -1px -1px 0 var(--lt), inset 2px 2px 0 var(--dk), inset -2px -2px 0 var(--hl); }
.theme-win98 .close-btn:hover{ background:#c0c0c0; }
.theme-win98 .menubar{ display:flex; gap:2px; padding:2px 4px; font-size:13px; background:#c0c0c0; }
.theme-win98 .menubar span{ padding:3px 9px; }
.theme-win98 .menubar span:hover{ background:#000080; color:#fff; }
.theme-win98 .statusbar{ background:#c0c0c0; border-top:none; padding:3px; gap:4px; color:#000; }
.theme-win98 .status-cell{ padding:3px 8px; box-shadow:inset 1px 1px 0 var(--sh), inset -1px -1px 0 var(--hl); }
.theme-win98 .linklike{ color:#000; }
.theme-win98 .btn,.theme-win98 .tab,.theme-win98 .tb-btn{ border-radius:0; }
.theme-win98 .btn{ background:#c0c0c0; color:#000; border:none; box-shadow:inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--lt), inset -2px -2px 0 var(--sh), inset 2px 2px 0 var(--hl); }
.theme-win98 .btn:hover{ filter:none; }
.theme-win98 .btn:active{ transform:none; box-shadow:inset 1px 1px 0 var(--sh), inset -1px -1px 0 var(--lt), inset 2px 2px 0 var(--dk), inset -2px -2px 0 var(--hl); }
.theme-win98 .btn.primary{ background:#c0c0c0; color:#000; }
.theme-win98 .field{ border-radius:0; box-shadow:inset 1px 1px 0 var(--sh), inset -1px -1px 0 var(--lt), inset 2px 2px 0 var(--dk), inset -2px -2px 0 var(--hl); }
.theme-win98 .tab{ background:#c0c0c0; color:#000; border:none; box-shadow:inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--lt), inset -2px -2px 0 var(--sh), inset 2px 2px 0 var(--hl); }
.theme-win98 .tab.on{ color:#000; box-shadow:inset 1px 1px 0 var(--sh), inset -1px -1px 0 var(--lt), inset 2px 2px 0 var(--dk), inset -2px -2px 0 var(--hl); }
.theme-win98 .toolbar{ background:#c0c0c0; border-bottom:none; box-shadow:inset 0 -1px 0 var(--sh); }
.theme-win98 .game-card{ border-radius:0; background:#fff; color:#000; border:none;
  box-shadow:inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--lt), inset -2px -2px 0 var(--sh), inset 2px 2px 0 var(--hl); }
.theme-win98 .game-card:hover{ transform:none; filter:none; }
.theme-win98 .gc-fam{ color:#000080; } .theme-win98 .gc-blurb{ color:#000; } .theme-win98 .gc-win{ color:#000080; }
.theme-win98 .tagline,.theme-win98 .toolbar-stat,.theme-win98 .tc-note,.theme-win98 .modal-hint{ color:#000; }
.theme-win98 .logo span{ background:linear-gradient(180deg,#000080,#1084d0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.theme-win98 .modal-window{ border-radius:0; }
.theme-win98 .theme-chip{ border-radius:0; background:#c0c0c0; color:#000; border:none;
  box-shadow:inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--lt), inset -2px -2px 0 var(--sh), inset 2px 2px 0 var(--hl); }
.theme-win98 .theme-chip.cur{ outline:2px solid #000080; outline-offset:-4px; }
.theme-win98 .tc-prev{ border-radius:0; }
.theme-win98 .win-title{ background:linear-gradient(180deg,#000080,#1084d0); -webkit-background-clip:text; background-clip:text; color:transparent; }