:root{--bg:#0b0d1a;--bg-2:#13132b;--panel:#14122cd1;--line:#ffffff1a;--text:#ece9ff;--muted:#a39fc4;--accent:#f5c46b;--accent-2:#ff8a3c;--good:#51cf66;--bad:#ff6b6b;--radius:14px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:radial-gradient(ellipse at 50% -10%, #2a1f5c 0%, var(--bg) 60%) fixed var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{min-height:100vh;margin:0}#app{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3{letter-spacing:.02em;margin:0 0 .6em;font-family:Georgia,Times New Roman,serif}a{color:var(--accent)}code{color:var(--accent);letter-spacing:.12em;font-family:ui-monospace,SF Mono,Menlo,monospace}.muted{color:var(--muted)}.error{color:var(--bad);min-height:1.2em;margin:.4em 0 0}.center{flex:1;place-items:center;padding:24px;display:grid}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:20px;box-shadow:0 20px 60px #00000059}.panel.narrow{width:min(440px,100%)}.btn{appearance:none;border:1px solid var(--line);color:var(--text);font:inherit;cursor:pointer;background:#ffffff0f;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:10px 18px;font-weight:650;text-decoration:none;transition:background .15s,transform 50ms,border-color .15s;display:inline-flex}.btn:hover:not(:disabled){background:#ffffff1f}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{color:#24130a;background:linear-gradient(#ffb45c,#e8731f);border-color:#0000}.btn.primary:hover:not(:disabled){background:linear-gradient(#ffc47a,#f07f2a)}.btn.small{padding:6px 12px;font-size:.9em}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input,select{font:inherit;color:var(--text);border:1px solid var(--line);background:#00000059;border-radius:10px;padding:9px 12px}.field{flex-direction:column;gap:6px;margin-bottom:14px;display:flex}.field>span{color:var(--muted);font-size:.85em;font-weight:600}.field.toggle,label.toggle{cursor:pointer;flex-direction:row;align-items:center;gap:10px}.field.toggle>span{color:var(--text);font-size:1em;font-weight:500}input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent-2)}.actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;margin-top:12px;display:flex}.segmented{border:1px solid var(--line);border-radius:10px;width:-moz-fit-content;width:fit-content;display:inline-flex;overflow:hidden}.segmented button{font:inherit;color:var(--text);cursor:pointer;background:0 0;border:0;padding:8px 14px}.segmented button+button{border-left:1px solid var(--line)}.segmented button.active{background:var(--accent-2);color:#24130a;font-weight:700}.toast{border:1px solid var(--line);z-index:10;overflow-wrap:anywhere;background:#221d48;border-radius:10px;max-width:90vw;padding:10px 16px;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.net-status{color:var(--muted);z-index:5;font-size:12px;position:fixed;top:8px;right:10px}.net-status.warn{color:var(--accent)}.home{gap:20px;width:min(720px,100%);margin:0 auto;padding:40px 20px;display:grid}.hero{text-align:center;margin-bottom:8px}.hero h1{text-shadow:0 4px 30px #ff8a3c59;margin:0;font-size:clamp(2.6rem,8vw,4.2rem)}.hero h1 span{color:var(--accent-2)}.hero p{color:var(--muted);margin:8px 0 0}.home .actions{justify-content:stretch}.home .actions>*{flex:1}.join{gap:10px;margin-top:14px;display:flex}.code-input{text-transform:uppercase;letter-spacing:.3em;flex:1;font-family:ui-monospace,Menlo,monospace}.lobby-list{gap:8px;margin:0;padding:0;list-style:none;display:grid}.lobby-list li{border:1px solid var(--line);background:#ffffff0a;border-radius:10px;grid-template-columns:1fr auto auto;align-items:center;gap:14px;padding:10px 14px;display:grid}.lobby-list .vs,.versus .vs{color:var(--muted);margin:0 8px;font-size:.85em}.lobby-list .meta{color:var(--muted);font-size:.85em}footer{text-align:center;font-size:.9em}.lobby-screen{flex-direction:column;flex:1;display:flex}.panel.lobby{width:min(720px,100% - 32px);margin:32px auto}.lobby-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.lobby-head h2{margin:0}.versus{grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:20px 0;display:grid}.player-card{border:1px solid var(--line);background:#ffffff0a;border-radius:12px;flex-direction:column;gap:4px;min-height:76px;padding:16px;display:flex}.player-card.me{border-color:#f5c46b80}.player-card.ready{background:#51cf661f;border-color:#51cf6680}.player-card .state{color:var(--muted);font-size:.9em}.player-card.ready .state{color:var(--good)}.badge{text-transform:uppercase;letter-spacing:.06em;vertical-align:middle;background:#ffffff1a;border-radius:6px;margin-left:8px;padding:2px 6px;font-family:system-ui,sans-serif;font-size:.7em;font-weight:700}.settings{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));column-gap:20px;display:grid}.settings.readonly{grid-template-columns:auto 1fr;gap:6px 20px;margin:0}.settings.readonly dt{color:var(--muted)}.settings.readonly dd{margin:0}.countdown{text-align:center;color:var(--accent);font-size:1.4em;font-weight:700}.panel.setup{width:min(980px,100% - 24px);margin:20px auto}.setup-head{border-bottom:1px solid var(--line);grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:14px;display:grid}.setup-head h2,.setup-head .actions{margin:0}.timer{color:var(--accent);font-variant-numeric:tabular-nums;font-size:1.8em;font-weight:800}.ready-label{color:var(--good)}.picker{gap:10px;width:min(100%,160dvh - 240px);min-width:min(100%,480px);margin:0 auto;display:grid;container-type:inline-size}.picker-top{justify-content:space-between;align-items:center;gap:12px;display:flex}.picker .element{align-items:center;gap:8px;display:flex}.chip{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-weight:700}.chip.active{border-color:var(--accent);color:var(--accent)}.chip.locked{opacity:.75;border-style:dashed}.picker-stage{aspect-ratio:960/600;-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 20% 28%,#eee 0 1px,#0000 2px),radial-gradient(circle at 84% 22%,#eee 0 1px,#0000 2px),linear-gradient(#19133b,#35265d 55%,#171322);border-radius:12px;font-size:max(9px,1.2cqw);position:relative;overflow:hidden;box-shadow:0 20px 80px #00000080}.picker-stage>*{position:absolute}.bar-panel{background:#07060fb8;border:1px solid #ffffff14;border-radius:16px}.slot-wrap>.name{text-align:center;color:#ddd;margin-top:.3em;font-weight:600;line-height:1.1;position:absolute;top:100%;left:-6%;right:-6%}.slot,.spell{appearance:none;font:inherit;color:var(--text);cursor:pointer;touch-action:none;-webkit-touch-callout:none;border:2px solid #ffffff59;border-radius:14px;padding:0}.slot{background:0 0;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.slot img{pointer-events:none;width:100%;height:100%;display:block}.slot .key,.spell .key{text-shadow:0 0 3px #000;pointer-events:none;font-size:1.05em;font-weight:800;position:absolute}.slot .key{bottom:3px;right:6px}.slot.fixed{cursor:default;border-style:dashed}.spell{background:#07060fb8;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:4px;display:flex;overflow:hidden}.spell img{aspect-ratio:1;pointer-events:none;border:2px solid #ffffff59;border-radius:14px;width:84%}.spell .key{top:3px;left:5px}.spell .name{text-align:center;pointer-events:none;font-weight:650;line-height:1.1}.spell.equipped{background:#f5c46b29}.slot:hover:not(:disabled):not(.fixed),.spell:hover:not(:disabled){border-color:#ffffffb3}.slot.selected,.spell.selected{border-color:var(--accent);box-shadow:0 0 0 3px #f5c46b73}.slot.target,.spell.target{border-color:#7ff3ff}.drop-hover{box-shadow:0 0 0 3px #7ff3ff}.book-divider{background:#ffffff47;border-radius:1px}.book-label{color:var(--muted);text-align:center;margin:0;font-size:1em;font-weight:700}.details{background:#07060f99;border-radius:12px;grid-template-columns:64px 1fr;align-items:center;gap:14px;padding:10px 14px;font-size:max(10px,1.4cqw);display:grid;overflow:hidden}.details img{border-radius:10px;width:100%}.details{overflow-y:auto}@container (width<=640px){.details{grid-template-columns:28px 1fr;gap:8px;padding:4px 8px;font-size:10px}.details p{margin:0;line-height:1.2}}.details p{margin:2px 0}.details .meta{color:var(--muted)}.picker .hint{color:var(--muted);margin:0;font-size:.9em}.picker.locked .slot,.picker.locked .spell{cursor:default;opacity:.8}@media (hover:none) and (pointer:coarse){.slot .key,.spell .key,.desktop-only{display:none}}.drag-ghost{z-index:1000;pointer-events:none;opacity:.85;aspect-ratio:1;top:0;left:0;height:auto!important;position:fixed!important;bottom:auto!important;right:auto!important}.picker.dragging,.picker.dragging *{cursor:grabbing}.battle-screen{flex:1;padding:12px;display:flex}.stage{flex:1;place-items:center;min-height:320px;display:grid;overflow:hidden}.battle-canvas{touch-action:none;-webkit-user-select:none;user-select:none;border-radius:12px;display:block;box-shadow:0 20px 80px #00000080}.score{font-size:1.2em;font-weight:700}.results{text-align:center;width:min(560px,100%)}.results table{border-collapse:collapse;width:100%;margin:12px 0}.results th,.results td{border-bottom:1px solid var(--line);padding:6px}.results th{color:var(--muted);font-weight:600}.results details{text-align:left;margin-top:8px}.training{flex-direction:column;flex:1;height:100vh;display:flex}.bar{border-bottom:1px solid var(--line);align-items:center;gap:16px;padding:10px 16px;display:flex}.bar h2{margin:0;font-size:1.2em}.training-body{flex:1;gap:12px;min-height:0;padding:12px;display:flex}.meter{flex-direction:column;flex-shrink:0;width:300px;display:flex;overflow:auto}.meter-totals{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;display:grid}.meter-totals div{background:#0000004d;border-radius:10px;flex-direction:column;padding:8px;display:flex}.meter-totals span{color:var(--muted);font-size:.75em}.meter-totals strong{font-variant-numeric:tabular-nums;font-size:1.2em}.meter-rows{flex:1;align-content:start;gap:6px;margin:0;padding:0;list-style:none;display:grid}.meter-rows li{font-variant-numeric:tabular-nums;background:#ffffff0a;border-radius:8px;grid-template-columns:24px 1fr auto 38px;align-items:center;gap:8px;padding:5px 8px;display:grid;position:relative;overflow:hidden}.meter-rows li:before{content:"";width:var(--share,0%);z-index:-1;background:linear-gradient(90deg,#ff8a3c59,#ff8a3c1f);position:absolute;inset:0}.meter-rows li.empty{color:var(--muted);grid-template-columns:1fr}.meter-rows img{border-radius:5px;width:24px}.meter-rows .pct{color:var(--muted);text-align:right;font-size:.85em}.meter .actions{justify-content:stretch}.meter .actions .btn{flex:1}.modal{background:var(--bg-2);width:min(980px,100% - 24px);max-height:calc(100vh - 40px);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);padding:20px}.modal::backdrop{background:#05040fb3}@media (max-width:860px){.training{height:auto}.training-body{flex-direction:column}.meter{width:auto}.stage{min-height:0}.setup-head{grid-template-columns:1fr auto}.setup-head .actions{grid-column:1/-1;justify-content:space-between}.lobby-list li{grid-template-columns:1fr auto}.lobby-list .meta{grid-column:1}}