:root {
  --bg-deep: #1a6fb5;
  --bg-main: #4da6e8;
  --bg-panel: #ffffff;
  --bg-panel-light: #f0f4ff;
  --rbx-border: #1a1a2e;
  --rbx-border-light: #c8d6e5;
  --rbx-highlight: #ffffff;
  --rbx-shadow: #2d3436;
  --rbx-accent: #00b06f;
  --rbx-accent-bright: #00d68f;
  --rbx-accent-dim: #008f5a;
  --gold: #ffaa00;
  --gold-bright: #ffcc33;
  --gold-dim: #cc8800;
  --text: #2d3436;
  --text-dim: #636e72;
  --text-dark: #2d3436;
  --text-light: #ffffff;
  --grass: #5bc236;
  --grass-lit: #7dd956;
  --grass-dark: #3d9a1f;
  --rock: #b2bec3;
  --water: #0984e3;
  --hp-green: #00b06f;
  --hp-red: #e74c3c;
  --blue-team: #00a2ff;
  --red-team: #ff4444;
  --highlight-move: rgba(0, 162, 255, 0.45);
  --highlight-attack: rgba(255, 68, 68, 0.55);
  --highlight-attack-zone: rgba(255, 100, 80, 0.28);
  --tap-min: 44px;
  --good: #00b06f;
  --evil: #e74c3c;
  --neutral: #b2bec3;
  --success: #00b06f;
  --rbx-radius: 12px;
  --rbx-radius-sm: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
}

body {
  font-family: "Nunito", "Varela Round", "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #6cb4ee 0%, #b5e3ff 35%, #d4edfc 70%, #a8d8ea 100%);
}

a { color: var(--blue-team); font-weight: 700; }

button, .btn {
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.hidden { display: none !important; }

/* Chunky Roblox-style panels */
.stone-panel,
.panel,
.panel-block,
.mission-card,
.overlay-card,
.minimap-frame,
.quest-log {
  background: var(--bg-panel);
  border: 4px solid var(--rbx-border);
  border-radius: var(--rbx-radius);
  box-shadow:
    0 4px 0 var(--rbx-shadow),
    inset 0 2px 0 var(--rbx-highlight);
}

.panel,
.stone-panel {
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
}

.panel h2,
.panel-block h2,
.stone-panel h2 {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-team);
  border-bottom: 3px solid var(--rbx-border-light);
  padding-bottom: 0.4rem;
  font-weight: 800;
}

.muted { color: var(--text-dim); }

/* Header — bright top bar */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 0.65rem 1rem;
  border-bottom: 4px solid var(--rbx-border);
  background: linear-gradient(180deg, #ffffff 0%, #e8f4fd 100%);
  box-shadow: 0 4px 0 rgba(45, 52, 54, 0.15);
}

.brand-block { flex: 1; min-width: 0; }

.brand {
  margin: 0;
  font-size: clamp(1.3rem, 3vw, 1.85rem);
  letter-spacing: 0.02em;
  color: var(--blue-team);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.08);
  font-weight: 900;
}

.brand a { color: inherit; text-decoration: none; }

.tagline {
  margin: 0.1rem 0 0;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.site-nav a {
  color: var(--text);
  text-decoration: none;
  padding: 0.4rem 0.85rem;
  border: 3px solid var(--rbx-border);
  border-radius: var(--rbx-radius-sm);
  background: var(--bg-panel-light);
  box-shadow: 0 3px 0 var(--rbx-shadow);
  font-size: 0.88rem;
  font-weight: 700;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--blue-team);
  border-color: var(--blue-team);
  background: #e3f2fd;
  transform: translateY(-1px);
}

.page-shell {
  max-width: 920px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
}

.page-shell.wide { max-width: 1140px; }

.btn {
  border: 3px solid var(--rbx-border);
  border-radius: var(--rbx-radius-sm);
  background: linear-gradient(180deg, #f8f9fa 0%, #dfe6e9 100%);
  color: var(--text);
  padding: 0.5rem 1rem;
  box-shadow: 0 3px 0 var(--rbx-shadow);
  font-size: 0.9rem;
  font-weight: 700;
}

.btn:hover:not(:disabled) {
  border-color: var(--blue-team);
  color: var(--blue-team);
  transform: translateY(-1px);
}

.btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--rbx-shadow);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn.primary {
  background: linear-gradient(180deg, var(--rbx-accent-bright) 0%, var(--rbx-accent) 100%);
  color: var(--text-light);
  border-color: var(--rbx-accent-dim);
}

.btn.good {
  border-color: var(--good);
  color: var(--good);
}

.btn.evil {
  border-color: var(--evil);
  color: var(--evil);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

/* Landing hero */
.hero {
  text-align: center;
  padding: 1.5rem 0 0.75rem;
}

.hero h1 {
  font-size: clamp(1.8rem, 5vw, 2.75rem);
  color: var(--blue-team);
  margin: 0 0 0.45rem;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.08);
  font-weight: 900;
}

.intro-text {
  max-width: 560px;
  margin: 0 auto 1.25rem;
  color: var(--text-dim);
  line-height: 1.6;
  font-size: 0.95rem;
  font-weight: 600;
}

.feature-list {
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.65;
  color: var(--text-dim);
  font-weight: 600;
}

/* Character form */
.form-grid {
  display: grid;
  gap: 0.85rem;
}

.form-grid label {
  display: block;
  font-size: 0.82rem;
  color: var(--blue-team);
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
}

.form-grid input,
.form-grid select {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 3px solid var(--rbx-border);
  border-radius: var(--rbx-radius-sm);
  background: var(--bg-panel-light);
  color: var(--text);
  font: inherit;
  font-weight: 600;
}

.stat-preview p { margin: 0.3rem 0; }

.badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
  border: 2px solid var(--rbx-border);
  border-radius: 6px;
  background: var(--bg-panel-light);
}

.badge.completed {
  color: var(--success);
  border-color: var(--good);
  background: #e8f8f0;
}

.badge.locked {
  color: var(--text-dim);
}

.badge.turn {
  color: var(--accent);
  border-color: var(--accent);
  background: #e8f0ff;
}

.badge.nemesis {
  color: var(--evil);
  border-color: var(--evil);
  background: #fde8e8;
}

.badge.safe { color: var(--good); border-color: var(--good); background: #e8f8f0; }
.badge.contested { color: var(--gold); border-color: var(--gold-dim); background: #fff8e8; }
.badge.overrun { color: var(--evil); border-color: var(--evil); background: #fde8e8; }

/* Morality bar */
.morality-bar-wrap {
  margin: 0.5rem 0;
}

.morality-bar {
  display: flex;
  height: 16px;
  border: 3px solid var(--rbx-border);
  border-radius: 8px;
  background: var(--bg-panel-light);
  overflow: hidden;
}

.morality-bar .evil-side {
  flex: 1;
  background: linear-gradient(90deg, #c0392b, var(--evil));
}

.morality-bar .neutral-side {
  flex: 1;
  background: #b2bec3;
}

.morality-bar .good-side {
  flex: 1;
  background: linear-gradient(90deg, var(--good), #27ae60);
}

.morality-marker {
  position: relative;
  height: 0;
}

.morality-marker span {
  position: absolute;
  top: -18px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--gold-bright);
  transform: translateX(-50%);
}

.morality-label {
  text-align: center;
  font-size: 0.82rem;
  color: var(--blue-team);
  margin-top: 0.35rem;
  font-weight: 700;
}

/* Map layout */
.map-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1rem;
}

@media (max-width: 760px) {
  .map-layout { grid-template-columns: 1fr; }
}

.map-layout-triple {
  display: grid;
  grid-template-columns: 240px 1fr 280px;
  gap: 1rem;
}

@media (max-width: 960px) {
  .map-layout-triple { grid-template-columns: 1fr; }
}

/* Minimap zone panel */
.minimap-frame {
  padding: 0.75rem;
}

.minimap-frame h2 {
  font-size: 0.78rem;
  color: var(--blue-team);
  margin: 0 0 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 3px solid var(--rbx-border-light);
  padding-bottom: 0.35rem;
  font-weight: 800;
}

.zone-row {
  margin-bottom: 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px dashed var(--rbx-border-light);
}

.zone-row:last-child { border-bottom: none; margin-bottom: 0; }

.zone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
}

.zone-name { color: var(--text); font-weight: 800; }

.zone-status-icon { font-size: 0.85rem; }

.influence-bar {
  display: flex;
  height: 12px;
  border: 2px solid var(--rbx-border);
  border-radius: 6px;
  background: var(--bg-panel-light);
  overflow: hidden;
}

.influence-bar .safety-fill {
  background: linear-gradient(180deg, var(--good), #27ae60);
  transition: width 0.3s ease;
}

.influence-bar .threat-fill {
  background: linear-gradient(180deg, var(--evil), #c0392b);
  transition: width 0.3s ease;
}

.influence-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--text-dim);
  margin-top: 0.2rem;
  font-weight: 600;
}

/* Quest log */
.quest-log {
  padding: 0.75rem;
  max-height: 280px;
  overflow-y: auto;
}

.quest-entry {
  margin-bottom: 0.65rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px dashed var(--rbx-border-light);
}

.quest-entry:last-child { border-bottom: none; }

.quest-entry h4 {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
  color: var(--blue-team);
  font-weight: 800;
}

.quest-entry p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.45;
  font-weight: 600;
}

.quest-entry.completed h4 { color: var(--text-dim); text-decoration: line-through; }
.quest-entry.locked { opacity: 0.5; }

/* Mission cards */
.mission-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem;
  margin-bottom: 0.65rem;
}

.mission-card.locked { opacity: 0.55; }
.mission-card.completed { border-color: var(--rbx-accent-dim); }

.mission-order {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: var(--bg-panel-light);
  border: 3px solid var(--blue-team);
  border-radius: 8px;
  color: var(--blue-team);
  flex-shrink: 0;
  font-size: 0.9rem;
}

.mission-body { flex: 1; min-width: 0; }
.mission-body h3 { margin: 0 0 0.2rem; color: var(--text); font-size: 1rem; font-weight: 800; }
.mission-body .rewards { font-size: 0.82rem; color: var(--gold); margin: 0.3rem 0 0; font-weight: 700; }

.mission-action { flex-shrink: 0; }

.profile-panel h3 { margin: 0 0 0.3rem; color: var(--blue-team); font-weight: 800; }
.stat-mini { font-size: 0.82rem; font-weight: 600; }

/* Nemesis card */
.nemesis-card {
  padding: 0.65rem;
  margin-bottom: 0.5rem;
  background: #fde8e8;
  border: 3px solid var(--evil);
  border-radius: var(--rbx-radius-sm);
}

.nemesis-card h4 {
  margin: 0 0 0.25rem;
  color: var(--evil);
  font-size: 0.88rem;
  font-weight: 800;
}

.nemesis-card p {
  margin: 0.15rem 0;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-weight: 600;
}

/* Battle */
.phase-bar {
  padding: 0.4rem 0.85rem;
  border: 3px solid var(--rbx-border);
  border-radius: var(--rbx-radius-sm);
  background: var(--bg-panel);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--blue-team);
  box-shadow: 0 3px 0 var(--rbx-shadow);
}

.phase-bar.enemy {
  border-color: var(--evil);
  color: var(--evil);
  background: #fde8e8;
}

.battle-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 1rem;
  padding: 1rem;
  max-width: 1140px;
  margin: 0 auto;
}

@media (max-width: 820px) {
  .battle-shell { grid-template-columns: 1fr; }
  .battlefield { min-height: 52vh; }
  .cell { min-height: var(--tap-min); }
  .action-row .btn,
  .site-header .btn,
  .site-header .btn.primary {
    min-height: var(--tap-min);
    min-width: var(--tap-min);
    padding: 0.65rem 1.1rem;
    font-size: 1rem;
  }
  .unit { inset: 4%; font-size: clamp(0.65rem, 2.8vw, 0.85rem); }
}

.battlefield-wrap {
  padding: 0.65rem;
}

.battlefield {
  display: grid;
  gap: 2px;
  aspect-ratio: 8 / 6;
  max-height: 72vh;
  border: 4px solid var(--rbx-border);
  border-radius: var(--rbx-radius-sm);
  background: #87ceeb;
}

.cell {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.12);
  min-height: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cell.grass {
  background: linear-gradient(145deg, var(--grass-lit), var(--grass));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.cell.rock {
  background: linear-gradient(145deg, #d5d8dc, var(--rock));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.cell.water {
  background: linear-gradient(145deg, #74b9ff, var(--water));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.cell.move-target {
  background: linear-gradient(145deg, rgba(0, 162, 255, 0.28), rgba(0, 162, 255, 0.16));
  box-shadow: inset 0 0 0 3px var(--highlight-move);
  cursor: pointer;
}

.cell.attack-range {
  background: linear-gradient(145deg, rgba(255, 120, 80, 0.22), var(--highlight-attack-zone));
  box-shadow: inset 0 0 0 2px rgba(255, 68, 68, 0.35);
}

.cell.attack-target {
  background: linear-gradient(145deg, rgba(255, 80, 80, 0.5), rgba(255, 68, 68, 0.38));
  box-shadow: inset 0 0 0 3px var(--highlight-attack);
  cursor: pointer;
}

.cell.selected { box-shadow: inset 0 0 0 3px var(--gold-bright); }

.unit {
  position: absolute;
  inset: 6%;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: clamp(0.5rem, 1.6vw, 0.75rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  border: 3px solid var(--rbx-border);
  user-select: none;
  font-family: "Nunito", sans-serif;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 0 var(--rbx-shadow);
}

.unit.player {
  background: linear-gradient(180deg, #4db8ff, var(--blue-team));
}

.unit.enemy {
  background: linear-gradient(180deg, #ff6666, var(--red-team));
}

.unit.nemesis {
  background: linear-gradient(180deg, #ff3333, #aa0000);
  border-color: var(--gold);
  animation: nemesis-pulse 2s ease-in-out infinite;
}

@keyframes nemesis-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 170, 0, 0.4); }
  50% { box-shadow: 0 0 10px rgba(255, 170, 0, 0.7); }
}

.unit.spent { opacity: 0.5; filter: grayscale(0.4); }

.unit .hp-pip {
  position: absolute;
  bottom: -4px;
  left: 8%;
  right: 8%;
  height: 4px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

.unit .hp-pip span {
  display: block;
  height: 100%;
  background: var(--hp-green);
  border-radius: 2px;
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.panel-block { padding: 0.75rem; }

.unit-card { min-height: 4rem; }
.unit-card.empty { color: var(--text-dim); font-size: 0.88rem; font-weight: 600; }
.unit-card .name { margin: 0 0 0.3rem; font-size: 1rem; font-weight: 800; color: var(--blue-team); }
.unit-card .stat { margin: 0.12rem 0; font-size: 0.84rem; color: var(--text-dim); font-weight: 600; }

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.battle-log {
  margin: 0;
  padding-left: 1rem;
  max-height: 8rem;
  overflow: auto;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-family: "Nunito", sans-serif;
  font-weight: 600;
}

.help ul {
  margin: 0;
  padding-left: 1rem;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-weight: 600;
}

.help li { margin: 0.3rem 0; }

/* Overlays */
.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(26, 111, 181, 0.55);
}

.overlay.hidden { display: none; }

.overlay-card {
  width: min(92vw, 420px);
  padding: 1.25rem;
  text-align: center;
}

.overlay-card.wide { width: min(94vw, 480px); }

.overlay-card h2 {
  margin: 0 0 0.5rem;
  color: var(--blue-team);
  font-size: 1.2rem;
  border: none;
  padding: 0;
  font-weight: 900;
}

.overlay-card p {
  margin: 0 0 1rem;
  color: var(--text-dim);
  line-height: 1.5;
  font-size: 0.92rem;
  font-weight: 600;
}

.choice-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.choice-row .btn { width: 100%; text-align: left; }

.choice-hint {
  float: right;
  font-size: 0.75rem;
  opacity: 0.8;
}

.error-msg {
  padding: 2rem;
  text-align: center;
  color: var(--text-dim);
  font-weight: 600;
}

.world-dialogue {
  font-weight: 700;
  color: var(--blue-team);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  padding: 0.65rem 0.85rem;
  border-left: 4px solid var(--blue-team);
  background: rgba(255, 255, 255, 0.75);
  border-radius: 0 var(--rbx-radius-sm) var(--rbx-radius-sm) 0;
}

/* Overworld exploration */
.overworld-body {
  overflow-x: hidden;
  background: linear-gradient(180deg, #6cb4ee 0%, #b5e3ff 50%, #87ceeb 100%);
}

.overworld-shell {
  max-width: 1100px;
}

.overworld-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 1rem;
  align-items: start;
}

@media (max-width: 820px) {
  .overworld-layout { grid-template-columns: 1fr; }
}

.overworld-view {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

#overworld-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 4px solid var(--rbx-border);
  border-radius: var(--rbx-radius-sm);
  background: #87ceeb;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow: 0 4px 0 var(--rbx-shadow);
}

.overworld-hint {
  margin: 0;
  font-size: 0.78rem;
  text-align: center;
  font-weight: 600;
}

.overworld-sidebar .panel h2 {
  margin-top: 0;
}

.zone-legend-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  margin: 0.35rem 0;
  color: var(--text-dim);
  font-weight: 600;
}

.legend-swatch {
  width: 16px;
  height: 16px;
  border: 2px solid var(--rbx-border);
  border-radius: 4px;
  flex-shrink: 0;
}

.legend-swatch.safe { background: rgba(0, 176, 111, 0.45); }
.legend-swatch.contested { background: rgba(255, 170, 0, 0.45); }
.legend-swatch.overrun { background: rgba(231, 76, 60, 0.45); }

.btn.secondary {
  background: linear-gradient(180deg, #e8f4fd 0%, #d0e8f7 100%);
}