/* Field-guide presentation follows the approved campaign palette and shared font tokens. */


.howto-guide {
  --guide-bg:#101d18;
  --guide-panel:#1d3025;
  --guide-ink:#eee8d4;
  --guide-muted:#bfcbba;
  --guide-line:#54634d;
  --guide-accent:#e4b558;
  --guide-paper:#e8e1cc;
  --guide-paper-ink:#203225;
  color-scheme:dark;
  background:var(--guide-bg);
  color:var(--guide-ink);
  font-family:var(--font-copy);
  font-weight:500;
  font-size:16px;
  line-height:1.6;
  min-width:0;
}

.howto-guide * {
  box-sizing:border-box;
}

.howto-guide [hidden] {
  display:none!important;
}

.howto-guide h1,.howto-guide h2,.howto-guide h3 {
  font-family:var(--font-heading);
  font-weight:400;
  line-height:1.4;
  margin:0;
  text-wrap:balance;
}

.howto-guide p {
  margin:0 0 16px;
}

.howto-guide button,.howto-guide input {
  color:inherit;
  font:inherit;
  border-radius:0;
}

.howto-guide button {
  cursor:pointer;
  border:1px solid var(--guide-line);
  background:transparent;
  padding:12px 16px;
  min-height:44px;
  font-family:var(--font-label);
  font-size:12px;
  font-weight:400;
  line-height:1.5;
  text-align:left;
}

.howto-guide button:hover {
  background:#2e4331;
}

.howto-guide button[aria-current="page"],.howto-guide button[aria-current="step"],.howto-guide button[aria-pressed="true"] {
  border-color:var(--guide-accent);
  color:var(--guide-accent);
}

.howto-guide button:disabled {
  cursor:default;
  color:var(--guide-muted);
  border-color:var(--guide-line);
}

.howto-guide .guide-primary {
  background:var(--guide-accent);
  border-color:var(--guide-accent);
  color:#203225;
}

.howto-guide .guide-primary:hover {
  background:#f0c66f;
}

.howto-guide .guide-header {
  padding:22px 30px 0;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  align-items:center;
  border-bottom:1px solid var(--guide-line);
}

.howto-guide .guide-header nav {
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  padding-bottom:14px;
}

.howto-guide .guide-header nav button {
  border-color:transparent;
}

.howto-guide .guide-header nav button[aria-current="page"] {
  border-bottom-color:var(--guide-accent);
}

.howto-guide .guide-body {
  padding:30px;
}

.howto-guide .guide-kicker {
  font:400 11px/1.6 var(--font-label);
  letter-spacing:.07em;
  color:var(--guide-accent);
  margin-bottom:14px;
  display:block;
}

.howto-guide .guide-spread {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:start;
}

.howto-guide .guide-lead {
  font-size:31px;
  margin-bottom:20px;
  max-width:15ch;
}

.howto-guide .guide-intro {
  font-size:18px;
  color:var(--guide-muted);
  max-width:48ch;
}

.howto-guide .guide-links {
  margin-top:26px;
  border-top:1px solid var(--guide-line);
}

.howto-guide .guide-link {
  display:block;
  width:100%;
  padding:17px 0;
  border:0;
  border-bottom:1px solid var(--guide-line);
}

.howto-guide .guide-link span {
  display:flex;
  justify-content:space-between;
  gap:18px;
  font-size:13px;
}

.howto-guide .guide-link small {
  font:500 15px/1.5 var(--font-copy);
  color:var(--guide-muted);
  display:block;
  margin-top:6px;
  max-width:43ch;
}

.howto-guide .guide-link:hover {
  background:transparent;
  color:var(--guide-accent);
}

.howto-guide .guide-figure {
  background:var(--guide-paper);
  color:var(--guide-paper-ink);
  padding:22px;
  margin:0;
  min-width:0;
}

.howto-guide .guide-figure h3 {
  font-size:15px;
  margin-bottom:16px;
}

.howto-guide .guide-map {
  position:relative;
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  aspect-ratio:1;
  gap:3px;
  width:100%;
  max-width:420px;
  margin:auto;
}

.howto-guide .guide-cell {
  background:#d5d4bd;
  border:1px solid #b3b69b;
  grid-column:var(--c);
  grid-row:var(--r);
  min-width:0;
  aspect-ratio:1;
}

.howto-guide .guide-cell[data-band="1"] {
  background:#bbc8ab;
}

.howto-guide .guide-cell[data-band="2"] {
  background:#c8ceb3;
}

.howto-guide .guide-base {
  grid-column:4 / span 2;
  grid-row:4 / span 2;
  background:#354e37;
  color:#fff5d9;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  flex-direction:column;
  font-family:var(--font-label);
  font-size:11px;
  line-height:1.5;
}

.howto-guide .guide-base span {
  font-family:var(--font-data);
  font-size:17px;
  margin-top:5px;
}

.howto-guide .guide-token {
  grid-column:var(--c);
  grid-row:var(--r);
  align-self:center;
  justify-self:center;
  z-index:2;
  display:flex;
  justify-content:center;
  align-items:center;
  border:2px solid #fff5d9;
  background:#8a3d26;
  color:#fff6e4;
  font:500 13px/1 var(--font-data);
  width:92%;
  aspect-ratio:1;
  max-height:100%;
  border-radius:50%;
}

.howto-guide .guide-token--far {
  background:#3f5042;
  border-radius:0;
}

.howto-guide .guide-map-caption {
  font-size:14px;
  line-height:1.5;
  margin-top:16px;
  padding-top:13px;
  border-top:1px solid #929e81;
}

.howto-guide .guide-map-caption p:last-child {
  margin:0;
}

.howto-guide .guide-legend {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-size:13px;
  margin:12px 0 0;
}

.howto-guide .guide-legend span {
  display:flex;
  gap:7px;
  align-items:center;
}

.howto-guide .guide-dot {
  width:12px;
  height:12px;
  background:#8a3d26;
  border-radius:50%;
  display:inline-block;
}

.howto-guide .guide-square {
  width:12px;
  height:12px;
  background:#3f5042;
  display:inline-block;
}

.howto-guide .guide-bottom {
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  border-top:1px solid var(--guide-line);
  margin-top:26px;
  padding-top:22px;
}

.howto-guide .guide-bottom p {
  margin:0;
  color:var(--guide-muted);
  max-width:49ch;
  font-size:15px;
}

.howto-guide .guide-step-nav {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:0 0 26px;
}

.howto-guide .guide-step-nav button {
  font-size:11px;
  padding:10px 12px;
}

.howto-guide .guide-step-title {
  font-size:25px;
  margin-bottom:18px;
}

.howto-guide .guide-note {
  border-left:3px solid var(--guide-accent);
  padding:3px 0 3px 16px;
  color:var(--guide-muted);
  font-size:15px;
  margin:22px 0;
}

.howto-guide .guide-note p:last-child {
  margin:0;
}

.howto-guide .guide-actions {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:24px;
}

.howto-guide .guide-stat-line {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  border-bottom:1px solid var(--guide-line);
  font-size:15px;
}

.howto-guide .guide-library-top h2 {
  font-size:25px;
  margin-bottom:14px;
}

.howto-guide .guide-library-top p {
  color:var(--guide-muted);
  max-width:58ch;
}

.howto-guide .guide-search {
  display:block;
  margin:24px 0;
}

.howto-guide .guide-search span {
  font-family:var(--font-label);
  font-size:11px;
  display:block;
  margin-bottom:8px;
}

.howto-guide .guide-search input {
  width:100%;
  background:var(--guide-panel);
  border:1px solid var(--guide-line);
  padding:14px 16px;
  font-size:17px;
}

.howto-guide .guide-rule-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 30px;
  border-top:1px solid var(--guide-line);
}

.howto-guide .guide-rule-list .guide-link small {
  font-size:14px;
}

.howto-guide .guide-search-status {
  font-size:14px;
  color:var(--guide-muted);
  margin-bottom:15px;
}

.howto-guide .guide-article {
  max-width:68ch;
  margin:0 auto;
}

.howto-guide .guide-article h2 {
  font-size:26px;
  margin:24px 0 18px;
}

.howto-guide .guide-article h3 {
  font-size:15px;
  margin:26px 0 13px;
}

.howto-guide .guide-article .guide-summary {
  font-size:20px;
  color:var(--guide-ink);
  padding-bottom:22px;
  border-bottom:1px solid var(--guide-line);
}

.howto-guide .guide-article p {
  color:var(--guide-muted);
}

.howto-guide .guide-article .guide-note p {
  color:var(--guide-ink);
}

.howto-guide .guide-article footer {
  margin-top:28px;
  border-top:1px solid var(--guide-line);
  padding-top:20px;
}

.howto-guide .guide-back {
  font-size:11px;
}

@media(max-width:760px) {
  .howto-guide .guide-spread {
    grid-template-columns:1fr;
    gap:26px;
  }

  .howto-guide .guide-lead {
    max-width:22ch;
    font-size:27px;
  }

  .howto-guide .guide-rule-list {
    grid-template-columns:1fr;
  }

  .howto-guide .guide-header {
    padding:20px 22px 0;
  }

  .howto-guide .guide-header nav {
    width:100%;
  }

  .howto-guide .guide-body {
    padding:24px 22px;
  }

  .howto-guide .guide-step-title {
    font-size:23px;
  }

}

@media(max-width:400px) {
  .howto-guide .guide-header nav button {
    font-size:10px;
    padding:10px;
  }

  .howto-guide .guide-lead {
    font-size:24px;
  }

  .howto-guide .guide-figure {
    padding:16px;
  }

  .howto-guide .guide-token {
    font-size:11px;
  }

  .howto-guide .guide-base {
    font-size:9px;
  }

  .howto-guide .guide-base span {
    font-size:14px;
  }

  .howto-guide .guide-article h2 {
    font-size:22px;
  }

}

.howto-screen {
  padding:0;
  overflow:auto;
  background:#101d18;
  color:#eee8d4;
  text-transform:none;
}

.howto-screen .submenu-header {
  position:sticky;
  top:0;
  z-index:2;
  background:#101d18;
  border-bottom:1px solid #54634d;
  padding:16px 30px;
  min-height:72px;
}

.howto-screen .submenu-header h1 {
  font-family:var(--font-heading);
  font-size:20px;
  font-weight:400;
}

.howto-screen .submenu-back {
  font-family:var(--font-label);
  font-weight:400;
  background:#1d3025;
  border:1px solid #54634d;
  color:#eee8d4;
  min-height:44px;
}

.howto-screen *, .howto-battle-dialog *, .howto-screen *::before, .howto-screen *::after, .howto-battle-dialog *::before, .howto-battle-dialog *::after {
  text-shadow:none;
  box-shadow:none;
  filter:none;
  backdrop-filter:none;
  background-image:none;
  animation:none;
}

.howto-guide {
  max-width:1440px;
  margin:0 auto;
  text-transform:none;
}

.howto-guide .guide-header {
  padding:0 30px;
}

.howto-guide .guide-header nav {
  padding:14px 0;
}

.howto-guide :is(h2,h3) {
  color:var(--guide-ink);
  letter-spacing:normal;
  text-transform:none;
}

.howto-guide .guide-figure h3 {
  color:var(--guide-paper-ink);
}

.howto-guide :is(button,input,select) {
  text-transform:none;
  letter-spacing:normal;
}

.howto-guide button {
  transition:none;
}

.howto-guide button:focus-visible,.howto-guide select:focus-visible,.howto-guide input:focus-visible,.howto-battle-header button:focus-visible {
  outline:3px solid #eee8d4;
  outline-offset:3px;
}

.howto-guide h2[tabindex]:focus {
  outline:none;
}

.howto-guide .guide-obstacle {
  grid-column:var(--c);
  grid-row:var(--r);
  align-self:center;
  justify-self:center;
  z-index:2;
  background:#74582e;
  color:#fff4d4;
  width:85%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  font:500 16px var(--font-data);
}

.howto-guide .guide-cell.is-in-range {
  border:2px solid #3b6241;
  background:#b1cbaa;
}

.howto-guide .guide-example-picker,.howto-guide .guide-group {
  display:flex;
  gap:10px;
  align-items:start;
  flex-direction:column;
  margin:0 0 24px;
}

.howto-guide .guide-example-picker>span,.howto-guide .guide-group>span {
  font:400 11px/1.6 var(--font-label);
  color:var(--guide-accent);
}

.howto-guide select {
  min-height:44px;
  max-width:100%;
  padding:10px 32px 10px 12px;
  background:#1d3025;
  color:#eee8d4;
  border:1px solid #54634d;
  font:500 16px/1.5 var(--font-copy);
  border-radius:0;
}

.howto-guide .guide-search-controls {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(180px,auto);
  align-items:end;
  gap:22px;
}

.howto-guide .guide-group select {
  width:100%;
}

.howto-guide .guide-stats,.howto-guide .guide-stats dd,.howto-guide .guide-forecast dd {
  margin:0;
}

.howto-guide .guide-stat-line dd {
  font-family:var(--font-data);
  font-variant-numeric:tabular-nums;
  text-align:right;
}

.howto-guide .guide-forecast {
  border-top:1px solid var(--guide-line);
  border-bottom:1px solid var(--guide-line);
  padding:12px 0;
  margin:18px 0;
}

.howto-guide .guide-forecast div+div {
  margin-top:10px;
}

.howto-guide .guide-forecast dt {
  font:400 11px/1.6 var(--font-label);
  color:var(--guide-accent);
}

.howto-guide .guide-forecast dd {
  font-family:var(--font-data);
  font-variant-numeric:tabular-nums;
}

.howto-loading {
  font:500 18px/1.6 var(--font-copy);
  max-width:62ch;
  padding:30px;
}

.howto-battle-dialog {
  padding:0;
  border:1px solid #738366;
  border-radius:0;
  width:min(1200px,calc(100vw - 32px));
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 32px);
  overflow:auto;
  background:#101d18;
  color:#eee8d4;
  box-shadow:none;
}

.howto-battle-dialog::backdrop {
  background:#080f0de8;
  backdrop-filter:none;
}

.howto-battle-header {
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 30px;
  background:#101d18;
  border-bottom:1px solid #54634d;
}

.howto-battle-header h2 {
  font:400 20px/1.5 var(--font-heading);
  color:#eee8d4;
  margin:0;
}

.howto-battle-header p {
  font:500 15px/1.5 var(--font-copy);
  color:#bfcbba;
  margin:7px 0 0;
}

.howto-battle-header button {
  min-height:44px;
  padding:12px 16px;
  border:1px solid #e4b558;
  border-radius:0;
  background:#e4b558;
  color:#203225;
  font:400 11px/1.5 var(--font-label);
  flex-shrink:0;
}

@media(max-width:760px) {
  .howto-guide .guide-header {
    padding:0 22px;
  }

  .howto-guide .guide-search-controls {
    grid-template-columns:1fr;
    gap:0;
  }

  .howto-guide .guide-search {
    margin-bottom:16px;
  }

  .howto-battle-header {
    align-items:start;
    flex-direction:column;
    padding:16px 22px;
    gap:12px;
  }

  .howto-screen .submenu-header {
    padding:12px 22px;
  }

  .howto-screen .submenu-header h1 {
    font-size:17px;
  }

  .howto-battle-dialog {
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    max-height:calc(100dvh - 16px);
  }

}

@media(max-width:400px) {
  .howto-guide .guide-base {
    font-size:12px;
  }

  .howto-guide .guide-token {
    font-size:13px;
  }

}

@media(max-height:500px) {
  .howto-screen .submenu-header,.howto-battle-header {
    position:static;
  }

}