/* Fredoka & Nunito — SIL Open Font License 1.1 — variable fonts, self-hosted (ADR-006) */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:300 700;font-display:swap;src:url(assets/fonts/fredoka.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url(assets/fonts/nunito.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  :root{
  --mask:#0e4a2c; --hud:rgba(7,34,20,.86); --hud-line:rgba(251,247,238,.14);
  --cream:#fbf7ee; --cream-2:#b9cdbf; --gold:#ecc85a; --hat:#f2c230; --ink:#1b2a22;
  --ok:#3fbf6f; --meh:#e2b63b; --bad:#e2573f;
  --shadow:0 12px 30px rgba(3,18,10,.45), 0 2px 6px rgba(3,18,10,.3); --r:22px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--mask);
  font-family:Nunito,system-ui,sans-serif;font-size:15px;color:var(--cream);
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
::selection{background:var(--hat);color:var(--ink)}
:focus-visible{outline:3px solid var(--hat);outline-offset:3px;border-radius:12px}
button,input{font:inherit;color:inherit}

/* two canvases: the board is painted once (tilt-shift and light baked in); cats are cleared and redrawn */
#board,#cats{position:fixed;inset:0;width:100vw;height:100vh;display:block}
#cats{cursor:default} #cats.hover{cursor:pointer}

.panel{position:fixed;z-index:3;background:var(--hud);border-radius:var(--r);box-shadow:var(--shadow)}

#brand{top:20px;left:20px;display:flex;align-items:center;gap:26px;padding:16px 18px 16px 18px}
#mascot{width:48px;height:48px;flex:none;margin-right:-10px;filter:drop-shadow(0 2px 3px rgba(3,18,10,.4))}
#brand h1{font-family:Fredoka,sans-serif;font-weight:700;font-size:34px;margin:0;line-height:1;letter-spacing:-.01em}
#brand .tag{font-weight:700;font-size:17px;margin-top:6px;color:var(--cream-2)}
#brand .tag b{color:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--hat);border:0;border-radius:999px;
  padding:14px 22px;font-family:Fredoka,sans-serif;font-weight:600;font-size:17px;text-decoration:none;color:var(--ink);
  box-shadow:0 3px 8px rgba(3,18,10,.35);transition:transform .15s cubic-bezier(.22,1,.36,1);cursor:pointer}
.btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(1px)}
.ca{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--cream-2)}
.ca code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--cream)}
.pill{border:0;background:rgba(251,247,238,.12);color:var(--cream);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:800;cursor:pointer}
.pill:hover{background:rgba(251,247,238,.22)}
.tog{width:38px;height:38px;border-radius:50%;border:0;background:rgba(251,247,238,.12);color:var(--cream-2);cursor:pointer;display:grid;place-items:center;flex:none}
.tog:hover{background:rgba(251,247,238,.22)} .tog[aria-pressed="true"]{background:var(--hat);color:var(--ink)}
.tog svg{width:18px;height:18px}
#xLink{color:var(--cream);text-decoration:none} #xLink svg{width:16px;height:16px}
#sound{display:flex;gap:8px;margin-left:4px}

#ladder{top:20px;right:20px;width:296px;padding:16px 16px 14px}
#ladder h2{font-family:Fredoka,sans-serif;font-weight:600;font-size:17px;margin:0 0 8px;letter-spacing:.01em}
#ladder h2 small{font-size:13px;font-weight:700;color:var(--cream-2);margin-left:8px}
#ladder.stale h2 small{color:#f4a08f}
#ladder ol{list-style:none;margin:0;padding:0}
#ladder li{display:flex;align-items:center;gap:10px;padding:5px 6px;border-radius:10px;cursor:pointer;font-size:13px}
#ladder li:hover{background:rgba(251,247,238,.08)}
#ladder li.me{background:rgba(242,194,48,.18)}
#ladder .rk{width:22px;color:var(--cream-2);font-weight:800;text-align:right}
#ladder canvas{width:24px;height:24px;flex:none}
#ladder .ad{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;flex:1}
#ladder .sh{font-weight:800;color:var(--gold)}
#ladder .tier{font-size:12px;color:var(--cream-2);text-transform:uppercase;letter-spacing:.04em;font-weight:800}
#find{display:flex;gap:6px;margin-top:10px;padding-top:12px;border-top:1px solid var(--hud-line)}
#find input{flex:1;min-width:0;background:rgba(251,247,238,.1);border:0;border-radius:999px;padding:9px 14px;font-size:13px;color:var(--cream)}
#find input::placeholder{color:var(--cream-2)}
#findMsg{font-size:13px;color:var(--cream-2);margin-top:8px;min-height:1.2em}
#findMsg.bad{color:#f4a08f}

#bar{left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:stretch;padding:12px 10px;max-width:calc(100vw - 40px)}
.cell{display:flex;flex-direction:column;justify-content:center;padding:6px 28px;border-left:1px solid var(--hud-line);min-width:0}
.cell:first-child{border-left:0}
.v{font-family:Fredoka,sans-serif;font-weight:700;font-size:34px;line-height:1.05;white-space:nowrap}
.v small{font-size:17px;font-weight:600;color:var(--cream-2);margin-left:4px}
.l{font-size:13px;font-weight:700;color:var(--cream-2);letter-spacing:.04em;text-transform:uppercase;margin-top:4px;white-space:nowrap}
#funds .v{color:var(--gold)}
#mood{flex-direction:row;align-items:center;gap:16px;padding-left:14px}
#face{width:54px;height:54px;border-radius:50%;background:var(--ok);display:grid;place-items:center;flex:none;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.14);transition:background .6s}
#face svg{width:38px;height:38px}
#link{width:9px;height:9px;border-radius:50%;background:var(--ok);display:inline-block;margin-right:6px;vertical-align:1px}
#link.wait{background:var(--meh)} #link.down{background:var(--bad)}

#card{position:fixed;z-index:4;left:0;top:0;width:262px;padding:14px;background:var(--cream);color:var(--ink);
  border-radius:14px;box-shadow:var(--shadow);display:none;will-change:transform}
#card.on{display:block}
#card:after{content:"";position:absolute;left:18px;bottom:-8px;border:8px solid transparent;border-top-color:var(--cream);border-bottom:0}
#card header{display:flex;align-items:center;gap:10px}
#portrait{width:56px;height:56px;border-radius:12px;background:#dfe9df;flex:none}
#cname{font-family:Fredoka,sans-serif;font-weight:700;font-size:22px;line-height:1.1}
#cjob{font-size:13px;font-weight:700;color:#4b6157;margin-top:2px}
#cwallet{font-size:13px;font-weight:800;margin-top:10px;padding:8px 10px;border-radius:10px;background:#e6efe6;display:none}
#cwallet.on{display:block}
#cwallet code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;color:#4b6157;display:block;margin-top:2px}
#cdo{font-size:17px;margin-top:10px;font-weight:700}
#cquote{font-size:17px;margin-top:6px;font-style:italic;color:#2c3f35;min-height:1.4em}
#close{position:absolute;top:8px;right:8px;width:26px;height:26px;border:0;border-radius:50%;background:transparent;cursor:pointer;display:grid;place-items:center;color:#4b6157}
#close:hover{background:rgba(27,42,34,.08)} #close svg{width:14px;height:14px}

@media (max-width:720px){
  #brand{top:12px;left:12px;right:12px;gap:10px;justify-content:space-between;padding:10px 12px;border-radius:16px}
  #brand h1{font-size:24px} #brand .tag{font-size:12px;margin-top:3px} .btn{padding:9px 12px;font-size:15px;flex:none}
  #mascot{display:none} /* the favicon / home-screen icon carries the mascot on phones; the strip has no room */
  #brand h1{white-space:nowrap} #brand .tag{white-space:nowrap}
  .ca{display:none} .tog{width:34px;height:34px} #sound{gap:6px;margin-left:0}
  #ladder{display:none}
  #bar{left:12px;right:12px;bottom:12px;transform:none;max-width:none;padding:6px 4px;flex-wrap:wrap;row-gap:6px;border-radius:16px}
  .cell{padding:4px 6px;flex:1 1 30%;align-items:center;text-align:center;border-left:0} .v{font-size:19px} .v small{font-size:12px;margin-left:3px} .l{font-size:12px;letter-spacing:.02em;margin-top:3px}
  #mood{justify-content:center;gap:8px;padding-left:6px} #face{width:34px;height:34px} #face svg{width:26px;height:26px}
  #card{width:220px}
}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} }