:root{color-scheme:dark;--ink:#eee0bf;--gold:#b49a65;--panel:rgba(27,29,25,.87)}*{box-sizing:border-box}body{margin:0;background:#1d2524;color:var(--ink);font-family:Georgia,'Times New Roman',serif;overflow:hidden}button{font-family:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,canvas:focus-visible{outline:2px solid #f1d196;outline-offset:4px}#game{position:relative;width:100%;height:100dvh;min-height:360px;overflow:hidden}canvas{display:block;width:100%;height:100%;outline:none!important;touch-action:none}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#1d2524;font-size:28px;z-index:10}.hud{position:absolute;top:24px;left:25px;right:25px;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;pointer-events:none;text-shadow:0 2px 3px #000}.vitals{display:flex;align-items:center;width:335px;gap:8px}.portrait{width:59px;height:64px;display:grid;place-items:center;border:2px solid var(--gold);border-radius:45%;background:var(--panel);font-size:38px;box-shadow:0 2px 5px #171915}.vital-body{flex:1}.health-frame{height:22px;border:2px solid #b5a077;outline:2px solid #292b27;background:#49231e;position:relative}.health-frame #health-fill{height:100%;width:100%;background:linear-gradient(#c84837,#9c271f);transition:width .15s}.health-frame span{position:absolute;inset:0;text-align:center;font:14px/18px Georgia}.stats{display:flex;justify-content:space-between;gap:9px;font-size:13px;margin-top:8px;color:#e2d8c4}.brand{position:absolute;left:50%;transform:translateX(-50%);text-align:center;min-width:180px;padding:0 20px;background:linear-gradient(90deg,transparent,rgba(24,29,26,.7),transparent)}h1{font-weight:400;font-size:30px;margin:0;letter-spacing:1px}.ornament{font-size:15px;color:var(--gold);line-height:24px}.quest{width:270px;background:linear-gradient(90deg,var(--panel),rgba(27,29,25,.48));padding:12px 17px;border-top:1px solid var(--gold);border-bottom:1px solid #837651}.quest h2{font-size:19px;font-weight:400;color:#ead29c;margin:0 0 9px}.quest h2 span{color:#e9b453;padding-right:8px}.quest p{font-size:14px;line-height:1.5;margin:0}.quest #quest-progress{font-size:13px;color:#bfbca8;margin-top:5px}.location{position:absolute;left:50%;transform:translateX(-50%);top:92px;text-shadow:0 2px 4px #000;font-size:14px;color:#f0e6ce;letter-spacing:1px}.message{position:absolute;bottom:163px;left:50%;transform:translateX(-50%);text-align:center;max-width:560px;width:max-content;background:var(--panel);border:1px solid #8a7b5b;border-radius:2px;padding:11px 20px;font-size:15px;line-height:1.5;pointer-events:none}.bottom{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);text-align:center;max-width:100%;width:max-content}.actions{display:flex;justify-content:center;gap:9px;margin-bottom:16px}.actions button{position:relative;display:grid;place-items:center;width:65px;height:66px;background:linear-gradient(135deg,#34362e,#181e1c);border:2px solid #ad9463;box-shadow:0 0 0 2px #22251e,0 4px 10px #0005;border-radius:3px;transition:filter .15s,transform .15s}.actions button:hover{filter:brightness(1.3);transform:translateY(-2px)}.actions button:active{transform:translateY(1px)}.actions svg{height:42px;width:42px}.actions kbd{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);border-radius:4px;background:#242822;border:1px solid #b69d6b;font:14px Georgia;padding:2px 6px}.talk-symbol{font-size:38px;color:#edd191}.quantity{position:absolute;right:5px;bottom:5px;font-size:15px}.help>*{white-space:nowrap}.help{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;font-size:13px;text-shadow:0 1px 3px #000;background:#1d2524aa;padding:8px 12px;border-radius:2px}.help kbd{font-family:inherit;color:#e6d0a0;margin-right:4px}.utility{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;margin-top:8px;color:#d5cebb;font:12px system-ui,sans-serif;text-shadow:0 1px 3px #000}.utility>*{white-space:nowrap}.utility button{border:0;border-bottom:1px solid #928366;background:#1d252480;padding:3px 5px;font:13px system-ui,sans-serif}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:800px){.hud{top:14px;left:12px;right:12px;gap:10px}.vitals{width:215px}.portrait{width:42px;height:48px;font-size:29px}.stats{font-size:11px;gap:4px}.brand{top:63px}h1{font-size:25px}.quest{width:205px;padding:8px 10px}.quest h2{font-size:16px}.quest p{font-size:13px}.location{top:129px;font-size:12px}.help{display:none}.message{bottom:153px;font-size:14px;max-width:calc(100% - 28px);width:max-content;padding:9px 12px}.bottom{bottom:15px}.utility{flex-wrap:wrap;gap:8px}.actions{gap:7px}.actions button{width:52px;height:53px}.actions svg{width:34px;height:34px}}@media(max-width:450px){.vitals{width:172px}.portrait{display:none}.quest{width:174px}.quest h2{font-size:15px}.utility{max-width:310px}.utility span{flex-basis:100%}.message{bottom:171px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Keep the title clear of the quest panel on narrow screens. */
@media(max-width:800px){.brand{top:98px}.location{top:165px}}

/* Let the stats row wrap instead of overflowing when values grow on very narrow screens. */
@media(max-width:450px){.stats{flex-wrap:wrap;row-gap:2px;column-gap:6px}}
.health-frame.resting #health-fill{animation:rest-glow 1.6s ease-in-out infinite}@keyframes rest-glow{50%{filter:brightness(1.3) saturate(1.1)}}@media (prefers-reduced-motion:reduce){.health-frame.resting #health-fill{animation:none;filter:brightness(1.2)}}
.actions button.cooling{opacity:.5;filter:saturate(.4)}
@media(max-width:420px){.actions{gap:6px}.actions button{width:46px;height:47px}.actions svg{width:30px;height:30px}}

#loot-notice{position:absolute;top:145px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);width:max-content;padding:10px 16px;background:#1c291fee;border:1px solid #b49a65;color:#ead7ad;font-size:15px;text-align:center;pointer-events:none}#loot-notice[hidden]{display:none}@media(max-width:550px){#loot-notice{top:160px;font-size:14px}}
@media(max-width:450px){.utility{position:relative;z-index:2}}
@media(max-width:450px){.utility span{flex-basis:auto}.utility>span:first-child{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.actions button:hover,.actions button:active{transform:none}}

.chat{position:absolute;left:14px;bottom:225px;width:min(340px,calc(100% - 28px));z-index:3;font:14px/1.4 system-ui,sans-serif;transition:opacity .6s}
.chat-log{list-style:none;margin:0;padding:6px 9px;max-height:7.5em;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;background:#1d2524b3;border-left:2px solid #8a7b5b;border-radius:2px;pointer-events:none;text-shadow:0 1px 2px #000;overflow-wrap:anywhere}
.chat-log:empty{display:none}
.chat-log strong{color:#e6d0a0;font-weight:600}
.chat-log .self strong{color:#b8d4a6}
.chat-log .system{color:#d9a48f;font-style:italic}
.chat.quiet .chat-log{opacity:.35}
.chat.open .chat-log{max-height:12.6em;background:var(--panel)}

/* Combat Meter 2.0: two draggable/resizable generic meter windows. */
.combat-meters{position:absolute;inset:0;z-index:4;pointer-events:none}
.combat-meter{position:absolute;z-index:4;min-width:240px;min-height:150px;max-width:560px;max-height:620px;resize:both;overflow:auto;pointer-events:auto;padding:8px;background:rgba(20,25,21,.94);border:1px solid #8a7b5b;border-radius:3px;box-shadow:0 5px 18px #0007;font:13px/1.35 system-ui,sans-serif;text-shadow:0 1px 2px #000}
.combat-meter[hidden]{display:none}
.combat-meter.locked{resize:none}
.combat-meter-head{display:flex;align-items:center;gap:7px;border-bottom:1px solid #6f6045;padding-bottom:6px;cursor:move;user-select:none}
.combat-meter.locked .combat-meter-head{cursor:default}
.combat-meter-head>div{min-width:0;display:flex;flex-direction:column;flex:1}
.combat-meter-head strong{font:15px Georgia;color:#f0d796;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combat-meter-period{font-size:11px;color:#bcb39e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combat-meter button,.combat-meter select{background:#252b25;border:1px solid #6f6045;color:#d8ccb0;border-radius:2px;padding:3px 6px;font:12px system-ui,sans-serif}
.combat-meter .combat-meter-close,.combat-meter-menu-button{border:0;background:transparent;padding:2px 4px;font-size:15px}
.combat-meter-menu{margin:7px 0;padding:7px;background:#151a16;border:1px solid #ffffff16}
.combat-meter-menu[hidden]{display:none}
.combat-meter-menu label{display:grid;grid-template-columns:68px 1fr;gap:6px;align-items:center;margin:4px 0;color:#cfc5ae}
.combat-meter-menu select{min-width:0;width:100%}
.combat-meter-menu>div{display:flex;gap:6px;margin-top:7px}
.combat-meter-list{list-style:none;margin:7px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.combat-meter-row{position:relative;min-height:30px;padding:4px 6px;overflow:hidden;background:#151a16;border:1px solid #ffffff12;cursor:pointer}
.combat-meter-row:hover,.combat-meter-row:focus{outline:none;border-color:#9a875e}
.combat-meter-bar{position:absolute;inset:0 auto 0 0;width:0;background:rgba(180,154,101,.22);pointer-events:none}
.combat-meter-row.target .combat-meter-bar{background:rgba(196,72,55,.28)}
.combat-meter-row.taunt{border-color:#d5b35f}
.combat-meter-line{position:relative;z-index:1;display:flex;justify-content:space-between;gap:8px}
.combat-meter-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f1e3c5}
.combat-meter-value{white-space:nowrap;color:#d2c6ad;font-variant-numeric:tabular-nums}
.combat-meter-empty{margin:8px 2px 2px;color:#9f998b;font-size:12px}
.combat-meter-breakdown{margin-top:8px;padding-top:7px;border-top:1px solid #6f6045}
.combat-meter-breakdown[hidden]{display:none}
.combat-meter-breakdown-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.combat-meter-breakdown-head strong{color:#f0d796}
.combat-meter-breakdown p{margin:4px 0 6px;color:#cfc5ae}
.combat-meter-abilities{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.combat-meter-abilities li{display:flex;justify-content:space-between;gap:8px;padding:2px 0;border-bottom:1px solid #ffffff0d}
.combat-meter-extra{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;margin-top:7px;color:#bcb39e;font-size:11px}
.combat-meter-extra b{color:#e6d8b9}
@media(max-width:800px){.combat-meter{max-width:calc(100vw - 16px);max-height:45vh}.combat-meters{z-index:7}}
.chat-form{display:flex;gap:6px;margin-top:6px}
.chat-form[hidden]{display:none}
.chat-form input{flex:1;min-width:0;background:#141917;color:var(--ink);border:1px solid var(--gold);border-radius:2px;padding:7px 9px;font:inherit}
.chat-form button{border:1px solid var(--gold);background:#2b3029;color:var(--ink);padding:6px 12px;border-radius:2px;font:inherit}
@media(max-width:800px){.chat{bottom:auto;top:190px;left:12px;width:min(300px,calc(100% - 24px));font-size:14px}.chat-log{max-height:4.4em}.chat.open .chat-log{max-height:8.5em}}
@media(prefers-reduced-motion:reduce){.chat{transition:none}}

.chat-log .old{opacity:.7}

.group{position:absolute;left:14px;top:96px;z-index:3;background:var(--panel);border:1px solid #8a7b5b;border-radius:2px;padding:8px 12px;font:14px/1.5 system-ui,sans-serif;min-width:140px}
.group[hidden]{display:none}
.group h2{font:13px system-ui,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#bba77b;margin:0 0 4px}
.group ul{list-style:none;margin:0 0 6px;padding:0;color:#b8d4a6}
.group button{border:0;border-bottom:1px solid #928366;background:transparent;color:#d5cebb;padding:2px 0;font:13px system-ui,sans-serif}
@media(max-width:800px){.group{top:140px;left:auto;right:12px;min-width:0;padding:6px 10px}}
body.page{overflow:auto}
.page-text{max-width:680px;margin:0 auto;padding:24px 16px 56px;font:16px/1.65 Georgia,serif}
.page-text h1{font-weight:400;font-size:30px;margin:12px 0 8px}
.page-text h2{font-weight:400;font-size:20px;color:#e6d0a0;margin:28px 0 6px}
.page-text a{color:#e6d0a0}
.page-text ul{padding-left:20px}

.chat-log .whisper,.chat-log .whisper strong{color:#d6b8e8}

.minimap{position:absolute;right:14px;top:112px;z-index:2;width:200px;height:auto;border:1px solid var(--gold);border-radius:2px;box-shadow:0 4px 14px #0007;cursor:zoom-in;transform:scale(var(--minimap-scale,1));transform-origin:top right;transition:transform .15s}
.minimap[hidden]{display:none}
@media(max-width:800px){.minimap{width:150px;height:auto;top:auto;bottom:250px;right:12px;transform-origin:bottom right}}
/* Two rows keep all five actions reachable without shrinking their touch targets. */
@media(max-width:420px){.bottom{width:100%}.actions{display:grid;grid-template-columns:repeat(5,48px);gap:6px;width:max-content;margin-left:auto;margin-right:auto}.actions button{width:48px;height:48px}.actions svg{width:30px;height:30px}.actions kbd{font-size:12px;padding:1px 4px}.utility{margin-left:auto;margin-right:auto}.message{bottom:300px}.minimap{bottom:356px}}
.chat-log .emote{font-style:italic;color:#e9dcc0}
.tips{position:absolute;left:14px;top:96px;z-index:3;max-width:280px;background:var(--panel);border:1px solid var(--gold);border-radius:2px;padding:10px 12px;font:14px/1.5 system-ui,sans-serif}
.tips[hidden]{display:none}
.tips.tips-trick{border-color:#e0b85c;box-shadow:0 0 0 1px #e0b85c55,0 4px 14px #0008}
.tips.tips-trick .tips-step{color:#f0cf7a}
.tips p{margin:0 0 6px}
.tips .tips-step{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#bba77b}
.tips button{background:transparent;border:0;border-bottom:1px solid #928366;color:#d5cebb;padding:2px 0;font:14px system-ui,sans-serif}
@media(max-width:800px){.tips{top:215px;left:12px;right:12px;max-width:none;font-size:14px;padding:8px 10px}}
@media(max-width:450px){.xp-next{display:none}.stats{flex-wrap:nowrap;white-space:nowrap}}

/* 3D view (?3d): WebGL behind, the 2D canvas on top for clicks and overlays */
#world3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.view-3d #world{position:relative;background:transparent}

/* Boxes show for a moment and fade, so text never covers the world for long. */
.brand{opacity:0;transition:opacity .8s;pointer-events:none}.brand.show{opacity:1}
.brand-area{margin:2px 0 0;font-size:15px;letter-spacing:2px;color:#f0e6ce}
.message{opacity:0;transition:opacity .6s}.message.show{opacity:1}
.menu-toggle{display:none}
/* Phones: the guide and the map sit under the top bar, side by side; the small buttons fold into a menu. */
@media(max-width:800px){
.location{top:64px;left:12px;transform:none;font-size:12px;text-align:left}
/* The place line wraps short of the map (the weather made it longer: "Dusk · Storm"). */
.location{max-width:calc(100% - 140px);line-height:1.35}
.brand{top:34vh}
.tips{top:100px;left:12px;right:132px;max-width:none}
.minimap{width:110px;top:100px;bottom:auto;right:12px;transform-origin:top right}
.menu-toggle{display:inline-block;margin:10px auto 0;border:1px solid #70674d;background:var(--panel);padding:6px 18px;font:14px system-ui,sans-serif;border-radius:2px}
.utility{display:none}
.bottom.menu-open .utility{display:flex;background:var(--panel);border:1px solid #70674d;padding:8px;border-radius:2px}
}
/* A smaller, lighter HUD: the world is the main thing on screen. */
#game:has(.brand.show) .location{opacity:0}
.location{transition:opacity .4s}
.vitals{width:330px}.stats{white-space:nowrap}.portrait{width:48px;height:52px;font-size:30px}.health-frame{height:18px}
.quest{width:230px;padding:8px 12px;background:linear-gradient(90deg,rgba(27,29,25,.72),rgba(27,29,25,.3))}
.quest h2{font-size:15px;margin:0 0 4px}.quest p{font-size:14px;line-height:1.4}#quest-progress{font-size:12.5px;margin-top:3px}
.tips{max-width:240px;padding:7px 10px;font-size:14px;line-height:1.4;background:rgba(27,29,25,.78)}.tips .tips-step{font-size:11.5px;letter-spacing:1.5px}.tips p{margin:0 0 4px}
.minimap{width:160px}
.message{font-size:14px;padding:7px 14px;background:rgba(27,29,25,.8)}
.actions button{width:54px;height:55px}.actions svg{width:32px;height:32px}
.help{font-size:13px;gap:14px;padding:4px 10px;background:#1d252466}
@media(max-width:800px){
.vitals{width:160px}.health-frame{height:16px}
.quest{width:150px;padding:6px 8px}.quest h2{font-size:14px;margin:0 0 2px}.quest p{font-size:12.5px}#quest-progress{font-size:11.5px}
.tips{top:92px;right:122px;font-size:12.5px;padding:5px 8px}.tips .tips-step{font-size:10.5px}.tips button{font-size:12.5px}
.minimap{width:100px;top:92px;transform-origin:top right}
.message{font-size:13px;padding:5px 10px}
.actions button{width:42px;height:42px}.actions svg{width:24px;height:24px}
.menu-toggle{padding:4px 14px;font-size:14px;margin-top:6px}
}
/* Touch: holding a button must not start text selection or the copy menu (iOS). */
#game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#game input,#game textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* Between zones: a short dark fade with the zone's name hides the new map being built. */
.zone-fade{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:#0e1210;color:#eadbb8;font:22px Georgia,serif;letter-spacing:2px;opacity:0;pointer-events:none;transition:opacity .35s}.zone-fade.show{opacity:.92}
/* Longer zone names in the banner stay on one line on phones. */
@media(max-width:800px){.brand h1{font-size:22px;white-space:nowrap}}

/* The map (K): fills the screen, a header with the zone's name and the views, the map below. */
.world-map{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;background:#141a16f5;color:var(--ink)}
.world-map[hidden]{display:none}
.world-map-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--gold);background:linear-gradient(#262c26,#1b211d)}
.world-map-head h2{margin:0;font-weight:400;font-size:24px;color:#f0d796}
.world-map-head p{margin:2px 0 0;font-size:14px;color:#c9bfa6}
.world-map-buttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.world-map-buttons button{background:#2a302a;border:1px solid var(--gold);padding:7px 12px;font-size:15px;border-radius:2px}
.world-map-buttons button[aria-pressed=true]{background:#5a4a2c;color:#fff2cc}
.world-map canvas{flex:1;min-height:0;width:100%;height:100%;display:block;cursor:pointer}
.world-map-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;padding:10px 14px;border-top:1px solid var(--gold);font:13px system-ui,sans-serif;background:#1b211d;color:#f3e6c4}
.world-map-legend[hidden]{display:none}
@media(max-width:600px){.world-map-head{padding:8px 10px;flex-wrap:wrap}.world-map-head h2{font-size:18px}.world-map-buttons button{padding:6px 9px;font-size:14px}}

/* Dragging gear between the bags and the character window (src/drag.js). */
.draggable{touch-action:none;cursor:grab}
.drag-ghost{position:fixed;z-index:60;pointer-events:none;opacity:.9;transform:scale(1.08);box-shadow:0 6px 16px #000a}

/* Unit frames (src/unit-frames.js): on a big computer screen your health sits left of the action bar
   and your foe's right of it, as in WoW; the health bar at the top then goes. Phones keep it as it was. */
.unit-frame{display:none}
@media (min-width:1100px) and (min-height:600px){
  .actions{position:relative;width:max-content;margin-left:auto;margin-right:auto}
  .unit-frame{display:block;position:absolute;bottom:4px;width:250px;padding:5px 7px 6px;background:linear-gradient(#262b24f0,#161a17f0);border:2px solid #ad9463;box-shadow:0 0 0 2px #22251e,0 4px 10px #0005;border-radius:3px;text-align:left;font:14px Georgia;color:#eadbb7}
  .unit-frame.self{right:calc(100% + 22px)}
  .unit-frame.target{left:calc(100% + 22px);visibility:hidden}
  .unit-frame.target.on{visibility:visible}
  .unit-head{display:flex;justify-content:space-between;margin-bottom:4px}
  .unit-bar{position:relative;height:20px;border:1px solid #b5a077;background:#49231e}
  .unit-fill{height:100%;width:100%;background:linear-gradient(#c84837,#9c271f);transition:width .15s}
  .unit-bar span{position:absolute;inset:0;text-align:center;line-height:18px;text-shadow:0 1px 2px #000}
  .unit-bar.resting .unit-fill{animation:rest-glow 1.6s ease-in-out infinite}
  .vitals .health-frame{display:none}
}
@media (min-width:1100px) and (min-height:600px) and (prefers-reduced-motion:reduce){.unit-bar.resting .unit-fill{animation:none;filter:brightness(1.2)}}
/* Abilities (src/abilities.js): two buttons in the bar with their wait, and the class's resource. */
.actions .ability .ability-icon svg{width:42px;height:42px}
.actions .ability.cooling{filter:grayscale(.8) brightness(.7)}
.ability-wait{position:absolute;inset:0;display:grid;place-items:center;font:600 18px Georgia;color:#fff;text-shadow:0 1px 3px #000;pointer-events:none}
.resource-frame{height:9px;margin-top:3px;border:1px solid #6d5a3a;background:#1a1d24;position:relative}
.resource-frame #resource-fill{height:100%;width:0;background:linear-gradient(#5a8ad8,#2f5aa0);transition:width .15s}
.resource-frame.rage #resource-fill{background:linear-gradient(#d85a3a,#a02f1f)}.resource-frame.focus #resource-fill{background:linear-gradient(#e0b84a,#a8822a)}
.resource-frame span{position:absolute;inset:0;font:11px/9px Georgia;text-align:center;color:#fff;text-shadow:0 1px 1px #000}
.unit-bar.resource{height:12px;margin-top:3px;background:#1a1d24}.unit-bar.resource .unit-fill{background:linear-gradient(#5a8ad8,#2f5aa0)}
.unit-bar.resource.rage .unit-fill{background:linear-gradient(#d85a3a,#a02f1f)}.unit-bar.resource.focus .unit-fill{background:linear-gradient(#e0b84a,#a8822a)}
.unit-bar.resource span{line-height:11px;font-size:12px}
@media(max-width:420px){.actions{grid-template-columns:repeat(6,46px)!important}.actions button{width:46px!important;height:46px!important}.actions .ability .ability-icon svg{width:30px;height:30px}}
/* The XP bar under the action buttons (hud.js xpBar); the rested reserve shows ahead in blue. */
.xp-bar{position:relative;width:min(560px,calc(100vw - 24px));height:12px;margin:-8px auto 10px;background:#1a1d1a;border:1px solid #6d5a3a;box-shadow:0 0 0 1px #22251e}
.xp-bar #xp-bar-fill,.xp-bar #xp-bar-rest{position:absolute;left:0;top:0;bottom:0;width:0;transition:width .3s}
.xp-bar #xp-bar-fill{background:linear-gradient(#b48ce0,#7a4fb0)}.xp-bar #xp-bar-rest{background:#3a5a8a99}
.xp-bar span{position:absolute;inset:0;text-align:center;font:12px/11px Georgia;color:#f3e6c4;text-shadow:0 1px 2px #000}
@media (min-width:1100px) and (min-height:600px){.vitals .resource-frame{display:none}}
/* Party frames (group-ui.js): each mate with a round portrait, name, level, health and resource. */
.group{left:14px;top:104px;background:none;border:0;padding:0;min-width:0;font:14px Georgia}
.group ul.party{display:flex;flex-direction:column;gap:6px;margin:0 0 6px;color:var(--ink)}
.party-frame{display:flex;align-items:center;gap:6px;width:196px}
.party-frame.far{opacity:.5}
.party-portrait{flex:0 0 40px;height:40px;border-radius:50%;border:2px solid #ad9463;background:radial-gradient(#3a4036,#151915);display:grid;place-items:center;font-size:19px;box-shadow:0 2px 4px #0008;position:relative}
.party-level{position:absolute;bottom:-4px;right:-4px;background:#1b211d;border:1px solid #ad9463;border-radius:8px;font:12px Georgia;padding:0 4px;color:#f0d796}
.party-bars{flex:1;display:flex;flex-direction:column;gap:2px;background:#151915e6;border:1px solid #6d5a3a;padding:3px 4px}
.party-name{font-size:13px;color:#f3e6c4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.party-bar{position:relative;height:10px;background:#2a1a17}
.party-bar>div{height:100%;transition:width .2s}
.party-bar.hp>div{background:linear-gradient(#5fbf4f,#2f8a2a)}
.party-bar.res{height:6px;background:#1a1d24}.party-bar.res>div{background:linear-gradient(#5a8ad8,#2f5aa0)}
.party-bar.res.rage>div{background:linear-gradient(#d85a3a,#a02f1f)}.party-bar.res.focus>div{background:linear-gradient(#e0b84a,#a8822a)}
.party-bar span{position:absolute;inset:0;font:11px/10px Georgia;text-align:center;color:#fff;text-shadow:0 1px 1px #000}
.party-frame.down .party-portrait{filter:grayscale(1)}
@media(max-width:800px){.group{top:150px;left:8px;right:auto}.party-frame{width:150px}.party-portrait{flex-basis:30px;height:30px;font-size:15px}}
.group #group-leave{background:#151915e6;border:1px solid #6d5a3a;padding:2px 8px;font:13px Georgia;color:#d5cebb}
/* The special attack on X: set apart at the end of the bar, with a warmer frame. */
.actions .ability.special{margin-left:10px;border-color:#e0b84a;box-shadow:0 0 0 2px #22251e,0 0 10px #e0b84a55}
.actions .draggable{cursor:pointer}.actions .drag-ghost{opacity:.85}
@media(max-width:420px){.actions{grid-template-columns:repeat(8,40px)!important;gap:4px!important}.actions button{width:40px!important;height:40px!important}.actions .ability.special{margin-left:0}.actions svg,.actions .ability .ability-icon svg{width:26px!important;height:26px!important}}
/* Friends (friends-ui.js). */

/* The menu on a party frame, and the teleport's countdown above the action bar. */
.party-menu{position:absolute;z-index:20;display:flex;flex-direction:column;gap:4px;background:#1b211df2;border:1px solid #ad9463;padding:8px;min-width:150px;font:14px Georgia}
.party-menu[hidden]{display:none}.party-menu strong{font-weight:400;color:#f0d796}
.party-menu button{background:#aa8b52;border:0;color:#17201b;padding:6px 8px;font-size:14px;text-align:left}.party-menu button.secondary{background:#3a3f37;color:var(--ink)}
.player-menu{position:fixed;z-index:60;min-width:180px;box-shadow:0 8px 24px #0008}
.player-menu button:hover,.player-menu button:focus-visible{outline:1px solid #f0d796;filter:brightness(1.08)}
.cast-bar{position:absolute;left:50%;bottom:205px;transform:translateX(-50%);width:min(320px,calc(100% - 40px));height:22px;background:#1a1d1a;border:2px solid #ad9463;z-index:4}
.cast-bar[hidden]{display:none}
.cast-bar #cast-fill{height:100%;width:0;background:linear-gradient(#8ab8e8,#3f6fb0)}
.cast-bar span{position:absolute;inset:0;text-align:center;font:14px/18px Georgia;color:#fff;text-shadow:0 1px 2px #000}
.cast-bar button{position:absolute;right:-30px;top:-2px;width:24px;height:22px;padding:0;background:#5a2a20;border:1px solid #ad9463;color:#f3e6c4}
/* Buffs (src/buffs.js): small icons with seconds left, under one's own health and on party frames. */
.buffs{display:flex;gap:3px;margin-top:3px;min-height:0}
.buff{position:relative;width:20px;height:20px;background:#151915e6;border:1px solid #ad9463;border-radius:3px;display:grid;place-items:center}
.buff svg{width:16px;height:16px}
.buff-time{position:absolute;right:-3px;bottom:-5px;font:11px Georgia;color:#fff;text-shadow:0 1px 2px #000}
.party-frame .buff{width:16px;height:16px}.party-frame .buff svg{width:12px;height:12px}
#vital-buffs .buffs{margin-top:5px}

.dungeon-ready{border-color:#e0b84a!important;box-shadow:0 0 18px #e0b84a55}
/* A set item's line: the set, how much is worn, and its bonuses. */

/* Narrow screens: a dish has four buttons (eat, on Q, sell, sell all), two to a row. */

/* Q waiting after a meal (src/quick-slot.js), greyed like an ability. */
.actions #heal{position:relative}.actions #heal.cooling{filter:grayscale(.8) brightness(.7)}
/* "Udstyr" in another knight's menu (src/inspect-ui.js): their figure beside what they wear. */

@keyframes loot-in{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
html:has(#game){overflow:hidden}.quest-tracker{list-style:none;margin:6px 0 0;padding:0;font:13px/1.4 system-ui,sans-serif}.quest-tracker li{margin-top:4px;color:#d9d2bd}.quest-tracker li strong{color:#ead29c;font-weight:600}.quest-tracker li.ready strong{color:#9fe08f}
/* Quest tracker, quest log and giver windows (src/quest-ui.js). */
.quest h2{display:flex;align-items:center;gap:6px;white-space:nowrap}.quest-panel-log{pointer-events:auto;margin-left:auto;background:#2a2f27cc;border:1px solid #8a7650;color:#ead29c;font:12px system-ui,sans-serif;padding:3px 8px;border-radius:3px;text-shadow:none}.quest-panel-log:hover{background:#3a3b2ecc}
.quest-tracker li{display:flex;flex-direction:column;margin-top:6px;padding-left:8px;border-left:2px solid #b49a6588}.quest-tracker li.ready{border-left-color:#8fe08a}.quest-tracker li span{font-size:12.5px;color:#cfc6ae}.quest-tracker li.ready span{color:#9fe08f}
/* The admin window (src/admin-ui.js). */

/* Compact MMO HUD pass */
/* Information should feel like overlays, not big modal blocks. Pure info must not steal world clicks. */
:root{
  --hud-glass:rgba(18,23,20,.72);
  --hud-glass-soft:rgba(18,23,20,.52);
  --hud-line:rgba(180,154,101,.48);
}

/* Click-through informational surfaces. Explicit controls opt back in below. */
.brand,.location,.message,#loot-notice,.chat-log,
.combat-meter-list,.combat-meter-sub,.combat-meter-empty,
.unit-frame,.quest-tracker{pointer-events:none}
#unit-self{pointer-events:auto;cursor:pointer} /* a click sends heals back to oneself */
.quest{pointer-events:none}
.quest button,.combat-meter button,.chat-form,.chat-form *,
.party-menu,.party-menu *{pointer-events:auto}

/* Top HUD: smaller footprint and lighter framing. */
.hud{top:14px;left:16px;right:16px;gap:14px}
.vitals{width:286px;gap:6px}
.portrait{width:48px;height:52px;border-width:1px;font-size:30px;box-shadow:0 3px 12px #0005}
.health-frame{height:18px;border-width:1px;outline-width:1px}
.health-frame span{font:12px/16px Georgia}
.resource-frame{height:7px}
.resource-frame span{font-size:9px;line-height:6px}
.stats{font-size:11px;margin-top:5px;gap:7px}

.brand{min-width:140px;padding:0 12px;background:linear-gradient(90deg,transparent,rgba(18,23,20,.48),transparent)}
.brand h1{font-size:24px;letter-spacing:.6px}
.ornament{font-size:11px;line-height:17px;opacity:.7}
.location{top:67px;font-size:12px;letter-spacing:.5px;color:#e9dfc8;opacity:.9}

/* Quest tracker: slim translucent card rather than a large rectangle. */
.quest{
  width:236px;
  padding:7px 10px 8px;
  background:linear-gradient(100deg,rgba(18,23,20,.74),rgba(18,23,20,.26));
  border:0;
  border-left:2px solid var(--hud-line);
  border-radius:0 6px 6px 0;
  box-shadow:0 5px 18px #0003;
}
.quest h2{font-size:15px;margin:0 0 4px;gap:4px}
.quest h2>span:first-child{font-size:11px;padding-right:2px;opacity:.7}
.quest p{font-size:12px;line-height:1.3}
.quest #quest-progress{font-size:11px;margin-top:3px}
.quest-panel-log{padding:2px 6px;font-size:10px;border-color:#8a765077;background:#252a24aa}
.quest-tracker{margin-top:3px;font-size:11px;line-height:1.28}
.quest-tracker li{margin-top:4px;padding-left:6px;border-left-width:1px}
.quest-tracker li span{font-size:10.5px}

/* Short status chips instead of big blocks. */
.message{
  bottom:145px;
  max-width:min(440px,calc(100% - 32px));
  padding:6px 11px;
  font-size:12px;
  line-height:1.3;
  background:var(--hud-glass);
  border:1px solid #8a7b5b77;
  border-radius:8px;
  box-shadow:0 5px 16px #0004;
  backdrop-filter:blur(3px);
}
#loot-notice{
  top:104px;
  padding:6px 10px;
  font-size:12px;
  border-radius:8px;
  background:rgba(20,31,23,.82);
  border-color:#b49a6588;
  box-shadow:0 5px 18px #0004;
}

/* Bottom action area: smaller but still comfortable to click. */
.bottom{bottom:10px}
.actions{gap:6px;margin-bottom:12px}
.actions button{
  width:56px;height:57px;
  border-width:1px;
  border-radius:5px;
  box-shadow:0 0 0 1px #22251e,0 3px 9px #0005;
}
.actions svg,.actions .ability .ability-icon svg{width:36px;height:36px}
.actions kbd{bottom:-8px;font-size:11px;padding:1px 4px}
.quantity{right:4px;bottom:3px;font-size:12px}
.ability-wait{font-size:16px}
.xp-bar{height:9px;margin:-6px auto 7px}
.xp-bar span{font-size:10px;line-height:8px}

/* Compact self/target frames. */
@media (min-width:1100px) and (min-height:600px){
  .unit-frame{
    width:205px;
    padding:4px 6px 5px;
    border-width:1px;
    box-shadow:0 3px 10px #0005;
    font-size:12px;
    border-radius:5px;
  }
  .unit-frame.self{right:calc(100% + 14px)}
  .unit-frame.target{left:calc(100% + 14px)}
  .unit-head{margin-bottom:3px}
  .unit-bar{height:16px;border-width:1px}
  .unit-bar span{line-height:14px;font-size:11px}
  .unit-bar.resource{height:8px}
  .unit-bar.resource span{line-height:7px;font-size:9px}
}

/* Chat looks like floating text until the player actually opens it. */
.chat{left:12px;bottom:190px;width:min(310px,calc(100% - 24px));font-size:12px}
.chat-log{
  padding:4px 7px;
  max-height:6.6em;
  background:rgba(18,23,20,.48);
  border-left:1px solid #8a7b5b99;
  border-radius:0 5px 5px 0;
}
.chat.open .chat-log{max-height:11em;background:rgba(18,23,20,.82)}
.chat-form{pointer-events:auto;margin-top:4px}
.chat-form input{padding:5px 7px;font-size:12px}
.chat-form button{padding:5px 9px;font-size:12px}

/* Combat meter: substantially smaller and less block-like. */
.combat-meter{
  right:12px;
  bottom:190px;
  width:218px;
  padding:6px;
  border-color:#8a7b5b88;
  border-radius:6px;
  box-shadow:0 4px 14px #0005;
  background:rgba(18,23,20,.78);
  font-size:11px;
}
.combat-meter-head{gap:5px;padding-bottom:4px;border-bottom-color:#6f604577}
.combat-meter-head strong{font-size:12px}
.combat-meter button{padding:2px 5px;font-size:10px}
.combat-meter-sub{margin:4px 1px 3px;font-size:10px}
.combat-meter-list{gap:2px}
.combat-meter-row{min-height:23px;padding:2px 4px;border-color:#ffffff0c;background:#151a1699}
.combat-meter-line{gap:5px}
.combat-meter-flags{font-size:9px}
.combat-meter-empty{margin:5px 1px 1px;font-size:10px}

/* Party frames are information first; keep the actual party menu interactive. */
.group{top:88px;font-size:12px}
.party-frame{gap:5px;width:168px}
.party-portrait{flex-basis:32px;height:32px;border-width:1px;font-size:15px}
.party-level{font-size:9px;padding:0 3px}
.party-bars{gap:1px;padding:2px 3px;border-color:#6d5a3a99;background:rgba(18,23,20,.72)}
.party-name{font-size:11px}
.party-bar{height:8px}
.party-bar.res{height:5px}
.party-bar span{font-size:9px;line-height:7px}
.party-frame .buff{width:14px;height:14px}
.party-frame .buff svg{width:10px;height:10px}
.group #group-leave{padding:2px 6px;font-size:11px}

/* Buffs and small transient info. */
.buff{width:18px;height:18px;border-width:1px}
.buff svg{width:14px;height:14px}
.buff-time{font-size:9px;right:-2px;bottom:-4px}
.cast-bar{bottom:174px;width:min(270px,calc(100% - 40px));height:17px;border-width:1px}
.cast-bar span{font-size:11px;line-height:15px}
.cast-bar button{right:-25px;width:21px;height:19px;font-size:11px}

/* Player/context menus should feel like menus, not dialog boxes. */
.party-menu{
  gap:2px;
  min-width:140px;
  padding:5px;
  border-color:#ad946388;
  border-radius:6px;
  background:rgba(18,23,20,.94);
  box-shadow:0 7px 22px #0007;
  font-size:12px;
}
.party-menu button{padding:4px 7px;font-size:12px;border-radius:3px}
.player-menu{min-width:158px}

/* Info tooltips/cards: less padding and lighter chrome. */

/* Small dialogs are genuinely small now. Larger inventory/character windows keep their own layouts. */

/* Mobile keeps the same compact philosophy without crushing controls. */
@media(max-width:800px){
  .hud{top:9px;left:8px;right:8px}
  .vitals{width:190px}
  .portrait{width:36px;height:40px}
  .quest{width:185px;padding:6px 8px}
  .quest h2{font-size:13px}
  .quest p{font-size:11px}
  .brand{top:76px}
  .brand h1{font-size:20px}
  .location{top:137px;font-size:10px}
  .message{bottom:138px;font-size:11px;padding:5px 8px}
  .chat{top:162px;bottom:auto;width:min(260px,calc(100% - 16px));font-size:11px}
  .combat-meter{top:214px;right:8px;bottom:auto;width:min(205px,calc(100% - 16px));max-height:34vh}
}

/* Dungeon completion results */

/* Combat feedback polish */
.unit-frame.target.on{
  border-color:#b49a65aa;
  box-shadow:0 3px 10px #0005,0 0 0 1px #b49a6533;
}
.unit-frame.target.on.boss{
  border-color:#dfaa61;
  box-shadow:0 3px 12px #0006,0 0 10px #d88d3633;
}
.unit-frame.target.on.danger{
  border-color:#e66a4e;
  box-shadow:0 3px 12px #0007,0 0 12px #e64f303f;
}
.unit-frame.target.on.danger .unit-head{color:#ffd0c6}
.buff{position:relative}
.buff-buff-mythic,.buff-mythic{border-color:#b56cff!important;box-shadow:0 0 6px #b56cff55}

/* Finished MMO chat system */
.chat{
  width:min(370px,calc(100% - 24px));
  font:12px/1.35 system-ui,sans-serif;
}
.chat-tabs{
  display:none;
  gap:3px;
  align-items:center;
  margin-bottom:4px;
  pointer-events:auto;
}
.chat.open .chat-tabs{display:flex}
.chat-tabs button{
  position:relative;
  padding:3px 6px;
  border:1px solid #5f5644;
  border-radius:3px;
  background:rgba(18,23,20,.86);
  color:#bdb39d;
  font:10px system-ui,sans-serif;
}
.chat-tabs button[aria-selected=true]{
  color:#f0d796;
  border-color:#a88d57;
  background:#332f24e8;
}
.chat-tabs button.unread::after{
  content:attr(data-unread);
  position:absolute;
  top:-7px;
  right:-6px;
  min-width:13px;
  height:13px;
  padding:0 2px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#b75848;
  color:#fff;
  font:8px/1 system-ui,sans-serif;
  box-shadow:0 1px 3px #0009;
}
.chat-log{
  max-height:7em;
  padding:5px 7px;
  gap:1px;
  background:linear-gradient(90deg,rgba(16,21,18,.68),rgba(16,21,18,.28));
  border-left:1px solid #8a7b5b99;
  border-radius:0 5px 5px 0;
}
.chat.open .chat-log{
  max-height:190px;
  overflow-y:auto;
  overscroll-behavior:contain;
  pointer-events:auto;
  background:rgba(15,20,17,.9);
  border:1px solid #6b604a;
  scrollbar-width:thin;
}
.chat-log li{
  padding:1px 2px;
  color:#ddd4c1;
}
.chat-log li[hidden]{display:none}
.chat-time{
  display:none;
  margin-right:5px;
  color:#746f64;
  font-size:9px;
  font-variant-numeric:tabular-nums;
}
.chat.open .chat-time{display:inline}
.chat-label{
  display:inline-block;
  min-width:42px;
  margin-right:2px;
  color:#8e8778;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.chat-name{
  display:inline;
  padding:0;
  border:0;
  background:none;
  color:#e6d0a0;
  font:600 inherit;
  cursor:pointer;
}
.chat-name:hover,.chat-name:focus-visible{color:#fff0bd;text-decoration:underline;outline:0}
.chat-log .self .chat-name{color:#a9d299}
.chat-log .party,.chat-log .party .chat-name{color:#87c9e8}
.chat-log .party .chat-label{color:#68aeca}
.chat-log .whisper,.chat-log .whisper .chat-name{color:#d9a9f0}
.chat-log .whisper .chat-label{color:#b97cd6}
.chat-log .system{color:#d8a38e;font-style:italic}
.chat-log .system .chat-label{color:#ba7562}
.chat-log .old{opacity:.58}
.chat-log .emote{font-style:italic;color:#e6dcc3}
.chat-form{
  display:flex;
  gap:4px;
  margin-top:4px;
  pointer-events:auto;
}
.chat-form[hidden]{display:none}
.chat-form select{
  flex:0 0 72px;
  min-width:0;
  padding:5px 4px;
  border:1px solid #6d6150;
  border-radius:3px;
  background:#171d19;
  color:#d9ceb5;
  font:11px system-ui,sans-serif;
}
.chat-form input{
  padding:5px 7px;
  font-size:12px;
}
.chat-form button{
  padding:5px 8px;
  font-size:11px;
}
.chat-help{
  display:none;
  margin:3px 2px 0;
  color:#847e70;
  font:9px/1.25 system-ui,sans-serif;
  pointer-events:none;
}
.chat.open .chat-help{display:block}
.chat.quiet:not(.open) .chat-log{opacity:.28}
#chat-button{position:relative}
#chat-button.chat-unread::after{
  content:attr(data-unread);
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:14px;
  height:14px;
  padding:0 2px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#b75848;
  color:white;
  font:9px/1 system-ui,sans-serif;
  box-shadow:0 1px 4px #0008;
}
@media(max-width:800px){
  .chat{top:162px;left:8px;width:min(340px,calc(100% - 16px));font-size:11px}
  .chat.open .chat-log{max-height:150px}
  .chat-tabs{overflow-x:auto;padding-top:7px}
  .chat-tabs button{white-space:nowrap}
}

/* Direct-message composer */
.chat-recipient{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:5px;
  max-width:155px;
  padding:3px 5px 3px 7px;
  border:1px solid #9b6cb2;
  border-radius:4px;
  background:rgba(55,34,65,.92);
  color:#e2b7f1;
  font:10px/1.2 system-ui,sans-serif;
}
.chat-recipient[hidden]{display:none}
.chat-recipient span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chat-recipient strong{color:#f1d5fa;font-weight:700}
.chat-recipient button{
  flex:0 0 18px;
  width:18px;
  height:18px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#8a587f;
  color:#fff;
  font:14px/17px system-ui,sans-serif;
  cursor:pointer;
}
.chat-recipient button:hover,.chat-recipient button:focus-visible{background:#ad73a4;outline:1px solid #f0d2ff}
.chat-form:has(.chat-recipient:not([hidden])) input{border-color:#9b6cb2;box-shadow:inset 0 0 0 1px #9b6cb222}

/* The Respawn button shown while one is down (src/game.js updateRespawn). */
.respawn-panel{position:fixed;left:50%;top:calc(64% + 24px);transform:translateX(-50%);z-index:45;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.respawn-panel[hidden]{display:none}
.respawn-panel p{margin:0;color:#e9cf98;font:16px Georgia,serif;text-shadow:0 1px 3px #000}
.respawn-panel button{font-size:18px;padding:10px 28px;border:1px solid #a38b56;border-radius:2px;background:#4a3d22;color:#f4e6bf;cursor:pointer}
.respawn-panel button:disabled{opacity:.45;cursor:default}
/* The bag and character panels sit at the side; the world stays bright behind them. An id rule above had out-ranked the class rule that made the bag's backdrop clear. */
#inventory-dialog::backdrop,.character-dialog::backdrop{background:transparent}
/* Party frames (src/group-ui.js): the targeted mate, the tools to move them and to lay them out side by side. */
.group-tools{display:flex;gap:4px;margin:0 0 4px}
.group .group-tools button{border:1px solid #6d5a3a;background:#151915e6;color:#e8d9b0;padding:0 6px;font:14px/20px system-ui,sans-serif;min-width:24px;border-radius:2px}
#group-move{cursor:grab;touch-action:none}#group-move:active{cursor:grabbing}
.party-frame{cursor:pointer}
.party-frame.targeted .party-bars{outline:2px solid #f0d796;outline-offset:1px}
.party-frame.targeted .party-portrait{border-color:#f0d796;box-shadow:0 0 8px #f0d79688}
.group.horizontal ul.party{flex-direction:row;flex-wrap:wrap}
/* Phones: the unit frames are hidden, but the target is shown small just above the action bar, so one can see what one is fighting. */
@media(max-width:700px){
  .unit-frame.target.on{display:block;position:absolute;left:8px;top:auto;bottom:calc(100% + 6px);width:min(200px,52vw);padding:3px 6px;z-index:6;background:#161a17e6;border:1px solid #ad9463;border-radius:3px;font-size:12px}
  .unit-frame.target.on .unit-head{font-size:12px;display:flex;justify-content:space-between;gap:8px}
}

#talent-reset{margin-top:6px;margin-bottom:12px}

/* Open, the chat scrolls back through the last 25 lines (src/chat-ui.js KEEP); closed it only shows the newest. */
.chat.open .chat-log{display:block;overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;scrollbar-width:thin;max-height:14em}
@media(max-width:800px){.chat.open .chat-log{max-height:10em}}
/* The buttons below the action bar fold into one Menu button on every screen (they took a lot of room);
   open, they float above the bar instead of pushing it up. */
.menu-toggle{display:inline-block;margin:6px auto 0;border:1px solid #70674d;background:var(--panel);padding:4px 14px;font:13px system-ui,sans-serif;border-radius:2px}
.utility{display:none}
.bottom.menu-open .utility{display:flex;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);width:max-content;max-width:min(760px,calc(100vw - 24px));margin:0;background:var(--panel);border:1px solid #70674d;padding:10px;border-radius:2px;z-index:6}


/* The phone's own edges (Frederik, 2026-11-06, the installed app on an iPhone): the clock and signal lay over the health
   bar. (The dark band at the bottom came from the see-through status bar, now solid black in index.html: iOS left the
   strip below its shortened view unpainted, whatever the page did.) Now #game is the safe area
   (env(safe-area-inset-*), 0 on a computer), so every bar, button and window inside it keeps clear of the clock, the
   notch and the home line by itself, and only the world is drawn on under them, out to the screen's edges. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
#game{position:fixed;top:var(--safe-top);right:var(--safe-right);bottom:var(--safe-bottom);left:var(--safe-left);width:auto;height:auto;min-height:0;overflow:visible}
/* (a canvas does not stretch between its insets as a box does, so its size is given outright) */
#game>#world,#game>#world3d,#game>.zone-fade,#game>#loading{position:absolute;inset:auto;top:calc(-1 * var(--safe-top));left:calc(-1 * var(--safe-left));width:calc(100% + var(--safe-left) + var(--safe-right));height:calc(100% + var(--safe-top) + var(--safe-bottom))}