/* High Noon — shared UI primitives
   Vanilla CSS port of NEW_DESIGN/menu-v5 components: Row, IconTile, NotifBadge,
   BrandBand, BackBtn, CTAButton, CurrencyChip, GrainOverlay.
   Used by both the React screens (via className) and any vanilla DOM that
   wants to adopt the new visual system. */

/* ---------- Plate row (wood-framed sand button) ---------- */
.hn-plate-row {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 70px;
  padding: 8px 12px 8px 10px;
  box-sizing: border-box;
  position: relative;
  border-radius: var(--hn-radius-md);
  background: var(--hn-plate-grad);
  border: var(--hn-plate-border);
  box-shadow: var(--hn-plate-shadow);
  font-family: var(--hn-font-body);
  color: var(--hn-saddle-dark);
}
.hn-plate-row:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--hn-saddle-dark); }
.hn-plate-row__title { font-family: var(--hn-font-head); font-size: 18px; letter-spacing: 0.02em; }
.hn-plate-row__sub   { font-size: 12px; opacity: .75; margin-top: 2px; }

/* ---------- Wood-framed icon tile ---------- */
.hn-icon-tile {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  position: relative;
  border-radius: var(--hn-radius-sm);
  background: var(--hn-tile-grad);
  border: var(--hn-tile-border);
  box-shadow: var(--hn-tile-inner-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hn-icon-tile::before {
  content: '';
  position: absolute; inset: 2px; border-radius: 3px;
  border: 1px solid rgba(74,39,19,0.5);
  pointer-events: none;
}
.hn-icon-tile::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 55%; height: 35%;
  background: linear-gradient(135deg, rgba(255,245,215,0.35) 0%, transparent 70%);
  border-radius: 3px;
  pointer-events: none;
}

/* ---------- Notif badge (pulsing rust dot) ---------- */
.hn-notif-badge {
  position: absolute;
  top: -4px; left: -4px;
  z-index: 5;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  box-sizing: border-box;
  background: radial-gradient(circle at 35% 35%, var(--hn-rust) 0%, var(--hn-rust-deep) 75%, #5A1F10 100%);
  border: 2px solid var(--hn-dust);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--hn-font-head);
  font-size: 11px;
  color: var(--hn-dust);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
  box-shadow: 0 2px 4px rgba(0,0,0,0.35);
  animation: hn-notif-pulse 1.6s ease-in-out infinite;
}

/* ---------- Back button (top-left, pill) ---------- */
.hn-back-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--hn-radius-pill);
  background: rgba(20, 8, 2, 0.55);
  border: 1.5px solid rgba(228, 201, 154, 0.4);
  color: var(--hn-dust);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hn-back-btn:active { transform: translateY(1px) scale(0.95); }

/* ---------- CTA (Saddle/rust action button) ---------- */
.hn-cta {
  all: unset;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--hn-font-head);
  font-size: 18px;
  letter-spacing: 0.08em;
  border-radius: var(--hn-radius-lg);
  text-transform: uppercase;
  position: relative;
  border: 2.5px solid var(--hn-saddle-dark);
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
.hn-cta--rust   { background: linear-gradient(to bottom, var(--hn-rust-light) 0%, var(--hn-rust) 50%, var(--hn-rust-deep) 100%); color: var(--hn-dust); box-shadow: 0 4px 0 var(--hn-rust-deep), 0 6px 14px rgba(0,0,0,.4); }
.hn-cta--saddle { background: linear-gradient(to bottom, var(--hn-saddle-light) 0%, var(--hn-saddle) 50%, var(--hn-saddle-dark) 100%); color: var(--hn-dust); box-shadow: 0 4px 0 var(--hn-saddle-night), 0 6px 14px rgba(0,0,0,.4); }
.hn-cta--gold   { background: linear-gradient(to bottom, var(--hn-gold-light) 0%, var(--hn-gold) 60%, #B8862E 100%); color: var(--hn-saddle-night); box-shadow: 0 4px 0 #7A4810, 0 6px 14px rgba(0,0,0,.35); }
.hn-cta:active { transform: translateY(2px); }
.hn-cta--rust:active { box-shadow: 0 2px 0 var(--hn-rust-deep); }
.hn-cta--saddle:active { box-shadow: 0 2px 0 var(--hn-saddle-night); }
.hn-cta--gold:active { box-shadow: 0 2px 0 #7A4810; }
.hn-cta[disabled] { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.5); }

/* ---------- Currency chip ---------- */
.hn-currency-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: var(--hn-radius-pill);
  background: rgba(20, 8, 2, 0.55);
  border: 1.5px solid var(--hn-saddle-dark);
  font-family: var(--hn-font-head);
  font-size: 14px;
  color: var(--hn-dust);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.hn-currency-chip__icon { width: 22px; height: 22px; }
.hn-currency-chip--gold   { color: var(--hn-gold-light); }
.hn-currency-chip--wampum { color: #E8D9B4; }

/* ---------- Brand band (the "HIGH NOON" header strip on screens) ---------- */
.hn-brand-band {
  position: relative;
  padding: 14px 16px 12px;
  text-align: center;
  background: linear-gradient(to bottom,
              rgba(20, 8, 2, 0.85) 0%,
              rgba(42, 21, 8, 0.92) 100%);
  border-bottom: 2px solid var(--hn-saddle-dark);
  color: var(--hn-dust);
}
.hn-brand-band__title {
  font-family: var(--hn-font-head);
  font-size: 22px;
  letter-spacing: 0.16em;
  color: var(--hn-sand);
  text-shadow: 0 2px 0 var(--hn-saddle-night), 0 4px 8px rgba(0,0,0,.5);
  margin: 0;
}
.hn-brand-band__sub {
  font-family: var(--hn-font-body);
  font-style: italic;
  color: var(--hn-smoke);
  font-size: 12px;
  letter-spacing: 0.12em;
  margin-top: 2px;
}

/* ---------- Wood / grain backgrounds ---------- */
.hn-bg-wood {
  background: var(--hn-wood-url) center/cover, var(--hn-saddle-dark);
}
.hn-grain-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--hn-grain-url) repeat;
  background-size: 280px 280px;
  opacity: 0.12;
  mix-blend-mode: overlay;
}

/* ---------- Screen shell ---------- */
.hn-screen {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; flex-direction: column;
  font-family: var(--hn-font-body);
  color: var(--hn-dust);
  background: var(--hn-saddle-night);
  overflow: hidden;
}
.hn-screen__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  box-sizing: border-box;
}

/* ---------- Rarity gradient utility ---------- */
.hn-rarity-common    { --r-from: var(--hn-rarity-common-from);    --r-mid: var(--hn-rarity-common-mid);    --r-dark: var(--hn-rarity-common-dark);    --r-glow: rgba(180,165,130,0.6); }
.hn-rarity-uncommon  { --r-from: var(--hn-rarity-uncommon-from);  --r-mid: var(--hn-rarity-uncommon-mid);  --r-dark: var(--hn-rarity-uncommon-dark);  --r-glow: rgba(140,200,90,0.6); }
.hn-rarity-rare      { --r-from: var(--hn-rarity-rare-from);      --r-mid: var(--hn-rarity-rare-mid);      --r-dark: var(--hn-rarity-rare-dark);      --r-glow: rgba(110,180,230,0.6); }
.hn-rarity-epic      { --r-from: var(--hn-rarity-epic-from);      --r-mid: var(--hn-rarity-epic-mid);      --r-dark: var(--hn-rarity-epic-dark);      --r-glow: rgba(180,130,230,0.7); }
.hn-rarity-legendary { --r-from: var(--hn-rarity-legend-from);    --r-mid: var(--hn-rarity-legend-mid);    --r-dark: var(--hn-rarity-legend-dark);    --r-glow: rgba(255,190,90,0.85); }
.hn-rarity-mythic    { --r-from: var(--hn-rarity-mythic-from);    --r-mid: var(--hn-rarity-mythic-mid);    --r-dark: var(--hn-rarity-mythic-dark);    --r-glow: rgba(255,120,80,0.9); }