:root {
  --u-ink: var(--night-950);
  --u-panel: var(--panel-900);
  --u-panel-2: var(--panel-800);
  --u-line: var(--line-600);
  --u-line-soft: var(--line-soft-alpha);
  --u-text: var(--text-100);
  --u-muted: var(--muted-300);
  --u-gold: var(--gold-300);
  --u-ember: var(--ember-400);
  --u-green: var(--green-500);
  --u-red: var(--red-500);
  --u-blue: var(--blue-400);
  --u-shadow: 0 18px 54px rgba(0, 0, 0, .4);
}

body.page-map,
body.page-character,
body.page-seal,
body.page-forge {
  min-height: 100vh;
  color: var(--u-text);
  background:
    radial-gradient(circle at 15% 4%, rgba(215, 106, 43, .12), transparent 26%),
    radial-gradient(circle at 86% 5%, rgba(114, 150, 198, .08), transparent 24%),
    var(--u-ink);
}

.page-map .ember-field,
.page-character .ember-field,
.page-seal .ember-field,
.page-forge .ember-field {
  opacity: .22;
}

.page-map .site-header,
.page-character .site-header,
.page-seal .site-header,
.page-forge .site-header {
  min-height: 72px;
  padding: 0;
  border-bottom: 1px solid var(--u-line);
  background: rgba(16, 13, 11, .9);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 40;
}

.page-map .header-inner,
.page-character .header-inner,
.page-seal .header-inner,
.page-forge .header-inner {
  min-height: 72px;
  padding: 11px clamp(14px, 3vw, 34px);
}

.page-map .brand-mark img,
.page-character .brand-mark img,
.page-seal .brand-mark img,
.page-forge .brand-mark img {
  width: 42px !important;
  height: 42px !important;
}

.page-map .brand-text h1,
.page-character .brand-text h1,
.page-seal .brand-text h1,
.page-forge .brand-text h1 {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0;
}

.page-map .brand-eyebrow,
.page-character .brand-eyebrow,
.page-seal .brand-eyebrow,
.page-forge .brand-eyebrow {
  color: var(--u-gold);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.page-map main.wrap,
.page-character main.wrap,
.page-seal main.wrap,
.page-forge main.wrap {
  width: min(1480px, 100%);
  max-width: none;
  padding: 0 clamp(12px, 2.7vw, 34px) 44px;
}

.page-map .screen,
.page-character .screen,
.page-seal .screen,
.page-forge .screen {
  padding-top: 24px;
}

.page-map .map-intro,
.page-character .gate-copy,
.page-seal .map-intro,
.page-forge .map-intro {
  position: relative;
}

.page-map .map-intro,
.page-seal .map-intro,
.page-forge .map-intro {
  padding: 20px 0 22px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--u-line);
  align-items: center;
}

.page-map .map-intro .lede,
.page-seal .map-intro .lede,
.page-forge .map-intro .lede,
.page-character .gate-copy .lede {
  max-width: 720px;
  color: var(--u-text);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.55;
}

.page-map .map-links,
.page-seal .map-links,
.page-forge .map-links,
.page-character .gate-copy {
  gap: 8px;
}

.page-map .btn,
.page-character .btn,
.page-seal .btn,
.page-forge .btn {
  min-height: 42px;
  border-radius: 8px;
  font-weight: 700;
}

.page-map .btn-ghost,
.page-character .btn-ghost,
.page-seal .btn-ghost,
.page-forge .btn-ghost,
.page-character .btn-secondary,
.page-seal .btn-secondary,
.page-forge .btn-secondary {
  color: var(--u-muted);
  border-color: var(--u-line);
  background: rgba(255, 255, 255, .035);
}

.page-map .btn:hover,
.page-character .btn:hover,
.page-seal .btn:hover,
.page-forge .btn:hover {
  border-color: var(--u-gold);
  color: var(--u-text);
}

.page-character .btn-primary,
.page-seal .btn-primary,
.page-forge .btn-primary {
  color: #211408;
  border-color: #efc66d;
  background: var(--u-gold);
}

/* World map */
.page-map .map-toolbar {
  padding: 10px;
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background: rgba(25, 21, 17, .88);
  box-shadow: var(--u-shadow);
}

.page-map .map-search-input {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  border-color: var(--u-line);
  background: #110e0c;
  color: var(--u-text);
  font-size: 16px;
}

.page-map .map-level-filters {
  flex-wrap: nowrap;
  overflow-x: auto;
}

.page-map .map-filter-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  border-color: var(--u-line);
  background: var(--u-panel-2);
  white-space: nowrap;
}

.page-map .map-filter-btn.is-active {
  color: #211408;
  border-color: #efc66d;
  background: var(--u-gold);
}

.page-map .map-layout {
  grid-template-columns: minmax(0, 2.35fr) minmax(300px, .65fr);
  gap: 16px;
}

.page-map .map-canvas-wrap {
  border-color: var(--u-line);
  box-shadow: var(--u-shadow);
}

.page-map .map-panel {
  top: 94px;
  padding: 18px;
  border-color: var(--u-line);
  background: rgba(25, 21, 17, .94);
  box-shadow: var(--u-shadow);
}

.page-map .map-loclist-grid { gap: 8px; }
.page-map .map-loclist-item {
  min-height: 72px;
  padding: 12px;
  border-radius: 8px;
  border-color: var(--u-line);
  background: var(--u-panel);
}

/* Character builder */
.page-character .gate-grid {
  grid-template-columns: minmax(260px, 360px) minmax(0, 760px);
  justify-content: center;
  gap: 18px;
}

.page-character .gate-copy {
  align-self: start;
  padding: 24px;
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background:
    linear-gradient(0deg, rgba(16, 13, 11, .92), rgba(16, 13, 11, .3)),
    url('/images/scenes/camp.webp') center / cover;
  box-shadow: var(--u-shadow);
  position: sticky;
  top: 96px;
  display: flex;
  flex-wrap: wrap;
}

.page-character .gate-copy .lede {
  width: 100%;
  margin-bottom: 190px;
  text-shadow: 0 2px 12px #000;
}

.page-character .gate-panel {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--u-line);
  border-radius: 8px;
  background: var(--u-panel);
  box-shadow: var(--u-shadow);
}

.page-character .char-roster {
  margin-bottom: 12px;
  border-color: var(--u-line);
  border-radius: 8px;
  background: var(--u-panel-2);
}

.page-character .char-roster summary { min-height: 44px; display: flex; align-items: center; }
.page-character .panel-form { gap: 12px; }
.page-character .panel-form label { color: var(--u-muted); }
.page-character .panel-form input,
.page-character .panel-form select {
  min-height: 46px;
  border-radius: 8px;
  border-color: var(--u-line);
  background: #110e0c;
  color: var(--u-text);
  font-size: 16px;
}

.page-character .btn-generate-char { width: 100%; }
.page-character .char-portrait {
  width: min(280px, 100%);
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  border-radius: 8px;
  object-fit: cover;
}

.page-character .ability-block {
  padding: 12px;
  border-radius: 8px;
  border-color: var(--u-line);
  background: #120f0d;
}

.page-character .ability-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.page-character .ability-grid > * { min-width: 0; }
.page-character .btn-save-char { min-height: 50px; }

/* Shared GM tools */
.page-seal .tool-panel,
.page-forge .tool-panel {
  padding: 20px;
  border-color: var(--u-line);
  border-radius: 8px;
  background: rgba(25, 21, 17, .92);
  box-shadow: var(--u-shadow);
}

.page-seal .tool-panel h2,
.page-forge .tool-panel h2 {
  color: var(--u-text);
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: 0;
}

.page-seal .tool-panel .tool-hint,
.page-forge .tool-panel .tool-hint { color: var(--u-muted); }

.page-seal .screen {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
}

.page-seal .map-intro { grid-column: 1 / -1; }
.page-seal .tool-panel { margin: 0; }
.page-seal .tool-map-layout { grid-template-columns: minmax(250px, 380px) minmax(280px, 1fr); }
.page-seal .tool-map-svg-wrap {
  top: 94px;
  padding: 8px;
  border-color: var(--u-line);
  border-radius: 8px;
  background: #110e0c;
}
.page-seal .tool-room-detail {
  border-color: var(--u-line);
  border-radius: 8px;
  background: var(--u-panel-2);
}
.page-seal .tool-room-detail .tool-tag { border-color: var(--u-line); border-radius: 6px; }
.page-seal .tool-roller { min-height: 430px; justify-content: center; }

.page-forge .screen { max-width: 1120px; margin: 0 auto; }
.page-forge .tool-panel { margin-bottom: 12px; }
.page-forge .tool-roll-row { gap: 10px; }
.page-forge .tool-field-row input[type="text"],
.page-forge .tool-stepper,
.page-forge .tool-method-toggle {
  min-height: 44px;
  border-color: var(--u-line);
  border-radius: 8px;
  background: #110e0c;
}
.page-forge .tool-class-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.page-forge .tool-class-card {
  min-height: 72px;
  border-color: var(--u-line);
  border-radius: 8px;
  background: var(--u-panel-2);
}
.page-forge .tool-class-card.is-active {
  border-color: var(--u-gold);
  background: rgba(215, 170, 82, .1);
  box-shadow: inset 3px 0 0 var(--u-gold);
}
.page-forge .tool-method-toggle { display: grid; grid-template-columns: 1fr 1fr; }
.page-forge .tool-method-toggle button { min-height: 42px; }
.page-forge .tool-method-toggle button.is-active { color: #211408; background: var(--u-gold); }
.page-forge .tool-hp-bar-fill { background: var(--u-green); }
.page-forge .tool-sheet { background: var(--u-panel-2); }
.page-forge .tool-sheet-stats { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
  .page-map .map-layout { grid-template-columns: 1fr; }
  .page-map .map-panel { position: static; }
  .page-seal .screen { grid-template-columns: 1fr; }
  .page-seal .map-intro { grid-column: auto; }
  .page-seal .tool-roller { min-height: auto; }
  .page-forge .tool-class-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .page-map .site-header,
  .page-character .site-header,
  .page-seal .site-header,
  .page-forge .site-header { min-height: 62px; }

  .page-map .header-inner,
  .page-character .header-inner,
  .page-seal .header-inner,
  .page-forge .header-inner { min-height: 62px; padding: 9px 12px; }

  .page-map .brand-mark img,
  .page-character .brand-mark img,
  .page-seal .brand-mark img,
  .page-forge .brand-mark img { width: 38px !important; height: 38px !important; }

  .page-map .brand-text h1,
  .page-character .brand-text h1,
  .page-seal .brand-text h1,
  .page-forge .brand-text h1 {
    max-width: calc(100vw - 76px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
  }

  .page-map .brand-eyebrow,
  .page-character .brand-eyebrow,
  .page-seal .brand-eyebrow,
  .page-forge .brand-eyebrow { display: none; }

  .page-map main.wrap,
  .page-character main.wrap,
  .page-seal main.wrap,
  .page-forge main.wrap { padding-inline: 10px; }

  .page-map .screen,
  .page-character .screen,
  .page-seal .screen,
  .page-forge .screen { padding-top: 12px; }

  .page-map .map-intro,
  .page-seal .map-intro,
  .page-forge .map-intro { padding-top: 8px; }

  .page-map .map-intro .lede,
  .page-seal .map-intro .lede,
  .page-forge .map-intro .lede { font-size: 16px; }

  .page-map .map-links,
  .page-seal .map-links,
  .page-forge .map-links {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .page-map .map-links::-webkit-scrollbar,
  .page-seal .map-links::-webkit-scrollbar,
  .page-forge .map-links::-webkit-scrollbar { display: none; }

  .page-map .map-links .btn,
  .page-seal .map-links .btn,
  .page-forge .map-links .btn { min-width: max-content; }

  .page-map .map-toolbar { position: sticky; top: 70px; z-index: 20; }
  .page-map .map-canvas-wrap { overflow-x: auto; }
  .page-map .map-image,
  .page-map .map-markers { min-width: 680px; }
  .page-map .map-panel { padding: 14px; }

  .page-character .gate-grid { grid-template-columns: 1fr; }
  .page-character .gate-copy {
    min-height: 260px;
    padding: 16px;
    position: static;
    background-position: center 58%;
  }
  .page-character .gate-copy .lede { margin-bottom: 100px; font-size: 16px; }
  .page-character .gate-panel { padding: 10px; }
  .page-character .ability-grid { grid-template-columns: repeat(3, 1fr); }

  .page-seal .tool-map-layout { grid-template-columns: 1fr; }
  .page-seal .tool-map-svg-wrap { position: static; }
  .page-forge .tool-class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-forge .tool-sheet-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 440px) {
  .page-map .map-toolbar { align-items: stretch; }
  .page-map .map-search-input { flex-basis: 100%; }
  .page-map .map-level-filters { width: 100%; }
  .page-character .gate-copy { min-height: 230px; }
  .page-character .gate-copy .btn { width: 100%; }
  .page-seal .tool-panel,
  .page-forge .tool-panel { padding: 14px; }
  .page-forge .tool-class-card { padding: 10px 8px; }
  .page-forge .tool-stat-row { gap: 10px; }
}

/* Пошук і фільтри живуть у правій панелі карти */
.page-map .map-panel .map-toolbar {
  position: static;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 14px;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--u-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.page-map .map-panel .map-search-input { flex: 0 0 auto; width: 100%; }
.page-map .map-panel .map-level-filters { flex-wrap: wrap; overflow: visible; width: 100%; }
.page-map .map-panel .map-filter-btn { flex: 1 1 calc(50% - 6px); }
.page-map .map-panel .map-empty-note { margin: 0 0 12px; }