/* 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). */
@font-face { font-family: Alegreya Bris; src: 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.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; }
.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; gap: .7rem; }
.btn { min-height: 3.8rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem 1.65rem; border-radius: 999px; font-size: 1.22rem; font-weight: 900; line-height: 1.05; transition: transform .12s ease, filter .12s ease; }
.hero .btn { padding-inline: 1.3rem; font-size: 1.15rem; }
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn-primary, .btn-light {
  color: var(--game-ink); border: 0; box-shadow: none;
  background: url("/web/ui/button-primary.svg") center / 100% 100% no-repeat;
}
.btn-primary:hover, .btn-light:hover { color: var(--game-ink); filter: brightness(1.04); }
.btn-ghost, .btn-outline, .hero .btn-ghost {
  color: var(--game-ink); border: 0; box-shadow: none;
  background: url("/web/ui/button-secondary.svg") center / 100% 100% no-repeat;
  backdrop-filter: none;
}
.btn-ghost:hover, .btn-outline:hover { color: var(--game-ink); filter: brightness(1.03); }
.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 { 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-brissie { 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, .roster-preview-copy 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-preview-section { background: #f6f9ef; }
.roster-preview-grid { display: grid; grid-template-columns: minmax(18rem,.75fr) minmax(0,1.25fr); align-items: center; gap: clamp(2rem,5vw,4.5rem); }
.roster-preview-copy p:not(.eyebrow) { font-size: 1.23rem; color: var(--ink-soft); max-width: 28rem; margin: 1rem 0 1.5rem; }
.preview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .65rem; }
.preview-creature { min-width: 0; background: #fffef4; border: 2px solid #acdfdc; border-radius: 1.1rem; box-shadow: 0 4px 0 #99caca; padding: .45rem; text-align: center; }
.preview-creature img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: .7rem; background: radial-gradient(circle at 50% 80%, color-mix(in srgb,var(--c) 32%,transparent), transparent 65%), #eaf7f2; }
.preview-creature span { display: block; font-size: .95rem; font-weight: 900; margin: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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; }
  .top nav a:not(:last-child) { display: none; }
  .top nav a:last-child { margin-left: 0; }
  .hero-grid, .roster-preview-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); }
  .hero .cta-row .btn { width: 100%; }
  .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; }
  .preview-grid { gap: .4rem; }
  .preview-creature { padding: .25rem; }
  .preview-creature span { font-size: .76rem; }
  .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; }
}
@media (prefers-reduced-motion: reduce) { .btn, .world-card-image img { 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 { min-height:3rem; cursor:pointer; }
.roster-search > a { align-self:center; font-weight:700; }
.roster-count { color:#476765; }
.roster-empty { padding:2rem 0 4rem; }
.critter { scroll-margin-top:6rem; }