:root{
  color-scheme:dark only;   /* opt out of Chrome's forced Auto-Dark re-theming */
  --bg:#0a0e16; --panel:#1a2436; --panel2:#24314a; --line:#3a4a66;
  --txt:#f5f8ff; --mut:#c2cfe6; --acc:#ffd633; --acc2:#3ce0c0;
  --good:#4fe38f; --bad:#ff6b78; --brand:#ffd633;
}
html{color-scheme:dark only}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--txt);
  font-family:-apple-system,Segoe UI,Roboto,system-ui,sans-serif;
  overscroll-behavior:none; user-select:none;
}
#app{display:flex;flex-direction:column;height:100dvh}

/* Header */
#topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background:linear-gradient(180deg,#0e1420,#0b0f17);border-bottom:1px solid var(--line);
}
.brand{font-weight:800;font-size:17px;letter-spacing:.3px;display:flex;align-items:center;gap:8px}
.brand .sub{font-weight:600;color:var(--mut);font-size:13px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)}
.chip{
  background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  border-radius:999px;padding:8px 14px;font-weight:800;font-size:15px;display:flex;gap:6px;align-items:center;
}
.spark{color:var(--acc);display:inline-flex;align-items:center}
/* inline SVG icon system (em-sized, inherits color) */
.ic{width:1em;height:1em;vertical-align:-0.14em}
.spk{width:1em;height:1em;vertical-align:-0.14em;color:var(--acc)}
.cost .spk{color:var(--acc)}
.gicon{font-size:38px;color:var(--acc2);line-height:1}
.gicon .ic{width:1em;height:1em}
.tab .ti{font-size:22px;line-height:0;display:block;margin-bottom:1px}
.gt-ic{font-size:20px;color:var(--acc2);display:inline-flex;vertical-align:middle}
.mface{width:56%;height:56%}

/* Views */
#view{flex:1;overflow-y:auto;padding:16px 14px 90px;-webkit-overflow-scrolling:touch}
h2.title{font-size:20px;margin:2px 0 14px}
p.lead{color:var(--mut);margin:0 0 16px;line-height:1.4;font-size:14px}

/* Game grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{
  background:linear-gradient(160deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:18px;padding:14px;position:relative;overflow:hidden;
  transition:transform .08s;
}
.card:active{transform:scale(.97)}
.card .emoji{font-size:34px;line-height:1}
.card .gname{font-weight:800;margin-top:8px;font-size:15px;color:var(--txt)}
.card .best{color:var(--mut);font-size:13px;margin-top:3px}
.card .cost{position:absolute;top:10px;right:10px;background:#000c;border:1px solid var(--line);
  border-radius:999px;padding:4px 9px;font-size:12px;font-weight:800;color:var(--acc)}

/* Generic panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:14px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.muted{color:var(--mut);font-size:13px}
.big{font-size:30px;font-weight:900}
.btn{
  background:var(--acc);color:#1a1400;border:none;border-radius:14px;padding:14px;
  font-weight:900;font-size:16px;width:100%;margin-top:6px;
}
.btn:active{filter:brightness(.92)}
.btn.sec{background:var(--panel2);color:var(--txt);border:1px solid var(--line)}
.btn.good{background:var(--good);color:#04240f}
.amts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0}
.amt{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;font-weight:800}
.amt .r{font-size:20px}
.amt .s{color:var(--acc);font-size:12px;margin-top:3px}
.amt.on{border-color:var(--acc);background:#2a2410}

/* Streak / build */
.streakGrid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-top:10px}
.day{aspect-ratio:1;border-radius:6px;background:var(--panel2);border:1px solid var(--line)}
.day.hit{background:var(--acc);border-color:var(--acc)}
.day.today{outline:2px solid var(--acc2)}
.bar{height:12px;background:var(--panel2);border-radius:999px;overflow:hidden;margin-top:8px;border:1px solid var(--line)}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--acc2),var(--acc));width:0}

/* Leaderboard */
.lbrow{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid var(--line)}
.lbrow:last-child{border:none}
.rank{width:26px;font-weight:900;color:var(--mut);text-align:center}
.rank.g1{color:#ffd24a}.rank.g2{color:#c9d4e6}.rank.g3{color:#e0975a}
.lbrow .nm{flex:1;font-weight:700}
.lbrow .sc{font-weight:800;color:var(--acc)}
.you{color:var(--acc2)}

/* Draw */
.ticket{display:flex;align-items:center;gap:12px;background:linear-gradient(120deg,#20182b,#171a2b);
  border:1px dashed #4a3c66;border-radius:16px;padding:16px;margin-bottom:12px}
.ticket .tn{font-size:34px;font-weight:900;color:var(--acc)}

/* Compliance / fair-play rules block */
.legal .lh{font-weight:800;font-size:14px;margin-bottom:8px;color:var(--txt)}
.legal ul{margin:0;padding-left:18px;color:var(--mut);font-size:12.5px;line-height:1.55}
.legal li{margin-bottom:6px}
.legal b{color:var(--txt)}
.legal a{color:var(--acc);text-decoration:underline}

/* Nav */
#tabbar{
  display:flex;background:#0d1320;border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{flex:1;background:none;border:none;color:var(--mut);font-size:11px;font-weight:700;
  padding:9px 0 8px;display:flex;flex-direction:column;align-items:center;gap:3px}
.tab span{font-size:11px}
.tab.active{color:var(--acc)}
.tab:before{content:attr(data-i)}

/* Game modal */
.modal{position:fixed;inset:0;background:var(--bg);z-index:50;display:flex;flex-direction:column}
.modal.hidden{display:none}
.game-head{display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;border-bottom:1px solid var(--line)}
#gameTitle{font-weight:800}
.game-hud{background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;font-weight:800;display:flex;gap:5px;align-items:center}
.ghost{background:none;border:none;color:var(--acc);font-size:16px;font-weight:700}
#gameStage{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
#gameStage canvas{touch-action:none;display:block}
#gameFoot{padding:12px 14px calc(env(safe-area-inset-bottom) + 12px)}

/* game-over card */
.over{position:absolute;inset:0;background:#0b0f17dd;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px;z-index:5}
.over .r{font-size:44px;font-weight:900}
.over .won{color:var(--acc);font-weight:800;font-size:18px}

.toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%);
  background:#0f1826;border:1px solid var(--line);color:var(--txt);
  padding:12px 18px;border-radius:14px;font-weight:700;z-index:99;max-width:86%;text-align:center}
.toast.hidden{display:none}
.hidden{display:none}