@font-face {
  font-family: "Guide Eras";
  src: local("Eras Demi ITC"), local("ErasITC-Demi");
  font-weight: 600;
}

:root {
  --display: "Guide Eras", "Eras Demi ITC", "Segoe UI", system-ui, sans-serif;
  --paper: #fcfbf7;
  --line: #e3e5dc;
}

.mast { height: 68px; }
.brand { font: 600 24px/1 var(--display); }
.brand small { font-size: 10px; letter-spacing: .08em; margin-top: 5px; }
.layout { grid-template-columns: 244px minmax(0, 1fr); min-height: calc(100vh - 68px); max-width: none; margin: 0; }
.sidebar { background: #f5f5ef; max-height: calc(100vh - 68px); }
.side-top h2, .section h2, .dialog-head h2 { font: 600 24px/1.15 var(--display); }
#navigation { margin-top: 8px; }
.area-row { display: flex; align-items: center; position: relative; border-radius: 8px; margin: 2px 0; }
.area-group + .area-group { margin-top: 13px; }
.area-group h3 { margin: 2px 0 5px; padding: 4px 10px; color: var(--pine); font: 700 17px/1.15 var(--display); }
.area-row:nth-child(even):not(:hover):not(:has([aria-current="page"])) { background: #f0f1e9; }
.area-row:hover, .area-row:has([aria-current="page"]) { background: #e0e9d9; }
.area-row[data-drop]::after { content: ""; position: absolute; inset-inline: 0; height: 2px; background: var(--green); pointer-events: none; }
.area-row[data-drop="before"]::after { top: 0; }
.area-row[data-drop="after"]::after { bottom: 0; }
.area-link { flex: 1; min-width: 0; margin: 0; padding-inline: 10px; }
.area-grip { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 26px; margin-right: 3px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--mute); cursor: grab; }
.area-grip svg { width: 12px; height: 16px; pointer-events: none; }
.area-grip:hover { background: #d5e1d0; color: var(--pine); }
#navigation[data-reordering], #navigation[data-reordering] * { cursor: grabbing; }
.area-icon { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; color: #59695e; }
.area-icon--settlement, .area-icon--forest { color: #31604a; }
.area-icon--cave, .area-icon--site { color: #775b48; }
.area-icon--water { color: #34617b; }
.area-icon--league { color: #805c26; }
.nav-hint { font-weight: 500; }
.source { font-size: 10px; }

main { padding: 37px clamp(20px, 4vw, 54px) 40px; }
.hero { background: none; border: 0; box-shadow: none; padding: 0; margin-bottom: 24px; border-radius: 0; }
.hero::after { content: none; }
.hero h1 { font: 600 clamp(34px, 5vw, 52px)/1.1 var(--display); letter-spacing: -.025em; }
.hero p { font-size: 14px; color: var(--mute); }
.tabs { gap: 16px; padding: 0; margin-bottom: 26px; }
.tabs button { padding: 8px 0 10px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; }
.tabs button[aria-pressed=true] { background: transparent; color: var(--pine); border-color: var(--green); }
.tabs button:hover:not([aria-pressed=true]) { background: transparent; color: var(--green); }
.card { box-shadow: none; }
.section tbody > tr:nth-child(even),
.route-items > li:nth-child(even),
.route-team > li:nth-child(even),
.section .stack > .service:nth-child(even) {
  background-color: #f7f8f2;
}
.overview-list { margin-top: 14px; border-top: 1px solid var(--line); }
.overview-list button {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: 14px; padding: 15px 10px; text-align: left; border: 0;
  border-bottom: 1px solid var(--line); background: transparent; color: var(--ink);
}
.overview-list button:hover { background: #eff2e9; }
.overview-list strong { display: block; font-size: 15px; color: var(--pine); }
.overview-list small { display: block; margin-top: 3px; color: var(--mute); font-size: 13px; }
.overview-count { font-size: 13px; color: var(--green); white-space: nowrap; }

.route-sheet { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .75fr) minmax(0, 1.3fr); gap: clamp(16px, 1.6vw, 30px); align-items: start; }
@media (min-width: 851px) {
  .route-sheet[data-columns="1"] { grid-template-columns: minmax(0, min(100%, 620px)); }
  .route-sheet[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.route-sheet .section { min-width: 0; margin-bottom: 24px; }
.route-side { min-width: 0; }
.route-sheet .section h2 { margin-bottom: 10px; }
.route-sheet .card-head { padding-block: 9px; }
.route-sheet td { padding-block: 3px; }
.special-note { display: block; margin-top: 2px; color: var(--mute); font-size: 11px; }
.route-sheet :is(th, td) { padding-inline: clamp(7px, .75vw, 12px); }
.route-items, .route-team { list-style: none; padding: 0; margin: 0; }
.route-items li { padding: 9px 14px; font-size: 13px; }
.item-line { display: flex; align-items: center; gap: 8px; }
.item-text { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.item-flag-controls { display: flex; align-items: center; justify-content: flex-end; gap: 5px; max-width: 54%; }
.special-access { text-align: right; }
.special-access .item-flag-controls { max-width: none; }
.special-access .item-requirement { min-width: 0; overflow-wrap: anywhere; }
.item-requirement { color: var(--pine); font-size: 11px; font-weight: 750; text-align: right; }
.item-flag { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 27px; padding: 0; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--mute); }
.item-flag svg { width: 15px; height: 15px; }
.item-flag:hover, .item-flag[data-flagged] { background: #e8eee2; border-color: var(--line); color: var(--pine); }
.field-move-checks { min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px 10px; font-size: 13px; }
#item-flag-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
#item-flag-options label { display: flex; align-items: center; gap: 6px; }
#item-flag-options input { accent-color: var(--green); }
.field-move-checks .rift-check { display: flex; align-items: center; gap: 6px; }
.rift-check input { accent-color: var(--green); }
.item-icon { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; image-rendering: pixelated; background: #eef0e6; border-radius: 7px; }
.held-item .item-icon { width: 24px; height: 24px; flex-basis: 24px; }
.route-items li + li, .route-team li + li { border-top: 1px solid var(--line); }
.route-items small, .trainer-identity small { display: block; margin-top: 2px; color: var(--mute); font-size: 12px; }
.route-trainer summary { display: flex; align-items: center; gap: 10px; padding: 7px 13px; cursor: pointer; list-style: none; }
.route-trainer summary::-webkit-details-marker, .shop-card summary::-webkit-details-marker { display: none; }
.shop-card summary { display: flex; align-items: center; gap: 8px; padding: 10px 13px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 750; }
.shop-card summary > span:first-child { flex: 1; }
.shop-card summary small { color: var(--mute); white-space: nowrap; font-weight: 550; }
.shop-card summary:hover, .shop-card[open] summary { background: #f5f6ee; }
.shop-card summary:focus-visible { outline-offset: -3px; }
.shop-card .route-items { border-top: 1px solid var(--line); }
.route-trainer summary:hover, .route-trainer[open] summary { background: #f5f6ee; }
.route-trainer summary:focus-visible { outline-offset: -3px; }
.trainer-portrait { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; flex: 0 0 48px; }
.trainer-identity { flex: 1; font-size: 14px; }
.team-toggle { width: 8px; height: 8px; margin: 0 3px; border: solid var(--green); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
:is(.route-trainer, .shop-card)[open] .team-toggle { transform: rotate(225deg); }
.route-team { border-top: 1px solid var(--line); }
.route-team .team-member { position: relative; padding: 10px 13px 13px; font-size: 13px; container-type: inline-size; }
.team-pokemon { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; text-align: center; }
.team-pokemon-name { line-height: 1.2; overflow-wrap: anywhere; }
.team-level { font-size: 11px; font-weight: 650; color: var(--mute); }
.team-pokemon .held-item { justify-content: center; flex-wrap: wrap; }
.trainer-battler { width: min(100%, 88px); height: 84px; display: grid; place-items: center; border-radius: 8px; background: radial-gradient(ellipse at center, #e7ede0, #f2f4ec 72%); }
.battler-frame { display: block; width: min(100%, calc(var(--battler-height, 84px) * var(--aspect))); aspect-ratio: var(--aspect); overflow: hidden; }
.battler-frame img { display: block; width: var(--sheet-width); max-width: none; height: 100%; image-rendering: pixelated; }
.route-trainer[open] .battler-animated { animation: battler-frames var(--cycle) steps(var(--frames)) infinite; }
@keyframes battler-frames { to { transform: translateX(var(--travel)); } }
@media (prefers-reduced-motion: reduce) { .route-trainer[open] .battler-animated { animation: none; } }
.team-subhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 3px 6px; }
.team-types { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.team-types .battle-icon { --icon-width: 40px; --icon-row: 17.5px; }
.battle-icon { --icon-width: 48px; --icon-row: 21px; display: inline-block; width: var(--icon-width); height: var(--icon-row); flex: 0 0 var(--icon-width); background-repeat: no-repeat; background-size: var(--icon-width) auto; background-position-y: calc(-1 * var(--icon-index) * var(--icon-row)); image-rendering: pixelated; }
.move-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: 2px; }
.move-icons .battle-icon { --icon-width: 36px; --icon-row: 15.75px; }
.team-breakdown { display: grid; grid-template-columns: 96px minmax(0, clamp(145px, 42cqw, 255px)) minmax(0, 1fr); gap: 10px; }
.team-panel { min-width: 0; display: flex; flex-direction: column; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.team-subhead { margin: 0 0 7px; font-weight: 750; }
.team-subhead span, .team-note { color: var(--mute); font-size: 11px; font-weight: 550; }
.team-note { margin: 5px 0 0; }
.team-stats { display: grid; grid-template-rows: repeat(6, minmax(15px, 1fr)); gap: 4px; margin: 0; flex: 1; }
.team-stats div { display: grid; grid-template-columns: 38px 25px minmax(0, 1fr); align-items: center; gap: 4px; }
.team-stats dt { font-size: 10px; color: var(--mute); white-space: nowrap; }
.team-stats dd { font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; margin: 0; }
.stat-track { display: block; height: 6px; background: #e8ebe2; border-radius: 2px; overflow: hidden; }
.stat-track > span { display: block; width: var(--fill); height: 100%; background: hsl(var(--hue) 61% 46%); border-radius: inherit; }
.stat-total { text-align: right; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 5px; }
@container (width < 450px) {
  .team-breakdown { grid-template-columns: 84px minmax(0, 255px); }
  .team-stats-panel { grid-column: 1 / -1; }
}
.team-moves { max-width: 245px; table-layout: fixed; }
.route-sheet .team-moves :is(th, td) { padding: 6px 3px; font-size: 12px; }
.route-sheet .team-moves :is(th, td):not(:first-child) { text-align: center; width: 24%; }
.route-sheet .team-moves th { font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.route-sheet .team-moves td { font-weight: 700; }
.route-sheet .team-moves td:first-child { line-height: 1.25; overflow-wrap: anywhere; }
.route-sheet .team-moves .num { color: var(--pine); }
.tutor-moves { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 10px 14px; list-style: none; }
.tutor-moves li { background: #f3f5ed; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 12px; font-weight: 650; }
@media (851px <= width < 1180px) {
  .route-sheet { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .route-sheet[data-columns="3"] > :first-child { grid-row: span 2; }
}
@media(max-width: 850px) { .route-sheet { grid-template-columns: minmax(0, 1fr); gap: 0; } }

@media(min-width: 851px) {
  .mast { position: sticky; top: 0; z-index: 2; padding-inline: 24px; }
  .layout { grid-template-columns: clamp(244px, 16vw, 320px) minmax(0, 1fr); }
  .sidebar { top: 68px; align-self: start; height: calc(100vh - 68px); height: calc(100dvh - 68px); }
  main { padding-inline: clamp(24px, 2.5vw, 48px); }
}
@media(min-width: 1440px) {
  .overview-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 0; }
  .overview-list button:nth-child(-n+2) { border-top: 1px solid var(--line); }
}

@media(max-width:850px) {
  .layout { grid-template-columns: 210px minmax(0, 1fr); }
  main { padding: 28px 18px 35px; }
}
@media(max-width:620px) {
  .brand { font-size: 20px; }
  .sidebar { max-height: 152px; }
  main { padding: 22px 14px 30px; }
  .tabs { gap: 12px; margin-bottom: 20px; }
  .tabs button { font-size: 12px; }
}