:root{
  --ink:#0a0910;
  --panel:rgba(18,16,26,0.82);
  --panel-edge:rgba(120,110,160,0.35);
  --text:#d8d2ee;
  --muted:#8b86a6;
  --hp:#d8324a;
  --hp2:#ff5d72;
  --mp:#3a7bd5;
  --mp2:#5fa8ff;
  --common:#b9b9c4;
  --uncommon:#5fd47a;
  --rare:#5fa8ff;
  --epic:#c07bff;
  --legendary:#ff9d3a;
  --mythic:#54f0d0;
  --relic:#ff5fa8;
}

*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;height:100%;
  background:#050409;
  color:var(--text);
  font-family:"Consolas","SF Mono","Menlo",ui-monospace,monospace;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
  touch-action:none;
}
body{position:fixed;inset:0;width:100%;height:100%;}

#stage{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%, #14111d 0%, #070510 70%, #030208 100%);
}

#game{
  display:block;
  /* SIZE IS SET IN JS (main.js resize()). The old `min(100vw, calc(100vh * 1.6))`
     pinned the canvas to a 1.6 aspect, which is exactly the black bars either side on
     a 2.16:1 phone in landscape. The logical canvas now carries the device's aspect,
     so the fit has to be computed against that box rather than a constant. These are
     the pre-JS fallbacks only. */
  width:100%;
  height:100%;
  max-width:100vw;
  max-height:100vh;
  background:#0a0910;
  box-shadow:0 0 60px rgba(0,0,0,0.9), 0 0 1px var(--panel-edge);
  image-rendering:auto;
  cursor:crosshair;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}

/* HUD overlay sits exactly over the canvas */
#hud{
  /* HUD coordinates are CANVAS units: a 960x600 box that main.js positions over the
     canvas rect and scales (transform) with it, so DOM chrome and canvas-drawn
     chrome (minimap, fog, banners) line up at any window size or phone. */
  /* width/height are overwritten by main.js with the live logical box (they follow
     the device aspect now); these are the design-reference fallbacks. */
  position:absolute;left:0;top:0;width:960px;height:600px;transform-origin:0 0;
  pointer-events:none;
  font-size:14px;
}

/* ---- bars ---- */
#bars{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;gap:7px;}
.barwrap{display:flex;align-items:center;gap:8px;}
.barlabel{width:24px;color:var(--muted);font-size:11px;letter-spacing:1px;}
.bar{
  position:relative;width:230px;height:18px;border-radius:9px;
  background:rgba(0,0,0,0.55);border:1px solid var(--panel-edge);
  overflow:hidden;box-shadow:inset 0 0 8px rgba(0,0,0,0.7);
}
.fill{position:absolute;left:0;top:0;height:100%;border-radius:9px;transition:width 0.12s linear;}
.fill.hp{background:linear-gradient(90deg,var(--hp),var(--hp2));box-shadow:0 0 10px rgba(216,50,74,0.6) inset;}
.fill.mp{background:linear-gradient(90deg,var(--mp),var(--mp2));box-shadow:0 0 10px rgba(58,123,213,0.6) inset;}
.bartext{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#fff;text-shadow:0 1px 2px #000;letter-spacing:0.5px;
}

/* ---- robe chip ---- */
.chip{
  position:absolute;top:14px;right:14px;
  display:flex;align-items:center;gap:9px;
  background:var(--panel);border:1px solid var(--panel-edge);
  border-radius:10px;padding:8px 11px;backdrop-filter:blur(3px);
}
.robeswatch{width:30px;height:30px;border-radius:6px;background:#444;border:1px solid rgba(255,255,255,0.15);}
.chiptext{display:flex;flex-direction:column;line-height:1.2;}
#robename{font-size:13px;}
.rare{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--common);}
.rare.common{color:var(--common);}
.rare.uncommon{color:var(--uncommon);}
.rare.rare{color:var(--rare);}
.rare.epic{color:var(--epic);}
.rare.legendary{color:var(--legendary);}
.rare.mythic{color:var(--mythic);}
.rare.relic{color:var(--relic);}

/* ---- floor name ---- */
#floorname{
  position:absolute;top:18px;left:50%;transform:translateX(-50%);
  font-size:20px;letter-spacing:3px;color:#e9e2ff;
  text-shadow:0 2px 12px rgba(120,90,200,0.7);
  opacity:0;transition:opacity 0.6s ease;text-align:center;
}
#floorname.show{opacity:1;}

/* ---- floor / depth indicator (PRESENTATION) ---- */
#floorindicator{
  position:absolute;top:46px;left:50%;transform:translateX(-50%);
  background:var(--panel);border:1px solid var(--panel-edge);
  border-radius:8px;padding:3px 12px;font-size:11px;letter-spacing:2px;
  color:#cbb8ff;text-shadow:0 0 8px rgba(150,90,200,0.6);
  transition:opacity 0.3s ease;
}
#floorindicator.hide{opacity:0;}

/* ---- banner ---- */
#banner{
  position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);
  text-align:center;font-size:26px;letter-spacing:2px;color:#fff;
  text-shadow:0 0 18px rgba(180,120,255,0.9),0 2px 6px #000;
  opacity:0;transition:opacity 0.35s ease;max-width:80%;
}
#banner.show{opacity:1;}
#banner .sub{display:block;font-size:15px;color:#cbb8ff;margin-top:8px;letter-spacing:1px;}

/* ---- element chips ---- */
#elements{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;
}
.elchip{
  display:flex;align-items:center;gap:7px;
  background:var(--panel);border:1px solid var(--panel-edge);
  border-radius:9px;padding:5px 8px;opacity:0.55;
  transition:all 0.15s ease;
}
.elchip.unlocked{opacity:1;}
.elchip.active{box-shadow:0 0 0 2px currentColor, 0 0 14px -2px currentColor;border-color:currentColor;}
.elchip .orb{width:16px;height:16px;border-radius:50%;box-shadow:0 0 8px currentColor;}
.elchip .ename{font-size:11px;color:var(--text);}
.elchip .key{font-size:10px;color:var(--muted);margin-left:2px;}
.elchip .lock{font-size:11px;}

/* ---- inventory strip ---- */
#inventory{
  position:absolute;bottom:96px;right:14px;   /* above the ability slot, clear of the chip row */
  display:flex;gap:6px;flex-wrap:wrap-reverse;max-width:220px;justify-content:flex-end;
}
.invchip{
  font-size:10px;padding:4px 8px;border-radius:6px;
  background:var(--panel);border:1px solid var(--panel-edge);color:var(--muted);
}

#help{
  position:absolute;top:162px;left:14px;   /* under the bars + the reset button; the bottom band belongs to the chips */
  font-size:10px;color:var(--muted);opacity:0.7;letter-spacing:0.3px;
  max-width:250px;line-height:1.35;
}

/* ---- level badge + XP bar (concern 1) ---- */
.levelbadge{
  display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
  background:var(--panel);border:1px solid var(--panel-edge);
  border-radius:8px;padding:3px 9px;font-size:12px;color:#ffe9a8;
  letter-spacing:1px;text-shadow:0 0 8px rgba(255,200,100,0.5);margin-bottom:1px;
}
.levelbadge .lvdot{width:7px;height:7px;border-radius:50%;background:#ffd76a;box-shadow:0 0 7px #ffd76a;animation:lvpulse 1s ease-in-out infinite;}
@keyframes lvpulse{0%,100%{opacity:0.5;}50%{opacity:1;}}
.xpbar{position:relative;width:230px;height:6px;border-radius:3px;background:rgba(0,0,0,0.55);border:1px solid var(--panel-edge);overflow:hidden;}
.xpfill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#c89b3a,#ffe9a8);box-shadow:0 0 8px rgba(255,200,100,0.5);transition:width 0.2s linear;border-radius:3px;}

/* ---- ability slot (concern 2) ---- */
/* two ability slots side by side: R (was the only one) and F (2026-09-06) */
#ability{
  position:absolute;bottom:14px;right:14px;   /* right of the centered chip row */
  display:flex;flex-direction:row;align-items:flex-end;gap:8px;
}
.abslot{display:flex;flex-direction:column;align-items:center;gap:3px;}
.abicon{
  position:relative;width:44px;height:44px;border-radius:9px;
  background:var(--panel);border:1px solid var(--panel-edge);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.absweep{position:absolute;inset:0;pointer-events:none;}
.abname{font-size:9px;color:var(--text);text-align:center;line-height:1.05;padding:0 2px;z-index:1;}
.abmeta{display:flex;gap:6px;align-items:center;}
.abkey{font-size:9px;color:var(--muted);}
.abcost{font-size:9px;color:var(--mp2);}
.abslot.ready .abicon{box-shadow:0 0 0 1px #5fa8ff,0 0 12px -2px #5fa8ff;border-color:#5fa8ff;}

/* ---- timed power-up buffs (2026-09-06): chips with a live countdown ---- */
#buffs{
  position:absolute;bottom:74px;right:14px;   /* directly above the ability slots */
  display:flex;flex-direction:row-reverse;gap:6px;flex-wrap:wrap-reverse;max-width:300px;
}
.buffchip{
  display:flex;align-items:center;gap:6px;
  font-size:10px;letter-spacing:0.6px;padding:3px 8px;border-radius:6px;
  background:var(--panel);border:1px solid var(--panel-edge);
  text-shadow:0 0 8px currentColor;
}
.buffchip .buftime{color:var(--muted);text-shadow:none;}
.buffchip.expiring{animation:buffblink 0.7s steps(2,end) infinite;}
@keyframes buffblink{50%{opacity:0.45;}}

/* ---- boss bar (concern 3) ---- */
#bossbar{
  position:absolute;bottom:84px;left:50%;transform:translateX(-50%);
  width:520px;max-width:80%;display:none;flex-direction:column;align-items:center;gap:4px;
}
#bossbar.show{display:flex;}
#bossname{font-size:13px;letter-spacing:2px;color:#e0c8ff;text-shadow:0 0 10px rgba(150,90,200,0.8);}
.bossbarwrap{position:relative;width:100%;height:14px;border-radius:7px;background:rgba(0,0,0,0.6);border:1px solid #6a3a8a;overflow:hidden;box-shadow:0 0 14px rgba(120,60,160,0.5);}
#bossfill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#8a2bd5,#c87bff);box-shadow:0 0 12px rgba(160,90,255,0.7) inset;transition:width 0.15s linear;border-radius:7px;}
/* boss STATE tints (2026-09-06 pacing pass). A warded boss takes a fraction of the
   damage it normally would; without a tell that reads as the game breaking, so the
   bar itself goes ice-blue while the ward lives and ember-red once it enrages. */
#bossbar.warded #bossfill{background:linear-gradient(90deg,#2f6f8a,#7fd4ff);box-shadow:0 0 12px rgba(120,200,255,0.7) inset;}
#bossbar.warded .bossbarwrap{border-color:#6fb6d8;}
#bossbar.warded #bossname{color:#bfe8ff;text-shadow:0 0 10px rgba(90,180,230,0.8);}
#bossbar.enraged #bossfill{background:linear-gradient(90deg,#b52a1a,#ff8a4a);box-shadow:0 0 14px rgba(255,120,60,0.8) inset;}
#bossbar.enraged .bossbarwrap{border-color:#c86a3a;}
#bossbar.enraged #bossname{color:#ffcba8;text-shadow:0 0 10px rgba(230,120,60,0.85);}
#bosspips{display:flex;gap:6px;}
#bosspips .pip{width:9px;height:9px;border-radius:50%;background:rgba(120,90,160,0.3);border:1px solid #6a3a8a;}
#bosspips .pip.on{background:#c87bff;box-shadow:0 0 8px #c87bff;}

/* ---- mute icon (concern 6) ---- */
#muteicon{
  position:absolute;top:14px;right:170px;font-size:16px;opacity:0.7;cursor:pointer;
  pointer-events:auto;user-select:none;
}

/* ---- reset-floor button (2026-09-06) ----
   Same panel language as .chip / .abslot: panel fill, panel-edge border, blur.
   Clickable the same way #muteicon is — the HUD is pointer-events:none, so any
   interactive child must opt back in with pointer-events:auto. */
#resetfloor{
  /* top-left, directly under the HP/MP/XP bars. The bottom band is the element-chip
     row (centred, ~900px wide at 960 canvas units) — a bottom-left button sits ON the
     Arcane chip, which the first browser screenshot caught. */
  position:absolute;top:112px;left:14px;
  display:flex;flex-direction:column;line-height:1.25;
  background:var(--panel);border:1px solid var(--panel-edge);
  border-radius:10px;padding:7px 11px;backdrop-filter:blur(3px);
  cursor:pointer;pointer-events:auto;user-select:none;
  opacity:0.82;transition:opacity 0.12s linear, border-color 0.12s linear;
}
#resetfloor:hover{opacity:1;border-color:rgba(200,155,58,0.75);}
#resetfloor:active{transform:translateY(1px);}
#resetfloor .rfmain{font-size:12px;letter-spacing:1px;color:#ffe9a8;text-shadow:0 0 8px rgba(255,200,100,0.4);}
#resetfloor .rfsub{font-size:9px;letter-spacing:0.5px;color:var(--muted);}
html.touch #resetfloor{display:none;}   /* the RST button on the touch layer replaces it */

/* ---- level-up flourish (concern 5) ---- */
#levelupfx{
  position:absolute;top:34%;left:50%;transform:translate(-50%,-50%) scale(0.6);
  font-size:40px;letter-spacing:6px;font-weight:bold;color:#ffe9a8;
  text-shadow:0 0 24px rgba(255,200,80,0.95),0 2px 6px #000;
  opacity:0;pointer-events:none;
}
#levelupfx.show{animation:lvflourish 1.6s ease-out;}
@keyframes lvflourish{
  0%{opacity:0;transform:translate(-50%,-30%) scale(0.5);}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.15);}
  35%{transform:translate(-50%,-50%) scale(1);}
  80%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-60%) scale(1);}
}

/* ---- character panel (concern 1) ---- */
#charpanel{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:680px;max-width:92%;display:none;pointer-events:auto;
  background:rgba(14,12,22,0.96);border:1px solid var(--panel-edge);
  border-radius:14px;padding:18px 20px;box-shadow:0 0 50px rgba(0,0,0,0.8);
  backdrop-filter:blur(4px);max-height:92vh;overflow:auto;
}
#charpanel.show{display:block;}

/* His 14378, with a screenshot: the character panel opened centred and sat on top
   of the whole right-hand button cluster, so opening your skill tree covered CAST,
   SKILL, SKL2, NEXT and USE. On touch it anchors LEFT instead and is capped so it
   always clears that cluster, rather than being centred in a viewport whose right
   third is controls. Desktop keeps the centred panel, where nothing is under it. */
html.touch #charpanel{
  left:max(12px, env(safe-area-inset-left, 0px));
  transform:translateY(-50%);
  width:min(680px, calc(100vw - 250px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-width:none;
}
.cphead{display:flex;align-items:center;gap:14px;font-size:16px;letter-spacing:2px;color:#e9e2ff;margin-bottom:14px;}
.cppts{font-size:11px;color:#ffe9a8;letter-spacing:1px;}
/* a <button> now (hud.js), because on a phone it is the only way out of the panel.
   Reset to the span it used to be so desktop looks and reads identically. */
.cpclose{margin-left:auto;font-size:11px;color:var(--muted);
  background:none;border:0;padding:0;font-family:inherit;letter-spacing:inherit;cursor:pointer;}
.cpcols{display:flex;gap:22px;}
/* the skill tree is 48 nodes now (2026-09-06), taller than the 600px canvas: give
   each column its own scroll so every node stays reachable inside the panel. */
/* His 14380: the skills list would not scroll on a phone. The column WAS
   scrollable, at a fixed 430px, but a phone in landscape is shorter than that, so
   the column never became the thing that overflows: the whole PANEL did, off the
   bottom of the screen, and an inner scrollbar on a box taller than the viewport
   is unreachable by definition. Height is viewport-relative now, and touch-action
   tells the browser this box owns vertical drags so the game's own pointer
   handling does not swallow them. 48 skill nodes are unreachable without this. */
.cpcol{flex:1;max-height:min(430px, 46vh);overflow-y:auto;padding-right:6px;
  touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}

/* ---- PHONE-SIZED CHARACTER PANEL (2026-09-08, his 14726) -------------------
   The panel lives INSIDE #hud, which is a box in CANVAS units scaled onto the
   canvas rect (main.js publishes the factor as --hudscale, ~0.65 on a 852x393
   phone in landscape). So a flat `min-height:40px` here is 26 real pixels under
   the thumb -- the same unit trap the safe-area insets above already dodge, and
   the reason `learn` was a 15-px-tall target next to 11-px body text. Dividing by
   the scale states the size in the units a thumb actually has. Touch only; the
   desktop panel keeps every number it had. */
html.touch .statbtn,html.touch .skillbtn{
  min-height:calc(44px / var(--hudscale, 1));
  min-width:calc(54px / var(--hudscale, 1));
  font-size:calc(12px / var(--hudscale, 1));
  padding:0 calc(9px / var(--hudscale, 1));
  border-radius:calc(6px / var(--hudscale, 1));
}
html.touch .cpclose{
  min-height:calc(44px / var(--hudscale, 1));
  padding:0 calc(10px / var(--hudscale, 1));
  font-size:calc(12px / var(--hudscale, 1));
  border:1px solid var(--panel-edge);border-radius:calc(6px / var(--hudscale, 1));
  color:#e9e2ff;background:#2a2440;
}
/* the head is one row of three things in a box ~394 real px wide, so it wraps
   unless it is allowed to: the title shrinks and truncates, the points chip and the
   close button keep their size because they are the two things you came here for. */
html.touch .cphead{font-size:calc(11px / var(--hudscale, 1));letter-spacing:0;
  gap:calc(8px / var(--hudscale, 1));white-space:nowrap;overflow:hidden;
  margin-bottom:calc(10px / var(--hudscale, 1));}
html.touch .cppts{font-size:calc(10px / var(--hudscale, 1));flex:0 0 auto;}
html.touch .cpcol h4{font-size:calc(11px / var(--hudscale, 1));}
html.touch .statrow,html.touch .skillrow{font-size:calc(11px / var(--hudscale, 1));
  gap:calc(6px / var(--hudscale, 1));padding:calc(4px / var(--hudscale, 1)) 0;}
html.touch .statdesc,html.touch .skilldesc{font-size:calc(10px / var(--hudscale, 1));}
html.touch .statname{width:calc(58px / var(--hudscale, 1));}
html.touch .statval{width:calc(20px / var(--hudscale, 1));}
html.touch .skillname{width:calc(96px / var(--hudscale, 1));font-size:calc(11px / var(--hudscale, 1));}
/* the columns are the scroll boxes, and touch.js scrolls whichever one the finger
   is over (the page-wide no-scroll rule means the browser will not). Height in real
   viewport terms for the same reason as everything above it. */
html.touch .cpcol{max-height:calc(52vh / var(--hudscale, 1));}
html.touch #charpanel{max-height:calc(88vh / var(--hudscale, 1));}
.cpcol::-webkit-scrollbar{width:8px;}
.cpcol::-webkit-scrollbar-thumb{background:rgba(150,120,200,0.35);border-radius:4px;}
.cpcol h4{margin:0 0 8px;font-size:12px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}
.statrow,.skillrow{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid rgba(120,110,160,0.12);font-size:12px;}
.statname{width:64px;font-weight:bold;}
.statdesc,.skilldesc{flex:1;color:var(--muted);font-size:11px;}
.statval{width:20px;text-align:right;color:#fff;}
.statbtn,.skillbtn{
  background:#2a2440;border:1px solid var(--panel-edge);color:#cbb8ff;
  border-radius:6px;padding:2px 8px;cursor:pointer;font-family:inherit;font-size:11px;
}
.statbtn:disabled,.skillbtn:disabled{opacity:0.35;cursor:default;}
.statbtn:hover:not(:disabled),.skillbtn:hover:not(:disabled){background:#3a3258;}
.skillname{width:120px;font-weight:bold;display:flex;align-items:center;gap:5px;}
.skilltier{font-size:9px;color:var(--muted);}
.skillrow.learned{opacity:0.75;}
.skillrow.learned .skillname{color:#6fe07a;}
.skillrow.locked{opacity:0.5;}
.skilltag{color:#6fe07a;font-size:13px;}

/* ---- accessory equip system (content stage) ---- */
/* equipped strip: three slot glyphs under the robe chip, top-right */
#equipstrip{
  position:absolute;top:64px;right:14px;display:flex;gap:6px;justify-content:flex-end;
}
.eqchip{
  width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--panel-edge);font-size:14px;line-height:1;
  box-shadow:0 0 8px -2px currentColor;cursor:default;
}
.eqchip.empty{opacity:0.45;box-shadow:none;}

/* equipment panel (I) — mirrors the character panel styling */
#equippanel{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:600px;max-width:92%;display:none;pointer-events:auto;
  background:rgba(14,12,22,0.96);border:1px solid var(--panel-edge);
  border-radius:14px;padding:18px 20px;box-shadow:0 0 50px rgba(0,0,0,0.8);
  backdrop-filter:blur(4px);
}
#equippanel.show{display:block;}
.eqsec{margin-bottom:14px;}
.eqsec h4{margin:0 0 8px;font-size:12px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}
.eqrow,.sprow{
  display:flex;align-items:center;gap:10px;padding:6px 0;
  border-bottom:1px solid rgba(120,110,160,0.12);font-size:12px;
}
.eqglyph{width:16px;text-align:center;font-size:15px;}
.eqslot{width:54px;color:var(--muted);font-size:11px;}
.eqname{width:160px;font-weight:bold;}
.eqrare{width:74px;font-size:10px;text-transform:uppercase;letter-spacing:1px;}
.eqdesc{flex:1;color:var(--muted);font-size:11px;}
.eqbtn{
  background:#2a2440;border:1px solid var(--panel-edge);color:#cbb8ff;
  border-radius:6px;padding:2px 9px;cursor:pointer;font-family:inherit;font-size:11px;
}
.eqbtn:hover{background:#3a3258;}
.eqbtn.up{border-color:#6fe07a;color:#a6f0b4;box-shadow:0 0 8px -2px #6fe07a;}
.spempty{color:var(--muted);font-size:11px;opacity:0.7;padding:4px 0;}

/* ---- mobile / touch (2026-09-05) ----
   The game canvas stays a 960x600 logical surface, letterboxed by the rules above.
   Portrait phones: pin it to the top (under the notch) so the touch controls, drawn
   on the window-sized #touchlayer canvas, get the black band underneath. Landscape:
   centered as before; the controls overlay the side bars. */
@media (orientation: portrait){
  #stage{align-items:flex-start;padding-top:env(safe-area-inset-top, 0px);}
}
#touchlayer{position:fixed;left:0;top:0;width:100%;height:100%;z-index:20;pointer-events:none;touch-action:none;}
html.touch #game{cursor:default;}
html.touch #help{display:none;}
html.touch #muteicon{display:none;}   /* the M button on the touch layer replaces it */
html.touch #inventory{bottom:6px;right:6px;max-width:45%;}
html.touch #ability{bottom:auto;top:150px;left:14px;right:auto;}  /* clear of the thumb buttons */
html.touch #buffs{bottom:auto;top:118px;left:14px;right:auto;max-width:60%;flex-direction:row;}
/* ---- PHONE HUD (2026-09-06) ----------------------------------------------
   Two defects off his iPhone screenshot: the element chip row ran under the
   screen edge, and there was no door to the character sheet at all (the CHAR
   button is in js/touch.js).

   The HUD is a 960x600 box in CANVAS units scaled onto the canvas rect, so a
   raw env(safe-area-inset-*) — which is in real CSS pixels — is the wrong unit
   here. main.js publishes the scale as --hudscale; dividing by it converts an
   inset into canvas units, which is what keeps the bottom row off the home
   indicator and the outer chips out of the notch at ANY canvas size.

   The chips also go COMPACT on touch: the element NAME is dropped, the orb and
   the hotkey number stay, and everything is scaled UP in canvas units so it is
   still readable and thumb-sized after the ~0.4x phone scale. Six compact chips
   need roughly a third of the width six named ones did, and the row wraps rather
   than overflowing if it ever runs out. They are TAPPABLE (main.js wires the
   click) because with a boss-gated element ladder and enemy resistances,
   "switch to the one this thing is weak to" is the core decision and NEXT-cycling
   through six is not a way to make it.                                        */
html.touch #elements{
  /* anchored LEFT AND RIGHT, not left:50% + translateX(-50%). An absolutely
     positioned box with `left` set and `right:auto` shrink-to-fits inside
     (containing block - left), i.e. HALF the HUD, so the enlarged chips wrapped
     onto a second row at four across. Anchoring both edges gives the row the full
     safe width and `justify-content:center` does the centring the transform used
     to do. Measured at 844x390x3 with real iPhone landscape insets forced. */
  bottom:calc(10px + env(safe-area-inset-bottom, 0px) / var(--hudscale, 1));
  left:calc(10px + env(safe-area-inset-left, 0px) / var(--hudscale, 1));
  right:calc(10px + env(safe-area-inset-right, 0px) / var(--hudscale, 1));
  transform:none;max-width:none;
  flex-wrap:wrap;justify-content:center;gap:10px;
}
html.touch .elchip{
  pointer-events:auto;                 /* tap to select (main.js) */
  padding:12px 14px;border-radius:14px;border-width:2px;
  min-height:64px;box-sizing:border-box;justify-content:center;
  opacity:0.7;
}
html.touch .elchip.unlocked{opacity:1;}
html.touch .elchip .ename{display:none;}      /* orb + hotkey only: six fit easily */
html.touch .elchip .orb{width:22px;height:22px;}
html.touch .elchip .key{font-size:16px;margin-left:0;color:var(--text);}
html.touch .elchip .lock{font-size:15px;}
/* the top-left chrome also respects the notch in landscape */
html.touch #bars,html.touch #ability,html.touch #buffs{
  left:calc(14px + env(safe-area-inset-left, 0px) / var(--hudscale, 1));
}
html.touch #inventory{
  right:calc(6px + env(safe-area-inset-right, 0px) / var(--hudscale, 1));
  bottom:calc(6px + env(safe-area-inset-bottom, 0px) / var(--hudscale, 1));
}


/* ---- WARRIOR CLASS CHROME (2026-09-06) ------------------------------------
   The warrior reuses the mana bar as her stamina bar — one pool, two names (see
   data/characters.js). So this is a recolour on the SAME element, not a second bar:
   amber instead of blue, because stamina should not read as magic. */
.bar.stamina .fill.mp,
/* GREEN, not amber (Daniel 2026-09-07 7:28 AM: "stamina and that is a green bar instead of blue"). */
.bar.stamina #mpfill { background: linear-gradient(180deg, #a8f0a0, #2f9e44); box-shadow: 0 0 8px rgba(120,230,120,0.55) inset; }
#elements.hide { display: none; }

/* The weapon chip sits exactly where the element row does, because it is the same
   thing for the other class: "what am I attacking with". Hidden by default; the HUD
   shows it only for a melee hero. */
#weaponchip {
  position: absolute; left: 0; right: 0; bottom: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px) / var(--hudscale, 1));
  display: none; justify-content: center; align-items: center; gap: 10px;
  font: 13px/1 Consolas, monospace; letter-spacing: 0.5px;
  color: #ffcf7a; text-shadow: 0 0 8px rgba(255,190,90,0.45);
}
#weaponchip.show { display: flex; }
#weaponchip .wtype { color: rgba(200,190,170,0.65); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }

/* A weapon skill whose kind melee.js cannot execute yet (the weapons lane owns the
   stances / channels / throws) is greyed with its real name showing, not blank —
   "not wired yet" is information; an empty box reads as a bug. */
.abslot.unwired { opacity: 0.42; filter: grayscale(0.8); }