/* Shared chrome for Mellow games: cozy top bar + theme tokens. */
:root{
  --cream:#fff6ec; --ink:#4a3b33; --ink-soft:#8a7668;
  --card:#fffdfa; --line:#f0e2d5;
  --apricot:#ff9f6b; --apricot-d:#e0623c;
  --radius:18px;
  --shadow:0 10px 30px rgba(120,80,50,0.10), 0 2px 8px rgba(120,80,50,0.06);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; }
body{
  font-family:"Nunito", system-ui, sans-serif; color:var(--ink);
  background:
    radial-gradient(120% 80% at 15% -10%, #ffe9d6 0%, transparent 55%),
    radial-gradient(120% 90% at 100% 0%, #ffe0e6 0%, transparent 50%),
    linear-gradient(180deg, var(--cream) 0%, #fdeede 100%);
  background-attachment:fixed;
  min-height:100dvh; display:flex; flex-direction:column;
  user-select:none; -webkit-user-select:none;
}
.topbar{
  display:flex; align-items:center; gap:12px;
  max-width:560px; width:100%; margin:0 auto;
  padding:16px 18px 6px;
}
.back{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:800; color:var(--ink); font-size:15px;
  background:var(--card); border:1.5px solid var(--line); border-radius:999px;
  padding:8px 14px 8px 11px; box-shadow:var(--shadow); cursor:pointer;
}
.back:hover{ border-color:var(--apricot); }
.game-title{
  font-family:"Baloo 2", sans-serif; font-weight:800; font-size:20px; margin:0;
}
.spacer{ flex:1; }
.stat{
  display:flex; flex-direction:column; align-items:center; min-width:64px;
  background:var(--card); border:1.5px solid var(--line); border-radius:14px;
  padding:5px 10px; box-shadow:var(--shadow);
}
.stat .k{ font-size:10px; font-weight:800; letter-spacing:1.5px; color:var(--ink-soft); }
.stat .v{ font-size:18px; font-weight:900; font-variant-numeric:tabular-nums; }
.wrap{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; max-width:560px; margin:0 auto; padding:10px 18px 26px; gap:14px;
}
.btn{
  font-family:"Baloo 2", sans-serif; font-weight:800; font-size:16px; color:#fff; cursor:pointer;
  padding:11px 22px; border:none; border-radius:999px;
  background:linear-gradient(180deg,#ff9f6b,#ff7e57);
  box-shadow:0 5px 0 var(--apricot-d), 0 8px 16px rgba(224,98,60,.3);
  transition:transform .08s, box-shadow .08s;
}
.btn:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--apricot-d); }
.btn.ghost{ background:var(--card); color:var(--ink); border:1.5px solid var(--line); box-shadow:var(--shadow); }
.btn.ghost:active{ transform:translateY(2px); box-shadow:none; }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; }
.win{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(74,59,51,0.4); backdrop-filter:blur(4px); z-index:20;
}
.win.show{ display:flex; }
.win .panel{
  background:var(--card); border-radius:24px; padding:28px 30px; text-align:center;
  box-shadow:0 24px 60px rgba(120,80,50,0.3); max-width:88%; width:320px;
  animation:pop .3s cubic-bezier(.2,1.3,.3,1) both;
}
@keyframes pop{ from{ transform:scale(.9); opacity:0; } to{ transform:none; opacity:1; } }
.win h2{ font-family:"Baloo 2"; margin:0 0 4px; font-size:30px; }
.win p{ margin:0 0 18px; color:var(--ink-soft); font-weight:700; }