*,:before,:after{box-sizing:border-box}:root{--bg-page:#faf6ef;--bg-elevated:#fffdf8;--bg-soft:#fff5e8;--bg-muted:#f5ebe0;--border:#e5d8c6;--border-strong:#d4c4a8;--text:#3d3428;--text-muted:#756858;--text-subtle:#958677;--accent-warn:#b8892a;--accent-butter:#e5c85c;--primary-from:#e8b86d;--primary-to:#b8732e;--error:#b85248;--hp-track:#e8dfd2;--hp-you-a:#c9a227;--hp-you-b:#e8c770;--hp-opp-a:#9e4a3c;--hp-opp-b:#d49488;--picked-outline:#c4942e;--picked-bg:#fff4e0;--secondary-btn-bg:#faf5eb;--secondary-btn-border:#e0d2bc;--secondary-btn-text:#4a3f32;--input-bg:#fffdf9;--input-border:#e5d5c4;--letter-box-bg:#fffdf9;--letter-box-border:#dfc9a8;--burned-bg:#fff6eb;--shadow-soft:0 1px 3px #3d302414;--sudden-pulse:#e5c85c80;--portrait-size:min(56vw, 208px)}html,body{background:var(--bg-page);min-height:100%;color:var(--text);margin:0}#root{min-height:100vh}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-shell{min-height:100dvh;position:relative}.ambient-bg{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.ambient-bg__wash{background:var(--bg-page);position:absolute;inset:0}.ambient-bg__wash:after{content:"";background:radial-gradient(130% 65% at 50% -15%,#ffe4c38c,#ffdaaf2e 42%,#0000 68%);position:absolute;inset:0}.ambient-bg__rays{transform-origin:50% 0;will-change:transform;width:240vmax;height:240vmax;margin-left:-120vmax;position:absolute;top:0;left:50%}.ambient-bg__rays--primary{opacity:.85;background:repeating-conic-gradient(at 50% 0,#0000 0deg 10deg,#ffd6a521 10deg 12deg,#0000 12deg 22deg);animation:100s ease-in-out infinite alternate cathedralRaySway}.ambient-bg__rays--secondary{opacity:.65;background:repeating-conic-gradient(from 6deg at 50% 0,#0000 0deg 18deg,#ffc88212 18deg 19.5deg,#0000 19.5deg 36deg);animation:140s ease-in-out infinite alternate-reverse cathedralRaySway}@media (prefers-reduced-motion:reduce){.ambient-bg__rays--primary,.ambient-bg__rays--secondary{animation:none}}@keyframes cathedralRaySway{0%{transform:rotate(-2.25deg)}to{transform:rotate(2.25deg)}}.app{z-index:1;max-width:960px;color:var(--text);box-sizing:border-box;min-height:100vh;margin:0 auto;padding:1rem 1.25rem 3rem;font-family:Segoe UI,system-ui,sans-serif;position:relative}.app--arena{max-width:none;min-height:100dvh;margin:0;padding:0}.app--arena .header{text-align:center;margin-bottom:0;padding:.35rem 1rem}.header{text-align:center;margin-bottom:1.5rem;position:relative}.audio-toggle{border:1px solid var(--secondary-btn-border);width:40px;height:40px;color:var(--secondary-btn-text);box-shadow:var(--shadow-soft);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#faf3e8c7;border-radius:12px;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute;top:0;right:0}.audio-toggle:hover{border-color:var(--border-strong);background:#fff8ebeb}.audio-toggle:active{transform:translateY(1px)}.audio-toggle:focus-visible{outline:2px solid var(--primary-from);outline-offset:2px}.audio-toggle[aria-pressed=true]{color:#6b4e18;background:#c4942e29;border-color:#a8762a8c}.audio-toggle__icon{display:block}.header h1{letter-spacing:.06em;text-transform:uppercase;color:var(--text);margin:0;font-size:2rem}.tagline{color:var(--text-subtle);margin:.35rem 0 0;font-size:.95rem}.warn{color:var(--accent-warn);margin-top:.5rem}.card{background:var(--bg-elevated);border:1px solid var(--border);box-shadow:var(--shadow-soft);border-radius:12px;flex-direction:column;gap:.75rem;padding:1.25rem;display:flex}.card.lobby{gap:1.1rem;max-width:30rem;margin-left:auto;margin-right:auto;padding:1.75rem 1.85rem}.card.lobby h3{margin:.25rem 0 0;font-size:1.25rem}.lobby label{color:var(--text-muted);flex-direction:column;gap:.5rem;font-size:1rem;display:flex}.lobby input{border:1px solid var(--input-border);background:var(--input-bg);color:var(--text);border-radius:10px;padding:.85rem 1rem;font-size:1.1rem}.card.lobby .primary{border-radius:10px;min-height:3.25rem;padding:.95rem 1.25rem;font-size:1.1rem}.card.lobby button:not(.primary){border-radius:10px;min-height:3rem;padding:.75rem 1.1rem;font-size:1.05rem}.card.lobby .muted{font-size:1rem}.lobby input:focus{outline:2px solid var(--primary-from);outline-offset:1px}.primary{background:linear-gradient(180deg, var(--primary-from), var(--primary-to));color:#fff;cursor:pointer;border:none;border-radius:8px;padding:.65rem 1rem;font-weight:600;box-shadow:0 1px 2px #8c5a2852}.primary--locked{color:#f8f4eb;background:linear-gradient(#c4a878f5,#94764ef5);box-shadow:0 1px 2px #64482838}.primary:disabled{opacity:.45;cursor:not-allowed}button:not(.primary){background:var(--secondary-btn-bg);color:var(--secondary-btn-text);border:1px solid var(--secondary-btn-border);cursor:pointer;border-radius:8px;padding:.5rem .85rem}button:not(.primary):hover:not(:disabled){background:var(--bg-soft)}button:disabled{opacity:.45;cursor:not-allowed}.muted{color:var(--text-muted);font-size:.9rem}.error{color:var(--error)}.ability-pick{flex-wrap:wrap;gap:.5rem;display:flex}.ability-pick button{text-transform:capitalize}.ability-pick .picked{outline:2px solid var(--picked-outline);background:var(--picked-bg)}.character-pick{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;display:grid}.character-pick button{text-align:left;border-radius:12px;flex-direction:row;align-items:stretch;gap:.85rem;padding:.85rem 1rem;display:flex}.character-pick-thumb{border:1px solid var(--border);background:var(--bg-elevated);border-radius:10px;flex-shrink:0;width:80px;height:80px;overflow:hidden}.character-pick-thumb img{object-fit:cover;width:100%;height:100%;display:block}.character-pick-text{flex:1;min-width:0}.character-pick .picked{outline:2px solid var(--picked-outline);background:var(--picked-bg)}.character-name{letter-spacing:.01em;font-size:1.15rem;font-weight:800}.character-sub{color:var(--text-muted);margin-top:.1rem;font-size:.9rem}.character-ability{color:var(--text);align-items:center;gap:.65rem;margin-top:.65rem;font-size:.95rem;display:flex}.ability-icon{object-fit:contain;flex-shrink:0}.ability-icon--pick{width:5.5rem;height:5.5rem}.ability-btn-icon-wrap{width:100%;height:100%;display:block;position:relative;overflow:hidden}.ability-btn--square{box-sizing:border-box;width:100%;height:var(--ability-btn-size);flex:none;justify-content:stretch;align-items:stretch;min-width:0;max-width:100%;padding:0;display:flex}.ability-slot--square{flex:0 0 var(--ability-btn-size);width:var(--ability-btn-size);min-width:var(--ability-btn-size);max-width:var(--ability-btn-size)}.ability-icon--bar{object-fit:contain;transform-origin:50%;width:100%;height:100%;display:block;transform:scale(1)}.ability-cd{color:#fff;letter-spacing:.02em;background:#3d30249e;border-radius:10px;justify-content:center;align-items:center;font-size:1.05rem;font-weight:800;display:flex;position:absolute;inset:0}.ability-btn-fallback{background:var(--bg-elevated);border:1px solid var(--border);width:100%;height:100%;color:var(--text);border-radius:10px;justify-content:center;align-items:center;font-size:1.75rem;font-weight:800;display:flex}.arena{box-sizing:border-box;flex-direction:column;gap:0;min-height:100dvh;display:flex}.portrait{width:var(--portrait-size);height:var(--portrait-size);min-width:var(--portrait-size);border:2px solid var(--border);background:var(--bg-elevated);box-shadow:var(--shadow-soft);z-index:3;border-radius:999px;flex-shrink:0;overflow:hidden}.arena .portrait--opponent{margin-top:-.2rem;margin-left:-.35rem}.arena .portrait--you{margin-bottom:-.2rem;margin-right:-.35rem}.portrait img{object-fit:cover;width:100%;height:100%;display:block}.arena-panel-row{align-items:center;gap:.65rem;display:flex}.arena-panel-main{flex:1;min-width:0}.you-play-row{flex-flow:wrap;align-items:flex-end;gap:.65rem .85rem;margin-top:.35rem;display:flex}.you-play-row-word{flex:1;min-width:0}.you-play-row .word-input{margin-top:0}.you-play-row .ability-bar{flex-wrap:nowrap;flex-shrink:0;justify-content:flex-end;gap:.65rem;margin-top:0}.you-play-row .ability-cd{border-radius:10px;font-size:1.2rem}@media (width<=520px){.arena-panel-row{flex-wrap:wrap}.arena-panel-row .portrait{order:-1;margin-inline:auto}.arena-panel-row--you .portrait{order:1}.arena .portrait--opponent,.arena .portrait--you{margin:0}}.opponent-panel{border-top:none;border-left:none;border-right:none;border-radius:0;flex-shrink:0;order:1;width:100%}.arena-center{text-align:center;box-sizing:border-box;flex-direction:column;flex:1;order:2;justify-content:center;align-items:center;min-height:0;padding:.75rem calc(148px + 1rem) .75rem 1rem;display:flex}.you-panel{border-bottom:none;border-left:none;border-right:none;border-radius:0;flex-shrink:0;order:4;width:100%;margin-top:auto}.burned-sidebar{z-index:2;background:var(--burned-bg);border:1px solid var(--border);width:132px;max-height:min(420px,70vh);color:var(--text);box-shadow:var(--shadow-soft);border-radius:10px;order:3;padding:.75rem;font-size:.8rem;position:fixed;top:50%;right:.75rem;overflow:auto;transform:translateY(-50%)}@media (width<=720px){.arena-center{padding-right:1rem}.burned-sidebar{box-sizing:border-box;width:100%;max-height:120px;margin:0 .75rem;position:static;transform:none}}.arena-panel{background:var(--bg-elevated);border:1px solid var(--border);box-shadow:var(--shadow-soft);border-radius:10px;padding:1rem}.opponent-panel,.you-panel{overflow:visible}.burned-sidebar h3{color:var(--text-muted);margin-top:0;font-size:.9rem}.burned-sidebar ul{margin:0;padding-left:1.1rem}.burned-sidebar li{word-break:break-all;margin-bottom:.2rem}.hp-wrap{align-items:center;gap:.4rem;margin-bottom:.65rem;display:flex}.hp-label{min-width:3.75rem;color:var(--text-muted);font-size:.8rem}.hp-bar{background:var(--hp-track);border-radius:7px;flex:1;height:12px;overflow:hidden;box-shadow:inset 0 1px 2px #3a342f24,inset 0 -1px 1px #fff6}.hp-fill{background:linear-gradient(90deg, var(--hp-you-a), var(--hp-you-b), var(--hp-you-a));background-size:200% 100%;border-radius:6px;height:100%;transition:width .25s;animation:3.5s ease-in-out infinite hpEnergyShift;box-shadow:0 0 10px #c9a22761}.opponent-panel .hp-fill{background:linear-gradient(90deg, var(--hp-opp-a), var(--hp-opp-b), var(--hp-opp-a));background-size:200% 100%;box-shadow:0 0 10px #a85a4a61}.hp-text{color:var(--text-subtle);text-align:right;min-width:3rem;font-size:.76rem}@keyframes hpEnergyShift{0%,to{background-position:0%}50%{background-position:100%}}@media (prefers-reduced-motion:reduce){.hp-fill{background-size:100% 100%;background:linear-gradient(90deg, var(--hp-you-a), var(--hp-you-b));box-shadow:none;animation:none}.opponent-panel .hp-fill{background:linear-gradient(90deg, var(--hp-opp-a), var(--hp-opp-b))}}.row-title{justify-content:space-between;align-items:baseline;margin-bottom:.5rem;display:flex}.box-row{flex-wrap:wrap;gap:.45rem;display:flex}.letter-box{border:2px solid var(--letter-box-border);text-transform:uppercase;background:var(--letter-box-bg);width:2.75rem;height:3.1rem;color:var(--text);border-radius:8px;justify-content:center;align-items:center;font-size:1.2rem;font-weight:700;display:inline-flex}.letter-box.dim{opacity:.85;border-color:var(--border-strong)}.typing-hint{color:var(--text-muted);margin-top:.5rem;font-size:.8rem}.word-input-form{flex-direction:column;margin:0;display:flex;position:relative}.word-input{cursor:text;margin-top:.5rem;position:relative}.word-input:focus-within:not(.frozen){outline:2px solid var(--primary-from);outline-offset:2px;border-radius:8px}.word-input.frozen{opacity:.7;filter:saturate(.5);cursor:not-allowed}.word-input.sudden .letter-box{border-color:var(--accent-butter);animation:1s infinite pulse}@keyframes pulse{50%{box-shadow:0 0 10px var(--sudden-pulse)}}.word-field--hidden{clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none;border:0;width:1px;height:1px;margin:0;padding:0;position:absolute;overflow:hidden}.word-field--hidden:disabled{cursor:not-allowed}.last-word{color:var(--text-muted);margin:0;font-size:1.05rem}.word-pop{letter-spacing:.08em;text-transform:uppercase;color:var(--text);text-shadow:0 1px #00000040,0 10px 32px #00000038;pointer-events:none;margin-bottom:.25rem;font-size:clamp(1.6rem,5vw,3.25rem);font-weight:900;animation:.82s cubic-bezier(.16,1,.3,1) both wordPopFloat}@keyframes wordPopFloat{0%{opacity:0;filter:blur(1px);transform:translateY(16px)scale(.92)}22%{opacity:1;filter:blur();transform:translateY(0)scale(1.06)}55%{opacity:1;transform:translateY(-8px)scale(1.02)}to{opacity:0;transform:translateY(-22px)scale(.98)}}.sudden-banner{color:var(--accent-butter);margin:.25rem 0 0;font-weight:700}.ban-badge{border:2px solid var(--accent-warn);clip-path:polygon(0 0,calc(100% - .65rem) 0,100% .65rem,100% 100%,0 100%);background:linear-gradient(145deg,#fff8ee 0%,#ffeed8 100%);flex-shrink:0;align-self:flex-end;align-items:center;gap:.4rem;padding:.35rem .55rem .35rem .45rem;display:flex;box-shadow:0 2px 8px #b8892a29,inset 0 1px #ffffffa6}.ban-badge__label{letter-spacing:.06em;text-transform:uppercase;color:var(--accent-warn);font-size:.62rem;font-weight:800}.ban-badge__letters{gap:.3rem;display:flex}.ban-badge__letter{text-transform:uppercase;width:2.85rem;height:3.15rem;color:var(--error);border:2px solid var(--error);clip-path:polygon(0 0,100% 0,100% calc(100% - .5rem),calc(100% - .5rem) 100%,0 100%);background:#fff5f2;justify-content:center;align-items:center;font-size:1.25rem;font-weight:800;display:inline-flex;box-shadow:inset 0 1px #ffffffa6,0 1px 4px #b8524824}.ability-bar{--ability-btn-size:9rem;flex-flow:row;align-items:flex-end;gap:.65rem;margin-top:1rem;display:flex}.ability-slot{flex:1;min-width:140px;position:relative}.ability-tooltip{z-index:20;background:var(--bg-elevated);border:1px solid var(--border-strong);width:max-content;max-width:14rem;color:var(--text);text-align:center;pointer-events:none;opacity:0;visibility:hidden;border-radius:8px;padding:.45rem .6rem;font-size:.78rem;line-height:1.35;transition:opacity .15s,visibility .15s,transform .15s;position:absolute;bottom:calc(100% + .45rem);left:50%;transform:translate(-50%)translateY(4px);box-shadow:0 4px 16px #3d302424}.ability-tooltip-name{font-size:.85rem;font-weight:800;line-height:1.25;display:block}.ability-tooltip-desc{color:var(--text-muted);margin-top:.25rem;font-size:.75rem;font-weight:500;line-height:1.35;display:block}.ability-slot:hover .ability-tooltip{opacity:1;visibility:visible;transform:translate(-50%)translateY(0)}.ability-btn{text-align:left;flex:1;width:100%;min-width:140px}.ability-bar .ability-btn--square{width:100%;height:var(--ability-btn-size);background:0 0;border:none;border-radius:10px;flex:none;min-width:0;max-width:100%;padding:0;overflow:hidden}.ability-bar .ability-btn--square:hover:not(:disabled){filter:brightness(1.06);background:0 0}.ability-bar .ability-btn--square:disabled{opacity:1}.ability-bar .ability-btn--square:focus-visible{outline:2px solid var(--picked-outline);outline-offset:2px}.fx-stretch .you-panel{animation:.5s stretchFx}.fx-shrink .you-panel{animation:.5s shrinkFx}.fx-ban .you-panel{animation:.4s shake}.fx-freeze .you-panel{animation:.5s flash}.fx-heal .you-panel{animation:.55s healFx}.fx-strike .you-panel{animation:.4s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes stretchFx{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.06)}}@keyframes shrinkFx{0%,to{transform:scaleY(1)}50%{transform:scaleY(.94)}}@keyframes flash{0%,to{box-shadow:inset 0 0 #0000}50%{box-shadow:inset 0 0 28px #ffd2a080}}@keyframes healFx{0%,to{box-shadow:inset 0 0 #0000}50%{box-shadow:inset 0 0 28px #d6be6e7a}}.post-match{background:var(--bg-elevated);border:1px solid var(--border);box-shadow:var(--shadow-soft);border-radius:12px;padding:1.5rem}.post-match h2{color:var(--text);margin-top:0}.stats-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;margin:1rem 0;display:grid}.stats-grid h3{color:var(--text-muted);margin:0 0 .25rem;font-size:.85rem}.burned-inline{color:var(--text-muted);word-break:break-word;font-size:.85rem}.rules-link{border:1px solid var(--secondary-btn-border);color:var(--secondary-btn-text);cursor:pointer;box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#faf3e8c7;border-radius:12px;padding:.45rem .75rem;font-size:.85rem;font-weight:600;position:absolute;top:0;left:0}.rules-link:hover{border-color:var(--border-strong);background:#fff8ebeb}.rules-overlay{z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#140c088c;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.rules-modal{text-align:left;flex-direction:column;width:min(520px,100%);max-height:min(85vh,640px);margin:0;display:flex}.rules-modal h2{text-align:center;margin:0 0 .75rem}.rules-modal__scroll{flex:1;padding-right:.25rem;overflow-y:auto}.rules-modal__full{border-top:1px solid var(--border);margin-top:1rem;padding-top:1rem}.rules-modal__actions{justify-content:center;margin-top:1rem;display:flex}.rules-expand{color:var(--primary-from);cursor:pointer;background:0 0;border:none;margin-top:.75rem;padding:0;font-weight:600;text-decoration:underline}.rules-body{font-size:.92rem;line-height:1.5}.rules-list{margin:.5rem 0;padding-left:1.25rem}.rules-list li{margin-bottom:.35rem}.rules-p{margin:.5rem 0}.rules-h4{margin:1rem 0 .35rem;font-size:1rem}.rules-table{border-collapse:collapse;width:100%;margin:.5rem 0;font-size:.85rem}.rules-table th,.rules-table td{border:1px solid var(--border);text-align:left;padding:.35rem .5rem}.rules-inline-code{background:#0000000f;border-radius:4px;padding:.1em .35em;font-size:.85em}