/* Forklings: crisp pixels, soft world. Tokens and frames from the approved visual concept. */
:root{
  --ink:#1a1124; --night:#1c1530; --dusk:#271d3b; --dusk2:#33264c; --dusk3:#4a3a6b; --haze:#b9a8cf; --moon:#fff2dc;
  --butter:#ffd166; --butter-sh:#e39b3a; --butter-hi:#fff3b8;
  --mint:#6fdc9c; --sky:#86bdff; --gum:#ff86bd; --peach:#ff9f78; --lilac:#bf98ff; --coral:#ff6f62;
  --f-pixel:"Pixelify Sans", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  --f-body:"Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ring:0 -4px 0 0 var(--bc,var(--dusk3)),0 4px 0 0 var(--bc,var(--dusk3)),-4px 0 0 0 var(--bc,var(--dusk3)),4px 0 0 0 var(--bc,var(--dusk3));
  --tabs-h:64px;
}
*{box-sizing:border-box}
html{background:var(--dusk);color:var(--moon)}
body{margin:0;font:400 17px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;min-height:100vh;
  background:radial-gradient(120% 60% at 50% -10%,#3a2b58 0%,var(--dusk) 60%) fixed}
[hidden]{display:none!important}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
a{color:var(--butter)}
h1,h2,h3{font-family:var(--f-pixel);font-weight:600;line-height:1.05;margin:0}
h2{font-size:clamp(28px,4vw,40px);margin-bottom:.35em}
h3.sub{font-size:22px;margin:22px 0 4px}
p{margin:0 0 .8em;max-width:64ch}
.dim{color:var(--haze)} .small{font-size:14px}
code{font-family:var(--f-mono);font-size:.88em;background:var(--dusk2);padding:1px 5px}
hr{border:0;border-top:2px solid var(--dusk3);margin:18px 0}

/* layout */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px max(18px,env(safe-area-inset-left)) 8px;max-width:1200px;margin:0 auto}
.brand{font:700 26px/1 var(--f-pixel);color:var(--moon);text-decoration:none;text-shadow:0 3px 0 var(--ink),3px 3px 0 var(--ink)}
.who{font-size:14px;color:var(--haze);display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
#whoHandle{font-family:var(--f-pixel);font-size:16px;color:var(--moon)}
main{max-width:1200px;margin:0 auto;padding:8px 18px calc(var(--tabs-h) + 28px + env(safe-area-inset-bottom))}
.view{animation:fade .25s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* pixel chrome */
.btn{--bc:var(--ink);font:600 19px/1 var(--f-pixel);color:var(--ink);background:var(--butter);border:0;padding:13px 20px;margin:4px;cursor:pointer;
  box-shadow:inset -4px -4px 0 0 var(--butter-sh),inset 4px 4px 0 0 var(--butter-hi),var(--ring);transition:transform .06s;touch-action:manipulation}
.btn:active{transform:translateY(3px);box-shadow:inset 4px 4px 0 0 var(--butter-sh),var(--ring)}
.btn.ghost{background:var(--dusk2);color:var(--moon);box-shadow:inset -4px -4px 0 0 #271d3b,inset 4px 4px 0 0 #4a3a6b,var(--ring)}
.btn.ghost:active{box-shadow:inset 4px 4px 0 0 #271d3b,var(--ring)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.small-btn{font-size:15px;padding:10px 12px}
.link{background:none;border:0;color:var(--butter);font:inherit;cursor:pointer;text-decoration:underline;padding:4px}
:focus-visible{outline:3px dashed var(--butter);outline-offset:6px}
.panel{background:var(--dusk2);--bc:var(--ink);box-shadow:var(--ring),inset 0 4px 0 0 #4a3a6b;margin:4px;padding:16px 18px}
.stage{position:relative;background:var(--night);--bc:var(--dusk3);box-shadow:var(--ring);margin:4px}
.stage canvas{width:100%;height:100%}
.ar43{aspect-ratio:4/3}.ar169{aspect-ratio:16/9}
input.handle,select{font:600 19px/1 var(--f-pixel);color:var(--moon);background:var(--night);border:0;padding:13px 14px;margin:4px;min-width:0;
  --bc:var(--dusk3);box-shadow:inset 4px 4px 0 0 #120c1c,var(--ring)}
input.handle{width:14ch} input.handle.wide{width:22ch}
textarea.code{display:block;width:calc(100% - 8px);margin:4px;font:400 14px/1.55 var(--f-mono);color:#d9cfe6;background:#120d1a;border:0;padding:12px 14px;resize:vertical;tab-size:2}
.script summary{cursor:pointer;padding:6px 4px}
.script{margin-top:14px}
input.handle::placeholder{color:#6f5f8c}
.badge{display:inline-block;font:600 12px/1 var(--f-pixel);padding:4px 6px 5px;background:var(--dusk2);color:var(--mint);--bc:var(--ink);box-shadow:var(--ring);margin:4px;text-transform:uppercase;letter-spacing:.04em}
.badge.warn{color:var(--butter)}
.badge.npc{color:var(--haze)}
.err{color:var(--coral);min-height:1.4em;margin:6px 0 0;font-size:15px}
.toastline{min-height:1.5em;color:var(--butter);font-family:var(--f-pixel);font-size:17px;margin:6px 4px}

/* login */
.login{max-width:560px;margin:6vh auto 0;text-align:left}
.wordmark{font-size:clamp(58px,13vw,104px);font-weight:700;letter-spacing:-.01em;line-height:.9;margin:0 0 16px;color:var(--moon);text-shadow:0 6px 0 var(--ink),6px 6px 0 var(--ink)}
.tag{font-family:var(--f-pixel);font-size:22px;line-height:1.25;color:var(--butter);margin-bottom:24px}
.login-box .btn{margin-left:4px}
.lbl{font:600 18px/1.2 var(--f-pixel);color:var(--moon);display:block;margin-bottom:4px}

/* hatch */
.hatch-wrap{max-width:640px;margin:2vh auto 0}
.actions{display:flex;justify-content:center;margin-top:14px}
.card{position:absolute;left:4%;right:4%;top:4%;background:rgba(26,17,36,.92);--bc:var(--ink);box-shadow:var(--ring);padding:12px 16px;
  transform:translateY(16px);opacity:0;transition:transform .45s cubic-bezier(.2,1.6,.4,1),opacity .2s;pointer-events:none;backdrop-filter:blur(3px)}
.card.show{transform:none;opacity:1}
.card .nm{font:700 28px/1 var(--f-pixel)}
.card .rowc{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.card .whoc{color:var(--haze);font-size:14px}
.card .traits{font-size:14px;color:var(--haze);margin-top:6px;line-height:1.4}
.stars{font-family:var(--f-pixel);color:var(--butter);font-size:19px;letter-spacing:2px}

/* home */
.home-grid,.battle-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px;align-items:start}
.namebar{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin:14px 6px 4px}
.namebar .nm{font:700 30px/1 var(--f-pixel)}
.care{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}
.care .btn{width:calc(100% - 8px);padding-left:6px;padding-right:6px}
.stats{display:grid;gap:10px}
.stat{display:grid;grid-template-columns:88px 1fr 44px;gap:10px;align-items:center;font:600 16px/1 var(--f-pixel)}
.bar{height:14px;background:var(--ink);position:relative;--bc:var(--ink);box-shadow:var(--ring);margin:4px}
.bar i{position:absolute;top:0;bottom:0;left:0;transition:width .6s cubic-bezier(.2,.9,.3,1);background-image:repeating-linear-gradient(90deg,transparent 0 10px,rgba(26,17,36,.35) 10px 12px)}
.stat .v{text-align:right;color:var(--haze);font-size:14px}
.statnote{font-size:14px;color:var(--haze);margin:2px 0 0}
.wardrobe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;margin-top:6px}
.slot h4{font:600 15px/1 var(--f-pixel);color:var(--haze);margin:6px 0 4px}
.slot .opts{display:flex;flex-wrap:wrap;gap:2px}
.item{width:54px;height:54px;padding:0;border:0;margin:6px;cursor:pointer;background:var(--night);display:grid;place-items:center;--bc:var(--dusk3);box-shadow:var(--ring)}
.item canvas{width:38px;height:38px}
.item[aria-pressed=true]{--bc:var(--butter)!important;background:#2b2042}
.item.locked{opacity:.3;cursor:not-allowed}
.item .none{font:600 12px/1 var(--f-pixel);color:var(--haze)}

/* coach */
.coach{max-width:720px}
.field{margin:0 0 18px;border:0;padding:0}
.opt{display:flex;gap:10px;align-items:flex-start;margin:8px 0;cursor:pointer}
.opt input{margin-top:5px;accent-color:var(--butter);width:18px;height:18px}
input[type=range]{width:100%;max-width:420px;accent-color:var(--butter);height:28px}

/* battle */
.under{margin-top:12px}
.log{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.log li{background:var(--dusk2);--bc:var(--ink);box-shadow:var(--ring);margin:4px;padding:10px 12px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.log .res{font:600 17px/1 var(--f-pixel)}
.log .win{color:var(--mint)} .log .loss{color:var(--coral)} .log .draw{color:var(--sky)}
.log .meta{font-size:13px;color:var(--haze)}
.log .btn{font-size:14px;padding:8px 10px}
.log .new{color:var(--butter);font:600 12px/1 var(--f-pixel)}

/* ranks */
.ranks{list-style:none;padding:0;margin:0;max-width:760px;display:grid;gap:8px;counter-reset:r}
.ranks li{counter-increment:r;display:grid;grid-template-columns:36px 48px 1fr auto;gap:12px;align-items:center;background:var(--dusk2);--bc:var(--ink);box-shadow:var(--ring);margin:4px;padding:8px 12px}
.ranks li::before{content:counter(r);font:700 20px/1 var(--f-pixel);color:var(--haze);text-align:center}
.ranks li.me{--bc:var(--butter)}
.ranks li.empty{display:block;color:var(--haze);font-size:15px}
.ranks li.empty::before{content:none}
.ranks canvas{width:48px;height:48px}
.ranks .nm{font:600 18px/1.1 var(--f-pixel)} .ranks .hd{font-size:13px;color:var(--haze)}
.ranks .rt{font:700 20px/1 var(--f-pixel);color:var(--butter);text-align:right} .ranks .wl{font-size:12px;color:var(--haze);text-align:right}

/* api */
.term{background:#120d1a;--bc:#3b2c55;box-shadow:var(--ring);margin:4px;font:400 13.5px/1.6 var(--f-mono);color:#d9cfe6;padding:12px 16px;overflow-x:auto;white-space:pre}
.tokenout{font-family:var(--f-mono);font-size:14px;word-break:break-all;background:#120d1a;padding:10px 12px;color:var(--mint)}

/* tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:4px;background:rgba(28,21,48,.94);backdrop-filter:blur(6px);
  border-top:4px solid var(--ink);padding:6px 8px calc(6px + env(safe-area-inset-bottom));z-index:10}
.tabs a{flex:1;max-width:150px;text-align:center;font:600 16px/1 var(--f-pixel);color:var(--haze);text-decoration:none;padding:14px 4px;position:relative}
.tabs a[aria-current=page]{color:var(--ink);background:var(--butter);box-shadow:inset -3px -3px 0 0 var(--butter-sh),inset 3px 3px 0 0 var(--butter-hi)}
.tabs .dot{position:absolute;top:8px;right:18%;width:8px;height:8px;background:var(--coral)}

/* evolution */
.overlay{position:fixed;inset:0;background:rgba(18,12,28,.86);display:grid;place-items:center;z-index:20;padding:18px}
.evo-box{width:min(640px,100%);text-align:center}

@media (max-width:860px){
  .home-grid,.battle-grid{grid-template-columns:minmax(0,1fr);gap:16px}
}
@media (max-width:520px){
  body{font-size:16px}
  main{padding-left:12px;padding-right:12px}
  .wardrobe{grid-template-columns:minmax(0,1fr)}
  .care .btn{font-size:16px;padding:12px 2px}
  .tabs a{font-size:14px;padding:13px 2px}
  .card .traits{display:none}
  .card .nm{font-size:22px}
  .stat{grid-template-columns:76px 1fr 40px}
}
@media (prefers-reduced-motion:reduce){.view{animation:none}.card{transition:opacity .2s}.bar i{transition:none}}