/* Riffle — shared chrome: HUD, sidebar rail, toasts, buttons, panels. Palette: ink on near-black, gold accents. */
:root{--ink:#f1ece0;--ink2:#c2bbab;--ink3:#8a8577;--gold:#f3f1ea;--gold2:#ffffff;--cash:#4ad17f;--cash2:#8ff0b6;--red:#e0574a;--green:#49c37f;--bg:#07080a;--panel:rgba(10,12,16,.82);--line:rgba(255,255,255,.09);--font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.sc-hud{display:flex;align-items:center;gap:10px;font:13px/1 var(--font);color:var(--ink)}
.sc-hud-coins{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 8px;border-radius:999px;background:var(--panel);border:1px solid rgba(74,209,127,.4);color:var(--cash2);font-weight:800;font-variant-numeric:tabular-nums;text-decoration:none;backdrop-filter:blur(6px)}
.sc-hud-coins .coin{width:22px;height:13px;border-radius:2px;background:radial-gradient(circle at 50% 50%,#b9ffd4 0 2.6px,transparent 3.2px),linear-gradient(#5fd98f,#2f9e5e);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),inset 0 0 0 3px rgba(0,0,0,.28);display:inline-block}
.sc-hud-coins b.up{color:#9ff0b3}.sc-hud-coins b.down{color:#ff9a8f}
.sc-hud-lvl{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(6px)}
.sc-hud-lvl span{font-weight:800;color:var(--ink);min-width:16px;text-align:center}
.sc-hud-lvl span::before{content:"LV ";font-size:9px;letter-spacing:.12em;color:var(--ink3)}
.sc-hud-lvl i{display:block;width:64px;height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.sc-hud-lvl i b{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .6s cubic-bezier(.2,.9,.3,1)}
/* rail */
.sc-rail{position:fixed;left:0;top:0;bottom:0;z-index:30;width:52px;background:rgba(7,8,10,.92);border-right:1px solid var(--line);display:flex;flex-direction:column;transition:width .18s ease;font:13px/1.2 var(--font);color:var(--ink2);overflow:hidden;backdrop-filter:blur(8px)}
.sc-rail.open{width:200px}
.sc-rail-toggle{height:52px;width:52px;border:0;background:none;cursor:pointer;display:grid;place-items:center;color:var(--ink2)}
.sc-rail-toggle span,.sc-rail-toggle span::before,.sc-rail-toggle span::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;content:""}
.sc-rail-toggle span::before{position:absolute;top:-6px}.sc-rail-toggle span::after{position:absolute;top:6px}
.sc-rail-items{display:flex;flex-direction:column;gap:2px;padding:4px 6px}
.sc-rail-items a{display:flex;align-items:center;gap:12px;height:40px;padding:0 6px;border-radius:8px;color:var(--ink2);text-decoration:none;white-space:nowrap}
.sc-rail-items a i{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-style:normal;background:rgba(255,255,255,.05);color:var(--ink);flex:none}
.sc-rail-items a i svg{width:18px;height:18px;display:block}
.sc-rail-items a:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.sc-rail-items a.cur{background:rgba(255,255,255,.12);color:var(--gold2)}.sc-rail-items a.cur i{background:var(--gold);color:#1b1405}
.sc-rail-items a span{opacity:0;transition:opacity .15s}.sc-rail.open .sc-rail-items a span{opacity:1}
.sc-rail-foot{margin-top:auto;padding:10px;border-top:1px solid var(--line);opacity:0;transition:opacity .15s}.sc-rail.open .sc-rail-foot{opacity:1}
.sc-rail-me b{display:block;color:var(--ink);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sc-rail-me small{color:var(--ink3);font-size:11px;white-space:nowrap}
body.has-rail .top,body.has-rail .brand-wrap{padding-left:60px}
/* toasts */
.sc-toasts{position:fixed;left:50%;top:64px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.sc-toast{background:rgba(10,12,16,.94);border:1px solid var(--line);color:var(--ink);padding:10px 16px;border-radius:12px;font:13px/1.35 var(--font);box-shadow:0 14px 40px rgba(0,0,0,.6);animation:scpop .35s cubic-bezier(.2,.9,.3,1.4) both;white-space:nowrap}
.sc-toast.gold{border-color:rgba(255,255,255,.55);color:var(--gold2)}.sc-toast.bad{border-color:rgba(224,87,74,.5);color:#ffb3aa}
.sc-toast.out{opacity:0;transform:translateY(-6px);transition:all .35s}
@keyframes scpop{from{opacity:0;transform:translateY(-8px) scale(.9)}to{opacity:1;transform:none}}
/* generic bits used by game pages */
.sc-btn{height:44px;padding:0 18px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(10,12,16,.82);color:var(--ink2);font:700 14px var(--font);cursor:pointer;backdrop-filter:blur(6px);transition:background .12s,transform .08s}
.sc-btn:hover{background:rgba(30,34,42,.9);color:var(--ink)}.sc-btn:active{transform:translateY(1px)}.sc-btn:disabled{opacity:.4;cursor:default;transform:none}
.sc-btn.gold{background:var(--gold);color:#1b1405;border-color:var(--gold)}.sc-btn.gold:hover{background:var(--gold2)}
.sc-btn.red{background:rgba(120,32,36,.85);border-color:rgba(255,120,120,.25);color:#fff}.sc-btn.green{background:rgba(26,86,52,.9);border-color:rgba(100,220,150,.3);color:#fff}
.sc-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(8px);box-shadow:0 20px 60px rgba(0,0,0,.5)}
@media (max-width:720px){.sc-hud-lvl{display:none}.sc-hud-coins{padding:5px 8px 5px 5px;gap:5px;font-size:12px}.sc-hud-coins .coin{width:17px;height:11px}.sc-rail{width:44px}.sc-rail-toggle{width:44px;height:44px}.sc-hud-lvl i{width:40px}body.has-rail .top,body.has-rail .brand-wrap{padding-left:50px}}

/* room vignette on the 3D pages: darkens the corners like a lamp-lit card room */
body.sc-vignette::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse 70% 62% at 50% 46%,transparent 55%,rgba(0,0,0,.58) 100%)}
.sc-hud-music{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--ink3);cursor:pointer;transition:color .15s,border-color .15s,transform .15s}
.sc-hud-music svg{width:17px;height:17px}
.sc-hud-music.on{color:var(--ink);border-color:rgba(255,255,255,.35)}
.sc-hud-music:hover{transform:translateY(-1px)}
.sc-hud-music:focus-visible{outline:2px solid #fff;outline-offset:2px}

.sc-hud-boost{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(74,209,127,.12);border:1px solid rgba(74,209,127,.45);color:#9ff0b3;font-size:11.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.sc-hud-boost::before{content:"";width:7px;height:7px;border-radius:50%;background:#5fd98f;box-shadow:0 0 8px #5fd98f}
@media (max-width:720px){.sc-hud-boost{font-size:0;padding:6px;gap:0}.sc-hud-boost::before{width:9px;height:9px}}

/* phones and short screens: the collapsed rail reserves no space — only the toggle floats in the corner; opening it overlays the page */
@media (max-width:900px), (max-height:520px){
  .sc-rail{width:0;border-right:0;background:transparent;overflow:visible;pointer-events:none}
  .sc-rail .sc-rail-toggle{position:fixed;left:0;top:0;width:44px;height:44px;pointer-events:auto;background:rgba(7,8,10,.55);border-bottom-right-radius:12px;backdrop-filter:blur(6px)}
  .sc-rail .sc-rail-items,.sc-rail .sc-rail-foot{display:none}
  .sc-rail.open{width:210px;background:rgba(7,8,10,.96);border-right:1px solid var(--line);overflow:hidden;pointer-events:auto;box-shadow:12px 0 40px rgba(0,0,0,.5)}
  .sc-rail.open .sc-rail-items{display:flex;margin-top:4px}
  .sc-rail.open .sc-rail-toggle{position:static;background:none;width:52px;height:52px}
  body.has-rail .top,body.has-rail .brand-wrap{padding-left:52px}
}
/* game pages on phones: play sideways. In portrait a full-screen prompt asks for a turn (and offers to lock landscape where the browser allows it). */
.sc-rotate{display:none;position:fixed;inset:0;z-index:1000;background:#07080a;color:#fff;text-align:center;padding:24px}
.sc-rotate .sc-rotate-in{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:300px}
.sc-rotate svg{width:72px;height:72px;animation:scRotate 2.2s ease-in-out infinite}
.sc-rotate h2{margin:0;font:800 22px/1.2 var(--font)}.sc-rotate p{margin:0;color:var(--ink2);font-size:14px;line-height:1.45}
.sc-rotate button{height:44px;padding:0 22px;border:0;border-radius:10px;background:#fff;color:#111;font:800 14px var(--font);cursor:pointer}
.sc-rotate a{color:var(--ink3);font-size:13px}
@keyframes scRotate{0%,20%{transform:rotate(0)}50%,70%{transform:rotate(-90deg)}100%{transform:rotate(-90deg)}}
@media (max-width:900px) and (orientation:portrait){body.sc-game .sc-rotate{display:grid;place-items:center}}