:root{color-scheme:dark;--bg:#141a25;--panel:#1d2532;--line:#34404c;--gold:#e7c68b;--ink:#f2e9d9;--muted:#9da9b8}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#29323d 0,transparent 60%),var(--bg);color:var(--ink);font-family:Arial,"Segoe UI",sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button,a,input{touch-action:manipulation}button{font:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:wait}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--gold);outline-offset:4px}[hidden]{display:none!important}header{max-width:1344px;margin:auto;padding:23px 32px;border-bottom:1px solid #ffffff10;display:flex;align-items:center;justify-content:space-between;gap:18px;direction:ltr}.brand{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:1.5px}.brand-icon{display:grid;place-items:center;width:36px;height:36px;background:var(--gold);color:#202532;font-family:Georgia,serif;font-size:19px;letter-spacing:-2px}.brand small{display:block;color:var(--muted);font-weight:400;letter-spacing:0;font-size:11px;margin-top:4px;direction:rtl}.top-right{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted)}.live-dot{width:6px;height:6px;border-radius:50%;background:#90bba3;box-shadow:0 0 10px #90bba34a}.icon-button{background:none;border:1px solid var(--line);color:var(--muted);padding:7px 10px;font-size:12px}main{max-width:1280px;margin:0 auto;padding:0 32px}.intro{display:flex;justify-content:space-between;align-items:center;padding:36px 0 28px;direction:ltr}.eyebrow{color:var(--gold);font-size:10px;font-weight:700;letter-spacing:2.1px;direction:ltr;display:block}h1{font-family:Georgia,"Times New Roman",serif;margin:8px 0 0;font-size:64px;line-height:.96;letter-spacing:5px;color:#f2e7ce;text-shadow:0 3px #6b665a,0 6px #0e151e;font-weight:900}h1 span{display:block;font:9px Arial,sans-serif;letter-spacing:5px;color:var(--gold);margin-top:17px;text-shadow:none}.intro-copy{direction:rtl}.intro-copy h2{font-size:23px;margin:0 0 10px}.intro-copy p{font-size:14px;line-height:1.8;color:var(--muted);margin:0}.game-shell{border:1px solid #4b4c48;box-shadow:0 12px 35px #0004;background:#151b25}.arena-top,.arena-bottom{display:flex;align-items:center;justify-content:space-between;padding:12px 17px;font-size:10px;letter-spacing:1.6px;direction:ltr}.arena-top{border-bottom:2px solid #505548;color:#e5d5b7}.arena-top #stage{color:var(--gold);font-weight:700}.location{display:flex;align-items:center;gap:8px;letter-spacing:0;font-size:12px}.location i{background:#91b18b;width:5px;height:5px}.arena-bottom{border-top:2px solid #505548;color:#a4b1bd;font-size:10px}.arena-bottom>span:first-child{direction:rtl;letter-spacing:0;font-size:11px}.arena-bottom b{font-weight:400;color:var(--gold)}.separator{margin:0 10px;opacity:.4}.viewport{position:relative;overflow:hidden;aspect-ratio:1152/600;background:#475656}#game{display:block;width:100%;height:100%;image-rendering:pixelated;outline:0}.vignette{position:absolute;inset:0;box-shadow:inset 0 0 75px #111b244a;pointer-events:none}.arena-banner{position:absolute;top:15%;left:0;right:0;text-align:center;pointer-events:none;text-shadow:0 2px 4px #000a}.arena-banner h2{font-size:clamp(16px,2.6vw,32px);margin:8px}.arena-banner p{font-size:12px;color:#f4ebd1}.little-rule{color:#edce8f;display:block;font-size:20px}.setup{display:grid;grid-template-columns:1fr 290px;gap:32px;padding:32px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}.section-heading h2{margin:8px 0 0;font-size:21px}.subtle{font-size:11px;color:var(--muted)}.characters{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;direction:ltr}.character{position:relative;padding:0 0 14px;border:1px solid var(--line);background:linear-gradient(155deg,#2c3542,#1d2633);color:var(--ink);text-align:center;min-width:0;transition:transform .16s,border-color .16s}.character:hover{transform:translateY(-4px);border-color:var(--color)}.character.selected{border-color:var(--gold);background:linear-gradient(155deg,#3b3d40,#262d36);box-shadow:inset 0 -3px var(--gold)}.character.selected:after{content:'✦';position:absolute;right:8px;top:6px;color:var(--gold);font-size:12px}.character canvas{width:100%;height:132px;object-fit:contain;image-rendering:pixelated;display:block}.character strong{display:block;font:700 14px Georgia,serif;letter-spacing:.3px}.character small{display:block;font-size:10px;margin-top:6px;color:var(--muted)}.character-detail{margin-top:15px;padding:14px 16px;background:#ffffff04;border:1px solid #ffffff0b;min-height:84px;font-size:12px;line-height:1.7}.character-detail b{color:var(--gold);font-size:13px}.character-detail p{margin:4px 0;color:var(--muted)}.character-detail .stats{display:flex;gap:20px;color:#b8c5cf;font-size:10px;margin-top:7px}.room-panel{background:#1d2530;border:1px solid var(--line);padding:21px}.room-panel h2{font-size:20px}.room-panel label{font-size:11px;color:var(--muted);display:block;margin-bottom:8px}input{font:inherit;font-size:14px;width:100%;min-width:0;background:#151d28;color:var(--ink);border:1px solid #3d4755;padding:12px;border-radius:0}input::placeholder{color:#798693}.primary,.secondary{padding:12px 16px;border:1px solid var(--gold);font-weight:700;transition:filter .15s}.primary:hover,.secondary:hover{filter:brightness(1.13)}.primary{background:var(--gold);color:#24272c;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}.room-panel .primary{margin-top:12px}.secondary{background:#29333e;color:#ebdec8;font-size:12px;border-color:#5c6060}.or{text-align:center;color:#83909e;font-size:10px;margin:15px 0}.join-row{display:flex;gap:7px}.join-row input{width:100%;letter-spacing:3px;text-transform:uppercase;text-align:center}.text-button{display:block;margin:13px auto 0;background:none;color:#bfc8ce;font-size:11px;border:0;text-decoration:underline;text-underline-offset:4px}.room-note{font-size:10px;color:#8996a6;line-height:1.8;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line)}.room-code{text-align:center;font-size:11px;color:var(--muted)}.room-code b{display:block;letter-spacing:7px;color:var(--gold);font:700 32px Georgia,serif;margin:10px 0}.room-code button{width:100%}#roster{padding:0;list-style:none;margin:15px 0}#roster li{display:flex;align-items:center;gap:7px;font-size:11px;padding:9px 0;border-bottom:1px solid #ffffff0b}#roster li i{width:7px;height:7px;background:var(--c)}#roster li span{margin-inline-start:auto;color:#a5c5ad;font-size:10px}.room-hint{font-size:11px;color:var(--muted);line-height:1.6}.controls{border-top:1px solid var(--line);padding:24px 0;text-align:center}.controls>.eyebrow{font-size:9px;letter-spacing:2px;color:#a4a693}.controls>div{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:17px 0;font-size:11px;color:#b4bfcb}.controls span{white-space:nowrap}kbd{font:10px monospace;padding:5px 6px;border:1px solid #4c5764;box-shadow:0 2px #303c4b;color:#e3decf;margin:0 4px}.controls p{font-size:11px;color:#778596}.party{position:absolute;top:12px;right:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}.party-member{direction:ltr;background:#111a26cc;border:1px solid #7b847b77;padding:5px 7px;width:125px;font-size:10px;box-shadow:0 2px #0004}.party-member.me{border-color:var(--gold)}.party-member .name{display:flex;justify-content:space-between;margin-bottom:4px}.bar{height:5px;background:#0b111b;margin-top:3px}.bar>i{display:block;height:100%;background:#9ab97e}.bar.mana{height:3px}.bar.mana>i{background:#83b4d9}.bar.xp{height:2px}.bar.xp>i{background:#e2be7b}.skill-hud{position:absolute;bottom:14px;right:14px;direction:rtl;display:flex;gap:8px;pointer-events:none}.skill-hud>div{background:#14202ce6;border:1px solid #c4c3a855;color:#f1e8d4;min-width:70px;text-align:center;padding:7px;font-size:11px}.skill-hud b{font-size:12px;display:block;margin-top:4px;color:var(--gold)}.result{position:absolute;inset:0;background:#101722d9;display:grid;place-items:center;text-align:center;padding:25px}.result h2{font-size:clamp(18px,3vw,32px)}.result p{font-size:14px;color:var(--muted)}.result .primary{max-width:270px;margin:25px auto 0;justify-content:center}.reconnect{position:absolute;inset:0;display:grid;place-items:center;background:#152030c9;color:var(--gold);font-size:17px}#notice{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:13px 24px;background:#e8ce9f;color:#222a34;font-size:13px;z-index:99;box-shadow:0 5px 20px #0005;max-width:90vw;text-align:center;display:none}footer{display:flex;justify-content:space-between;direction:ltr;color:#73808d;border-top:1px solid #ffffff0b;padding:22px 0 28px;font-size:10px;letter-spacing:1px}body.playing .intro,body.playing #setup{display:none}body.playing .game-shell{margin-top:20px}body.playing main{max-width:1400px}.mobile{display:flex;justify-content:space-between;direction:ltr;gap:18px;padding:15px 0;touch-action:none;user-select:none}.mobile button{touch-action:none;border:1px solid #6d7985;background:#2b3948;color:#efe3c9;min-height:45px;min-width:45px;font-size:11px}.dpad{display:grid;grid-template-columns:repeat(3,44px);gap:4px}.dpad [data-key=up]{grid-column:2}.dpad [data-key=left]{grid-column:1;grid-row:2}.dpad [data-key=down]{grid-column:2;grid-row:2}.dpad [data-key=right]{grid-column:3;grid-row:2}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.mobile .attack-button{background:#b79662;color:#15202b;border-color:#d8bd8d}.mobile button.pressed{background:#e7c68b;color:#192430}.viewport:fullscreen{background:#17202d;width:100vw;height:100dvh;aspect-ratio:auto}.viewport:fullscreen canvas{object-fit:contain}.viewport:fullscreen .party{top:20px}@media(min-width:1500px){.character canvas{height:145px}}@media(max-width:1000px){main{padding:0 20px}.setup{grid-template-columns:1fr 250px;gap:18px}.characters{gap:5px}.character canvas{height:112px}.character strong{font-size:12px}.subtle{display:none}.room-panel{padding:15px}.party-member{width:110px}.controls>div{gap:15px}h1{font-size:54px}}@media(max-width:720px){header{padding:15px 14px}.top-right{gap:7px}.top-right #connection,.live-dot{display:none}main{padding:0 12px}.intro{padding:25px 0 22px;gap:12px}h1{font-size:37px;letter-spacing:2px}h1 span{font-size:6px;letter-spacing:2.6px;margin-top:11px}.intro .eyebrow{font-size:6px;letter-spacing:1.2px}.intro-copy h2{font-size:14px}.intro-copy p{font-size:10px;line-height:1.7}.setup{display:flex;flex-direction:column;gap:24px;padding:24px 0}.section-heading h2{font-size:19px}.eyebrow{font-size:8px}.character canvas{height:106px}.character{padding-bottom:12px}.character strong{font-size:11px}.character small{font-size:8px}.room-panel{padding:20px}.room-note{font-size:11px}.arena-top,.arena-bottom{padding:9px;font-size:8px;letter-spacing:.5px}.arena-banner{top:9%}.arena-banner p{font-size:9px}.little-rule{font-size:12px}.arena-banner h2{font-size:17px}.party{top:5px;right:5px;left:5px;gap:3px}.party-member{width:90px;font-size:8px;padding:3px}.bar{height:4px}.skill-hud{bottom:5px;right:5px;gap:4px}.skill-hud>div{font-size:8px;padding:4px;min-width:47px}.skill-hud b{font-size:9px}.controls{padding:20px 0}.controls>div{gap:14px 8px}.controls p{font-size:10px;line-height:1.9}.controls>div>span{font-size:10px}footer{font-size:8px;letter-spacing:.5px}.arena-bottom #ping{font-size:7px}.result .eyebrow{font-size:7px}.result p{font-size:11px}.result .primary{margin-top:12px;font-size:11px;padding:8px}.result h2{margin:10px 0}body.playing .controls{display:none}body.playing .game-shell{margin-top:12px}}
.volume{width:74px;height:24px;padding:0;background:transparent;border:0;accent-color:#e7c68b;cursor:pointer}.top-right{flex-wrap:wrap;justify-content:flex-end}.enemy-label{color:#cba88b}@media(max-width:720px){.volume{display:none}.top-right{gap:5px}.top-right .icon-button{font-size:10px;padding:6px}.brand{font-size:10px;gap:7px;letter-spacing:.7px}.brand-icon{width:30px;height:30px}header{gap:10px}}
.combat-callout{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid #74664f;background:#e7c68b0b;padding:14px 17px;margin-bottom:16px;color:#e7c68b;font-size:12px}.combat-callout span{color:#bfc6c8;font-size:11px}.combat-callout:hover{background:#e7c68b18}body.playing .combat-callout{display:none}@media(max-width:650px){.combat-callout{align-items:start;flex-direction:column;gap:6px;font-size:11px}}