@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@500;700;800&family=Jersey+10&display=swap');
/* Sunward UI theme: dark wood, brass and iron from the PixelLab kit (dist/assets/ui/kit, cut by tools/import-ui-kit.mjs),
   drawn as 9-slice borders at 2x so every pixel stays crisp. One typeface (Pixelify Sans) throughout, with a hard
   1px pixel drop shadow on light text. Loaded after style.css and overrides it. */
:root{--k-ink:#1a1014;--k-cream:#f4e6c8;--k-parch:#e9d3a6;--k-gold:#f0c060;--k-gold-d:#b8863a;--k-muted:#b99a74;--k-green:#8fd06a;--k-red:#e0584c;--k-blue:#5aa0ff;
 --k-font:'Alegreya Sans',system-ui,sans-serif;--k-head:'Jersey 10','Alegreya Sans',sans-serif;--k-shadow:1px 1px 0 #1a1014,2px 2px 0 #1a101480}
html body,html body button,html body input,html body select,html body textarea,html body dialog,html body h1:not(.menu-title),html body h2,html body h3,html body p,html body small,html body li{font-family:var(--k-font)}
html body{color:var(--k-cream);image-rendering:pixelated}
html body h1:not(.menu-title),html body h2,html body h3{font-weight:700;letter-spacing:.5px;text-shadow:var(--k-shadow);color:var(--k-gold)}
html body kbd{font-family:var(--k-font);display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border:solid;border-width:4px;border-image:url(assets/ui/kit/chip.png) 4 fill/4px stretch;color:var(--k-gold);font-size:12px;box-sizing:border-box;text-shadow:var(--k-shadow)}

/* ---- Buttons: green iron-cornered for primary actions, wood for the rest. Hover lifts, press sinks. */
html body .primary,html body button.primary{background:none!important;border:solid!important;border-width:16px 18px!important;border-image:url(assets/ui/kit/button-green.png) 11 fill/16px 18px stretch!important;color:#f6f2dc!important;font:600 16px var(--k-font)!important;letter-spacing:1px;text-transform:uppercase;text-shadow:var(--k-shadow);padding:2px 12px!important;min-height:0;box-shadow:none!important;image-rendering:pixelated;transition:transform .06s,filter .1s}
html body .secondary,html body button.secondary{background:none!important;border:solid!important;border-width:10px!important;border-image:url(assets/ui/kit/button.png) 5 fill/10px stretch!important;color:var(--k-cream)!important;font:500 14px var(--k-font)!important;letter-spacing:.5px;text-shadow:var(--k-shadow);padding:2px 10px!important;min-height:0;box-shadow:none!important;image-rendering:pixelated;transition:transform .06s,filter .1s}
html body .primary:hover:not(:disabled),html body .secondary:hover:not(:disabled){filter:brightness(1.18);transform:translateY(-1px)}
html body .secondary:hover:not(:disabled){border-image-source:url(assets/ui/kit/button-hover.png)!important}
html body .primary:active:not(:disabled),html body .secondary:active:not(:disabled){transform:translateY(1px);filter:brightness(.92)}
html body .primary:disabled,html body .secondary:disabled{filter:grayscale(.8) brightness(.7);cursor:default}
html body .primary:focus-visible,html body .secondary:focus-visible{outline:2px solid var(--k-gold);outline-offset:3px}

/* ---- Inputs */
html body input:not([type=checkbox]):not([type=range]),html body select{background:none!important;border:solid!important;border-width:10px!important;border-image:url(assets/ui/kit/field.png) 5 fill/10px stretch!important;color:var(--k-cream)!important;font:15px var(--k-font)!important;padding:2px 6px!important;outline:none;box-shadow:none!important}
html body input::placeholder{color:#a88a68}
html body input:focus{filter:brightness(1.25)}

/* ---- Dialogs and pop-ups: the big iron-cornered frame. */
html body dialog{background:none!important;border:solid!important;border-width:28px!important;border-image:url(assets/ui/kit/frame.png) 14 fill/28px stretch!important;color:var(--k-cream)!important;padding:8px 18px 14px!important;box-shadow:0 18px 60px #000a!important;image-rendering:pixelated}
html body dialog::backdrop{background:radial-gradient(ellipse at center,#0d080699,#050304dd)}
html body dialog h2{font-size:26px;margin:4px 0 10px;text-align:center}
html body dialog p{color:var(--k-parch);line-height:1.45;font-size:14px}
html body .eyebrow{font:600 11px var(--k-font)!important;letter-spacing:3px;color:var(--k-muted)!important;text-align:center;text-transform:uppercase}
html body dialog .primary,html body dialog .secondary{display:block;width:100%;margin:10px 0 0}

/* ---- Main menu: gold title, a wooden command bar at the bottom. */
html body .main-menu .menu-bar{background:none!important;border:solid!important;border-width:22px 28px!important;border-image:url(assets/ui/kit/frame.png) 14 fill/22px 28px stretch!important;left:50%!important;right:auto!important;transform:translateX(-50%);bottom:18px!important;width:min(760px,94vw);display:flex;justify-content:space-between;align-items:center;gap:6px;padding:0 6px!important;box-sizing:border-box;box-shadow:0 10px 40px #000c}
html body .main-menu .menu-bar button{background:none!important;border:0!important;color:var(--k-parch)!important;font:600 17px var(--k-font)!important;letter-spacing:2px;text-transform:uppercase;text-shadow:var(--k-shadow);padding:6px 8px!important;min-height:0}
html body .main-menu .menu-bar button:hover{color:var(--k-gold)!important;transform:translateY(-1px)}
html body .main-menu .menu-bar .menu-play{border:solid!important;border-width:16px 18px!important;border-image:url(assets/ui/kit/button-green.png) 11 fill/16px 18px stretch!important;color:#fff8e0!important;font-size:22px!important;padding:0 26px!important}
html body .main-menu .menu-bar .menu-play:hover{filter:brightness(1.2)}

/* ---- Login */
html body dialog.login-dialog{width:min(380px,92vw)}
html body .login-dialog #signedOut{gap:6px}
html body .login-dialog input{width:100%;box-sizing:border-box;height:auto}
html body .login-or{color:var(--k-muted)}
html body .login-or:before,html body .login-or:after{background:#6b4a2e;box-shadow:0 1px #1a1014}
html body .login-note{color:var(--k-muted)!important;text-align:center;line-height:1.4}
html body .error{color:#ff8a7a!important;text-shadow:var(--k-shadow)}

/* ---- Character select: a framed overview, wooden side boards, a roster of class tiles, a big play button. */
html body #selection.char-select{background:radial-gradient(ellipse at 50% 30%,#2a1a12,#0c0806 75%)!important}
html body #selection .cs-head h1{font-size:30px;color:var(--k-gold)}
html body #selection .cs-overview{background:none!important;border:solid!important;border-width:28px!important;border-image:url(assets/ui/kit/frame.png) 14 fill/28px stretch!important;box-shadow:0 10px 40px #0009}
html body #selection .cs-tab{background:none!important;border:solid!important;border-width:8px!important;border-image:url(assets/ui/kit/strip.png) 5 fill/8px stretch!important;color:var(--k-gold)!important;font:600 12px var(--k-font)!important;letter-spacing:3px;text-transform:uppercase;text-align:center}
html body #selection #csName{font-size:30px;color:var(--k-gold)}
html body #selection .cs-portrait{background:none!important;border:solid!important;border-width:12px!important;border-image:url(assets/ui/kit/oval.png) 12 fill/12px stretch!important}
html body #selection .cs-kit .slot,html body #selection .cs-kit>*{background:none!important;border:solid!important;border-width:8px!important;border-image:url(assets/ui/kit/slot.png) 5 fill/8px stretch!important}
html body #selection .cs-role{color:var(--k-green)!important;font-weight:600}
html body #selection .cs-description,html body #selection .cs-goal,html body #selection .cs-note{color:var(--k-parch)!important}
html body #selection .cs-goal b{color:var(--k-gold)}
html body #selection .cs-rule{height:4px;background:#6b4a2e;box-shadow:0 1px #1a1014;border:0}
html body #selection .cs-box{background:none!important;border:solid!important;border-width:12px!important;border-image:url(assets/ui/kit/panel.png) 6 fill/12px repeat!important;box-shadow:0 6px 24px #0008}
html body #selection .cs-box h3{font-size:15px;color:var(--k-gold);margin:0 0 6px}
html body #selection .cs-box p{color:var(--k-cream)}
html body #selection .cs-stats>div{background:none!important;border:solid!important;border-width:6px!important;border-image:url(assets/ui/kit/track.png) 5 fill/6px stretch!important;text-align:center}
html body #selection .cs-stats small{color:var(--k-muted)!important;letter-spacing:1px}
html body #selection .cs-stats b{color:var(--k-cream)!important;font-size:16px}
html body #selection .cs-roster{background:none!important;border:solid!important;border-width:22px 28px!important;border-image:url(assets/ui/kit/frame.png) 14 fill/22px 28px stretch!important}
html body #selection .cs-tile{background:none!important;border:solid!important;border-width:10px!important;border-image:url(assets/ui/kit/inset.png) 5 fill/10px stretch!important;color:var(--k-parch)!important;font:500 12px var(--k-font)!important;box-shadow:none!important;transition:transform .08s}
html body #selection .cs-tile:hover{transform:translateY(-2px);filter:brightness(1.2)}
html body #selection .cs-tile[aria-pressed="true"]{filter:drop-shadow(0 0 0 var(--k-gold)) drop-shadow(0 0 6px #f0c06099);border-image-source:url(assets/ui/kit/slot-hover.png)!important;color:var(--k-gold)!important;transform:translateY(-3px)}
html body #selection #begin{min-width:280px;font-size:22px!important}
html body #selection .cs-close{width:auto}

/* ---- In-game side panel: a wooden board; minimap in a dark inset; bars in the kit's heart/potion/crest frames. */
html body .reference-hud{background:#3a2416!important;border:solid!important;border-width:12px!important;border-image:url(assets/ui/kit/panel.png) 6 fill/12px repeat!important;font:12px var(--k-font)!important;color:var(--k-cream)!important;padding:4px 6px 10px!important}
html body .reference-hud #radar{border:solid!important;border-width:10px!important;border-image:url(assets/ui/kit/inset.png) 5 fill/10px stretch!important;background:#07090c!important;box-sizing:border-box}
html body .reference-hud .panel-tools{background:none!important;border:solid!important;border-width:8px!important;border-image:url(assets/ui/kit/strip.png) 5 fill/8px stretch!important;margin:6px 0 4px;padding:0 2px!important;color:var(--k-gold)!important;font:600 11px var(--k-font)!important;letter-spacing:1.5px;align-items:center}
html body .reference-hud .panel-tools button{background:none!important;border:solid!important;border-width:6px!important;border-image:url(assets/ui/kit/chip.png) 4 fill/6px stretch!important;color:var(--k-gold)!important;font:700 13px var(--k-font)!important;width:28px!important;height:26px!important;padding:0!important;min-height:0}
html body .reference-hud .panel-character{background:none!important;border:solid!important;border-width:8px!important;border-image:url(assets/ui/kit/track.png) 5 fill/8px stretch!important;padding:0 4px!important;align-items:center}
html body .reference-hud .panel-character strong{color:var(--k-gold)!important;font:700 14px var(--k-font)!important;text-shadow:var(--k-shadow)}
html body .reference-hud .panel-character small{color:var(--k-muted)!important;font:12px var(--k-font)!important}
html body .reference-hud .panel-bar{background:none!important;border:solid!important;border-image-slice:4 4 4 17 fill!important;border-image-repeat:stretch!important;border-width:6px 6px 6px 30px!important;height:28px!important;box-sizing:border-box;overflow:visible!important;margin:4px 0!important;image-rendering:pixelated}
html body .reference-hud .panel-bar.hitpoints{border-image-source:url(assets/ui/kit/bar-hp.png)!important}
html body .reference-hud .panel-bar.experience{border-image-source:url(assets/ui/kit/bar-xp.png)!important;border-image-slice:4 4 4 13 fill!important;border-width:6px 6px 6px 24px!important}
html body .reference-hud .panel-bar.energy{border-image-source:url(assets/ui/kit/bar-mp.png)!important;border-image-slice:9 4 4 17 fill!important;border-width:12px 6px 6px 30px!important;height:34px!important}
html body .reference-hud .panel-bar i{height:100%!important;box-shadow:inset 0 3px #ffffff40,inset 0 -3px #0000004d!important;image-rendering:pixelated}
html body .reference-hud .panel-bar.hitpoints i{background:linear-gradient(#f06a5a,#c83a32)!important}
html body .reference-hud .panel-bar.energy i{background:linear-gradient(#6fb2ff,#2f6fd0)!important}
html body .reference-hud .panel-bar.experience i{background:linear-gradient(#ffd774,#d49a2a)!important}
html body .reference-hud .panel-bar b{left:-24px!important;top:50%!important;transform:translateY(-50%);font:700 9px var(--k-font)!important;color:#fff!important;text-shadow:var(--k-shadow);width:20px;text-align:center}
html body .reference-hud .panel-bar.experience b{left:-19px!important;width:16px}
html body .reference-hud .panel-bar span{right:4px!important;top:50%!important;transform:translateY(-50%);font:600 11px var(--k-font)!important;color:#fff!important;text-shadow:var(--k-shadow)}
html body .reference-hud .panel-stats{gap:3px!important;margin:6px 0!important}
html body .reference-hud .panel-stats>div{background:none!important;border:solid!important;border-width:6px!important;border-image:url(assets/ui/kit/track.png) 5 fill/6px stretch!important;min-height:0!important;padding:1px 0!important;text-align:center}
html body .reference-hud .panel-stats small{color:var(--k-muted)!important;font:500 9px var(--k-font)!important;letter-spacing:1px}
html body .reference-hud .panel-stats strong{color:var(--k-cream)!important;font:700 14px var(--k-font)!important;text-shadow:var(--k-shadow)}
html body .reference-hud .slot,html body .reference-hud .panel-bag>button,html body .vault-items>button,html body .panel-potions>button{background:none!important;border:solid!important;border-width:8px!important;border-image:url(assets/ui/kit/slot.png) 5 fill/8px stretch!important;box-shadow:none!important;color:var(--k-muted)!important;font:600 11px var(--k-font)!important;image-rendering:pixelated}
html body .reference-hud .slot:hover,html body .reference-hud .panel-bag>button:hover,html body .vault-items>button:hover{border-image-source:url(assets/ui/kit/slot-hover.png)!important;filter:brightness(1.2)}
html body .reference-hud .panel-equipment .slot{border-image-source:url(assets/ui/kit/button-dark.png)!important}
html body .reference-hud .panel-bag>button>span{color:#6b4a2e!important;font:700 16px var(--k-font)!important}
html body .reference-hud .bag-divider{background:none!important;border:solid!important;border-width:6px!important;border-image:url(assets/ui/kit/strip2.png) 5 fill/6px stretch!important;height:auto!important;min-height:6px;margin:6px 0!important;color:var(--k-gold)!important;font:600 10px var(--k-font)!important;letter-spacing:2px;text-align:center}
html body .reference-hud .bag-divider:empty{border-width:3px!important;padding:0!important}
html body .reference-hud .panel-summary{color:var(--k-parch)!important;font:11px var(--k-font)!important}
html body .reference-hud .radar-expand{background:none!important;border:solid!important;border-width:6px!important;border-image:url(assets/ui/kit/chip.png) 4 fill/6px stretch!important;color:var(--k-gold)!important}
html body .status-chips>*{font-family:var(--k-font)!important}

/* ---- Toasts, prompts, chat, interact button, tooltip, realm list, big map */
html body .toast{background:none!important;border:solid!important;border-width:10px 14px!important;border-image:url(assets/ui/kit/field.png) 5 fill/10px 14px stretch!important;color:var(--k-cream)!important;font:500 14px var(--k-font)!important;text-shadow:var(--k-shadow);padding:0 6px!important;box-shadow:0 6px 20px #0008!important}
html body .interact{background:none!important;border:solid!important;border-width:12px 16px!important;border-image:url(assets/ui/kit/frame.png) 14 fill/12px 16px stretch!important;color:var(--k-cream)!important;font:600 14px var(--k-font)!important;text-shadow:var(--k-shadow);padding:2px 10px!important;min-height:0;gap:10px}
html body .interact:hover{filter:brightness(1.15)}
html body .travel-prompt,html body .trade-prompt{background:none!important;border:solid!important;border-width:22px!important;border-image:url(assets/ui/kit/frame.png) 14 fill/22px stretch!important;color:var(--k-cream)!important;font-family:var(--k-font)!important;box-shadow:0 10px 40px #000a!important}
html body .chat-log{font:13px var(--k-font)!important;text-shadow:var(--k-shadow)}
html body .chat-log b{color:var(--k-gold)!important}
html body .item-tooltip{background:none!important;border:solid!important;border-width:14px!important;border-image:url(assets/ui/kit/frame.png) 14 fill/14px stretch!important;color:var(--k-cream)!important;font:13px var(--k-font)!important;box-shadow:0 8px 30px #000b!important}
html body .realm-list button{background:none!important;border:solid!important;border-width:10px!important;border-image:url(assets/ui/kit/panel.png) 6 fill/10px repeat!important;color:var(--k-cream)!important}
html body .realm-list button:hover{filter:brightness(1.2)}
html body .realm-list strong{color:var(--k-gold)!important}
html body .big-map{background:none!important;border:solid!important;border-width:28px!important;border-image:url(assets/ui/kit/frame.png) 14 fill/28px stretch!important}
html body .big-map-head b{color:var(--k-gold)!important;font-family:var(--k-font)!important}
html body .help-grid h3{color:var(--k-gold)!important;font-size:15px}
html body .help-grid p{color:var(--k-parch)!important}
html body .menu-legends li,html body #legendList li{color:var(--k-parch)}
html body .menu-legends b{color:var(--k-gold)}
html body .admin-dialog h3{color:var(--k-gold)!important}
html body .admin-dialog .admin-row button{border-width:8px!important}
html body .death-screen h2{color:var(--k-gold)}
html body .death-screen .primary{font-size:20px!important}
html body #selection #begin{white-space:nowrap;min-width:360px;width:auto}
html body #selection .cs-close{width:auto!important;display:inline-block!important;margin:0!important}
html body .reference-hud #areaLabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;min-width:0}
html body .reference-hud .panel-stats small{white-space:nowrap;font-size:8px!important}

/* Every element gets the body face (zero specificity, so the heading rules below still win); the logo keeps its own. */
:where(html body *:not(.menu-title,.menu-sub,.odometer,.odometer *)){font-family:var(--k-font)!important}
/* Type: Alegreya Sans for all text (clear at small sizes); Jersey 10, a chunky pixel face, for titles and buttons. */
html body{font-size:15px}
html body h1:not(.menu-title),html body h2,html body h3,html body .eyebrow,html body #selection .cs-tab,html body .reference-hud .panel-tools,html body .reference-hud .bag-divider,html body .reference-hud .panel-character strong{font-family:var(--k-head)!important;font-weight:400!important;letter-spacing:1px}
html body h2{font-size:34px!important}html body h3{font-size:22px!important}
html body .primary{font-size:24px!important}html body .secondary{font-size:20px!important}
html body .main-menu .menu-bar button{font-size:24px!important}html body .main-menu .menu-bar .menu-play{font-size:30px!important}
html body #selection #csName,html body #selection .cs-head h1{font-size:40px!important}
html body #selection #begin{font-size:30px!important}
html body .eyebrow{font-size:16px!important;letter-spacing:3px}
html body .reference-hud .panel-tools{font-size:15px!important}html body .reference-hud .bag-divider{font-size:14px!important}
html body .reference-hud .panel-character strong{font-size:20px!important}
html body .reference-hud .panel-stats small{font:700 10px var(--k-font)!important;letter-spacing:.5px}
html body .reference-hud .panel-stats strong,html body .reference-hud .panel-bar span{font-weight:800!important}
html body dialog p,html body .cs-box p,html body #selection .cs-description{font-size:15px!important;font-weight:500}
html body .toast,html body .interact{font-size:16px!important;font-weight:700!important}
html body button.primary,html body button.secondary,html body .main-menu .menu-bar button{font-family:var(--k-font)!important;font-weight:800!important;text-transform:uppercase;letter-spacing:1px}
html body button.primary{font-size:19px!important}html body button.secondary{font-size:15px!important}
html body .main-menu .menu-bar button{font-size:18px!important}html body .main-menu .menu-bar .menu-play{font-size:24px!important}
html body #selection #begin{font-size:24px!important}

/* ---- Hero slots (character screen), delete confirmation, Stillroot hero swapper (top left). */
html body .hero-slots{display:flex;gap:10px;justify-content:center;margin:12px auto 0;flex-wrap:wrap}
html body .hero-slot{position:relative;display:flex;align-items:center;gap:10px;min-width:230px;padding:2px 30px 2px 6px!important;background:none!important;border:solid!important;border-width:12px!important;border-image:url(assets/ui/kit/panel.png) 6 fill/12px repeat!important;color:var(--k-cream)!important;text-align:left;cursor:pointer;transition:transform .08s}
html body .hero-slot canvas{width:40px;height:40px;image-rendering:pixelated;border:solid;border-width:6px;border-image:url(assets/ui/kit/slot.png) 5 fill/6px stretch}
html body .hero-slot span{display:flex;flex-direction:column}
html body .hero-slot b{font:400 20px var(--k-head)!important;color:var(--k-gold);text-shadow:var(--k-shadow)}
html body .hero-slot small{font:700 13px var(--k-font)!important;color:var(--k-parch)}
html body .hero-slot.empty small{color:var(--k-muted)}
html body .hero-slot:hover{transform:translateY(-2px);filter:brightness(1.15)}
html body .hero-slot[aria-pressed="true"]{filter:drop-shadow(0 0 0 var(--k-gold)) drop-shadow(0 0 6px #f0c06099);transform:translateY(-2px)}
html body .hero-delete{position:absolute;right:-2px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:grid;place-items:center;font:800 13px var(--k-font);color:#ffb3a8;border:solid;border-width:5px;border-image:url(assets/ui/kit/chip.png) 4 fill/5px stretch;cursor:pointer}
html body .hero-delete:hover{color:#fff;filter:brightness(1.3)}
html body .delete-dialog{width:min(400px,92vw);text-align:center}
html body .secondary.danger{color:#ffb3a8!important}
html body .hero-swap{position:fixed;top:12px;left:12px;z-index:5;display:flex;align-items:center;gap:6px;padding:0 4px;border:solid;border-width:12px;border-image:url(assets/ui/kit/frame.png) 14 fill/12px stretch;box-shadow:0 6px 20px #0008}
html body .hero-swap[hidden]{display:none}
html body .hero-swap-head{font:400 18px var(--k-head);color:var(--k-gold);text-shadow:var(--k-shadow);writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:2px}
html body .hero-swap-slot{display:flex;flex-direction:column;align-items:center;gap:1px;width:74px;padding:2px!important;background:none!important;border:solid!important;border-width:8px!important;border-image:url(assets/ui/kit/slot.png) 5 fill/8px stretch!important;color:var(--k-parch)!important;cursor:pointer;min-height:0}
html body .hero-swap-slot canvas{width:32px;height:32px;image-rendering:pixelated}
html body .hero-swap-slot small{font:700 11px var(--k-font)!important;white-space:nowrap}
html body .hero-swap-slot.current{border-image-source:url(assets/ui/kit/slot-hover.png)!important;color:var(--k-gold)!important;cursor:default;filter:drop-shadow(0 0 4px #f0c06080)}
html body .hero-swap-slot.empty small{color:var(--k-muted)!important}
html body .hero-swap-slot:not(.current):hover{filter:brightness(1.25);transform:translateY(-1px)}
html body .new-hero-classes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:6px 0}
html body .new-hero-class{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px!important;background:none!important;border:solid!important;border-width:10px!important;border-image:url(assets/ui/kit/inset.png) 5 fill/10px stretch!important;color:var(--k-parch)!important;cursor:pointer}
html body .new-hero-class canvas{width:48px;height:48px;image-rendering:pixelated}
html body .new-hero-class b{font:400 20px var(--k-head)!important;color:var(--k-gold)}
html body .new-hero-class small{font:600 12px var(--k-font)!important;color:var(--k-green)}
html body .new-hero-class:hover{filter:brightness(1.2);transform:translateY(-1px)}
html body #selection .cs-body{flex:1 0 auto;min-height:auto}
html body #selection .hero-slots{margin:0;flex:0 0 auto}
html body #selection .cs-roster,html body #selection .cs-play{flex:0 0 auto}
/* The side panel never scrolls: the minimap gives up height on short screens so an open 8-slot satchel still fits. */
html body .reference-hud #radar{width:min(100%,max(96px,calc(100vh - 770px)))!important;margin:0 auto}
html body .reference-hud .radar-wrap{display:flex;justify-content:center}
/* Satchel: just its slots under the belt, no title bar or coloured rule. */
html body #satchelPanel{border:0!important;padding:0!important;margin-top:8px!important}
html body #satchelPanel #satchelTitle{display:none!important}
/* XP, HP and MP: the same track height and even gaps. The MP frame's bottle rises 6px above its track, so its top
   margin is 6px smaller to line the tracks up evenly. */
html body .reference-hud .panel-bar{margin:0!important}
html body .reference-hud .panel-bar.experience{margin-top:8px!important}
html body .reference-hud .panel-bar.hitpoints{margin-top:8px!important}
html body .reference-hud .panel-bar.energy{margin-top:2px!important}
html body .reference-hud .status-chips:empty{display:none}
html body .reference-hud .status-chips:not(:empty){margin-top:6px}
html body .reference-hud .panel-stats{margin-top:10px!important}

html body .reference-hud .panel-stats{grid-template-columns:repeat(4,1fr)!important}

/* Loading screen: the logo, a progress bar and a tip, over the menu's dark sunset; fades out when ready. */
.loading{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,#4a2610 0,#1a0f0a 45%,#07090c 100%);transition:opacity .35s ease;opacity:1}
.loading[hidden]{display:none}
.loading.done{opacity:0;pointer-events:none}
.loading-card{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(460px,86vw);text-align:center}
.loading .menu-title{position:static;font-size:clamp(48px,10vw,110px)}
.loading .menu-sub{position:static;transform:none;margin:0}
.loading-text{margin-top:18px;color:var(--k-cream);font-size:18px;letter-spacing:1px;text-shadow:var(--k-shadow)}
.loading-bar{width:100%;height:14px;border:2px solid #2b1606;background:#1a1014;box-shadow:0 0 0 2px var(--k-gold-d),0 0 18px #f0c06033}
#loadingFill{height:100%;width:0;background:linear-gradient(#ffe59b,#f0c060 55%,#c9802c);transition:width .2s ease}
.loading-tip{margin:6px 0 0;color:var(--k-muted);font-size:15px;min-height:1.4em}