/* In-game HUD: fixed "widget" panels floating over a full-bleed world canvas.
 * Layout follows the game-client mockup — vitals top-left, map + battle right,
 * containers under them, action bar bottom-centre, console bottom-left. */

#gameScreen{background:#05070d}
#world{position:absolute;inset:0;overflow:hidden}
#view{display:block;width:100%;height:100%;image-rendering:pixelated;cursor:crosshair}
.worldvig{position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 180px 40px #000a, inset 0 0 60px #0006}

/* THE HURT INDICATOR. Two screen-edge layers over the world, both purely decorative and both
   click-through — the world canvas underneath must stay fully interactive.
     #hurtvig  one blow: a red border pulse, opacity driven per frame from state.hurt
     #lowhp    a state, not an event: a dimmer, slower breath while your health is critical
   The gradient is transparent through the middle two thirds of the screen, so the thing that
   is hitting you is never obscured by the mark that says it hit you. */
#hurtvig,#lowhp{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:4;
  will-change:opacity;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,0) 42%, rgba(160,26,20,.34) 74%, rgba(214,42,32,.72) 100%)}
#lowhp{background:radial-gradient(ellipse at center,
    rgba(0,0,0,0) 46%, rgba(120,16,14,.26) 78%, rgba(170,26,22,.5) 100%)}
#lowhp.on{animation:lowhpbeat 1.35s ease-in-out infinite}
@keyframes lowhpbeat{0%,100%{opacity:.34}50%{opacity:.82}}
@media (prefers-reduced-motion:reduce){#lowhp.on{animation:none;opacity:.5}}
/* the 210px floor keeps the hint out of the chat console (12 + 186 + a breath) when a short
   hotbar style (grid/slim) pulls --dockh down */
/* width cap: the rails claim ~500px (fight menu 188 left, minimap/battle 226 right), so on
   narrow viewports the hint wraps instead of sliding under either column */
#hint{position:absolute;left:50%;bottom:max(calc(var(--dockh,108px) + 24px), 210px);transform:translateX(-50%);
  color:#b9c2d8;font-size:11px;text-shadow:0 1px 3px #000;background:#0009;text-align:center;
  max-width:calc(100vw - 520px);
  padding:4px 12px;border-radius:20px;pointer-events:none;z-index:5}

/* gem sockets ----------------------------------------------------------
   A row of dots along the BOTTOM of an item cell — filled ones take the gem's own colour, empty
   ones are hollow. Bottom-left, because the stack count already owns the bottom-right and the
   rarity strip owns the top. Deliberately tiny: on a 2x3 cuirass three dots must read at a
   glance without competing with the art. Used by BOTH inventory surfaces (hud.js
   socketPipsHTML), which is the only reason they cannot drift apart. */
.sock{position:absolute;left:2px;bottom:2px;display:flex;gap:2px;pointer-events:none;z-index:3}
.sock i{width:5px;height:5px;border-radius:50%;border:1px solid #000a;
  box-shadow:0 0 2px #000c, inset 0 1px 0 #ffffff55}
.sock i.e{background:#1a1a1ecc;border-color:#ffffff40;box-shadow:inset 0 1px 2px #000}

/* the world action prompt: "Press F to mine" ---------------------------
   Sits just above #hint and below the dock, centred, and never eats a click — it is a label on
   the world, not a button. Three states, and each has to be readable at a glance while you are
   walking past: gold = go, grey with a RED reason = you are missing the tool, dim = spent. */
#actPrompt{position:absolute;left:50%;bottom:max(calc(var(--dockh,108px) + 52px), 238px);
  transform:translateX(-50%);display:flex;align-items:center;gap:8px;white-space:nowrap;
  padding:5px 14px;border-radius:20px;font-size:13px;color:var(--gold2);
  background:#000000b0;border:1px solid var(--line2);text-shadow:0 1px 3px #000;
  pointer-events:none;z-index:6}
#actPrompt[hidden]{display:none}
#actPrompt b{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;
  border-radius:4px;font-size:11px;color:#1a1206;
  background:linear-gradient(150deg,var(--gold2),var(--gold));border:1px solid #6b551f}
/* the reason half — its own colour, because "tool required" is the part the player must read */
#actPrompt i{font-style:normal;font-size:11px;color:#e08a86}
#actPrompt.off{color:var(--faint);border-color:var(--edge)}
#actPrompt.off b{background:#3a3630;color:#0006;border-color:#4a4438}
#actPrompt.spent{color:var(--faint);border-color:var(--edge)}
#actPrompt.spent i{color:#8fa07c}

/* HUD widgets ---------------------------------------------------------- */
.hudw{position:fixed;z-index:10}
#topbar{left:0;right:0;top:0;height:40px;border-radius:0;border-left:none;border-right:none;
  display:flex;align-items:center;gap:14px;padding:0 14px;z-index:15}
#topbar::before,#topbar::after{display:none}
#topbar .tbtns{display:flex;gap:6px;margin-left:8px}

#frames{left:12px;top:52px;width:242px}

/* vitals + combat stance: top centre, battle-mages style — a name line over full-width
   stacked bars ruled into 10-point squares, our glass-and-gold material */
#vitals{left:50%;top:46px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;
  padding:6px 12px 8px}
#vitals .vcol{display:flex;flex-direction:column;gap:4px;width:min(440px,44vw)}
#vitals .vname{text-align:center;font-size:12px;font-weight:700;color:#e8e4d8;
  text-shadow:0 1px 3px #000;letter-spacing:.3px;line-height:1.2}
#vitals .vlvl{color:var(--gold2);font-size:11px;margin-right:2px}
#vitals .vnums{margin-left:8px;font-weight:600;font-size:11px}
#vitals .vnums b{margin-left:7px;font-weight:600}
#vitals .vnums .nhp{color:#7de08a}
#vitals .vnums .nmp{color:#7fb8f0}
#vitals .vnums .nst{color:#e8cf7a}
#vitals .sbar{position:relative;height:16px;border-radius:7px;overflow:hidden;
  background:rgba(8,11,20,.78);border:1px solid var(--line2);
  box-shadow:0 2px 8px rgba(0,0,0,.45),inset 0 1px 2px #000a}
#vitals .sbar.mp{height:11px;border-radius:6px}
#vitals .sbar.st{height:8px;border-radius:5px}
#vitals .sbar i{display:block;height:100%;width:0;transition:width .15s ease-out}
#vitals .sbar.mp i{background:linear-gradient(180deg,#7fc4ff,#3f8fd6)}
#vitals .sbar.st i{background:linear-gradient(180deg,#f5e08a,#d8b13c)}
#vitals .sbar em{position:absolute;inset:0;pointer-events:none}
#vitals .modes{margin-left:0;padding-bottom:0;align-items:center}
@media (max-width:1100px){#vitals .vcol{width:36vw}}
.frame{padding:9px 10px 10px}
.fr-top{display:flex;gap:9px;align-items:center;margin-bottom:8px}
.portrait{position:relative;width:48px;height:48px;border-radius:8px;flex:0 0 auto;
  background:radial-gradient(circle at 50% 30%,#1d2440,#0a0e1a);border:1px solid var(--line2)}
.portrait canvas{width:100%;height:100%;image-rendering:pixelated}
.lvlbadge{position:absolute;right:-6px;bottom:-6px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:10px;font-weight:700;color:#1a1206;
  background:linear-gradient(150deg,var(--gold2),var(--gold));border:1px solid #6b551f}
.passive-badge{position:absolute;left:3px;bottom:-19px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;z-index:2;cursor:help;font-size:14px;line-height:1;color:#d8f0bd;
  background:radial-gradient(circle at 36% 30%,#547749,#203928);border:1px solid #88ad67;
  box-shadow:0 1px 5px #000c,0 0 8px #75c66a88}
.passive-badge[hidden]{display:none}
/* the Comfort LEVEL, as a stack-count pill on the moon — 1..5, and the only way the badge can
   tell a feather bed from a patch of mud at a glance */
.passive-badge i{position:absolute;right:-4px;bottom:-3px;min-width:12px;height:12px;padding:0 1px;
  border-radius:6px;display:grid;place-items:center;font-style:normal;font-size:9px;
  font-weight:700;line-height:1;color:#1a1206;background:linear-gradient(150deg,var(--gold2),var(--gold));
  border:1px solid #6b551f;box-shadow:0 1px 3px #000a}
.passive-badge i:empty{display:none}
.fr-meta .nm{font-weight:600}
.fr-meta .voc{font-size:11px;color:var(--faint)}
.bars{display:flex;flex-direction:column;gap:4px}

#minimap{right:12px;top:52px;width:214px;padding:0 0 6px}
#minimap canvas{display:block;width:200px;height:132px;margin:6px auto 0;
  image-rendering:pixelated;border:1px solid #000;cursor:pointer;border-radius:4px}

#battle{right:12px;top:242px;width:214px;max-height:38vh;display:flex;flex-direction:column}
.battle-body{overflow-y:auto;padding:4px}
.battle-body .empty{color:var(--faint);font-size:11px;padding:6px}
.foe{position:relative;display:flex;align-items:center;gap:6px;padding:3px 4px;margin:2px 0;
  border:1px solid transparent;border-radius:6px;cursor:pointer}
.foe:hover{background:#1b2237}
.foe.target{border-color:#5a2630;background:#25141a}
.foe .fkey{position:absolute;left:-2px;top:-6px;font-size:8px;color:var(--gold);
  background:#0b1020;border:1px solid var(--line);border-radius:3px;padding:0 3px}
.foe .fic{width:26px;height:26px;background:#0b0f1c;border:1px solid var(--line);
  border-radius:5px;image-rendering:pixelated;flex:0 0 auto}
.foe .fn{flex:1;min-width:0;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foe .fn .alert{color:var(--bad)}
.foe .fbar{width:52px;height:5px;background:#000;border-radius:3px;overflow:hidden;flex:0 0 auto}
.foe .fbar i{display:block;height:100%;background:var(--good)}

#containers{right:12px;top:calc(52px + 190px + 38vh + 12px);width:214px;
  display:flex;flex-direction:column;gap:6px;max-height:30vh;overflow-y:auto}
.cont{padding:0 0 7px}
.cont .ph .x{margin-left:6px;background:none;border:none;color:var(--faint);cursor:pointer;padding:0 2px}
.cont .ph .x:hover{color:#fff}
/* the container's own board: --ccols comes from the bag's `grid`, an item spans its footprint */
.cgrid{display:grid;grid-template-columns:repeat(var(--ccols,4),34px);grid-auto-rows:34px;gap:3px;padding:6px 7px 0}
.cgrid .citem{aspect-ratio:auto;width:auto;height:auto}
.cgrid .citem img{width:100%;height:100%;object-fit:contain;padding:10%}
.cgrid .citem.overflowed{outline:1px solid #c07a55;outline-offset:-1px}

/* the bottom dock stacks the experience bar on top of the hotbar, so the hotbar can grow
   rows without the experience bar needing to know about it */
#bottomdock{left:50%;bottom:12px;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:stretch;gap:6px}
#xpbar{padding:5px 10px}
#actionbar{display:flex;gap:7px;padding:7px 9px;justify-content:center;align-items:center}
.barrows{display:flex;flex-direction:column;gap:5px}
.barrow{display:flex;gap:5px;justify-content:center}
.barctl{display:flex;flex-direction:column;gap:4px}
.barbtn{width:22px;height:22px;border-radius:50%;background:#0c1120;border:1px solid var(--line);
  color:var(--gold2);cursor:pointer;font-size:13px;line-height:1;padding:0}
.barbtn:hover:not(:disabled){border-color:var(--gold)}
.barbtn:disabled{opacity:.35;cursor:default}
#actionbar .slot.empty{border-style:dashed;border-color:#26304c}
#actionbar .slot.empty .ic::before{content:'＋';color:#3a4568;font-size:15px}
#actionbar .slot.drop{border-color:var(--gold);box-shadow:0 0 10px -3px var(--gold)}
#actionbar .slot.dragsrc{opacity:.4}
.slotghost{position:fixed;z-index:500;transform:translate(-50%,-50%);pointer-events:none;
  font-size:22px;filter:drop-shadow(0 2px 6px #000)}
.slotghost img{width:26px;height:26px;image-rendering:pixelated}
.slotghost img.abico{width:32px;height:32px;image-rendering:auto}
#actionbar .ic img{object-fit:contain}
#actionbar .slot{position:relative;width:54px;height:58px;border-radius:8px;cursor:pointer;
  background:linear-gradient(#141a2c,#0c1020);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;overflow:hidden}
#actionbar .slot:hover{border-color:var(--gold)}
#actionbar .slot.ready{border-color:var(--el,var(--gold));box-shadow:0 0 12px -4px var(--el,var(--gold))}
#actionbar .slot.dim{opacity:.45}
#actionbar .k{position:absolute;left:3px;top:2px;font-size:8px;color:var(--faint)}
#actionbar .ic{font-size:19px;line-height:1;filter:drop-shadow(0 0 6px var(--el,transparent))}
#actionbar .ic img{width:22px;height:22px;image-rendering:pixelated}
/* generated ability tiles (abilityicons.js): crisp vectors, larger than the old emoji */
#actionbar .ic img.abico{width:30px;height:30px;image-rendering:auto;display:block}
#actionbar .nm{font-size:8px;color:var(--dim);max-width:52px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#actionbar .q{position:absolute;right:4px;top:2px;font-size:9px;color:var(--gold2)}
#actionbar .cd{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center}
/* A RADIAL SWEEP, not the bottom-up wipe this used to be. Both are honest readouts of the same
   fraction, but the sweep is the genre convention and it reads better for the thing it is actually
   for: a wipe's remaining height is hard to judge at a glance, while a wedge's ANGLE is legible
   peripherally — you learn "about a quarter turn left" without looking straight at the bar.

   `--cdf` is the fraction still on cooldown (1 = just cast, 0 = ready) and hud.js sets only that,
   so the two renderers of this bar cannot disagree about the geometry. The conic gradient runs
   `from -90deg` so the wedge starts at twelve o'clock and unwinds clockwise, and both stops sit at
   the same angle to give a hard edge rather than a blurred one.

   The shade is `--cdc` rather than a literal, because two skins used to restyle this element by
   setting `background` outright — which would now replace the gradient with a flat pane over the
   whole tile. They set the variable instead, so a skin still owns the colour and cannot
   accidentally own the geometry.

   No `opacity` here: at --cdf 0 every stop collapses to 0turn and the last one (transparent) fills
   the tile, so the wedge disappears on its own. Fading it as well would make a half-spent cooldown
   read as half-translucent, which is a different quantity. */
#actionbar .cd i{position:absolute;inset:0;--cdf:0;--cdc:#000a;
  background:conic-gradient(from -90deg,
    var(--cdc) 0turn, var(--cdc) calc(var(--cdf) * 1turn), transparent calc(var(--cdf) * 1turn))}
/* 14px, not 11: the number is read at a glance mid-fight and it now shares the tile with a
   full-size icon (the runic bar's icons are 39px), so 11px got lost against the art */
#actionbar .cd b{position:relative;font-size:14px;color:#fff;text-shadow:0 1px 3px #000}
/* macro slots: violet ring; .combo pulses while its sequence is running */
#actionbar .slot.macro{--el:#b48ce8}
#actionbar .slot.macro .ic{filter:drop-shadow(0 0 6px #b48ce866)}
#actionbar .slot.combo{border-color:#b48ce8;animation:comboPulse 900ms ease-in-out infinite}
@keyframes comboPulse{
  0%,100%{box-shadow:0 0 6px -2px #b48ce8}
  50%{box-shadow:0 0 16px -2px #b48ce8}
}
/* autocast: a small spinning-arrows badge and a green inner ring */
#actionbar .slot.auto{box-shadow:inset 0 0 0 1px #5fd36a88}
#actionbar .slot.auto::after{content:'⟳';position:absolute;right:2px;bottom:2px;font-size:9px;
  color:#5fd36a;text-shadow:0 1px 2px #000;pointer-events:none}

/* Width is capped so the chat can never slide under the bottom dock. The dock is centred, so
   its left edge is 50vw minus half its width — and its width is NOT a constant: it grows with
   every hotbar slot and row the player adds, and each bstyle sizes its slots differently. So
   measure, don't guess: hud.js publishes the live #actionbar width as --dockw (and rewrites it
   on resize, on rebuild and when the HUD zoom changes). The fallback only has to survive the
   first paint before that runs. */
#console{left:12px;bottom:12px;height:186px;
  width:min(560px,46vw,calc(50vw - var(--dockw,520px)/2 - 22px));
  display:grid;grid-template-rows:auto 1fr auto}
.ctabs{display:flex;gap:3px;align-items:center;padding:5px 6px 0;border-bottom:1px solid var(--edge)}
.ctab{background:#0e1424;border:1px solid var(--line);border-bottom:none;color:var(--faint);
  border-radius:6px 6px 0 0;padding:3px 11px;font-size:11px;cursor:pointer}
.ctab.on{color:var(--gold2);background:#1b2138}
.modes{margin-left:auto;display:flex;gap:3px;padding-bottom:3px}
.mode{width:22px;height:20px;background:#0c1120;border:1px solid var(--line);border-radius:5px;
  color:var(--faint);cursor:pointer;font-size:11px;padding:0;line-height:1}
.mode.on{border-color:var(--gold);color:var(--gold2);background:#241d10}
.modes .gap{width:7px}
.ctab.fold{margin-left:auto;padding:3px 8px;font-size:10px}
#console.collapsed{height:auto;grid-template-rows:auto}
#console.collapsed #log,#console.collapsed .sayrow{display:none}
#log{overflow-y:auto;padding:5px 9px;font-family:var(--mono);font-size:11.5px;line-height:1.5;user-select:text}
#log p{margin:0;white-space:pre-wrap}
.c-white{color:#d7d2c6}.c-green{color:#5fd36a}.c-red{color:#e0776a}.c-blue{color:#7ea6ff}
.c-orange{color:#e0954c}.c-yellow{color:#e0c84c}.c-grey{color:#8d93a6}.c-say{color:#f5e79e}
.sayrow{display:flex;gap:7px;align-items:center;padding:5px 8px;border-top:1px solid var(--edge)}
.sayrow label{color:var(--faint);font-size:11px}
#say{flex:1;background:#0a0e1a;border:1px solid var(--line2);border-radius:6px;
  padding:4px 8px;outline:none;font-family:var(--mono);font-size:11.5px}
#say:focus{border-color:var(--gold)}

.optrow{display:flex;gap:8px;align-items:flex-start;padding:9px 10px;font-size:12px;
  color:var(--dim);cursor:pointer;line-height:1.4}
.optrow input{margin-top:2px;accent-color:var(--gold)}
.optrow:hover{color:var(--gold2)}

/* The combat menu: no CSS chrome at all — it is the artist's panel art, skinned in
   skin-sheet.css. This rule only anchors it: the left rail under the portrait frame
   (frames ends at 243), which is the one default spot clear of every vitals style,
   every hotbar style, the chat and the right-hand column. */
#combatstrip{left:12px;top:255px;z-index:11;
  background:none;border:none;box-shadow:none;padding:0}
/* vitals orientation: .vert lays the bar stack out side by side */
#vitals.vert .vcol{flex-direction:row;align-items:flex-end;gap:6px;width:auto}
#vitals.vert .vcol .vname{display:none}
#vitals.vert .sbar{width:120px}
/* arcs style */
body[data-vstyle="arcs"] #vitals{left:50%;top:46px;transform:translateX(-50%);
  background:none;border:none;box-shadow:none;padding:0}
body[data-vstyle="arcs"] #vitals::before,body[data-vstyle="arcs"] #vitals::after{display:none}
#vitalArcs{display:block;filter:drop-shadow(0 3px 8px #000a)}
.hudresize{position:absolute;right:2px;bottom:0;font-size:14px;color:var(--gold2);
  cursor:nwse-resize;padding:2px 5px;pointer-events:auto}

/* HUD layout customization ---------------------------------------------- */
/* .custompos (a panel dragged to its own pixel spot) deliberately carries NO transform rule:
   applyHudLayout() writes the transform inline — `none`, or `scale()` for the wheel zoom — and
   a `transform:none!important` here would beat that inline style and silently eat the zoom. */
.hudmove{position:absolute;inset:0;z-index:60;display:grid;place-items:center;cursor:grab;
  background:rgba(224,200,76,.13);border:1px dashed var(--gold);border-radius:10px;
  user-select:none;touch-action:none}
.hudmove b{font-size:10px;letter-spacing:.08em;color:var(--gold2);background:#0b1020d9;
  padding:3px 10px;border-radius:6px;pointer-events:none;white-space:nowrap}
.hudmove:active{cursor:grabbing}
/* the containers rail is empty until a bag is opened — give its unlock overlay a body to
   grab, or the panel would be unplaceable exactly when it matters */
.hudunlocked #containers{min-height:64px}

/* --- vitals style: ORBS (round liquid gauges flanking the hotbar) */
body[data-vstyle="orbs"] #vitals{left:50%;top:auto;bottom:10px;transform:translateX(-50%);
  display:flex;align-items:flex-end;gap:14px;background:none;border:none;box-shadow:none;padding:0}
body[data-vstyle="orbs"] #vitals::before,body[data-vstyle="orbs"] #vitals::after{display:none}
.orb{position:relative;width:78px;height:78px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 30%,#141a2c,#05070d);
  border:3px solid #3a3423;box-shadow:0 4px 14px #000c,inset 0 2px 8px #000}
.orb i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--k,0)*100%);
  transition:height .18s ease-out;width:100%!important}
.orb.hp i{background:linear-gradient(180deg,#ff8a7a,#a01f12 70%,#6d1009)}
.orb.mp i{background:linear-gradient(180deg,#7fc4ff,#1e5fa8 70%,#123c6e)}
.orb::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(ellipse at 50% 18%,#ffffff2e,transparent 45%)}
.orb b{position:absolute;left:0;right:0;bottom:30%;text-align:center;font-size:10px;color:#fff;
  text-shadow:0 1px 3px #000;z-index:2}
.orbmid{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:170px;
  padding-bottom:4px}
.orbmid .sbar{width:170px;height:7px;border-radius:4px}
.orbst{font-size:9px;color:#e8cf7a;text-shadow:0 1px 2px #000}
/* hidden vitals placeholders (ids the other styles fill) — scoped to #vitals so the
   generic .btn.ghost buttons elsewhere, such as character creation, stay visible */
#vitals .ghost{display:none}
body[data-vstyle="orbs"] #bottomdock{bottom:26px}

/* --- vitals style: TRIAD — #vitals dissolves (display:contents) so each of the three bars
   is its own fixed element: individually draggable and zoomable in unlock mode */
body[data-vstyle="triad"] #vitals{display:contents}
.tri{position:fixed;z-index:10;display:flex;flex-direction:column;align-items:center;gap:2px}
/* All three ride the measured dock height so no hotbar style can grow up into them.
   The offsets are staggered by more than a bar's height (sides +48, health +88) because on
   narrow viewports the x-floors below squeeze the side bars into the health bar's column —
   they must clear each other VERTICALLY there, not just on wide screens. The floors:
   262px keeps the side bars above the chat console (12+186) and the wrapped two-line key
   hint (210 floor + 44); the x-floor 246px keeps them off the left rail (fight menu ends
   at x188) and the right rail (minimap/battle, 226 wide) when 14% lands inside those. */
#triMp{left:max(14%, 246px);bottom:max(calc(var(--dockh,108px) + 48px), 262px)}
#triHp{left:50%;bottom:calc(var(--dockh,108px) + 88px);transform:translateX(-50%)}
#triSt{right:max(14%, 246px);bottom:max(calc(var(--dockh,108px) + 48px), 262px)}
.tri .sbar{width:200px;height:9px;border-radius:5px}
.tri.hp .sbar{width:240px;height:12px}
.tri b{font-size:9.5px;color:#cfd4e2;text-shadow:0 1px 2px #000;opacity:.85}
.tri .modes{margin-top:2px}

/* --- vitals style: GAUGES (compact corner stack, no portrait) */
body[data-vstyle="gauges"] #vitals{left:12px;top:52px;transform:none}
body[data-vstyle="gauges"] #vitals .vcol{width:230px}
body[data-vstyle="gauges"] .sbar{position:relative}
body[data-vstyle="gauges"] .gtx{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:8.5px;color:#fff;text-shadow:0 1px 2px #000;z-index:2}
body[data-vstyle="gauges"] #frames{display:none}
body[data-vstyle="gauges"] .vname{text-align:left;padding-left:2px}

/* --- hotbar styles */
body[data-bstyle="grid"] #actionbar .slot{width:36px;height:36px;gap:0}
body[data-bstyle="grid"] #actionbar .slot .nm{display:none}
body[data-bstyle="grid"] #actionbar .slot .k{font-size:7px}
body[data-bstyle="grid"] #actionbar .ic{font-size:15px}
body[data-bstyle="grid"] #actionbar .ic img{width:17px;height:17px}
body[data-bstyle="grid"] #actionbar .ic img.abico{width:26px;height:26px}
body[data-bstyle="grid"] .barrow{gap:3px}
body[data-bstyle="grid"] .barrows{gap:3px}
body[data-bstyle="columns"] .barrows{flex-direction:row;gap:5px}
/* wrap at 4 slots per column: a 12-slot row is a tidy 3x4 block, not a 580px tower that
   climbs into the vitals/topbar (and off short viewports entirely) */
body[data-bstyle="columns"] .barrow{flex-direction:column;flex-wrap:wrap;gap:4px;
  max-height:190px;align-content:center}
body[data-bstyle="columns"] #actionbar .slot{width:44px;height:44px}
body[data-bstyle="columns"] #actionbar .slot .nm{display:none}
body[data-bstyle="slim"] #actionbar{background:none;border:none;box-shadow:none;padding:2px}
body[data-bstyle="slim"] #actionbar::before,body[data-bstyle="slim"] #actionbar::after{display:none}
body[data-bstyle="slim"] #actionbar .slot{width:32px;height:32px;border-radius:6px;
  background:#0a0e1acc;border-color:#ffffff28}
body[data-bstyle="slim"] #actionbar .slot .nm{display:none}
body[data-bstyle="slim"] #actionbar .slot .k{font-size:7px;opacity:.7}
body[data-bstyle="slim"] #actionbar .ic{font-size:14px}
body[data-bstyle="slim"] #actionbar .ic img.abico{width:22px;height:22px}
body[data-bstyle="columns"] #actionbar .ic img.abico{width:30px;height:30px}
body[data-bstyle="slim"] #xpbar{background:none;border:none;box-shadow:none;padding:2px 10px}
body[data-bstyle="slim"] #xpbar::before,body[data-bstyle="slim"] #xpbar::after{display:none}

.optsec{padding:8px 10px 2px;color:var(--gold2);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase}
.optpanels{display:grid;grid-template-columns:1fr 1fr;padding:0 2px}
.optrow.pan{padding:4px 10px}
.optrow.sel{justify-content:space-between;align-items:center}
.optrow.sel select{background:#0a0e1a;border:1px solid var(--line2);color:var(--dim);
  border-radius:6px;padding:3px 6px;font-size:11px;max-width:230px}
.optrow.rng{align-items:center;gap:12px}
.optrow.rng>span{flex:1;min-width:0}
.optrow.rng input[type=range]{flex:0 0 190px;accent-color:var(--gold);margin:0}
.optrow.rng b{flex:0 0 46px;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.opthint{padding:2px 10px 8px;font-size:10.5px;color:var(--faint);line-height:1.5}

/* the Esc menu ----------------------------------------------------------- */
/* Full-screen and modal-feeling, but the world keeps running behind it — this is an MMO,
   nothing pauses. Backdrop click and Esc both resume. */
#gameMenu{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 40%,#070a12cc,#03050ae8);
  backdrop-filter:blur(2px)}
#gameMenu.hidden{display:none}
.gm-box{width:min(820px,94vw);height:min(560px,88vh);display:flex;flex-direction:column;
  overflow:hidden;background:linear-gradient(#12172af7,#0b1020f9);
  box-shadow:0 30px 90px -20px #000,0 0 0 1px #ffffff10}
.gm-head{display:flex;align-items:center;padding:13px 16px;flex:none;
  border-bottom:1px solid var(--edge);background:linear-gradient(#18213a,#0f1526)}
.gm-title{font-size:13px;letter-spacing:.2em;font-weight:800;color:var(--gold2)}
.gm-title span{margin-left:8px;letter-spacing:.06em;font-weight:600;color:var(--faint)}
.gm-x{margin-left:auto;width:26px;height:26px;border-radius:7px;background:#0c1120;
  border:1px solid var(--line2);color:var(--dim);cursor:pointer;font-size:13px}
.gm-x:hover{border-color:var(--gold);color:var(--ink)}
.gm-body{flex:1;min-height:0;display:grid;grid-template-columns:186px 1fr}
.gm-rail{border-right:1px solid var(--edge);padding:10px 8px;display:flex;flex-direction:column;
  gap:3px;background:linear-gradient(180deg,#141a2b,#0d1220);min-height:0;overflow-y:auto}
.gm-cap{padding:7px 12px 3px;font-size:9.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);opacity:.75}
.gm-cap+.gm-cap,.gm-tab+.gm-cap{margin-top:8px;border-top:1px solid var(--edge);padding-top:12px}
.gm-tab{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:8px;
  border:1px solid transparent;background:none;color:var(--faint);font-family:inherit;
  font-size:12.5px;font-weight:700;cursor:pointer;text-align:left}
.gm-tab span{font-size:14px}
.gm-tab i{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:10px;
  color:var(--faint);opacity:.8}
.gm-tab:hover{background:#141b2d;color:var(--dim)}
.gm-tab.on{background:linear-gradient(90deg,#2a2410,#1a1608);border-color:var(--gold);
  color:var(--gold2)}
.gm-pane{overflow-y:auto;padding:6px 6px 14px}
.gm-foot{flex:none;display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-top:1px solid var(--edge);background:#0b1020}
.gm-spacer{flex:1}
.gm-keys{display:grid;grid-template-columns:1fr;gap:1px;padding:0 10px}
.gm-key{display:flex;align-items:baseline;gap:10px;padding:5px 0;font-size:12px;
  color:var(--dim);border-bottom:1px solid #ffffff08}
.gm-key span{flex:0 0 190px}
.gm-key b{color:var(--ink);font-family:var(--mono);font-size:11px}

/* frame counter — deliberately unobtrusive, top-right under the minimap's corner */
#fpsChip{position:fixed;right:8px;top:4px;z-index:200;pointer-events:none;
  font-family:var(--mono);font-size:10px;color:var(--gold2);background:#070a12b0;
  padding:1px 6px;border-radius:5px}
#fpsChip.hidden{display:none}

/* codex: discoveries (bestiary/explorer/embers/achievements) + quest log -- */
.codexbox{max-height:74vh}
.codexbody{display:flex;gap:10px;overflow:hidden;padding:9px}
#questsBody,.codexbody.col{flex-direction:column;overflow-y:auto}

/* the Discoveries tab rail */
.disc-tabs{display:flex;gap:4px;padding:7px 10px 0;border-bottom:1px solid var(--edge)}
.disc-tab{background:none;border:1px solid transparent;border-bottom:none;
  border-radius:8px 8px 0 0;color:var(--dim);font:inherit;font-size:11.5px;
  padding:5px 11px 6px;cursor:pointer}
.disc-tab span{font-size:12px;margin-right:2px}
.disc-tab:hover{background:#1b2237}
.disc-tab.on{color:var(--gold2);border-color:var(--edge);background:#10162a}

/* bestiary mastery progress under the detail head */
.bd-prog{margin:2px 0 8px}
.bd-prog small{display:block;color:var(--faint);font-size:10px;padding-top:3px}
.bdetail.done .bd-prog small{color:var(--gold2)}
.brank{color:#e0954c;font-style:normal;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;font-size:9.5px}

/* embers + achievements chapters */
.disc-empty{margin:auto;text-align:center;color:var(--faint);font-size:24px;padding:30px 40px}
.disc-empty p{font-size:11.5px;line-height:1.6;padding-top:8px;max-width:340px}
.place.ember{border-color:#6b551f;background:#191424cc}
.place.ember .pmeta b{color:var(--gold2)}
.place.ember .eic{width:26px;height:26px;image-rendering:pixelated;flex:0 0 auto}
.quest.achv{margin-bottom:6px}
.quest.achv .q-ic{filter:grayscale(0)}
.quest.achv:not(.ready) .q-ic{opacity:.6}
.quest.achv.ready .q-head b{color:var(--gold2)}
.blist{width:205px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;flex:0 0 auto}
.beast{display:flex;align-items:center;gap:7px;padding:3px 6px;border:1px solid transparent;
  border-radius:7px;cursor:pointer}
.beast:hover{background:#1b2237}
.beast.sel{border-color:var(--line2);background:#161c30}
.beast.done{border-color:#6b551f}
.beast img{width:30px;height:30px;image-rendering:pixelated;flex:0 0 auto}
.beast .bmeta{flex:1;min-width:0}
.beast .bmeta b{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.beast .bmeta small{color:var(--faint);font-size:9.5px}
.bstars{color:var(--gold2);font-size:10px;letter-spacing:.1em}
.bdetail{flex:1;min-width:0;border-left:1px solid var(--edge);padding-left:10px;overflow-y:auto}
.bdetail.done .bd-head b{color:var(--gold2)}
.bd-head{display:flex;gap:9px;align-items:center;margin-bottom:8px}
.bd-head img{width:44px;height:44px;image-rendering:pixelated}
.bd-head b{display:block;font-size:13px}
.bd-head small{color:var(--faint);font-size:10px}
.bd-row{display:grid;grid-template-columns:1fr auto 1fr auto;gap:4px 10px;padding:3px 0;
  font-size:11.5px;border-bottom:1px solid #ffffff0a}
.bd-row span{color:var(--faint)}
.bd-loot{padding:7px 0 3px;font-size:11px}
.bd-loot>span{color:var(--faint);margin-right:7px}
.lootchip{display:inline-block;background:#0e1424;border:1px solid var(--line);border-radius:6px;
  padding:1px 7px;margin:2px 3px 2px 0;font-size:10.5px}
.lootchip i{color:var(--gold2);font-style:normal;margin-left:3px}
.bd-habit{color:var(--dim);font-size:11px;font-style:italic;padding-top:6px}
.quest{border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin-bottom:8px;
  background:#10162acc}
.quest.ready{border-color:var(--gold)}
.quest.done{opacity:.55}
.q-head{display:flex;gap:7px;align-items:center}
.q-ic{font-size:15px}
.q-head b{flex:1;font-size:12.5px}
.q-state{font-size:10.5px;color:var(--faint)}
.quest.ready .q-state{color:var(--gold2);font-weight:700}
.q-text{color:var(--dim);font-size:11px;padding:4px 0 6px}
.q-bar i{background:linear-gradient(90deg,#b98a2c,var(--gold2))}
.q-foot{display:flex;align-items:center;justify-content:space-between;padding-top:6px}
.q-rew{font-size:10.5px;color:var(--faint)}

.expfloor{margin-bottom:7px}
.expcount{color:var(--gold2);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 0 5px;border-top:1px solid var(--edge);margin-top:4px}
.placelist{display:flex;flex-direction:column;gap:3px}
.place{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:7px;
  border:1px solid transparent}
.place:not(.unknown){border-color:#26304c;background:#10162a99}
.place.unknown{opacity:.55}
.place .pmeta{flex:1;min-width:0}
.place .pmeta b{display:block;font-size:11.5px}
.place .pmeta small{color:var(--faint);font-size:9.5px}
.pfound{color:#5fd36a;font-weight:700}

/* rich ability tooltips ------------------------------------------------- */
/* Three separate plates — icon + title on top, a bracketed panel of prose below —
   so the tooltip reads like a piece of the frame art rather than a browser box. */
#abtip{position:fixed;z-index:450;width:360px;pointer-events:auto;
  font-size:12px;color:#cfd4e2;background:none;border:0;filter:drop-shadow(0 10px 24px #000c)}
#abtip.hidden,#abwhy.hidden{display:none}
.abtip-frame{display:flex;flex-direction:column;gap:9px}
.abtip-top{display:flex;gap:9px;align-items:stretch}

/* the shared plate look: navy glass, gold-brown rim, cut corners */
.abtip-icplate,.abtip-titleplate,.abtip-panel{position:relative;
  /* the hotbar's iron cells are dark ember-red, not navy — sampled from
     assets/ui/sheet/dock-cell.png so the tooltip is made of the same material */
  background:linear-gradient(180deg,#3b1b1cf2,#26111299);
  border:1px solid var(--gold3);
  box-shadow:inset 0 1px 0 #ffffff0f, inset 0 0 22px #0008, 0 2px 0 #00000066;
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),
    calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)}
/* gold L-brackets in each corner */
.abtip-frame .cn{position:absolute;width:8px;height:8px;border:1px solid var(--gold);
  opacity:.65;pointer-events:none}
.abtip-frame .cn.tl{left:3px;top:3px;border-right:0;border-bottom:0}
.abtip-frame .cn.tr{right:3px;top:3px;border-left:0;border-bottom:0}
.abtip-frame .cn.bl{left:3px;bottom:3px;border-right:0;border-top:0}
.abtip-frame .cn.br{right:3px;bottom:3px;border-left:0;border-top:0}

.abtip-icplate{flex:none;width:66px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;padding:7px 0 5px}
.abtip-ic{width:38px;height:38px;display:grid;place-items:center;flex:none;
  filter:drop-shadow(0 0 9px var(--el,transparent))}
.abtip-ic img.abico{width:38px;height:38px;display:block}
.abtip-badge{font-size:8.5px;letter-spacing:.14em;color:var(--gold2);
  padding:1px 6px;background:#0a0e1ccc;border:1px solid var(--gold3);border-radius:2px}

.abtip-titleplate{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:8px 13px}
.abtip-name{min-width:0}
.abtip-name b{display:block;color:var(--gold2);letter-spacing:.16em;text-transform:uppercase;
  font-size:14px;font-weight:700;text-shadow:0 0 10px #e0a44c40,0 1px 0 #000;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abtip-name small{color:var(--faint);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
/* mastery shards beside the name: 0–5, gold as they fill (abilitymastery.js) */
.abtip-mastery{display:inline-flex;gap:3px;margin-left:8px;vertical-align:2px}
.abtip-mastery .mp{width:6px;height:6px;transform:rotate(45deg);border-radius:1px;
  background:#141a2c;border:1px solid #3a4568;display:inline-block}
.abtip-mastery .mp.on{background:linear-gradient(135deg,#ffd38a,#c9922f);
  border-color:#ffd38a;box-shadow:0 0 5px #e0a44cb0}
.abtip-costs{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:1px;flex:none}
.abtip-costs b{font-weight:600;font-size:11px}

.abtip-panel{padding:11px 14px 9px}
.abtip-body{line-height:1.6}
.abtip-stats{padding:6px 0 2px;border-top:1px solid var(--gold3);margin-top:8px;opacity:.95}
.abln{display:flex;justify-content:space-between;padding:2px 0;font-size:11px}
.abln>span{color:var(--faint);letter-spacing:.06em}
.abtip-foot{padding:7px 0 0;color:#5a6478;font-size:10px;font-style:italic}
.kw{border-bottom:1px dotted currentColor;cursor:help;font-weight:600}
.kw.dmg{color:var(--el,#ff8a5a)}
.kw.heal{color:#5fd36a}
.kw.shield{color:#e0c84c}
.kw.cc{color:#c07fe0}
.kw.cd{color:var(--gold2)}
.kw.cost{color:#7fb8f0}
.kw.cost.st{color:#e8cf7a}
.kw.buffkw{color:#7ea6ff}
.dimtxt{color:var(--faint)}
#abwhy{position:fixed;z-index:460;width:250px;padding:8px 11px;pointer-events:none;
  background:linear-gradient(180deg,#40201ffa,#1d0d0efa);border:1px solid var(--gold);font-size:11px;
  box-shadow:0 6px 20px #000d, inset 0 0 18px #0008;
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),
    calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
#abwhy .wl{display:flex;justify-content:space-between;gap:10px;padding:1.5px 0;color:#b9c2d8}
#abwhy .wl b{color:#fff}
#abwhy .wl.total{border-top:1px solid #ffffff22;margin-top:3px;padding-top:4px}
#abwhy .wl.total b{color:var(--gold2)}
#abwhy .wl.dim2 span{color:var(--faint);font-style:italic;font-size:10.5px}
#abwhy .gear{color:#7fe0c0;font-style:normal}

/* windows -------------------------------------------------------------- */
.overlay{position:fixed;inset:0;z-index:100;pointer-events:none}
.overlay .box{position:absolute;pointer-events:auto;display:flex;flex-direction:column;
  max-height:calc(100vh - 120px)}
.winbar{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:grab;
  border-bottom:1px solid var(--edge)}
.winbar:active{cursor:grabbing}
.winbar .dots{color:var(--faint)}
.winbar .wt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}
.winbar .wx{margin-left:auto;background:none;border:none;color:var(--faint);cursor:pointer;font-size:13px}
.winbar .wx:hover{color:#fff}
.winbody{padding:10px 12px 12px;overflow-y:auto}
#itemsPaneSkills .skrow{display:flex;justify-content:space-between;font-size:12px;margin-top:5px}
#itemsPaneSkills .skrow.sep{margin-top:12px;padding-top:8px;border-top:1px solid var(--edge)}
#itemsPaneSkills .skrow span{color:var(--faint)}
/* ability points, one per skill level, spendable only in that skill's own tree */
#itemsPaneSkills .skpts{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
#itemsPaneSkills .skpt{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--edge);border-radius:999px;padding:1px 7px}
#itemsPaneSkills .skpt b{color:var(--faint);margin-left:3px;font-size:11px}
#itemsPaneSkills .skpt.has{color:var(--gold2);border-color:var(--gold)}
#itemsPaneSkills .skpt.has b{color:var(--gold2)}
#itemsPaneSkills .bar{margin-top:2px}

/* context menu --------------------------------------------------------- */
.ctxmenu{position:fixed;z-index:400;min-width:136px;padding:3px 0;
  background:#0e1526f5;border:1px solid var(--line2);border-radius:8px;
  box-shadow:0 18px 40px -18px #000}
.cm-title{padding:4px 12px 5px;color:var(--gold2);border-bottom:1px solid var(--edge);font-size:11px}
.cm-item{padding:5px 12px;cursor:pointer;font-size:12px}
.cm-item:hover{background:#1e2740;color:#fff}
/* Destroy, and its confirmation. Red before the click, not after — the colour is the warning. */
.cm-item.danger{color:#e08a86}
.cm-item.danger:hover{background:#3a1a1c;color:#ffd7d4}
/* An option you cannot take is shown and greyed, never hidden: "Inscribe… (learn a magic spell
   first)" teaches the player what the rune is for; omitting it teaches nothing. */
.cm-item.off{color:var(--faint);cursor:default;opacity:.6}
.cm-item.off:hover{background:none;color:var(--faint)}

/* death + loader ------------------------------------------------------- */
/* level-up flourish — swells in, hangs for a beat, drifts up and out. Pointer-events:none
   because it lands mid-fight and must never swallow a click. */
#levelup{position:absolute;left:50%;top:38%;z-index:70;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  transform:translate(-50%,-50%);animation:levelUp 1900ms ease-out forwards}
#levelup.hidden{display:none}
#levelup b{font-size:40px;letter-spacing:.16em;font-weight:800;color:#ffe6a0;
  text-shadow:0 0 26px #e0c84ccc,0 4px 18px #000,0 0 3px #fff8}
#levelup span{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold2);
  text-shadow:0 2px 10px #000}
@keyframes levelUp{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}
  26%{transform:translate(-50%,-50%) scale(1)}
  70%{opacity:1;transform:translate(-50%,-58%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-78%) scale(1.02)}
}

#deathbox{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;background:#1a0206bb;backdrop-filter:blur(3px)}
#deathbox h2{margin:0;font-size:30px;letter-spacing:.14em;color:#e0776a;text-shadow:0 4px 24px #000}
#deathbox p{max-width:420px;text-align:center;color:var(--dim)}
#loader{position:absolute;inset:0;z-index:70;display:grid;place-items:center;
  background:#05070de6;color:var(--gold2);letter-spacing:.2em;font-size:12px}

/* the creature you are tailing */
.foe.following{border-color:#4fbf6a;background:#12251a}
.foe .fn .follow{color:#5fd36a}

/* world map (M) -------------------------------------------------------- */
/* stage 1: an overlay panel where the minimap sits, reading as "the minimap grew";
   stage 2: fullscreen, above the HUD and the .overlay windows */
#worldmap{position:fixed;z-index:90;right:12px;top:52px;width:min(560px,46vw);
  height:min(440px,62vh);display:flex;flex-direction:column;padding:0 0 6px}
#worldmap.full{inset:24px;width:auto;height:auto;z-index:130;background:#05070cf6}
#worldmap canvas{flex:1;min-height:0;margin:6px 6px 0;image-rendering:pixelated;
  border:1px solid #000;border-radius:4px;cursor:grab;touch-action:none}
#worldmap canvas.dragging{cursor:grabbing}
#worldmap .wmfloors{display:flex;gap:3px;margin-left:10px}
#worldmap .wmfloors button{background:#0c1120;border:1px solid var(--line);border-radius:5px;
  color:var(--faint);cursor:pointer;font-size:10px;padding:2px 7px;line-height:1.4;
  letter-spacing:.08em;text-transform:uppercase}
#worldmap .wmfloors button:hover:not(:disabled){border-color:var(--gold);color:var(--gold2)}
#worldmap .wmfloors button.on{border-color:var(--gold);color:var(--gold2);background:#241d10}
#worldmap .wmfloors button:disabled{opacity:.4;cursor:not-allowed}
#worldmap .wmcenter{margin-left:6px;background:#0c1120;border:1px solid var(--line);
  border-radius:5px;color:var(--faint);cursor:pointer;font-size:12px;padding:1px 6px;line-height:1.3}
#worldmap .wmcenter:hover{border-color:var(--gold);color:var(--gold2)}

/* out-of-mana nudge ---------------------------------------------------- */
/* A small bubble JS anchors above the cure on the hotbar (mana potion slot or
   Meditate slot; the transform lifts it up and centres it). Mana-blue chrome,
   same look as the battle-mages Meditate tip. */
#manaTip{position:fixed;z-index:245;transform:translate(-50%,-100%);pointer-events:none;
  width:max-content;max-width:260px;text-align:center;
  background:linear-gradient(180deg,rgba(14,26,38,.97),rgba(9,16,26,.97));
  border:1px solid #4d86b8;border-radius:12px;
  box-shadow:0 0 0 1px rgba(143,216,255,.18),0 8px 22px rgba(0,0,0,.55),0 0 20px rgba(90,170,240,.3);
  padding:9px 13px;font-size:13px;line-height:1.45;color:#e6f2ff;
  opacity:0;transition:opacity .18s}
#manaTip.on{opacity:1;animation:manaTipIn .28s ease-out}
#manaTip b{color:#9fdcff}
#manaTip .mtKey{display:inline-block;font-weight:800;color:#0c141c;letter-spacing:.3px;
  padding:1px 7px;border-radius:6px;background:#9fdcff;box-shadow:0 0 8px rgba(143,216,255,.7)}
/* little downward pointer toward the slot below */
#manaTip::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #0e1a26}
@keyframes manaTipIn{from{opacity:0;transform:translate(-50%,calc(-100% + 10px))}
  to{opacity:1;transform:translate(-50%,-100%)}}

/* ---- UI icon art (ui/icons.js) -------------------------------------------------
 * PixelLab-generated concept icons that replaced the emoji glyphs. One base class
 * plus a per-site size modifier. Emoji remain as the alt text / fallback.
 *
 * image-rendering is deliberately `auto`, NOT `pixelated`: the art is 64px and every use
 * here draws it smaller, and nearest-neighbour DOWNscaling samples ~14% of the source at
 * 24px — it drops a quarter of the pixels and a third of the colours, so thin strokes break
 * up and the icon reads as glitchy. `pixelated` is for magnifying pixel art, not shrinking it.
 * The !important beats theme.css's `.slotcell img{image-rendering:pixelated}`, which would
 * otherwise re-break the bag and paperdoll icons. */
img.uic{image-rendering:auto!important;vertical-align:middle;flex:0 0 auto;
  width:20px;height:20px;object-fit:contain}
img.uic.slotic{width:30px;height:30px}                  /* item in a bag/equipment cell */
img.uic.slotph{width:24px;height:24px;opacity:.42}      /* empty-socket placeholder */
img.uic.stic{width:16px;height:16px}                    /* statistics rows */
img.uic.elic{width:13px;height:13px}                    /* element / stance chips */
img.uic.clsic{width:34px;height:34px}                   /* class picker cards */
.slotcell .ph-icon img.uic{display:block}
#itemsWin .s2 .si img.uic{opacity:1}

/* downed: the thirty-second countdown ------------------------------------
   Centre-screen and unmissable on purpose. The failure mode of the whole feature is a player who
   does not know he can be saved clicking respawn at second two, so this competes with the death
   box for attention rather than sitting politely in a corner. */
#downed{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:8;
  display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;
  padding:10px 26px;border-radius:12px;background:#12060699;border:1px solid #7a2a26;
  box-shadow:0 0 40px -8px #000, inset 0 0 30px #4a0f0c66;text-shadow:0 2px 6px #000}
#downed[hidden]{display:none}
#downed b{font-size:13px;letter-spacing:3px;color:#e08a86}
#downed span{font-size:34px;font-weight:700;line-height:1;color:#ffd7d4;font-variant-numeric:tabular-nums}
#downed i{font-style:normal;font-size:11px;color:#c09a98}
#downed.urgent{border-color:#c0392b;animation:downedpulse .9s ease-in-out infinite}
#downed.urgent span{color:#ff6b60}
@keyframes downedpulse{0%,100%{box-shadow:0 0 40px -8px #000, inset 0 0 30px #4a0f0c66}
  50%{box-shadow:0 0 50px -4px #7a1a14, inset 0 0 40px #7a1a1499}}