/* Golden Apple — styles
   Tokens first (colours, fonts), then components in the order they appear on screen. */

/* ---------- base reset (the artifact host used to provide this) ---------- */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}

:root{
  /* Layout: full-bleed voxel office world. Bark-wood HUD panels pin to the corners; a coworker card slides in from the right (bottom sheet on phones). */
  --bark:#241b14;
  --bark-2:#32261b;
  --bark-hi:#523e2c;
  --bark-lo:#110b07;
  --cream:#f6ecd6;
  --muted:#c4b49a;
  --dim:#948470;
  --gold:#f2b632;
  --gold-hi:#ffe08a;
  --gold-deep:#a86f0c;
  --apple:#e0442e;
  --apple-hi:#ff7d5f;
  --apple-deep:#8f2213;
  --leaf:#6cbf4c;
  --ink:#18110b;
  --panel:rgba(36,27,20,.94);
  --scrim:rgba(17,11,7,.62);
  --st-available:#6cbf4c;
  --st-focus:#f2b632;
  --st-meeting:#e0442e;
  --st-break:#6fb7e8;
  --st-away:#948470;
  --f-display:"Pixelify Sans","Courier New",monospace;
  --f-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-num:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--f-body);font-size:15px;line-height:1.45;overflow:hidden;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
#app{position:relative;height:100%;overflow:hidden;-webkit-user-select:none;user-select:none}
input,textarea{-webkit-user-select:text;user-select:text}
#stage{position:absolute;inset:0}
#stage canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}

/* ---------- nameplates & speech ---------- */
.tag{position:absolute;left:0;top:0;white-space:nowrap;font-family:var(--f-body);font-size:13px;font-weight:700;line-height:1;padding:4px 7px 5px;background:rgba(17,11,7,.74);color:var(--cream);border:1px solid rgba(0,0,0,.5);display:flex;align-items:center;gap:5px;will-change:transform}
.tag .dot{width:7px;height:7px;flex:none}
.tag img{width:12px;height:11px;image-rendering:pixelated}
.tag.golden{background:rgba(70,44,6,.88);border-color:var(--gold);color:var(--gold-hi)}
.tag.away{opacity:.62}
.tag .you{font-family:var(--f-body);font-size:11px;letter-spacing:.08em;background:var(--cream);color:var(--ink);padding:2px 3px 1px;font-weight:700}
.tag.sel{outline:2px solid var(--gold);outline-offset:1px}
.bubble{position:absolute;left:0;top:0;max-width:210px;width:max-content;text-align:center;background:var(--cream);color:var(--ink);font-family:var(--f-body);font-size:13px;font-weight:700;line-height:1.3;padding:6px 9px;border:2px solid var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.35);will-change:transform}
.bubble::after{content:"";position:absolute;left:50%;bottom:-6px;width:8px;height:6px;margin-left:-4px;background:var(--ink);clip-path:polygon(0 0,100% 0,50% 100%)}
.bubble.alert{background:var(--apple);color:#fff;font-family:var(--f-body);font-size:20px;padding:2px 10px 4px;border-color:var(--apple-deep);font-weight:700}
.bubble.gold{background:var(--gold);color:var(--ink);border-color:var(--gold-deep)}

/* ---------- panels, buttons, fields ---------- */
.panel{background:var(--panel);border:2px solid var(--bark-lo);box-shadow:inset 2px 2px 0 var(--bark-hi),inset -2px -2px 0 rgba(0,0,0,.45),0 4px 0 rgba(0,0,0,.35)}
.btn{font-family:var(--f-body);font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--cream);background:var(--bark-2);border:2px solid var(--bark-lo);box-shadow:inset 2px 2px 0 var(--bark-hi),inset -2px -2px 0 rgba(0,0,0,.45);padding:9px 14px 10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1;border-radius:0;position:relative;touch-action:manipulation}
.btn:hover{background:#3d2e21}
.btn:active{transform:translateY(2px);box-shadow:inset 2px 2px 0 rgba(0,0,0,.45)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:inset 2px 2px 0 var(--gold-hi),inset -2px -2px 0 var(--gold-deep)}
.btn-gold:hover{background:#ffc547}
.btn-apple{background:var(--apple);color:#fff;box-shadow:inset 2px 2px 0 var(--apple-hi),inset -2px -2px 0 var(--apple-deep)}
.btn-apple:hover{background:#ef5238}
.btn-ghost{background:transparent;box-shadow:none;border-color:var(--bark-hi)}
.btn.wide{width:100%}
.btn.sm{font-size:13px;padding:6px 10px 7px}
.btn .badge{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;padding:0 5px;background:var(--apple);color:#fff;font-family:var(--f-body);font-size:18px;line-height:20px;text-align:center;border:2px solid var(--bark-lo);font-weight:700;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.field{display:grid;gap:6px}
.field>label,.lbl{font-family:var(--f-body);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
input[type=email],input[type=text],select,textarea{width:100%;font-family:var(--f-body);font-size:16px;color:var(--cream);background:var(--bark-lo);border:2px solid #000;box-shadow:inset 2px 2px 0 rgba(0,0,0,.55),inset -1px -1px 0 var(--bark-hi);padding:10px 12px;border-radius:0}
textarea{resize:vertical;min-height:64px}
input::placeholder,textarea::placeholder{color:var(--dim)}
.err{margin:0;min-height:1.2em;color:var(--apple-hi);font-size:13px;font-weight:700}
.fine{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.key{display:inline-block;font-family:var(--f-body);font-size:12px;line-height:1;padding:3px 5px 4px;background:var(--bark-lo);border:1px solid var(--bark-hi);color:var(--cream);min-width:20px;text-align:center;font-weight:700}
.head{width:40px;height:40px;image-rendering:pixelated;flex:none;background:var(--bark-lo);border:2px solid var(--bark-lo)}
.head.lg{width:56px;height:56px}
.head.xl{width:72px;height:72px}
.gold-chip,.chip{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-body);font-size:12px;font-weight:700;line-height:1;padding:4px 6px 5px;white-space:nowrap}
.gold-chip{background:var(--gold);color:var(--ink)}
.gold-chip img{width:11px;height:10px;image-rendering:pixelated}
.chip{background:var(--bark-lo);color:var(--muted);border:1px solid var(--bark-hi)}
.chip .dot{width:8px;height:8px}
.num{font-family:var(--f-display);font-size:26px;line-height:.9;color:var(--cream);font-variant-numeric:tabular-nums}
.bar{height:10px;background:var(--bark-lo);border:2px solid #000;position:relative}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--apple);box-shadow:inset 0 2px 0 var(--apple-hi)}
.bar.full i{background:var(--gold);box-shadow:inset 0 2px 0 var(--gold-hi)}
.pips{display:flex;gap:3px;flex-wrap:wrap}
.pips img{width:17px;height:15px;image-rendering:pixelated}
.x{position:absolute;top:8px;right:8px;width:32px;height:32px;padding:0;font-family:var(--f-body);font-size:20px;line-height:1;background:transparent;border:2px solid transparent;color:var(--muted);cursor:pointer;font-weight:700}
.x:hover{color:var(--cream);border-color:var(--bark-hi)}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;overflow-y:auto;padding-block:24px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#screen-login{display:flex;align-items:center;background:linear-gradient(90deg,rgba(17,11,7,.7) 0%,rgba(17,11,7,.3) 42%,rgba(17,11,7,0) 66%)}
.login-card{width:min(440px,100%);margin:auto 0 auto clamp(0px,5vw,72px);padding:26px 24px 24px;display:grid;gap:18px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:55px;height:50px;image-rendering:pixelated;flex:none;filter:drop-shadow(3px 3px 0 var(--bark-lo))}
.brand h1{margin:0;font-family:var(--f-display);font-weight:700;font-size:44px;line-height:.95;color:var(--gold);text-shadow:3px 3px 0 var(--bark-lo);text-wrap:balance}
.brand .sub{margin:4px 0 0;font-family:var(--f-body);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.lede{margin:0;font-size:16px;color:var(--cream);max-width:40ch}
#loginForm{display:grid;gap:12px}
.returning{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 14px;align-items:center;padding:14px;background:var(--bark-lo);border:2px solid var(--gold-deep)}
.returning .ret-hi{font-family:var(--f-body);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700}
.returning .ret-name{font-family:var(--f-body);font-size:22px;font-weight:700;line-height:1.1}
.returning .ret-mail{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.returning .ret-actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
/* rooms: start-screen step, room bar, invite modal */
.room-step{display:grid;gap:14px}
.room-form{display:grid;gap:6px}
.room-form>label{font-family:var(--f-body);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.room-row{display:flex;gap:8px}
.room-row input{flex:1;min-width:0}
#roomCode{font-family:var(--f-body);font-size:22px;letter-spacing:.12em;text-transform:uppercase;padding-block:6px;font-weight:700;font-variant-numeric:tabular-nums}
#roomCode::placeholder{font-family:var(--f-body);font-size:15px;letter-spacing:0;text-transform:none}
.room-recent{display:grid;gap:6px}
.room-recent .btn{justify-content:flex-start;text-align:left;gap:8px}
.room-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--bark-lo);border:2px solid var(--gold-deep);font-size:14px}
.code-chip{display:inline-block;font-family:var(--f-body);font-size:17px;letter-spacing:.1em;padding:0 6px;background:var(--bark-2);border:2px solid var(--bark-hi);color:var(--gold);vertical-align:1px;font-weight:700;font-variant-numeric:tabular-nums}
.invite{display:grid;gap:10px;padding:14px;background:var(--bark-lo);border:2px solid var(--gold-deep)}
.invite-code{font-family:var(--f-display);font-size:52px;line-height:1;letter-spacing:.14em;color:var(--gold)}
.invite-row{display:flex;gap:8px}
.invite-row input{flex:1;min-width:0;font-size:14px}
.qr:not(:empty){justify-self:start;padding:8px;background:#f6ecd6;line-height:0}
.qr img,.qr canvas{display:block;image-rendering:pixelated}
.online{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.online li{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--bark-lo);font-size:14px}
.online .head{width:24px;height:24px}
.rules{list-style:none;margin:0;padding:12px 0 0;border-top:2px dashed var(--bark-hi);display:grid;gap:8px;font-size:14px;color:var(--muted)}
.rules li{display:flex;align-items:center;gap:10px}
.rules img{width:22px;height:20px;image-rendering:pixelated;flex:none}
.rules b{color:var(--cream)}
.rules .key{width:22px;padding-inline:0}

#screen-setup{background:rgba(17,11,7,.58)}
.setup{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px;align-items:start}
.setup-preview{position:sticky;top:0;height:min(620px,80vh);min-height:360px;overflow:hidden}
#previewMount{position:absolute;inset:0;cursor:grab;touch-action:none}
#previewMount canvas{display:block;width:100%;height:100%}
.pv-bottom{position:absolute;left:14px;right:14px;bottom:12px;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;text-align:center}
.pv-tag{position:static;transform:none}
.pv-hint{font-size:12px;color:var(--muted)}
.setup-form{padding:22px 20px;display:grid;gap:18px;min-width:0}
.setup-form h2{margin:0;font-family:var(--f-display);font-size:28px;font-weight:700;color:var(--gold);line-height:1.1;text-wrap:balance}
fieldset{border:0;margin:0;padding:0;display:grid;gap:12px;min-width:0}
legend{padding:0 0 4px;font-family:var(--f-body);font-size:15px;font-weight:700;color:var(--cream);border-bottom:2px dashed var(--bark-hi);width:100%;margin-bottom:6px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.av-row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;align-items:center}
.av-row .lbl{font-size:12px}
.swatches{display:flex;flex-wrap:wrap;gap:5px}
.sw{width:28px;height:28px;padding:0;border:2px solid var(--bark-lo);cursor:pointer;box-shadow:inset 2px 2px 0 rgba(255,255,255,.22),inset -2px -2px 0 rgba(0,0,0,.28)}
.sw[aria-checked=true]{outline:2px solid var(--gold);outline-offset:2px}
.stepper{display:flex;align-items:center;gap:6px}
.stepper output{flex:1;min-width:0;text-align:center;font-family:var(--f-body);font-size:15px;padding:7px 8px;background:var(--bark-lo);border:2px solid #000;font-weight:700;font-variant-numeric:tabular-nums}
.stepper .btn{width:36px;padding-inline:0}
/* setup tabs: Profile / Character / Desk, each with its own fields and actions */
.setup-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding-bottom:8px;border-bottom:2px dashed var(--bark-hi)}
.setup-tabs [role=tab]{font-family:var(--f-body);font-size:15px;font-weight:700;color:var(--muted);background:var(--bark-2);border:2px solid var(--bark-lo);box-shadow:inset 2px 2px 0 var(--bark-hi),inset -2px -2px 0 rgba(0,0,0,.45);padding:10px 6px;min-height:44px;cursor:pointer;border-radius:0}
.setup-tabs [role=tab]:hover{color:var(--cream)}
.setup-tabs [role=tab][aria-selected=true]{background:var(--gold);color:var(--ink);border-color:var(--gold-deep);box-shadow:inset 2px 2px 0 var(--gold-hi),inset -2px -2px 0 var(--gold-deep)}
.tab-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px;background:var(--bark-lo);border:2px solid #000}
.tab-actions .av-row{flex-basis:100%}
.tab-actions .fine{flex:1 1 180px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lbl .opt{text-transform:none;letter-spacing:0;color:var(--dim)}
.chip-btn:disabled{opacity:.45;cursor:not-allowed}
.form-actions{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none}
#hud .panel,#hud .btn{pointer-events:auto}
.hud-tl{position:absolute;top:12px;left:max(16px,env(safe-area-inset-left,0px));width:min(290px,calc(100% - 32px));display:grid;gap:8px}
.me{padding:12px;display:grid;gap:10px}
.me-row{display:flex;gap:10px;align-items:center;min-width:0}
.me-id{min-width:0}
.me-name{display:flex;align-items:center;gap:6px;font-family:var(--f-body);font-size:18px;font-weight:700;line-height:1.1;flex-wrap:wrap}
.me-sub{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat{display:grid;gap:6px}
.stat-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.goal{font-size:12px;color:var(--muted)}
/* needs: health, energy, restroom */
.vitals{display:grid;gap:5px;padding-top:8px;border-top:2px dashed var(--bark-hi)}
.vital{display:grid;grid-template-columns:14px 62px minmax(0,1fr) 40px;gap:6px;align-items:center}
.vital .bar .pend{position:absolute;top:0;bottom:0;opacity:.38}
#vHp .pend{background:#e0442e}#vEn .pend{background:var(--gold)}#vBl .pend{background:#6fb7e8}
.vital .tr{display:inline-block;width:14px;margin-left:2px;font-family:var(--f-body);font-size:11px;color:var(--muted);text-align:left;vertical-align:2px;letter-spacing:-1px}
.vact{font-size:12px;color:var(--muted)}
.vital img{width:14px;height:14px;object-fit:contain;image-rendering:pixelated}
.vital .lbl{font-size:11px}
.vital .bar{height:8px;border-width:2px}
.vital .bar i{transition:width .4s linear;box-shadow:none}
#vHp .bar i{background:#e0442e}#vEn .bar i{background:var(--gold)}#vBl .bar i{background:#6fb7e8}
.vital .num{font-family:var(--f-body);font-size:17px;line-height:1;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.vital.low .num{color:var(--apple-hi)}.vital.low .bar{border-color:var(--apple-deep)}
.vwarn{font-size:12px;color:var(--apple-hi);font-weight:700}
/* fishing: tension meter and catch card */
.fish-ui{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 12px;width:min(340px,calc(100% - 32px))}
.fish-ui .tbar{flex:1;height:12px;background:linear-gradient(90deg,var(--bark-lo) 0 70%,rgba(242,182,50,.25) 70% 90%,rgba(224,68,46,.35) 90%);border:2px solid #000;position:relative}
.fish-ui .tbar i{position:absolute;inset:0 auto 0 0;background:var(--leaf)}.fish-ui .tbar i.amber{background:var(--gold)}.fish-ui .tbar i.red{background:var(--apple)}
.fish-ui .num{font-family:var(--f-body);font-size:18px;min-width:52px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.catch{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);display:grid;gap:10px;padding:14px;width:min(340px,calc(100% - 32px))}
.catch-body{display:flex;gap:12px;align-items:center}
.fish-ico{width:66px;height:36px;image-rendering:pixelated;flex:none}.fish-ico.sm{width:33px;height:18px}
.catch-name{font-family:var(--f-body);font-size:20px;font-weight:700;color:var(--gold)}
.catch-meta{font-size:14px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.catch-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chip.rar-uncommon{color:#7fd36a}.chip.rar-rare{color:#7fc4f0}.chip.rar-legendary{color:var(--gold)}
/* restroom stall label */
.stall-label{position:absolute;left:0;top:0;display:grid;gap:4px;justify-items:center;white-space:nowrap;font-family:var(--f-body);font-size:13px;padding:5px 8px;background:rgba(17,11,7,.82);color:var(--cream);border:2px solid var(--apple);pointer-events:none;font-weight:700}
.stall-label.mine{border-color:var(--st-break)}
.stall-label .prog{display:block;width:96px;height:6px;background:var(--bark-lo);border:1px solid #000}
.stall-label .prog b{display:block;height:100%;background:var(--st-break)}
@media (prefers-reduced-motion: reduce){.vital .bar i{transition:none}}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.hud-tr{position:absolute;top:12px;right:max(16px,env(safe-area-inset-right,0px));width:188px;display:grid;gap:8px}
.map{padding:8px;display:grid;gap:6px}
#minimap{width:100%;aspect-ratio:1;max-width:100%;image-rendering:pixelated;display:block;background:var(--bark-lo)}
.map-zone{font-family:var(--f-body);font-size:14px;font-weight:700;text-align:center;color:var(--gold)}
.feed{padding:10px 10px 6px}
.feed-h{font-family:var(--f-body);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:700}
#feed{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:12px;line-height:1.35}
#feed li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:start}
#feed img{width:14px;height:13px;image-rendering:pixelated;margin-top:2px}
#feed .t{color:var(--dim);display:block}
#feed b{color:var(--cream)}
#hud.card-open .hud-tr{display:none}
.hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:8px 40px 8px 12px;font-size:13px;color:var(--muted);display:flex;gap:6px 12px;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 32px);width:max-content}
.hint span{white-space:nowrap}
.hint .x{top:2px;right:2px;width:28px;height:28px;font-size:16px}
.prompt{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);padding:7px 12px;font-family:var(--f-body);font-size:14px;background:var(--panel);border:2px solid var(--gold-deep);white-space:nowrap;font-weight:700}
.prompt .cat{display:inline-block;margin-left:6px;padding:0 5px;font-family:var(--f-body);font-size:12px;font-weight:700;border:2px solid;vertical-align:1px}
.prompt .cat.veg{color:#7fd36a}.prompt .cat.nonveg{color:var(--apple-hi)}.prompt .cat.fruit{color:var(--gold)}.prompt .cat.drink{color:var(--st-break)}

/* card */
#card{position:absolute;top:12px;right:max(16px,env(safe-area-inset-right,0px));width:min(360px,calc(100% - 32px));max-height:calc(100% - 24px);overflow-y:auto;padding:16px;display:grid;gap:14px;align-content:start;pointer-events:auto}
.card-head{display:flex;gap:12px;align-items:center;padding-right:30px;min-width:0}
.card-name{font-family:var(--f-body);font-size:22px;font-weight:700;line-height:1.05}
.card-role{font-size:14px;color:var(--muted);margin-top:3px}
.chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.card-stat{display:grid;gap:7px;padding:12px;background:var(--bark-lo);border:2px solid #000}
.card-stat .num{font-size:40px;color:var(--gold)}
.card-stat .row{display:flex;align-items:baseline;gap:8px}
.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.poke-pick{display:grid;gap:7px}
.chip-row{display:flex;flex-wrap:wrap;gap:5px}
.chip-btn{font-family:var(--f-body);font-size:13px;font-weight:700;padding:5px 8px;background:var(--bark-2);color:var(--cream);border:2px solid var(--bark-lo);cursor:pointer}
.chip-btn[aria-pressed=true]{background:var(--apple);border-color:var(--apple-deep)}
.chip-btn.g[aria-pressed=true]{background:var(--gold);color:var(--ink);border-color:var(--gold-deep)}
.give{display:grid;gap:12px;padding:12px;border:2px solid var(--gold-deep);background:rgba(242,182,50,.06)}
.give h3,.recent h3,.modal-panel h3{margin:0;font-family:var(--f-body);font-size:15px;font-weight:700;color:var(--cream)}
.count-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.count-row .num{min-width:2ch;text-align:center;font-size:32px;color:var(--gold)}
.recent{display:grid;gap:8px}
.recent ol,.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.recent li,.list li{font-size:13px;line-height:1.4;padding:8px 10px;background:var(--bark-lo);border-left:4px solid var(--apple)}
.recent li.poke,.list li.poke{border-left-color:var(--st-break)}
.recent .meta,.list .meta{color:var(--dim);font-size:12px}
.recent q,.list q{display:block;color:var(--muted);font-style:italic;quotes:"\201C" "\201D"}
.empty{color:var(--dim);font-size:13px;margin:0}

/* modal */
.modal{position:absolute;inset:0;display:grid;place-items:center;background:var(--scrim);padding-block:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));pointer-events:auto}
.modal-panel{position:relative;width:min(620px,100%);max-height:100%;overflow-y:auto;padding:22px 20px;display:grid;gap:16px;align-content:start}
.modal-panel h2{margin:0;padding-right:36px;font-family:var(--f-display);font-size:28px;font-weight:700;color:var(--gold);line-height:1.1;text-wrap:balance}
.golden-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.gcard{display:flex;gap:8px;align-items:center;padding:8px;background:var(--bark-lo);border:2px solid var(--gold-deep);min-width:0}
.gcard .nm{font-family:var(--f-body);font-size:14px;font-weight:700;line-height:1.1}
.gcard .rl{font-size:12px;color:var(--muted)}
.storage-row{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;background:var(--bark-lo);font-size:14px}
.ok{color:var(--leaf);font-weight:700}
.bad{color:var(--apple-hi);font-weight:700}
.menu-actions{display:flex;flex-wrap:wrap;gap:8px}
.slider{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:center;font-size:14px}
.slider input,.check input{accent-color:var(--gold)}
.slider input{width:100%;margin:0}
.check{display:flex;gap:8px;align-items:center;font-size:14px;cursor:pointer}
.check input{width:18px;height:18px;margin:0}
#bSound[aria-pressed=false]{color:var(--dim);text-decoration:line-through}

/* toasts */
.toasts{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:min(440px,calc(100% - 32px));display:grid;gap:6px;justify-items:center;pointer-events:none;z-index:5}
.toast{display:flex;gap:10px;align-items:center;padding:9px 14px;font-size:14px;line-height:1.35;background:var(--panel);border:2px solid var(--bark-lo);box-shadow:inset 2px 2px 0 var(--bark-hi),0 4px 0 rgba(0,0,0,.35);animation:tin .25s steps(4) both}
.toast img{width:22px;height:20px;image-rendering:pixelated;flex:none}
.toast.gold{background:var(--gold);color:var(--ink);box-shadow:inset 2px 2px 0 var(--gold-hi),inset -2px -2px 0 var(--gold-deep),0 4px 0 rgba(0,0,0,.35)}
.toast.out{animation:tout .3s steps(3) forwards}
@keyframes tin{from{transform:translateY(-12px);opacity:0}}
@keyframes tout{to{transform:translateY(-12px);opacity:0}}

/* touch (phones and tablets, html.touch-ui): Minecraft-style. The left thumb walks with a stick that appears where it lands
   (push past the ring to run), the right side drags to look and pinches to zoom, and the action buttons sit bottom right. */
#touch{position:absolute;inset:0;pointer-events:none;z-index:2}
.move-zone{position:absolute;left:0;bottom:0;width:42%;height:64%;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}
.joy{position:absolute;left:max(28px,calc(env(safe-area-inset-left,0px) + 12px));bottom:max(24px,env(safe-area-inset-bottom,0px));width:128px;height:128px;border-radius:50%;background:rgba(17,11,7,.38);border:2px solid rgba(246,236,214,.28);pointer-events:none;opacity:.5;transition:opacity .15s,border-color .15s,box-shadow .15s}
.joy.on{opacity:1;transform:translate(-50%,-50%)}
.joy.run{border-color:var(--gold);box-shadow:0 0 0 4px rgba(242,182,50,.3)}
.knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;background:var(--bark-2);border:2px solid var(--bark-lo);box-shadow:inset 2px 2px 0 var(--bark-hi);border-radius:50%}
.joy.run .knob{background:var(--gold);border-color:var(--gold-deep)}
.joy-run{position:absolute;left:50%;top:-24px;transform:translateX(-50%);font-family:var(--f-body);font-size:13px;font-weight:700;color:var(--gold);opacity:0;text-shadow:0 1px 0 #000}
.joy.run .joy-run{opacity:1}
.tbtns{position:absolute;right:max(20px,calc(env(safe-area-inset-right,0px) + 8px));bottom:max(18px,env(safe-area-inset-bottom,0px));width:190px;height:178px;pointer-events:none}
.tbtns .btn{position:absolute;padding:0;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;opacity:.94;flex-direction:column;gap:3px}
.tbtns .btn:active{transform:translateY(2px)}
.tb-jump{right:0;bottom:0;width:84px;height:84px;font-size:17px}
.tb-use{right:96px;bottom:6px;width:76px;height:76px}
.tb-use b{font-size:16px;line-height:1}.tb-use small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.tb-use.idle{opacity:.55}.tb-use.idle small{display:none}
.tb-eat{right:12px;bottom:98px;width:62px;height:62px;font-size:14px}
.tb-drop{right:104px;bottom:96px;width:60px;height:60px;font-size:13px}
.touch-ui .prompt{bottom:max(18px,env(safe-area-inset-bottom,0px));max-width:max(220px,calc(100% - 470px));white-space:normal;text-align:center;line-height:1.35;font-size:13px}
.touch-ui .hint{bottom:auto;top:36%;padding-right:40px;max-width:min(520px,calc(100% - 40px));font-size:12px}
.touch-ui .hud-tl,.touch-ui .hud-tr,.touch-ui .catch,.touch-ui #card{z-index:3}
.touch-ui #hud.card-open #touch,.touch-ui #hud.card-open .prompt{display:none}
.more-btn{display:none}
/* What's new (release notes) */
.news-item{display:grid;gap:6px;padding:12px 14px;background:var(--bark-lo);border:2px solid #000}
.news-item.latest{border-color:var(--gold-deep)}
.news-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.news-new{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:2px 6px}
.news-item h3{margin:0;font-size:16px;color:var(--cream)}
.news-item ul{margin:0;padding-left:20px;color:var(--muted);font-size:14px}
/* mouse look: a crosshair in the middle of the screen while the mouse is captured */
.crosshair{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;pointer-events:none;z-index:4}
.crosshair::before,.crosshair::after{content:"";position:absolute;background:var(--cream);box-shadow:0 0 0 1px rgba(0,0,0,.7)}
.crosshair::before{left:9px;top:2px;width:2px;height:16px}.crosshair::after{left:2px;top:9px;width:16px;height:2px}
/* phones (html.phone-ui): the HUD starts small; tap your panel, the map or the menu button to see more */
.phone-ui .hud-tl{top:8px;left:max(8px,env(safe-area-inset-left,0px));width:auto;gap:6px;align-content:start;justify-items:start}
.phone-ui .hud-tr{top:8px;right:max(8px,env(safe-area-inset-right,0px));width:96px;transition:width .15s}
.phone-ui .hud-tr.open{width:min(236px,calc(100dvh - 24px))}
.phone-ui .feed{display:none}
.phone-ui .map{padding:4px;gap:3px;cursor:pointer}
.phone-ui .map-zone{font-size:11px;line-height:1.15}
.phone-ui .hud-tr.open .map-zone{font-size:13px}
.phone-ui .me{width:190px;padding:6px 8px;gap:6px;cursor:pointer}
.phone-ui .me.open{width:286px;padding:10px;gap:9px;max-height:calc(100dvh - 72px);overflow-y:auto}
.phone-ui .me:not(.open) .stat,.phone-ui .me:not(.open) .me-sub,.phone-ui .me:not(.open) .vact,.phone-ui .me:not(.open) .vital .lbl,.phone-ui .me:not(.open) .vital .num,.phone-ui .me:not(.open) .gold-chip{display:none}
.phone-ui .me:not(.open) .vitals{padding-top:5px;gap:3px}
.phone-ui .me:not(.open) .vital{grid-template-columns:12px minmax(0,1fr);gap:5px}
.phone-ui .me:not(.open) .vital img{width:12px;height:12px}
.phone-ui .me:not(.open) .vital .bar{height:6px}
.phone-ui .me:not(.open) .vwarn{font-size:11px}
.phone-ui .me:not(.open) .head{width:28px;height:28px}
.phone-ui .me:not(.open) .me-name{font-size:14px}
.me-mini,.me-chev{display:none}
.phone-ui .me-mini{display:inline-flex;align-items:center;gap:3px;margin-left:auto;font-family:var(--f-body);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.phone-ui .me-mini img{width:13px;height:12px;image-rendering:pixelated}
.phone-ui .me.open .me-mini{display:none}
.phone-ui .me-chev{display:block;width:8px;height:8px;margin-left:4px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);flex:none}
.phone-ui .me.open .me-chev{margin-left:auto;transform:rotate(-135deg)}
.phone-ui .more-btn{display:inline-flex;min-width:44px;min-height:40px;font-size:18px}
.phone-ui .actions:not(.open)>.btn:not(.more-btn){display:none}
.phone-ui .actions.open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:220px;padding:6px;gap:6px;background:var(--panel);border:2px solid var(--bark-lo);pointer-events:auto}
.phone-ui .actions.open .btn{min-height:40px}
.phone-ui .actions.open .more-btn{grid-column:1/-1}
.phone-ui .toasts{width:min(380px,calc(100% - 340px));top:8px}
.phone-ui .toast{font-size:13px}
/* portrait on a phone or tablet: ask to turn it (and lock landscape where the browser allows it) */
.rotate{display:none}
@media (orientation:portrait){
  .touch-ui .rotate{position:fixed;inset:0;z-index:60;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center;background:var(--ink)}
}
.rotate h2{margin:0;font-family:var(--f-display);font-size:28px;font-weight:700;color:var(--gold);line-height:1.1}
.rotate p{margin:0;color:var(--muted);max-width:300px}
.rotate-phone{width:46px;height:78px;margin-bottom:10px;border:4px solid var(--cream);border-radius:8px;position:relative;animation:turn 2.4s ease-in-out infinite}
.rotate-phone::after{content:"";position:absolute;left:50%;bottom:5px;width:10px;height:3px;margin-left:-5px;background:var(--cream)}
@keyframes turn{0%,25%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
@media (prefers-reduced-motion:reduce){.rotate-phone{animation:none;transform:rotate(-90deg)}}
/* short landscape screens (phones on their side): setup and start screens side by side and compact */
@media (orientation:landscape) and (max-height:540px){
  .screen{padding-block:10px}
  .setup{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:10px}
  .setup-preview{position:sticky;top:0;height:calc(100dvh - 20px);min-height:0}
  .setup-form{padding:12px 14px;gap:12px}
  .setup-form h2{font-size:22px}
  .setup-tabs{position:sticky;top:-10px;z-index:3;background:var(--panel);margin-inline:-14px;padding:6px 14px}
  .setup-tabs [role=tab]{min-height:38px;padding:6px}
  .av-row{grid-template-columns:96px minmax(0,1fr)}
  .grid2{grid-template-columns:1fr 1fr}
  .login-card{padding:16px 18px}
  .brand h1{font-size:34px}
  .modal{padding-block:8px}
  .modal-panel{padding:14px 16px;gap:12px}
  .modal-panel h2{font-size:22px}
}

.boot{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font-family:var(--f-body);font-size:18px;font-weight:700}

@media (max-width:820px){
  .setup{grid-template-columns:1fr}
  .setup-preview{position:relative;height:300px;min-height:0}
  .setup-tabs{position:sticky;top:-24px;z-index:3;background:var(--panel);margin-inline:-20px;padding:8px 20px}
}
@media (max-width:640px){
  .brand h1{font-size:36px}
  .login-card{margin-inline:auto;padding:20px 16px}
  .invite-code{font-size:40px}
  .room-row,.invite-row{flex-wrap:wrap}
  .room-row input,.invite-row input{flex-basis:100%}
  .room-row .btn,.invite-row .btn{flex:1}
  #screen-login{background:rgba(17,11,7,.45)}
  .hud-tl{width:calc(100% - 32px - 112px)}
  .hud-tr{width:104px}
  .feed{display:none}
  .me{padding:9px;gap:8px}
  .me-name{font-size:15px;font-weight:700}
  .pips img{width:13px;height:12px}
  .head{width:32px;height:32px}
  #card{top:auto;bottom:0;left:0;right:0;width:auto;max-height:72%;padding:14px max(16px,env(safe-area-inset-right,0px)) 18px max(16px,env(safe-area-inset-left,0px))}
  .grid2{grid-template-columns:1fr}
  .av-row{grid-template-columns:1fr}
  .setup-preview{height:240px}
  .setup-form{padding:16px 14px}
  .setup-tabs{margin-inline:-14px;padding-inline:14px}
  .tab-actions .btn{flex:1 1 auto}
  .slider{grid-template-columns:1fr;gap:4px}
  .hint{bottom:150px}
}
@media (prefers-reduced-motion:reduce){
  .toast,.toast.out{animation:none}
}
/* arcade: the full-screen game overlay (canvas is 384x216, scaled up with hard pixels) */
.arcade{position:absolute;inset:0;z-index:8;display:grid;grid-template-rows:auto 1fr auto;background:#06040c;color:var(--cream)}
.arc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px 16px;background:var(--bark);border-bottom:2px solid var(--bark-lo)}
.arc-title{font-family:var(--f-body);font-size:22px;color:var(--gold);font-weight:700}
.arc-players{font-family:var(--f-body);font-size:15px;font-weight:700}
.arc-keys{flex:1;min-width:0;font-size:13px;opacity:.8}
.arc-screen{display:grid;place-items:center;min-height:0;padding:12px}
.arc-screen canvas{width:min(100%,calc((100vh - 140px) * 16 / 9));aspect-ratio:16/9;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;border:4px solid #1c1730;box-shadow:0 0 0 2px #000,0 0 40px rgba(150,110,255,.25);background:#000}
.arc-pad{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px max(12px,env(safe-area-inset-bottom,0px))}
.arc-dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,44px);gap:4px}
.arc-dpad [data-b=1]{grid-column:2;grid-row:1}.arc-dpad [data-b=4]{grid-column:1;grid-row:2}.arc-dpad [data-b=8]{grid-column:3;grid-row:2}.arc-dpad [data-b=2]{grid-column:2;grid-row:3}
.arc-a{width:84px;height:84px;border-radius:50%;font-size:18px}
.arc-pad .btn{touch-action:none;user-select:none}
@media (max-width:640px){.arc-keys{display:none}}
/* match bar: the tennis / badminton score at the top while you are in a court */
.match-bar{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:4px;padding:8px 16px 10px;min-width:240px;z-index:4;text-align:center}
.m-title{font-family:var(--f-body);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);font-weight:700}
.m-score{display:flex;align-items:center;gap:10px;font-family:var(--f-display)}
.m-score b{font-size:30px;line-height:1;min-width:1.2em;color:var(--cream)}
.m-score i{font-style:normal;font-size:22px;opacity:.7}
.m-p{font-size:14px;min-width:70px}
.m-p:first-child{text-align:right;color:#4fd3ff}.m-p:last-child{text-align:left;color:#ff8f6e}
.m-note{font-size:13px;opacity:.9}
.match-bar .btn{font-size:13px;padding:4px 10px;margin-top:2px}
#hud.in-court ~ .toasts{top:118px}
.opp-list{display:grid;gap:8px}
/* type system: Atkinson Hyperlegible (--f-body) for all text: labels, buttons, prompts, names, signs and small numbers.
   Pixelify Sans (--f-display) only for big headings and big numbers (24px and up: the logo, dialog titles, scores, invite codes); below that its C reads as an O. The game canvases follow the same rule (FONT_UI / FONT_PIX in js/app.js). */
.arc-keys{font-family:var(--f-body);font-size:14px}