/* Current iOS exploration kit: ivory crystal, aqua rims, teal ink, Alegreya Sans.
   Assets are from brismania-ios origin/codex/wildward-gps-concept (2026-09-23).
   The fonts are served as Latin-subset WOFF2 (29 KB each, pyftsubset from the
   TTFs beside them, which stay as the fallback), preloaded by the page. */
@font-face { font-family: Alegreya Bris; src: url("/web/fonts/AlegreyaSans-Regular.woff2") format("woff2"), url("/web/fonts/AlegreyaSans-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: Alegreya Bris; src: url("/web/fonts/AlegreyaSans-Bold.woff2") format("woff2"), url("/web/fonts/AlegreyaSans-Bold.ttf") format("truetype"); font-style: normal; font-weight: 700 900; font-display: swap; }
:root, :root[data-theme="day"] {
  --bg: #e8f5f1; --bg-2: #d6ece8; --surface: #fffef3; --surface-2: #edf8f4;
  --ink: #073b4e; --ink-soft: #335e6d; --muted: #527684; --accent: #087d90;
  --accent-ink: #fff; --link: #096b80; --rule: #b6dbdc; --shadow: 0 6px 0 #8bc3c5;
  --game-aqua: #52d7d9; --game-rim: #70cbcf; --game-cream: #fffef3; --game-ink: #073b4e;
  color-scheme: light;
}
:root[data-theme="golden"] { --bg: #f6eee0; --bg-2: #f0e5d2; --surface: #fffdf1; --surface-2: #f9f3e3; --ink: #073b4e; --ink-soft: #335e6d; --muted: #527684; --accent: #087d90; --accent-ink: #fff; --link: #096b80; --rule: #d9d7be; --shadow: 0 6px 0 #d1c6aa; color-scheme: light; }
:root[data-theme="night"] { --bg: #dcecef; --bg-2: #c8e1e6; --surface: #fffef3; --surface-2: #eaf7f6; --ink: #073b4e; --ink-soft: #335e6d; --muted: #527684; --accent: #087d90; --accent-ink: #fff; --link: #096b80; --rule: #a6ced2; --shadow: 0 6px 0 #8bbcc2; color-scheme: light; }
body { font: 1.15rem/1.45 "Alegreya Bris", sans-serif; color: var(--game-ink); }
h1, h2, h3 { font-family: "Alegreya Bris", sans-serif; font-weight: 900; letter-spacing: -.015em; }
.wrap { max-width: 76rem; }
.top {
  max-width: none; margin: 0; padding: .7rem max(1.25rem, calc((100vw - 1200px) / 2));
  background: #fffdf1; border-bottom: 3px solid #a5dcda;
  box-shadow: 0 4px 0 rgba(36, 132, 145, .1); position: relative; z-index: 5;
}
.top .brand { color: var(--game-ink); font-size: 1.55rem; min-width: 0; }
.top .brand span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top nav { flex: none; }
.top .brand img { width: 45px; height: 45px; border: 2px solid #d7f4e8; border-radius: 14px; box-shadow: 0 3px 0 #93c9cb; }
.top nav { gap: .25rem; }
.top nav a, .home-page .top nav a { color: var(--game-ink); font-size: 1.05rem; padding: .35rem .8rem; }
.top nav a:hover, .home-page .top nav a:hover { background: #d6f4ef; }
.top nav a[aria-current="page"] { background: #c6eeea; box-shadow: inset 0 -2px #83c9c7; }
.top nav a:last-child { background: #e2f7ef; border: 1px solid #97d0ca; }
.home-page .top .brand { color: var(--game-ink); }

.hero {
  display: block; margin: 0; min-height: 0; padding: clamp(3rem, 6vw, 5rem) 0 0; overflow: hidden;
  background:
    radial-gradient(circle at 83% 45%, rgba(149,224,223,.52), transparent 39%),
    linear-gradient(115deg, #fffef3 0%, #f2f9f2 49%, #d8f0ed 100%);
  color: var(--game-ink);
}
:root[data-theme="golden"] .hero { background: radial-gradient(circle at 83% 45%, rgba(245,218,164,.5), transparent 39%), linear-gradient(115deg, #fffdf2 0%, #f7f5e6 49%, #e8efe4 100%); }
:root[data-theme="night"] .hero { background: radial-gradient(circle at 83% 45%, rgba(139,200,211,.5), transparent 39%), linear-gradient(115deg, #f8fbf4 0%, #eaf5f3 49%, #d3e5e9 100%); }
.hero::before { content: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.hero-copy { padding: 0; margin: 0; max-width: 35rem; text-align: left; }
.hero-overline { display: flex; align-items: center; gap: .5rem; font-size: .94rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: #146a79; margin: 0 0 1rem; }
.hero-overline img { width: 1.5rem; height: 1.5rem; object-fit: contain; }
.hero-logo { margin: 0 0 .3rem; }
.wordmark { width: min(23rem, 88vw); margin: 0; filter: drop-shadow(0 4px 0 rgba(8,100,117,.12)); }
.hero h1 { color: var(--game-ink); font-size: clamp(3.2rem, 5.3vw, 5.7rem); line-height: .96; letter-spacing: -.04em; margin: 0 0 1.25rem; }
.hero-lede { color: #365d68; font-size: clamp(1.24rem, 1.6vw, 1.43rem); line-height: 1.42; max-width: 31rem; margin: 0 0 2rem; }
.cta-row { justify-content: flex-start; align-items: center; gap: .75rem; }
/* The game's crystal buttons. Both faces are drawn on one 340x60 canvas
   (face 2-54, extrusion to 58) and applied as a 9-slice border image: the
   56-unit caps keep their shape and only the straight middle stretches, so
   every button has the same height, the same rim and the same label line
   whatever its width. The label sits on the face's centre line, 2 units
   above the canvas centre, which is what the bottom padding is for. */
.btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 3.75rem; min-height: 0; min-width: 8rem; margin: 0; padding: 0 1.75rem .25rem;
  border: 0 solid transparent; border-radius: 999px; background: none; box-shadow: none;
  border-image: url("/web/ui/button-primary.svg") 0 56 fill / 0 3.5rem / 0 stretch;
  color: var(--game-ink); font: 900 1.15rem/1 "Alegreya Bris", sans-serif; letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: transform .12s ease, filter .12s ease;
}
.btn-label { display: block; text-box: trim-both cap alphabetic; }
.btn-arrow, .go-arrow {
  display: inline-block; flex: none; width: .72em; height: .72em; background-color: currentColor;
  -webkit-mask: url("/web/ui/arrow-ne.svg") center / contain no-repeat; mask: url("/web/ui/arrow-ne.svg") center / contain no-repeat;
}
.go-arrow { margin-left: .2em; vertical-align: -.02em; }
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-light, .btn-primary:hover, .btn-light:hover { color: var(--game-ink); }
.btn-primary:hover, .btn-light:hover { filter: brightness(1.04); }
.btn-ghost, .btn-outline { border-image-source: url("/web/ui/button-secondary.svg"); backdrop-filter: none; -webkit-backdrop-filter: none; }
.btn-ghost:hover, .btn-outline:hover { color: var(--game-ink); filter: brightness(1.03); }
:root[data-theme] .btn-ghost { background: none; }
.cta-row .btn { min-width: 14rem; }
.hero-note { color: #54747c; margin: 1.4rem 0 0; font-size: .98rem; font-weight: 700; }
.note-line { display: inline-block; width: 1.4rem; height: 2px; background: #3caeb5; vertical-align: middle; margin-right: .35rem; }
.hero-visual { margin: 0; min-height: 36rem; display: flex; align-items: center; justify-content: center; position: relative; padding: .5rem 1rem 2.5rem; }
.game-phone {
  position: relative; overflow: hidden; flex: none; width: min(45%, 15rem); background: #fff;
  border: 9px solid #fffef1; border-radius: 2.35rem;
  box-shadow: 0 0 0 3px #8dd3d6, 0 10px 0 #6aabad, 0 22px 35px rgba(5,70,86,.2);
}
.game-phone img { display: block; width: 100%; height: auto; }
.game-phone-map { transform: rotate(-7deg) translate(1.6rem, 1.6rem); z-index: 1; }
.game-phone-treat { transform: rotate(6deg) translate(-1.6rem, -1.1rem); z-index: 2; }
.game-screen-caption { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); white-space: nowrap; font-size: .9rem; font-weight: 800; color: #306a76; }
.hero-stats { position: relative; display: flex; gap: clamp(1.5rem, 6vw, 5rem); padding-top: 1.15rem; padding-bottom: 1.15rem; border-top: 2px solid rgba(7,86,102,.16); }
.hero-stats div { display: flex; align-items: baseline; gap: .5rem; }
.hero-stats strong { font-size: 2rem; line-height: 1; color: #057b91; }
.hero-stats span { font-size: 1.05rem; font-weight: 800; }

.section { padding: clamp(4rem, 7vw, 6.5rem) 0; }
.section .wrap { max-width: 76rem; }
.eyebrow { color: #0a8292; font-size: .85rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .6rem; }
.section-heading { display: grid; grid-template-columns: 1fr minmax(15rem, 25rem); align-items: end; gap: 2rem; margin-bottom: 2rem; }
.section-heading h2, .final-inner h2 { font-size: clamp(2.65rem, 4vw, 4.45rem); line-height: 1; letter-spacing: -.03em; max-width: 45rem; margin: 0; }
.section-heading > p { font-size: 1.2rem; color: var(--ink-soft); margin: 0; }
.story-section { background: #f7f9ef; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; counter-reset: step; margin: 2rem 0 0; padding: 0; }
.steps li { counter-increment: step; min-height: 15rem; border: 2px solid #afe1df; border-radius: 1.5rem; background: linear-gradient(#fffef7, #f4faf2); box-shadow: 0 6px 0 #9dcaca; padding: 1.5rem; }
.steps li::before { content: "0" counter(step); display: block; background: none; color: #0c8fa1; width: auto; height: auto; border-radius: 0; margin: 0 0 .7rem; font-size: 1.1rem; line-height: 1; }
.step-icon { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 2px solid #b1e2df; border-radius: .9rem; background: #d8faf3; color: #128397; font-size: 1.75rem; line-height: 1; margin-bottom: 1rem; }
.steps h3 { font-size: 1.55rem; margin: 0 0 .3rem; }
.steps p { font-size: 1.1rem; color: var(--ink-soft); }
.world-section { background: #dff0ec; }
.world-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.1rem; }
.world-card { overflow: hidden; background: #fffef3; border: 3px solid #9edbd9; border-radius: 1.75rem; box-shadow: 0 7px 0 #7abbbd; }
.world-card-image { height: 14rem; display: grid; place-items: center; background: radial-gradient(circle at 50% 70%, #d2f7ec, #f5f9e8 70%); border-bottom: 2px solid #c8e8e3; }
.world-card-storm .world-card-image { background: radial-gradient(circle at 50% 70%, #cff1fa, #f4f9eb 70%); }
.world-card-fire .world-card-image { background: radial-gradient(circle at 50% 70%, #f5f0d7, #f7faf0 70%); }
.world-card-image img { display: block; width: min(80%, 12.5rem); height: 100%; object-fit: contain; transition: transform .2s ease; }
.world-card:hover .world-card-image img { transform: translateY(-4px); }
.world-card-copy { padding: 1.25rem 1.4rem 1.55rem; }
.card-index { display: inline-block; border-radius: 999px; padding: .13rem .7rem; background: #d9f5ed; color: #0a7587; font-size: .8rem; font-weight: 900; }
.world-card h3 { font-size: 1.7rem; margin: .7rem 0 .4rem; }
.world-card p { color: var(--ink-soft); margin: 0; }
.world-card a { display: inline-block; font-weight: 900; margin-top: .8rem; }

.roster-section { background: #f6f9ef; }
.roster-section .section-heading { margin-bottom: 1.75rem; }
.roster-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr)); gap: .5rem; }
.roster-wall a { display: block; height: 100%; padding: .3rem .3rem .4rem; border: 2px solid #b5dedc; border-radius: 1rem; background: #fffef4; box-shadow: 0 3px 0 #a4cfd0; color: var(--game-ink); text-align: center; text-decoration: none; transition: transform .12s ease; }
.roster-wall a:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 55%, #b5dedc); }
.roster-wall img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: .7rem; background: radial-gradient(circle at 50% 78%, color-mix(in srgb, var(--c) 35%, transparent), transparent 66%), #e9f5f1; }
.roster-wall span { display: block; margin-top: .2rem; font-size: .8rem; font-weight: 900; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster-wall-cta { margin: 2rem 0 0; text-align: center; }
.final-section { background: linear-gradient(135deg,#124855,#21687a); color: #fffef4; text-align: center; }
.final-inner h2 { margin: 0 auto .7rem; }
.final-inner > p:not(.eyebrow) { color: #dcefeb; font-size: 1.25rem; margin-bottom: 1.5rem; }
.final-inner .eyebrow { color: #b3f2e6; }
.final-spark { color: #c6f6ed; display: block; font-size: 2.3rem; }
.final-inner .cta-row { justify-content: center; }

.page { padding-top: 2rem; }
.page h1 { font-size: clamp(2.5rem,5vw,4.2rem); }
.page h2 { font-size: 1.85rem; }
.page h3 { font-size: 1.4rem; }
.page .lede { font-size: 1.3rem; }
.page-wide { max-width: 76rem; }
.crumbs { font-size: 1rem; }
.callout { border: 2px solid #a8d8d7; border-radius: 1.15rem; background: #fffef4; box-shadow: 0 4px 0 #a2caca; }
.callout-gold { border-color: #edcb84; box-shadow: 0 4px 0 #d7b876; }
.cards { gap: 1rem; }
.card { background: #fffef4; border: 2px solid #a8d8d7; box-shadow: 0 5px 0 #9ecacc; }
.card:hover { transform: translateY(-2px); }
.page .roster-intro { position: relative; overflow: hidden; padding: clamp(2rem,5vw,4rem); border: 3px solid #a7dedd; border-radius: 2rem; box-shadow: 0 7px 0 #8cc7c8; background: linear-gradient(#fffef4,#f2faf4); }
.page .roster-intro h1 { font-size: clamp(2.8rem,5vw,4.8rem); max-width: 42rem; line-height: 1; margin: 0 0 .7rem; }
.page .roster-intro .lede { max-width: 39rem; margin: 0; color: var(--ink-soft); }
.roster-intro-mark { position: absolute; right: 1%; bottom: -5rem; color: rgba(34,172,183,.12); font-size: 19rem; line-height: 1; }
.el-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.7rem 0 1.4rem; }
.el-nav a.chip { padding: .3rem .7rem; border: 1px solid #a2d9d9; background: #fffef4; text-decoration: none; font-size: .95rem; box-shadow: 0 3px 0 #b5d8d3; }
.roster-group { margin-top: 3rem; }
.roster-group h2 { font-size: 2rem; }
.roster-group h2 .swatch { width: 1.05rem; height: 1.05rem; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb,var(--c) 25%,transparent); }
.page .roster { grid-template-columns: repeat(auto-fill,minmax(11.5rem,1fr)); gap: .8rem; }
.critter { padding: .45rem .45rem .9rem; background: #fffef4; border: 2px solid #b5dedc; box-shadow: 0 4px 0 #a4cfd0; border-radius: 1.25rem; }
.critter-art { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: .9rem; background: radial-gradient(circle at 50% 78%, color-mix(in srgb,var(--c) 35%,transparent), transparent 65%), #e9f5f1; }
.critter-art img { width: 97%; height: 97%; object-fit: contain; filter: drop-shadow(0 6px 4px rgba(13,78,87,.12)); }
.critter h3 { font-size: 1.19rem; margin: .6rem .3rem .2rem; }
.critter .tags { margin: 0 .3rem; }
.critter .chip { font-size: .85rem; }
.badge { background: #ffcf68; color: #073b4e; }
.table-wrap { border: 2px solid #b0d9d9; }
thead th { background: #e3f3ed; }
.foot { background: #123f4d; border-top: 4px solid #67c6c7; color: #c7e8e4; }
.foot h2 { color: #fff4d6; }
.foot a { color: #e6f6ed; }
.foot .fine { border-top-color: #3e7780; }
.lost-creature { width: 9rem; height: 9rem; object-fit: contain; opacity: .75; margin-bottom: .7rem; }

@media (max-width: 54rem) {
  .hero-grid { gap: 1rem; }
  .hero h1 { font-size: clamp(2.8rem,6vw,4.4rem); }
  .hero-visual { min-height: 29rem; }
  .game-phone { border-width: 6px; border-radius: 1.7rem; }
  .world-card-copy { padding: 1rem; }
}
@media (max-width: 44rem) {
  .top { flex-direction: row; align-items: center; gap: .5rem; }
  .top nav { margin-left: auto; flex-wrap: nowrap; gap: .15rem; }
  .top nav a, .home-page .top nav a { font-size: .98rem; padding: .3rem .6rem; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 37rem; }
  .hero-visual { min-height: 27rem; }
  .game-phone { width: min(40%,13rem); }
  .hero-stats { justify-content: space-between; gap: .8rem; }
  .hero-stats div { flex-direction: column; gap: .1rem; }
  .hero-stats span { font-size: .83rem; }
  .section-heading { grid-template-columns: 1fr; gap: .5rem; }
  .steps, .world-grid { grid-template-columns: 1fr; }
  .steps li { min-height: 0; }
  .world-card { display: grid; grid-template-columns: 42% 1fr; }
  .world-card-image { height: 100%; min-height: 13rem; border-bottom: 0; border-right: 2px solid #c8e8e3; }
}
@media (max-width: 34rem) {
  .top .brand { font-size: 1.25rem; }
  .top .brand img { width: 37px; height: 37px; }
  .hero { padding-top: 2.4rem; }
  .hero h1 { font-size: clamp(2.8rem,11vw,3.8rem); }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn, .hero .cta-row .btn { width: 100%; min-width: 0; }
  .hero-visual { min-height: 22rem; padding-bottom: 1.4rem; }
  .game-phone { width: 44%; }
  .game-screen-caption { font-size: .75rem; }
  .hero-stats strong { font-size: 1.5rem; }
  .hero-stats span { font-size: .72rem; }
  .world-card { grid-template-columns: 1fr; }
  .world-card-image { height: 12rem; min-height: 0; border-right: 0; border-bottom: 2px solid #c8e8e3; }
  .roster-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3rem; }
  .roster-wall a { padding: .15rem; border-width: 1.5px; border-radius: .7rem; box-shadow: 0 2px 0 #a4cfd0; }
  .roster-wall img { border-radius: .55rem; }
  .roster-wall span { display: none; }
  .page .roster { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
  .critter h3 { font-size: 1rem; }
  .critter .chip { font-size: .7rem; }
  .page .roster-intro { padding: 1.8rem 1.2rem; }
  form.roster-search button { width: 100%; margin-bottom: 0; }
}
/* The narrowest phones keep all three links and let the mark stand for the name. */
@media (max-width: 23rem) {
  .top .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .btn, .world-card-image img, .roster-wall a { transition: none; } }
/* A name-first field guide, including the complete downloadable roster. */
.roster-search { display:flex; align-items:end; flex-wrap:wrap; gap:1rem; margin:2rem 0 1rem; padding:1.25rem; border:1px solid var(--rule); border-radius:1.25rem; background:rgba(255,255,255,.72); }
.roster-search > div { flex:1 1 12rem; }
.roster-search label { display:block; font-weight:700; margin-bottom:.4rem; }
.roster-search input,.roster-search select { width:100%; min-height:3rem; padding:.65rem .85rem; font:inherit; color:inherit; background:#fffdf6; border:1px solid #abc9c5; border-radius:.7rem; }
.roster-search button { cursor:pointer; margin-bottom:-.5rem; } /* the face centre on the fields' centre line */
.roster-search > a { align-self:center; font-weight:700; }
.roster-count { color:#476765; }
.roster-empty { padding:2rem 0 4rem; }
.critter { scroll-margin-top:6rem; }