:root{--ui-bg: #0d1526;--ui-bg-a: #0d1526ee;--ui-bg-soft: #0d1526cc;--ui-ink: #cfe0ff;--ui-ink-strong: #eaf2ff;--ui-accent: #ffd98a;--ui-edge: #2a3550;--ui-edge-soft: #a8c4d8;--ui-hover: #253851;--ui-primary-bg: #3a2c0f;--ui-danger: #e08a8a;--ui-error: #ff8a8a;--ui-badge: #e0483a;--ui-page-bg: #0b0f1a;--ui-hp-ok: #5ec26a;--ui-hp-mid: #e0a83a;--ui-hp-low: #e05a6a;--ui-mana: #4f9dff;--el-fire: #FF5A2C;--el-fire-glow: #FFC048;--el-ice: #5AD8FF;--el-ice-glow: #D6F5FF;--el-lightning: #B46CF0;--el-lightning-glow: #FFE24D;--el-earth: #B5752C;--el-earth-glow: #8FB34D;--ui-font-mono: ui-monospace, Menlo, Consolas, "Noto Sans Thai", "Sukhumvit Set", monospace;--ui-scale: 1.2;--u: calc(1px * var(--ui-scale));--edge: calc(var(--u) * 12);--safe-t: env(safe-area-inset-top, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--z-world-labels: 5;--z-hud: 10;--z-topbar: 20;--z-overlay: 1500;--z-panels: 2000;--z-toast: 2500;--z-modal: 3000;--z-fade: 4000;--z-debug: 4500}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--ui-page-bg);color:var(--ui-ink);font-family:var(--ui-font-mono)}#game{position:fixed;inset:0;width:100vw;height:100dvh;display:block;touch-action:none}#ui{position:fixed;inset:0;z-index:1;pointer-events:none}.ui-hit{pointer-events:auto}.ui-regions{position:fixed;inset:0;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto 1fr auto;padding:max(var(--edge),var(--safe-t)) max(var(--edge),var(--safe-r)) max(var(--edge),var(--safe-b)) max(var(--edge),var(--safe-l));pointer-events:none;z-index:var(--z-hud)}.ui-region{display:flex;flex-direction:column;gap:calc(var(--u) * 6);pointer-events:none;min-width:0}.ui-top-left{grid-area:1 / 1;align-items:flex-start}.ui-top-center{grid-area:1 / 2;align-items:center}.ui-top-right{grid-area:1 / 3;align-items:flex-end}.ui-bottom-left{grid-area:3 / 1;align-items:flex-start;justify-content:flex-end}.ui-bottom-center{grid-area:3 / 2;align-items:center;justify-content:flex-end}.ui-bottom-right{grid-area:3 / 3;align-items:flex-end;justify-content:flex-end}[data-ui=chat]{left:max(calc(var(--u) * 12),var(--safe-l))!important;bottom:max(calc(var(--u) * 56),calc(var(--safe-b) + var(--u) * 44))!important}[data-ui=roster]{right:max(calc(var(--u) * 12),var(--safe-r))!important}.ui-btn{pointer-events:auto;border:1px solid var(--ui-edge-soft);border-radius:calc(var(--u) * 8);padding:calc(var(--u) * 7) calc(var(--u) * 10);background:var(--ui-bg-a);color:var(--ui-ink-strong);font:calc(var(--u) * 13) var(--ui-font-mono);cursor:pointer;touch-action:manipulation}.ui-btn:hover,.ui-btn:focus-visible{background:var(--ui-hover);outline:2px solid var(--ui-accent);outline-offset:1px}.ui-btn--primary{background:var(--ui-primary-bg);border-color:var(--ui-accent)}.ui-btn--danger{color:var(--ui-danger);border-color:var(--ui-danger)}.ui-panel{background:var(--ui-bg-a);border:1px solid var(--ui-edge);border-radius:calc(var(--u) * 4);padding:calc(var(--u) * 8)}#stats{z-index:var(--z-debug)}.topbar{position:fixed;left:50%;top:max(calc(var(--u) * 44),var(--safe-t));transform:translate(-50%);display:flex;gap:calc(var(--u) * 8);z-index:var(--z-topbar);pointer-events:none}.topbar .ui-btn{min-height:44px;min-width:44px;font-size:calc(var(--u) * 13)}.topbar .ui-btn[hidden]{display:none}#book-toggle{font-size:calc(var(--u) * 18)}#book-toggle[aria-pressed=true]{background:#3a2f12;border-color:var(--ui-accent)}#book-toggle:disabled{opacity:.5;cursor:default}@media(max-width:420px){#sound-toggle,#rename-btn{font-size:0}#sound-toggle:first-letter,#rename-btn:first-letter{font-size:calc(var(--u) * 16)}}.sb{position:fixed;inset:0;z-index:var(--z-overlay);pointer-events:none}.sb[hidden]{display:none}.sb__backdrop{position:absolute;inset:0;background:#0a0e189e;pointer-events:auto}.sb__panel{position:absolute;inset:max(min(calc(var(--u) * 48),5vh),var(--safe-t)) max(min(calc(var(--u) * 60),5vw),var(--safe-r)) max(min(calc(var(--u) * 48),5vh),var(--safe-b)) max(min(calc(var(--u) * 60),5vw),var(--safe-l));display:grid;grid-template-rows:auto auto 1fr;background:#141a2bf5;border:calc(var(--u) * 2) solid rgb(79 157 255 / .6);border-radius:calc(var(--u) * 14);padding:calc(var(--u) * 16) calc(var(--u) * 22);color:var(--ui-ink);pointer-events:auto;overflow:hidden}.sb__head{display:flex;align-items:center;gap:calc(var(--u) * 10)}.sb__head h2{margin:0;font-size:calc(var(--u) * 20);color:var(--ui-ink-strong);flex:1;min-width:0}.sb__close-hint{font-size:calc(var(--u) * 12);color:#8f9fbf;white-space:nowrap}.sb__close{min-width:44px;min-height:44px;font-size:calc(var(--u) * 18)}.sb__legend{margin:calc(var(--u) * 10) 0 calc(var(--u) * 12);font-size:calc(var(--u) * 13);line-height:1.6;color:#cfe0ff}.sb__legend-chips{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 14)}.sb__legend-chip{display:inline-flex;align-items:center;gap:calc(var(--u) * 6)}.sb__scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffd86bd9 #ffffff14;padding-right:calc(var(--u) * 6);outline:none}.sb__scroll::-webkit-scrollbar{width:calc(var(--u) * 6)}.sb__scroll::-webkit-scrollbar-track{background:#ffffff14}.sb__scroll::-webkit-scrollbar-thumb{background:#ffd86bd9;border-radius:3px}.sb__group{margin-bottom:calc(var(--u) * 10)}.sb__group h3{margin:calc(var(--u) * 8) 0;font-size:calc(var(--u) * 16);color:#ffd86b}.sb__grid{display:grid;grid-template-columns:repeat(auto-fill,min(100%,calc(var(--u) * 300)));gap:calc(var(--u) * 14);justify-content:center}.sb__more{position:absolute;left:50%;bottom:calc(var(--u) * 8);transform:translate(-50%);font-size:calc(var(--u) * 12);color:#ffd86b;background:#141a2be6;padding:calc(var(--u) * 3) calc(var(--u) * 10);border-radius:calc(var(--u) * 8);pointer-events:none}.sb__more[hidden]{display:none}.sb-card{--card-accent: var(--el-fire);position:relative;min-height:calc(var(--u) * 108);box-sizing:border-box;padding:calc(var(--u) * 10) calc(var(--u) * 12) calc(var(--u) * 10) calc(var(--u) * 18);background:#1c2438fa;border:calc(var(--u) * 2.5) solid var(--card-accent);border-radius:calc(var(--u) * 12);display:grid;gap:calc(var(--u) * 5);align-content:start}.sb-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--u) * 6);border-radius:calc(var(--u) * 9) 0 0 calc(var(--u) * 9);background:var(--card-accent)}.sb-card__top{display:flex;align-items:center;gap:calc(var(--u) * 8);min-width:0}.sb-card__combo{display:flex;gap:calc(var(--u) * 4)}.sb-card__name{font-size:calc(var(--u) * 16);font-weight:700;color:#f0e6d2;min-width:0}.sb-card__desc{font-size:calc(var(--u) * 12);color:#aab6cc;line-height:1.35}.sb-card__badges{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 6)}.sb-badge{font-size:calc(var(--u) * 12);background:#0e1020;padding:calc(var(--u) * 3) calc(var(--u) * 6);border-radius:calc(var(--u) * 5)}.sb-badge--dmg{color:#ff8a5a}.sb-badge--cd{color:#7fd4ff}.sb-badge--mana{color:#4f9dff}.sb-badge--key{color:var(--ui-accent);border:1px solid var(--ui-accent)}.sb-chip{position:relative;width:calc(var(--u) * 30);height:calc(var(--u) * 30);border:calc(var(--u) * 2) solid var(--chip-color, #888);border-radius:calc(var(--u) * 6);background:#0e1020d9;display:grid;place-items:center;font-size:calc(var(--u) * 14)}.sb-orb{width:86%;height:86%;background-image:url(/assets/element_orbs.png);background-size:400% 100%;background-position-x:calc(var(--frame) * 33.333%)}.sb-key{position:absolute;right:calc(var(--u) * -4);bottom:calc(var(--u) * -4);font-size:calc(var(--u) * 11);font-weight:700;background:#0e1020;color:#fff;padding:0 calc(var(--u) * 3);border-radius:calc(var(--u) * 3)}@media(max-width:600px){.sb__panel{padding:calc(var(--u) * 12) calc(var(--u) * 12)}.sb__head h2{font-size:calc(var(--u) * 15)}.sb__close-hint{display:none}.sb__legend{font-size:calc(var(--u) * 11)}}@media(prefers-reduced-motion:no-preference){.sb:not([hidden]) .sb__panel{animation:sb-in .12s ease-out}.sb-card{transition:transform .12s,box-shadow .12s}.sb-card:hover{transform:translateY(calc(var(--u) * -1));box-shadow:0 4px 14px color-mix(in srgb,var(--card-accent) 30%,transparent)}}@keyframes sb-in{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.notify{position:fixed;left:0;right:0;top:0;z-index:var(--z-toast);pointer-events:none;display:flex;flex-direction:column;align-items:center}.notify__banners{width:100%;display:flex;flex-direction:column}.notify-banner{display:flex;align-items:center;gap:calc(var(--u) * 8);padding:max(calc(var(--u) * 6),var(--safe-t)) max(calc(var(--u) * 12),var(--safe-r)) calc(var(--u) * 6) max(calc(var(--u) * 12),var(--safe-l));font:calc(var(--u) * 13) var(--ui-font-mono);white-space:pre-line}.notify-banner--error{background:#5a1620f0;color:#ffd6d6;border-bottom:1px solid var(--ui-error)}.notify-banner--warn{background:#4a3a10f0;color:#ffe9b0;border-bottom:1px solid var(--ui-accent)}.notify-banner__text{flex:1}.notify__toasts{margin-top:calc(var(--u) * 100);display:flex;flex-direction:column;gap:calc(var(--u) * 6);align-items:center}.notify-toast{display:flex;gap:calc(var(--u) * 8);align-items:flex-start;max-width:min(90vw,calc(var(--u) * 360));padding:calc(var(--u) * 8) calc(var(--u) * 10);background:var(--ui-bg-a);border:1px solid var(--ui-edge-soft);border-radius:calc(var(--u) * 8);color:var(--ui-ink);font:calc(var(--u) * 12) var(--ui-font-mono);white-space:pre-line}.notify-toast--achievement{border:2px solid var(--ui-accent);box-shadow:0 0 14px #ffd98a59}.notify-toast__icon{font-size:calc(var(--u) * 20)}.notify-toast__title{font-weight:700;color:var(--ui-ink-strong)}.notify__close{background:none;border:none;color:inherit;cursor:pointer;font:inherit}@media(prefers-reduced-motion:no-preference){.notify-toast{animation:notify-in .18s ease-out}}@keyframes notify-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.settings-backdrop{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:max(var(--edge),var(--safe-t)) max(var(--edge),var(--safe-r)) max(var(--edge),var(--safe-b)) max(var(--edge),var(--safe-l));background:#0006;pointer-events:auto}.settings-backdrop[hidden]{display:none}.settings{width:min(calc(var(--u) * 360),100%);max-height:100%;overflow-y:auto;box-sizing:border-box;padding:calc(var(--u) * 14);border-radius:calc(var(--u) * 10);color:var(--ui-ink);font:calc(var(--u) * 13) var(--ui-font-mono);box-shadow:0 8px 32px #0009}.settings__head{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 8);margin-bottom:calc(var(--u) * 6)}.settings__title{margin:0;font-size:calc(var(--u) * 16);color:var(--ui-ink-strong)}.settings__row{display:flex;flex-direction:column;gap:calc(var(--u) * 6);padding:calc(var(--u) * 10) 0;border-top:1px solid var(--ui-edge)}.settings__row--inline{flex-direction:row;align-items:center;justify-content:space-between;gap:calc(var(--u) * 10)}.settings__label{color:var(--ui-ink-strong)}.settings__hint{color:var(--ui-edge-soft);font-size:calc(var(--u) * 11);line-height:1.4;min-height:1.4em}.settings__seg{display:flex;gap:calc(var(--u) * 4)}.settings__seg .ui-btn{flex:1 1 0;min-height:44px;padding-inline:calc(var(--u) * 4)}.settings .ui-btn[aria-checked=true]{background:var(--ui-primary-bg);border-color:var(--ui-accent);color:var(--ui-accent)}.settings__switch{min-width:calc(var(--u) * 64);min-height:44px}.settings__close{min-width:44px;min-height:44px}.lb{width:calc(var(--u) * 200);background:#1a2233b8;border:1px solid rgb(79 157 255 / .5);border-radius:calc(var(--u) * 6);padding:calc(var(--u) * 4) calc(var(--u) * 8);font:calc(var(--u) * 12) var(--ui-font-mono);color:#e6ecf5;pointer-events:none}.lb__head{display:flex;align-items:center;justify-content:space-between;color:#ffd86b;font-size:calc(var(--u) * 13);height:calc(var(--u) * 22)}.lb__toggle{display:none}.lb ol{list-style:none;margin:0;padding:0}.lb li{display:flex;gap:calc(var(--u) * 4);align-items:baseline;height:calc(var(--u) * 18)}.lb li[hidden]{display:none}.lb-rank{width:calc(var(--u) * 18);flex:none}.lb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-score{font-variant-numeric:tabular-nums;flex:none}.lb-me{flex:none}.lb li.is-bot{color:#8a94a6}.lb li.is-me{color:#7fd4ff}.lb li[data-team=red]{color:var(--team-red)}.lb li[data-team=blue]{color:var(--team-blue)}.team-sb{width:calc(var(--u) * 230);box-sizing:border-box;text-align:center;background:#0d1526cc;border:1px solid rgb(168 196 216 / .5);border-radius:calc(var(--u) * 8);padding:calc(var(--u) * 4) calc(var(--u) * 8);font-family:var(--ui-font-mono);pointer-events:none;margin-top:calc(max(calc(var(--u) * 44),var(--safe-t)) + 48px + var(--u) * 6 - max(var(--edge),var(--safe-t)))}.team-sb[data-mine=red]{border:2px solid color-mix(in srgb,var(--team-red) 90%,transparent)}.team-sb[data-mine=blue]{border:2px solid color-mix(in srgb,var(--team-blue) 90%,transparent)}.team-sb__score{font-size:calc(var(--u) * 18);font-weight:700;text-shadow:0 0 3px #000,0 0 3px #000;color:#e6ecf5}.team-sb__score .red{color:var(--team-red);display:inline-block}.team-sb__score .blue{color:var(--team-blue);display:inline-block}.team-sb__count{font-size:calc(var(--u) * 11);color:#cdd7e6}.team-sb__mine{font-size:calc(var(--u) * 11)}.team-sb__mine[data-team=red]{color:var(--team-red)}.team-sb__mine[data-team=blue]{color:var(--team-blue)}@media(prefers-reduced-motion:no-preference){.team-sb__score span{transition:transform .25s}.team-sb__score span.bump{transform:scale(1.15)}}@media(max-width:720px){.lb{width:calc(var(--u) * 160)}.lb__toggle{display:inline-block;pointer-events:auto;background:none;border:none;color:#ffd86b;font:inherit;cursor:pointer;min-width:32px}.lb.is-collapsed ol,.team-sb__mine{display:none}}.combo{--combo-slot: calc(var(--u) * 46);display:flex;gap:calc(var(--u) * 8);pointer-events:none}.combo__slot{--c: #888;width:var(--combo-slot);height:var(--combo-slot);box-sizing:border-box;display:grid;place-items:center;border-radius:calc(var(--u) * 10);background:#0e1020b8;border:calc(var(--u) * 2.5) solid var(--c)}.combo__slot[hidden]{display:none}.combo__slot[data-el=fire]{--c: var(--el-fire)}.combo__slot[data-el=ice]{--c: var(--el-ice)}.combo__slot[data-el=lightning]{--c: var(--el-lightning)}.combo__slot[data-el=earth]{--c: var(--el-earth)}.combo__orb{width:84%;height:84%;background:url(/assets/element_orbs.png) 0 0 / 400% 100% no-repeat;background-position-x:calc(var(--frame, 0) * 33.333%)}@media(prefers-reduced-motion:no-preference){.combo__slot.is-new{animation:combo-pop .12s ease-out}}@keyframes combo-pop{0%{transform:scale(.7)}to{transform:scale(1)}}@media(max-width:600px){.combo{--combo-slot: calc(var(--u) * 28);gap:calc(var(--u) * 4)}}