/* One deliberate dark/bronze theme, not a light/dark split. A "simplified
   PoE item tooltip" look (see .poe-card/.poe-chip) only makes sense dark --
   PoE itself never renders item tooltips on a light background -- so rather
   than have that fight the page chrome's OS-driven light/dark preference
   (which is what caused the "3-4 different styles mixed" look: white
   surfaces/borders from a light OS preference next to hardcoded-dark item
   cards), every surface in the page now draws from the same palette. */
:root {
  --bg: #0f0b08;
  --bg-rgb: 15, 11, 8;
  --page-overlay: rgba(10, 9, 12, 0.45);
  --surface: #1b140f;
  --surface-rgb: 27, 20, 15;
  --text: #e8ddc7;
  --muted: #a99c8c;
  --border: #6b4423;
  --accent: #9575ff;
  --accent-text: #16151a;
  --accent-name: #d98a44;
  --correct: #66bb6a;
  --wrong: #ef5350;
  --partial: #e0b23d;
  --locked: #55505a;
  --flavour: #8d7248;
}

* { box-sizing: border-box; }

/* Several elements below set their own `display` (flex, for layout) and
   toggle visibility via the `hidden` attribute -- that combination silently
   loses to the browser's own [hidden]{display:none} UA-stylesheet rule
   unless it's restated here with priority, since author CSS otherwise wins
   over the UA default regardless of source order. */
[hidden] { display: none !important; }

/* Desktop-first: Path of Exile itself is PC-only, so most visitors will be on
   a wide monitor. The whole layout (and especially the comparison grid) is
   sized for that; the media query near the bottom scales it back down for
   phones rather than the other way around. */
html {
  font-size: 16px;
  min-height: 100%;
  background: #000 url('/images/background.png') no-repeat center center fixed;
  background-size: cover;
}

body {
  margin: 0;
  min-height: 100vh;
  padding-block: 1.25rem;
  padding-inline: 2rem;
  /* Tint the fixed background with the current theme color instead of
     painting over it, so the art stays visible behind the content while the
     page itself still scrolls (vertically and, inside the grid, sideways)
     over a background that never moves. */
  background: var(--page-overlay);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  max-width: 1700px;
  margin-inline: auto;
}

.heading-font { font-family: 'Cinzel', 'Segoe UI', serif; letter-spacing: 0.02em; }

.topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.topbar h1 {
  font-family: 'Cinzel', 'Segoe UI', serif;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 1.7rem;
  margin: 0;
  color: var(--accent-name);
}

.game-tabs { display: flex; gap: 0.25rem; margin-left: auto; }
.tab {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(var(--surface-rgb), 0.85);
  color: var(--text);
  cursor: pointer;
  font-size: 0.95rem;
}
.tab.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.tab:disabled { opacity: 0.5; cursor: not-allowed; }

.icon-btn {
  border: 1px solid var(--border);
  background: rgba(var(--surface-rgb), 0.85);
  color: var(--text);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  font-size: 1.2rem;
}

.status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.pool-switch { display: flex; gap: 0.4rem; }
.pool-btn {
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(var(--surface-rgb), 0.85);
  color: var(--text);
  cursor: pointer;
  font-size: 0.95rem;
}
.pool-btn.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.lives, .streak {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-left: auto;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.lives-icon { width: 40px; height: 40px; object-fit: contain; }

.guess-area { display: flex; gap: 0.5rem; margin-bottom: 1rem; position: relative; max-width: 640px; }
.autocomplete-wrap { position: relative; flex: 1; }

#guess-input {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1.1rem;
}

.suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 340px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.suggestions li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
}
.suggestions li.active, .suggestions li:hover { background: var(--accent); color: var(--accent-text); }

.suggestion-thumb {
  width: 36px;
  height: 36px;
  object-fit: contain;
  background: var(--bg);
  border-radius: 4px;
  flex-shrink: 0;
}
.suggestion-thumb-empty { background: transparent; }

#guess-submit {
  padding: 0.65rem 1.15rem;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: var(--accent-text);
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
}
#guess-submit:disabled, #guess-input:disabled { opacity: 0.6; cursor: not-allowed; }

.grid-wrap { margin-bottom: 1.25rem; }
.grid-scroll {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(var(--surface-rgb), 0.9);
  backdrop-filter: blur(6px);
}
.grid-legend {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--text);
  opacity: 0.85;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Sticky positioning on the "Guess" column proved unreliable across
   browsers (the header cell kept scrolling away with the rest instead of
   staying put like the body cells). Rather than keep chasing that, the
   Guess column is now a normal scrolling column whose cells are styled as
   small item chips (see .poe-chip below) so they're recognizable at a
   glance without needing to stay pinned. */
#guess-grid { border-collapse: collapse; background: transparent; min-width: 100%; white-space: nowrap; }
#guess-grid th, #guess-grid td {
  text-align: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 1.15rem;
}
#guess-grid th { color: var(--muted); font-weight: 500; white-space: nowrap; font-size: 0.8rem; }
#guess-grid td.guess-name { text-align: left; }
#guess-grid tr.guess-row.correct .poe-chip { border-color: var(--correct); }

/* Compact version of the .poe-card look (see below), one per guess row. */
.poe-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem 0.7rem 0.3rem 0.3rem;
}
.poe-chip-icon { width: 56px; height: 56px; object-fit: contain; background: rgba(255, 255, 255, 0.04); border-radius: 4px; flex-shrink: 0; }
.poe-chip-name { font-family: 'Cinzel', 'Segoe UI', serif; color: var(--accent-name); font-weight: 600; font-size: 1rem; }

td.stat-match { background: color-mix(in srgb, var(--correct) 25%, transparent); }
td.stat-nomatch { background: color-mix(in srgb, var(--wrong) 15%, transparent); }
td.stat-partial { background: color-mix(in srgb, var(--partial) 30%, transparent); }

.glyph-yes, .glyph-no { font-weight: 700; font-size: 1.1em; }
.glyph-yes { color: var(--correct); }
.glyph-no { color: var(--wrong); }

/* CSS-only hover tooltip, used for the divination card name so a long card
   title doesn't force the grid to scroll wider than it needs to. */
.tooltip { position: relative; cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.tooltip:hover::after,
.tooltip:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  white-space: normal;
  width: max-content;
  max-width: 260px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  z-index: 30;
  font-size: 0.85rem;
  font-weight: 400;
}

.flavour-hint {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  margin-bottom: 1.25rem;
  background: rgba(var(--surface-rgb), 0.9);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
}
.flavour-hint .hint-icon { width: 32px; height: 32px; margin: 0; }
.flavour-hint em { flex: 1; }

.reveal-btn {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
}
.reveal-btn:hover:not(:disabled) { background: var(--accent); color: var(--accent-text); }
.reveal-btn:disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--border); color: var(--muted); }

.result-modal { text-align: center; }
.result-banner { font-size: 1.1rem; }
.result-banner strong { font-family: 'Cinzel', 'Segoe UI', serif; font-size: 1.3rem; }
.result-banner.won strong { color: var(--correct); }
.result-banner.lost strong { color: var(--wrong); }
.result-banner .poe-card { margin-inline: auto; text-align: left; }
#result-close { margin-top: 1rem; }
/* A simplified stand-in for the real in-game/poeladder unique item tooltip:
   dark card, orange name, grey base type, a couple of properties, flavour
   text -- same color language, not a pixel-exact clone (no ornate frame
   art, no real affix text since we only have mod counts). */
.poe-card {
  margin-top: 0.8rem;
  max-width: 380px;
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.poe-card-header { display: flex; align-items: center; gap: 0.8rem; }
.poe-card-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  flex-shrink: 0;
}
.poe-card-titles { text-align: center; flex: 1; }
.poe-card-name {
  font-family: 'Cinzel', 'Segoe UI', serif;
  color: var(--accent-name);
  font-weight: 600;
  font-size: 1.15rem;
}
.poe-card-base { color: var(--muted); font-size: 0.9rem; margin-top: 0.15rem; }
.poe-card-sep {
  height: 1px;
  margin: 0.6rem 0;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.poe-card-props { color: var(--text); font-size: 0.9rem; text-align: center; }
.poe-card-props div { margin: 0.15rem 0; }
.poe-card-flavour { color: var(--flavour); font-style: italic; text-align: center; font-size: 0.9rem; }

.hint-icon {
  width: 48px;
  height: 48px;
  vertical-align: -16px;
  margin-right: 0.4rem;
  object-fit: contain;
}

.col-label { display: inline; }

.settings-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(360px, 90vw);
  background: rgba(var(--surface-rgb), 0.97);
  backdrop-filter: blur(10px);
  border-left: 1px solid var(--border);
  padding: 1.25rem;
  overflow-y: auto;
  z-index: 20;
  font-size: 0.95rem;
}
.settings-panel h2 { font-family: 'Cinzel', 'Segoe UI', serif; }
.setting-group { margin-bottom: 1.25rem; }
.setting-group > label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.hint-text { font-size: 0.82rem; color: var(--muted); margin-top: 0.3rem; }

.segmented { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.segmented button {
  flex: 1;
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-size: 0.8rem;
}
.segmented button.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.toggle-list { display: flex; flex-direction: column; gap: 0.4rem; }
.toggle-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }

#settings-close {
  margin-top: 1rem;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  padding: 1rem;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.modal h2 { font-family: 'Cinzel', 'Segoe UI', serif; margin-top: 0; }
.modal p { line-height: 1.5; }
.intro-swatch {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
}

/* Path of Exile is PC-only, but the settings menu is still reachable from a
   phone -- collapse the grid's text labels down to icon-only there to keep
   19 columns from becoming an unusable wall of horizontal scroll. */
@media (max-width: 760px) {
  html { font-size: 14px; }
  body { padding-inline: 0.85rem; }
  .col-label { display: none; }
  #guess-grid th, #guess-grid td { padding: 0.4rem 0.5rem; font-size: 1rem; }
  #guess-grid th { font-size: 0.75rem; }
  .hint-icon { width: 26px; height: 26px; margin-right: 0; vertical-align: -8px; }
  .guess-thumb { width: 44px; height: 44px; }
  .suggestion-thumb { width: 28px; height: 28px; }
  .guess-area { max-width: none; }
  .lives-icon { width: 32px; height: 32px; }
}