:root{ --bg:#130b2b; --card:#1d1442; --text:#fff; --gold1:#FFD84D; --gold2:#FFB800; --muted:#b7bfd3; }
*{box-sizing:border-box} html,body{height:100%} html{-webkit-text-size-adjust:100%}
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
  color:var(--text); background: radial-gradient(1200px 600px at 50% 0%, #1c0f3d, var(--bg));
  display:grid; place-items:center; padding:clamp(12px,3vw,24px); padding-bottom:calc(env(safe-area-inset-bottom,0) + 16px);
  -webkit-tap-highlight-color:transparent }
.card{ position:relative; width:min(860px,94vw); background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border-radius:22px; padding:clamp(18px,4vw,28px) clamp(14px,4vw,24px) 22px;
  box-shadow:0 10px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06) }
.brand{text-align:center}
.logo{width:94px;height:94px;border-radius:20px;box-shadow:0 6px 24px rgba(0,0,0,.3)}
.logo.interactive{transition: transform .25s ease} .logo.interactive:active{transform:scale(.96) rotate(-5deg)}
h1{margin:.5rem 0 .15rem;font-size:clamp(1.35rem,4.9vw,2rem);letter-spacing:.6px}
.tagline{color:#d9dcff;font-size:clamp(.9rem,3.6vw,1rem)}
.actions{display:grid;gap:14px;grid-template-columns:1fr;margin:16px 0 10px}
.btn{--bg:linear-gradient(180deg,var(--gold1),var(--gold2));display:inline-flex;align-items:center;justify-content:center;
  min-height:clamp(46px,10vw,56px);padding:12px 16px;border:0;border-radius:16px;font-weight:800;
  font-size:clamp(1rem,3.9vw,1.08rem);color:#3b2600;text-transform:uppercase;letter-spacing:.4px;
  box-shadow:0 10px 22px rgba(255,184,0,.25);background:var(--bg)}
.btn.secondary{background:#ffd05a} .btn.outline{background:transparent;color:#fff;border:2px solid #fff;box-shadow:0 0 14px rgba(255,255,255,.6)}
.btn.outline.double-bounce:active{animation:db 380ms ease 1}
@keyframes db{0%{transform:scale(.97)}45%{transform:scale(1.03)}70%{transform:scale(.96)}100%{transform:scale(1)}}
/* Tap glow */
.tap{transition:transform .12s ease, box-shadow .15s ease, filter .15s ease}
.tap:active{transform:scale(.97); box-shadow:0 0 0 0 transparent, 0 0 18px rgba(255,216,77,.5); filter:brightness(1.06)}
/* Home icon (subpages) */
.home-btn{ position:absolute; top:12px; left:12px; height:38px; width:38px; display:grid; place-items:center; border-radius:12px;
  background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) }
.home-btn img{ width:22px; height:22px }
/* RR Coins pill (text white + bigger logo + glow) */
.coin-pill{ position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; gap:8px; padding:10px 14px;
  border-radius:999px; background:linear-gradient(180deg,var(--gold1),var(--gold2));
  color:#fff; font-weight:900; text-decoration:none; box-shadow:0 10px 22px rgba(255,184,0,.35)}
.coin-pill .rr-logo{ width:26px; height:26px; border-radius:8px; box-shadow:0 0 0 2px rgba(59,38,0,.35), 0 0 14px rgba(255,216,77,.6) }
.coin-pill .balance{ display:none; margin-left:6px; background:rgba(0,0,0,.35); color:#fff; padding:4px 8px; border-radius:999px; font-weight:900; font-size:.85rem }
.coin-pill:hover .balance{ display:inline-block }
/* Game shop */
.shop{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:14px}
.block{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border-radius:18px;padding:14px;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 28px rgba(0,0,0,.3); display:grid; grid-template-rows:auto auto 1fr auto; gap:8px}
.block:hover{transform:translateY(-2px)}
.block .ico{height:84px;display:grid;place-items:center}
.block .ico img{max-width:84px;max-height:84px}
.block h3{margin:.2rem 0 .2rem}
.block p{margin:0;color:#cfe0ff;font-size:.95rem}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#3b2b6f;color:#ffefb0;font-weight:700;font-size:.8rem}
/* Footer links WHITE */
.footer{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:18px;text-transform:none;font-size:clamp(.9rem,3.5vw,1rem)}
.footer a, .link{color:#fff;text-decoration:none;background:none;border:0;cursor:pointer}
.footer a:hover, .link:hover{text-decoration:underline}
/* Coins text */
.coins{text-align:center;margin-top:8px;font-size:clamp(.95rem,3.7vw,1rem)} #coinCount{font-weight:800;color:#fff}
/* Canvas & overlays */
canvas{ background:#0f0a25; display:block; margin:0 auto; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.4) }
.menu-btn{position:absolute;right:16px;top:12px;height:40px;width:40px;border-radius:12px;border:0;background:rgba(255,255,255,.08);color:#fff;font-size:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.mute-btn{position:absolute;right:64px;top:12px;height:40px;padding:0 10px;border-radius:12px;border:0;background:rgba(255,255,255,.08);color:#ffd87a;font-weight:800}
.menu-list{display:grid;gap:12px}
.menu-list .ghost{background:none;border:none;color:#ffd87a;font-size:1.05rem;text-transform:none;letter-spacing:.2px}
.overlay{position:fixed;inset:0;display:grid;place-items:center;background:rgba(10,7,25,.78)}
.panel{width:min(520px,92vw);background:#1d1442;color:#fff;border-radius:18px;padding:18px;text-align:center;box-shadow:0 10px 34px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.table{width:100%;border-collapse:collapse;margin-top:12px}
.table th,.table td{border-bottom:1px solid rgba(255,255,255,.1);padding:8px 6px;text-align:left;font-size:.95rem}
.small{color:#cfe0ff;font-size:.92rem}
@media (max-width:380px){.card{border-radius:18px}.logo{width:86px;height:86px}}

/* Inline RR Coins pill next to titles */
.coin-inline.coin-pill{ position:static; display:inline-flex; margin-left:8px; padding:8px 12px; box-shadow:0 6px 16px rgba(255,184,0,.28) }
/* Title row to place pill next to heading */
.title-row{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap }
/* Bottom fixed actions (e.g., Clear History) */
.bottom-fixed{ position:fixed; left:0; right:0; bottom:calc(env(safe-area-inset-bottom,0) + 10px); display:grid; place-items:center }
/* Extra spacing utilities */
.mt-8{ margin-top:8px } .mt-12{ margin-top:12px } .mt-16{ margin-top:16px } .mt-24{ margin-top:24px }
/* Ensure footer links white ONLY on home (others removed) */