:root{--bg: #0b0e14;--panel: #151a23;--panel-2: #1c232f;--line: #2a3340;--text: #e5e9f0;--muted: #8a94a6;--accent: #4b84d6;--accent-2: #f59e0b;--success: #22c55e;--fail: #9ca3af;--crit: #ef4444}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}.landing{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1rem;text-align:center}.landing h1{font-size:3rem;margin:0;letter-spacing:.04em}.landing-links{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.btn{padding:.9rem 1.4rem;border-radius:10px;text-decoration:none;color:#fff;font-weight:600}.btn-tv{background:var(--accent)}.btn-player{background:var(--accent-2);color:#1b1300}.auth-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1rem;text-align:center;padding:1.5rem}.auth-screen h1{font-size:2.5rem;margin:0}.auth-screen p{color:var(--muted);max-width:32ch}.btn-google{background:#fff;color:#1f2630;padding:.8rem 1.4rem;border-radius:10px;font-weight:700;text-decoration:none}.tv-view{display:grid;grid-template-columns:1fr 320px;height:100%}.tv-stage{position:relative;display:flex;flex-direction:column;min-width:0}.tv-header{display:flex;justify-content:space-between;padding:.6rem 1rem;align-items:center}.tier-badge{background:var(--panel-2);border:1px solid var(--line);padding:.25rem .7rem;border-radius:999px;font-size:.8rem;letter-spacing:.08em}.conn.on{color:var(--success)}.conn.off{color:var(--crit)}.tv-canvas-wrap{flex:1;position:relative;min-height:0}.map-canvas{width:100%;height:100%;display:block}.tv-sidebar{background:var(--panel);border-left:1px solid var(--line);padding:1rem;display:flex;flex-direction:column;gap:1rem;overflow:auto}.joker-flash{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(90deg,#7c3aed,#db2777);color:#fff;padding:1rem 2rem;border-radius:12px;font-size:1.5rem;font-weight:800;box-shadow:0 0 60px #db277799;animation:pop .3s ease-out}@keyframes pop{0%{transform:translate(-50%,-50%) scale(.6);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.join-panel{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:.75rem}.join-toggle{width:100%;background:transparent;color:var(--muted);border:none;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}.join-body{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}.join-body h2{margin:.3rem 0 0;font-size:1rem}.join-qr{width:180px;height:180px;border-radius:8px;background:#fff;padding:6px}.join-url{font-size:.75rem;word-break:break-all;color:var(--accent-2)}.join-panel.collapsed{padding:.4rem .75rem}.turn-tracker h2{margin:0 0 .5rem;font-size:1rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.init-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}.init-list li{display:flex;justify-content:space-between;padding:.5rem .7rem;background:var(--panel-2);border:1px solid var(--line);border-radius:8px}.init-list li.active{border-color:var(--accent-2);box-shadow:0 0 0 1px var(--accent-2) inset}.init-card.joker{color:#db2777;font-weight:700}.muted{color:var(--muted)}.roll-card{padding:1rem;border-radius:12px;text-align:center;border:1px solid var(--line);background:var(--panel-2)}.roll-alias{font-weight:700}.roll-trait{color:var(--muted);font-size:.85rem}.roll-total{font-size:3rem;font-weight:800;line-height:1;margin:.3rem 0}.roll-success{border-color:var(--success)}.roll-success .roll-total{color:var(--success)}.roll-fail .roll-total{color:var(--fail)}.roll-crit{border-color:var(--crit);animation:shake .4s}.roll-crit .roll-total{color:var(--crit)}.roll-enter{animation:cardIn .35s ease-out}@keyframes cardIn{0%{transform:translateY(-12px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.player-view{max-width:560px;margin:0 auto;padding:.75rem;display:flex;flex-direction:column;gap:.75rem}.player-header{display:flex;flex-direction:column;gap:.5rem}.player-header select{padding:.7rem;font-size:1.1rem;background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:10px}.player-stats{display:flex;gap:.5rem;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}.player-stats .role{margin-left:auto;color:var(--accent-2);font-weight:700}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.9rem}.panel h3{margin:0 0 .6rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.dpad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,64px);grid-template-areas:". up ." "left center right" ". down .";gap:6px;max-width:240px;margin:0 auto}.dpad-btn{font-size:1.5rem;background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:12px;touch-action:manipulation}.dpad-btn:active{background:var(--accent)}.dpad-center{background:transparent}.dpad-disabled{opacity:.4}.roll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}.roll-btn{padding:.6rem;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-size:.85rem;touch-action:manipulation}.roll-btn.attr{border-color:#3b5b9f}.roll-btn.skill{border-color:#2f6b4f}.roll-btn:active{background:var(--accent)}.last-result{margin:.6rem 0 0;color:var(--accent-2);font-weight:600}.health-controls{display:flex;gap:1rem}.health-controls>div{flex:1;display:flex;align-items:center;gap:.4rem;justify-content:space-between;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:.4rem .6rem}.health-controls button{width:40px;height:40px;font-size:1.3rem;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--text)}.edge-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem}.edge{font-size:.8rem;padding:.4rem .6rem;border:1px solid var(--line);border-radius:999px;background:var(--panel-2)}.edge.on{border-color:var(--accent-2);color:var(--accent-2)}.edge input{margin-right:.3rem}.draw-btn{width:100%;padding:.8rem;font-size:1rem;font-weight:700;border-radius:10px;border:none;background:var(--accent-2);color:#1b1300}@media (max-width: 760px){.tv-view{grid-template-columns:1fr}.tv-sidebar{border-left:none;border-top:1px solid var(--line)}}