/* QArcade — tokens follow DESIGN.md */
:root{
  --ink:#0B0F14; --plate:#121922; --plate-2:#18212C; --line:rgba(245,241,232,.10); --bevel-hi:rgba(255,255,255,.07); --bevel-lo:#05070A;
  --text:#F5F1E8; --muted:#A9B1BC; --sun:#FFC94D; --coral:#FF6B5A; --cyan:#2EE6D6; --lime:#B8F15A; --danger:#FF4D3D;
  --r-xs:2px; --r-sm:4px; --r-md:6px;
  --m-in:150ms; --m-out:120ms; --m-press:90ms; --m-panel:200ms; --ease:cubic-bezier(.2,.8,.2,1); --ease-enter:cubic-bezier(.22,1,.36,1);
  --px:"Silkscreen",ui-monospace,monospace; --body:"Plus Jakarta Sans",system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom); --safe-t:env(safe-area-inset-top);
}
*{box-sizing:border-box}
html{color-scheme:dark;background:var(--ink);-webkit-text-size-adjust:100%;height:100%}
@media (pointer:fine){html{overscroll-behavior:none}}
body{margin:0;height:100%;overflow:hidden;font:400 15px/1.5 var(--body);color:var(--text);background:var(--ink);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--sun);color:var(--ink);padding:10px 14px;border-radius:var(--r-sm);font:700 13px var(--px)}
.skip:focus-visible{top:calc(12px + var(--safe-t))}
.num{font-variant-numeric:tabular-nums}

/* ---------- world ---------- */
.stage{position:fixed;inset:0;overflow:hidden;outline:none;background:#86C46F}
.stage:focus-visible{box-shadow:inset 0 0 0 3px var(--sun)}
.w-gl{position:absolute;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges}
.mini{position:fixed;z-index:15;right:10px;top:calc(62px + var(--safe-t));padding:6px;display:grid;gap:6px}
.minimap{display:block;width:168px;height:120px;border-radius:var(--r-xs);cursor:pointer;image-rendering:pixelated}
.zoom{display:flex;gap:6px;justify-content:flex-end}
.zoom .mini-btn{width:44px;min-height:36px;font:700 16px var(--px);color:var(--text)}
@media (max-width:640px){.minimap{width:112px;height:80px}}
.w-gl{touch-action:pan-y;cursor:crosshair}
.w-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.w-layer>*{position:absolute;left:0;top:0;will-change:transform}
.w-layer .off{visibility:hidden}
.tag{translate:-50% -100%;font:600 12px/1 var(--body);padding:4px 9px 4px 18px;background:rgba(22,24,32,.86);color:#fff;border-radius:999px;white-space:nowrap;box-shadow:0 1px 0 rgba(0,0,0,.3)}
.tag::before{content:"";position:absolute;left:7px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#3DDC84}
.tag--me::after{content:" ★";color:var(--sun)}
.tag.is-taken::before{background:#8A8F99}
.tag--mascot{display:none}
.tag.is-taken{color:var(--muted)}
.tag small{display:block;font:600 10px/1.2 var(--body);color:#C9CDD6;letter-spacing:0;margin-top:2px}
.bubble{translate:-50% -100%;max-width:220px;padding:7px 10px;background:var(--text);color:var(--ink);font:600 13px/1.35 var(--body);border-radius:var(--r-sm);box-shadow:0 2px 0 var(--bevel-lo);text-align:center;overflow-wrap:anywhere}
.bubble::after{content:"";position:absolute;left:50%;bottom:-6px;translate:-50% 0;border:6px solid transparent;border-top-color:var(--text);border-bottom:0}
.bubble--pop{animation:pop 220ms var(--ease-enter)}
@keyframes pop{from{opacity:0;scale:.85}to{opacity:1;scale:1}}
.dot{translate:-50% -100%;width:22px;height:22px;display:grid;place-items:center;background:var(--coral);color:var(--ink);font:700 13px var(--px);border-radius:var(--r-xs);box-shadow:0 2px 0 var(--bevel-lo)}
.edge{translate:-50% -50%;font:600 12px/1 var(--body);padding:6px 10px;background:rgba(22,24,32,.88);color:#fff;border:1px solid #3DDC84;border-radius:999px;white-space:nowrap}
.plabel{translate:-50% -100%;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.plabel__name{font:700 11px/1 var(--px);letter-spacing:.04em;padding:5px 8px 4px;background:rgba(22,24,32,.86);color:#fff;border-bottom:2px solid var(--c,var(--cyan));border-radius:var(--r-sm);white-space:nowrap}
.plabel__more{display:none;flex-direction:column;align-items:center;gap:6px}
.plabel.is-near .plabel__more{display:flex}
.plabel.is-near .plabel__name{background:var(--ink);border-color:var(--c,var(--cyan))}
.plabel__note{font:600 12px/1.35 var(--body);color:var(--text);background:rgba(11,15,20,.85);padding:4px 8px;border-radius:var(--r-xs);max-width:200px}
.plabel__go{pointer-events:auto}

/* ---------- buttons (key-cap lip, tasteskill hover/press) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:var(--r-sm);cursor:pointer;text-decoration:none;
  font:700 13px/1 var(--px);letter-spacing:.05em;text-transform:uppercase;touch-action:manipulation;
  transition:transform var(--m-out) var(--ease),background-color var(--m-out) var(--ease),box-shadow var(--m-out) var(--ease)}
.btn--primary,.plabel__go{background:var(--sun);color:var(--ink);box-shadow:inset 0 -3px 0 rgba(0,0,0,.22)}
.btn--ghost{background:var(--plate-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line),inset 0 -3px 0 rgba(0,0,0,.3)}
.btn--danger{background:var(--danger);color:var(--ink);box-shadow:inset 0 -3px 0 rgba(0,0,0,.22)}
.btn--xl{min-height:56px;padding:0 28px;font-size:16px}
.btn--sm{min-height:36px;padding:0 12px;font-size:11px}
.plabel__go{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:0;border-radius:var(--r-sm);font:700 12px/1 var(--px);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;cursor:pointer}
@media (hover:hover) and (pointer:fine){
  .btn:hover,.plabel__go:hover{transform:translateY(-1px);transition-duration:var(--m-in)}
  .btn--primary:hover,.plabel__go:hover{background:#F0B937}
  .btn--ghost:hover{background:#1E2936}
}
.btn:active,.plabel__go:active{transform:translateY(1px) scale(.985);transition-duration:var(--m-press)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none}
.chip{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--plate-2);cursor:pointer;font:600 14px/1 var(--body);white-space:nowrap;
  transition:transform var(--m-out) var(--ease),background-color var(--m-out) var(--ease),border-color var(--m-out) var(--ease)}
@media (hover:hover) and (pointer:fine){.chip:hover{transform:translateY(-1px);border-color:rgba(245,241,232,.3)}}
.chip:active{transform:translateY(1px) scale(.985)}
.chip[aria-pressed=true]{background:var(--text);color:var(--ink);border-color:var(--text)}
.swatch{width:44px;height:44px;border-radius:var(--r-sm);border:2px solid var(--line);cursor:pointer;padding:0}
.swatch[aria-pressed=true]{border-color:var(--text);box-shadow:inset 0 0 0 3px var(--ink)}
.plate{background:var(--plate);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:inset 0 1px 0 var(--bevel-hi),0 2px 0 var(--bevel-lo)}
.label{font:700 11px/1 var(--px);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field{width:100%;min-height:44px;padding:10px 12px;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);transition:border-color 140ms var(--ease),box-shadow 140ms var(--ease)}
.field:focus{outline:none;border-color:var(--sun);box-shadow:0 0 0 3px rgba(255,201,77,.18)}
select.field{background-color:var(--ink);color:var(--text)}

/* ---------- title screen (enters once, ~1.1s) ---------- */
.title{position:fixed;inset:0;z-index:30;display:grid;place-content:center;justify-items:center;gap:18px;text-align:center;padding:24px;background:radial-gradient(70% 55% at 50% 48%,rgba(11,15,20,.92),rgba(11,15,20,.55))}
.crt{position:fixed;inset:0;z-index:31;pointer-events:none;background:#000;transform-origin:center;animation:crt-off 700ms var(--ease-enter) forwards}
@keyframes crt-off{0%{clip-path:inset(0 0 0 0)}35%{clip-path:inset(49.6% 0 49.6% 0);background:#fff}55%{clip-path:inset(49.6% 0 49.6% 0);background:#fff;opacity:1}100%{clip-path:inset(50% 0 50% 0);opacity:0}}
.logo{margin:0;font:700 clamp(48px,12vw,112px)/1 var(--px);letter-spacing:.02em;color:var(--text);text-shadow:0 4px 0 #05070A,0 0 24px rgba(255,201,77,.25)}
.logo .l{display:inline-block;animation:drop 520ms var(--ease-enter) both}
.logo .l--q{color:var(--sun)}
@keyframes drop{from{transform:translateY(-60px);opacity:0}to{transform:none;opacity:1}}
.tagline{margin:0;font:600 16px/1.4 var(--body);color:var(--muted);animation:fade 520ms var(--ease-enter) 700ms both}
.title .btn{animation:fade 520ms var(--ease-enter) 760ms both}
.coin{font:700 12px/1 var(--px);letter-spacing:.08em;color:var(--coral);animation:fade 520ms var(--ease-enter) 820ms both}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- player select ---------- */
.select{position:fixed;left:0;right:0;z-index:20;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 16px}
.select--top{top:calc(10px + var(--safe-t));width:min(560px,calc(100% - 20px));left:50%;right:auto;translate:-50% 0;padding:12px 16px;background:rgba(22,24,32,.88);border-radius:var(--r-md);box-shadow:0 2px 0 var(--bevel-lo)}
.select--bottom{bottom:calc(14px + var(--safe-b))}
.sel-title{margin:0;font:700 clamp(22px,5vw,34px)/1 var(--px);letter-spacing:.06em;text-shadow:0 3px 0 #05070A}
.sel-sub{margin:0;font:600 13px/1.4 var(--body);color:var(--muted);text-align:center;max-width:42ch}
.sel-cards{pointer-events:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:min(860px,100%)}
@media (max-width:640px){.sel-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pcard{position:relative;display:grid;gap:4px;justify-items:start;text-align:left;padding:10px 12px;min-height:64px;cursor:pointer;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--plate);box-shadow:inset 0 1px 0 var(--bevel-hi),0 2px 0 var(--bevel-lo);
  transition:transform var(--m-out) var(--ease),border-color var(--m-out) var(--ease)}
@media (hover:hover) and (pointer:fine){.pcard:hover{transform:translateY(-2px);border-color:rgba(245,241,232,.35);transition-duration:var(--m-in)}}
.pcard:active{transform:translateY(1px) scale(.985)}
.pcard__p{font:700 10px/1 var(--px);letter-spacing:.06em;color:var(--sun)}
.pcard__name{font:800 16px/1.1 var(--body)}
.pcard__state{font:600 12px/1.2 var(--body);color:var(--cyan)}
.pcard[aria-disabled=true]{cursor:not-allowed;opacity:.6}
.pcard[aria-disabled=true] .pcard__state{color:var(--coral)}
.pcard.is-last{border-color:var(--sun)}
.pcard.is-ready{border-color:var(--lime);background:#16241A}
.pcard.is-ready .pcard__state{color:var(--lime)}

/* ---------- HUD ---------- */
.hud-top{position:fixed;top:calc(10px + var(--safe-t));left:10px;right:10px;z-index:15;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;pointer-events:none}
.hud-top>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;padding:8px 12px}
.brand__name{font:700 16px/1 var(--px);letter-spacing:.04em}
.brand__name b{color:var(--sun)}
.online{display:flex;gap:4px;align-items:center;font:600 12px/1 var(--body);color:var(--muted)}
.online i{width:8px;height:8px;border-radius:1px;background:var(--cyan);display:inline-block}
.top-actions{display:flex;gap:6px}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--plate);cursor:pointer;font-size:18px;
  box-shadow:inset 0 1px 0 var(--bevel-hi),0 2px 0 var(--bevel-lo);transition:transform var(--m-out) var(--ease)}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{transform:translateY(-1px)}}
.icon-btn:active{transform:translateY(1px) scale(.985)}
.icon-btn[aria-pressed=false]{opacity:.55}
.dock{position:fixed;left:50%;bottom:calc(10px + var(--safe-b));translate:-50% 0;z-index:15;display:flex;gap:4px;padding:6px;max-width:calc(100% - 20px);overflow-x:auto;scrollbar-width:none}
.dock::-webkit-scrollbar{display:none}
.dock button{position:relative;display:grid;justify-items:center;gap:3px;min-width:58px;min-height:52px;padding:6px 8px 5px;border:0;border-radius:var(--r-sm);background:transparent;cursor:pointer;
  transition:transform var(--m-out) var(--ease),background-color var(--m-out) var(--ease)}
.dock button span:first-child{font-size:20px;line-height:1}
.dock .dl{font:700 10px/1 var(--px);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.dock button:hover{background:var(--plate-2);transform:translateY(-1px)}}
.dock button:active{transform:translateY(1px) scale(.985)}
.dock button[aria-expanded=true]{background:var(--plate-2)}
.dock button[aria-expanded=true] .dl{color:var(--sun)}
.badge{position:absolute;top:4px;right:10px;width:9px;height:9px;border-radius:1px;background:var(--coral);box-shadow:0 0 0 2px var(--plate)}

/* emote popover + avatar menu */
.pop{position:fixed;z-index:25;padding:10px;display:grid;gap:8px}
.emote-pop{left:50%;bottom:calc(84px + var(--safe-b));translate:-50% 0;width:min(360px,calc(100% - 20px))}
.pose-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.pose-btn{width:100%;justify-content:center;gap:6px;white-space:nowrap}
#btn-dance[aria-pressed=true]{background:var(--coral);color:var(--ink);border-color:var(--coral)}
.chip--set[aria-pressed=true]{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.emote-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.emote-grid button{min-height:44px;font-size:22px;border:0;border-radius:var(--r-sm);background:var(--plate-2);cursor:pointer;transition:transform var(--m-out) var(--ease)}
.emote-grid button:active{transform:scale(.92)}
.say-form{display:flex;gap:6px}
.avmenu{translate:-50% calc(-100% - 12px);min-width:180px}
.avmenu h3{margin:0 0 2px;font:700 12px/1 var(--px);letter-spacing:.05em}
.avmenu .btn{justify-content:flex-start;width:100%;text-transform:none;font:600 14px/1 var(--body);letter-spacing:0}

/* ---------- panel: right drawer / bottom sheet ---------- */
.panel{position:fixed;z-index:22;right:10px;top:calc(64px + var(--safe-t));bottom:calc(84px + var(--safe-b));width:400px;max-width:calc(100% - 20px);display:flex;flex-direction:column;overflow:hidden;
  animation:panel-in var(--m-panel) var(--ease-enter)}
@keyframes panel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:640px){.panel{left:10px;right:10px;width:auto;top:auto;max-height:min(78svh,640px);bottom:calc(80px + var(--safe-b))}}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--line)}
.panel__head h2{margin:0;font:700 15px/1 var(--px);letter-spacing:.05em}
.panel__body{overflow-y:auto;overscroll-behavior:contain;padding:14px 16px 18px;display:grid;gap:14px;align-content:start}
.panel__body h3{margin:0;font:700 12px/1 var(--px);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.panel__body p{margin:0}
.muted{color:var(--muted)}
.small{font-size:13px;line-height:1.45}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stack{display:grid;gap:8px}

/* tools list */
.tool{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;text-decoration:none;color:inherit;
  transition:transform 180ms var(--ease),border-color 180ms var(--ease)}
@media (hover:hover) and (pointer:fine){.tool:hover{transform:translateY(-2px);border-color:rgba(245,241,232,.3)}}
.tool__dot{width:12px;height:36px;border-radius:var(--r-xs);background:var(--c)}
.tool__name{font:800 15px/1.2 var(--body)}
.tool__note{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.tool__go{font:700 11px/1 var(--px);color:var(--sun)}

/* chat */
.chat{display:flex;flex-direction:column;min-height:0;flex:1}
.chat__note{padding:10px 16px;font-size:12px;line-height:1.4;color:var(--muted);border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center;justify-content:space-between}
.chat__note.is-off{background:#22140F;color:#FFB4A9}
.chat__log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:85%;padding:8px 11px;border-radius:var(--r-sm);font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.msg--bot{align-self:flex-start;background:var(--plate-2);border:1px solid var(--line)}
.msg--me{align-self:flex-end;background:var(--sun);color:var(--ink)}
.msg--off{outline:1px dashed var(--coral);outline-offset:2px}
.msg--typing{color:var(--muted);font-style:italic}
.moods{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.moods button{min-height:44px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--plate-2);font:700 14px var(--px);cursor:pointer}
.moods button:hover{border-color:var(--sun)}
.moods-legend{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.chat__form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.chat__form textarea{flex:1;resize:none;min-height:44px;max-height:120px}
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:700 11px/1 var(--px);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;min-height:44px}
.switch input{appearance:none;width:38px;height:22px;border-radius:999px;background:var(--plate-2);border:1px solid var(--line);position:relative;cursor:pointer;margin:0}
.switch input::before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:999px;background:var(--muted);transition:transform 180ms var(--ease)}
.switch input:checked{background:var(--coral);border-color:var(--coral)}
.switch input:checked::before{transform:translateX(16px);background:var(--ink)}

/* music */
.np{padding:12px;display:grid;gap:6px}
.np__title{font:800 15px/1.3 var(--body);overflow-wrap:anywhere}
.steps{margin:0;padding-left:20px;display:grid;gap:4px;font-size:13px;color:var(--muted)}
.steps b{color:var(--text)}
.queue{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.queue li{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:8px 10px;background:var(--plate-2);border-radius:var(--r-sm);font-size:13px}
.tv{position:fixed;z-index:14;left:10px;bottom:calc(84px + var(--safe-b));width:220px;padding:8px;display:grid;gap:6px}
.tv__screen{width:204px;height:204px;background:#000;border-radius:var(--r-xs);overflow:hidden}
.tv__screen iframe{width:204px;height:204px;display:block}
.tv__bar{display:flex;gap:6px;align-items:center;justify-content:space-between;font:700 10px/1.2 var(--px);letter-spacing:.04em;color:var(--muted)}
.tv__bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
@media (max-width:640px){.tv{bottom:calc(80px + var(--safe-b))}}

/* games */
.gcard{padding:12px;display:grid;gap:8px}
.gcard h4{margin:0;font:700 14px/1 var(--px);letter-spacing:.04em}
.lb{width:100%;border-collapse:collapse;font-size:13px}
.lb td,.lb th{padding:6px 4px;border-bottom:1px solid var(--line);text-align:left}
.lb th{font:700 10px var(--px);color:var(--muted);letter-spacing:.05em}
.lb td:last-child,.lb th:last-child{text-align:right}
.gamebox{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:12px;background:rgba(5,7,10,.72)}
.gamebox__inner{width:min(720px,100%);max-height:100%;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.gamebox__head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--line)}
.gamebox__head h2{margin:0;font:700 16px/1 var(--px);letter-spacing:.05em}
.gamebox__body{position:relative;min-height:340px;display:grid;place-items:center;padding:12px;overflow:hidden}
.scores{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-top:1px solid var(--line)}
.scores span{font:700 12px/1 var(--px);padding:6px 8px;background:var(--plate-2);border-radius:var(--r-xs)}
.scores span.me{color:var(--sun)}
.bigcount{font:700 120px/1 var(--px);color:var(--sun);text-shadow:0 6px 0 #05070A}
.timer{position:absolute;left:0;top:0;height:4px;background:var(--cyan);transform-origin:left}
.arena{position:absolute;inset:12px;background:repeating-linear-gradient(0deg,#121A23 0 24px,#172230 24px 48px);border-radius:var(--r-sm)}
.bug{position:absolute;translate:-50% -50%;width:64px;height:64px;border:0;background:none;cursor:pointer;font-size:40px;line-height:64px;animation:bug-in 160ms var(--ease-enter),bug-out var(--life) linear forwards}
.bug--gold{filter:drop-shadow(0 0 8px var(--sun))}
@keyframes bug-in{from{scale:.3}to{scale:1}}
@keyframes bug-out{0%,70%{opacity:1}100%{opacity:0;scale:.6}}
.floater{position:absolute;translate:-50% -50%;font:700 18px var(--px);pointer-events:none;animation:float 700ms var(--ease) forwards}
@keyframes float{to{transform:translateY(-40px);opacity:0}}
.gercep{width:100%;min-height:300px;border:0;border-radius:var(--r-md);font:700 clamp(28px,7vw,56px)/1.1 var(--px);color:var(--ink);cursor:pointer;display:grid;place-items:center;gap:8px;padding:20px}
.gercep--wait{background:var(--danger)}
.gercep--go{background:var(--lime)}
.gercep--idle{background:var(--plate-2);color:var(--text)}
.gercep small{display:block;font:600 14px/1.3 var(--body);color:inherit;opacity:.85}
.ketik{width:100%;display:grid;gap:14px}
.ketik__text{font:600 clamp(18px,3.4vw,24px)/1.5 var(--body);letter-spacing:.01em;padding:14px;background:var(--ink);border-radius:var(--r-sm)}
.ketik__text .ok{color:var(--lime)}
.ketik__text .bad{color:var(--ink);background:var(--danger)}
.ketik__text .todo{color:var(--muted)}
.bars{display:grid;gap:6px}
.bar{display:grid;grid-template-columns:90px 1fr;gap:8px;align-items:center;font:700 11px var(--px)}
.bar i{display:block;height:10px;background:var(--plate-2);border-radius:1px;overflow:hidden}
.bar i b{display:block;height:100%;background:var(--cyan);transform-origin:left;transition:transform 120ms linear}
.results{list-style:none;margin:0;padding:0;display:grid;gap:6px;width:min(420px,100%)}
.results li{display:flex;justify-content:space-between;padding:10px 12px;background:var(--plate-2);border-radius:var(--r-sm);font:700 14px var(--px)}
.results li:first-child{background:#2A2210;color:var(--sun)}

/* owner */
.tabs{display:flex;gap:4px;padding:8px 12px 0;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{min-height:44px;padding:0 12px;border:0;background:none;cursor:pointer;font:700 11px/1 var(--px);letter-spacing:.05em;color:var(--muted);border-bottom:2px solid transparent}
.tabs button[aria-selected=true]{color:var(--text);border-bottom-color:var(--sun)}
.trow{display:grid;grid-template-columns:auto auto 1fr auto;gap:8px;align-items:center;padding:8px;background:var(--plate-2);border-radius:var(--r-sm)}
.trow[draggable=true]{cursor:grab}
.trow.is-drag{opacity:.5}
.trow__name{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow__sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-btn{min-width:36px;min-height:36px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--ink);cursor:pointer}
.person{padding:12px;display:grid;gap:8px}
.spark{display:flex;align-items:flex-end;gap:2px;height:40px}
.spark i{flex:1;background:var(--cyan);min-height:2px;border-radius:1px 1px 0 0}
.spark i.low{background:var(--coral)}
.spark i.none{background:var(--plate-2)}
.transcript{display:flex;flex-direction:column;gap:6px}
.transcript time{font-size:11px;color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* toasts */
.toasts{position:fixed;z-index:50;top:calc(64px + var(--safe-t));left:50%;translate:-50% 0;display:grid;gap:6px;width:min(420px,calc(100% - 20px));pointer-events:none}
.toast{padding:10px 12px;border-left:3px solid var(--cyan);font:600 14px/1.4 var(--body);animation:panel-in var(--m-panel) var(--ease-enter)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}
  .crt{display:none}
}

/* ---------- voice chat ---------- */
.mic{position:fixed;z-index:16;right:12px;bottom:calc(86px + var(--safe-b));display:grid;justify-items:center;gap:4px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mic__btn{position:relative;width:60px;height:60px;border-radius:50%;border:2px solid var(--ink);background:var(--plate);color:var(--text);cursor:pointer;touch-action:none;display:grid;place-items:center;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.35),0 4px 0 rgba(0,0,0,.25);transition:transform var(--m-out) var(--ease),background var(--m-out) var(--ease)}
.mic__ico{position:relative;font-size:24px;line-height:1}
.mic__ring{position:absolute;inset:-6px;border-radius:50%;border:3px solid transparent;pointer-events:none;transition:transform 90ms linear}
.mic[data-mode=off] .mic__ico{opacity:.75}
.mic[data-mode=ptt] .mic__btn{background:var(--plate-2)}
.mic[data-live=true] .mic__btn{background:var(--lime);color:var(--ink);transform:scale(1.06)}
.mic[data-live=true] .mic__ring{border-color:var(--lime)}
.mic[data-live=true] .mic__ring[data-l="2"]{border-color:var(--coral)}
.mic[data-mode=open][data-live=false] .mic__btn{background:#3A2026}
.mic__label{font:700 10px/1.1 var(--px);letter-spacing:.04em;color:var(--text);background:rgba(11,15,20,.78);padding:3px 6px;border-radius:6px;white-space:nowrap}
.mic__more{position:absolute;top:-6px;right:-8px;width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);background:var(--plate-2);color:var(--text);font:800 14px/1 var(--body);cursor:pointer}
.mic__more::before{content:"";position:absolute;inset:-8px}
.mic__btn:focus-visible,.mic__more:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.mic__btn:hover{transform:translateY(-1px)}}
.tag .vic{display:inline-block;margin-left:5px;font-size:12px;line-height:1}
.tag[data-v=listen] .vic{opacity:.75}
.tag[data-v=talk]{box-shadow:0 0 0 2px var(--lime),0 0 12px rgba(184,241,90,.55)}
.tag[data-v=talk] .vic{animation:vic-talk .5s var(--ease) infinite alternate}
.tag[data-v=loud]{box-shadow:0 0 0 2px var(--coral),0 0 14px rgba(255,107,90,.7);animation:vic-shake .14s linear infinite}
.tag[data-v=loud] .vic{font-size:17px}
@keyframes vic-talk{from{transform:scale(1)}to{transform:scale(1.3)}}
@keyframes vic-shake{0%{translate:-1px 0}50%{translate:1px 0}100%{translate:-1px 0}}
.vlist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vlist li{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:var(--r-sm);background:var(--plate-2);font-size:14px}
.range{width:100%;accent-color:var(--sun);min-height:44px}
kbd{font:700 11px/1 var(--px);padding:2px 5px;border-radius:4px;background:var(--plate-2);border:1px solid var(--line);color:var(--text)}
.keys-hint{position:fixed;z-index:14;left:12px;bottom:calc(14px + var(--safe-b));font:600 12px/1.4 var(--body);color:var(--text);background:rgba(11,15,20,.72);padding:6px 10px;border-radius:8px;display:none}
@media (hover:hover) and (pointer:fine) and (min-width:1100px){.keys-hint{display:block}}
@media (prefers-reduced-motion:reduce){.tag[data-v=talk] .vic,.tag[data-v=loud]{animation:none}.mic__ring{transition:none}}

/* ---------- dance invite ---------- */
.invite{position:fixed;z-index:30;left:50%;top:calc(64px + var(--safe-t));translate:-50% 0;padding:12px 14px;display:grid;gap:10px;width:min(340px,calc(100% - 24px));animation:invite-in 180ms var(--ease)}
.invite p{margin:0;font:700 15px/1.35 var(--body);color:var(--text)}
.invite__row{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
@keyframes invite-in{from{opacity:0;translate:-50% -8px}to{opacity:1;translate:-50% 0}}
@media (prefers-reduced-motion:reduce){.invite{animation:none}}

/* ---------- pulse check ---------- */
.pulse__opts{display:flex;flex-wrap:wrap;gap:6px}
.pulse__opts .chip{min-height:40px;text-align:left}
.pulse__note{margin:2px 0 0;font:600 11px/1.3 var(--body);color:var(--muted)}
.bubble--mascot{background:#E9F5D6;color:#21301A;border-color:#21301A}
.pulses{margin-top:4px}
.pulses summary{cursor:pointer;font:700 13px/1.3 var(--body);min-height:32px;display:flex;align-items:center}
.pulses ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.pulses li{display:grid;gap:2px;padding:8px 10px;border-radius:var(--r-sm);background:var(--plate-2)}
.pulses li.low{box-shadow:inset 3px 0 0 var(--coral)}

/* ---------- chat bar (replaces the big recording banner) ---------- */
.chat__bar{display:flex;justify-content:flex-end;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line)}
.chat__bar.is-off{background:#22140F}
.chip--sm{min-height:36px;padding:6px 10px;font-size:12px}
.chip--icon{min-width:36px;justify-content:center}
#off[aria-pressed=true]{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.chat__info{margin:0;padding:8px 14px;font-size:12px;line-height:1.4;color:var(--muted);border-bottom:1px solid var(--line)}
.chat__first{display:grid;gap:8px;justify-items:start;padding:10px 12px;border-radius:var(--r-sm);background:var(--plate-2);font-size:13px;line-height:1.45;color:var(--text)}
.chat__first p{margin:0}