/* ============================================================
   ARCADIO PLAYGROUND — layout on top of styles.css tokens
   ============================================================ */
.pg-body{min-height:100vh}

/* top bar */
.pg-top{position:sticky;top:0;z-index:1000;display:flex;align-items:center;gap:1.2rem;padding:.7rem 1.2rem;background:rgba(10,10,15,.92);backdrop-filter:blur(8px);border-bottom:2px solid var(--grid);flex-wrap:wrap}
.pg-player{display:flex;align-items:center;gap:.8rem;margin-left:auto}
.pp-badge{font-size:1.4rem}
.pp-meta{display:flex;flex-direction:column;line-height:1.2}
.pp-name{font-family:var(--pixel);font-size:.55rem;color:var(--ink)}
.pp-lvl{font-family:var(--mono);font-size:1.1rem;color:var(--amber)}
.pp-xp{display:flex;flex-direction:column;gap:.25rem;min-width:160px}
.pp-xp-bar{height:10px;background:#13131d;border:1px solid var(--grid)}
.pp-xp-fill{height:100%;background:var(--cyan)}
.pp-xp-text{font-family:var(--mono);font-size:.95rem;color:var(--muted)}

/* tabs */
.pg-tabs{display:flex;gap:.4rem;max-width:1100px;margin:1.4rem auto 0;padding:0 1.2rem;flex-wrap:wrap}
.pg-tab{font-family:var(--pixel);font-size:.6rem;padding:.7rem 1rem;background:#13131d;border:2px solid var(--grid);color:var(--muted);cursor:pointer;transition:.15s}
.pg-tab:hover{color:var(--ink)}
.pg-tab.active{color:var(--bg);background:var(--amber);border-color:var(--amber)}

.pg-main{max-width:1100px;margin:0 auto;padding:1.6rem 1.2rem 5rem}
.pg-panel{display:none;animation:fade .25s}
.pg-panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}

/* ---------- DASHBOARD ---------- */
.dash-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:1.2rem}
.dash-card{border:2px solid var(--grid);background:linear-gradient(180deg,rgba(19,19,29,.85),rgba(13,13,20,.85));padding:1.4rem}
.dash-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.1rem}
.dash-head h3{font-family:var(--pixel);font-size:.8rem;color:var(--amber)}
.dash-sub{font-family:var(--mono);font-size:1.05rem;color:var(--muted)}
a.dash-sub:hover{color:var(--cyan)}
.dash-quests{grid-row:span 2}

.quest-list{display:flex;flex-direction:column;gap:.8rem}
.quest-card{border:1px solid var(--grid);border-left:3px solid var(--cyan);background:#0d0d14;padding:.9rem 1rem;transition:.15s}
.quest-card.done{opacity:.5;border-left-color:var(--muted)}
.qc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.qc-tier{font-family:var(--pixel);font-size:.5rem;color:var(--cyan)}
.qc-tier.GOLD{color:var(--amber)}
.qc-tier.BOSS{color:var(--red)}
.qc-xp{font-family:var(--mono);font-size:1rem;color:var(--amber)}
.qc-text{font-family:var(--mono);font-size:1.25rem;color:var(--ink);margin-bottom:.7rem;line-height:1.4}
.qc-btn{font-family:var(--pixel);font-size:.5rem;padding:.5rem .8rem;background:#13131d;border:1px solid var(--cyan);color:var(--cyan);cursor:pointer;transition:.15s}
.qc-btn:hover{background:var(--cyan);color:var(--bg)}
.qc-btn:disabled{border-color:var(--muted);color:var(--muted);cursor:default;background:#13131d}

.stat-row{display:flex;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid var(--grid);font-family:var(--mono);font-size:1.25rem}
.stat-row:last-child{border-bottom:none}
.stat-row span{color:var(--muted)}
.stat-row b{color:var(--ink)}

.wallet-note{font-family:var(--mono);font-size:1.1rem;color:var(--muted);margin-bottom:1rem}
.wallet-bars{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1.2rem}
.wb span{font-family:var(--mono);font-size:1.05rem;color:var(--ink);display:block;margin-bottom:.3rem}
.wb-bar{height:14px;background:#0d0d14;border:1px solid var(--grid)}
.wb-bar div{height:100%;background:var(--red)}
.wb-bar div.g{background:var(--cyan)}
.wb-bar div.c{background:var(--amber)}
.dash-cta,.qc-btn{font-family:var(--pixel)}
.dash-cta{width:100%;font-size:.6rem;padding:.8rem;background:var(--red);color:#fff;border:none;cursor:pointer;transition:.15s}
.dash-cta:hover{background:#ff5570}
.dash-cta.connected{background:var(--cyan);color:var(--bg)}

.skill-mini{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.sm-node{flex:1;min-width:56px;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.7rem .3rem;border:2px solid var(--grid);background:#0d0d14;font-size:1.2rem;opacity:.55}
.sm-node span{font-family:var(--pixel);font-size:.4rem;color:var(--ink)}
.sm-node.on{opacity:1;border-color:var(--cyan)}
.sm-node.lock{opacity:.35}
.skill-hint{font-family:var(--mono);font-size:1.1rem;color:var(--muted)}
.skill-hint b{color:var(--amber)}

/* ---------- AGENT ---------- */
.agent-wrap{max-width:760px;margin:0 auto}
.agent-head{text-align:center;margin-bottom:1.4rem}
.agent-head h3{font-family:var(--pixel);font-size:1rem;color:var(--ink);margin-bottom:.7rem;text-shadow:2px 2px 0 var(--red)}
.agent-head p{color:var(--muted);font-size:1rem}
.agent-chat{border:3px solid #2a2a3a;background:rgba(5,5,10,.9);padding:1.2rem;min-height:300px;max-height:440px;overflow-y:auto;display:flex;flex-direction:column;gap:1rem;position:relative}
.agent-chat::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 2px,rgba(46,255,213,.02) 2px 4px);pointer-events:none}
.msg{display:flex;flex-direction:column;gap:.3rem;position:relative;z-index:2}
.msg-who{font-family:var(--pixel);font-size:.5rem}
.msg-gm{align-items:flex-start}
.msg-gm .msg-who{color:var(--cyan)}
.msg-gm .msg-body{background:#0d0d18;border:1px solid #2a2a3a;border-left:3px solid var(--cyan)}
.msg-you{align-items:flex-end}
.msg-you .msg-who{color:var(--amber)}
.msg-you .msg-body{background:#161208;border:1px solid #2a2a3a;border-right:3px solid var(--amber)}
.msg-body{font-family:var(--mono);font-size:1.3rem;color:var(--ink);padding:.7rem .9rem;max-width:85%;line-height:1.45;white-space:pre-wrap}
.msg.typing .msg-body::after{content:"▋";color:var(--cyan);animation:blink 1s steps(2) infinite}
.agent-suggest{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.agent-suggest button{font-family:var(--mono);font-size:1.1rem;background:#13131d;border:1px solid var(--grid);color:var(--muted);padding:.35rem .7rem;cursor:pointer;transition:.15s}
.agent-suggest button:hover{color:var(--cyan);border-color:var(--cyan)}
.agent-input{display:flex;gap:.5rem}
#agentText{flex:1;background:#0d0d14;border:2px solid #2a2a3a;color:var(--ink);font-family:var(--mono);font-size:1.3rem;padding:.7rem .9rem}
#agentText:focus{outline:none;border-color:var(--cyan)}
.agent-foot{text-align:center;font-family:var(--mono);font-size:1rem;color:var(--muted);margin-top:1rem}

/* ---------- RACE host ---------- */
.race-host{max-width:760px;margin:0 auto}

/* ---------- LEADERBOARD ---------- */
.lb-wrap{max-width:820px;margin:0 auto}
.lb-head{text-align:center;margin-bottom:1.6rem}
.lb-head h3{font-family:var(--pixel);font-size:1rem;color:var(--ink);margin-bottom:.7rem;text-shadow:2px 2px 0 var(--red)}
.lb-head p{color:var(--muted);font-size:1rem}
.lb-table{border:2px solid var(--grid);background:rgba(13,13,20,.85)}
.lb-row{display:grid;grid-template-columns:48px 1fr 44px 80px 60px 64px;align-items:center;padding:.7rem 1rem;border-bottom:1px solid var(--grid);font-family:var(--mono);font-size:1.25rem}
.lb-row:last-child{border-bottom:none}
.lb-header{font-family:var(--pixel);font-size:.5rem;color:var(--muted);background:#13131d}
.lb-rank{color:var(--muted)}
.lb-row.top1 .lb-rank{color:var(--amber)}
.lb-row.top1,.lb-row.top2,.lb-row.top3{background:#11110a}
.lb-player{color:var(--ink);display:flex;align-items:center;gap:.5rem}
.lb-badge{font-size:1.1rem}
.lb-xp{color:var(--amber);text-align:right}
.lb-win{color:var(--cyan);text-align:right}
.lb-vol{color:var(--muted);text-align:right}
.lb-lvl{color:var(--ink);text-align:center}
.lb-loading{padding:2rem;text-align:center;font-family:var(--pixel);font-size:.6rem;color:var(--muted)}
.lb-you{display:grid;grid-template-columns:48px 1fr 44px 80px 60px 64px;align-items:center;padding:.8rem 1rem;margin-top:.8rem;border:2px solid var(--amber);background:#161208;font-family:var(--mono);font-size:1.25rem}
.lb-you .lb-player{color:var(--amber)}
.lb-you .lb-rank{color:var(--amber)}

@media (max-width:720px){
  .dash-grid{grid-template-columns:1fr}
  .dash-quests{grid-row:auto}
  .lb-row,.lb-you{grid-template-columns:36px 1fr 36px 64px 48px;font-size:1.05rem}
  .lb-vol{display:none}
  .lb-header .lb-vol{display:none}
}