/* MonsterSweeps design tokens: deep royal purple (Monster's coat) and coin gold (his crown).
   Loaded first on every page; css/home.css and /site.css build on these. */
@font-face{font-family:Adventor;src:url(/fonts/adventor-bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:InterW;src:url(/fonts/inter-400.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:InterW;src:url(/fonts/inter-600.woff) format("woff");font-weight:600;font-display:swap}
:root{
  color-scheme:dark;
  /* royal purples, darkest to brightest */
  --night:#12082a;--night2:#1a0c3a;--plum:#24104f;--royal:#2a1162;--royal2:#3a1a86;--violet:#6d33e6;--violet2:#8b5cf6;--lilac:#c9adff;
  /* coin golds */
  --gold:#ffc23d;--gold2:#ffe08a;--goldDeep:#b77a10;--goldInk:#2a1300;
  /* Monster's eye: a small accent only (ticks, live dots) */
  --eye:#3fd27a;
  /* text */
  --bone:#f7f2ff;--mute:#b9abd9;--mute2:#9a8cc0;
  /* lines and surfaces */
  --line:rgba(201,173,255,.16);--line2:rgba(201,173,255,.28);--goldLine:rgba(255,194,61,.38);
  --glass:linear-gradient(180deg,rgba(58,26,134,.42),rgba(36,16,79,.30));
  --glassSolid:linear-gradient(180deg,#2c1466,#1f0d47);
  /* coin button */
  --coin:linear-gradient(180deg,#ffe08a 0%,#ffc23d 45%,#f0a21c 100%);
  --coinShadow:0 1px 0 rgba(255,255,255,.65) inset,0 -3px 0 rgba(140,70,0,.38) inset,0 0 0 1px rgba(183,122,16,.55),0 14px 30px -12px rgba(255,177,31,.65);
  --coinShadowHi:0 1px 0 rgba(255,255,255,.65) inset,0 -3px 0 rgba(140,70,0,.38) inset,0 0 0 1px rgba(183,122,16,.55),0 20px 38px -12px rgba(255,177,31,.8);
  --cardShadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 50px -28px rgba(5,0,15,.85);
  /* type */
  --d:Adventor,"Avenir Next","Century Gothic",Futura,sans-serif;
  --b:InterW,Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-lg:28px;--r-md:18px;--r-sm:12px
}
/* body background propagates to the canvas, so the ::before backdrop below paints on top of it */
body{background-color:var(--night);color:var(--bone)}
/* the lair: royal glow overhead, a warm gold ember low left, deep plum floor */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(1100px 720px at 78% -8%,rgba(109,51,230,.38),transparent 62%),
  radial-gradient(900px 640px at 6% 96%,rgba(255,194,61,.09),transparent 60%),
  radial-gradient(700px 500px at 50% 45%,rgba(58,26,134,.22),transparent 70%),
  linear-gradient(180deg,#170a35,#110726 60%,#0d051e)}
::selection{background:var(--gold);color:var(--goldInk)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- mobile shell (js/shell.js): bottom bar + menu sheet ---------- */
.ms-bar{display:none}
.ms-sheet[hidden]{display:none}
.ms-sheet{position:fixed;inset:0;z-index:400}
.ms-scrim{position:absolute;inset:0;background:rgba(8,3,20,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .22s}
.ms-panel{position:absolute;left:0;right:0;bottom:0;max-height:92dvh;overflow:auto;overscroll-behavior:contain;padding:14px 18px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#24104f,#160a33);border-radius:26px 26px 0 0;box-shadow:0 -1px 0 var(--line2),0 -30px 60px -20px rgba(0,0,0,.7);transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.ms-sheet.on .ms-scrim{opacity:1}.ms-sheet.on .ms-panel{transform:none}
.ms-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}
.ms-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:700 19px var(--d)}.ms-brand img{border-radius:50%;box-shadow:0 0 0 2px var(--gold)}.ms-brand b{color:var(--gold)}
.ms-x{width:48px;height:48px;border-radius:14px;border:0;background:rgba(255,255,255,.06);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.ms-list{list-style:none;margin:6px 0 14px;padding:0}
.ms-list a{display:flex;align-items:center;min-height:56px;padding:0 6px;font:600 18px var(--b);color:var(--bone);text-decoration:none;border-bottom:1px solid var(--line)}
.ms-list a::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--mute);border-top:2px solid var(--mute);transform:rotate(45deg)}
.ms-list a[aria-current]{color:var(--gold)}.ms-list a[aria-current]::after{border-color:var(--gold)}
.ms-acts{display:grid;grid-template-columns:1fr auto;gap:10px;margin:0 0 14px}
.ms-play,.ms-login{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 18px;border-radius:14px;font:700 16.5px var(--d);text-decoration:none}
.ms-play{background:var(--coin);color:var(--goldInk);box-shadow:var(--coinShadow)}
.ms-login{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(201,173,255,.45)}
.ms-safe{margin:0;font-size:14px;line-height:1.6;color:var(--mute)}.ms-safe a{color:var(--lilac)}.ms-safe b{color:#fff}
html.ms-lock,html.ms-lock body{overflow:hidden}
@media (max-width:860px){
  .ms-bar{display:grid;grid-template-columns:1fr auto;gap:10px;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:300;
    padding:8px;border-radius:20px;background:rgba(22,10,50,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:inset 0 0 0 1px var(--line2),0 18px 40px -14px rgba(0,0,0,.8);transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .28s}
  .ms-bar.ms-off{transform:translateY(calc(100% + 24px));opacity:0}
  .ms-bar .ms-play{min-height:50px}
  .ms-menu{display:flex;align-items:center;gap:9px;min-height:50px;padding:0 18px;border:0;border-radius:14px;background:rgba(255,255,255,.07);color:#fff;font:700 16px var(--d);cursor:pointer}
  .ms-burger{display:grid;gap:4px}.ms-burger i{display:block;width:18px;height:2px;border-radius:2px;background:currentColor}
  html.has-msbar body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  /* the bar replaces the older floating buttons */
  .mcta,.totop{display:none!important}
}
@media (prefers-reduced-motion:reduce){.ms-bar,.ms-panel,.ms-scrim{transition:none}}