/* Roguelike: run screens on /roguelike (scoped to #roguelike-root) and the
   roguelike additions to the production game panel (app.js, gated by game.roguelike).
   Colours come from style.css tokens so the dark theme applies. */
.roguelike-root {
  --rl-surface: var(--panel);
  --rl-gold: #9a6b00;
  --rl-highlight: #f2c14e;
  position: relative;
  padding: 0;
  max-width: none;
}
html[data-theme="dark"] .roguelike-root { --rl-gold: #f2c14e; }
.roguelike-root.rogue-busy { cursor: progress; }
.rogue-icon { display: inline-flex; vertical-align: -3px; margin-right: 3px; }
.rogue-icon svg { display: block; }
.rogue-gold { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; color: var(--rl-gold, #9a6b00); }
.rogue-gold-dot { color: var(--rl-gold, #9a6b00); }

.rogue-top {
  position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
  padding: 8px 16px; background: var(--panel); border-bottom: 2px solid var(--line);
}
.rogue-title { font-weight: 800; color: var(--journey-green); }
.rogue-stat { font-weight: 600; white-space: nowrap; }
.rogue-stat.hp { color: var(--danger); }
.rogue-relics, .rogue-spells { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 0.85rem; }
.rogue-relic, .rogue-spell {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--rl-surface); cursor: help; white-space: nowrap;
}
.roguelike-root .rarity-C, .rogue-hand-card.rarity-C { border-color: #8a8a8a; }
.roguelike-root .rarity-U, .rogue-hand-card.rarity-U { border-color: #2f74c0; }
.roguelike-root .rarity-R, .rogue-hand-card.rarity-R { border-color: #c08a1a; box-shadow: 0 0 0 1px #f2c14e inset; }
.roguelike-root .rarity-X, .rogue-hand-card.rarity-X { border-color: #6b1f6b; }
.roguelike-root .rarity-E { border-color: #2a8a5a; }
.roguelike-root .rarity-relic { border-color: #a03a2a; }
.roguelike-root .rogue-x { border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--danger); font-weight: 800; }
.rogue-main { padding: 16px; }
.rogue-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 12px; }
.rogue-panel h2, .rogue-panel h3 { margin: 0 0 8px; }
.rogue-center { max-width: 760px; margin: 24px auto; text-align: center; }
.rogue-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.rogue-center .rogue-row { justify-content: center; }
.rogue-col { display: flex; flex-direction: column; gap: 8px; align-items: stretch; margin: 10px auto; max-width: 560px; }
.rogue-muted { color: var(--muted); font-size: 0.9rem; }
.rogue-tag { font-size: 0.72rem; padding: 1px 6px; border-radius: 6px; background: var(--journey-soft); color: var(--journey-green); font-weight: 700; }
.roguelike-root button {
  font: inherit; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--journey-green); background: var(--journey-green); color: #fff; cursor: pointer;
}
.roguelike-root button.secondary { background: var(--rl-surface); color: var(--journey-green); }
html[data-theme="dark"] .roguelike-root button.secondary { color: var(--ink); }
.roguelike-root button.link { background: none; border: 0; color: var(--journey-green); text-decoration: underline; padding: 2px 4px; }
.roguelike-root button:disabled { opacity: 0.45; cursor: default; }
.roguelike-root button:focus-visible { outline: 3px solid var(--rl-highlight); outline-offset: 2px; }

/* map */
.rogue-map { display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 260px); overflow-y: auto; padding: 8px; }
.rogue-map-row { display: grid; grid-template-columns: 28px repeat(3, minmax(90px, 200px)); gap: 10px; justify-content: center; align-items: center; }
.floor-number { color: var(--muted); font-size: 0.8rem; text-align: right; }
.roguelike-root .rogue-node { display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 44px; background: var(--rl-surface); color: var(--ink); border: 2px solid var(--line); }
.rogue-node.wide { grid-column: 2 / span 3; }
.rogue-node .node-icon { font-size: 1.3rem; min-width: 26px; display: inline-flex; align-items: center; justify-content: center; }
.rogue-node .node-label { font-size: 0.8rem; }
.roguelike-root .rogue-node.available { border-color: var(--good); box-shadow: 0 0 0 3px rgba(38, 139, 74, 0.25); }
.roguelike-root .rogue-node:disabled { opacity: 0.6; }
.roguelike-root .rogue-node.current { outline: 3px solid var(--rl-highlight); opacity: 1; }
.roguelike-root .rogue-node.passed { opacity: 0.45; }
.roguelike-root .rogue-node.off-lane { opacity: 0.25; }
.node-boss { font-weight: 800; }
.node-miniboss .node-icon { color: #8a1c1c; }
.rogue-initials { font-weight: 800; font-size: 0.85rem; padding: 2px 5px; border-radius: 6px; background: var(--yellow); color: #241a13; }
.python-logo { width: 26px; height: 26px; }
.rogue-player-badge { font-size: 2rem; display: flex; justify-content: center; }
.rogue-player-badge .python-logo { width: 64px; height: 64px; }

/* offers and cards */
.rogue-offers { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 10px 0; }
.rogue-offer { background: var(--rl-surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px; width: 240px; text-align: left; }
.rogue-offer.wide { width: 100%; }
.rogue-offer.done { opacity: 0.5; }
.rogue-offer h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 1rem; margin: 0 0 6px; }
.rogue-offer p { margin: 4px 0 8px; font-size: 0.9rem; }
.rogue-card-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.rogue-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 10px 0; max-height: 64vh; overflow-y: auto; }
.rogue-card {
  position: relative; display: flex; gap: 8px; background: var(--rl-surface); border: 2px solid var(--line); border-radius: 10px; padding: 8px; width: 240px;
  text-align: left; font-size: 0.82rem;
}
.rogue-card-grid .rogue-card { width: auto; }
.rogue-card.sold { opacity: 0.45; }
.rogue-card.pickable { cursor: pointer; }
.rogue-card.picked { border-color: var(--rl-highlight); box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.6); }
.rogue-card-token { position: relative; flex: 0 0 80px; width: 80px; height: 70px; }
/* Off-board physreps use the board's in-hex geometry (style.css, .hex.occupied) so the stats stay inside the fill. */
.rogue-card-token .unit-token { inset: 4px; }
.rogue-card-token .unit-token .cost-line { top: 7px; }
.rogue-card-token .unit-token .speed-line { left: 9px; }
.rogue-card-token .unit-token .ability-line { right: 9px; }
.rogue-card-token .unit-token .combat-line,
.rogue-card-token .unit-token .combat-line.flurry-combat { left: 17px; right: 17px; bottom: 10px; }
.rogue-card-token .unit-token .terrain-line { bottom: 20px; }
.rogue-card-token .unit-token::before { clip-path: polygon(19.92px 2.75px, 52.08px 2.75px, 68.22px 31px, 52.08px 59.25px, 19.92px 59.25px, 3.78px 31px); }
.rogue-card-token .unit-token::after { inset: 0; clip-path: polygon(21.23px 5px, 50.77px 5px, 65.63px 31px, 50.77px 57px, 21.23px 57px, 6.37px 31px); }
.rogue-curse-face { flex: 0 0 80px; min-width: 64px; height: 56px; display: grid; place-items: center; background: #3b1a3b; color: #f6d4f6; font-weight: 800; border-radius: 8px; }
.rogue-card-body { flex: 1; min-width: 0; }
.rogue-card-name { font-weight: 800; margin-bottom: 3px; }
.rogue-plus { color: var(--good); margin-left: 2px; }
.rogue-card-stats { line-height: 1.35; }
.rogue-diff { color: var(--good); font-weight: 800; }
.rogue-enchant { color: #8a4fc0; font-weight: 600; margin-top: 3px; }
.rogue-price { display: flex; align-items: center; gap: 4px; font-weight: 800; color: var(--rl-gold, #9a6b00); margin: 4px 0; }
.rogue-price.unaffordable .rogue-gold { color: var(--danger, #b3261e); }
.rogue-sale { color: var(--good, #2e7d32); }
/* Spell names with full rules text on hover. */
[data-hover-text]:not([data-hover-text=""]) { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.rogue-arrow { font-size: 1.8rem; color: var(--good); }
.rogue-toggle { display: inline-flex; gap: 6px; align-items: center; margin: 6px 0; }
.unit-token.rogue-upgraded .unit-name { color: var(--good); }
.rogue-cannon { display: inline-flex; align-items: flex-end; }
.rogue-cannon sub { font-size: 0.55rem; font-weight: 800; line-height: 1; margin-left: -1px; }
.unit-token .ability-haste { width: 0.9rem; height: 0.9rem; color: #c58a00; }
.rogue-menu-sound { text-align: left; border-top: 1px solid var(--line); padding-top: 8px; }
.rogue-menu-sound h4 { margin: 0 0 6px; }

/* modal, hover, toast */
.rogue-modal { position: fixed; inset: 0; z-index: 200; background: rgba(20, 14, 8, 0.45); display: grid; place-items: center; padding: 16px; }
.rogue-modal[hidden] { display: none; }
.rogue-modal-box { background: var(--panel); color: var(--ink); border-radius: 12px; padding: 18px; max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto; }
.rogue-modal-box.wide { max-width: 1100px; }
.rogue-hover { position: fixed; z-index: 300; max-width: 290px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 0.82rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); pointer-events: none; }
.rogue-hover[hidden] { display: none; }
.rogue-toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 400; background: var(--journey-green); color: #fff; padding: 10px 16px; border-radius: 10px; max-width: 90vw; }
.rogue-toast.error { background: var(--danger); }
.rogue-toast[hidden] { display: none; }
.rogue-rules { text-align: left; }
.rogue-center select { max-width: 100%; }
.rogue-center label { display: flex; flex-direction: column; gap: 4px; align-items: center; }

@media (max-width: 640px) {
  .rogue-main { padding: 8px 16px; }
  .rogue-top { padding: 8px 16px; }
  .rogue-map-row { grid-template-columns: 20px repeat(3, minmax(0, 1fr)); gap: 4px; }
  .rogue-node .node-label { display: none; }
  .rogue-card, .rogue-offer { width: 100%; }
}

/* ---- production game panel additions (roguelike combats only) ---- */
.rogue-hand-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.rogue-hand-tabs button { padding: 3px 8px; font-size: 0.78rem; }
.rogue-hand-tabs button.active { background: var(--journey-green); color: #fff; }
.rogue-pile-note { margin: 0 0 4px; font-size: 0.76rem; }
.rogue-hand-card.rogue-unaffordable .bench-unit { opacity: 0.55; }
.rogue-hand-card.rogue-curse-card .bench-unit { cursor: not-allowed; }
.rogue-hand-card .rogue-tag { margin-left: 2px; }
.rogue-hand-card .rogue-curse-face { width: 100%; }
.panel-roguelike-prompts { display: flex; flex-direction: column; gap: 8px; }
.rogue-prompt {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 10px;
  border: 2px solid #c08a1a; background: var(--panel);
}
.rogue-prompt.rogue-bughouse { border-color: #6b2fa0; }
.rogue-prompt.rogue-end-turn { border-color: var(--danger); }
.rogue-choice-options { display: flex; flex-wrap: wrap; gap: 6px; }
.rogue-choice-option.active, .rogue-choice-card.active { outline: 3px solid #f2c14e; outline-offset: 1px; }
.rogue-choice-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 92px; padding: 4px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
}
.rogue-choice-card .unit-token { position: relative; width: 80px; height: 70px; }
.rogue-choice-card span { font-size: 0.72rem; text-align: center; }
.rogue-end-choice { display: flex; flex-direction: column; gap: 4px; }
.hex.rogue-choice-hex { filter: drop-shadow(0 0 6px #f2c14e); }
.hex.rogue-choice-picked { filter: drop-shadow(0 0 8px #c08a1a) brightness(1.08); }
.rogue-free-spell .spell-name-button { border: 2px dashed #a03a2a; color: #a03a2a; }
html[data-theme="dark"] .rogue-free-spell .spell-name-button { border-color: #f08a6a; color: #f08a6a; }
.rogue-spell-uses { font-weight: 800; font-size: 0.78rem; }
.rogue-combat-banner { flex-wrap: wrap; }
.rogue-banner-kind { font-size: 0.72rem; text-transform: uppercase; padding: 1px 6px; border-radius: 6px; background: var(--journey-soft); color: var(--journey-green); font-weight: 700; }
.rogue-banner-kind.kind-miniboss { background: #f8dcd2; color: #8a1c1c; }
.rogue-banner-kind.kind-boss { background: #3b1a3b; color: #f6d4f6; }
.rogue-banner-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-weight: 600; }
.rogue-banner-hp { color: var(--danger); }
.rogue-banner-gold { display: inline-flex; align-items: center; gap: 2px; }
.rogue-banner-relics { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.rogue-banner-relic { position: relative; display: inline-flex; align-items: center; cursor: help; }
.rogue-banner-relic sub { font-size: 0.6rem; font-weight: 800; }
.rogue-banner-chip { font-size: 0.78rem; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line); }
.rogue-banner-chip.danger { border-color: var(--danger); color: var(--danger); }
.rogue-banner-chip.good { border-color: var(--good); color: var(--good); }