:root{--gold:#bd9959;--gold-dim:#665033;--ink:#08090b;--parchment:#dbcbaa;--frame:url('art/m4/r18/gothic_frame.webp');--icons:url('art/m4/r18/item_icons_24.webp')}
button{touch-action:manipulation}button:focus-visible,summary:focus-visible{outline:2px solid #f5d483;outline-offset:3px}button:disabled{cursor:default}.world-heading{z-index:2}.world-heading h1{font-size:26px}.world-heading p{color:#9e927d}.status{z-index:2;text-shadow:0 2px 6px #000}.status #gpu{font-size:9px;color:#7f796c}.status #combat-status{max-width:240px;color:#c8b896}.map-panel{position:fixed;left:var(--ui-x,auto);top:var(--ui-y,100px);right:auto;width:var(--ui-width,164px);height:var(--ui-height,192px);padding:10px;border:10px solid transparent;border-image:var(--frame) 76 fill / 12px stretch;background:#080a0c;box-shadow:0 8px 30px #0009;z-index:2}.map-panel canvas{width:100%;height:calc(100% - 18px);opacity:.88}.map-panel div{font-size:9px;margin:5px 0 0;letter-spacing:1px}.map-panel i{width:5px;height:5px}.quality-control{position:fixed;right:28px;top:314px;z-index:3;color:#a99b81;font:10px 'Segoe UI',var(--aw-serif);cursor:pointer;background:#090b0cbd;border:1px solid #55432d;padding:7px 9px}.quality-control input{accent-color:#bb9557;vertical-align:middle}
footer{position:fixed;inset:0;width:100%;height:100%;transform:none;display:block;padding:0;background:none;pointer-events:none;z-index:4}footer:after{content:'';position:absolute;bottom:0;left:0;right:0;height:102px;background:linear-gradient(transparent,#050507d9 85%);z-index:-1;pointer-events:none}.orb,.controls{position:absolute;left:var(--ui-x);top:var(--ui-y);width:var(--ui-width);height:var(--ui-height)}.orb{border:0;border-radius:50%;box-shadow:none;background:#0d090b;isolation:isolate}.orb:before{content:'';position:absolute;inset:-2%;background:url('art/m4/r18/hp_orb.webp') center/100% 100% no-repeat;z-index:2;pointer-events:none}.orb.mp:before{background-image:url('art/m4/r18/mp_orb.webp')}.orb i{inset:14%;border-radius:50%;z-index:3;background:radial-gradient(ellipse at 37% 26%,#fe777d88,#99112288 42%,#230008bd);transform-origin:50% 100%;transition:transform .12s;mix-blend-mode:screen;box-shadow:inset 0 -10px 22px #0008}.orb.mp i{background:radial-gradient(ellipse at 37% 26%,#a5e6ff88,#1646d588 42%,#010c42bd)}.orb b{z-index:5;font-size:13px;top:44%;bottom:26%;text-shadow:0 1px 3px #000,0 0 6px #000}.orb:after{content:'';position:absolute;inset:15%;border-radius:50%;background:radial-gradient(ellipse at 30% 25%,#ffffff25,transparent 34%);z-index:4;pointer-events:none}.orb-caption{position:absolute;left:0;right:0;bottom:-1px;text-align:center;z-index:5;color:#cdb486;font:9px var(--aw-serif);letter-spacing:3px;text-shadow:0 1px 4px #000}
.controls{min-width:0;padding:8px 10px 0;border:10px solid transparent;border-image:var(--frame) 76 fill / 15px stretch;background:#0b0a09e0;text-align:center;pointer-events:auto}.controls strong{display:block;font-size:11px;color:#c8b58f;letter-spacing:2px;margin-top:-5px}.controls p{font:9px 'Segoe UI',var(--aw-serif);color:#8f826c;margin:6px 0 0;white-space:nowrap}.hotbar{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;justify-content:center;margin-top:6px}.hotbar button{width:100%;height:37px;position:relative;border:1px solid #6b5130;border-radius:2px;color:#d7c7a5;background:radial-gradient(ellipse at center,#392819 0,#100f10 75%);font:8px 'Segoe UI',var(--aw-serif);cursor:pointer;box-shadow:inset 0 0 0 2px #080808,0 1px 3px #000;padding:1px}.hotbar button:before{content:attr(data-glyph);display:block;color:var(--skill-color,#ddac5a);font:22px Georgia,serif;line-height:24px;text-shadow:0 0 10px var(--skill-color,#ddac5a)}.hotbar button:hover{border-color:#d8b86f;background-color:#32251c}.hotbar button:active{transform:translateY(1px);filter:brightness(1.5)}.hotbar kbd{position:absolute;left:3px;top:2px;color:#e4d1aa;font:8px 'Segoe UI';text-shadow:0 1px 3px #000}.hotbar span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:9px}.hotbar button[data-action="potion"]:before{background:url('art/m4/ui/potion_bottle.png') center/contain no-repeat;content:'';height:24px}
.inventory{position:fixed;left:var(--ui-x,calc(100% - 528px));top:var(--ui-y,86px);width:var(--ui-width,500px);height:var(--ui-height,516px);max-height:calc(100vh - 108px);transform:none;z-index:8;padding:18px 20px;color:var(--parchment);background:#0b0b0ded;border:18px solid transparent;border-image:var(--frame) 76 fill / 24px stretch;box-shadow:0 20px 65px #000c;overflow:auto;scrollbar-color:#6d5434 #111;overscroll-behavior:contain}.inventory[hidden]{display:none}.inventory header{position:static;display:grid;grid-template-columns:1fr auto;pointer-events:auto;text-shadow:none;border-bottom:1px solid #51412a;padding-bottom:10px}.inventory header span{grid-column:1;font:8px 'Segoe UI';letter-spacing:4px;color:#a08450}.inventory header b{grid-column:1;font-size:19px;font-weight:400;letter-spacing:3px;margin-top:3px}.inventory header button{grid-column:2;grid-row:1/3;width:35px;height:35px;border:1px solid #5c4830;background:#12100c;color:#c6ac77;font-size:25px;cursor:pointer}.equipment{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:13px 0 9px}.equipment-slot,.bag-slot{position:relative;min-width:0;min-height:58px;border:1px solid #483a29;background:linear-gradient(145deg,#191716,#07080a);color:#a28e6a;padding:3px;overflow:hidden;cursor:pointer}.equipment-slot[data-filled="true"],.bag-slot[data-item]{border-color:var(--rarity);box-shadow:inset 0 0 10px #000,0 0 6px color-mix(in srgb,var(--rarity) 18%,transparent)}.equipment-slot:hover:not(:disabled),.bag-slot:hover:not(:disabled){filter:brightness(1.35)}.slot-label{position:absolute;bottom:2px;left:0;right:0;text-align:center;font:8px var(--aw-serif);background:#08090ac7;color:#cab58f;text-shadow:0 1px 2px #000}.empty-slot-mark{font-size:28px;color:#433b31;display:block}.accessories{grid-column:1/-1;color:#8f8065;font:9px var(--aw-serif)}.accessories summary{padding:4px;cursor:pointer}.accessory-slots{display:grid;grid-template-columns:repeat(2,64px);justify-content:center;gap:8px;padding:7px}.bag-heading{display:flex;justify-content:space-between;margin:12px 0 6px;color:#9e8864;font:9px var(--aw-serif);letter-spacing:1px}.bag{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:6px;background:#050609;border:1px solid #493b28}.bag-slot{aspect-ratio:1;min-height:0}.bag-slot.empty{background:radial-gradient(ellipse at center,#131316,#07080a);border-color:#272421}.item-icon{display:block;width:100%;height:100%;min-height:43px;background-image:var(--icons);background-size:600% 400%;background-repeat:no-repeat;mix-blend-mode:screen}.equipment-slot .item-icon{height:51px}.model-potion-icon{background-image:url('art/m4/ui/potion_bottle.png');background-size:contain;background-position:center!important;mix-blend-mode:normal}.item-name{position:absolute;left:2px;right:2px;bottom:1px;background:#06080bd9;color:var(--rarity);font:7px 'Segoe UI';white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:10px}.stack-count{position:absolute;right:3px;top:2px;font:11px Georgia;color:#eee1b8;text-shadow:0 1px 3px #000}.inventory>p{font:10px 'Segoe UI',var(--aw-serif);color:#b5a17b;margin:10px 0 0;border-top:1px solid #433722;padding-top:9px}
#loot-labels,#damage-numbers{position:fixed;inset:0;pointer-events:none;z-index:3;overflow:hidden}.drop-label{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;max-width:300px;padding:3px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:11px Georgia,var(--aw-serif);background:#030408c9;border:1px solid currentColor;box-shadow:0 2px 8px #000;text-shadow:0 1px 3px #000;cursor:pointer}.drop-label:hover{background:#17130fed;filter:brightness(1.35)}.damage-number{position:absolute;font:bold 20px Georgia,serif;color:#f2e7ce;text-shadow:0 2px 2px #050405,0 0 6px #211507;will-change:transform,opacity;pointer-events:none}.damage-number.critical{font-size:28px;color:#ffd777}.damage-number.received{color:#f07161}.hit-flash{position:fixed;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 0 150px #c1182466;opacity:0;transition:opacity .08s}#toast{z-index:6;bottom:160px;text-align:center;max-width:80vw;font-size:12px}
@media(max-width:700px){.world-heading{left:14px;top:16px}.world-heading>span{font-size:8px;letter-spacing:2px}.world-heading h1{font-size:19px;letter-spacing:3px}.world-heading p{display:none}.status{right:12px;top:18px;font-size:9px}.status b{font-size:12px}.status #gpu{max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:8px}.status small{display:none}.map-panel{padding:6px;border-width:6px}.map-panel canvas{width:100%;height:calc(100% - 16px)}.map-panel div{font-size:8px}.quality-control{top:235px;right:12px;font-size:9px;padding:5px}.controls{padding:5px 3px 0;border-width:5px}.controls strong,.controls p{display:none}.hotbar{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:0}.hotbar button{height:41px;font-size:7px}.hotbar button:before{font-size:21px;line-height:26px}.hotbar kbd{font-size:7px}.orb b{font-size:10px}.orb-caption{font-size:8px;letter-spacing:1px;bottom:-3px}.inventory{padding:10px;border-width:12px;max-height:calc(100vh - 228px)}.inventory header{padding-bottom:6px}.inventory header b{font-size:17px}.inventory header span{font-size:7px}.equipment{gap:4px;margin-top:9px}.equipment-slot{min-height:51px}.equipment-slot .item-icon{height:44px;min-height:35px}.bag{gap:3px;padding:4px}.item-icon{min-height:30px}.item-name{font-size:6px;line-height:8px}.inventory>p{font-size:9px}.damage-number{font-size:17px}.damage-number.critical{font-size:22px}.drop-label{font-size:10px;max-width:220px}#toast{bottom:148px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.orb i,.hit-flash{transition:none}}
/* Darken the depleted liquid without hiding the authored metal frame. */
.orb:after{inset:15%;background:#08080cec;clip-path:inset(0 0 calc(100% - var(--orb-empty,0%)) 0);z-index:4}.orb b,.orb-caption{z-index:5}body.player-hit .hit-flash{opacity:1}
/* The orb atlas crop shares a corner with adjacent buttons; clip that spill. */
.orb:before{clip-path:circle(49% at 50% 50%)}

.input-control{position:fixed;right:28px;top:356px;z-index:3;background:#090b0cdd;border:1px solid #55432d;padding:7px 9px;color:#c7b99a;font:11px system-ui}.input-control select{background:#151216;color:#e4cfaa;border:1px solid #705936;padding:4px}.input-control select:focus-visible{outline:2px solid #f5d483}@media(max-width:700px){.input-control{top:270px;right:12px;padding:4px;font-size:10px}}
/* R5: preparation progress and nonblocking streaming status. */
#loading-progress{width:min(320px,75vw);height:12px;accent-color:#b8965e;border:1px solid #806343;background:#151116}
#loading-value{margin:12px;color:#d6bd91;font:12px var(--aw-serif);font-variant-numeric:tabular-nums}
#loading-progress::-webkit-progress-bar{background:#151116}
#loading-progress::-webkit-progress-value{background:linear-gradient(90deg,#60452f,#d4b77b)}
#stream-loading{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:9;padding:7px 16px;background:#100e14e6;border:1px solid #806343;color:#d6bd91;font:12px var(--aw-serif);pointer-events:none}
#stream-loading[hidden]{display:none}
/* R11 encounter overlays. Existing HUD layout and common renderer defaults stay intact. */
#dungeon-transition{position:fixed;inset:0;z-index:80;background:#030206;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;pointer-events:none;color:#c9ad79;opacity:0}
#dungeon-transition span{font-size:30px;text-shadow:0 0 30px #9878bd}
#dungeon-transition b{font-size:22px;letter-spacing:.24em;font-weight:500}
#dungeon-transition[hidden],#boss-hud[hidden],#boss-banner[hidden]{display:none}.aw-panel[hidden],#level-up-banner[hidden]{display:none!important}
#boss-hud{position:fixed;z-index:11;top:24px;left:50%;transform:translateX(-50%);width:min(480px,42vw);pointer-events:none;text-align:center;padding:12px 25px 10px;background:linear-gradient(90deg,transparent,#08060de8 12%,#08060df0 88%,transparent);color:#e9d4a5;text-shadow:0 2px 3px #000}
.boss-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:9px;font-family:Georgia,serif;letter-spacing:.16em}
.boss-heading b{font-size:18px;font-weight:400}.boss-heading span{color:#b58654;font-size:12px}
.boss-hp-track{height:12px;background:#10080c;border:1px solid #976a42;box-shadow:0 0 0 2px #100b0d,0 0 0 3px #473725;position:relative;overflow:hidden}
.boss-hp-track:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),#190c105e calc(10% - 1px),#190c105e 10%)}
#boss-hp-fill{display:block;height:100%;width:100%;transform-origin:left;background:linear-gradient(#bc4535,#7d171f 55%,#ad3930);box-shadow:inset 0 1px #ef977259;transition:transform .08s linear}
#boss-hud[data-phase="2"] #boss-hp-fill{background:linear-gradient(#d55547,#8c1a39 55%,#be355c)}
#boss-hp-value{display:block;margin-top:6px;color:#c9b698;font:11px Georgia,serif;letter-spacing:.12em}
#boss-banner{position:fixed;z-index:14;top:20%;left:50%;transform:translateX(-50%);min-width:340px;text-align:center;pointer-events:none;padding:28px 70px 16px;background:radial-gradient(ellipse,#050309d9 0,transparent 70%);animation:r11-banner-in .45s ease-out;color:#e8cc96;text-shadow:0 2px 6px #000}
#boss-banner span{display:block;font-size:11px;letter-spacing:.28em;color:#bfa47e;margin-bottom:9px}#boss-banner b{font:32px Georgia,serif;white-space:nowrap;letter-spacing:.09em}#boss-banner i{display:block;margin-top:15px;font-style:normal;font-size:9px;color:#9b7446}#boss-banner i:before,#boss-banner i:after{content:'';display:inline-block;height:1px;width:90px;margin:0 12px 3px;background:linear-gradient(90deg,transparent,#af8554)}#boss-banner i:after{transform:rotate(180deg)}
#boss-banner[data-kind="boss-victory"]{top:28%;color:#f1d794}
@keyframes r11-banner-in{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}
@media(max-width:700px){#boss-hud{top:96px;width:70vw;padding:10px 18px}.boss-heading b{font-size:14px}#boss-banner{top:29%;min-width:0;width:90%;padding:20px 0}#boss-banner b{font-size:24px}}

/* R12: independent controls; existing HUD coordinates remain unchanged. */
.audio-control{position:fixed;right:28px;top:406px;z-index:3;width:180px;display:grid;grid-template-columns:46px 1fr;align-items:center;gap:8px;background:#090b0ce8;border:1px solid #55432d;padding:10px;color:#c7b99a;font:11px system-ui}.audio-control input{width:100%;accent-color:#c59b5e}.audio-control button{grid-column:1/-1;background:#171216;border:1px solid #705936;color:#e4cfaa;padding:5px;cursor:pointer}.audio-control button[aria-pressed="true"]{color:#f07161}.audio-control input:focus-visible{outline:2px solid #f5d483}@media(max-width:700px){.audio-control{right:12px;top:312px;width:140px;padding:7px;gap:6px;font-size:10px}}
/* R13: growth surfaces; existing HUD defaults stay intact. */
.growth-panel{position:fixed;z-index:30;top:70px;left:50%;transform:translateX(-50%);width:min(660px,calc(100vw - 24px));max-height:calc(100vh - 235px);overflow:auto;padding:18px;border:1px solid #967440;outline:3px solid #141212;background:linear-gradient(135deg,#211b1bf5,#0b0d12fa);box-shadow:0 16px 60px #000c;color:#e0d3b5;font:14px Georgia,serif}.growth-panel[hidden],.level-up-banner[hidden],.comparison-tooltip[hidden],.merchant-marker[hidden]{display:none}.growth-panel header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #5b4831;padding-bottom:8px;font-size:20px}.growth-panel button,.potion-belt button,.growth-level{background:linear-gradient(#342a22,#171619);border:1px solid #78603d;color:#ecdfc4;padding:9px;cursor:pointer}.growth-panel button:hover:not(:disabled){border-color:#e8bc69;background:#493827}.growth-panel button:disabled{opacity:.4;cursor:default}.growth-panel button:focus-visible,.potion-belt button:focus-visible{outline:2px solid #ead5a4}.growth-close{font-size:22px}.growth-points{color:#e9c477}.growth-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.growth-tree{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}.skill-branch{padding:10px;border:1px solid #514435;border-top:2px solid var(--skill-color);background:#0a0a0b7d}.skill-branch h3{margin:0 0 5px;color:var(--skill-color);font-size:16px}.skill-branch small{font-size:11px;color:#c4b9a3}.skill-nodes{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:10px}.skill-nodes button{white-space:pre-line;font-size:12px;padding:7px 2px}.growth-hud{position:fixed;z-index:12;left:28px;bottom:160px;width:215px;display:grid;grid-template-columns:70px 1fr;gap:4px 8px;align-items:center;color:#d9c39b;font:12px Georgia,serif}.growth-level{grid-row:span 2;padding:7px}.growth-hud progress{width:100%;height:7px;accent-color:#c7a15d}.xp-text{text-align:right}.potion-belt{position:fixed;z-index:12;right:28px;bottom:160px;display:flex;gap:5px}.potion-belt button{padding:9px 10px;font-size:12px;border-bottom:3px solid #8e2929}.potion-belt button.mana{border-bottom-color:#397ab8}.potion-belt button[aria-pressed=true]{outline:1px solid #f1d58e;background:#423329}.potion-belt button:last-child{border-bottom-color:#bca16a}.merchant-stock{display:flex;gap:10px}.merchant-sales{display:grid;gap:6px}.merchant-sales button{text-align:left;color:var(--rarity)}.merchant-marker{position:fixed;z-index:10;transform:translate(-50%,-100%);white-space:nowrap;max-width:none;border:1px solid #a58450;border-radius:3px;background:#17130dec;color:#e7c98c;padding:6px 12px;cursor:pointer}.merchant-marker:disabled{opacity:.6}.level-up-banner{position:fixed;z-index:26;top:23%;left:50%;transform:translateX(-50%);padding:22px 50px;border-top:1px solid #eed08a;border-bottom:1px solid #cfa75d;background:radial-gradient(ellipse,#574528e0,#08090eb0 75%);color:#fff0bc;text-shadow:0 0 16px #ffd36b;font:bold 24px Georgia,serif;pointer-events:none;white-space:nowrap}.level-up-banner.animate{animation:r13-level 2.6s ease-out both}@keyframes r13-level{0%{opacity:0;filter:brightness(4);transform:translate(-50%,15px) scale(.88)}15%,70%{opacity:1;filter:brightness(1);transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-12px)}}.comparison-tooltip{position:fixed;z-index:60;width:min(370px,calc(100vw - 32px));max-height:70vh;overflow:auto;padding:14px;background:#0d0c10f7;border:1px solid var(--rarity,#bea16c);box-shadow:0 10px 40px #000c;color:#d7cbb8;font:12px/1.5 Georgia,serif;pointer-events:none}.comparison-tooltip h3{color:var(--rarity);margin:3px 0;font-size:16px}.comparison-tooltip p{margin:4px 0}.comparison-source{color:#bcaa8e}.compare-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid #584b35;padding-top:7px}.compare-columns section+section{border-left:1px solid #514532;padding-left:10px}.item-affixes,.comparison-deltas{border-top:1px solid #514532;margin-top:8px;padding-top:6px}.comparison-deltas span{display:inline-block;margin-right:10px}.better{color:#86ce8f}.worse{color:#ec8c7d}.hotbar button.on-cooldown:after{content:attr(data-cooldown);position:absolute;inset:0;display:grid;place-items:center;background:#08090cb3;font:bold 18px Georgia;color:#e5d5ad}
@media(max-width:700px){.growth-panel{top:50px;max-height:calc(100vh - 220px);padding:12px}.growth-tree{grid-template-columns:1fr}.growth-stats{grid-template-columns:repeat(2,1fr)}.growth-hud{left:12px;bottom:150px;width:170px}.potion-belt{right:12px;bottom:112px}.potion-belt button{padding:6px;font-size:10px}.level-up-banner{font-size:16px;padding:16px 20px}.merchant-stock{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.level-up-banner.animate{animation:none}}
.growth-panel header{position:static;pointer-events:auto;left:auto;top:auto;text-shadow:none}.growth-close{margin-left:auto}.growth-points{margin:12px 0}
/* R15: HP is composited above WebGL/bloom. Loot uses measured CSS-pixel bounds. */
#enemy-health{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.enemy-health-bar{position:absolute;transform:translate(-50%,-100%);width:48px;height:5px;border:1px solid #2b1517;background:#080709;box-shadow:0 1px 3px #000}
.enemy-health-bar i{display:block;width:100%;height:100%;background:#e7856a;transform-origin:left}
.drop-label{box-sizing:border-box;min-height:23px}
.drop-label[hidden]{display:none}
.drop-label[data-nearest="true"]{background:#2b2117f5;outline:1px solid #ffe1a1;outline-offset:1px;box-shadow:0 0 10px #d7a95266}
.readability-control{position:fixed;right:28px;top:544px;z-index:3;display:flex;gap:8px;align-items:center;color:#c7b99a;background:#090b0ce8;border:1px solid #55432d;padding:7px;font:11px system-ui}
.readability-control button{color:#e4cfaa;background:#171216;border:1px solid #705936;padding:5px;cursor:pointer}
.readability-control button[aria-pressed="true"]{background:#493827;border-color:#e8bc69}
.readability-control input{accent-color:#c59b5e}
@media(max-width:700px){.readability-control{top:440px;right:12px;flex-direction:column;gap:4px;padding:5px;font-size:10px}.drop-label{max-width:220px}}

/* Existing art_gen concept derivative; menu animation uses compositor transforms. */
#front-menu{position:fixed;inset:0;z-index:100;overflow:auto;background:#08090b;isolation:isolate;display:grid;place-items:center;padding:32px 20px;font-family:Georgia,var(--aw-serif)}
#front-menu[hidden]{display:none}.front-art{position:fixed;inset:0;z-index:-3;background:linear-gradient(90deg,#05070bf5 0%,#070a0cbd 30%,#0b0d1050 65%,#050709a8),linear-gradient(0deg,#040608d9,transparent 55%),url('art/m4/concepts/fortress_town.webp') center/cover no-repeat}
.front-panel{width:min(580px,100%);padding:24px 36px 18px;background:linear-gradient(145deg,#090a0de8,#090a0dbb);border:1px solid #77603b;box-shadow:0 0 0 5px #08090b88,0 0 0 6px #80603944,0 25px 90px #0009;text-align:center;position:relative}
.front-panel.front-title{width:min(440px,100%);margin-right:min(40vw,640px);padding:48px 42px 28px;background:linear-gradient(120deg,#090a0dbb,#090a0d66)}
.front-brand>span{display:block;color:#bc975b;font-size:30px;text-shadow:0 0 26px #d4a35a7a}.front-brand h1{font-family:Georgia,'Batang',var(--aw-serif);font-weight:400;font-size:clamp(26px,3.2vw,46px);letter-spacing:5px;line-height:1.5;color:#d4bb80;text-shadow:0 2px 1px #000,0 0 28px #c9994b33;margin:8px -10px 32px}
.front-brand:after{content:'◆';display:block;color:#aa804a;font-size:9px;border-block:1px solid #96703e66;line-height:6px;margin:0 24px 26px}.front-panel h2{font:17px var(--aw-serif);letter-spacing:3px;color:#d4c29b;margin:0 0 20px}
.front-panel button{display:block;width:100%;padding:13px 16px;min-height:46px;margin:10px 0;border:1px solid #917343;background:linear-gradient(#25201a,#0d0d10);color:#dcc697;font:14px var(--aw-serif);letter-spacing:2px;cursor:pointer;box-shadow:inset 0 0 0 3px #090a0b}
.front-panel button:hover{background:linear-gradient(#3b3020,#161317);border-color:#dfba73;color:#ffedbc}.front-panel button:disabled{opacity:.38;cursor:default}.front-panel button.secondary{border-color:#514434;color:#a59882;background:#0c0c0f;font-size:12px}.front-panel button.danger{border-color:#8d4d3f;color:#ebad95}
.front-panel label{display:block;text-align:left;font:12px var(--aw-serif);color:#bbaa8a}.front-panel input:not([type=range]),.front-panel select{width:100%;margin-top:8px;padding:10px;border:1px solid #655136;background:#0d1014;color:#dfd2b6;font:13px var(--aw-serif)}.front-panel input:focus-visible,.front-panel select:focus-visible{outline:2px solid #d0aa69;outline-offset:3px}
.front-error{color:#d99481;min-height:16px;font:11px var(--aw-serif);margin:14px 0 0}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;text-align:left}.settings-grid label{position:relative}.settings-grid input[type=range]{width:100%;display:block;accent-color:#c4a364;margin:18px 0 8px}.settings-grid output{display:block;text-align:right;font:12px Georgia;color:#dbc08b}
.slot-list{display:grid;gap:10px}.save-slot{display:flex;position:relative;background:#0a0b0d;border:1px solid #5c4b36}.save-slot .slot-select{display:flex;align-items:center;gap:13px;margin:0;border:0;box-shadow:none;background:transparent;text-align:left;letter-spacing:0;min-height:112px;padding:12px}.slot-number{font:19px Georgia;color:#8e7450}.slot-select img{width:98px;height:72px;object-fit:cover;border:1px solid #796244}.slot-info{display:grid;gap:8px;min-width:0}.slot-info b{font:16px Georgia,var(--aw-serif);overflow-wrap:anywhere;color:#dcc69c}.slot-info span,.slot-info small{font:11px var(--aw-serif);color:#a89b85}.save-slot .slot-delete{width:auto;align-self:center;margin:12px;padding:8px;letter-spacing:0;min-height:36px;font-size:10px;background:#100e0e;border-color:#604236;color:#c39078}.empty .slot-select{min-height:84px}.intro-lines{padding:20px 0}.intro-lines p{font-size:15px;line-height:2;letter-spacing:2px;color:#cbbb9d}
.front-mist{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.front-mist i{position:absolute;left:calc(var(--n)*17% - 25%);bottom:calc(var(--n)*7% - 23%);width:70vw;height:25vh;opacity:.09;border-radius:50%;background:radial-gradient(ellipse,#b6b6ad,transparent 66%);animation:front-drift calc(22s + var(--n)*3s) ease-in-out infinite alternate;animation-delay:calc(var(--n)*-4s)}
@keyframes front-drift{to{transform:translate(22vw,-15vh) scale(1.5);opacity:.18}}#game-menu{position:fixed;left:28px;top:128px;z-index:9;padding:8px 14px;border:1px solid #725833;background:#0b0b0dd9;color:#d0b580;font:11px var(--aw-serif);cursor:pointer}
body:not([data-front=playing])> :not(#front-menu):not(#loading):not(script){visibility:hidden}body[data-front=title]>#loading,body[data-front=slots]>#loading,body[data-front=settings]>#loading,body[data-front=new]>#loading,body[data-front=intro]>#loading,body[data-front=delete]>#loading{visibility:hidden}
@media(max-width:700px){#front-menu{padding:18px 14px}.front-panel,.front-panel.front-title{margin:0;padding:24px 18px;width:100%}.front-brand h1{font-size:30px}.settings-grid{gap:16px}.slot-select img{width:62px;height:62px}.save-slot .slot-select{gap:8px;padding:10px}.save-slot .slot-delete{margin:6px}.front-panel button{font-size:13px}.slot-info b{font-size:14px}.slot-info span,.slot-info small{font-size:10px}#game-menu{left:14px;top:74px}.intro-lines p{font-size:12px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.front-mist i{animation:none}}

.save-slot .slot-delete{flex-shrink:0;white-space:nowrap}

/* R19 region affordances; compact operational labels, narrative left to Claude. */
#zone-title{border-color:var(--region-color,#b89b69);text-shadow:0 2px 9px var(--region-color,#b89b69)}
#region-interact{position:fixed;left:50%;top:66%;transform:translateX(-50%);z-index:22;border:1px solid #9cb9a0;background:#101816ee;color:#e8dfbd;padding:9px 22px;font:inherit;cursor:pointer}
#region-event{position:fixed;left:18px;top:125px;color:#b6cfb9;background:#101715d9;border-left:2px solid #708c75;padding:9px 12px;font-size:12px;pointer-events:none}
#region-miniboss{position:fixed;top:75px;left:50%;transform:translateX(-50%);width:min(340px,65vw);color:#e6d8bc;text-align:center;font-size:14px;pointer-events:none;text-shadow:0 2px 3px #000}
#region-miniboss meter{display:block;width:100%;height:12px;margin-top:5px;accent-color:#9252a6}
#region-miniboss[data-defeated=true]{color:#c7b27a}
body[data-front]:not([data-front=playing]) #region-event,body[data-front]:not([data-front=playing]) #region-miniboss,body[data-front]:not([data-front=playing]) #region-interact{display:none}
@media(max-width:600px){#region-event{top:155px;left:8px;font-size:10px;padding:6px}#region-miniboss{top:100px}}
/* R22 controls belong only to the main game, without additional GPU meshes. */
#balance-controls{position:fixed;left:28px;top:180px;z-index:13;display:grid;gap:7px;padding:9px 11px;background:#0b0b0de8;border:1px solid #79603b;color:#d6c39d;font:11px var(--aw-serif);max-width:210px}
#balance-controls label{display:flex;gap:8px;align-items:center}#difficulty-select{background:#171317;border:1px solid #79603b;color:#ead8b5;padding:5px;font:inherit}#difficulty-select:focus-visible{outline:2px solid #e8c780;outline-offset:2px}#checkpoint-current{color:#b7a17b;font-size:10px}
.checkpoint-marker{position:fixed;z-index:9;transform:translate(-50%,-100%);padding:7px 12px;border:1px solid #ad8b4d;border-radius:2px;background:#15110eec;color:#e8ce99;font:11px var(--aw-serif);cursor:pointer;white-space:nowrap;box-shadow:0 3px 15px #0008}
.checkpoint-marker[data-active=true]{border-color:#d7b570;color:#ffe2a3}.checkpoint-marker:disabled{opacity:.6;cursor:default}.checkpoint-marker:focus-visible{outline:2px solid #f5d58f;outline-offset:3px}
#death-overlay{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;pointer-events:auto;color:#d8b98a;text-align:center}
#death-title{margin:0;padding:18px 48px;border-top:1px solid #81623f;border-bottom:1px solid #81623f;font:40px var(--aw-serif);letter-spacing:.2em;text-shadow:0 0 28px #a4372c}#death-overlay p{margin:0;font:13px var(--aw-serif);color:#bba582}#death-overlay[data-phase=recover]>*{opacity:.45}
#balance-controls[hidden],.checkpoint-marker[hidden],#death-overlay[hidden],#death-overlay [hidden]{display:none}body.death-locked .hotbar{pointer-events:none}
@media(max-width:700px){#balance-controls{left:12px;top:205px;padding:6px;gap:4px;font-size:10px;max-width:150px}#checkpoint-current{font-size:9px}#death-title{font-size:30px;padding:14px 30px}.checkpoint-marker{font-size:10px;padding:7px 9px}}


/* R23 touch layout: opt-in body flag, desktop layout and art remain unchanged. */
#touch-controls{position:fixed;inset:0;z-index:12;pointer-events:none;user-select:none;-webkit-user-select:none;touch-action:none}
#touch-controls[hidden]{display:none}#touch-stick{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:calc(32px + env(safe-area-inset-bottom));width:126px;height:126px;border:2px solid #aa884b88;border-radius:50%;background:radial-gradient(circle,#30291d66,#090b11a8);box-shadow:inset 0 0 0 8px #090a0d55,0 4px 20px #0007;pointer-events:auto;touch-action:none;transform:scale(var(--touch-scale,1));transform-origin:left bottom;display:grid;place-items:center}
#touch-stick:before{content:'✥';position:absolute;font:84px Georgia;color:#c4a56b22}#touch-thumb{width:48px;height:48px;border-radius:50%;border:2px solid #c4a56b;background:radial-gradient(circle at 35% 25%,#7a6746,#272119 70%);box-shadow:0 3px 12px #000a;pointer-events:none}
#touch-actions{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,52px);gap:7px;transform:scale(var(--touch-scale,1));transform-origin:right bottom}
#touch-actions button{width:52px;height:52px;border:1px solid #ae8b4d;border-radius:50%;color:#e3cc9c;background:radial-gradient(circle at 35% 25%,#463421ed,#111014ed);box-shadow:inset 0 0 0 3px #080a0c,0 3px 10px #0007;pointer-events:auto;touch-action:none;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0}
#touch-actions button b{font:22px Georgia;line-height:23px}#touch-actions button span{font:9px var(--aw-serif);line-height:14px;white-space:nowrap}#touch-actions button[data-touch-action=attack]{border-color:#f2cb80;background:radial-gradient(circle,#77502c,#211414)}#touch-actions button.pressed{filter:brightness(1.6);transform:scale(.94)}
body[data-touch=true] .world-heading{left:12px;top:10px}body[data-touch=true] .world-heading>span,body[data-touch=true] .world-heading p{display:none}body[data-touch=true] .world-heading h1{font-size:19px;letter-spacing:2px;margin:0}
body[data-touch=true] #game-menu{left:auto;right:12px;top:max(10px,env(safe-area-inset-top));min-height:44px;min-width:64px}
body[data-touch=true] .status{left:12px;right:auto;top:39px;text-align:left;gap:3px}body[data-touch=true] .status b{font-size:12px}body[data-touch=true] #combat-status{display:none}
body[data-touch=true] .map-panel{left:auto;right:12px;top:64px;width:100px;height:112px;padding:5px;border-width:6px;opacity:.88}body[data-touch=true] .map-panel div{font-size:8px;letter-spacing:0}
body[data-touch=true] .quality-control,body[data-touch=true] .input-control,body[data-touch=true] .audio-control,body[data-touch=true] .readability-control{display:none}
body[data-touch=true] .orb{top:auto;bottom:calc(215px + env(safe-area-inset-bottom));width:64px;height:64px;transform:scale(var(--touch-scale,1));transform-origin:center bottom}body[data-touch=true] .orb.hp{left:18px}body[data-touch=true] .orb.mp{left:auto;right:18px}
body[data-touch=true] .controls{top:10px;bottom:auto;left:auto;right:88px;width:48px;height:44px;padding:0;border:0;background:none}body[data-touch=true] .controls strong,body[data-touch=true] #control-hint,body[data-touch=true] .hotbar button:not([data-action=inventory]){display:none}body[data-touch=true] .hotbar{display:block;margin:0}body[data-touch=true] .hotbar [data-action=inventory]{height:44px;width:48px}body[data-touch=true] .hotbar kbd{display:none}
body[data-touch=true] #toast{bottom:calc(295px + env(safe-area-inset-bottom));font-size:12px;width:80vw}body[data-touch=true] #zone-title b{font-size:24px;letter-spacing:3px}
body[data-touch=true] #balance-controls{left:12px;top:80px;max-width:180px;padding:6px;font-size:10px}body[data-touch=true] #difficulty-select{min-height:36px}body[data-touch=true] #checkpoint-current{max-width:160px}
body[data-touch=true] #inventory,body[data-touch=true] .growth-panel{left:8px;right:8px;top:64px;width:calc(100% - 16px);height:calc(100% - 90px);max-height:calc(100% - 90px);z-index:25;padding:12px;border-width:10px}body[data-touch=true] #inventory-close,body[data-touch=true] .growth-close{min-width:44px;min-height:44px}
body[data-touch=true]:has(#inventory:not([hidden])) #touch-controls,body[data-touch=true]:has(.growth-panel:not([hidden])) #touch-controls,body.death-locked #touch-controls{visibility:hidden}
body[data-touch=true] .growth-hud{bottom:190px;max-width:calc(100% - 150px);left:90px}body[data-touch=true] .potion-belt{display:none}body[data-touch=true] #region-event{top:185px;left:12px;max-width:240px;font-size:10px}body[data-touch=true] #region-miniboss{top:185px;width:70vw;font-size:12px}
body[data-touch=true][data-orientation=landscape] .map-panel{top:60px;width:84px;height:94px}body[data-touch=true][data-orientation=landscape] #balance-controls{top:78px}body[data-touch=true][data-orientation=landscape] .orb{bottom:200px;width:50px;height:50px}body[data-touch=true][data-orientation=landscape] #toast{bottom:195px}body[data-touch=true][data-orientation=landscape] #region-event{top:12px;left:32%}body[data-touch=true][data-orientation=landscape] #region-miniboss{top:44px;width:40vw}
@media(max-width:899px){#front-menu{padding:12px;align-items:start}.front-panel{margin:0 auto}.front-panel.front-title{margin:auto}.front-brand h1{margin-bottom:12px;font-size:28px}.front-brand:after{margin-bottom:14px}.settings-grid{gap:14px 16px}.front-panel label{font-size:11px}.front-panel.front-settings{padding:16px}.front-panel select{min-height:44px}.front-panel input[type=range]{min-height:24px}}

/* R24 live-game opt in: keep legacy mockups and shared HUD defaults unchanged. */
body[data-polish=r24] .world-heading{max-width:280px;padding:0 8px 8px 0;text-shadow:0 2px 3px #000,0 0 12px #000;background:radial-gradient(ellipse at 0 0,#06080bbd,transparent 75%)}
body[data-polish=r24] .world-heading p{color:#c8b99e}
body[data-polish=r24] .status{padding:7px 9px;border:1px solid #77604455;background:#090a0bd9;max-width:250px}
body[data-polish=r24] .status #gpu{color:#b6aa91}
body[data-polish=r24] #combat-status{font-size:11px;line-height:1.45;color:#e1cfaa}
body[data-polish=r24] #region-event{left:28px;top:274px;max-width:260px;z-index:8;font:12px/1.6 var(--aw-serif);background:#101715f2;white-space:normal}
body[data-polish=r24] #region-miniboss{top:25px;padding:10px 16px;border:1px solid #94745366;background:#08080ce6;font-family:var(--aw-serif)}
body[data-polish=r24] .drop-label{padding:4px 9px;font:600 12px/1.35 'Segoe UI',var(--aw-serif);background:#030508ef;text-shadow:0 1px 2px #000}
body[data-polish=r24] .item-name{font-size:9px;line-height:13px;font-family:'Segoe UI',var(--aw-serif)}
body[data-polish=r24] .slot-label{font-size:10px}
body[data-polish=r24] .bag-heading,body[data-polish=r24] .accessories{font-size:11px;color:#cbb998}
body[data-polish=r24] .inventory>p{font-size:11px;line-height:1.6;color:#dfcba6}
body[data-polish=r24] #inventory:not([hidden]){display:flex;flex-direction:column;overflow:hidden}
body[data-polish=r24] #inventory>header,body[data-polish=r24] #inventory>.equipment,body[data-polish=r24] #inventory>.bag-heading,body[data-polish=r24] #inventory>#inventory-stats{flex:0 0 auto}
body[data-polish=r24] #inventory>.bag{flex:1 1 auto;min-height:80px;overflow:auto;align-content:start;grid-auto-rows:var(--bag-row-height,64px);scrollbar-color:#8d7248 #111;overscroll-behavior:contain}
body[data-polish=r24] #inventory .bag-slot{aspect-ratio:auto;height:100%;min-height:0}
body[data-polish=r24] #inventory .bag-slot .item-icon{height:calc(100% - 13px);min-height:0}
body[data-polish=r24] .controls p{font-size:10px;color:#c7b591}
body[data-polish=r24] .hotbar button{font-size:9px}
body[data-polish=r24] .hotbar span{line-height:11px}
body[data-polish=r24] .growth-hud{grid-template-columns:100px 1fr;width:245px}
body[data-polish=r24] #toast:not(:empty){padding:8px 14px;border:1px solid #856e44;background:#09090de8;color:#f0dfb7;line-height:1.5}
body[data-polish=r24] #boss-banner{background:radial-gradient(ellipse,#08060ef5 25%,#08060e70 60%,transparent 75%)}
body[data-polish=r24]:has(#boss-banner:not([hidden])) #zone-title{opacity:0;transition:none}
body[data-polish=r24] .level-up-banner{top:auto;bottom:126px;width:max-content;max-width:calc(100vw - 48px);padding:12px 25px;font:600 18px/1.5 var(--aw-serif);white-space:normal;text-align:center;background:#131018f5;text-shadow:0 1px 4px #000}
body[data-polish=r24]:has(#level-up-banner:not([hidden])) #toast{bottom:220px}
body[data-polish=r24][data-touch=true] .world-heading{max-width:calc(100% - 152px);padding:0;background:none}
body[data-polish=r24][data-touch=true] .controls{right:108px}
body[data-polish=r24][data-touch=true] #inventory{--bag-row-height:56px}
body[data-polish=r24][data-touch=true] .status{top:35px;padding:3px 6px;max-width:calc(100% - 152px);background:#090a0bdd}
body[data-polish=r24][data-touch=true] .status #gpu{font-size:8px}
body[data-polish=r24][data-touch=true] #region-event{left:12px;top:185px;max-width:calc(100vw - 154px);font-size:11px;padding:6px 8px}
body[data-polish=r24][data-touch=true] #region-miniboss{top:246px;width:calc(100vw - 28px);font-size:12px;padding:6px 12px}
body[data-polish=r24][data-touch=true] .growth-hud{width:220px;grid-template-columns:90px 1fr;font-size:10px}
body[data-polish=r24][data-touch=true] .level-up-banner{bottom:305px;padding:10px 16px;font-size:15px}
body[data-polish=r24][data-touch=true]:has(#level-up-banner:not([hidden])) #toast{bottom:400px}
body[data-polish=r24][data-touch=true] .drop-label{font-size:11px}
body[data-polish=r24][data-touch=true][data-orientation=landscape] #region-event{top:10px;left:32%;max-width:30vw;font-size:10px}
body[data-polish=r24][data-touch=true][data-orientation=landscape] #region-miniboss{top:70px;width:38vw;padding:5px}
body[data-polish=r24][data-touch=true][data-orientation=landscape] #boss-banner{top:28%;padding:12px 15px;min-width:0;width:45vw}
body[data-polish=r24][data-touch=true][data-orientation=landscape] #boss-banner b{font-size:21px}
body[data-polish=r24][data-touch=true][data-orientation=landscape] .level-up-banner{bottom:14px;max-width:38vw;font-size:13px;padding:8px 12px}
body[data-polish=r24][data-touch=true][data-orientation=landscape]:has(#level-up-banner:not([hidden])) #toast{bottom:100px;width:36vw;font-size:11px}
@media(min-width:900px) and (max-height:850px){
 body[data-polish=r24]:not([data-touch=true]) .map-panel{left:auto;right:28px;top:100px;width:144px;height:162px;padding:7px}
 body[data-polish=r24]:not([data-touch=true]) .quality-control{top:272px;padding:6px 9px}
 body[data-polish=r24]:not([data-touch=true]) .input-control{top:308px;padding:6px 9px}
 body[data-polish=r24]:not([data-touch=true]) .audio-control{top:351px;gap:5px;padding:7px 10px;grid-template-columns:68px 1fr}
 body[data-polish=r24]:not([data-touch=true]) .readability-control{top:466px}
}

/* R26 recovery is above loading/front overlays, with keyboard-only access. */
#recovery-dialog{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:20px;color:#e8d5ac}
#recovery-dialog[hidden]{display:none}
#recovery-dialog section{width:min(480px,100%);box-sizing:border-box;background:#0c0b09;border:2px solid #ae8b45;padding:28px;box-shadow:0 0 0 5px #1f1a12,0 18px 80px #000}
#recovery-title{margin-top:0;color:#e4c484}#recovery-message{overflow-wrap:anywhere;max-height:30vh;overflow:auto}
#recovery-dialog section>div{display:flex;gap:12px;flex-wrap:wrap}#recovery-dialog button{min-height:44px;padding:10px 20px;background:#15120d;border:1px solid #ae8b45;color:#f0dcae;cursor:pointer}
#recovery-dialog button:focus-visible{outline:2px solid #ffe0a0;outline-offset:4px}
body:not([data-front=playing])>#recovery-dialog:not([hidden]){visibility:visible!important}

/* R27 opt-in theme (source: runtime/visual-r27.css). */
/* Optional game theme. Load after world-game.css and opt in on the body.
 * Only presentation changes: shared HUD geometry, inputs and copy are retained.
 * Explicit family/spacing declarations win over legacy font shorthands, including
 * the R24 and touch rules. Korean text uses the same face in every control. */
body[data-visual="r27"] {
  --r27-black: #100d13;
  --r27-gold: #c9ae72;
  --r27-parchment: #d2c3a6;
  --r27-red: #bd654e;
  --r27-violet: #9279a6;
  --r27-muted-violet: #ada0c9;
  --r27-common: #c3b69e;
  --r27-magic: #a291b6;
  --r27-rare: #c9ae72;
  --r27-legendary: #bc7972;
  color: var(--r27-parchment);
  background-color: var(--r27-black);
  color-scheme: dark;
}
body[data-visual="r27"],
body[data-visual="r27"] *,
body[data-visual="r27"] *::before,
body[data-visual="r27"] *::after {
  font-family: var(--aw-serif) !important;
  letter-spacing: .025em !important;
}
body[data-visual="r27"] :is(h1,h2,h3,.boss-heading,.damage-number,.stack-count,.slot-number),
body[data-visual="r27"] .hotbar button::before,
body[data-visual="r27"] #touch-stick::before,
body[data-visual="r27"] #touch-actions button b {
  font-family: var(--aw-serif) !important;
}
body[data-visual="r27"] :is(h1,h2,h3,#zone-title b,#boss-banner b,#death-title) {
  letter-spacing: .08em !important;
}
body[data-visual="r27"] :is(kbd,.item-name,.slot-label,.drop-label) {
  letter-spacing: .01em !important;
}

/* The opaque liquid covers the blue inner art; the authored gold orb frame
 * remains unchanged, including its depletion mask and accessibility meter. */
body[data-visual="r27"] .orb.mp i {
  background: radial-gradient(ellipse at 37% 26%,#a79bb9,#5d496e 42%,#22172d);
  mix-blend-mode: color;
}
body[data-visual="r27"] .orb.hp i {
  background: radial-gradient(ellipse at 37% 26%,#b26e6b,#792f3d 42%,#290d17);
  mix-blend-mode: color;
}
body[data-visual="r27"] .potion-belt button.mana {
  border-bottom-color: var(--r27-violet);
}

/* Attribute colors remain distinct, with the same mapping as R27 world VFX.
 * !important here overrides the original inline --skill-color values only. */
body[data-visual="r27"] :is([data-skill="fire"],[data-touch-action="skill:fire"],.skill-branch:has([data-skill-node^="fire:"])) {
  --skill-color: #bd654e !important;
}
body[data-visual="r27"] :is([data-skill="frost"],[data-touch-action="skill:frost"],.skill-branch:has([data-skill-node^="frost:"])) {
  --skill-color: #ada0c9 !important;
}
body[data-visual="r27"] :is([data-skill="lightning"],[data-touch-action="skill:lightning"],.skill-branch:has([data-skill-node^="lightning:"])) {
  --skill-color: #c9ae72 !important;
}
body[data-visual="r27"] :is([data-skill="necromancy"],[data-touch-action="skill:necromancy"],.skill-branch:has([data-skill-node^="necromancy:"])) {
  --skill-color: #9279a6 !important;
}
body[data-visual="r27"] :is([data-skill="ultimate"],[data-touch-action="skill:ultimate"],.skill-branch:has([data-skill-node^="ultimate:"])) {
  --skill-color: #bc7972 !important;
}
body[data-visual="r27"] :is([data-action="attack"],[data-touch-action="attack"],.skill-branch:has([data-skill-node^="slash:"])) {
  --skill-color: #bea77d !important;
}
body[data-visual="r27"] #touch-actions button b {
  color: var(--skill-color,var(--r27-gold));
}
body[data-visual="r27"] .hotbar button::before {
  text-shadow: 0 0 6px color-mix(in srgb,var(--skill-color,var(--r27-gold)) 45%,transparent);
}

body[data-visual="r27"] [data-rarity="common"] { --rarity: var(--r27-common) !important; }
body[data-visual="r27"] [data-rarity="magic"] { --rarity: var(--r27-magic) !important; }
body[data-visual="r27"] [data-rarity="rare"] { --rarity: var(--r27-rare) !important; }
body[data-visual="r27"] [data-rarity="legendary"] { --rarity: var(--r27-legendary) !important; }
body[data-visual="r27"] .drop-label[data-rarity] { color: var(--rarity) !important; }
body[data-visual="r27"] .item-icon { filter: grayscale(1) sepia(.45); }
body[data-visual="r27"] .better { color: var(--r27-gold); }
body[data-visual="r27"] .worse { color: var(--r27-red); }
body[data-visual="r27"] #region-event {
  color: #b8a5c3;
  background: #17111bf2;
  border-left-color: #766383;
}
body[data-visual="r27"] #region-interact {
  color: var(--r27-parchment);
  background: #17111bee;
  border-color: #9279a6;
}
body[data-visual="r27"] #region-miniboss meter { accent-color: var(--r27-violet); }
body[data-visual="r27"] #zone-title {
  --region-color: #a58da9 !important;
  color: var(--r27-parchment);
}
body[data-visual="r27"] .damage-number { color: #d2c3a6; }
body[data-visual="r27"] .damage-number.critical { color: #c9ae72; }
body[data-visual="r27"] .damage-number.received { color: #bd654e; }
body[data-visual="r27"] .enemy-health-bar i { background: #a95856; }
body[data-visual="r27"] .hotbar button:active,
body[data-visual="r27"] #touch-actions button.pressed { filter: brightness(1.15); }
/* Prevent the inherited level-up brightness burst from becoming a white panel. */
body[data-visual="r27"] .level-up-banner.animate { animation-name: r27-level; }
@keyframes r27-level {
  0% { opacity: 0; transform: translate(-50%,15px) scale(.88); }
  15%,70% { opacity: 1; transform: translate(-50%,0) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-12px); }
}

body[data-visual="r27"] #region-miniboss meter::-webkit-meter-optimum-value { background: linear-gradient(#aa728f,#72516f); }
body[data-visual="r27"] #region-miniboss meter::-moz-meter-bar { background: #9279a6; }

/* R29 diagnostics: no layout displacement or input interception. */
#perf-badge{position:fixed;top:8px;right:12px;z-index:55;max-width:min(600px,65vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 8px;background:#080a0dd9;color:#e0d4b1;font:11px monospace;pointer-events:none}
#acceleration-banner{position:fixed;top:36px;left:50%;transform:translateX(-50%);z-index:56;max-width:90vw;padding:7px 12px;background:#331d10ed;border:1px solid #a88946;color:#ffe6bb;font:12px var(--aw-serif);pointer-events:none}
#perf-badge[hidden],#acceleration-banner[hidden]{display:none}
/* hero_v2: the 20%-top banner sat over the hero's head/torso in close cameras. Keep it in the lower band
   between the hero's feet and the skill bar; victory text follows. Touch layouts keep their own rules. */
body[data-polish=r24]:not([data-touch=true]) #boss-banner{top:auto;bottom:19%;padding:14px 70px 10px}
body[data-polish=r24]:not([data-touch=true]) #boss-banner[data-kind="boss-victory"]{top:auto;bottom:22%}

/* web release: early software-WebGL warning must be readable on the title screen */
#acceleration-banner{pointer-events:auto;max-width:min(720px,92vw);font:13px/1.45 var(--aw-serif);text-align:center}
body:not([data-front=playing])>#acceleration-banner[data-early=true]{visibility:visible!important}

/* hero_v2 UI pass (D2 direction): no floating debug/settings boxes over the game. Graphics, controls,
   volume, shake and the FPS badge live in the Esc settings menu; ?debug=1 brings the raw panels back.
   The region name appears centred on entry (#zone-title) instead of a permanent corner box. */
body:not([data-debug]) :is(#perf-badge,#gpu,#combat-status,#control-hint,.quality-control,.input-control,.audio-control,.readability-control,.world-heading,.status){display:none!important}

/* ===== hero_v2 UI pass 2: classic-ARPG bottom panel (body[data-ui=d2]) =====
   One stone/iron bar across the bottom joins both orbs and the skill bar; level/XP sits above the
   skills, potions beside them. Serif Korean headings use installed system fonts only (no bundled
   font files: Nanum Myeongjo/Batang if present, generic serif otherwise). Difficulty moves into the
   Esc settings screen. Touch layouts keep their own rules. */
body[data-ui=d2]{--d2-serif:"Nanum Myeongjo","NanumMyeongjo","Batang","바탕","Times New Roman",serif;--d2-gold:#c9a96a;--d2-gold-hi:#ecd9a5}
body[data-ui=d2]:not([data-touch=true])::after{content:'';position:fixed;left:0;right:0;bottom:0;height:92px;z-index:9;pointer-events:none;
 background:linear-gradient(180deg,#2b2621 0,#1a1714 14%,#0f0d0b 60%,#070605 100%),repeating-linear-gradient(90deg,#00000000 0 46px,#ffffff06 46px 48px);
 border-top:2px solid #6d5a3a;box-shadow:0 -1px 0 #1c1610,0 -10px 24px #000c,inset 0 1px 0 #a8875055}
body[data-ui=d2][data-front=playing]:not([data-touch=true])::after{display:block}
body[data-ui=d2]:not([data-front=playing])::after{display:none}
body[data-ui=d2]:not([data-touch=true]) .controls{background:none;border-image:none;border:0;padding:0 0 10px}
body[data-ui=d2]:not([data-touch=true]) .controls>strong{font:600 13px var(--d2-serif);letter-spacing:.18em;color:var(--d2-gold);text-shadow:0 1px 2px #000}
body[data-ui=d2]:not([data-touch=true]) .hotbar button{background:linear-gradient(#1d1915,#0c0a08);border:1px solid #5d4c33;box-shadow:inset 0 0 0 1px #000,inset 0 8px 14px #ffffff08}
body[data-ui=d2]:not([data-touch=true]) .hotbar button:hover{border-color:var(--d2-gold)}
body[data-ui=d2]:not([data-touch=true]) .growth-hud{left:50%;transform:translateX(-50%);bottom:100px;width:min(520px,60vw);grid-template-columns:auto 1fr;font:12px var(--d2-serif);color:var(--d2-gold)}
body[data-ui=d2]:not([data-touch=true]) .potion-belt{right:auto;left:calc(50% + 350px);bottom:22px;z-index:12}
body[data-ui=d2] .orb b{font-family:var(--d2-serif)}
body[data-ui=d2] :is(#zone-title b,#boss-banner b,#boss-name){font-family:var(--d2-serif);color:var(--d2-gold-hi);text-shadow:0 2px 6px #000,0 0 18px #000}
body[data-ui=d2] #front-menu :is(h1,h2){font-family:var(--d2-serif);color:var(--d2-gold-hi);letter-spacing:.12em}
body[data-ui=d2] #game-menu{font:12px var(--d2-serif);color:var(--d2-gold);background:#0b0908cc;border:1px solid #5d4c33;opacity:.75}
body[data-ui=d2] #game-menu:hover{opacity:1}
/* difficulty lives in the Esc settings screen, not on the play HUD */
body[data-ui=d2][data-front=playing] #balance-controls{display:none!important}
body[data-ui=d2][data-front=settings]>#balance-controls{display:none!important;/* R32l: 옛 난이도 패널 — 첫 공개 범위 밖(고난도 '준비 중'), 설정 창 뒤에 비쳐 보이던 잔재라 숨김 */position:fixed;z-index:60;left:50%;top:18px;transform:translateX(-50%);font:13px var(--d2-serif);color:var(--d2-gold);background:#0c0a09f0;border:1px solid #6d5a3a;padding:8px 14px}
/* minimap: translucent overlay */
body[data-ui=d2] .map-panel{opacity:.82;background:#05040488}
body[data-ui=d2]:not([data-touch=true]) footer{z-index:11;background:none}
body[data-ui=d2]:not([data-touch=true]) :is(.orb,.growth-hud,.potion-belt,.controls){z-index:11}

/* R30 손맛: 고전 ARPG식 데미지 숫자 - 일반은 굵은 흰색, 치명타는 크게 금빛+주황 빛, 받은 피해는 붉게 */
body .damage-number{font:800 26px Georgia,"Nanum Myeongjo",serif!important;font-variant-numeric:lining-nums tabular-nums;/* R32o: 32→26, 1이 기둥처럼 보이지 않게 라이닝 숫자 */color:#f4ecdc!important;letter-spacing:.5px;-webkit-text-stroke:1px #120a05;text-shadow:0 2px 0 #000,0 0 8px rgba(0,0,0,.9)!important}
body .damage-number.critical{font-size:34px!important;color:#ffcf3a!important;-webkit-text-stroke:1.5px #4a1d00;text-shadow:0 0 10px #ff7a1a,0 0 22px rgba(255,90,0,.55),0 3px 0 #000!important}
body .damage-number.received{font-size:22px!important;color:#ff5a48!important}
/* R32m-feel: 대상 체력의 큰 몫을 깎은 타격은 따뜻한 색, 치명타는 주황 테두리 빛으로 짧게 튐 */
body .damage-number.heavy:not(.critical):not(.received){color:#ffe4a8!important;-webkit-text-stroke:1.2px #2a1204}

/* R30 직업 선택 카드 */
.class-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 14px}
.class-card{display:flex;flex-direction:column;gap:4px;padding:12px 10px;border:1px solid #5a4630;background:linear-gradient(#1b1410,#0e0a08);color:#d9c9a8;cursor:pointer;text-align:left}
.class-card b{font:700 18px Georgia,"Nanum Myeongjo",serif;color:#e8d3a2}.class-card small{font-size:12px;color:#a8977a}
.class-card[aria-pressed="true"]{border-color:#d4a64a;box-shadow:0 0 0 1px #d4a64a inset,0 0 14px rgba(212,166,74,.35)}

/* ===== R31 타이틀: 고전 ARPG식 전체 화면 키아트 + 상단 중앙 금속 로고 + 하단 중앙 세로 텍스트 메뉴 ===== */
#front-menu[data-style=r31]{background:#030304;--t31-gold:#d9b46a;--t31-gold-hi:#ffe6a6;--t31-serif:"Noto Serif KR","Nanum Myeongjo","Batang",Georgia,serif}
.t31-art{position:fixed;inset:5% -6% -9% -6%;z-index:-5;background:#050406 center/cover no-repeat;transform:scale(1.06);transition:transform .6s ease-out;animation:t31-breathe 26s ease-in-out infinite alternate;filter:saturate(.92) contrast(1.05)}
@keyframes t31-breathe{from{background-position:50% 50%}to{background-position:52% 46%}}
.t31-torch{position:absolute;width:13vmin;height:13vmin;margin:-6.5vmin 0 0 -6.5vmin;border-radius:50%;background:radial-gradient(circle,#ffb54f66 0,#ff7a2033 35%,transparent 70%);mix-blend-mode:screen;animation:t31-flicker 1.7s steps(9) infinite}
@keyframes t31-flicker{0%{opacity:.75;transform:scale(1)}20%{opacity:1;transform:scale(1.07)}35%{opacity:.6}55%{opacity:.95;transform:scale(.96)}70%{opacity:.7}85%{opacity:1;transform:scale(1.04)}100%{opacity:.8}}
.t31-fog{position:fixed;left:-30%;right:-30%;z-index:-4;pointer-events:none;background:radial-gradient(ellipse at 30% 60%,#9a95a826,transparent 60%),radial-gradient(ellipse at 75% 40%,#7f7a9022,transparent 55%);filter:blur(8px)}
.t31-fog.a{bottom:-8%;height:55%;animation:t31-drift 38s linear infinite alternate}.t31-fog.b{bottom:12%;height:40%;opacity:.7;animation:t31-drift 54s linear infinite alternate-reverse}
@keyframes t31-drift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
.t31-embers{position:fixed;inset:0;z-index:-3;pointer-events:none}
.t31-vignette{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 42%,transparent 40%,#000000b0 85%,#000 100%),linear-gradient(0deg,#000000e6 0,#00000099 22%,transparent 45%),linear-gradient(180deg,#000000b0 0,transparent 26%)}
#front-menu[data-style=r31]>.t31-logo{position:fixed;left:50%;top:2.2vh;transform:translateX(-50%);width:min(860px,56vw);height:auto;pointer-events:none;filter:drop-shadow(0 6px 18px #000) drop-shadow(0 0 30px #ff7a2a40);animation:t31-logo-in 1.6s ease-out both}
@keyframes t31-logo-in{from{opacity:0;transform:translate(-50%,-10px) scale(.97);filter:brightness(2) blur(4px)}to{opacity:1}}
#front-menu[data-style=r31] .front-panel.front-title{position:fixed;left:50%;bottom:9vh;transform:translateX(-50%);margin:0;width:auto;min-width:300px;padding:0;background:none;border:0;box-shadow:none}
.t31-menu{display:flex;flex-direction:column;align-items:center;gap:2px}
#front-menu[data-style=r31] .t31-menu button{position:relative;width:auto;min-width:260px;min-height:0;margin:0;padding:9px 46px;background:none;border:0;box-shadow:none;font:600 clamp(19px,1.55vw,26px) var(--t31-serif);letter-spacing:.32em;color:#c9b089;text-shadow:0 2px 3px #000,0 0 14px #000;cursor:pointer;transition:color .15s,text-shadow .15s,letter-spacing .25s}
#front-menu[data-style=r31] .t31-menu button::before,#front-menu[data-style=r31] .t31-menu button::after{content:'';position:absolute;top:50%;width:14px;height:20px;margin-top:-11px;opacity:0;background:radial-gradient(ellipse 45% 60% at 50% 70%,#fff3c4 0,#ffb341 35%,#ff5a14 60%,transparent 75%);filter:blur(.4px);transition:opacity .15s}
#front-menu[data-style=r31] .t31-menu button::before{left:12px}#front-menu[data-style=r31] .t31-menu button::after{right:12px}
#front-menu[data-style=r31] .t31-menu button:is(:hover,:focus-visible):not(:disabled){color:var(--t31-gold-hi);letter-spacing:.36em;text-shadow:0 0 6px #ffcf7a,0 0 18px #ff9a3a99,0 0 34px #ff6a1a55,0 2px 2px #000;outline:none;background:radial-gradient(ellipse 60% 70% at 50% 50%,#ffae4a1f,transparent 70%)}
#front-menu[data-style=r31] .t31-menu button:is(:hover,:focus-visible):not(:disabled)::before,#front-menu[data-style=r31] .t31-menu button:is(:hover,:focus-visible):not(:disabled)::after{opacity:1;animation:t31-flame .5s steps(4) infinite}
@keyframes t31-flame{50%{transform:scaleY(1.18) translateY(-1px)}}
#front-menu[data-style=r31] .t31-menu button:disabled{color:#6d6253;opacity:.7}
.t31-footer{position:fixed;left:0;right:0;bottom:14px;display:flex;justify-content:space-between;padding:0 28px;font:11px var(--t31-serif);letter-spacing:.12em;color:#8b7c66aa;pointer-events:none}
/* 다른 메뉴 화면: 검은 상자 대신 반투명 돌판 + 금 테두리, 위에 작은 로고 */
#front-menu[data-style=r31] .front-panel:not(.front-title){background:linear-gradient(180deg,#0b0907e6,#060504f0);border:1px solid #6f5634;box-shadow:0 0 0 1px #000,0 0 0 4px #1a130c,0 0 0 5px #8a6a3d66,0 30px 90px #000c;padding:22px 36px 18px}
#front-menu[data-style=r31] .front-panel h2{font:600 18px var(--t31-serif);letter-spacing:.3em;color:var(--t31-gold);text-shadow:0 0 12px #000}
#front-menu[data-style=r31] .front-panel:not(.front-title) button{font-family:var(--t31-serif);letter-spacing:.18em}
.t31-logo-small{width:min(360px,70%);height:auto;margin:-6px auto 10px;display:block;filter:drop-shadow(0 3px 8px #000)}
.front-brand:has(.t31-logo-small)::after{display:none}
.t31-credits{padding:8px 0 14px}.t31-credits p{margin:10px 0;font:14px var(--t31-serif);letter-spacing:.06em;color:#cdb991}
@media(max-width:700px){#front-menu[data-style=r31]>.t31-logo{width:88vw;top:4vh}#front-menu[data-style=r31] .t31-menu button{font-size:18px;padding:8px 30px}.t31-footer{padding:0 14px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.t31-art,.t31-torch,.t31-fog{animation:none}}

/* ===== R31 하단 HUD: 고전 ARPG 비율 축소판 — 가운데 860px 띠(64px) + 양끝 오브 104px, 최고점 110px(1080p의 10.2%) ===== */
body[data-ui=d2]:not([data-touch=true])::after{left:50%;right:auto;width:min(860px,calc(100vw - 260px));transform:translateX(-50%);height:64px;border:2px solid #6d5a3a;border-bottom:0;border-radius:6px 6px 0 0}
body[data-ui=d2]:not([data-touch=true]) footer:after{display:none}
body[data-ui=d2]:not([data-touch=true]) .orb{width:104px!important;height:104px!important;top:auto!important;bottom:4px}
body[data-ui=d2]:not([data-touch=true]) .orb.hp{left:calc(50% - min(430px,50vw - 130px) - 92px)!important}
body[data-ui=d2]:not([data-touch=true]) .orb.mp{left:calc(50% + min(430px,50vw - 130px) - 12px)!important}
body[data-ui=d2]:not([data-touch=true]) .orb-caption{display:none}
body[data-ui=d2]:not([data-touch=true]) .controls{left:50%!important;top:auto!important;bottom:6px;transform:translateX(-50%);width:min(820px,calc(100vw - 280px))!important;height:54px!important;padding:0!important}
body[data-ui=d2]:not([data-touch=true]) .controls>strong,body[data-ui=d2]:not([data-touch=true]) #control-hint{display:none}
body[data-ui=d2]:not([data-touch=true]) .hotbar{display:flex;gap:4px;justify-content:center;align-items:center;margin:0;height:54px}
body[data-ui=d2]:not([data-touch=true]) .hotbar button{width:48px;height:48px;flex:0 0 48px;font-size:9px}
body[data-ui=d2]:not([data-touch=true]) .hotbar button:before{font-size:20px;line-height:26px}
body[data-ui=d2]:not([data-touch=true]) .hotbar kbd{font:700 9px 'Segoe UI';color:#f0dcae}
.hotbar .r31-lmb,.hotbar .r31-rmb{width:54px!important;height:54px!important;flex-basis:54px!important;border-color:#a8854c!important;box-shadow:inset 0 0 0 2px #000,0 0 10px #c99a4a44!important}
.hotbar .r31-lmb{margin-right:8px}.hotbar .r31-rmb{margin-left:8px}
.hotbar .r31-belt{width:36px!important;flex-basis:36px!important;height:44px!important;background:linear-gradient(#15110d,#070605)!important;border-color:#4b3c28!important}
.hotbar .r31-belt:first-of-type{margin-left:8px}
.hotbar .r31-belt:before{content:''!important;display:block;width:14px;height:22px;margin:6px auto 0;border-radius:3px 3px 7px 7px;background:radial-gradient(ellipse at 40% 30%,#ffb3b3,#c21b22 45%,#3d0408)!important;box-shadow:0 0 6px #ff3a3a66;clip-path:polygon(35% 0,65% 0,65% 22%,100% 40%,100% 100%,0 100%,0 40%,35% 22%)}
.hotbar .r31-belt.mp:before{background:radial-gradient(ellipse at 40% 30%,#bcd6ff,#2154d8 45%,#06123d)!important;box-shadow:0 0 6px #3a6aff66}
.hotbar .r31-belt.empty:before{opacity:.12;background:#9a8a70!important;box-shadow:none}
.hotbar .r31-belt.none:before{opacity:.35;filter:grayscale(1)}
.hotbar .r31-belt em{position:absolute;right:3px;bottom:1px;font:700 12px Georgia,serif;font-style:normal;color:#fff2d0;text-shadow:0 1px 2px #000}
.hotbar button.r31-selected{border-color:#ffd47a!important;box-shadow:inset 0 0 0 2px #000,0 0 0 1px #ffd47a88,0 0 10px #ffc25a66!important}
.hotbar button.r31-selected kbd::after{content:' ◀';color:#ffd47a}
.hotbar button[data-cd]::after{content:'';position:absolute;inset:0;background:#000a;clip-path:inset(calc(100% - var(--cd,0%)) 0 0 0);pointer-events:none}
#dodge-pips{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);display:flex;gap:5px;pointer-events:none;z-index:12}
#dodge-pips i{width:22px;height:5px;border-radius:2px;background:#d8c08a;box-shadow:0 0 6px #ffd27a88;transition:background .2s}
#dodge-pips i.empty{background:#3a3226;box-shadow:none}
body[data-touch=true] #dodge-pips{display:none}
/* XP 띠: 패널 바로 위 6px, 레벨 버튼은 왼쪽 끝 작게 */
body[data-ui=d2]:not([data-touch=true]) .growth-hud{bottom:64px!important;box-sizing:border-box;width:calc(min(860px,100vw - 260px) - 48px)!important;height:14px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;padding:0 6px}
body[data-ui=d2]:not([data-touch=true]) .growth-hud button{font:11px var(--d2-serif);padding:0 6px;height:14px;line-height:12px;background:none;border:0;color:var(--d2-gold)}
body[data-ui=d2]:not([data-touch=true]) .growth-hud progress{height:5px}
body[data-ui=d2]:not([data-touch=true]) .growth-hud .xp-text{font-size:10px;opacity:.7}
body[data-ui=d2]:not([data-touch=true]) .potion-belt{display:none!important}
/* 키 안내 */
#key-guide{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:40;min-width:min(620px,92vw);padding:18px 26px;background:#090706f2;border:1px solid #7a5f38;box-shadow:0 0 0 4px #120d08,0 0 0 5px #8a6a3d66,0 20px 70px #000;font:13px var(--aw-serif);color:#d9c9a8}
#key-guide h2{margin:0 0 10px;font:600 17px var(--d2-serif,serif);letter-spacing:.2em;color:#ecd9a5;text-align:center}
#key-guide dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}#key-guide dt{color:#ffd98a;font-weight:700;text-align:right}#key-guide dd{margin:0}
/* Tab 전체 지도: 화면 위에 겹치는 반투명 선화(게임은 계속 진행) */
#world-map-overlay{position:fixed;inset:0;width:100vw;height:100vh;z-index:7;pointer-events:none;opacity:.92}
/* R31 커서 아래 적: 화면 위쪽 가운데 이름·체력(고전 ARPG식) */
#target-bar{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:12;min-width:260px;text-align:center;pointer-events:none;font:600 15px var(--d2-serif,serif);color:#f1e3c2;text-shadow:0 1px 3px #000}
#target-bar b{display:block;margin-bottom:3px;letter-spacing:.06em}#target-bar.boss b{color:#ffb04a}
#target-bar span{display:block;height:8px;background:#1a0807d9;border:1px solid #6d3a2a}#target-bar i{display:block;height:100%;background:linear-gradient(#d8332a,#7a0f0b)}
/* R31b: 직업 카드 이름·설명 줄바꿈(버튼 기본 block이 flex를 덮어 붙어 보이던 문제) */
#front-menu .front-panel .class-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:76px;padding:14px 16px;letter-spacing:.04em}
#front-menu .front-panel .class-card b{display:block;font-size:20px}#front-menu .front-panel .class-card small{display:block;font-size:12px;line-height:1.4;white-space:normal}
/* R31b: 로고 더 크게·위쪽 여백, 금속 하이라이트 스윕 + 느린 불빛 일렁임 */
#front-menu[data-style=r31]>.t31-logo{width:min(1120px,58vw)!important;top:1.2vh!important;animation:t31-logo-in 1.6s ease-out both,t31-ember 3.2s ease-in-out 1.6s infinite alternate}
@keyframes t31-ember{from{filter:drop-shadow(0 6px 18px #000) drop-shadow(0 0 22px #ff7a2a38)}to{filter:drop-shadow(0 6px 18px #000) drop-shadow(0 0 40px #ff8a3a77) brightness(1.08)}}
.t31-sweep{position:fixed;left:50%;top:1.2vh;transform:translateX(-50%);width:min(1120px,58vw);aspect-ratio:1939/508;pointer-events:none;-webkit-mask:url('art/ui/title/logo.webp') center/contain no-repeat;mask:url('art/ui/title/logo.webp') center/contain no-repeat;background:linear-gradient(105deg,transparent 40%,#fff6d655 50%,transparent 60%) -150% 0/250% 100% no-repeat;mix-blend-mode:screen;animation:t31-sweep 5.5s ease-in-out 2s infinite}
@keyframes t31-sweep{0%{background-position:-150% 0}45%,100%{background-position:150% 0}}
.t31-art{inset:12% -8% -10% -8%!important}
.t31-vignette{background:radial-gradient(ellipse 70% 65% at 50% 45%,transparent 35%,#000000c8 82%,#000 100%),linear-gradient(0deg,#000000ee 0,#000000a0 22%,transparent 46%),linear-gradient(180deg,#000000d0 0,#00000080 18%,transparent 32%)!important}
.t31-footer{font-size:9px!important;opacity:.7}

/* R32aud B7: 설정 '자막 끄기' — 컷신 자막 줄만 숨김(제목·건너뛰기는 그대로) */
body[data-subtitles=off] #r32q-cut .sub{display:none!important}

/* R32g: 하단 알림 최대 3줄(줄바꿈 유지) */
#toast{white-space:pre-line}

/* R32i: 지역 진입 배너가 떠 있는 동안 월드 라벨(입구·상인·보관함·체크포인트·NPC 이름·!) 숨김 — 겹침 방지 */
body:has(#zone-title.show) :is(.merchant-marker,.checkpoint-marker,.r32-npc-plate,.r32qst-mark,.r32g-entrance-label){visibility:hidden!important}

/* R32l: 옛 난이도 패널은 어떤 화면에서도 숨김(설정 창 뒤 잔재) */
#balance-controls{display:none!important}