/* ================================================================
   REFINEMENT PASS — materials, type, motion
   Additive only. Nothing here changes layout; it changes how the
   surfaces read: metal rather than yellow, hairlines rather than
   borders, restraint rather than animation.
   ================================================================ */

:root {
  /* Premium easing: fast out, long settle. Used for anything entering. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── TYPE ───────────────────────────────────────────────────────
   Real ligatures and kerning, and optical sizing where the font
   supports it. Display type gets tighter tracking — loose serif
   headlines are the fastest way to look cheap.
──────────────────────────────────────────────────────────────── */
body {
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
}
h1, h2, .hero-title, .modal-title, .house-hero-text h1, .pk-q, .lg-hero h1 {
  font-optical-sizing: auto;
  letter-spacing: -0.021em;
}
.hero-title, .houses-hero h1, .lg-hero h1, .guide-hero h1, .regions-hero h1 {
  letter-spacing: -0.028em;
}

/* ── GOLD AS METAL ──────────────────────────────────────────────
   Flat #c9a84c reads as mustard. A shallow gradient across the
   glyphs reads as leaf — the difference between printed and stamped.
──────────────────────────────────────────────────────────────── */
.hero-title em,
.houses-hero h1 em,
.lg-hero h1 em,
.guide-hero h1 em,
.regions-hero h1 em {
  background: linear-gradient(168deg, #f0dda2 0%, #c9a84c 42%, #9a7530 74%, #d9c078 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);   /* fallback if background-clip is unsupported */
}

/* ── GRAIN ──────────────────────────────────────────────────────
   Film grain is provided by premium-polish.css body::before.
   body::after is reserved for the vignette (premium-polish.css),
   so the grain layer here has been removed to resolve the conflict.
   Individual z-index values are set on each element in its own rule.
──────────────────────────────────────────────────────────────── */

/* ── HAIRLINES ──────────────────────────────────────────────────
   Section rules that fade out at both ends instead of stopping dead.
──────────────────────────────────────────────────────────────── */
.modal-section-title,
.pk-why-label,
.lg-prof-label,
.house-sig-label {
  position: relative;
}
.modal-section-title::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.28) 18%, rgba(201,168,76,0.28) 82%, transparent);
}

/* ── FOCUS ──────────────────────────────────────────────────────
   Keyboard users get a proper gold ring rather than the browser's
   blue, and it never shows for mouse clicks.
──────────────────────────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
.cigar-card:focus-visible {
  outline-offset: 4px;
  box-shadow: 0 0 0 6px rgba(201,168,76,0.12);
}

/* ── SELECTION ──────────────────────────────────────────────────── */
::selection { background: rgba(201,168,76,0.28); color: #fff6e0; }

/* ── MOTION ─────────────────────────────────────────────────────
   One easing curve across the site. Restraint is the point: the
   expensive thing moves less, and settles rather than bounces.
──────────────────────────────────────────────────────────────── */
.cigar-card, .house-card, .sim-card, .lg-sess-card,
.pk-opt, .rail-card, .lg-pop-card, .jn-entry {
  transition-timing-function: var(--ease-out);
}

/* ── DEPTH ──────────────────────────────────────────────────────
   A single hairline of light along the top edge, the way a polished
   surface catches a room. Cheap in CSS, does a lot of work.
──────────────────────────────────────────────────────────────── */
.cigar-card, .house-card, .lg-map-panel, .lg-chat-panel,
.house-panel, .jn-panel, .modal, .cp-panel {
  position: relative;
}
.modal::before, .cp-panel::before,
.lg-map-panel::before, .house-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,230,210,0.16), transparent);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════
   THE THREE SHELVES
═══════════════════════════════════════════════════════════════════ */
.shelves {
  max-width: 1400px;
  margin: 0 auto 8px;
  padding: 0 24px;
  display: grid;
  /* Three shelves: each takes one column at wide viewports, stacks on mobile. */
  grid-template-columns: 1fr;
  gap: 26px;
}
.shelves:empty { display: none; }

.shelf { min-width: 0; }
.shelf-head { margin-bottom: 14px; }
.shelf-head h2 {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 400;
  color: var(--gold-light);
  letter-spacing: -0.018em;
  margin-bottom: 5px;
}
.shelf-head p {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 54ch;
}

.shelf-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;   /* don't trigger browser back-swipe */
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Fade the edges so it reads as continuing rather than cut off. The
     mask tightens to one side when you reach either end. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
.shelf-rail::-webkit-scrollbar { display: none; }
.shelf-rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.shelf-rail.dragging .rail-card { transition: none; }
.shelf-rail.at-start {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}
.shelf-rail.at-end {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 100%);
}
.shelf-rail.no-scroll { -webkit-mask-image: none; mask-image: none; cursor: default; }

/* ── SHELF CONTROLS (arrows + expand) ── */
.shelf-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.shelf-controls { display: flex; gap: 6px; flex-shrink: 0; margin-top: 2px; }
.shelf-arrow {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border, #3a2e1e);
  background: var(--bg-card, #221610);
  color: var(--gold-light, #e8b86d);
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  opacity: 0.6;
}
.shelf-arrow:hover { opacity: 1; border-color: var(--gold, #c9943a); background: rgba(201,148,58,0.1); }
.shelf-arrow:active { transform: scale(0.92); }
.shelf-expand {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border, #3a2e1e);
  background: var(--bg-card, #221610);
  color: var(--gold-light, #e8b86d);
  font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  opacity: 0.6;
}
.shelf-expand:hover { opacity: 1; border-color: var(--gold, #c9943a); background: rgba(201,148,58,0.1); }
.shelf-expand:active { transform: scale(0.92); }

/* ── EXPANDED (GRID) VIEW ── */
.shelf.shelf-expanded .shelf-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  overflow-x: visible;
  -webkit-mask-image: none;
  mask-image: none;
  cursor: default;
  scroll-snap-type: none;
}
.shelf.shelf-expanded .shelf-rail .rail-card {
  flex: initial;
  scroll-snap-align: none;
}
.shelf.shelf-expanded .shelf-rail.dragging { cursor: default; }
/* Nothing inside should start a native image drag mid-swipe. */
.shelf-rail img, .rail-card { user-select: none; -webkit-user-drag: none; }

.rail-card {
  flex: 0 0 176px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: var(--transition);
}
.rail-card:hover {
  border-color: var(--border-h);
  background: var(--bg-card-h);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.rail-img {
  height: 74px;
  display: grid;
  place-items: center;
  background: var(--bg-deep);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.rail-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rail-noimg { font-size: 24px; opacity: 0.5; }
.rail-body { display: flex; flex-direction: column; gap: 3px; }
.rail-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rail-brand { font-size: 10.5px; color: var(--text-muted); }
.rail-badge {
  align-self: flex-start;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 999px;
}
.rail-badge.value { color: #7fc99e; background: rgba(127,201,158,0.11); border: 1px solid rgba(127,201,158,0.3); }
.rail-badge.best  { color: var(--gold-light); background: var(--gold-glow); border: 1px solid var(--border-h); }
.rail-badge.gem  { color: #b07ee8; background: rgba(176,126,232,0.11); border: 1px solid rgba(176,126,232,0.3); }
.rail-tagline { font-size: 9.5px; color: var(--text-muted); margin-top: 2px; font-style: italic; line-height: 1.3; opacity: 0.7; }

.shelf-note {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.65;
  text-align: center;
  max-width: 68ch;
  margin: 4px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

@media (max-width: 980px) {
  .shelves { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cigar-card, .house-card, .rail-card, .sim-card { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   HEADER NAV OVERFLOW
   The nav gained Houses, the ⌘K trigger and the Journal button, which
   pushed a non-wrapping flex row past the viewport between roughly
   760px and 1080px — 8px of horizontal page scroll, which reads as a
   broken layout. It now scrolls within itself instead of widening the
   page, and every item stays reachable.
═══════════════════════════════════════════════════════════════════ */
.header-inner { min-width: 0; }
.header-nav {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.header-nav::-webkit-scrollbar { display: none; }
.header-nav > * { flex-shrink: 0; scroll-snap-align: end; }

@media (max-width: 1100px) {
  .header-nav { gap: 2px; }
  .header-nav .nav-btn { padding: 7px 12px; letter-spacing: 0; }
}
@media (max-width: 860px) {
  .header-nav .nav-btn { padding: 6px 10px; font-size: 12.5px; }
  .brand-tagline { display: none; }
}

/* ── DRAWN ICONS ────────────────────────────────────────────────
   Line marks inherit colour and weight from their context, which
   emoji never can. Sized in em so they scale with the type.
──────────────────────────────────────────────────────────────── */
.vpi { width: 1em; height: 1em; display: block; }
.pk-opt-icon .vpi { width: 25px; height: 25px; color: var(--gold); opacity: 0.82; transition: var(--transition); }
.pk-opt:hover .pk-opt-icon .vpi { opacity: 1; }
.pk-opt.on .pk-opt-icon .vpi { color: var(--gold-light); opacity: 1; }
.pk-hero-noimg .vpi, .pk-alt-noimg .vpi { width: 42%; height: 42%; color: var(--gold-dark); }
.pk-none-icon .vpi { width: 38px; height: 38px; margin: 0 auto; color: var(--gold-dark); }
.rail-noimg .vpi { width: 34px; height: 34px; color: var(--gold-dark); opacity: 0.65; }