/* Slate & gold UI (Higgsfield kit, assets/ui/slate/, installed by tools/import-slate-ui.mjs). Loaded after
   ui-theme.css and wins over it: the same layout, re-skinned. Slices are in the pieces' own pixels (measured from
   their inner areas); each border width scales that down to the size it is drawn at. */
:root{--s-ink:#0c1018;--s-slate:#161d29;--s-slate-2:#1e2735;--k-muted:#9aa6b8;--k-parch:#d8cfbd}
html body .slot,html body .panel-bar,html body .primary,html body .secondary,html body dialog,html body .reference-hud,html body #radar,html body .item-tooltip{image-rendering:auto!important}

/* Panels, dialogs and frames */
html body dialog,html body .travel-prompt,html body .trade-prompt,html body .big-map,html body .interact,html body .main-menu .menu-bar,html body #selection .cs-overview,html body #selection .cs-roster,html body .hero-swap{border-image:url(assets/ui/slate/panel.png) 12 fill/14px stretch!important;border-width:14px!important}
html body .interact{border-width:10px 14px!important;border-image-width:10px 14px!important}
html body .main-menu .menu-bar{border-width:14px 18px!important;border-image-width:14px 18px!important}
html body #selection .cs-box,html body .realm-list button,html body .hero-slot{border-image:url(assets/ui/slate/panel.png) 12 fill/10px stretch!important;border-width:10px!important}
html body .item-tooltip{border-image:url(assets/ui/slate/tooltip.png) 24 12 12 12 fill/16px 8px 8px 8px stretch!important;border-width:16px 8px 8px 8px!important}
html body .toast{border-image:url(assets/ui/slate/stat.png) 15 fill/8px 10px stretch!important}

/* Buttons */
html body .primary,html body button.primary,html body .main-menu .menu-bar .menu-play{border-image:url(assets/ui/slate/button.png) 22 fill/12px 14px stretch!important;border-width:12px 14px!important;color:#fff6df!important;text-shadow:0 1px 0 #6a2a08,0 2px 0 #3a1604!important}
html body .primary:hover:not(:disabled){filter:brightness(1.12)}
html body .secondary,html body button.secondary,html body .reference-hud .panel-tools button,html body .reference-hud .radar-expand,html body kbd{border-image:url(assets/ui/slate/button-dark.png) 17 27 17 27 fill/7px 9px stretch!important;border-width:7px 9px!important}
html body .secondary:hover:not(:disabled){border-image-source:url(assets/ui/slate/button-dark.png)!important;filter:brightness(1.3)}
html body .reference-hud .panel-tools button,html body .reference-hud .radar-expand{border-width:6px 7px!important;border-image-width:6px 7px!important}
html body kbd{border-width:4px 5px!important;border-image-width:4px 5px!important}

/* Fields */
html body input:not([type=checkbox]):not([type=range]),html body select,html body #selection .cs-stats>div,html body #selection .cs-tab{border-image:url(assets/ui/slate/stat.png) 15 fill/7px stretch!important;border-width:7px!important}

/* Character panel */
html body .reference-hud{background:var(--s-slate)!important;border-image:url(assets/ui/slate/panel.png) 12 fill/12px stretch!important}
html body .reference-hud .radar-wrap{margin-top:2px}
html body .reference-hud .panel-tools,html body .reference-hud .panel-character{border-image:url(assets/ui/slate/stat.png) 15 fill/7px stretch!important;border-width:7px!important}
html body .reference-hud #panelPortrait{border:solid;border-width:5px 5px 9px 5px;border-image:url(assets/ui/slate/portrait.png) 19 19 36 19/5px 5px 9px 5px stretch;background:#0a0d14;box-sizing:content-box}
html body .reference-hud .panel-stats>div{border-image:url(assets/ui/slate/stat.png) 15 fill/6px stretch!important;border-width:6px!important}

/* Bars: the gem on the left carries the icon, so the HP / MP / XP letters are hidden */
html body .reference-hud .panel-bar{border-image-repeat:stretch!important;height:26px!important;margin:3px 0!important}
html body .reference-hud .panel-bar.hitpoints{border-image-source:url(assets/ui/slate/bar-hp.png)!important;border-image-slice:19 19 16 48 fill!important;border-width:10px 10px 9px 26px!important;border-image-width:10px 10px 9px 26px!important}
html body .reference-hud .panel-bar.energy{border-image-source:url(assets/ui/slate/bar-mp.png)!important;border-image-slice:18 21 18 50 fill!important;border-width:10px 11px 10px 26px!important;border-image-width:10px 11px 10px 26px!important;height:26px!important}
html body .reference-hud .panel-bar.experience{border-image-source:url(assets/ui/slate/bar-xp.png)!important;border-image-slice:17 20 16 43 fill!important;border-width:9px 10px 8px 22px!important;border-image-width:9px 10px 8px 22px!important;height:22px!important}
html body .reference-hud .panel-bar b{display:none!important}
html body .reference-hud .panel-bar i{box-shadow:inset 0 2px #ffffff45,inset 0 -2px #00000055!important}
html body .reference-hud .panel-bar.hitpoints i{background:linear-gradient(#ff7a66,#d33a30 60%,#a3221c)!important}
html body .reference-hud .panel-bar.energy i{background:linear-gradient(#7fc0ff,#3d7fe0 60%,#2757ad)!important}
html body .reference-hud .panel-bar.experience i{background:linear-gradient(#ffe08a,#e2a83a 60%,#b67a1c)!important}
html body .reference-hud .panel-bar span{font:700 11px var(--k-font)!important}

/* Slots: backpack, satchel, vault; equipment shows an engraved silhouette while empty */
html body .reference-hud .slot,html body .reference-hud .panel-bag>button,html body .vault-items>button{border-image:url(assets/ui/slate/slot.png) 19 fill/7px stretch!important;border-width:7px!important}
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/slate/slot-hover.png)!important;filter:none}
html body .reference-hud .panel-equipment .slot{border-image-source:url(assets/ui/slate/slot.png)!important}
html body .reference-hud .panel-equipment .slot:not(.filled)[data-index="0"]{border-image-source:url(assets/ui/slate/slot-weapon.png)!important}
html body .reference-hud .panel-equipment .slot:not(.filled)[data-index="1"]{border-image-source:url(assets/ui/slate/slot-skill.png)!important}
html body .reference-hud .panel-equipment .slot:not(.filled)[data-index="2"]{border-image-source:url(assets/ui/slate/slot-armor.png)!important}
html body .reference-hud .panel-equipment .slot:not(.filled)[data-index="3"]{border-image-source:url(assets/ui/slate/slot-ring.png)!important}
html body .reference-hud .panel-equipment .slot:not(.filled) .slot-ghost{visibility:hidden}
html body .reference-hud .panel-bag>button>span{color:#3a4658!important}
/* Potion belt: round sockets */
html body .reference-hud .panel-potions>button.slot,html body .reference-hud .panel-potions>button.slot:hover{border:0!important;border-image:none!important;background:url(assets/ui/slate/slot-potion.png) center/contain no-repeat!important;min-height:52px}
html body .reference-hud .panel-potions>button.slot:hover{filter:brightness(1.2)}

/* Section divider: a gold line with a sun */
html body .reference-hud .bag-divider{border:0!important;border-image:none!important;background:url(assets/ui/slate/divider.png) center/contain no-repeat!important;min-height:12px!important;height:12px!important;margin:6px 0!important}
html body .reference-hud .bag-divider:not(:empty){height:auto!important;padding:10px 0 0!important;background-position:center bottom!important}

/* Death screen: no frame on the full-screen dialog; the legacy tally sits on a slate panel */
html body dialog.death-screen{border:0!important;border-image:none!important;padding:18px 16px 80px!important;box-shadow:none!important}
html body .death-stats{border-image:url(assets/ui/slate/panel.png) 12 fill/12px stretch!important}

/* Character select and hero slots */
html body #selection .cs-tile,html body .new-hero-class,html body #selection .cs-kit .slot,html body #selection .cs-kit>*,html body .hero-swap-slot{border-image:url(assets/ui/slate/slot.png) 19 fill/8px stretch!important;border-width:8px!important}
html body #selection .cs-tile[aria-pressed="true"],html body .hero-swap-slot.current{border-image-source:url(assets/ui/slate/slot-hover.png)!important}
html body .hero-slot canvas{border-image:url(assets/ui/slate/slot.png) 19 fill/6px stretch}
html body #selection .cs-portrait{border-image:url(assets/ui/slate/portrait.png) 19 19 36 19 fill/12px 12px 18px 12px stretch!important;border-width:12px 12px 18px!important}
html body .hero-delete{border-image:url(assets/ui/slate/button-dark.png) 17 27 17 27 fill/5px 6px stretch}

/* ---- Panel layout: a column where the minimap takes whatever height is left (as large as the panel is wide), so
   nothing ever needs scrolling or gets clipped. The satchel's space is always kept (invisible when you are not on
   one), so opening a satchel never moves anything. Slots keep one size whether empty or holding an item. */
:root{--panel-width:clamp(232px,14.5vw,300px)}
html body .reference-hud{display:flex!important;flex-direction:column;overflow-y:auto}
html body .reference-hud>*{flex:none}
/* Minimap: the slate frame (minimap-frame.png, its window cut out by tools/cut-minimap-window.mjs) is laid over the
   canvas at its own proportions: --r is the frame's width, --k one frame pixel. The frame is 167 wide; its window
   starts 37 down and 14 in, and is kept square (139) so the map is never stretched, making the frame 192 tall. The
   slices keep the sun and the corner ornaments whole, and they overlap the map edge as in the original art. */
html body .reference-hud .radar-wrap{flex:1 1 0!important;min-height:110px;container-type:size;display:block!important;margin-top:0;padding-bottom:10px;box-sizing:border-box;max-height:calc((var(--panel-width) - 16px)*192/167 + 10px)}
html body .reference-hud .radar-wrap>*,html body .reference-hud .radar-wrap::before{--r:min(100cqw,100cqh*167/192);--k:calc(var(--r)/167)}
html body .reference-hud .radar-wrap::before{content:'';position:absolute;z-index:1;left:calc(50% - var(--r)/2);top:0;width:var(--r);height:calc(var(--k)*192);box-sizing:border-box;pointer-events:none;border:solid transparent;border-width:calc(var(--k)*46) calc(var(--k)*26) calc(var(--k)*24);border-image:url(assets/ui/slate/minimap-frame.png) 46 26 24/calc(var(--k)*46) calc(var(--k)*26) calc(var(--k)*24) stretch;image-rendering:auto}
html body .reference-hud #radar{width:calc(var(--k)*139)!important;height:calc(var(--k)*139)!important;margin:calc(var(--k)*37) auto 0!important;box-sizing:border-box;border:0!important;border-image:none!important;background:#07090c!important}
html body .reference-hud .radar-expand{z-index:2;top:calc(var(--k)*37 + 6px)!important;right:calc(50% - var(--r)/2 + var(--k)*14 + 6px)!important}
html body #satchelPanel[hidden]{display:block!important;visibility:hidden;pointer-events:none}
html body #satchelPanel #satchelGrid{aspect-ratio:2/1;align-content:start}
html body .reference-hud .slot,html body .vault-items>button{overflow:hidden;min-height:0;min-width:0}
html body .reference-hud .panel-equipment .slot,html body .reference-hud .panel-bag>button.slot{aspect-ratio:1!important;height:auto!important}
html body .reference-hud .slot>.item-art,html body .vault-items>button>.item-art{position:absolute;left:2px;top:2px;width:calc(100% - 4px)!important;height:calc(100% - 4px)!important;object-fit:contain}
html body .reference-hud .panel-potions>button.slot>.item-art{left:25%;top:25%;width:50%!important;height:50%!important}
html body .reference-hud .slot>.slot-ghost,html body .reference-hud .panel-bag>button>span{position:absolute;inset:0;display:grid;place-items:center;line-height:1}

/* Messages sit under the compass, and under the boss bar during a boss fight */
html body.playing .toast{top:62px!important}
html body.playing.boss-fight .toast{top:116px!important}

/* ---- Even rhythm: every block in the panel is spaced by the same gap, no stray margins */
html body .reference-hud{gap:7px;padding:6px 8px 8px!important}
html body .reference-hud>*{margin-top:0!important;margin-bottom:0!important}
html body .reference-hud .panel-bar{margin:0!important}
html body .reference-hud .status-chips:empty{display:none}
html body .reference-hud .bag-divider{display:none!important}
/* Zone line: the name shrinks with an ellipsis rather than pushing the buttons */
html body .reference-hud .panel-tools{display:flex!important;align-items:center;gap:4px;min-height:0}
html body .reference-hud .panel-tools #areaLabel{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px!important;letter-spacing:.3px}
html body .reference-hud .panel-tools>span:last-child{display:flex;gap:3px;flex:none}
html body .reference-hud .panel-tools button{width:24px!important;height:22px!important;font-size:12px!important}
/* Potion sockets: round, centred in their half, key tag tucked on the rim */
html body .reference-hud .panel-potions{justify-items:center}
html body .reference-hud .panel-potions>button.slot{width:58px!important;height:58px!important;min-height:0}
html body .reference-hud .panel-potions>button.slot kbd{top:auto!important;right:-4px!important;bottom:-2px!important}

/* Status effects show above the hero in the world, not in the panel (they pushed the layout about) */
html body .reference-hud #statusChips{display:none!important}

/* ---- Settings dialog */
html body .settings-dialog{width:min(560px,94vw)}
html body .settings-body{display:grid;gap:12px;max-height:min(70vh,640px);overflow-y:auto;padding-right:4px}
html body .settings-body section{display:grid;gap:8px}
html body .settings-body h3{margin:4px 0 0;font-size:20px}
html body .set-row{display:grid;grid-template-columns:150px 1fr 44px;align-items:center;gap:10px;color:var(--k-cream);font-size:15px}
html body .set-row select{grid-column:2 / 4}
html body .set-row output{color:var(--k-gold);font-weight:700;text-align:right}
html body .set-row input[type=range]{accent-color:#f0c060;width:100%}
html body .set-check{display:flex;align-items:center;gap:8px;color:var(--k-cream);font-size:15px}
html body .set-check input{accent-color:#f0c060;width:18px;height:18px}
html body .set-keys p{margin:0;line-height:2;color:var(--k-parch);font-size:14px}
html body .set-keys kbd{margin:0 1px}
html body .settings-actions{display:flex;justify-content:space-between;gap:10px;margin-top:14px}

/* Title menu: two buttons either side of PLAY, which sits exactly in the middle */
html body .main-menu .menu-bar{display:grid!important;grid-template-columns:1fr 1fr auto 1fr 1fr;align-items:center;justify-items:center}

/* In game the ⚙ button (or Esc) opens Settings, which holds the guide and leaving: the ? and pause buttons are gone */
html body .reference-hud #helpButton,html body .reference-hud #pauseButton{display:none!important}
html body .settings-actions{flex-wrap:wrap}
html body .settings-actions #settingsClose{margin-left:auto}

/* The zone strip above the character box is gone (the zone shows at the bottom of the panel); the one system button
   sits at the top left of the game view, bigger, with the Stillroot hero swapper beside it. */
html body .reference-hud .panel-tools{display:none!important}
html body .system-button{position:fixed;top:12px;left:12px;z-index:6;width:52px;height:52px;padding:0!important;display:grid;place-items:center;font:400 28px/1 var(--k-font)!important;color:var(--k-gold)!important;background:none!important;border:solid!important;border-width:9px 11px!important;border-image:url(assets/ui/slate/button-dark.png) 17 27 17 27 fill/9px 11px stretch!important;text-shadow:var(--k-shadow);cursor:pointer;box-shadow:0 6px 18px #0008}
html body .system-button:hover{filter:brightness(1.25)}
html body .hero-swap{left:74px!important}

/* Auto-attack indicator, under the system button */
html body .auto-fire-badge{position:fixed;top:70px;left:12px;z-index:6;padding:3px 8px;font:700 12px var(--k-font);letter-spacing:1px;color:#ffd9a0;border:solid;border-width:6px;border-image:url(assets/ui/slate/stat.png) 15 fill/6px stretch;animation:auto-pulse 1.4s ease-in-out infinite}
html body .auto-fire-badge[hidden]{display:none}
@keyframes auto-pulse{50%{color:#ff9d5a}}

/* ---- Admin tools (F8): slate buttons and fields, gold section heads over a sun divider, gold Close */
html body .admin-dialog{width:min(660px,94vw);max-width:none;padding:18px 22px!important}
html body .admin-dialog h2{margin:0 0 2px;font-size:30px!important;color:var(--k-gold)}
html body .admin-dialog h3{margin:14px 0 6px;padding-top:14px;font-size:18px!important;color:var(--k-gold)!important;background:url(assets/ui/slate/divider.png) center top/auto 10px no-repeat}
html body .admin-row{gap:8px;margin:7px 0;font-size:14px;color:var(--k-parch)}
html body .admin-dialog .admin-row button{width:auto;flex:0 0 auto;margin:0;min-height:0;height:auto;padding:1px 8px!important;background:none!important;border:solid!important;border-width:7px 9px!important;border-image:url(assets/ui/slate/button-dark.png) 17 27 17 27 fill/7px 9px stretch!important;color:var(--k-cream)!important;font:800 13px var(--k-font)!important;letter-spacing:.8px;text-transform:uppercase;text-shadow:var(--k-shadow);box-shadow:none!important;transition:transform .06s,filter .1s}
html body .admin-dialog .admin-row button:hover{filter:brightness(1.3);transform:translateY(-1px)}
html body .admin-dialog .admin-row button:active{filter:brightness(.9);transform:translateY(1px)}
html body .admin-dialog .admin-row button[data-admin=close]{margin-left:auto;padding:1px 14px!important;border-width:12px 14px!important;border-image:url(assets/ui/slate/button.png) 22 fill/12px 14px stretch!important;color:#fff6df!important;text-shadow:0 1px 0 #6a2a08,0 2px 0 #3a1604!important}
html body .admin-row select,html body .admin-row input[type=number]{background:none!important;color:var(--k-cream)!important;font:600 13px var(--k-font)!important;padding:1px 4px!important;max-width:280px;outline:0}
html body .admin-row select option{background:var(--s-slate);color:var(--k-cream)}
html body .admin-row input[type=number]{width:64px}
html body .admin-row label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
html body .admin-row input[type=checkbox]{accent-color:#f0c060;width:16px;height:16px;margin:0}
html body .admin-hint{font-size:13px;color:var(--k-muted);opacity:1;margin:6px 0 0}

/* ---- Portraits (48×48 pictures, opaque backgrounds) sit inside their frames instead of over them */
/* Character screen: the frame is 12px at the sides and top, 18px at the bottom; the picture fills the window exactly. */
html body #selection .cs-portrait{width:132px!important;height:138px!important;padding:0!important;box-sizing:border-box!important;overflow:hidden}
html body #selection #csPortrait{width:108px!important;height:108px!important;display:block}
/* Death screen: a round picture inside the turning ring (whose inside is 154px across) */
html body #deathPortrait{width:136px;height:136px;border-radius:50%;box-shadow:0 0 0 3px #0a0d14}
/* Small slots: the picture is clipped to the slot's inside */
html body .hero-slot canvas,html body .hero-swap-slot canvas,html body .new-hero-class canvas,html body #selection .cs-tile canvas{box-sizing:border-box;overflow:hidden}