:root{font-family:Nunito,Noto Sans Thai,Arial,Helvetica,sans-serif;color:#eef4ff;background:#070b22;font-synthesis:none;--bg-deep: #070b22;--panel: #0e1438;--panel-hi: #141a44;--panel-lo: #0b1030;--glass: linear-gradient(150deg, #161d4ceb, #0b1030f0);--glass-soft: #0b1030b8;--panel-border: #6f9bff47;--panel-border-strong: #8fb4ff8c;--line: #8fb4ff24;--glow: #3c6dff;--cyan: #5fe3ff;--sky: #8fd8ff;--blue: #3c6dff;--violet: #9b5cff;--violet-soft: #c7a6ff;--gold: #ffd36a;--gold-deep: #b9811f;--text: #eef4ff;--text-soft: #c9d6f2;--muted: #98a8d4;--hp: linear-gradient(#ff5a64, #d31f33 60%, #a3142a);--en: linear-gradient(#5fb4ff, #2a6cf0 60%, #1d4fc4);--danger: #ff4d5e;--creature: #ff9a8a;--self: #e6fbff;--slot: linear-gradient(#c8d4ff33, #8fa2e01f);--slot-border: #dbe5ff40;--tile: linear-gradient(#232f7ae6, #121a4ef0);--tile-border: #7ea6ff73}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}svg{width:22px;height:22px;flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#game{position:fixed;top:0;right:0;bottom:0;left:0;touch-action:none}#game canvas{display:block}.hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.hud>*{pointer-events:auto}.region-label,.field-hint{pointer-events:none!important}.glass{background:var(--glass);border:1px solid var(--panel-border);box-shadow:0 6px 24px #02041659,0 0 16px #3c6dff17,inset 0 1px #9fc0ff1f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:8px}.region-label{position:absolute;top:96px;left:0;right:0;text-align:center;text-shadow:0 2px 9px #04061a,0 0 18px #3c6dff73;opacity:0}.region-label.arrive{animation:region-arrive 5.2s cubic-bezier(.2,.7,.2,1) both}@keyframes region-arrive{0%{opacity:0;transform:translateY(-14px);filter:blur(3px)}14%{opacity:1;transform:none;filter:none}78%{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}}@keyframes region-static{0%,99%{opacity:1}to{opacity:0}}.region-label>span{font-size:10px;font-weight:700;letter-spacing:3px;color:var(--cyan)}body[data-zone=town] .region-label>span{color:var(--violet-soft)}.region-label h1{font: 32px Georgia,serif;margin:6px 0;color:#f4f8ff}.region-label p{font-size:12px;color:var(--text-soft);display:flex;justify-content:center;align-items:center;gap:6px;margin:0}.region-label svg{width:14px;height:14px;color:var(--cyan)}.target-panel{position:absolute;left:50%;top:36px;transform:translate(-50%);width:240px;padding:10px 16px;border-color:#ff6b7a59}.eyebrow{color:var(--cyan);letter-spacing:2px;font-size:8px}.target-panel .eyebrow{color:#ffa3ad}.target-panel>div:not(.target-meter){display:flex;align-items:center;justify-content:space-between;margin-top:6px;font-size:13px}.target-panel b{font-weight:700}.level{font-size:10px;font-weight:700;color:var(--gold)}.target-meter{height:5px;border-radius:4px;background:#050822;margin-top:8px}.target-meter i{display:block;height:100%;background:var(--hp);box-shadow:0 0 6px #ff4d5e80;border-radius:4px}.target-panel small{display:block;text-align:center;font-size:9px;color:var(--text-soft);margin-top:5px}.objectives p{font-size:9px;color:var(--muted);margin:8px 0 10px}#objective-body{border-top:1px solid var(--line);margin-top:5px}.objective{display:flex;gap:8px;margin-bottom:10px;align-items:center}.step-check{border:1px solid #6f9bff66;width:17px;height:17px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:8px;color:var(--muted);flex-shrink:0}.objective b{font-weight:700;font-size:10px;display:block;color:var(--text)}.objective small{font-size:8px;display:block;margin-top:3px;color:var(--muted)}.objective.complete .step-check{background:#5fe3ff26;border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 8px #5fe3ff4d;font-size:0}.objective.complete .step-check:after{content:"✓";font-size:10px}.objective.complete b{color:#a8efff}.objective-progress{height:2px;background:#8fb4ff24;margin-bottom:4px}.objective-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 6px #5fe3ff80;transition:width .4s}.collapsed{display:none}.journal{position:absolute;left:6px;bottom:66px;width:300px;padding:7px 10px 8px;border-radius:8px;background:linear-gradient(90deg,#0b1030c7,#0b103059)}.journal-heading{display:flex;gap:5px;font-size:8px;font-weight:700;letter-spacing:1.2px;color:var(--sky)}body[data-zone=town] #field-chip-label{color:var(--violet-soft)}.journal-heading i{font-style:normal;opacity:.6}#kill-count{margin-left:auto;color:var(--muted);letter-spacing:0}.journal p{font-size:10px;line-height:1.55;color:var(--text-soft);margin:3px 0 0}.journal time{font-size:8px;font-weight:700;color:var(--cyan);letter-spacing:.6px;padding-right:4px}.action-hint{text-align:center;font-size:11px;text-shadow:0 2px 5px #04061a,0 0 8px #04061a;color:var(--text);white-space:nowrap}.action-hint i,.deck-caption i{font-style:normal;opacity:.6;padding:0 6px}.mouse-symbol{font-size:16px;vertical-align:-1px;margin-right:3px;color:var(--cyan)}.selected-dot{display:inline-block;background:var(--danger);box-shadow:0 0 6px var(--danger);width:6px;height:6px;border-radius:50%;margin-right:5px}.deck-caption{margin:4px 0 44px;padding:2px 10px;border-radius:9px;background:#0b103099;font-size:9px;font-weight:700;letter-spacing:1.2px;color:var(--sky);white-space:nowrap}.deck-caption span:last-child{letter-spacing:.3px;font-weight:400;color:var(--text-soft)}kbd{font-family:Arial;font-size:9px;font-weight:700;color:var(--text);position:absolute;top:-5px;left:-4px;min-width:15px;line-height:14px;padding:0 2px;text-align:center;background:var(--panel-lo);border:1px solid #8fb4ff80;border-radius:4px;box-shadow:0 2px 4px #020416;z-index:3}.energy-cost{font-size:9px;font-weight:700;position:absolute;right:4px;bottom:2px;color:#9fdcff}.cooldown{display:none;position:absolute;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;background:#070b22c4;font-size:15px;font-weight:700;color:var(--text);border-radius:7px}.cooldown.active{display:flex}.low-energy{filter:saturate(.3)}.auto-status{position:absolute;left:50%;bottom:178px;transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:9px 16px;border:1px solid #5fe3ff73;border-radius:8px;background:#0e1a4ae0;box-shadow:0 0 16px #5fe3ff2e;color:#bff3ff}.auto-status b{font-size:9px;letter-spacing:1.6px;display:block}.auto-status span{font-size:9px;display:block;margin-top:4px;color:var(--text-soft)}#toast{position:fixed;top:29%;left:50%;transform:translate(-50%,-8px);padding:11px 20px;background:#0e1438f5;border:1px solid #5fe3ff8c;box-shadow:0 0 20px #3c6dff40;border-radius:8px;font-size:12px;color:var(--text);opacity:0;transition:.2s;pointer-events:none;z-index:30}#toast.visible{opacity:1;transform:translate(-50%)}.connection-cover,#death-cover{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;z-index:40;background:#05082277;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#death-cover{background:radial-gradient(circle,#3a0d2a66,#05082299 70%)}.connection-cover>.glass,#death-cover>.glass{padding:35px 50px;text-align:center;max-width:90vw}.brand-mark{color:var(--cyan);display:inline-flex;filter:drop-shadow(0 0 6px #5fe3ff80)}.brand-mark svg{width:40px;height:40px;stroke-width:1}.connection-cover .brand-mark{margin:auto}.connection-cover.warping{background:radial-gradient(circle at 50% 50%,#9b5cff59 0,#3c6dff33 28%,transparent 60%),#050822b3;animation:warp-cover-in .3s ease .6s both,warp-glow 2.4s ease-in-out .9s infinite alternate}@keyframes warp-cover-in{0%{opacity:0}to{opacity:1}}.connection-cover.warping>.glass{border-color:#b48cff80;box-shadow:0 0 40px #9b5cff4d,0 0 90px #5fe3ff1f,inset 0 1px #d6c2ff33}.connection-cover.warping .brand-mark{position:relative;color:var(--violet-soft);filter:drop-shadow(0 0 10px #9b5cffcc)}.connection-cover.warping .brand-mark:before,.connection-cover.warping .brand-mark:after{content:"";position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px;border-radius:50%;border:2px solid var(--cyan);box-shadow:0 0 12px #5fe3ff99,inset 0 0 10px #9b5cff80;animation:warp-ring 1.6s ease-out infinite}.connection-cover.warping .brand-mark:after{border-color:var(--violet-soft);animation-delay:.8s}.connection-cover.warping .brand-mark svg{animation:warp-spin 3s linear infinite}.connection-cover.warping h2{color:#f1e9ff;text-shadow:0 0 18px #9b5cffaa,0 0 36px #5fe3ff40}@keyframes warp-ring{0%{transform:scale(.7);opacity:.9}to{transform:scale(1.9);opacity:0}}@keyframes warp-spin{to{transform:rotate(360deg)}}@keyframes warp-glow{0%{background-color:#050822b3}to{background-color:#0b0a33b3}}h2{font: 30px Georgia,serif;color:#f2f6ff;text-shadow:0 0 18px #3c6dff66;margin:12px 0 24px}.connection-cover p,#death-cover p{font-size:12px;color:var(--text-soft)}.connection-cover button,#death-cover button,.logout-button{background:linear-gradient(#2c4fd6,#1a2f8f);border:1px solid #78a8ffaa;border-radius:6px;padding:11px 20px;margin-top:12px;color:#fff;box-shadow:0 0 14px #3c6dff4d}.connection-cover button:hover,#death-cover button:hover,.logout-button:hover{filter:brightness(1.15)}.logout-button{margin-top:16px}[hidden]{display:none!important}dialog{background:linear-gradient(150deg,#161d4c,#0b1030);color:var(--text);border:1px solid var(--panel-border-strong);box-shadow:0 20px 100px #020416cc,0 0 40px #3c6dff33,inset 0 1px #9fc0ff26;border-radius:12px;width:min(740px,92vw);padding:38px;max-height:85dvh;overflow:auto;scrollbar-color:#3c6dff80 transparent}dialog::backdrop{background:#04061a80;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.close-button{position:absolute;top:18px;right:18px;background:none;color:var(--muted)}.close-button:hover{color:var(--cyan)}.close-button svg{width:18px;height:18px}.character-sheet{display:grid;grid-template-columns:190px 1fr;gap:28px;align-items:center}.character-sheet>img{width:190px;max-height:280px;object-fit:contain;filter:drop-shadow(0 0 20px #5fe3ff2e)}.character-sheet p{font-size:13px;line-height:1.7;color:var(--text-soft)}.character-sheet dl{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:12px}.character-sheet dt{color:var(--muted)}.character-sheet dd{text-align:right;margin:0;color:var(--text)}.muted{font-size:10px;line-height:1.8;color:var(--muted);margin-top:25px}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.guide-grid svg{color:var(--cyan);filter:drop-shadow(0 0 6px #5fe3ff66)}.guide-grid h3{font: 18px Georgia,serif;margin:10px 0}.guide-grid p{color:var(--text-soft);font-size:12px;line-height:1.8}.setting{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:22px 0}.setting b{display:block;font-size:13px;font-weight:500}.setting small{display:block;color:var(--muted);font-size:11px;margin-top:8px}.setting input{width:20px;height:20px;accent-color:var(--blue)}.setting-note{padding:18px;border:1px solid var(--line);background:#3c6dff0f;font-size:12px;line-height:1.7;color:var(--text-soft);border-radius:6px}#large-map{width:100%;height:auto;border-radius:8px;border:1px solid var(--panel-border);box-shadow:0 0 20px #3c6dff26}.map-legend{display:flex;justify-content:space-between;font-size:10px;color:var(--text-soft);margin-top:16px}.small-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px}.green{background:var(--self);box-shadow:0 0 5px var(--cyan)}.orange{background:var(--creature);box-shadow:0 0 5px #ff6b7a99}.violet{background:var(--violet-soft);box-shadow:0 0 5px var(--violet)}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}*,*:before,*:after{animation:none!important}.region-label.arrive{animation:region-static 4.5s step-end both!important}.connection-cover.warping .brand-mark:before{transform:scale(1.25);opacity:.8}.connection-cover.warping .brand-mark:after{display:none}}:root{--kind-attack: linear-gradient(150deg, #3a120c, #8a2f17);--kind-buff: linear-gradient(150deg, #0b2350, #1f5fb8);--kind-debuff: linear-gradient(150deg, #1f0d3d, #5a2aa0);--kind-heal: linear-gradient(150deg, #06352a, #178a62);--rarity-common: #9aa3b5;--rarity-normal: #5fd068;--rarity-epic: #b45cff;--rarity-rare: #ffc53d;--rarity-legendary: #ff7b1c}.sk-tile,.it-tile{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:7px;font-weight:900;font-size:13px;letter-spacing:.04em;color:#fff;text-shadow:0 1px 1px #0009;box-shadow:inset 0 0 0 1px #ffffff40}.sk-tile.kind-attack{background:var(--kind-attack)}.sk-tile.kind-buff{background:var(--kind-buff)}.sk-tile.kind-debuff{background:var(--kind-debuff)}.sk-tile.kind-heal{background:var(--kind-heal)}.it-tile{background:linear-gradient(150deg,#2b3a86,#121a4e);box-shadow:inset 0 0 0 2px var(--frame, var(--rarity-common))}.it-tile.empty{background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff26}.rarity-common{--frame: var(--rarity-common)}.rarity-normal{--frame: var(--rarity-normal)}.rarity-epic{--frame: var(--rarity-epic)}.rarity-rare{--frame: var(--rarity-rare)}.rarity-legendary{--frame: var(--rarity-legendary)}.icon-tile{position:relative;overflow:hidden}.tile-icon{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;border-radius:inherit;image-rendering:auto;pointer-events:none}.icon-tile:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid var(--frame, var(--rarity-common));border-radius:inherit;box-shadow:inset 0 0 6px color-mix(in srgb,var(--frame, var(--rarity-common)) 55%,transparent);pointer-events:none}.icon-tile.rarity-epic{box-shadow:0 0 6px color-mix(in srgb,var(--frame) 75%,transparent)}.icon-tile.rarity-rare{box-shadow:0 0 6px var(--frame),0 0 10px color-mix(in srgb,var(--frame) 45%,transparent)}.icon-tile.rarity-legendary{box-shadow:0 0 7px var(--frame),0 0 14px color-mix(in srgb,var(--frame) 60%,transparent);animation:legendary-glow 2.4s ease-in-out infinite}@keyframes legendary-glow{50%{box-shadow:0 0 9px var(--frame),0 0 20px color-mix(in srgb,var(--frame) 70%,transparent)}}@media(prefers-reduced-motion:reduce){.icon-tile.rarity-legendary{animation:none}}.comparison-tag{display:inline-flex;align-items:center;gap:3px;vertical-align:middle}.gear-windows .comparison-tag .icon-tile{width:18px;height:18px;font-size:7px}.bar-slot .glyph .sk-tile{width:78%;height:78%;border-radius:calc(var(--s) * 5px);font-size:calc(var(--s) * 12px)}.bar-slot.empty .glyph{display:none}.bar-slot .auto-mark{position:absolute;right:calc(var(--s) * -3px);bottom:calc(var(--s) * -3px);min-width:calc(var(--s) * 12px);height:calc(var(--s) * 12px);display:flex;align-items:center;justify-content:center;border-radius:calc(var(--s) * 3px);background:#ffd36a;color:#2a1a00;font-size:calc(var(--s) * 8px);font-weight:900;font-style:normal;line-height:1}.bar-slot kbd{top:calc(var(--s) * -6px);left:calc(var(--s) * -5px);min-width:calc(var(--s) * 13px);padding:0 calc(var(--s) * 2px);font-size:calc(var(--s) * 9px);line-height:calc(var(--s) * 13px);border-radius:calc(var(--s) * 3px)}.bar-slot .cooldown{border-radius:calc(var(--s) * 5px);font-size:calc(var(--s) * 11px)}.bar-slot:disabled:not(.empty) .glyph{filter:grayscale(.7) brightness(.7)}.bar-slot.small kbd{top:calc(var(--s) * -5px);left:calc(var(--s) * -4px);min-width:calc(var(--s) * 11px);padding:0 calc(var(--s) * 1.5px);font-size:calc(var(--s) * 7.5px);line-height:calc(var(--s) * 11px)}.bar-slot.small .glyph .sk-tile{font-size:calc(var(--s) * 10px)}.bar-slot.small .auto-mark{min-width:calc(var(--s) * 10px);height:calc(var(--s) * 10px);font-size:calc(var(--s) * 7px)}.bar-slot.small .cooldown{font-size:calc(var(--s) * 9px)}.effect-row{display:flex;flex-wrap:wrap-reverse;justify-content:flex-end;align-content:flex-end;gap:3px}.effect-row:empty{display:none}.effect-icon{position:relative;display:inline-flex}.effect-icon .sk-tile{width:22px;height:22px;font-size:8px;border-radius:5px}.effect-icon b{position:absolute;left:50%;bottom:-6px;transform:translate(-50%);padding:0 2px;border-radius:3px;background:#070b22d9;font-size:8px;font-weight:800;line-height:1.2;white-space:nowrap}.effect-row.self .effect-icon .sk-tile{width:calc(var(--s) * 22px);height:calc(var(--s) * 22px);font-size:calc(var(--s) * 8px)}.effect-row.self .effect-icon b{font-size:max(8px,calc(var(--s) * 8px))}#target-effects{justify-content:center;margin-top:8px;padding-bottom:4px}.gear-windows{--gear-scale: 1;--gear-paper: #fffdf2;--gear-frame: #b4b3ee;--gear-frame-edge: #858ed3;--gear-title: #c7c8f6;--gear-section: #d8e7fd;--gear-text: #24345c;--gear-muted: #626e89;--gear-line: #d1d3dc;--gear-well: #fffff8;--gear-tab: #e8e8fc;--gear-button: #eeedff;--gear-selected: #aebeff;--gear-close: #e55f73;--gear-close-edge: #b64b61;--gear-white: #ffffff;--gear-hp: #ec5b73;--gear-en: #4e73df;--gear-exp: #bbb5e7;--gear-positive: #237640;--gear-negative: #b23449;--gear-icon-bed: linear-gradient(#111a38, #080e23);--gear-shadow: 0 3px 12px #16224333;--gear-gem: linear-gradient( 135deg, #fafbff, #c6d6ff 40%, #a5a7df 65%, #eff5ff );--gear-pad: calc(7px * var(--gear-scale));--gear-cell: calc(36px * var(--gear-scale));position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;pointer-events:none;color:var(--gear-text);font-family:Noto Sans Thai,Nunito,Arial,sans-serif;font-size:max(10px,calc(11px * var(--gear-scale)))}.gear-window,.gear-popover{pointer-events:auto;position:absolute;border:1px solid var(--gear-frame-edge);border-radius:calc(5px * var(--gear-scale));padding:calc(4px * var(--gear-scale));background:var(--gear-frame);color:var(--gear-text);box-shadow:var(--gear-shadow)}.gear-window{display:flex;flex-direction:column;max-width:calc(100vw - 24px);max-height:calc(100dvh - 120px * var(--gear-scale))}.gear-window[hidden],.gear-popover[hidden]{display:none!important}.gear-stats{width:calc(380px * var(--gear-scale));height:calc(600px * var(--gear-scale))}.gear-character{width:calc(290px * var(--gear-scale));height:auto}.gear-inventory{width:calc(300px * var(--gear-scale));height:calc(360px * var(--gear-scale))}.gear-character .window-body{flex:0 1 auto}.gear-inventory .window-body{display:flex;flex-direction:column;overflow:hidden}.gear-inventory .window-body>:not(.bag-grid){flex-shrink:0}.gear-skills{width:calc(360px * var(--gear-scale));height:calc(430px * var(--gear-scale))}.window-handle{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:calc(25px * var(--gear-scale));padding:0 calc(3px * var(--gear-scale)) 0 calc(35px * var(--gear-scale));background:var(--gear-title);cursor:grab;touch-action:none;flex-shrink:0}.window-handle:active{cursor:grabbing}.window-handle h2{margin:0;min-width:0;display:flex;align-items:center;gap:calc(5px * var(--gear-scale));font:inherit;font-size:max(12px,calc(13px * var(--gear-scale)));font-weight:800}.window-caption{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.window-handle kbd{position:static;padding:0;background:none;border:0;box-shadow:none;font:inherit;font-size:10px;color:var(--gear-muted)}.window-badge{position:absolute;left:calc(-7px * var(--gear-scale));top:calc(-8px * var(--gear-scale));width:calc(35px * var(--gear-scale));height:calc(35px * var(--gear-scale));display:grid;place-items:center;background:var(--gear-gem);border:2px solid var(--gear-white);border-radius:9px;rotate:-12deg;box-shadow:0 0 0 1px var(--gear-frame-edge)}.window-badge svg{width:70%;height:70%;color:var(--gear-frame-edge);stroke-width:2;rotate:12deg}.avatar-badge{border-radius:50%;rotate:0deg;width:calc(40px * var(--gear-scale));height:calc(40px * var(--gear-scale))}.avatar-badge img{width:82%;height:82%;object-fit:cover;border-radius:50%}.window-close,.gear-windows [data-popover-close]{position:relative;display:grid;place-items:center;padding:0;width:calc(20px * var(--gear-scale));height:calc(20px * var(--gear-scale));min-width:calc(20px * var(--gear-scale));min-height:calc(20px * var(--gear-scale));border:0;border-radius:50%;background:none;color:var(--gear-white);flex-shrink:0}.window-close:before,.gear-windows [data-popover-close]:before{content:"";position:absolute;width:calc(15px * var(--gear-scale));height:calc(15px * var(--gear-scale));background:var(--gear-close);border:1px solid var(--gear-close-edge);border-radius:50%}.window-close svg,.gear-windows [data-popover-close] svg{position:relative;width:calc(10px * var(--gear-scale));height:calc(10px * var(--gear-scale));stroke-width:2}.window-body{padding:var(--gear-pad);overflow:auto;min-height:0;flex:1;background:var(--gear-paper);scrollbar-color:var(--gear-frame-edge) var(--gear-paper)}.phone-window-tabs{display:none}.gear-windows button,.gear-windows select,.gear-windows summary{touch-action:manipulation}.gear-windows button:focus-visible,.gear-windows select:focus-visible,.gear-windows summary:focus-visible,.window-handle:focus-visible{outline:2px solid var(--gear-frame-edge);outline-offset:1px}.gear-windows .icon-action,.gear-windows .skill-controls button,.gear-windows .card-actions button,.bag-filters button{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-height:calc(24px * var(--gear-scale));min-width:calc(24px * var(--gear-scale));padding:calc(3px * var(--gear-scale)) calc(6px * var(--gear-scale));border:1px solid var(--gear-line);border-radius:3px;background:var(--gear-button);color:var(--gear-text);font:inherit;font-weight:600}.gear-windows .icon-action svg{width:calc(14px * var(--gear-scale));height:calc(14px * var(--gear-scale))}.gear-windows [data-popover-close]{background:none;border:0;border-radius:50%;padding:0}.gear-windows .hint,.gear-windows .muted{color:var(--gear-muted);font-size:inherit;line-height:1.4}.gear-windows .hint{margin:0 0 5px}.gear-windows select{width:100%;min-width:0;min-height:calc(24px * var(--gear-scale));padding:2px 4px;font:inherit;border:1px solid var(--gear-line);border-radius:2px;color:var(--gear-text);background:var(--gear-well)}.gear-windows .selected,.gear-windows .drop-target{border-color:var(--gear-frame-edge);box-shadow:inset 0 0 0 1px var(--gear-selected)}.gear-windows .paper-tabs{display:flex;gap:3px;margin-bottom:4px;padding:0;border-bottom:1px solid var(--gear-frame)}.gear-windows .paper-tabs button{min-height:calc(22px * var(--gear-scale));padding:2px calc(9px * var(--gear-scale));border:1px solid var(--gear-frame);border-bottom:0;border-radius:4px 4px 0 0;background:var(--gear-tab);color:var(--gear-text);font:inherit;font-size:max(10px,calc(11px * var(--gear-scale)))}.gear-windows .paper-tabs [aria-selected=true]{background:var(--gear-paper);font-weight:700}.gear-windows .section-strip{min-height:calc(18px * var(--gear-scale));margin:calc(5px * var(--gear-scale)) 0 calc(3px * var(--gear-scale));padding:2px 4px;border-radius:2px;background:var(--gear-section);color:var(--gear-text);font:inherit;font-weight:700}.info-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(10px * var(--gear-scale));margin:0}.info-rows>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:4px;min-width:0;min-height:calc(17px * var(--gear-scale));line-height:1.45}.info-rows dt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:max(10px,calc(10.5px * var(--gear-scale)))}.info-rows dd{margin:0;max-width:calc(110px * var(--gear-scale));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;font:inherit;font-variant-numeric:tabular-nums}.info-section{margin-bottom:3px}.gear-windows .character-vitals{display:grid;gap:calc(3px * var(--gear-scale));margin:5px 0}.gear-windows .vital-row{display:flex;align-items:center;gap:5px;font-size:max(10px,calc(10.5px * var(--gear-scale)))}.gear-windows .vital-row>span{width:calc(32px * var(--gear-scale));flex-shrink:0}.gear-windows .vital-track{position:relative;height:calc(13px * var(--gear-scale));min-height:12px;flex:1;border:1px solid var(--gear-line);overflow:hidden;background:var(--gear-tab)}.gear-windows .vital-track i{position:absolute;inset:0 auto 0 0;width:0;background:var(--gear-hp)}.gear-windows .vital-track .gear-mp-fill{background:var(--gear-en)}.gear-windows .vital-track b{position:relative;display:block;text-align:center;font-size:9px;line-height:max(11px,calc(12px * var(--gear-scale)));color:var(--gear-text);font-weight:600}.gear-windows .exp-row{margin:3px 0 6px;color:var(--gear-muted)}.gear-windows .exp-row .vital-track{background:var(--gear-tab);border-color:var(--gear-exp)}.gear-windows .set-bonus{margin:5px 0;color:var(--gear-text);font:inherit;line-height:1.4}.gear-windows .positive{color:var(--gear-positive)}.gear-windows .negative,.gear-windows .warn{color:var(--gear-negative)}.frame-top,.frame-extra{display:flex;justify-content:center;gap:calc(5px * var(--gear-scale));margin:4px 0}.frame-middle{display:grid;grid-template-columns:var(--gear-cell) minmax(0,1fr) var(--gear-cell);gap:calc(5px * var(--gear-scale));align-items:center;min-height:calc(178px * var(--gear-scale));margin:4px calc(8px * var(--gear-scale))}.frame-side{display:grid;gap:calc(6px * var(--gear-scale))}.frame-slot{display:grid;place-items:center}.slot-square,.bag-cell{position:relative;display:grid;place-items:center;padding:2px;width:var(--gear-cell);height:var(--gear-cell);border:1px solid var(--gear-line);border-radius:2px;background:var(--gear-well)}.slot-square:hover,.bag-cell:hover:not(.empty){border-color:var(--gear-frame-edge)}.gear-windows .it-tile{background:var(--gear-icon-bed);color:var(--gear-white);box-shadow:none;text-shadow:none;border-radius:1px}.slot-square .it-tile,.bag-cell .it-tile{width:100%;height:100%;font-size:max(9px,calc(11px * var(--gear-scale)))}.slot-silhouette{display:inline-grid;place-items:center;width:90%;height:90%;color:var(--gear-line)}.slot-silhouette svg{width:78%;height:78%;stroke-width:1}.rarity-mark{position:absolute;top:1px;right:1px;width:7px;height:7px;border:1px solid var(--gear-white);rotate:45deg;background:var(--frame)}.worn-mark,.blocked-mark{position:absolute;bottom:0;right:0;line-height:0;background:var(--gear-paper)}.worn-mark{color:var(--gear-positive)}.worn-mark svg,.blocked-mark svg{width:10px;height:10px;stroke-width:2}.blocked-mark{color:var(--gear-negative)}.slot-square.blocked{background:var(--gear-tab)}.frame-portrait{margin:0;min-width:0;text-align:center}.frame-portrait figcaption{font-size:inherit;font-weight:600;margin-bottom:3px}.portrait-backdrop{display:grid;place-items:center;min-height:calc(140px * var(--gear-scale))}.portrait-backdrop img{width:100%;max-width:calc(115px * var(--gear-scale));height:calc(136px * var(--gear-scale));object-fit:contain;image-rendering:pixelated}.uid-copy{display:flex;align-items:center;justify-content:center;gap:5px;min-height:calc(24px * var(--gear-scale));width:100%;padding:2px;background:none;color:var(--gear-muted);font:inherit;font-size:10px}.uid-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.uid-copy svg{width:12px;height:12px}.equipment-footer{display:flex;align-items:center;gap:4px;border-top:1px solid var(--gear-line);padding-top:5px;margin-top:5px}.equipment-footer small{flex:1;color:var(--gear-muted);font-size:10px;line-height:1.4}.bag-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) calc(24px * var(--gear-scale));gap:3px;align-items:start}.bag-toolbar>label{min-width:0}.bag-filters summary{list-style:none;cursor:pointer}.bag-filters summary::-webkit-details-marker{display:none}.bag-filters[open]{grid-column:1 / -1;display:grid;grid-template-columns:calc(24px * var(--gear-scale)) 1fr;gap:3px}.bag-filters>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3px}.bag-filters button{grid-column:1 / -1}.bag-filters .on{border-color:var(--gear-frame-edge)}.gear-windows .result-count{margin:3px 0;font-size:10px;color:var(--gear-muted)}.bag-grid{display:grid;grid-template-columns:repeat(6,var(--gear-cell));justify-content:center;gap:calc(2px * var(--gear-scale));flex:1;min-height:0;overflow:auto;align-content:start;padding:1px}.bag-cell.empty{background:var(--gear-well)}.bag-footer{display:flex;align-items:center;gap:4px;margin-top:5px;padding-top:4px;border-top:1px solid var(--gear-line);background:var(--gear-paper)}.bag-footer small{margin-left:auto;color:var(--gear-muted);font-size:9px}.gear-popover{z-index:100000;width:calc(270px * var(--gear-scale));max-width:calc(100vw - 24px)}.gear-windows .item-card{display:flex;flex-direction:column;padding:var(--gear-pad);max-height:min(520px,calc(100dvh - 24px));background:var(--gear-paper)}.gear-windows .item-card header{display:flex;align-items:center;gap:5px;flex-shrink:0}.gear-windows .item-card header>div{flex:1;min-width:0}.gear-windows .item-card header>.it-tile{width:calc(28px * var(--gear-scale));height:calc(28px * var(--gear-scale));font-size:10px}.gear-windows .item-card header b{font:inherit;font-weight:700}.gear-windows .popover-card-body{overflow:auto;min-height:0;scrollbar-color:var(--gear-frame-edge) var(--gear-paper)}.gear-windows .chips{display:flex;flex-wrap:wrap;gap:2px;margin-top:3px}.gear-windows .chip{font-style:normal;font-size:9px;padding:1px 4px;background:var(--gear-tab);color:var(--gear-text);border-radius:3px}.gear-windows .chip.on{color:var(--gear-positive)}.gear-windows .chip[class*=kind-]{color:var(--gear-white)}.gear-windows .chip.kind-attack{background:var(--kind-attack)}.gear-windows .chip.kind-buff{background:var(--kind-buff)}.gear-windows .chip.kind-debuff{background:var(--kind-debuff)}.gear-windows .chip.kind-heal{background:var(--kind-heal)}.gear-windows .stat-list{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:3px 7px;font:inherit;margin:5px 0}.gear-windows .stat-list dt{color:var(--gear-muted)}.gear-windows .stat-list dd{margin:0;text-align:right}.gear-windows .comparison{border-top:1px solid var(--gear-line);padding:5px 0}.gear-windows .comparison h4{margin:0 0 3px;font:inherit;font-weight:700}.gear-windows .comparison>small{color:var(--gear-muted);font-size:9px;line-height:1.4}.gear-windows .comparison p,.gear-windows .warn{margin:4px 0;font:inherit;line-height:1.4}.gear-windows .diff-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:5px 0}.gear-windows .diff-stats>div{display:flex;justify-content:space-between;gap:3px;padding:2px;border-bottom:1px solid var(--gear-line)}.gear-windows .diff-stats dt,.gear-windows .diff-stats dd{margin:0;font:inherit}.gear-windows .accessory-choice{display:grid;gap:3px;margin:5px 0}.gear-windows .item-info summary{min-height:calc(24px * var(--gear-scale));padding:4px 0;cursor:pointer;color:var(--gear-text)}.gear-windows .skill-list{list-style:none;display:grid;gap:6px;padding:0;margin:0}.gear-windows .skill-detail{display:flex;align-items:flex-start;gap:6px}.gear-windows .skill-detail>div{flex:1;min-width:0}.gear-windows .skill-detail b{font:inherit;font-weight:700}.gear-windows .skill-detail p{margin:4px 0;font:inherit;line-height:1.4;color:var(--gear-text)}.gear-windows .skill-detail small{font-size:10px;line-height:1.4;color:var(--gear-muted)}.gear-windows .sk-tile{color:var(--gear-white);text-shadow:none;box-shadow:inset 0 0 0 1px var(--gear-line)}.gear-windows .sk-tile.kind-attack{background:var(--kind-attack)}.gear-windows .sk-tile.kind-buff{background:var(--kind-buff)}.gear-windows .sk-tile.kind-debuff{background:var(--kind-debuff)}.gear-windows .sk-tile.kind-heal{background:var(--kind-heal)}.gear-windows .chip.rarity,.gear-windows #gear-item-name,.gear-windows select[data-filter=rarity][class],.gear-windows option[class^=rarity-]{color:var(--frame)}.gear-windows .chip.rarity{border:1px solid var(--frame)}.skill-detail[class*=rarity-] b{color:var(--frame)}.card-actions{display:flex;gap:4px;flex-shrink:0;border-top:1px solid var(--gear-line);padding-top:5px;margin-top:4px}.card-actions .primary{flex:1}.empty-slot-card header>b{flex:1}.empty-slot-card .card-actions button{flex:1}.deck-preview{margin:5px 0 9px;padding:calc(10px * var(--gear-scale)) 0;border:1px solid var(--gear-line);background:var(--gear-well)}.preview-upper,.preview-lower,.preview-lower>div{display:flex;align-items:center;justify-content:center;gap:3px}.preview-upper{margin-bottom:8px}.preview-lower{gap:7px}.preview-small{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;margin-top:8px}.preview-small>div{display:flex;gap:3px}.preview-small .preview-slot{width:calc(28px * var(--gear-scale));height:calc(28px * var(--gear-scale))}.preview-lower img{width:calc(38px * var(--gear-scale));height:calc(38px * var(--gear-scale));border-radius:50%;border:1px solid var(--gear-frame-edge);object-fit:cover}.preview-slot,.pool-skill{position:relative;width:calc(34px * var(--gear-scale));height:calc(34px * var(--gear-scale));padding:2px;flex-shrink:0;border:1px solid var(--gear-line);border-radius:2px;background:var(--gear-well)}.preview-slot .sk-tile,.pool-skill .sk-tile{width:100%;height:100%;font-size:10px;border-radius:1px}.preview-slot kbd,.pool-skill kbd{position:absolute;top:-4px;left:-1px;border:1px solid var(--gear-line);padding:0 2px;font-size:8px;line-height:1.2;box-shadow:none;color:var(--gear-text);background:var(--gear-paper)}.preview-auto{position:absolute;right:-2px;bottom:-2px;padding:0 2px;border:1px solid var(--gear-line);font-size:8px;font-style:normal;color:var(--gear-positive);background:var(--gear-paper)}.skill-pool-heading{display:flex;justify-content:space-between;gap:3px;margin:6px 0;font:inherit}.skill-pool-heading b{font-weight:600}.skill-pool-heading small{color:var(--gear-muted)}.skill-icon-grid{display:grid;grid-template-columns:repeat(6,calc(34px * var(--gear-scale)));justify-content:center;gap:5px;margin-bottom:7px}.pool-skill{cursor:grab}.selected-skill{padding:5px;border:1px solid var(--gear-line);background:var(--gear-well)}.selected-skill .muted{margin:0}.skill-controls{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px}.skill-controls [aria-pressed=true]{border-color:var(--gear-frame-edge);background:var(--gear-selected)}.skill-help summary{display:flex;align-items:center;gap:4px;min-height:calc(24px * var(--gear-scale));cursor:pointer}.skill-help summary svg{width:12px;height:12px}.skill-detail{display:flex;gap:8px;align-items:flex-start}.skill-detail>div{flex:1;min-width:0}.skill-detail b{font-size:12px}.skill-detail p{font-size:11px;line-height:1.5;margin:6px 0;color:var(--text-soft)}.skill-detail small{font-size:10px;line-height:1.5;color:var(--muted)}.chips{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}.chip{font-style:normal;font-size:9px;font-weight:800;padding:2px 5px;border-radius:999px;background:#ffffff12;color:var(--text-soft)}.chip.kind-attack{color:#ffb08a}.chip.kind-buff{color:#6ff2d6}.chip.kind-debuff{color:#cfa8ff}.chip.kind-heal{color:#a8ffd4}.deck-tooltip{position:fixed;z-index:25;width:min(320px,calc(100vw - 24px));padding:16px;border:1px solid var(--panel-border-strong);border-radius:10px;background:var(--glass);box-shadow:0 8px 32px #020416cc;pointer-events:none}.deck-tooltip[hidden]{display:none}.bar-slot[aria-disabled=true]:not(.empty) .glyph{filter:grayscale(.7) brightness(.7)}.bar-slot[aria-disabled=true]{cursor:default}.bar-slot .auto-mark{background:var(--cyan);color:var(--panel-lo)}body.narrow .art-hud .deck:has(.bar-slot){transform:none}body.narrow .art-hud .bar-slot{width:44px!important;height:44px!important;bottom:52px!important;left:calc(50% - 174px)!important}body.narrow .art-hud #bar-1{left:calc(50% - 128px)!important}body.narrow .art-hud #bar-2{left:calc(50% - 82px)!important}body.narrow .art-hud #bar-3{left:calc(50% + 38px)!important}body.narrow .art-hud #bar-4{left:calc(50% + 84px)!important}body.narrow .art-hud #bar-5{left:calc(50% + 130px)!important}body.narrow .art-hud .bar-slot.upper{bottom:112px!important}body.narrow .art-hud #bar-6{left:calc(50% - 91px)!important}body.narrow .art-hud #bar-7{left:calc(50% - 45px)!important}body.narrow .art-hud #bar-8{left:calc(50% + 1px)!important}body.narrow .art-hud #bar-9{left:calc(50% + 47px)!important}body.narrow .art-hud .bar-slot.small{width:36px!important;height:36px!important;bottom:160px!important}body.narrow .art-hud #bar-15,body.narrow .art-hud #bar-16,body.narrow .art-hud #bar-17,body.narrow .art-hud #bar-18,body.narrow .art-hud #bar-19{bottom:200px!important}body.narrow .art-hud #bar-10,body.narrow .art-hud #bar-15{left:calc(50% - 98px)!important}body.narrow .art-hud #bar-11,body.narrow .art-hud #bar-16{left:calc(50% - 58px)!important}body.narrow .art-hud #bar-12,body.narrow .art-hud #bar-17{left:calc(50% - 18px)!important}body.narrow .art-hud #bar-13,body.narrow .art-hud #bar-18{left:calc(50% + 22px)!important}body.narrow .art-hud #bar-14,body.narrow .art-hud #bar-19{left:calc(50% + 62px)!important}body.narrow .art-hud .portrait{left:calc(50% - 30px)!important;bottom:45px!important;width:60px!important;height:60px!important}body.narrow .portrait-face{left:10px;top:9px;width:40px;height:40px}body.narrow .art-hud .dash{display:none}body.narrow .art-hud #self-effects{left:14px!important;bottom:244px!important;width:calc(100% - 28px)!important;height:24px!important;justify-content:center;gap:6px}body.narrow #self-effects .sk-tile{width:22px;height:22px;font-size:8px}body.narrow #self-effects .effect-icon b{font-size:9px}body.narrow .art-hud .auto-label{font-size:11px}body.narrow .art-hud .auto{left:calc(50% + 137px)!important;bottom:4px!important;width:44px!important;height:44px!important}body.narrow .art-hud .bar-slot kbd{font-size:10px;line-height:14px;min-width:14px;top:-5px;left:-2px}body.narrow .art-hud .bar-slot.small kbd{font-size:9px;line-height:13px}body.narrow .art-hud .bar-slot .glyph .sk-tile{font-size:13px}body.narrow .art-hud .bar-slot .auto-mark{font-size:9px;min-width:13px;height:13px}@media(max-width:760px){.gear-windows{--gear-cell: 44px;--gear-pad: 7px;font-size:12px}.gear-window{left:0!important;top:auto!important;bottom:0;width:100%;max-width:100%;height:94dvh;max-height:94dvh;border-radius:8px 8px 0 0}.gear-window:not(.active){display:none}.window-handle{min-height:44px;padding-left:40px;cursor:default}.window-handle h2{font-size:14px}.window-badge{left:0;top:3px;width:34px;height:34px}.avatar-badge{width:36px;height:36px}.window-close,.gear-windows [data-popover-close]{width:44px;height:44px;min-width:44px;min-height:44px}.window-close:before,.gear-windows [data-popover-close]:before{width:20px;height:20px}.window-close svg,.gear-windows [data-popover-close] svg{width:12px;height:12px}.phone-window-tabs{display:flex;flex-shrink:0;border-bottom:1px solid var(--gear-frame-edge)}.phone-window-tabs button{display:grid;justify-items:center;flex:1;gap:3px;min-height:48px;min-width:0;padding:5px 2px;background:var(--gear-tab);color:var(--gear-text);font:inherit;font-size:10px}.phone-window-tabs svg{width:16px;height:16px}.phone-window-tabs [aria-pressed=true]{background:var(--gear-paper);font-weight:700}.gear-windows .paper-tabs button,.gear-windows .icon-action,.gear-windows .skill-controls button,.gear-windows .card-actions button,.gear-windows select,.bag-filters button,.gear-windows .item-info summary,.skill-help summary{min-height:44px}.gear-windows .icon-action{min-width:44px}.gear-windows .paper-tabs button{flex:1}.window-body{padding:7px}.gear-character .window-body{flex:1}.info-rows>div{min-height:22px}.info-rows dt{font-size:11px}.info-rows dd{max-width:95px}.gear-windows .section-strip{min-height:22px;font-size:12px}.gear-windows .vital-track{height:18px}.gear-windows .vital-track b{line-height:16px;font-size:10px}.frame-middle{min-height:184px;margin:6px 14px}.portrait-backdrop img{height:140px;max-width:125px}.uid-copy{min-height:44px}.bag-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px}.bag-filters[open]{grid-template-columns:44px 1fr}.bag-grid{gap:4px}.bag-footer small{font-size:10px}.gear-popover{left:0!important;top:auto!important;bottom:0;width:100%;max-width:100%;border-radius:8px 8px 0 0}.gear-windows .item-card{max-height:62dvh;padding:7px 7px max(7px,env(safe-area-inset-bottom))}.gear-windows .chip{font-size:10px}.gear-windows .comparison>small{font-size:10px}.preview-slot,.pool-skill{width:44px;height:44px}.preview-small .preview-slot{width:36px;height:36px}.preview-slot .sk-tile,.pool-skill .sk-tile{font-size:11px}.preview-lower img{width:42px;height:42px}.skill-icon-grid{grid-template-columns:repeat(6,44px);gap:6px}.skill-controls{gap:5px}}@font-face{font-family:Noto Sans Thai;src:url(/fonts/NotoSansThai-Variable.ttf) format("truetype");font-weight:100 900;font-display:swap}@font-face{font-family:Nunito;src:url(/fonts/Nunito-Variable.ttf) format("truetype");font-weight:200 1000;font-display:swap}:root{--s: 1;--outline: 0 0 2px #070a1f, 1px 1px 0 #070a1f, -1px 1px 0 #070a1f, 1px -1px 0 #070a1f, -1px -1px 0 #070a1f}.art-hud{font-family:Nunito,Noto Sans Thai,Trebuchet MS,Arial,sans-serif;font-weight:800;color:#fff}.art-hud [style]{position:absolute}.art-hud nav:not([style]),.art-hud .deck{display:contents}.art{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;user-select:none}.art-button{display:block;padding:0;background:none;border:0;border-radius:calc(var(--s) * 8px);transition:filter .12s,transform .12s}.art-button:hover:not(:disabled){filter:brightness(1.14)}.art-button:active:not(:disabled){transform:translateY(1px)}.art-button:disabled{opacity:1}.decor{pointer-events:none}.info-strip{display:flex;align-items:stretch;gap:calc(var(--s) * 2px);font-size:calc(var(--s) * 11.5px);white-space:nowrap;text-shadow:0 1px 0 #000}.info-strip>*{display:flex;align-items:center;padding:0 calc(var(--s) * 7px);border-radius:calc(var(--s) * 4px);background:#11142aeb}.info-strip b{font-weight:800;margin-left:.3em}.clock{display:flex;align-items:center;justify-content:center;font-size:calc(var(--s) * 18px);font-weight:900;line-height:1;letter-spacing:calc(var(--s) * .4px);text-shadow:0 1px 1px #070a1f}.coin b{position:absolute;top:0;bottom:0;left:40%;right:8%;display:flex;align-items:center;justify-content:flex-start;font-size:calc(var(--s) * 13px);font-weight:900;color:#5a3a10}.zone-title{border-image:url(/assets/ui/pill-dark.png) 0 28 fill / 0 calc(var(--s) * 10px)}.zone-title.channel{border-image-width:0 calc(var(--s) * 8.25px)}.zone-title b{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:flex-start;padding-left:calc(var(--s) * 7.5px);font-size:calc(var(--s) * 10.5px);font-weight:800;white-space:nowrap;text-shadow:var(--outline)}.minimap canvas{position:absolute;top:3%;right:3%;bottom:3%;left:3%;width:94%;height:94%}#main-quest{width:100%;height:100%}#quest-current{position:absolute;left:calc(var(--s) * 23px);top:calc(var(--s) * 30.75px);max-width:calc(var(--s) * 104px);overflow:hidden;font-size:calc(var(--s) * 12px);font-weight:700;color:#eef0ff;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 1px 1px #070a1f}.quest-bullet,.quest-chevron{position:absolute;pointer-events:none}.quest-bullet{left:calc(var(--s) * 11px);top:calc(var(--s) * 34.5px);width:calc(var(--s) * 7px);height:calc(var(--s) * 7px);background:#a9b2d6;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:.8}.quest-chevron{left:calc(var(--s) * 132px);top:calc(var(--s) * 35px);width:calc(var(--s) * 4.6px);height:calc(var(--s) * 7.8px);background:#6fe0ff;clip-path:polygon(0 0,45% 0,100% 50%,45% 100%,0 100%,55% 50%);filter:drop-shadow(0 0 calc(var(--s) * 2px) #36b8ff);transition:transform .15s}#main-quest[aria-expanded=true] .quest-chevron{transform:rotate(90deg)}.objective-list{position:absolute;top:calc(100% + var(--s) * 6px);right:0;width:calc(var(--s) * 240px);padding:calc(var(--s) * 10px);border:1px solid #8fb4ff59;border-radius:calc(var(--s) * 9px);background:linear-gradient(150deg,#1a2566f2,#0d1440f5);box-shadow:0 6px 20px #02041680;font-size:calc(var(--s) * 12px);z-index:5}.objective-list>b{float:right;color:#ffd36a}.slot .glyph{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.slot .glyph svg{width:58%;height:58%;filter:drop-shadow(0 1px 1px #070a1f)}.slot.ability{padding:0;background:none;border-radius:calc(var(--s) * 5px)}.slot.ability:disabled{opacity:1}.slot kbd{top:calc(var(--s) * -4px);left:calc(var(--s) * -3px);font-family:inherit}.bar{container-type:size}.bar .track{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;background:#0b0e27;box-shadow:inset 0 0 0 calc(var(--s) * .6px) #050716,inset 0 0 0 calc(var(--s) * 1.6px) #b9c4dc}.bar .fill{position:absolute;top:0;bottom:0;left:0;overflow:hidden;transition:width .2s}.bar .fill .art{width:100cqw;height:100cqh}.bar b{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--s) * 10px);font-weight:800;line-height:1;text-shadow:0 1px 1px #0008}.portrait{border-radius:50%}.deck-name{display:flex;align-items:center;justify-content:center;gap:calc(var(--s) * 8px);font-size:calc(var(--s) * 12.5px);font-weight:900;white-space:nowrap;text-shadow:calc(var(--s) * 1px) calc(var(--s) * 1.5px) 0 #070a1f,0 0 calc(var(--s) * 2px) #070a1f,calc(var(--s) * .5px) calc(var(--s) * .5px) calc(var(--s) * 1px) #070a1f;background:radial-gradient(closest-side,#070a1f73,transparent);pointer-events:none}.deck-name b{font-weight:900;color:#fff1a6;padding:0 calc(var(--s) * 3px);border-radius:calc(var(--s) * 4px);background:#070a1f66}.auto{border-radius:50%}.auto small{position:absolute;left:0;right:0;bottom:18%;font-size:calc(var(--s) * 8px);font-weight:900;color:#9fe6ff;text-align:center}.auto.active{filter:drop-shadow(0 0 calc(var(--s) * 9px) #4fd8ff)}.menu-row{pointer-events:none}.zone{padding:0;background:none;border-radius:calc(var(--s) * 10px)}.zone:hover{background:#ffffff12}#log-panel{left:calc(var(--s) * 4px);bottom:calc(var(--s) * 72px);width:calc(var(--s) * 320px)}.field-hint{position:absolute;left:50%;bottom:calc(var(--s) * 150px);transform:translate(-50%);text-align:center;text-shadow:var(--outline);font-size:calc(var(--s) * 13px)}body[data-zone=town] .field-hint{display:none}body.narrow .art-hud nav>*,body.narrow .menu-row,body.narrow .zone,body.narrow .info-strip,body.narrow .decor,body.narrow .promo,body.narrow .potion,body.narrow .tile-potion{display:none}body.narrow .art-hud .deck{display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;transform:scale(1.3);transform-origin:50% 100%}body.narrow .art-hud .deck>button{pointer-events:auto}body.narrow .clock{font-size:max(12px,calc(var(--s) * 18px))}.potion b{position:absolute;right:calc(var(--s) * 1px);bottom:calc(var(--s) * 1px);min-width:calc(var(--s) * 16px);height:calc(var(--s) * 13px);display:flex;align-items:center;justify-content:center;border-radius:calc(var(--s) * 4px);background:#f2f5ff;font-size:calc(var(--s) * 10px);font-weight:900;color:#3a1420}.art-button .label,.zone .label{position:absolute;left:0;right:0;bottom:0;font-size:calc(max(8px,var(--s) * var(--label-size, 9.5px)) * var(--lab, 1) * var(--fit, 1));font-weight:800;line-height:1.1;text-align:center;white-space:nowrap;text-shadow:var(--outline);pointer-events:none}.art-hud.baked .label{display:none}.promo{display:contents}.glyph-icon{position:absolute;left:50%;top:calc(var(--s) * var(--glyph-top));width:calc(var(--s) * var(--glyph));aspect-ratio:1;transform:translate(-50%);pointer-events:none;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 calc(var(--s) * 1px) calc(var(--s) * 1px) #070a1f)}.tile-side{--glyph: 24px;--glyph-top: 5.5px;--label-size: 9.8px}.tile-side>.art{filter:saturate(.45) hue-rotate(12deg) brightness(.92)}.tile-side .glyph-icon{left:calc(50% - var(--s) * 1px)}.tile-side .label{left:calc(var(--s) * .5px);right:calc(var(--s) * 3.5px);bottom:calc(var(--s) * 2.9px)}.tile-hub{--glyph: 30px;--glyph-top: 6.7px;--label-size: 9.6px}.tile-hub .label{left:calc(var(--s) * -1px);right:calc(var(--s) * -1px);bottom:calc(var(--s) * -.75px)}.zone{--glyph: 28px;--glyph-top: 11px;--label-size: 10.5px}.zone .label{bottom:calc(var(--s) * 11.6px)}.tile-chat{--label-size: 10.8px}.tile-chat .label{bottom:calc(var(--s) * 8.6px)}html:lang(th) .art-hud{--lab: 1.12}html:lang(th) .art-button .label,html:lang(th) .zone .label{line-height:1;translate:0 calc(var(--s) * -1.5px)}html:lang(th) .zone .label{translate:0 calc(var(--s) * -2.5px)}.promo .glyph-icon{display:none}.promo .label{right:calc(var(--s) * 3px);bottom:auto;top:calc(50% + var(--s) * 1px);transform:translateY(-50%);text-align:left;--label-size: 10.2px}.tile-event .label{left:44.4%}.tile-premium .label{left:34%}#main-quest .quest-title{left:calc(var(--s) * 24px);right:auto;top:calc(var(--s) * 11px);bottom:auto;--label-size: 12px}html:lang(th) #main-quest .quest-title{left:calc(var(--s) * 26px)}.zone-title.channel b{justify-content:center;padding:0;font-size:calc(var(--s) * 9.8px)}.map-art{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:calc(var(--s) * 5px)}.minimap>img:not(.map-art){position:absolute;left:calc(var(--s) * -1px);top:calc(var(--s) * 1px);width:calc(var(--s) * 170px);height:calc(var(--s) * 122px)}.portrait-face{position:absolute;left:calc(var(--s) * 12.6px);top:calc(var(--s) * 11px);width:calc(var(--s) * 49px);height:calc(var(--s) * 49px);border-radius:50%;background:url(/assets/characters/starwalker-portrait.png) no-repeat 50% 10% / 122%,radial-gradient(circle at 50% 35%,#e9f3ff,#8fb2ea);box-shadow:0 0 0 calc(var(--s) * 1px) #0b0d2a}.portrait>img{position:absolute;top:0;right:0;bottom:0;left:0}.auto-label,.key-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-weight:800;pointer-events:none}.auto-label{padding-left:calc(var(--s) * 2.5px);font-size:calc(var(--s) * 13px);text-shadow:0 calc(var(--s) * 1px) calc(var(--s) * 1px) #070a1fb3}.key-label{align-items:flex-start;padding:calc(var(--s) * 1px) calc(var(--s) * 4px) 0 0;font-size:calc(var(--s) * 11.5px);line-height:1;color:#161a2c}.dash .art{position:absolute;top:0;right:0;bottom:0;left:0}.art-hud .target-meter i{position:static}