*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:#0e1016;font-family:system-ui,-apple-system,sans-serif;color:#e6e9f0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;overscroll-behavior:none}#app canvas{display:block;position:fixed;top:0;right:0;bottom:0;left:0}.screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px;background:#080a108c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);overflow-y:auto}.screen[hidden]{display:none}.card{width:min(480px,100%);max-height:calc(100vh - 32px);overflow-y:auto;background:#10131ceb;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:12px}.card h1{font-size:40px;letter-spacing:.04em;text-align:center;line-height:1}.card h1 em{font-style:normal;color:#ff7043;display:block;font-size:30px;letter-spacing:.35em}.card h2{font-size:20px}.tagline{text-align:center;opacity:.75;font-size:14px}.hint{font-size:13px;line-height:1.45;opacity:.85}button.big{font-size:17px;font-weight:700;padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:#ffffff17;color:#e6e9f0;cursor:pointer}button.big:hover{background:#ffffff29}button.big.primary{background:linear-gradient(135deg,#ff7043,#e64a19);border-color:#ff8a65}button.big.primary:hover{filter:brightness(1.1)}button.big:disabled{opacity:.55;filter:none;cursor:default}button.back{align-self:flex-start;background:none;border:none;color:#9fb4d8;font-size:14px;cursor:pointer;padding:0}.status-line{font-size:13px;color:#9fb4d8;min-height:18px}#conn-badge{font-size:13px;color:#7ee787}details.help{font-size:13px}details.help summary{cursor:pointer;color:#9fb4d8}details.help table{border-collapse:collapse;width:100%;margin-top:8px}details.help th,details.help td{text-align:left;padding:3px 8px 3px 0;font-size:12px}details.help th{color:#9fb4d8;font-weight:600}details.help p{margin-top:6px;opacity:.75}.player-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.player-row button{background:#ffffff1a;border:1px solid rgba(255,255,255,.18);color:#e6e9f0;border-radius:6px;padding:6px 10px;font-size:12px;cursor:pointer}.player-row button:hover{background:#fff3}.tag{font-weight:800;font-size:11px;padding:3px 7px;border-radius:4px}.tag.p1{background:#ff5722}.tag.p2{background:#1976d2}.tag.arena{background:#455a64}.status{font-size:11px;opacity:.75}.rig-row[hidden]{display:none}.rig-row{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;margin-left:30px;padding:6px 8px;background:#ffffff0d;border-radius:6px}.rig-row label{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11px;opacity:.85}.rig-row input[type=range]{width:90px}.rig-row .skel{justify-content:flex-start}#net-exchange textarea{width:100%;background:#0006;color:#9fb4d8;border:1px solid rgba(255,255,255,.18);border-radius:6px;font-size:10px;font-family:monospace;padding:6px;resize:vertical}#net-qr{display:block;margin:6px auto;width:min(220px,70vw);height:auto;border-radius:6px;background:#fff}#net-qr[hidden]{display:none}.swatch{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.35);padding:0;cursor:pointer}.photo-row{grid-template-columns:repeat(6,30px) 1fr;align-items:center}.photo-row .scale{grid-column:span 1 / -1}.consent{border:1px solid rgba(126,231,135,.4);background:#7ee78714;border-radius:8px;padding:10px}#invite-box{text-align:center}#invite-qr{display:block;margin:6px auto;width:min(200px,60vw);height:auto;border-radius:6px;background:#fff}.invite-link{font-size:11px;font-family:monospace;color:#9fb4d8;word-break:break-all;user-select:text;-webkit-user-select:text}#debug-overlay{position:fixed;bottom:4px;right:6px;z-index:200;font:11px monospace;color:#7ee787;text-shadow:0 1px 2px #000;pointer-events:none}#photo-capture{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}#photo-capture .pc-stage{position:relative;width:320px;height:320px;max-width:90vw;max-height:45vh}#photo-capture video{width:100%;height:100%;object-fit:cover;border-radius:12px;transform:scaleX(-1)}#photo-capture .pc-crop{display:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px;touch-action:none;cursor:grab}#photo-capture .pc-ring{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:2px dashed rgba(255,255,255,.65);pointer-events:none}#photo-capture .pc-hint{font-size:14px}#photo-capture .pc-zoom{width:280px}#photo-capture .pc-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}#photo-capture .pc-row button{padding:10px 18px;border-radius:8px;border:1px solid rgba(255,255,255,.4);background:#ffffff1f;color:#fff;font-size:14px}#qr-scanner{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}#qr-scanner video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}#qr-scanner .qr-frame{position:relative;width:min(60vw,60vh);height:min(60vw,60vh);border:3px solid rgba(255,255,255,.85);border-radius:16px;box-shadow:0 0 0 100vmax #00000073}#qr-scanner p{position:relative;font-size:14px;text-shadow:0 1px 4px #000}#qr-scanner button{position:relative;padding:10px 26px;border-radius:8px;border:1px solid rgba(255,255,255,.4);background:#0000008c;color:#fff;font-size:15px}body:not([data-screen=game]) #hud,body:not([data-screen=game]) #touch{display:none!important}#hud{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:10}#bars{display:flex;align-items:center;gap:14px;padding:14px 18px;padding-top:max(14px,env(safe-area-inset-top))}.hp-row{flex:1;display:flex;align-items:center;gap:10px}.hp-row.right{justify-content:flex-end}.name{font-weight:700;font-size:13px;letter-spacing:.08em;opacity:.85}.hp{flex:1;height:18px;background:#ffffff14;border:1px solid rgba(255,255,255,.18);border-radius:4px;overflow:hidden}.fill{height:100%;width:100%;transition:width .12s linear}.fill.p1{background:linear-gradient(90deg,#ff8a50,#ff5722)}.fill.p2{background:linear-gradient(90deg,#29b6f6,#1565c0);margin-left:auto}.hp-row.right .hp{direction:rtl}.fill.low{background:linear-gradient(90deg,#ff5252,#b71c1c);animation:pulse .6s infinite alternate}@keyframes pulse{to{filter:brightness(1.5)}}#timer{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;min-width:58px;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.6)}.wins{font-size:13px;letter-spacing:2px;color:#ffd54f;min-width:34px}.hp-row.right .wins{text-align:right}#btn-menu{pointer-events:auto;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#e6e9f0;border-radius:6px;width:34px;height:26px;font-size:13px;cursor:pointer;flex-shrink:0}#message{text-align:center;margin-top:16vh;font-size:34px;font-weight:800;letter-spacing:.06em;text-shadow:0 2px 12px rgba(0,0,0,.8);opacity:0;transition:opacity .15s}#message.show{opacity:1;pointer-events:auto;cursor:pointer}#message.flash{color:#ffd54f;animation:pop .4s}@keyframes pop{0%{transform:scale(1.6)}to{transform:scale(1)}}#touch{display:none}@media(pointer:coarse){body[data-screen=game] #touch{display:block;position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:15}}.tc{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}.tc-left{left:calc(16px + env(safe-area-inset-left))}.tc-right{right:calc(16px + env(safe-area-inset-right))}.tc-row{display:flex;gap:14px}.tbtn{pointer-events:auto;width:62px;height:62px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:#ffffff1a;color:#e6e9f0;font-size:22px;touch-action:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}.tbtn.held{background:#ffffff52;transform:scale(.94)}.tbtn-atk{width:70px;height:70px;background:#ff572238;border-color:#ff8a5080}.tbtn-block{background:#2979ff33;border-color:#64a0ff80}@media(max-width:700px),(max-height:500px){#bars{padding:8px 10px;gap:8px}.hp{height:12px}#timer{font-size:20px;min-width:38px}.name{font-size:10px}.wins{font-size:10px;min-width:22px}#message{font-size:22px;margin-top:12vh}.card{padding:16px}.card h1{font-size:32px}.card h1 em{font-size:24px}}@media(max-height:500px){.screen{align-items:flex-start}}