/* Punk City HUD. Layout and game states only: colors, type, spacing, borders and the shared
   component recipes come from the Space Wars 3 design system (shared/ui/hud-tokens.css first,
   shared/ui/hud-components.css last; apps/space-wars/docs/hud-design-system.md). The --hz-* names
   below are aliases of --hud-* tokens; rarity, skill and feed colors are the game's own semantics. */
:root{
  --hz-bg:var(--hud-surface-canvas);
  --hz-panel:var(--hud-surface-glass);
  --hz-inset:var(--hud-surface-inset);
  --hz-border:var(--hud-border);
  --hz-text:var(--hud-text);
  --hz-muted:var(--hud-text-muted);
  --hz-accent:var(--hud-accent);
  --hz-health:var(--hud-health);
  --hz-resource:var(--hud-resource);
  --hz-radius:var(--hud-radius);
  --hz-gap:var(--hud-space-2);
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-left:env(safe-area-inset-left, 0px);
  --safe-right:env(safe-area-inset-right, 0px);
}
/* Never double-tap zoom: sticks, canvases and the HUD override this with touch-action:none.
   engine/touch-zoom.js also blocks the pinch and double-tap gestures Safari keeps to itself. */
*{ box-sizing:border-box; touch-action:manipulation; }
html,body{ margin:0; height:100%; overflow:hidden; background:var(--hz-bg); color:var(--hz-text); font:var(--hud-text-body)/1.35 var(--hud-font-body); touch-action:none; user-select:none; -webkit-user-select:none; }
[hidden]{ display:none !important; }
#hzGame{ position:fixed; inset:0; width:100vw; height:100vh; display:block; image-rendering:pixelated; }

.hz-panel-chrome{ background:var(--hud-surface-glass); border:var(--hud-border-hairline) solid var(--hud-border-subtle); border-radius:var(--hud-radius); box-shadow:var(--hud-shadow); backdrop-filter:blur(4px); }
.hz-muted{ color:var(--hz-muted); font-size:var(--hud-text-sm); }
.hz-btn{ font:var(--hud-weight-label) var(--hud-text-sm)/1.2 var(--hud-font-label); letter-spacing:var(--hud-tracking-label); text-transform:uppercase; color:var(--hud-text); background:var(--hud-surface-control); border:var(--hud-border-hairline) solid var(--hud-border); border-radius:var(--hud-radius); padding:var(--hud-space-2) var(--hud-space-3); cursor:pointer; min-height:36px; transition:border-color var(--hud-motion-fast), color var(--hud-motion-fast), background-color var(--hud-motion-fast); }
.hz-btn:hover:not(:disabled){ border-color:var(--hud-focus); color:var(--hud-focus); }
.hz-btn:active:not(:disabled){ background:var(--hud-surface-inset); }
.hz-btn:disabled{ opacity:var(--hud-disabled-opacity); cursor:not-allowed; }
.hz-btn{ border-color:color-mix(in srgb, var(--accent, var(--hud-border)) 70%, var(--hud-border)); }
.hz-btn-ghost{ background:transparent; border-color:var(--hud-border-subtle); color:var(--hz-muted); }
.hz-btn-sq{ min-width:36px; padding:var(--hud-space-1) var(--hud-space-2); }
.hz-btn-xs{ min-height:28px; padding:var(--hud-space-1) var(--hud-space-2); font-size:var(--hud-text-xs); }
.hz-btn-big{ font-size:var(--hud-text-body); padding:var(--hud-space-3) var(--hud-space-6); min-height:var(--hud-target); }
.hz-btn.is-on,.hz-btn.is-active{ background:var(--hz-accent); border-color:var(--hz-accent); color:var(--hud-text-on-accent); }
.hz-input{ font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body); color:var(--hud-text); background:var(--hud-surface-inset); border:var(--hud-border-hairline) solid var(--hud-border); border-radius:var(--hud-radius); padding:var(--hud-space-2) var(--hud-space-3); width:100%; user-select:text; }
.hz-input::placeholder{ color:var(--hud-text-muted); opacity:1; }
.hz-badge{ display:inline-block; font:var(--hud-text-xs)/var(--hud-leading) var(--hud-font-label); padding:var(--hud-space-1) var(--hud-space-2); border-radius:var(--hud-radius); background:var(--hud-surface-inset); border:var(--hud-border-hairline) solid var(--hud-border-subtle); color:var(--hz-muted); white-space:nowrap; }

/* title */
.hz-title{ position:fixed; inset:0; display:grid; place-items:center; padding:16px; background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--hud-focus) 08%, transparent), rgba(5,3,10,.92) 70%); z-index:30; overflow:auto; touch-action:auto; }
.hz-title-card{ max-width:620px; width:100%; text-align:center; }
.hz-kicker{ color:var(--hz-accent); letter-spacing:.18em; text-transform:uppercase; font-size:11px; }
.hz-logo{ font:900 clamp(48px, 13vw, 104px)/.9 var(--hud-font-display); margin:10px 0 14px; letter-spacing:.04em; color:#fff; text-shadow:0 0 18px rgba(255,79,168,.6), 3px 3px 0 #ff4fa8, -3px -2px 0 var(--hud-focus); }
.hz-logo span{ display:block; color:#0b0a10; -webkit-text-stroke:2px var(--hud-focus); text-shadow:0 0 22px color-mix(in srgb, var(--hud-focus) 70%, transparent); }
.hz-lore{ color:#c9cfe0; margin:8px auto; max-width:520px; }
.hz-title-form{ display:grid; gap:10px; margin:18px auto; max-width:420px; }
.hz-title-new{ display:flex; gap:8px; }
.hz-title-points{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:4px; font-size:12px; color:var(--hz-muted); }
.hz-title-points b{ color:var(--hz-text); }

/* unit frame */
.hz-unit{ position:fixed; left:calc(12px + var(--safe-left)); top:calc(12px + var(--safe-top)); width:260px; padding:8px 10px; z-index:10; }
.hz-unit-head{ display:flex; justify-content:space-between; gap:8px; margin-bottom:6px; font-size:13px; }
.hz-bar{ position:relative; height:16px; border-radius:4px; background:var(--hz-inset); overflow:hidden; margin-top:4px; border:1px solid rgba(255,255,255,.08); }
.hz-bar i{ position:absolute; inset:0 auto 0 0; width:0; transition:width .12s linear; }
.hz-bar span{ position:relative; display:block; text-align:center; font-size:11px; font-weight:700; line-height:14px; text-shadow:0 1px 2px #000; }
.hz-bar-hp i{ background:linear-gradient(180deg, #ff6b5e, var(--hz-health)); }
.hz-bar-mp i{ background:linear-gradient(180deg, #6aa8ff, var(--hz-resource)); }
.hz-bar-xp{ height:12px; } .hz-bar-xp span{ line-height:10px; font-size:10px; }
.hz-bar-xp i{ background:linear-gradient(90deg, #d9a93a, #ffd166); }
.hz-buffs{ display:flex; gap:4px; margin-top:6px; flex-wrap:wrap; }
.hz-buff{ width:22px; height:22px; border-radius:4px; display:grid; place-items:center; font-size:10px; font-weight:800; background:color-mix(in srgb, var(--buff) 35%, #111); border:1px solid var(--buff); }
.hz-pips{ display:flex; gap:6px; margin-top:6px; }
.hz-pip{ font:700 11px var(--hud-font-body); color:#07121a; background:#ffd166; border:0; border-radius:99px; padding:2px 8px; cursor:pointer; animation:hzPulse 1.2s infinite; }
@keyframes hzPulse{ 50%{ filter:brightness(1.4); } }

.hz-clock{ position:fixed; top:calc(12px + var(--safe-top)); left:50%; transform:translateX(-50%); padding:6px 14px; text-align:center; z-index:10; white-space:nowrap; }
#hzTimer.is-urgent{ color:#ff6b6b; animation:hzPulse .8s infinite; }
.hz-surge{ font-size:11px; color:#ffb347; }
.hz-target{ position:fixed; top:calc(84px + var(--safe-top)); left:50%; transform:translateX(-50%); width:260px; padding:6px 10px; text-align:center; z-index:10; }
.hz-bar-target{ height:10px; } .hz-bar-target i{ background:#e0483e; }

.hz-side{ position:fixed; right:calc(12px + var(--safe-right)); top:calc(12px + var(--safe-top)); display:grid; gap:6px; justify-items:end; z-index:10; }
#hzMini{ width:180px; height:180px; image-rendering:pixelated; }

/* Ragnarok's basic window: one labelled dock on the left, under the survivor's own frame, so every
   window the game has is visible at a glance with the key that opens it. */
.hz-dock{ position:fixed; left:calc(12px + var(--safe-left)); top:calc(84px + var(--safe-top)); width:260px; z-index:10;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--hud-space-1);
  padding:var(--hud-space-2); border-radius:var(--hud-radius);
  background:var(--hud-surface-glass); border:var(--hud-border-hairline) solid var(--hud-border-subtle); box-shadow:var(--hud-shadow); }
.hz-dock-btn{ position:relative; display:grid; justify-items:center; align-content:center; gap:1px; min-height:44px; padding:4px 2px;
  border:var(--hud-border-hairline) solid transparent; border-radius:var(--hud-radius); background:var(--hud-surface-control);
  color:var(--hud-text-muted); cursor:pointer; transition:background var(--hud-motion-fast), color var(--hud-motion-fast), border-color var(--hud-motion-fast); }
.hz-dock-btn:hover{ background:var(--hud-surface-inset); color:var(--hud-text); border-color:var(--hud-border); }
.hz-dock-btn:focus-visible{ outline:var(--hud-focus); outline-offset:var(--hud-focus-offset); }
.hz-dock-btn.is-active{ background:var(--hud-surface-inset); color:var(--hud-text); border-color:var(--hud-accent); box-shadow:inset 0 0 0 1px var(--hud-accent); }
.hz-dock-ico{ font-size:15px; line-height:1; font-style:normal; }
.hz-dock-name{ font:var(--hud-weight-label) 9px var(--hud-font-label); letter-spacing:var(--hud-tracking-label); text-transform:uppercase; }
.hz-dock-btn kbd{ position:absolute; top:1px; right:2px; font:var(--hud-weight-regular) 8px var(--hud-font-label); color:var(--hud-text-caption); background:none; padding:0; }
/* The dock takes the top of the left column, so the event feed starts below it. */
.hz-feed{ top:calc(246px + var(--safe-top)); }

.hz-feed{ position:fixed; left:calc(12px + var(--safe-left)); top:calc(170px + var(--safe-top)); width:min(360px, 60vw); display:grid; gap:3px; z-index:9; pointer-events:none; }
.hz-feed-line{ font-size:12px; padding:3px 8px; border-radius:4px; background:rgba(8,6,14,.6); text-shadow:0 1px 2px #000; }
.hz-feed-line[data-kind="legendary"]{ color:#ff9a2e; font-weight:700; }
.hz-feed-line[data-kind="mvp"]{ color:#ff6b6b; font-weight:700; }
.hz-feed-line[data-kind="level"],.hz-feed-line[data-kind="class"]{ color:#ffd166; }
.hz-feed-line[data-kind="discovery"],.hz-feed-line[data-kind="world"]{ color:#8fe9ff; }
.hz-feed-line[data-kind="coop"]{ color:var(--hud-status-online); }
.hz-feed-line[data-kind="bad"]{ color:#ff8f8f; }

/* skill bar */
.hz-skillbar{ position:fixed; left:50%; bottom:calc(12px + var(--safe-bottom)); transform:translateX(-50%); display:flex; gap:6px; align-items:end; z-index:10; }
.hz-skill{ --cd:0; --skill:transparent; position:relative; width:72px; height:64px; border-radius:8px; cursor:pointer; overflow:hidden; color:var(--hz-text);
  background:linear-gradient(180deg, color-mix(in srgb, var(--skill) 40%, #1a1824), #0f0e16); border:2px solid color-mix(in srgb, var(--skill) 80%, #333); font:700 11px var(--hud-font-body); padding:14px 3px 3px; touch-action:none; }
.hz-skill::after{ content:""; position:absolute; inset:0; background:conic-gradient(rgba(0,0,0,.72) calc(var(--cd) * 360deg), transparent 0); pointer-events:none; }
.hz-skill{ background-size:cover; background-position:center; image-rendering:auto; }
.hz-skill .hz-skill-name{ position:absolute; left:0; right:0; bottom:0; padding:1px 2px; font-size:9px; background:rgba(6,5,10,.72); z-index:1; }
.hz-skill.is-empty{ opacity:.45; }
.hz-skill-icon{ width:44px; height:44px; border-radius:6px; border:1px solid var(--skill); }
.hz-skill.is-starved{ filter:grayscale(.7) brightness(.8); }
.hz-skill kbd{ position:absolute; left:4px; top:2px; font:700 10px var(--hud-font-body); color:var(--hz-muted); }
.hz-skill-name{ display:block; line-height:1.1; }
.hz-skill-cd{ position:absolute; inset:0; display:grid; place-items:center; font-size:20px; z-index:2; text-shadow:0 1px 3px #000; pointer-events:none; }
.hz-medkit{ position:relative; width:48px; height:48px; border-radius:50%; font:800 18px var(--hud-font-body); color:var(--hud-status-online); background:#13201a; border:2px solid var(--hud-status-online); cursor:pointer; }
.hz-medkit span{ position:absolute; right:-4px; bottom:-4px; font-size:11px; background:#0b0a10; border:1px solid var(--hud-status-online); border-radius:99px; padding:0 5px; color:#fff; }
.hz-dodge{ color:#8fe9ff; background:#10202a; border-color:#8fe9ff; }
.hz-dodge span{ border-color:#8fe9ff; }
.hz-attack{ display:none; }
.hz-stick{ position:fixed; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%; border:2px solid rgba(143,233,255,.45); background:color-mix(in srgb, var(--hud-focus) 08%, transparent); pointer-events:none; z-index:11; }
.hz-stick i{ position:absolute; left:35px; top:35px; width:50px; height:50px; border-radius:50%; background:rgba(143,233,255,.5); }

.hz-npc{ position:fixed; left:50%; bottom:calc(96px + var(--safe-bottom)); transform:translateX(-50%); width:min(420px, calc(100vw - 32px)); padding:10px 14px; z-index:12; }
.hz-npc-name{ font:800 16px var(--hud-font-display); }
.hz-npc-line{ font-style:italic; margin:6px 0; }
.hz-npc-actions{ display:flex; flex-wrap:wrap; gap:6px; }

.hz-down{ position:fixed; left:50%; top:40%; transform:translate(-50%,-50%); display:grid; gap:8px; text-align:center; padding:16px 22px; background:rgba(40,8,12,.85); border:1px solid #ff6b6b; border-radius:10px; z-index:15; }
.hz-down b{ font-size:22px; color:#ff6b6b; }

/* panels */
.hz-sheet{ position:fixed; right:calc(12px + var(--safe-right)); top:calc(250px + var(--safe-top)); bottom:calc(92px + var(--safe-bottom)); width:min(440px, calc(100vw - 24px)); display:flex; flex-direction:column; z-index:20; touch-action:auto; }
.hz-sheet header{ display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-bottom:1px solid var(--hz-border); }
.hz-sheet h2{ margin:0; font:800 16px var(--hud-font-display); letter-spacing:.04em; }
.hz-sheet-body{ overflow:auto; padding:10px 12px; user-select:text; }
.hz-section{ margin-bottom:14px; }
.hz-section h3{ margin:0 0 6px; font-size:14px; }
.hz-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; }
.hz-span{ grid-column:1 / -1; }
.hz-kv{ display:flex; justify-content:space-between; font-size:12px; border-bottom:1px dashed rgba(255,255,255,.06); padding:2px 0; }
.hz-stat{ display:flex; justify-content:space-between; align-items:center; padding:4px 0; }
.hz-stat-val{ display:flex; align-items:center; gap:8px; font:800 18px var(--hud-font-display); }
.hz-list{ margin:0; padding-left:18px; display:grid; gap:6px; font-size:13px; }
.hz-equip-row{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
.hz-equip{ display:grid; gap:3px; justify-items:center; text-align:center; font-size:11px; }
.hz-equip-name{ font-size:10px; min-height:26px; }
.hz-bag{ display:grid; grid-template-columns:repeat(8, 1fr); gap:4px; margin:8px 0; }
.hz-cell{ --rarity:#555; position:relative; aspect-ratio:1; width:100%; max-width:52px; border-radius:6px; background:radial-gradient(circle, color-mix(in srgb, var(--rarity) 30%, transparent), var(--hz-inset)); border:2px solid var(--rarity); color:var(--hz-text); cursor:pointer; padding:0; }
.hz-cell.is-empty{ border-color:rgba(255,255,255,.08); background:var(--hz-inset); cursor:default; }
.hz-cell.is-locked{ opacity:.55; }
.hz-cell.is-selected{ outline:2px solid #fff; }
.hz-cell-art{ position:absolute; inset:4px; background-repeat:no-repeat; pointer-events:none; filter:drop-shadow(0 1px 1px #000); }
.hz-cell.is-locked .hz-cell-art{ filter:grayscale(.8); }
.hz-medkit-art{ position:absolute; inset:5px; background-repeat:no-repeat; pointer-events:none; }
.hz-cell-slot{ position:absolute; left:2px; top:1px; font-size:9px; font-weight:800; z-index:1; text-shadow:0 1px 2px #000; }
.hz-cell-lvl{ position:absolute; right:3px; bottom:1px; font-size:10px; font-weight:800; z-index:1; text-shadow:0 1px 2px #000; }
.hz-detail{ border-left:3px solid var(--rarity); padding-left:10px; }
.hz-detail h3{ margin:0; }
.hz-skill-row{ display:grid; grid-template-columns:44px 1fr; gap:4px 10px; align-items:start; padding:8px; margin-bottom:6px; border-radius:6px; background:var(--hz-inset); border-left:3px solid var(--skill); }
.hz-skill-row.is-locked{ opacity:.75; }
.hz-skill-actions{ grid-column:2; display:flex; flex-wrap:wrap; gap:4px; }
.hz-slots{ display:flex; flex-wrap:wrap; gap:4px; }

.hz-toast{ position:fixed; left:50%; top:26%; transform:translateX(-50%); max-width:min(640px, calc(100vw - 32px)); text-align:center; font:800 20px var(--hud-font-display); padding:10px 18px; border-radius:10px;
  background:rgba(8,6,14,.82); border:1px solid var(--hz-accent); z-index:16; pointer-events:none; animation:hzToastIn .35s ease-out; }
.hz-toast[data-kind="legendary"]{ color:#ff9a2e; border-color:#ff9a2e; }
.hz-toast[data-kind="mvp"]{ color:#ff6b6b; border-color:#ff6b6b; }
.hz-toast[data-kind="class"]{ color:#ffd166; border-color:#ffd166; }
@keyframes hzToastIn{ from{ opacity:0; transform:translate(-50%, -12px); } }
.hz-flash{ position:fixed; inset:0; z-index:40; pointer-events:none; background:repeating-linear-gradient(0deg, color-mix(in srgb, var(--hud-focus) 25%, transparent) 0 3px, rgba(255,79,168,.18) 3px 7px, transparent 7px 12px); opacity:0; }
.hz-flash.is-on{ animation:hzRewrite 1.5s ease-out; }
@keyframes hzRewrite{ 0%{ opacity:1; background-color:rgba(255,255,255,.7); } 30%{ opacity:.9; } 100%{ opacity:0; } }

/* touch layout */
body.hz-touch .hz-attack{ display:grid; place-items:center; width:84px; height:84px; border-radius:50%; font:900 13px var(--hud-font-body); color:#fff; background:radial-gradient(circle, #ff6b5e, #8a1e1a); border:3px solid #ffb0a8; touch-action:none; }
body.hz-touch .hz-skillbar{ left:auto; right:calc(12px + var(--safe-right)); transform:none; display:grid; grid-template-columns:repeat(3, auto); direction:rtl; }
body.hz-touch .hz-skillbar > *{ direction:ltr; }
body.hz-touch .hz-skill{ width:62px; height:56px; font-size:10px; }
body.hz-touch .hz-skill kbd{ display:none; }
body.hz-touch .hz-unit{ width:200px; padding:6px 8px; }
body.hz-touch #hzMini{ width:110px; height:110px; }
body.hz-touch .hz-feed{ top:calc(150px + var(--safe-top)); width:min(300px, 55vw); }
body.hz-touch .hz-feed-line:nth-last-child(n+5){ display:none; }
body.hz-touch .hz-sheet{ top:calc(8px + var(--safe-top)); bottom:calc(8px + var(--safe-bottom)); right:8px; width:min(460px, calc(100vw - 16px)); }
body.hz-touch .hz-npc{ bottom:auto; top:calc(96px + var(--safe-top)); }
@media (max-width:720px){
  .hz-clock{ top:auto; bottom:calc(8px + var(--safe-bottom)); left:calc(12px + var(--safe-left)); transform:none; font-size:12px; padding:4px 8px; }
  .hz-target{ top:calc(118px + var(--safe-top)); width:200px; }
  .hz-bag{ grid-template-columns:repeat(6, 1fr); }
  .hz-equip-row{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-height:500px){
  .hz-unit{ width:190px; } .hz-bar{ height:13px; } .hz-bar span{ line-height:11px; }
  body.hz-touch #hzMini{ width:90px; height:90px; }
  .hz-clock{ font-size:11px; }
}

/* ───────── polish pass: title slots, status, ops, tutorial, chat, recap, codex, settings, map ───────── */
.hz-title-langs{ display:flex; justify-content:flex-end; gap:4px; }
.hz-slots-grid{ display:grid; gap:8px; margin:16px auto; max-width:520px; text-align:left; }
.hz-slot{ padding:10px 12px; border:1px solid var(--hz-border); border-radius:var(--hz-radius); background:var(--hz-inset); display:grid; gap:6px; }
.hz-slot.is-empty{ opacity:.9; border-style:dashed; }
.hz-slot-head{ display:flex; justify-content:space-between; gap:8px; }
.hz-slot-new{ display:flex; gap:6px; }
.hz-slot-new{ flex-wrap:wrap; }
.hz-class-picker{ flex:1 0 100%; min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:8px 0; border:0; margin:0; }
.hz-class-picker legend{ font-family:var(--hud-font-body); font-weight:700; font-size:14px; }
.hz-class-picker label{ display:flex; align-items:flex-start; gap:6px; padding:8px; border:1px solid var(--hz-border); border-radius:6px; cursor:pointer; }
.hz-class-picker label:has(input:checked){ border-color:var(--class-color); background:var(--hz-inset); }
.hz-class-picker input{ flex:0 0 auto; width:16px; min-width:16px; margin-top:3px; accent-color:var(--class-color); }
.hz-class-picker b{ display:block; color:var(--class-color); font-size:14px; }
.hz-class-picker small{ display:block; font-size:12px; line-height:1.3; }
.hz-class-resource{ margin-top:5px; padding:5px 4px; border:1px solid var(--class-color); border-radius:4px; font-size:11px; font-weight:700; line-height:1.25; background:linear-gradient(90deg,color-mix(in srgb,var(--class-color) 25%,transparent) var(--resource),var(--hz-inset) var(--resource)); }
.hz-class-resource.is-hot{ color:var(--hud-danger,#ff6b5e); }
.hz-unit-head b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.hz-unit-head span{ flex:0 1 auto; }
body.hz-touch .hz-unit-head{ font-size:11px; gap:4px; }
body.hz-touch .hz-feed{ max-height:100px; overflow:hidden; }
@media(max-height:500px){ body.hz-touch .hz-feed{ max-height:50px; } }
@media(max-width:420px){ .hz-class-picker{ grid-template-columns:1fr; } }
.hz-import{ display:grid; gap:6px; max-width:520px; margin:8px auto; }
.hz-import textarea{ resize:vertical; font-size:11px; }
.hz-status{ position:fixed; left:50%; top:38%; transform:translateX(-50%); font:900 22px var(--hud-font-display); color:#ffd166; letter-spacing:.12em; text-shadow:0 2px 6px #000; z-index:14; pointer-events:none; animation:hzPulse .6s infinite; }
.hz-surge.is-anomaly{ color:#8fe9ff; }
.hz-buff.is-debuff{ border-style:dashed; }
.hz-ops{ display:grid; gap:6px; width:220px; }
.hz-op{ background:var(--hz-panel); border:1px solid #ff9a2e; border-radius:var(--hz-radius); padding:6px 8px; font-size:12px; }
.hz-op b{ color:#ffb347; }
.hz-op.is-ok{ border-color:var(--hud-status-online); } .hz-op.is-ok b{ color:var(--hud-status-online); }
.hz-op.is-fail{ border-color:#ff6b6b; opacity:.7; }
.hz-op-row{ display:flex; justify-content:space-between; gap:6px; margin-top:3px; font-weight:700; }
.hz-bar-op{ height:6px; } .hz-bar-op i{ background:#ff9a2e; }
.hz-tut{ position:fixed; left:calc(12px + var(--safe-left)); bottom:calc(96px + var(--safe-bottom)); width:250px; padding:8px 10px; z-index:9; font-size:12px; }
.hz-tut-head{ display:flex; align-items:center; gap:6px; }
.hz-tut-head .hz-btn{ margin-left:auto; }
.hz-tut ol{ margin:6px 0 0; padding-left:18px; display:grid; gap:2px; }
.hz-tut li{ color:var(--hz-muted); }
.hz-tut li.is-done{ color:var(--hud-status-online); text-decoration:line-through; opacity:.7; }
.hz-tut li.is-next{ color:var(--hz-text); font-weight:700; }
.hz-chat{ position:fixed; left:calc(12px + var(--safe-left)); bottom:calc(96px + var(--safe-bottom)); width:min(380px, 70vw); z-index:25; }
.hz-chat-btn{ position:fixed; left:calc(12px + var(--safe-left)); bottom:calc(52px + var(--safe-bottom)); z-index:10; }
.hz-feed-line[data-kind="chat"]{ color:#eef3ff; background:rgba(40,30,70,.7); }
.hz-feed-line[data-kind="op"]{ color:#ffb347; }
.hz-feed-line[data-kind="achievement"]{ color:#ff9a2e; font-weight:700; }
.hz-toast[data-kind="achievement"],.hz-toast[data-kind="op"]{ color:#ffb347; border-color:#ffb347; }
.hz-stim{ color:#6aa8ff; border-color:#6aa8ff; background:#121a2a; }
.hz-stim span{ border-color:#6aa8ff; }
.hz-skill.is-ready{ animation:hzReady .5s ease-out; }
@keyframes hzReady{ 0%{ box-shadow:0 0 0 0 var(--skill); } 100%{ box-shadow:0 0 0 12px transparent; } }
.hz-skill-num{ font-size:11px; color:#ffd166; margin-top:2px; }
.hz-cell-cmp{ position:absolute; right:2px; top:0; font-size:10px; }
.hz-cell-cmp.is-up{ color:var(--hud-status-online); } .hz-cell-cmp.is-down{ color:#ff6b6b; }
.hz-cell.is-set{ box-shadow:inset 0 0 0 1px #57f2c3; }
.hz-up{ color:var(--hud-status-online); } .hz-down{ color:#ff6b6b; }
.hz-set{ color:#57f2c3; font-size:12px; }
.hz-title-tag{ color:#ffd166; margin:2px 0; font-weight:700; }
.hz-recap{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(5,3,10,.72); z-index:35; padding:16px; }
.hz-recap-card{ width:min(560px, 100%); padding:18px 20px; text-align:center; animation:hzToastIn .4s ease-out; }
.hz-recap-card h2{ margin:4px 0 14px; font:800 22px var(--hud-font-display); }
.hz-recap-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:8px; margin-bottom:14px; }
.hz-recap-stat{ background:var(--hz-inset); border:1px solid var(--hz-border); border-radius:6px; padding:8px 4px; display:grid; }
.hz-recap-stat b{ font:800 20px var(--hud-font-display); }
.hz-recap-stat span{ font-size:11px; color:var(--hz-muted); }
.hz-recap-stat.is-gold b{ color:#ff9a2e; }
.hz-codex-row{ padding:6px 8px; margin-bottom:4px; border-radius:6px; background:var(--hz-inset); display:grid; gap:4px; }
.hz-codex-drops{ display:flex; flex-wrap:wrap; gap:4px; }
.hz-badge.is-gold{ color:#ff9a2e; border-color:#ff9a2e; }
.hz-ach{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 8px; margin-bottom:4px; border-radius:6px; background:var(--hz-inset); opacity:.55; }
.hz-ach.is-got{ opacity:1; border-left:3px solid #ff9a2e; }
.hz-setting{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0; font-size:13px; }
.hz-setting input[type=range]{ width:55%; accent-color:var(--hz-accent); }
.hz-setting input[type=checkbox]{ width:20px; height:20px; accent-color:var(--hz-accent); }
.hz-sheet.is-wide{ width:min(760px, calc(100vw - 24px)); top:calc(12px + var(--safe-top)); }
.hz-bigmap{ width:100%; aspect-ratio:1; max-width:100%; image-rendering:pixelated; border-radius:6px; border:1px solid var(--hz-border); display:block; }
#hzMini{ cursor:pointer; }
body.hz-touch .hz-ops{ width:160px; font-size:11px; }
body.hz-touch .hz-tut{ bottom:auto; top:calc(150px + var(--safe-top)); width:200px; }
body.hz-touch .hz-chat-btn{ bottom:auto; top:calc(116px + var(--safe-top)); left:auto; right:calc(130px + var(--safe-right)); }
body.hz-touch .hz-chat{ bottom:auto; top:calc(40% + var(--safe-top)); }
@media (max-width:720px){
  .hz-ops{ width:160px; }
  .hz-op .hz-muted{ display:none; }
  .hz-tut{ display:none; }
  .hz-recap-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* phone portrait: keep the right column narrow, the menu in a grid, and nothing over the target frame */
/* On a phone the dock drops its words and sits as a compact two-row strip of icons. */
body.hz-touch .hz-dock{ width:auto; grid-template-columns:repeat(4, 38px); top:calc(70px + var(--safe-top)); padding:3px; }
body.hz-touch .hz-dock-btn{ min-height:34px; }
body.hz-touch .hz-dock-name{ display:none; }
body.hz-touch .hz-dock-btn kbd{ display:none; }
body.hz-touch .hz-feed{ top:calc(160px + var(--safe-top)); }
body.hz-touch .hz-chat-btn{ top:auto; right:auto; left:calc(12px + var(--safe-left)); bottom:calc(96px + var(--safe-bottom)); }
body.hz-touch .hz-chat{ top:auto; bottom:calc(140px + var(--safe-bottom)); }
@media (max-width:720px){
  .hz-toast{ font-size:15px; top:16%; padding:8px 12px; }
  .hz-feed{ width:min(300px, 50vw); }
  body.hz-touch .hz-target{ top:auto; left:calc(12px + var(--safe-left)); bottom:calc(236px + var(--safe-bottom)); transform:none; width:min(200px, 48vw); }
  body.hz-touch .hz-chat{ bottom:calc(300px + var(--safe-bottom)); }
  body.hz-touch .hz-ops{ width:148px; }
  .hz-status{ font-size:17px; }
}

/* polish pass 2: death recap, menu, tooltips, key binds, touch social buttons */
.hz-down-recap{ font-size:13px; color:#ffb0a8; display:grid; gap:2px; }
.hz-down-recap b{ color:#ff6b6b; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.hz-menu-card{ display:grid; gap:10px; max-width:360px; }
.hz-tip{ position:fixed; width:260px; padding:8px 10px; z-index:30; pointer-events:none; font-size:12px; display:grid; gap:3px; }
.hz-binds{ display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:6px 0; }
.hz-bind{ display:flex; justify-content:space-between; align-items:center; gap:6px; padding:4px 8px; border-radius:6px; background:var(--hz-inset); border:1px solid rgba(255,255,255,.08); color:var(--hz-text); font:600 12px var(--hud-font-body); cursor:pointer; }
.hz-bind kbd{ font:var(--hud-weight-strong) var(--hud-text-xs) var(--hud-font-label); padding:1px 6px; border-radius:var(--hud-radius); background:var(--hud-surface-inset); border:var(--hud-border-hairline) solid var(--hz-border); color:var(--hz-accent); }
.hz-bind.is-waiting{ border-color:#ffd166; } .hz-bind.is-waiting kbd{ color:#ffd166; animation:hzPulse .8s infinite; }
.hz-touch-social{ display:none; }
body.hz-touch .hz-touch-social{ display:flex; gap:6px; position:fixed; left:calc(56px + var(--safe-left)); bottom:calc(96px + var(--safe-bottom)); z-index:10; }
.hz-emotes{ position:absolute; bottom:44px; left:0; display:flex; gap:4px; padding:6px; }

/* ───────── Steam-ready pass: boot loader, main menu, UI scale, focus, motion ───────── */
#hzHud, #hzTitle{ zoom:var(--hz-ui, 1); }
.hz-boot{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:var(--hz-bg); transition:opacity .45s ease; }
.hz-boot.is-out{ opacity:0; pointer-events:none; }
.hz-boot-card{ width:min(360px, 80vw); text-align:center; display:grid; gap:14px; justify-items:center; }
.hz-logo-sm{ font-size:clamp(40px, 9vw, 64px); margin:0; }
.hz-boot-bar{ width:100%; height:6px; border-radius:99px; background:var(--hz-inset); border:1px solid var(--hz-border); overflow:hidden; }
.hz-boot-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg, #ff4fa8, var(--hud-focus)); transition:width .2s ease-out; }

.hz-title{ grid-template-rows:auto 1fr auto; place-items:stretch; padding:14px 18px; background:linear-gradient(180deg, rgba(5,3,10,.55), rgba(5,3,10,.35) 40%, rgba(5,3,10,.85)); }
.hz-title.is-in{ animation:hzFade .6s ease-out; }
@keyframes hzFade{ from{ opacity:0; } }
.hz-title-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.hz-title-card{ align-self:center; justify-self:center; display:grid; gap:6px; justify-items:center; }
.hz-logo{ margin:8px 0 6px; }
.hz-tagline{ margin:0 auto 12px; max-width:460px; font-size:15px; }
.hz-title-menu{ display:grid; gap:8px; width:min(340px, 100%); }
.hz-title-menu .hz-btn{ width:100%; text-align:center; letter-spacing:var(--hud-tracking-label); text-transform:uppercase; font:var(--hud-weight-strong) 15px var(--hud-font-label); }
.hz-title-primary{ display:grid; gap:2px; padding:12px 20px; }
.hz-title-menu .hz-title-primary{ background:var(--hud-launch-bright); color:var(--hud-text-on-accent); border:var(--hud-border-width) solid var(--hud-launch-edge); box-shadow:var(--hud-launch-shadow); font-family:var(--hud-font-label); font-weight:var(--hud-weight-strong); letter-spacing:var(--hud-tracking-label); text-transform:uppercase; }
.hz-title-menu .hz-title-primary:hover:not(:disabled){ border-color:var(--hud-launch-light); color:var(--hud-text-on-accent); }
.hz-title-menu .hz-title-primary:active:not(:disabled){ box-shadow:var(--hud-launch-pressed); background:var(--hud-launch-bright); }
.hz-title-primary small{ font:600 12px var(--hud-font-body); letter-spacing:0; text-transform:none; color:var(--hz-muted); }
.hz-title-primary.is-on small{ color:var(--hud-text-on-accent); }
.hz-title-account{ display:grid; gap:2px; }
.hz-title-account small{ font:600 11px var(--hud-font-body); letter-spacing:0; text-transform:none; color:var(--hz-muted); }
.hz-title-account.is-on small{ color:var(--hz-accent); }
.hz-account{ display:grid; gap:10px; max-width:520px; margin:0 auto; }
.hz-account p{ margin:0; }
.hz-account-row{ display:flex; gap:6px; flex-wrap:wrap; }
.hz-account-row .hz-input{ flex:1; min-width:180px; width:auto; }
.hz-account .gf-google{ min-height:44px; display:flex; justify-content:center; }
.hz-email-page{ display:grid; place-items:center; min-height:100vh; padding:24px; box-sizing:border-box; }
.hz-email-page main{ display:grid; gap:12px; width:min(420px, 100%); padding:20px; text-align:center; }
.hz-email-page h1{ margin:0; font:800 22px var(--hud-font-display); letter-spacing:.06em; text-transform:uppercase; }
.hz-title-view{ width:min(620px, 100%); max-height:min(70vh, 640px); display:flex; flex-direction:column; text-align:left; margin-top:8px; animation:hzToastIn .3s ease-out; }
.hz-title-view header{ display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-bottom:1px solid var(--hz-border); }
.hz-title-view h2{ margin:0; font:800 16px var(--hud-font-display); letter-spacing:.06em; text-transform:uppercase; }
.hz-title-view .hz-lore{ font-size:13px; margin:0 0 10px; }
.hz-title-view .hz-slots-grid{ margin:0 0 10px; max-width:none; }
.hz-title-view .hz-title-points{ margin-top:12px; }
.hz-title-foot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 12px; font-size:11px; color:var(--hz-muted); letter-spacing:.06em; }
.hz-title-sister{ flex-basis:100%; text-align:center; color:var(--hz-text); text-decoration-color:var(--hz-accent); text-underline-offset:3px; }
/* The feedback link opens a mail draft, so it must be an <a>; this gives it the button shape. */
a.hz-btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.hz-fullscreen{ font-size:15px; line-height:1; }
.hz-credits{ display:grid; gap:10px; font-size:13px; }
.hz-credits h3{ margin:0; font:800 12px var(--hud-font-display); letter-spacing:.14em; text-transform:uppercase; color:var(--hz-accent); }
.hz-credits p{ margin:0; color:var(--hz-muted); }
.hz-credits b{ color:var(--hz-text); }

.hz-saved{ font-size:10px; color:var(--hud-status-online); letter-spacing:.12em; text-transform:uppercase; opacity:0; transition:opacity .4s; }
.hz-saved.is-on{ opacity:1; }
.hz-btn.is-confirm{ background:var(--hud-surface-control); border-color:var(--hud-danger-border); color:var(--hud-danger); }
.hz-setting-row{ display:flex; flex-wrap:wrap; gap:6px; padding:6px 0; }
.hz-section > h3.hz-section-kicker{ font:800 11px var(--hud-font-display); letter-spacing:.14em; text-transform:uppercase; color:var(--hz-accent); margin:4px 0 2px; }

/* interaction feel: press, hover glow, keyboard focus */
:focus-visible{ outline:var(--hud-border-width) solid var(--hud-focus); outline-offset:var(--hud-focus-offset); }
.hz-btn:focus-visible,.hz-skill:focus-visible,.hz-cell:focus-visible{ outline:var(--hud-border-width) solid var(--hud-focus); outline-offset:var(--hud-focus-offset); }
.hz-sheet{ animation:hzSheetIn .18s ease-out; }
@keyframes hzSheetIn{ from{ opacity:0; transform:translateX(12px); } }
.hz-menu-card .hz-btn{ font:var(--hud-weight-strong) 15px var(--hud-font-label); letter-spacing:var(--hud-tracking-label); text-transform:uppercase; }
body.hz-reduced *{ animation-duration:0s !important; transition-duration:0s !important; }
@media (max-width:720px){
  .hz-title{ padding:10px 12px; }
  .hz-title-view{ max-height:none; }
  .hz-title-foot{ font-size:10px; }
}
/* an open title view: compact logo, view height in zoomed units (vh ignores CSS zoom) */
.hz-title-card.has-view .hz-kicker,.hz-title-card.has-view .hz-tagline{ display:none; }
.hz-title-card.has-view .hz-logo{ font-size:clamp(36px, 7vw, 56px); margin:4px 0; display:flex; gap:0; justify-content:center; }
.hz-title-card.has-view .hz-logo span{ display:inline; }
.hz-title-view{ max-height:calc(100vh / var(--hz-ui, 1) - 170px); }
.hz-title-view .hz-sheet-body{ padding:12px 14px; }

/* Code Rip slot and Zero's Directives (js/rpg-zero.js) */
.hz-skill.hz-code{ margin-left:6px; border:1px dashed rgba(255,79,122,.55);
  background:repeating-linear-gradient(0deg, rgba(255,79,122,.08) 0 2px, transparent 2px 5px), linear-gradient(160deg, color-mix(in srgb, var(--skill) 35%, #0c0b12), #0c0b12); }
.hz-skill.hz-code:not(.is-empty){ border-style:solid; border-color:var(--skill); box-shadow:0 0 12px color-mix(in srgb, var(--skill) 45%, transparent); }
.hz-skill.hz-code::before{ content:"</>"; position:absolute; inset:0 0 14px; display:grid; place-items:center; font:700 20px var(--hud-font-pixel); color:var(--skill); opacity:.9; }
.hz-skill.hz-code.is-empty::before{ color:#ff4f7a; opacity:.5; }
.hz-skill.hz-code.is-empty{ opacity:.7; }
.hz-skill.hz-code.is-rip{ border-color:#ff4f7a; animation:hz-rip-pulse .6s ease-in-out infinite alternate; }
.hz-skill.hz-code.is-rip::before{ content:"RIP"; color:#fff; text-shadow:0 0 8px #ff4f7a; }
@keyframes hz-rip-pulse{ from{ box-shadow:0 0 4px #ff4f7a; } to{ box-shadow:0 0 18px #ff4f7a, inset 0 0 12px rgba(255,79,122,.4); } }
body.hz-reduced .hz-skill.hz-code.is-rip{ animation:none; box-shadow:0 0 12px #ff4f7a; }
.hz-wagers{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:3px; font-size:11px; }
.hz-wagers:empty{ display:none; }
.hz-wager-chip{ padding:0 6px; border-radius:3px; border:1px solid var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); font-weight:600; }
.hz-wager-chip.is-broken{ color:var(--hz-muted); border-color:var(--hz-muted); text-decoration:line-through; background:none; }
.hz-wagers-offer{ display:grid; gap:6px; width:100%; }
.hz-wager{ display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:6px; background:var(--hz-inset); border-left:3px solid var(--accent); }
.hz-wager.is-on{ box-shadow:inset 0 0 0 1px var(--accent); }
.hz-wager-text{ flex:1; display:grid; gap:1px; text-align:left; }
.hz-wager-text b{ color:var(--accent); }

/* Guild Wars 2 / Ragnarok systems (js/rpg-gw.js): meta line, hunt rows, card and hat cells */
.hz-meta{ font-size:11px; color:var(--hz-muted); margin-top:2px; }
.hz-meta.is-awake{ color:#ff9a2e; font-weight:700; }
.hz-hunt .hz-wager-text{ flex:1; }
.hz-cell-glyph{ position:absolute; inset:0; display:grid; place-items:center; font-size:22px; font-style:normal; }
.hz-cell.is-carded{ box-shadow:inset 0 0 0 1px #ffd166, 0 0 6px rgba(255,209,102,.35); }

/* Combat information: consistent semantic bars and stable, readable counts. */
.hz-unit-head{align-items:baseline;gap:var(--hud-space-2);}
#hzUnitName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#hzUnitClass{flex:none;color:var(--hud-text-muted);font-size:var(--hud-text-xs);}
.hz-bar{border-color:var(--hud-border-subtle);}
.hz-bar-hp i{background:var(--hud-health);}
.hz-bar-mp i{background:var(--hud-resource);}
.hz-bar-xp i{background:var(--hud-accent);}
.hz-bar span{font-family:var(--hud-font-label);font-variant-numeric:tabular-nums;text-shadow:var(--hud-title-shadow);}
.hz-clock #hzTimer{color:var(--hud-accent);font-variant-numeric:tabular-nums;}
.hz-skill .hz-skill-name{background:var(--hud-surface-glass);font-size:var(--hud-text-xs);line-height:var(--hud-leading-title);padding:var(--hud-space-1) 0;}
.hz-dock-btn kbd{color:var(--hud-text-muted);}
body.hz-touch .hz-dock{grid-template-columns:repeat(4,var(--hud-target));gap:var(--hud-space-1);}
body.hz-touch .hz-dock-btn{min-height:var(--hud-target);}
body.hz-touch .hz-clock{max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 124px);white-space:normal;}
@media(orientation:portrait){
 body.hz-touch .hz-unit{width:min(200px,calc(100vw - var(--safe-left) - var(--safe-right) - 148px));}
 body.hz-touch .hz-npc{top:40%;max-height:25vh;overflow:auto;overscroll-behavior:contain;}
 body.hz-touch .hz-toast{width:calc(100vw - 48px);font:var(--hud-weight-label) var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);}
}
@media(max-height:500px) and (orientation:landscape){
 body.hz-touch .hz-skillbar{grid-template-columns:repeat(3,var(--hud-target));gap:var(--hud-space-1);}
 body.hz-touch .hz-skill,body.hz-touch .hz-medkit{width:var(--hud-target);height:var(--hud-target);}
 body.hz-touch .hz-attack{width:64px;height:64px;}
 body.hz-touch .hz-clock{top:calc(var(--safe-top) + var(--hud-space-2));bottom:auto;left:224px;right:calc(var(--safe-right) + 108px);transform:none;max-width:none;padding:var(--hud-space-1);font-size:var(--hud-text-xs);}
 body.hz-touch .hz-touch-social{bottom:calc(var(--safe-bottom) + var(--hud-space-2));}
 body.hz-touch .hz-chat-btn{bottom:calc(var(--safe-bottom) + var(--hud-space-2));}
}

/* Secondary controls are still touch targets; the dock scrolls in one row. */
body.hz-touch .hz-btn,body.hz-touch .hz-pip{min-width:var(--hud-target);min-height:var(--hud-target);}
body.hz-touch .hz-dock{display:flex;max-width:200px;overflow-x:auto;overscroll-behavior:contain;touch-action:pan-x;}
body.hz-touch .hz-dock-btn{flex:0 0 var(--hud-target);}
body.hz-touch .hz-touch-social{left:calc(60px + var(--safe-left));gap:var(--hud-space-1);}
body.hz-touch .hz-sheet{right:calc(var(--hud-space-2) + var(--safe-right));width:min(460px,calc(100vw - var(--safe-left) - var(--safe-right) - var(--hud-space-4)));}
body.hz-touch .hz-npc{overscroll-behavior:contain;}
@media(max-height:500px) and (orientation:landscape){
 body.hz-touch .hz-unit{padding:var(--hud-space-1) var(--hud-space-2);}
 body.hz-touch .hz-bar{height:var(--hud-space-3);}
 body.hz-touch .hz-pips{margin-top:var(--hud-space-1);}
 body.hz-touch .hz-tut{max-height:72px;overflow:auto;pointer-events:auto;}
}
body.hz-touch #hzMenuBtn{position:sticky;right:0;background:var(--hud-surface-panel);z-index:1;box-shadow:var(--hud-shadow);}