:root {
  color-scheme: dark;
  --bg: #05070a;
  --panel: #0d1117;
  --panel-2: #121821;
  --text: #f5f7fa;
  --muted: #9aa7b5;
  --line: #26313d;
  --accent: #72e6ff;
  --danger: #ff6b7a;
  --focus: #ffffff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { overflow-x: hidden; overflow-y: auto; }
button, select, input { font: inherit; }
button, select { color: var(--text); background: #151c25; border: 1px solid #334151; border-radius: 8px; }
button { padding: 0.62rem 0.8rem; cursor: pointer; }
button:hover { border-color: #75879b; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button:disabled { opacity: 0.45; cursor: not-allowed; }

.app-shell, .screen { width: 100vw; height: 100vh; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 0.45rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; }

.setup-screen { display: grid; place-items: center; padding: 2rem; overflow: auto; background: radial-gradient(circle at top, #10202a 0, #05070a 42%); }
.setup-card { width: min(620px, 100%); padding: 2rem; border: 1px solid #2c3c49; border-radius: 18px; background: rgba(10, 15, 21, 0.96); box-shadow: 0 0 36px rgba(78, 221, 255, 0.09); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0.5rem; font-size: clamp(2rem, 5vw, 3.2rem); }
.intro { color: #c3cbd4; line-height: 1.55; margin-bottom: 1.5rem; }
.setup-form { display: grid; gap: 1rem; }
.setup-form label { display: grid; gap: 0.45rem; font-weight: 650; }
.setup-form select { width: 100%; padding: 0.72rem; }
fieldset { border: 1px solid #2d3945; border-radius: 10px; padding: 0.8rem; }
legend { padding: 0 0.35rem; font-weight: 650; }
.color-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55rem; }
.color-option { position: relative; }
.color-option input { position: absolute; opacity: 0; pointer-events: none; }
.color-option label { display: grid; place-items: center; min-height: 50px; border: 2px solid #303a45; border-radius: 9px; cursor: pointer; background: #0d1218; }
.color-option label::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 10px color-mix(in srgb, var(--swatch) 60%, transparent); }
.color-option input:checked + label { border-color: var(--swatch); }
.victory-box { display: grid; gap: 0.25rem; padding: 0.85rem; border-left: 3px solid var(--accent); background: #0b1319; color: #dce3ea; }
.primary-button { background: #eafaff; color: #071015; border-color: #eafaff; font-weight: 800; }
.risk-button { background: #2a1420; border-color: #8e3d5b; font-weight: 750; }

.game-screen { display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.topbar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 0.65rem 0.85rem; border-bottom: 1px solid #20303d; background: #090d12; }
.topbar > div:first-child { display: flex; gap: 0.8rem; align-items: baseline; }
.topbar-actions { display: flex; gap: 0.45rem; }

.turn-banner {
  min-height: 46px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid #20303d;
  background: #0b1118;
  color: #f7fbff;
}
.turn-banner::before {
  content: '';
  position: absolute;
}
.turn-banner strong {
  font-size: 1rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.turn-banner-secondary {
  color: #b9c5cf;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.turn-banner-marker {
  width: 13px;
  height: 13px;
  box-sizing: border-box;
  border: 2px solid var(--turn-color, #6fffb0);
  transform: rotate(45deg);
  box-shadow: 0 0 8px color-mix(in srgb, var(--turn-color, #6fffb0) 70%, transparent);
}
.turn-banner-human {
  border-left: 4px solid var(--turn-color, #6fffb0);
}
.turn-banner-ai {
  border-left: 4px solid var(--turn-color, #57c7ff);
}
.turn-banner-paused {
  border-left: 4px solid #aab4bd;
}
.turn-banner-paused .turn-banner-marker {
  border-color: #aab4bd;
  box-shadow: none;
}
.play-layout { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 25vw, 340px); }
.board-column { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #05070a; }
.board-shell { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; background-image: linear-gradient(rgba(88, 199, 226, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(88, 199, 226, 0.035) 1px, transparent 1px); background-size: 28px 28px; }
.hex-board { width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
.side-panel { min-height: 0; overflow-y: auto; padding: 0.9rem; border-left: 1px solid #20303d; background: var(--panel); display: flex; flex-direction: column; gap: 1rem; }
.side-panel section { padding-bottom: 0.85rem; border-bottom: 1px solid #202a34; }
.side-panel section:last-child { border-bottom: 0; }
.context-panel, .action-panel { line-height: 1.45; color: #d5dce3; }
.board-action-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; padding: 0.65rem 0.85rem; border-top: 1px solid #20303d; background: #090d12; }
.board-action-bar button { min-height: 44px; }
.board-action-bar button:disabled { opacity: 0.68; }
.end-winner { display: inline-flex; align-items: center; gap: 0.55rem; margin-right: 0.25rem; }
.end-winner-mark { display: inline-block; flex: 0 0 auto; }
.version-tag { color: var(--muted); font-size: 0.78rem; font-weight: 700; margin-left: 0.35rem; }
.faction-summary { display: grid; gap: 0.45rem; }
.faction-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 0.55rem; align-items: center; padding: 0.42rem 0.5rem; border: 1px solid #222e39; border-radius: 7px; background: #0a1016; }
.faction-mark { width: 13px; height: 13px; border: 2px solid var(--faction); transform: rotate(45deg); }
.faction-row.is-current { border-style: dashed; border-color: #dfe8ee; }
.event-log { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.35rem; color: #b9c4ce; font-size: 0.88rem; }

.hex-tile { cursor: default; }
.hex-shape { fill: #0a0f14; stroke: #236073; stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: stroke-width 120ms ease, filter 120ms ease, fill 120ms ease; }
.hex-tile:hover .hex-shape { stroke: #8feaff; stroke-width: 2.2; }
.hex-tile.owned .hex-shape { stroke: var(--faction); fill: color-mix(in srgb, var(--faction) 10%, #080d12); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--faction) 40%, transparent)); }
.hex-tile.selected .hex-shape { stroke-width: 4; stroke: #ffffff; filter: drop-shadow(0 0 7px rgba(255,255,255,0.55)); }
.hex-tile.legal { cursor: pointer; }
.hex-tile.legal .hex-shape { stroke-width: 3; stroke-dasharray: 7 5; }
.hex-tile.pending .hex-shape { stroke-width: 4; stroke: #ffffff; stroke-dasharray: 2 4; }
.tile-symbol { fill: #ffffff; font-weight: 900; font-size: 13px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.tile-legal-marker { fill: none; stroke: #ffffff; stroke-width: 1.5; stroke-dasharray: 3 3; pointer-events: none; }
.board-message { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); max-width: 70%; padding: 0.65rem 0.85rem; border: 1px solid #435466; border-radius: 8px; background: rgba(4, 8, 12, 0.92); color: #ffffff; text-align: center; }

.overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 1rem; background: rgba(0, 0, 0, 0.78); }
.overlay-card { width: min(420px, 100%); padding: 1.5rem; border: 1px solid #3a4d5d; border-radius: 14px; background: #10161e; }
.overlay-actions { display: flex; gap: 0.55rem; flex-wrap: wrap; }

@media (max-width: 800px) {
  body { overflow: auto; }
  .game-screen { min-height: 100vh; height: auto; }
  .play-layout { grid-template-columns: 1fr; grid-template-rows: 62vh auto; }
  .board-column { grid-template-rows: auto minmax(0, 1fr) auto; }
  .board-action-bar { grid-template-columns: 1fr; }
  .turn-banner { grid-template-columns: auto auto; }
  .turn-banner-secondary { grid-column: 1 / -1; white-space: normal; }
  .side-panel { border-left: 0; border-top: 1px solid #20303d; }
  .topbar { align-items: flex-start; }
  .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
}


/* v1.5 — visible 2d6 roll. Dice keep a fixed shape; only pip faces change. */
.dice-overlay { z-index: 30; }
.dice-card { width: min(420px, calc(100vw - 2rem)); text-align: center; }
.dice-row { display: flex; justify-content: center; gap: 1.1rem; margin: 1.25rem 0 0.9rem; }
.die {
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 12px;
  border-radius: 15px;
  border: 2px solid #dfeaf2;
  background: #151c25;
  box-shadow: 0 0 18px rgba(114, 230, 255, 0.16);
}
.die.rolling { transform: scale(0.97); }
.pip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f5f7fa;
  place-self: center;
  box-shadow: none;
}
.pip.p1 { grid-area: 1 / 1; }
.pip.p2 { grid-area: 1 / 2; }
.pip.p3 { grid-area: 1 / 3; }
.pip.p4 { grid-area: 2 / 1; }
.pip.p5 { grid-area: 2 / 2; }
.pip.p6 { grid-area: 2 / 3; }
.pip.p7 { grid-area: 3 / 1; }
.pip.p8 { grid-area: 3 / 2; }
.pip.p9 { grid-area: 3 / 3; }
.dice-total { margin: 0.4rem 0 0.25rem; font-size: 1.55rem; font-weight: 850; }
.dice-result { margin-bottom: 0; min-height: 1.4em; }
.dice-result.success { color: #bfffd2; font-weight: 800; }
.dice-result.failure { color: #ffc1c8; font-weight: 800; }

/* v1.9 — exact, non-overlapping board targeting after rerenders. */
.hex-hit-area {
  fill: rgba(0, 0, 0, 0.001);
  stroke: transparent;
  stroke-width: 0;
  pointer-events: all;
  cursor: inherit;
}
.hex-tile.legal .hex-hit-area,
.hex-tile.owned .hex-hit-area { cursor: pointer; }


/* v1.10 — use the full playfield and softly pulse controls when player input is required. */
.hex-board {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes action-needed-pulse {
  0%, 100% {
    filter: brightness(1);
    box-shadow: 0 0 0 rgba(255,255,255,0);
  }
  50% {
    filter: brightness(1.12);
    box-shadow: 0 0 14px color-mix(in srgb, var(--pulse-color, #72e6ff) 42%, transparent);
  }
}

.board-action-bar button.action-needed:not(:disabled) {
  --pulse-color: #72e6ff;
  animation: action-needed-pulse 2.2s ease-in-out infinite;
}

.board-action-bar .risk-button.action-needed:not(:disabled) {
  --pulse-color: #ff6b9a;
}

.board-action-bar #cancel-selection.action-needed:not(:disabled) {
  --pulse-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .board-action-bar button.action-needed:not(:disabled) {
    animation: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pulse-color, #72e6ff) 55%, transparent);
  }
}


/* v1.11 — maximize board size while preserving true hex proportions. */
.board-shell {
  padding: 0;
}
.hex-board {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display: block;
}
/* SVG uses preserveAspectRatio="xMidYMid meet": largest possible board, zero distortion. */


/* v1.12 — the BOARD LAYOUT is wide; individual hexes remain perfectly proportioned.
   SVG still uses xMidYMid meet, so the full field stays visible with no top/bottom clipping. */
.hex-board {
  width: 100%;
  height: 100%;
  display: block;
}


/* v1.13 — preserve true hex geometry and fit the COMPLETE board in the playfield.
   The SVG viewBox now includes full hex extents; no stretching and no clipped rows/columns. */
.board-shell { overflow: hidden; }
.hex-board { width: 100%; height: 100%; display: block; }


/* v1.14 — visual pass: original role-specific SVG city tokens + subtle neutral terrain.
   Gameplay, board geometry, and click logic are unchanged. */
.hex-shape {
  fill: #071016;
  stroke: #1f7188;
}
.hex-tile:not(.owned) .hex-shape {
  fill: #071117;
}
.hex-tile:not(.owned):hover .hex-shape {
  fill: #0a1820;
}
.hex-tile.owned .hex-shape {
  fill: color-mix(in srgb, var(--faction) 13%, #071016);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--faction) 48%, transparent));
}
.role-sprite {
  pointer-events: none;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--faction) 65%, transparent));
}
.sprite-shadow { fill: rgba(0,0,0,.55); }
.sprite-platform {
  fill: #081017;
  stroke: var(--faction);
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}
.sprite-platform-inner {
  fill: color-mix(in srgb, var(--faction) 18%, #091119);
  stroke: color-mix(in srgb, var(--faction) 72%, white 8%);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.sprite-solid {
  fill: color-mix(in srgb, var(--faction) 32%, #101923);
  stroke: var(--faction);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
.sprite-bright {
  fill: #f4fbff;
  stroke: var(--faction);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.sprite-cut { fill: #05080c; stroke: var(--faction); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sprite-ring { fill: none; stroke: var(--faction); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.sprite-core { fill: #f4fbff; stroke: var(--faction); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sprite-strut { stroke: var(--faction); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sprite-badge { fill: #071016; stroke: var(--faction); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sprite-letter {
  fill: #ffffff;
  font-size: 8px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: central;
  filter: none;
}
.neutral-detail {
  pointer-events: none;
  fill: #12252d;
  stroke: #24515e;
  stroke-width: 1;
  opacity: .72;
}
.neutral-detail .neutral-line {
  stroke: #24515e;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.hex-tile.legal .neutral-detail { opacity: .38; }
.hex-tile.selected .role-sprite {
  filter: drop-shadow(0 0 7px rgba(255,255,255,.65)) drop-shadow(0 0 5px color-mix(in srgb, var(--faction) 70%, transparent));
}


/* v1.15 — selection clarity, opening cue, and title treatment. */
.hex-tile:focus { outline: none; }
.hex-tile:focus-visible .hex-shape {
  stroke: #dffaff;
  stroke-width: 2.5;
}
.hex-tile.selected .hex-shape {
  stroke: var(--faction, #ffffff);
  stroke-width: 2;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--faction, #ffffff) 50%, transparent));
}
.hex-selection-outline {
  pointer-events: none;
  fill: none;
  stroke: #ffffff;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.55));
  animation: selectedHexPulse 1.7s ease-in-out infinite;
}
@keyframes selectedHexPulse {
  0%, 100% { opacity: .58; stroke-width: 3; }
  50% { opacity: 1; stroke-width: 4.5; }
}

.game-brand {
  display: grid !important;
  grid-template-columns: auto auto auto auto;
  align-items: center !important;
  gap: .55rem !important;
  min-width: 0;
}
.game-brand-mark {
  width: 17px;
  height: 17px;
  border: 2px solid #72e6ff;
  transform: rotate(45deg);
  position: relative;
  flex: 0 0 auto;
}
.game-brand-mark::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid #72e6ff;
}
.game-brand-title {
  display: inline-grid;
  line-height: .9;
  padding: .15rem .7rem .18rem .05rem;
  border-right: 1px solid #285b69;
  position: relative;
}
.game-brand-title::after {
  content: '';
  position: absolute;
  left: .05rem;
  right: .7rem;
  bottom: -.25rem;
  height: 1px;
  background: linear-gradient(90deg, #72e6ff, transparent);
  animation: brandLinePulse 3.2s ease-in-out infinite;
}
.game-brand-title > span {
  color: #ffffff;
  font-size: .98rem;
  font-weight: 900;
  letter-spacing: .13em;
  white-space: nowrap;
}
.game-brand-title > small {
  margin-top: .18rem;
  color: #9fb0bd;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .38em;
}
.game-brand-turn { white-space: nowrap; }
@keyframes brandLinePulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

.setup-brand-title {
  display: inline-grid;
  line-height: .88;
  border-left: 4px solid #72e6ff;
  padding-left: .7rem;
}
.setup-brand-title > span {
  color: #ffffff;
  letter-spacing: .09em;
}
.setup-brand-title > small {
  margin-top: .42rem;
  color: #aebbc6;
  font-size: .28em;
  letter-spacing: .48em;
}

.opening-overlay {
  position: fixed;
  inset: 0;
  z-index: 18;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: rgba(2, 5, 8, .26);
  opacity: 0;
  transition: opacity 260ms ease;
}
.opening-overlay.is-visible { opacity: 1; }
.opening-card {
  --opening-color: #72e6ff;
  min-width: min(440px, calc(100vw - 2rem));
  padding: 1.05rem 1.4rem 1.15rem;
  text-align: center;
  border-top: 1px solid var(--opening-color);
  border-bottom: 1px solid var(--opening-color);
  background: linear-gradient(90deg, transparent, rgba(7,13,18,.94) 14%, rgba(7,13,18,.94) 86%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--opening-color) 18%, transparent);
  transform: scale(.975);
  transition: transform 260ms ease;
}
.opening-overlay.is-visible .opening-card { transform: scale(1); }
.opening-kicker {
  margin: 0 0 .5rem;
  color: #aebac4;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .28em;
}
.opening-marker {
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-bottom: .45rem;
  border: 2px solid var(--opening-color);
  transform: rotate(45deg);
  box-shadow: 0 0 10px color-mix(in srgb, var(--opening-color) 65%, transparent);
}
.opening-card h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.35rem, 3vw, 2rem);
  letter-spacing: .08em;
}
.opening-card #opening-turn {
  margin: .5rem 0 0;
  color: #ffffff;
  font-weight: 900;
  letter-spacing: .18em;
}

@media (prefers-reduced-motion: reduce) {
  .hex-selection-outline, .game-brand-title::after { animation: none; }
}


/* v1.16 — every turn gets a quick peripheral faction-color cue. */
@keyframes turn-change-border-pulse {
  0%   { box-shadow: inset 0 0 0 1px rgba(255,255,255,0), 0 0 0 rgba(255,255,255,0); }
  35%  { box-shadow:
           inset 0 0 0 2px color-mix(in srgb, var(--turn-pulse-color, #72e6ff) 82%, white 8%),
           0 0 18px color-mix(in srgb, var(--turn-pulse-color, #72e6ff) 48%, transparent); }
  100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0), 0 0 0 rgba(255,255,255,0); }
}
.board-shell.turn-change-pulse,
.board-panel.turn-change-pulse,
.board-stage.turn-change-pulse,
.board-wrap.turn-change-pulse {
  animation: turn-change-border-pulse .65s ease-out 1;
}
@media (prefers-reduced-motion: reduce) {
  .board-shell.turn-change-pulse,
  .board-panel.turn-change-pulse,
  .board-stage.turn-change-pulse,
  .board-wrap.turn-change-pulse {
    animation: none;
    box-shadow: inset 0 0 0 2px var(--turn-pulse-color, #72e6ff);
  }
}


/* v1.16.1 — turn-change alert is now wired to the same full-screen announcement
   card used at match start, so every faction handoff is unmistakable. */
.opening-overlay.is-visible .opening-marker {
  animation: turn-marker-hit .52s ease-out 1;
}
@keyframes turn-marker-hit {
  0%   { transform: rotate(45deg) scale(.72); opacity: .2; }
  55%  { transform: rotate(45deg) scale(1.18); opacity: 1; }
  100% { transform: rotate(45deg) scale(1); opacity: 1; }
}


/* v1.16.2 — board-scoped alerts, stronger neon geometry, subtle 3D starfield. */
.board-shell {
  isolation: isolate;
  background-color: #03070b;
}

.starfield-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .88;
}

.hex-board {
  position: relative;
  z-index: 1;
}

/* The turn/match card now centers on the playfield, not the browser viewport. */
.opening-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: rgba(2, 5, 8, .18);
}

/* Slightly bolder grid — piece glow intentionally untouched. */
.hex-shape {
  stroke-width: 2.15;
}
.hex-tile:hover .hex-shape {
  stroke-width: 2.8;
}
.hex-tile.owned .hex-shape {
  stroke-width: 2.45;
}
.hex-tile.selected .hex-shape {
  stroke-width: 4.4;
}
.hex-tile.legal .hex-shape {
  stroke-width: 3.35;
}
.hex-tile.pending .hex-shape {
  stroke-width: 4.35;
}

@media (prefers-reduced-motion: reduce) {
  .starfield-canvas {
    opacity: .62;
  }
}

/* v1.17 audio controls */
.audio-button {
  min-width: 92px;
  letter-spacing: .06em;
}
.audio-button[aria-pressed="false"] {
  opacity: .58;
}

/* v1.18.1 — Binbot Media return navigation */
.binbot-back-button {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; padding:0 14px;
  border:2px solid #39ff88; border-radius:4px;
  background:#030806; color:#fff; font:inherit;
  font-size:.78rem; font-weight:800; letter-spacing:.075em;
  line-height:1; text-decoration:none; white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(57,255,136,.12),0 0 8px rgba(57,255,136,.22);
  transition:.15s ease;
}
.binbot-back-button:hover,.binbot-back-button:focus-visible {
  background:#07150d; border-color:#75ffad; color:#fff;
  box-shadow:inset 0 0 0 1px rgba(57,255,136,.2),0 0 14px rgba(57,255,136,.42);
  outline:none;
}
.binbot-back-button:active { transform:translateY(1px); }


/* v1.18.2 — indexable game guide below the playable viewport. No gameplay changes. */
.seo-game-guide {
  width: 100%;
  padding: clamp(2.5rem, 6vw, 5rem) 1.25rem;
  border-top: 1px solid #20303d;
  background: #070b10;
}
.seo-game-guide-inner {
  width: min(1080px, 100%);
  margin: 0 auto;
}
.seo-game-guide h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
}
.seo-game-guide h3 {
  margin: 0 0 .55rem;
  color: #f5f7fa;
  font-size: 1.05rem;
}
.seo-game-guide p, .seo-game-guide li {
  color: #c3cbd4;
  line-height: 1.7;
}
.seo-game-guide strong { color: #fff; }
.seo-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.75rem 0 2rem;
}
.seo-guide-grid article {
  padding: 1.15rem;
  border: 1px solid #26313d;
  border-radius: 10px;
  background: #0d1117;
}
.seo-guide-grid article p { margin-bottom: 0; }
.seo-rule-list {
  margin: .5rem 0 1.5rem;
  padding-left: 1.4rem;
}
.seo-rule-list li + li { margin-top: .4rem; }
.seo-guide-note {
  margin-bottom: 0;
  padding-top: 1rem;
  border-top: 1px solid #202a34;
  font-size: .94rem;
}
@media (max-width: 720px) {
  .seo-guide-grid { grid-template-columns: 1fr; }
}