/* EDRALIA — slate, aged brass and cut gemstones. Original, resolution-independent UI. */
:root {
  --bg: #101d23; --surface: #17292f; --surface-hi: #20373d; --surface-deep: #0e1c22;
  --rim: #59605a; --accent: #dfbd7e; --cream: #f3e7cf; --text: #dbe3dc;
  --muted: #a4b6b3; --good: #8dceb0; --teal: #75c6b5; --hp: #c67568;
  --stone-hi: #253b40; --stone: #1a2d33; --stone-lo: #12242a; --stone-deep: #0b181d;
  --title: Georgia, 'Times New Roman', serif; --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --edge: 1px solid rgba(196, 164, 107, .48); --shadow: 0 12px 40px #050c1370;
}
html, body { font-family: var(--body); font-weight: 400; }
button, input, select { font-family: var(--body); }
button { -webkit-tap-highlight-color: transparent; }
body .panel, body #inventory, body #editor, body #inv-detail, body #dialogue,
body #trade, body #auction, body #mailbox, body #forge, body #journal, body #friends, body #spellbook {
  background: linear-gradient(145deg, #23383e, #112229 68%);
  border: var(--edge); border-image: none; border-radius: 5px;
  box-shadow: inset 0 1px #d4c18f14, var(--shadow); filter: none; backdrop-filter: none;
  color: var(--text); padding: 24px; font-size: 14px;
}
body .plaque, body #editor-title {
  display: block; width: auto; margin: 0 0 22px; padding: 0 48px 16px 0;
  border: 0; border-image: none; border-bottom: 1px solid #bca36b40; border-radius: 0;
  background: none; box-shadow: none; filter: none; text-shadow: none;
  font: 400 25px/1.15 var(--title); color: var(--cream); text-align: left; letter-spacing: .02em;
}
body .btn, body .choice, body #inv-detail button, body #editor .actions button {
  border: var(--edge); border-image: none; border-radius: 3px; background: #243a40;
  box-shadow: inset 0 1px #ffffff09; text-shadow: none; color: var(--cream);
  font: 500 13px/1.35 var(--body); min-height: 40px; padding: 9px 14px;
  transition: background .15s, border-color .15s; cursor: pointer;
}
body .btn:hover, body .choice:hover, body #inv-detail button:hover { background: #30494e; border-color: var(--accent); filter: none; }
body .btn:active, body .choice:active, body #inv-detail button:active { transform: translateY(1px); box-shadow: none; }
body .primary, body .btn.primary, body #inv-detail button.primary, body #done-btn,
body #editor .actions #done-btn, body .char .play {
  background: linear-gradient(110deg, #dec18b, #b49a66); border-color: #e9d29f; color: #16272b;
  font-weight: 700; text-shadow: none;
}
body .primary:hover, body .btn.primary:hover, body #done-btn:hover, body .char .play:hover { background: #efd6a2; color: #122229; }
body button:disabled { cursor: not-allowed; opacity: .45; filter: none; }
body .close, body #inventory #inv-close, body #journal .close, body #spellbook .close,
body #friends .close, body #settings .close, body #forge .close, body #auction .close, body #mailbox .close {
  width: 40px; height: 40px; top: 13px; right: 12px; padding: 0; border: 1px solid #b8a37030;
  border-image: none; border-radius: 3px; background: #15282e; box-shadow: none;
  color: #c4cebf; text-shadow: none; font: 20px/1 var(--body);
}
body .close:hover { background: #30494e; color: #fff0cc; }
body input:not([type=range]):not([type=checkbox]), body select {
  border: 1px solid #8b9e964d; border-radius: 3px; background: #0c1c23;
  color: var(--text); padding: 10px 12px; font-size: 14px; box-shadow: inset 0 1px 3px #0003;
}
body input::placeholder { color: #91a4a4; }
body :focus-visible { outline: 2px solid #9ce1d0; outline-offset: 3px; }
body kbd { font: 600 10px/1.3 var(--body); border: 1px solid #dfc58c30; color: #d4c6a5;
  background: #0b1923e0; border-radius: 2px; text-shadow: none; padding: 1px 4px; opacity: 1; }
body h3, body #inventory h3, body #journal h3 { font: 600 11px/1.4 var(--body); letter-spacing: .12em;
  text-transform: uppercase; text-shadow: none; color: var(--accent); }
body .skill, body .spell, body .potion, body #hunt, body #special-btn {
  background: linear-gradient(140deg, #30464c, #15272e); border: 1px solid #a9986b70;
  border-image: none; border-radius: 5px; box-shadow: inset 0 1px #fff1; filter: none;
  width: 54px; height: 54px; padding: 3px; flex: none;
}
body .skill:hover, body .spell:hover { border-color: #e2c58b; background: #2c464c; filter: none; }
body .skill .picto, body #special-btn .picto { width: 34px; height: 34px; filter: none; }
body .spell .sp3d, body .potion .sp3d { width: 44px; height: 44px; filter: none; }
body .spell.ready, body .potion.ready, body #special-btn.ready, body #attack-slot.on {
  background: linear-gradient(145deg, #304d4b, #152b31); border-color: #81b6a6; box-shadow: inset 0 0 14px #77bda310; filter: none;
}
body .spell.locked { opacity: .65; border-color: #566867; background: #122229; }
body .spell.locked .sp3d { filter: grayscale(.7); opacity: .35; }
body .spell .lock { align-items: flex-end; padding-bottom: 4px; font: 600 10px/1 var(--body); color: #d1d5c3; }
body .spell .rank { display: none; }
body .spell .cost { font: 600 9px/1 var(--body); top: 4px; right: 4px; color: #a2d9e3; }
body .spell .timer, body .potion .timer { font: 600 18px var(--body); }
body .potion .count { font-family: var(--body); font-size: 12px; right: 4px; bottom: 3px; }
body .skill kbd { bottom: -7px; left: -3px; z-index: 2; }
body #actions { padding: 12px 16px 17px; border: var(--edge); border-image: none; border-radius: 6px;
  background: linear-gradient(120deg, #172b32f5, #0e1f26f5); box-shadow: var(--shadow); filter: none; bottom: 18px; }
body #actions .slots { gap: 12px; align-items: center; }
body #spells, body #potions { gap: 6px; }
body #potions { border-left: 1px solid #c5a56c30; padding-left: 12px; }
body #hunt { border-radius: 50%; width: 42px; height: 42px; align-self: center; border-color: #a58b55; margin-right: 4px; }
body #hunt-icon { width: 32px; height: 32px; }
body #hunt-fill { background: #c4a46b60; border-radius: 50%; }
body #hunt.hot { background: #555133; filter: none; }
body #xpline { top: auto; bottom: 0; left: 5px; right: 5px; height: 3px; border: 0; border-radius: 0; background: #0b171f; }
body #xpline #xp-fill { background: #c8b47b; box-shadow: 0 0 8px #c5b78140; }
body #xpline #xp-text { display: none; }
body #micro { right: 20px; bottom: 18px; display: flex; flex-direction: row; gap: 4px;
  padding: 7px; border: 1px solid #c4a46b35; border-image: none; background: #13262ceF;
  border-radius: 5px; box-shadow: var(--shadow); filter: none; }
body #micro .skill.small { width: 52px; height: 64px; border: 0; border-radius: 3px; padding: 4px 2px 18px; background: transparent; }
body #micro .skill.small:hover { background: #29434a; }
body #micro .picto { width: 30px; height: 30px; }
body .nav-label { position: absolute; left: 1px; right: 1px; bottom: 5px; font: 500 10px/1 var(--body); color: #e0d7bd; text-align: center; }
body #micro kbd { top: -3px; bottom: auto; right: -1px; left: auto; font-size: 8px; border: 0; background: transparent; color: #899f9f; }
body .skill[data-tip]::after { font: 12px/1.5 var(--body); color: var(--cream); border: var(--edge); border-radius: 4px; background: #10232b; text-shadow: none; }
body .skill[data-tip]:focus-visible::after { content: attr(data-tip); display: block; position: absolute; bottom: calc(100% + 12px);
  left: 50%; transform: translateX(-50%); width: max-content; max-width: min(270px, 85vw); padding: 10px; z-index: 10; pointer-events: none; }
/* Player identity: compact portrait, clear name, two quiet resource bars. */
body #hud { top: 22px; left: 22px; padding: 8px 14px 9px 8px; width: 274px; background: #14272ce8;
  border: 1px solid #c4a46b40; border-radius: 4px; line-height: 1.4; }
body .hud-main { gap: 12px; }
body #hud-portrait { width: 55px; height: 64px; border-radius: 3px; background: linear-gradient(150deg,#41635d,#172e36); border: 1px solid #ac976b; }
body #hud-icon { left: -8px; top: -12px; width: 70px; height: 80px; filter: none; mask-image: linear-gradient(#000 70%, transparent); -webkit-mask-image: linear-gradient(#000 70%, transparent); }
body #hud-level { font: 600 11px var(--body); color: #e9d8ae; background: #172930; border: 1px solid #af9865;
  border-radius: 2px; padding: 2px 6px; left: -5px; bottom: -6px; text-shadow: none; }
body .hud-side { width: 175px; gap: 6px; padding: 0; }
body .hud-who { order: -1; gap: 6px; margin: 0 0 3px; }
body #hud-name { color: var(--cream); font: 400 17px/1.1 var(--title); text-shadow: none; }
body #hud-class { width: 19px; height: 19px; filter: none; }
body .hbar .track, body .hbar.mana .track { height: 12px; border: 1px solid #b6a47740; border-image: none; padding: 1px;
  background: #0b1a20; margin: 0; border-radius: 2px; }
body .hbar .track::before { display: none; }
body .hbar .track>div, body .hbar.mana .track>div { background: linear-gradient(90deg, #995b59, #d28b7b);
  box-shadow: inset 0 1px #ffffff25; border-radius: 1px; }
body .hbar.mana .track { height: 9px; }
body .hbar.mana .track>div { background: linear-gradient(90deg, #366f83, #78b7c4); }
body .hbar .track>span, body .hbar.mana .track>span, body #mana-text { font: 600 9px/1 var(--body); inset: -1px 2px; text-shadow: 0 1px 2px #000; }
body .hud-info { margin: 9px 0 0 68px; gap: 8px; }
body .hud-info .chip { border: 0; padding: 0; background: none; font: 500 10px/1.4 var(--body); }
body .hud-info .chip.gold { color: #e6c587; }
body #buffs { gap: 4px; }
body #party { top: 150px; left: 22px; }
body #target-frame { left: 322px; top: 28px; background: #172930e8; padding: 6px 12px; border: 1px solid #b47c6350; border-radius: 4px; }
body #tf-name { text-shadow: none; font-family: var(--title); }
/* Navigation and the one active objective. */
body #side { top: 22px; right: 22px; gap: 8px; width: 202px; align-items: flex-end; }
body #map-wrap { padding: 5px; border: 1px solid #ba9e6c; border-radius: 6px; background: #12252be8; box-shadow: var(--shadow); }
body #minimap { width: 148px; height: 148px; border-radius: 3px; box-shadow: none; }
body #cam-turn { gap: 42px; margin-top: -24px; margin-right: 12px; }
body #cam-turn button { background: #15272deb; border: 1px solid #b49a6550; color: #d9c79b; border-radius: 3px; width: 30px; height: 28px; }
body .map-info { width: 100%; gap: 6px; }
body .map-info .chip { font: 500 11px/1.4 var(--body); background: #12252be8; border: 1px solid #b49a6520; border-radius: 3px;
  padding: 6px 8px; color: #cbd6cb; }
body .map-info .zone { color: var(--cream); }
body .map-info .chip:has(#pos) { font-size: 10px; opacity: .7; }
body #goal { text-align: left; white-space: normal; width: 100%; color: #d0dcca; border-left: 2px solid var(--teal); }
body #quest-track { align-items: stretch; margin-top: 4px; }
body #quest-track .qt { background: #12252bf5; color: var(--text); border: 1px solid #a9b8a52b;
  border-left: 2px solid #c9b37a; box-shadow: none; border-radius: 3px; padding: 12px; font-size: 12px; line-height: 1.5; }
body #quest-track .qt b { color: var(--cream); font-weight: 500; margin-bottom: 4px; }
body #quest-track .qt span { color: #a8c8bf; }
body .quest-more { border: 0; background: #12252be0; color: #b8c8bd; font-size: 11px; }
body #zone-banner b { border: 0; border-image: none; background: none; clip-path: none; filter: none;
  font: 30px var(--title); color: #f7e6c1; text-shadow: 0 2px 8px #000b; padding: 8px 24px; }
body #zone-banner span { background: #15282bd9; border: 1px solid #d2b77950; border-radius: 2px; color: #dfd3b4; }
body #chat { left: 22px; bottom: 22px; width: 300px; font: 12px/1.55 var(--body); }
body #log { max-height: 90px; gap: 3px; }
body #chat .log-line { text-shadow: 0 1px 3px #06121a; padding: 3px 8px; border-radius: 2px; background: #11262bd6; }
body #chat-input { min-height: 36px; font-size: 12px; border-color: #ac9d6b40; background: #11262be8; margin-top: 5px; }
/* Inventory and adjacent services share one set of surfaces and spacing. */
body #inventory { width: min(760px, calc(100vw - 350px)); top: 22px; bottom: 120px; right: 22px; }
body .inv-cols { gap: 24px; }
body .doll { background: radial-gradient(ellipse, #34524a88, transparent 68%); padding: 4px 0; gap: 6px; }
body .doll .figure { background: none; box-shadow: none; border: 0; }
body #doll-name { color: var(--cream); font: 20px var(--title); }
body #doll-level { font: 11px var(--body); color: var(--muted); margin-top: 4px; }
body .item, body .item.empty { background: #0f2028; border: 1px solid #53665f80; border-image: none;
  border-radius: 4px; box-shadow: inset 0 1px #ffffff07; filter: none; }
body .item:hover:not(.empty) { background: #2a4246; box-shadow: 0 0 0 1px #c5b482; }
body .item.sel, body .item.anvil { outline: 2px solid #e2c082; outline-offset: 1px; background: #34504e; }
body .item .ico3d { width: 88%; height: 88%; filter: drop-shadow(0 2px 3px #0006); }
body .item.empty .ghost { opacity: .28; filter: grayscale(1); }
body .item.empty.locked { opacity: .6; }
body .item .lvl { font: 600 10px var(--body); bottom: 3px; right: 4px; }
body .item .slot-name { color: #a1b5af; font: 9px var(--body); bottom: 4px; }
body .bag { gap: 6px; }
body .bigs { border-top: 1px solid #9eb9a720; padding-top: 16px; gap: 6px; }
body .big { border: 0; border-radius: 3px; background: #0c2028; padding: 10px 4px; }
body .big b { font: 23px var(--title); color: var(--cream); }
body .big span { font: 10px/1.3 var(--body); color: var(--muted); }
body .stat, body .line { font-size: 12px; padding: 4px 0; gap: 7px; }
body .stat.zero { opacity: .55; }
body .group h4 { font: 600 10px var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
body #inv-detail { padding: 18px; width: 280px; top: 70px; right: calc(100% + 14px); max-height: calc(100dvh - 150px); }
body #inv-detail .name { font: 19px/1.3 var(--title); }
body #inv-detail .meta, body #inv-detail .vs, body .setbonus { font: 12px/1.5 var(--body); }
body #inv-detail .head { padding-bottom: 12px; border-bottom: 1px solid #bda36d40; }
body #inv-detail .reqs span { font-size: 11px; background: #0c1d25; border-radius: 2px; padding: 4px 6px; }
body #inv-detail .line em { font-size: 11px; }
body #inv-detail .up { color: #9ad9b2; }
body #inv-detail .down { color: #eda397; }
body #sell-whites { font-size: 11px; max-width: 190px; padding: 7px 10px; min-height: 36px; }
body .setbox { border: 1px solid #84ad9250; background: #2b423250; border-radius: 3px; }
body #journal .jq, body .fr, body .mail-row, body .ah-row, body .bspell { background: #10242b; border-radius: 3px; padding: 12px; }
body #journal .jq.on { border-left-color: var(--teal); background: #23413e; }
body #journal .jq b, body #journal .jq.main b { color: #e5d6af; font-size: 14px; }
body #journal .jq .st { color: #a9c6b9; }
body #journal .jb .btn, body .fr .btn, body #friends-add .btn { min-height: 36px; font-size: 12px; }
body #journal .close, body #friends .close, body #spellbook .close { position: sticky; float: right; top: 0; margin-top: -10px; margin-right: -10px; }
body #dialogue .who { color: #e6d4aa; background: none; border: 0; border-image: none; text-shadow: none; font-family: var(--title); }
body #dialogue .what { font-size: 14px; line-height: 1.6; }
body #dialogue .quest-title { color: var(--accent); font-family: var(--title); font-size: 19px; }
body #dialogue .more { font-size: 11px; }
body .ah-tabs .btn.on { background: #34584f; border-color: var(--teal); }
/* Selection, creation and the escape menu belong to the same world. */
body #select { padding: 40px 7vw; background: linear-gradient(90deg,#0b1b24e6,#11232a80 43%,transparent 75%); }
.select-brand { margin: 0 0 28px 0; width: 420px; max-width: 100%; position: relative; }
.select-brand>img { width: 48px; height: 56px; margin-bottom: 20px; }
.brand-kicker { display: block; text-transform: uppercase; letter-spacing: .2em; font: 500 10px var(--body); color: #c6b88e; }
body .select-title { font: 400 clamp(42px,5.5vw,76px)/1.2 var(--title); letter-spacing: .1em;
  margin: 8px 0 12px; color: #f3e5c4; text-shadow: 0 2px 30px #09151e80; }
.select-brand p { font: 400 14px/1.6 var(--body); color: #c1cfc7; margin: 0; }
body .select-box { width: 420px; max-width: 100%; padding: 22px; }
body .select-box .plaque { font-size: 21px; margin-bottom: 14px; padding: 0 0 14px; }
body .char { border: 1px solid #b6a47730; border-radius: 3px; padding: 12px; background: #0d2027; box-shadow: none; gap: 12px; }
body .char:hover { background: #243d41; }
body .char .who b { font: 18px var(--title); color: var(--cream); }
body .char .who span { font: 11px/1.5 var(--body); }
body .char .del { background: transparent; border: 0; color: #aab6ac; box-shadow: none; font-size: 11px; min-height: 28px; }
body .char.new { text-align: left; border: 1px dashed #ae9b675c; background: #243b3d70; }
body .char.new .plus { color: #d8c18e; font: 36px var(--title); }
body #guest-note { background: #10262d; border: 1px solid #7f9d9350; font: 11px/1.5 var(--body); border-radius: 3px; padding: 12px; }
body #guest-note b { color: #d5c69e; }
body #select-note, body .acc-note { font-size: 11px; line-height: 1.5; }
body #editor { width: 380px; top: 22px; right: 22px; bottom: 22px; }
body #wiz-steps { gap: 4px; margin: 0 0 20px; }
body #wiz-steps span { border: 0; border-bottom: 2px solid #435a55; border-radius: 0; background: none; padding: 8px 4px; font: 11px var(--body); color: #a4b6ad; }
body #wiz-steps span.on { color: var(--accent); border-bottom-color: var(--accent); }
body .ccard { padding: 12px 6px; border: 1px solid #b8a37040; background: #0e232b; border-radius: 4px; box-shadow: none; }
body .ccard.on { border-color: #d7bb7b; background: #304940; box-shadow: inset 0 0 0 1px #d7bb7b40; }
body .ccard .emb { width: 50px; height: 50px; filter: none; }
body .ccard .tag { font: 11px/1.4 var(--body); color: #b7c6ba; }
body .ccard b { color: #ebdcba; font: 15px var(--title); }
body #class-desc { border: 0; border-left: 2px solid #68a894; background: #10252a; padding: 12px; font-size: 12px; }
body .choice[aria-pressed=true] { border-color: var(--teal); background: #30544c; color: #e1f1df; }
body .swatch { width: 32px; height: 32px; border-radius: 4px; }
body .swatch[aria-pressed=true] { box-shadow: 0 0 0 2px var(--accent); }
body #game-menu { background: #06131cb0; backdrop-filter: blur(5px); }
body .menu-box { width: 320px; max-width: calc(100vw - 28px); padding: 24px; gap: 10px; }
body .menu-box .plaque { margin-bottom: 4px; }
body #menu-resume { background: #d6bc86; border-color: #e2cca0; color: #152c30; font-weight: 700; }
body #menu-switch { background: transparent; font-size: 12px; color: #a9bdb5; }
.menu-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 0; }
body .menu-tools .skill.small { width: 100%; height: 70px; padding: 0 0 16px; background: #10262d; }
body .menu-tools .nav-label { bottom: 8px; font-size: 11px; }
body .menu-tools kbd { top: 4px; right: 5px; left: auto; bottom: auto; }
body #settings-gear { background: #14272ce8; border: var(--edge); border-radius: 4px; }
body #settings .settings-box { padding: 24px; }
body #settings .langs .btn.on { background: #34564c; border-color: var(--teal); color: #dbecda; outline: none; }
body #settings .set-note { color: var(--muted); font-size: 11px; }
body #worldmap { background: #071722ed; backdrop-filter: blur(5px); }
body #worldmap canvas { border: 1px solid #bda36d; border-radius: 4px; box-shadow: var(--shadow); }
body #worldmap .hint { font-size: 12px; color: #b9c9bc; }
body #levelup { background: radial-gradient(ellipse, #1b3233e0, transparent 70%); padding: 24px; }
body #levelup img { width: 72px; height: 72px; filter: drop-shadow(0 0 20px #d1b36c60); }
body #levelup b { font: 28px var(--title); color: #f2ddb1; text-shadow: 0 2px 5px #000; white-space: nowrap; }
body #action-hint { background: #11272e; border: 1px solid #c4a46b; color: #e9dfc6; font: 13px/1.5 var(--body); border-radius: 4px; }
body .plate .np-name { font: 600 11px/1.3 var(--body); text-shadow: 0 1px 3px #04101c, 0 0 4px #04101c; }
body .plate .np-sub { font: 10px/1.3 var(--body); color: #c9d6c9; }
@media (max-width: 1280px) {
  body #chat { bottom: 132px; width: 260px; }
  body #micro { right: 12px; }
  body #inventory { width: min(680px, calc(100vw - 32px)); }
}
@media (max-width: 1200px) {
  body #inventory { top: 16px; right: 16px; bottom: 120px; left: auto; width: min(700px, calc(100vw - 32px)); padding: 20px; }
  body #inv-detail { position: absolute; inset: 64px 12px 12px; width: auto; max-height: none; z-index: 3; background: #142b32; }
  body.inv-open #dialogue { display: none; }
  body.inv-open #trade, body #forge { top: 16px; left: 16px; right: 16px; width: auto; max-height: 40dvh; overflow-y: auto; transform: none; z-index: 8; }
  body:has(#trade:not([hidden])) #inventory, body:has(#forge:not([hidden])) #inventory { top: 44dvh; bottom: 12px; }
  body #auction { width: min(760px, calc(100vw - 32px)); }
}
@media (min-width: 1201px) {
  body:has(#forge:not([hidden])) #inventory { right: 386px; width: min(700px, calc(100vw - 410px)); }
  body:has(#forge:not([hidden])) #forge { right: 22px; width: 340px; }
}
@media (max-width: 900px) {
  body #micro { bottom: 116px; }
  body #chat { bottom: 116px; width: min(260px, 43vw); }
  body #target-frame { top: auto; bottom: 208px; left: 18px; transform: none; }
}
@media (max-width: 640px) {
  body #hud { top: 10px; left: 10px; width: 198px; padding: 8px; }
  body #hud-portrait { width: 40px; height: 50px; }
  body #hud-icon { width: 58px; height: 65px; top: -8px; }
  body .hud-main { gap: 10px; }
  body .hud-side { width: 124px; gap: 5px; }
  body #hud-name { font-size: 15px; max-width: 100px; }
  body #hud-class { width: 16px; height: 16px; }
  body .hud-info { margin-left: 50px; gap: 5px; }
  body .hud-info .chip { font-size: 9px; }
  body #side { top: 10px; right: 10px; width: 140px; max-width: 37vw; }
  body #minimap { width: 94px; height: 94px; }
  body #map-wrap { padding: 4px; }
  body #cam-turn { margin-right: 3px; gap: 26px; }
  body #cam-turn button { width: 36px; height: 32px; }
  body .map-info .chip { padding: 5px 7px; font-size: 10px; }
  body .map-info .chip:has(#pos) { display: none; }
  body #quest-track .qt { font-size: 11px; padding: 8px; }
  body #actions { bottom: 10px; width: calc(100vw - 20px); max-width: 420px; padding: 10px 12px 14px; }
  body #actions .slots { display: grid; grid-template-columns: 44px 44px 1fr; gap: 8px; }
  body #spells { grid-row: 1; grid-column: 1 / -1; justify-content: center; gap: 8px; }
  body #actions .skill, body #actions .spell, body #actions .potion { width: 44px; height: 44px; }
  body .spell .sp3d, body .potion .sp3d { width: 36px; height: 36px; }
  body #actions #hunt { width: 36px; height: 36px; min-width: 36px; }
  body #potions { justify-content: flex-end; border: 0; padding: 0; gap: 8px; }
  body #micro { bottom: 138px; right: 10px; left: 10px; padding: 4px; justify-content: space-around; gap: 4px; }
  body #micro .skill.small { width: 54px; height: 54px; padding-bottom: 16px; }
  body #micro .picto { width: 27px; height: 27px; }
  body #micro .nav-label { font-size: 10px; bottom: 4px; }
  body #micro kbd { display: none; }
  body #chat { left: 10px; bottom: 208px; width: min(280px, calc(100vw - 20px)); font-size: 11px; }
  body #chat:not(:focus-within):not(:hover) #log { max-height: 38px; }
  body #chat-input { min-height: 32px; padding: 7px; font-size: 11px; }
  body #inventory, body #journal, body #friends, body #spellbook, body #auction, body #mailbox {
    top: 10px; left: 10px; right: 10px; bottom: 208px; width: auto; max-width: none; max-height: none;
    transform: none; padding: 16px; border-width: 1px; }
  body #inventory .plaque, body #journal .plaque, body #friends .plaque, body #spellbook .plaque { font-size: 23px; padding-bottom: 14px; margin-bottom: 14px; }
  body #inventory .close, body #journal .close, body #friends .close, body #spellbook .close { top: 8px; right: 8px; }
  body #inv-detail { inset: 58px 8px 8px; padding: 14px; }
  body .inv-cols { grid-template-columns: 1fr; gap: 16px; }
  body .bag { grid-template-columns: repeat(5, minmax(0,1fr)); }
  body .item { min-width: 0; }
  body #inventory .bag-head { flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
  body #sell-whites { max-width: none; margin-top: 0; }
  body #dialogue { left: 10px; right: 10px; bottom: 208px; width: auto; transform: none; padding: 18px; max-height: 50dvh; }
  body #target-frame { top: 128px; bottom: auto; left: 10px; padding: 5px; transform: scale(.8); transform-origin: top left; }
  body #party { top: 185px; left: 10px; max-width: 160px; }
  body #select { padding: 28px 20px; overflow-y: auto; justify-content: flex-start; }
  .select-brand { margin: 0 0 22px; }
  .select-brand>img { width: 38px; height: 44px; margin-bottom: 10px; }
  body .select-title { font-size: 46px; }
  .select-brand p { font-size: 12px; }
  body .select-box { padding: 18px; }
  body .char { grid-template-columns: 44px 1fr auto; gap: 8px; padding: 8px; }
  body .char img, body .char.new .plus { width: 44px; height: 44px; }
  body .char.new { grid-template-columns: 44px 1fr; }
  body #editor { top: auto; bottom: 0; left: 10px; right: 10px; width: auto; max-height: 60dvh; padding: 18px; }
  body #editor .plaque { font-size: 22px; margin-bottom: 16px; }
  body .ccard .emb { width: 36px; height: 36px; }
  body .ccard .tag { font-size: 10px; }
  body #settings .settings-box { padding: 20px; }
  body #settings .set-row { grid-template-columns: 95px 1fr 36px; gap: 6px; font-size: 12px; }
}
@media (max-height: 600px) and (min-width: 641px) {
  body #select { padding-top: 20px; padding-bottom: 20px; overflow-y: auto; justify-content: flex-start; }
  .select-brand>img { display: none; }
  .select-brand { margin-bottom: 12px; }
  body .select-title { font-size: 40px; }
  body #micro, body #chat { bottom: 110px; }
  body #inventory { bottom: 110px; }
}

/* Service panels remain usable alongside the inventory. */
body #wiz-steps span.on { background: none; box-shadow: none; }
body #goal { font: 500 12px/1.45 var(--body); }
body .map-info .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 1201px) {
  body:has(#forge:not([hidden])) #forge { left: auto; }
  body.inv-open #auction { left: 22px; right: auto; width: calc(100vw - 746px); max-width: 560px; }
}
@media (max-width: 1200px) {
  body.inv-open #auction, body.inv-open #forge {
    top: 10px; bottom: auto; left: 10px; right: 10px; width: auto;
    max-height: 40dvh; overflow-y: auto; transform: none;
  }
  body.inv-open:has(#auction:not([hidden])) #inventory,
  body.inv-open:has(#forge:not([hidden])) #inventory,
  body.inv-open:has(#trade:not([hidden])) #inventory { top: 44dvh; bottom: 12px; }
}
@media (max-width: 640px) { body #goal { font-size: 11px; } }