/* ISENGRID — in-game DOM: top bar, side panel, bench dock, wave preview,
   banner ribbon, boss letterbox, hint cards, onboarding stages.
   Owner: WP-E. ARTBIBLE §8.1, §9.5–§9.9; DESIGN §14. */

/* ── top bar ────────────────────────────────────────────────────────────── */
#hud-top.hud {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 12px;
  background: linear-gradient(180deg, var(--ui-wood-top), var(--ui-wood-bot));
  border-bottom: 2px solid var(--ui-border);
  box-shadow: inset 0 1px 0 var(--ui-bevel-hi), inset 0 -1px 0 var(--ui-bevel-lo);
  z-index: 20;
}
.hud-group { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hud-left { flex: 0 0 auto; }
.hud-center { flex: 1 1 auto; flex-direction: column; gap: 0; align-items: center; overflow: hidden; }
.hud-right { flex: 0 0 auto; }

.hud-stat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 1.05rem; color: var(--snow-lit);
  padding: 2px 6px; border-radius: 6px;
}
.hud-stat.gold { color: var(--gold-lit); }
.hud-stat.seidr { color: var(--aurora-teal); }
.hud-icon { display: inline-block; vertical-align: middle; }

/* raven fly-off (life lost, §8.1) */
.raven-fly {
  position: fixed; z-index: 1600; pointer-events: none;
  animation: raven-fly 650ms ease-in forwards;
}
@keyframes raven-fly {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  60%  { transform: translate(26px, -42px) rotate(-14deg); opacity: 0.9; }
  100% { transform: translate(64px, -110px) rotate(-22deg); opacity: 0; }
}

/* wave line + preview chips */
.hud-waveline { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.wave-label { font-size: 1.02rem; color: var(--snow-lit); }
.wave-theme { color: var(--parch-dark); font-size: 0.95rem; }
.wave-preview {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8rem; min-height: 26px; overflow: hidden; max-width: 100%;
}
.preview-label { color: #8c7f6d; font-size: 0.75rem; }
.preview-sep { color: #5a4a38; }
.wave-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(26, 20, 48, 0.45);
  border: 1px solid #4a3f33; border-radius: 10px;
  padding: 1px 7px 1px 3px; color: var(--snow-base);
  cursor: default;
}
.wave-chip-icon { width: 24px; height: 24px; }
.wave-chip-dot {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--ink-cool); font-weight: 700;
}
.wave-tag { font-size: 0.75rem; }
.wave-tag.skull { color: var(--hp-red); }
.wave-tag.fly { color: var(--snow-shade); }

/* early-call horn (charge arc via conic-gradient on --charge 0..100) */
.horn-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 0; }
.horn-btn {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--ink-warm); cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #6b5d4a, #3a2f26);
  display: inline-flex; align-items: center; justify-content: center;
  transition: filter 80ms ease;
}
.horn-btn:hover:not(:disabled) { filter: brightness(1.15); }
.horn-btn:disabled { opacity: 0.5; cursor: default; }
.horn-btn .horn-ring {
  position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--amber-focus) calc(var(--charge, 0) * 1%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
}
.horn-btn.ready { animation: horn-pulse 1.4s ease-in-out infinite; }
@keyframes horn-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.horn-bonus { font-size: 0.72rem; color: var(--gold-lit); min-height: 1em; line-height: 1.1; }

.speed-group { display: inline-flex; gap: 2px; }
.speed-btn { padding: 4px 8px; font-size: 0.85rem; }

/* altar popover */
.altar-pop {
  position: absolute; top: 58px; right: 12px; z-index: 60;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
.altar-title { font-size: 0.9rem; color: var(--gold-lit); }
.altar-row { display: flex; gap: 6px; }
.altar-opt { font-size: 0.85rem; }

/* ── side panel ─────────────────────────────────────────────────────────── */
#panel-side.panel-side {
  background: linear-gradient(180deg, var(--ui-wood-top), var(--ui-wood-bot));
  border-left: 2px solid var(--ui-border);
  box-shadow: inset 1px 0 0 var(--ui-bevel-hi);
  padding: 8px;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; z-index: 15;
}
#panel-side .tabs { border-bottom: 2px solid var(--ui-border); }
#panel-side .tabs::after {
  content: ''; flex: 1; background-image: var(--knotwork);
  background-repeat: repeat-x; background-position: bottom; opacity: 0.5;
}
.pane { display: flex; flex-direction: column; gap: 8px; }

/* build cards (240×72 per §8.1) */
.chassis-card {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 8px;
  height: 72px; padding: 4px 8px 4px 4px;
  font: inherit; color: var(--parch); text-align: left;
  background: linear-gradient(180deg, #463a2e, #352b21);
  border: 1.5px solid var(--ui-border); border-radius: 6px;
  cursor: pointer; transition: filter 80ms ease, box-shadow 80ms ease;
}
.chassis-card:hover:not(:disabled) { filter: brightness(1.12); box-shadow: 0 0 8px #ffb34755; }
.chassis-card.selected { box-shadow: inset 0 0 0 2px var(--amber-focus), 0 0 10px #ffb34766; }
.chassis-card.locked { opacity: 0.45; cursor: default; }
.chassis-card.unaffordable .chassis-cost { color: var(--hp-red); }
.chassis-icon { width: 64px; height: 64px; }
.chassis-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chassis-name {
  font-family: var(--font-flavor); font-variant: small-caps;
  letter-spacing: 0.05em; font-size: 1rem; color: var(--snow-lit);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chassis-cost { color: var(--gold-lit); font-size: 0.9rem; }
.hotkey-badge {
  align-self: start;
  font-size: 0.7rem; color: var(--parch-dark);
  border: 1px solid #4a3f33; border-radius: 4px; padding: 0 5px;
}

/* inspect pane */
.insp-pane { display: flex; flex-direction: column; gap: 8px; }
.insp-head { display: flex; gap: 8px; align-items: flex-end; }
.tower-portrait {
  width: 96px; height: 120px; flex: 0 0 auto;
  background: radial-gradient(circle at 50% 80%, rgba(255, 179, 71, 0.12), transparent 70%);
  border: 1px solid var(--ui-border); border-radius: 6px;
}
.insp-title { min-width: 0; }
.insp-name {
  font-family: var(--font-flavor); font-variant: small-caps;
  font-size: 1.1rem; color: var(--gold-lit); line-height: 1.2;
}
.insp-sub { color: var(--parch-dark); font-size: 0.85rem; }
.insp-sec-title {
  font-family: var(--font-flavor); font-variant: small-caps;
  font-size: 0.92rem; color: var(--parch-dark); letter-spacing: 0.06em;
}
.insp-stats { font-size: 0.88rem; }
.insp-socket { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.socket-name { font-size: 0.85rem; color: var(--snow-base); flex: 1; min-width: 0; }
.socket-empty { color: #8c7f6d; font-size: 0.85rem; }
.insp-tuning { display: flex; flex-direction: column; gap: 2px; }
.attune-note { color: var(--aurora-teal); font-size: 0.8rem; font-style: italic; }
.insp-target { display: flex; flex-direction: column; gap: 4px; }
.insp-toggles { display: flex; flex-direction: column; }
.insp-actions { display: flex; gap: 8px; margin-top: 4px; }
.insp-actions .btn { flex: 1; }

/* ── bench dock ─────────────────────────────────────────────────────────── */
#bench-dock.bench {
  display: flex; align-items: stretch; gap: 10px;
  padding: 6px 10px;
  background: linear-gradient(180deg, var(--ui-wood-top), var(--ui-wood-bot));
  border-top: 2px solid var(--ui-border);
  box-shadow: inset 0 1px 0 var(--ui-bevel-hi);
  overflow-x: auto; overflow-y: hidden;
  touch-action: none;
  z-index: 15;
}
.bench-sec { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bench-label {
  font-family: var(--font-flavor); font-variant: small-caps;
  font-size: 0.78rem; color: #8c7f6d; letter-spacing: 0.06em; white-space: nowrap;
}
.bench-inv { flex: 1 1 auto; }
.bench-grid {
  display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start;
  min-width: 200px;
}
.bench-grid .chip { width: 48px; height: 48px; }
.bench-grid .chip .chip-glyph { font-size: 20px; }

.bench-anvil { flex: 0 0 auto; border-left: 1px solid #4a3f33; padding-left: 10px; }
.anvil-row { display: flex; align-items: center; gap: 5px; }
.anvil-slot { width: 44px; height: 44px; font-size: 18px; color: #8c7f6d; }
.anvil-result { width: 44px; height: 44px; cursor: default; font-size: 18px; color: #8c7f6d; }
.anvil-plus, .anvil-arrow { color: #8c7f6d; font-size: 1rem; }
.anvil-btn { padding: 5px 12px; }
.anvil-info { display: flex; gap: 8px; font-size: 0.78rem; min-height: 1.1em; align-items: baseline; }
.anvil-cost { color: var(--aurora-teal); }
.anvil-cost.bad { color: var(--hp-red); }
.anvil-name { color: var(--gold-lit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.anvil-name.unknown { color: var(--dusk-violet); font-style: italic; }
.anvil-name.warn { color: #c9842a; }
.fuse-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.fuse-name { font-size: 0.95rem; }
.fuse-name.unknown { font-style: italic; color: #5a4a6e; }

.bench-sellzone {
  flex: 0 0 64px; align-items: center; justify-content: center;
  border: 2px dashed #5c3c30; border-radius: 8px; padding: 2px 6px;
  color: #8a5a4a; transition: background 100ms ease;
}
.bench-sellzone .sell-glyph { font-size: 22px; }
.bench-sellzone.hot { background: rgba(179, 58, 46, 0.25); color: var(--invalid-red); border-color: var(--invalid-red); }

.bench-shop { flex: 0 0 auto; border-left: 1px solid #4a3f33; padding-left: 10px; }
.shop-row { display: grid; grid-template-columns: repeat(8, 40px); gap: 4px; }
.shop-btn {
  position: relative; width: 40px; height: 56px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font: inherit; cursor: pointer;
  background: linear-gradient(180deg, #463a2e, #352b21);
  border: 1.5px solid var(--ui-border); border-radius: 6px;
}
.shop-btn:hover:not(:disabled) { filter: brightness(1.18); box-shadow: 0 0 8px #ffb34755; }
.shop-btn:disabled { opacity: 0.45; cursor: default; }
.shop-btn .chip-glyph { font-size: 20px; }
.shop-cost { font-size: 0.68rem; color: var(--aurora-teal); }

/* drag-active page state */
.bench.drag-active { cursor: grabbing; }

/* ── wave banner ribbon (§9.5) ──────────────────────────────────────────── */
#banner-host { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; z-index: 30; }
.wave-banner {
  margin-top: -60px;
  min-width: 300px; max-width: 70%;
  padding: 10px 34px;
  text-align: center;
  font-family: var(--font-flavor); font-variant: small-caps; letter-spacing: 0.1em;
  font-size: 1.25rem; color: var(--parch-ink);
  background: var(--parch);
  border: 2px solid var(--ink-warm);
  box-shadow: 0 4px 14px rgba(26, 20, 48, 0.5), inset 0 0 22px var(--parch-dark);
  /* notched ribbon ends */
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
  border-image: var(--knotwork) 4 repeat;
  animation: banner-in 1.6s ease-out forwards;
}
@keyframes banner-in {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { transform: translateY(84px); opacity: 1; }   /* −60 → 24px in 250ms */
  85%  { transform: translateY(84px); opacity: 1; }   /* hold 1100ms */
  100% { transform: translateY(40px); opacity: 0; }
}
html.reduce-motion .wave-banner { animation: banner-fade 1.6s ease-out forwards; }
@keyframes banner-fade { 0% { transform: translateY(84px); opacity: 0; } 15%, 85% { transform: translateY(84px); opacity: 1; } 100% { transform: translateY(84px); opacity: 0; } }

/* ── boss letterbox (§9.6 — DOM bars + name plate) ──────────────────────── */
#boss-letterbox { position: absolute; inset: 0; z-index: 28; pointer-events: auto; }
#boss-letterbox .lb-bar {
  position: absolute; left: 0; right: 0; height: 64px;
  background: rgba(26, 20, 48, 0.9);
}
#boss-letterbox .lb-top { top: 0; animation: lb-top-in 300ms ease-out; }
#boss-letterbox .lb-bot { bottom: 0; animation: lb-bot-in 300ms ease-out; }
#boss-letterbox.out .lb-top { transform: translateY(-100%); transition: transform 300ms ease-in; }
#boss-letterbox.out .lb-bot { transform: translateY(100%); transition: transform 300ms ease-in; }
#boss-letterbox.out .lb-plate { opacity: 0; transition: opacity 250ms; }
@keyframes lb-top-in { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes lb-bot-in { from { transform: translateY(100%); } to { transform: none; } }
.lb-plate {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none;
  animation: plate-in 600ms 800ms ease-out backwards;
}
@keyframes plate-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.lb-sub { font-size: 0.95rem; color: var(--snow-shade); letter-spacing: 0.2em; }
.lb-name {
  font-family: var(--font-flavor); font-variant: small-caps;
  font-size: 28px; color: var(--gold-lit); letter-spacing: 0.12em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.lb-name::before { content: 'ᛉ '; color: var(--aurora-violet); }
.lb-name::after { content: ' ᛉ'; color: var(--aurora-violet); }

/* ── onboarding hint cards (DESIGN §14) ─────────────────────────────────── */
.hint-card {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 40; max-width: 420px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border: 2px solid var(--gold);
  box-shadow: 0 4px 16px rgba(26, 20, 48, 0.55), 0 0 12px #ffc23d44;
  cursor: pointer;
  animation: hint-in 280ms ease-out;
  font-size: 0.95rem;
}
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.hint-no {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: #241a08; font-weight: 700; font-size: 0.8rem;
}

/* onboarding progressive reveal (fresh profile only; .onb-done = all visible) */
#screen-game.onb-0 .hud-stat.seidr,
#screen-game.onb-0 #bench-dock,
#screen-game.onb-0 .horn-wrap,
#screen-game.onb-0 .wave-preview,
#screen-game.onb-0 .insp-tuning,
#screen-game.onb-1 .horn-wrap,
#screen-game.onb-1 .wave-preview,
#screen-game.onb-1 .bench-anvil,
#screen-game.onb-1 .insp-tuning,
#screen-game.onb-2 .bench-anvil,
#screen-game.onb-2 .insp-tuning,
#screen-game.onb-3 .insp-tuning { visibility: hidden; }