:root {
  color-scheme: light;
  --ink: #123733;
  --muted: #54706d;
  --paper: #f8fbf4;
  --card: rgba(255,255,255,.92);
  --soft: #e9f5e3;
  --line: #cfe1d7;
  --teal: #0f6f68;
  --teal-dark: #07514d;
  --mint: #78c79a;
  --gold: #f4bd55;
  --berry: #a13f61;
  --shadow: 0 14px 38px rgba(13,66,58,.12);
  --radius: 22px;
  font-family: Inter, ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eefcf6;
  --muted: #b7d0ca;
  --paper: #0a2527;
  --card: rgba(15,52,52,.94);
  --soft: #123f3c;
  --line: #32625d;
  --teal: #6bd1bc;
  --teal-dark: #a6ead8;
  --gold: #ffd17b;
  --berry: #f19ab6;
  --shadow: 0 14px 38px rgba(0,0,0,.28);
}

:root[data-theme="contrast"] {
  color-scheme: dark;
  --ink: #fff;
  --muted: #fff;
  --paper: #000;
  --card: #000;
  --soft: #111;
  --line: #fff;
  --teal: #54ffd1;
  --teal-dark: #54ffd1;
  --gold: #ffeb3b;
  --berry: #ff79aa;
  --shadow: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); scroll-behavior: smooth; }
html[data-large-text="true"] { font-size: 112.5%; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 85% 0, rgba(120,199,154,.22), transparent 30rem), var(--paper); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: var(--teal-dark); text-underline-offset: .18em; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 9999; left: 1rem; top: -5rem; background: var(--ink); color: var(--paper); padding: .7rem 1rem; border-radius: 12px; }
.skip-link:focus { top: 1rem; }
.aurora { position: fixed; inset: 0 0 auto; height: 6px; z-index: 100; background: linear-gradient(90deg,#67d6ae,#9d86dc,#f3bc62,#67d6ae); background-size: 200% 100%; animation: aurora 12s linear infinite; }
@keyframes aurora { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
html[data-reduced-motion="true"] *,html[data-reduced-motion="true"] *::before,html[data-reduced-motion="true"] *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }

.site-header { min-height: 82px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem clamp(1rem,4vw,3.2rem); border-bottom: 1px solid var(--line); background: color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 40; }
.brand { display: flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; }
.brand img { width: 48px; filter: drop-shadow(0 5px 8px rgba(16,89,76,.18)); }
.brand strong { display: block; font-size: clamp(1rem,2.4vw,1.25rem); letter-spacing: -.025em; }
.brand small { display: block; margin-top: .15rem; color: var(--muted); font-weight: 600; font-size: .74rem; }
.header-tools { display: flex; gap: .65rem; align-items: center; }
.status-pill, .points-pill { border: 1px solid var(--line); background: var(--card); border-radius: 999px; display: inline-flex; align-items: center; box-shadow: 0 4px 14px rgba(13,66,58,.06); }
.status-pill { padding: .45rem .75rem; gap: .4rem; color: var(--muted); font-size: .78rem; font-weight: 700; }
.status-dot { width: .55rem; height: .55rem; border-radius: 99px; background: #e39b3d; }
.status-pill.online .status-dot { background: #2bac70; }
.status-pill.offline .status-dot { background: #e26e68; }
.points-pill { min-width: 108px; padding: .42rem .85rem; flex-direction: column; align-items: flex-end; line-height: 1.02; color:var(--ink); cursor:pointer; }
.points-pill:hover { border-color:var(--teal); box-shadow:0 7px 20px rgba(13,66,58,.13); }
.points-pill span { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.points-pill strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--teal-dark); }

.tab-bar { display: flex; gap: .35rem; justify-content: center; padding: .7rem 1rem; position: sticky; top: 82px; z-index: 35; background: color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab-bar button { min-height: 42px; border: 0; background: transparent; border-radius: 999px; padding: .55rem .9rem; white-space: nowrap; cursor: pointer; color: var(--muted); font-weight: 760; }
.tab-bar button:hover { background: var(--soft); color: var(--ink); }
.tab-bar button[aria-current="page"] { background: var(--teal); color: var(--paper); box-shadow: 0 6px 16px rgba(15,111,104,.2); }

main { width: min(1180px,calc(100% - 2rem)); margin: 0 auto; padding: clamp(1.25rem,4vw,3.5rem) 0 6rem; }
.guest-connect-banner { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1rem 1.5rem; margin:0 0 1.25rem; padding:1rem 1.15rem; border:1px solid color-mix(in srgb,var(--gold) 62%,var(--line)); border-left:6px solid var(--gold); border-radius:18px; background:linear-gradient(120deg,color-mix(in srgb,var(--gold) 13%,var(--card)),var(--card)); box-shadow:0 8px 24px rgba(13,66,58,.07); }
.guest-banner-copy { min-width:0; }
.guest-banner-copy .eyebrow { margin-bottom:.2rem; }
.guest-connect-banner h2 { margin:0 0 .2rem; font-size:1.05rem; letter-spacing:-.02em; }
.guest-connect-banner p:not(.eyebrow) { margin:0; color:var(--muted); line-height:1.45; font-size:.86rem; }
.guest-banner-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:.55rem; }
.guest-banner-actions .button { white-space:nowrap; }
.guest-banner-actions .button.google b { font-weight:800; }
.view { animation: view-in .22s ease-out; }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }
.hero { min-height: 310px; border-radius: 34px; padding: clamp(1.5rem,5vw,4rem); display: grid; grid-template-columns: minmax(0,1.3fr) minmax(240px,.7fr); gap: 2rem; align-items: center; color: #f6fff9; background: linear-gradient(135deg,#0c655f,#198475 58%,#49946c); box-shadow: var(--shadow); overflow: hidden; position: relative; }
.hero::before { content:""; position:absolute; width:360px; height:360px; border-radius:50%; right:-90px; top:-210px; border:52px solid rgba(255,255,255,.08); }
.hero h1, .page-intro h1 { margin: .2rem 0 .7rem; font-size: clamp(2rem,6vw,4rem); letter-spacing: -.055em; line-height: .98; }
.hero p:not(.eyebrow) { max-width: 650px; color: rgba(255,255,255,.85); font-size: 1.06rem; line-height: 1.55; }
.hero .hero-context { margin:.7rem 0 0; padding:.6rem .75rem; border-left:3px solid rgba(255,255,255,.65); background:rgba(0,0,0,.08); border-radius:0 12px 12px 0; font-size:.88rem; }
.eyebrow { color: var(--teal-dark); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 850; margin: 0 0 .4rem; }
.hero .eyebrow { color: #bfead2; }
.hero-actions, .modal-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.35rem; }
.hero-art { min-height: 210px; position: relative; }
.mountain { position:absolute; bottom:-55px; width:260px; height:230px; transform:rotate(45deg); border-radius:42px; background:rgba(255,255,255,.13); }
.mountain-back { right:80px; bottom:-95px; }
.mountain-front { right:-25px; background:rgba(255,255,255,.19); }
.sprout { position:absolute; left:52%; bottom:32px; width:10px; height:86px; background:#f0d083; border-radius:99px; transform:rotate(-3deg); }
.sprout i,.sprout b { position:absolute; width:58px; height:32px; border-radius:100% 0 100% 0; background:#9ee5a8; }
.sprout i { left:-52px; top:12px; transform:rotate(18deg); }
.sprout b { left:6px; top:-8px; transform:scaleX(-1) rotate(18deg); }
.button { appearance:none; border:1px solid transparent; border-radius:14px; min-height:46px; padding:.7rem 1.05rem; font-weight:800; cursor:pointer; display:inline-flex; justify-content:center; align-items:center; gap:.5rem; text-decoration:none; transition:transform .15s ease,box-shadow .15s ease,background .15s ease; }
.button:hover:not(:disabled) { transform:translateY(-1px); }
.button:disabled { opacity:.5; cursor:not-allowed; }
.button.primary { color:#fff; background:var(--teal); box-shadow:0 8px 18px rgba(15,111,104,.2); }
.hero .button.primary { color:var(--teal-dark); background:#fff; }
.button.secondary { background:var(--soft); border-color:var(--line); color:var(--teal-dark); }
.hero .button.secondary { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); color:#fff; }
.button.quiet { background:transparent; border-color:var(--line); }
.button.compact { min-height:38px; padding:.5rem .75rem; font-size:.85rem; }
.button.google { background:#fff; color:#263238; border-color:#cfd8dc; box-shadow:0 6px 16px rgba(0,0,0,.08); }
.button.google span { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; color:#4285f4; font-size:1.05rem; }
.button.danger { color:#8f264b; border-color:#dba9b8; }

.notice { border:1px solid var(--line); background:var(--soft); color:var(--ink); border-radius:16px; padding:.8rem 1rem; margin:1rem 0; line-height:1.45; }
.notice.error { border-color:#e0a7a5; background:color-mix(in srgb,#f7d7d5 70%,var(--card)); }
.library-goal-preview { margin:1.2rem 0; }
.library-goal-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1rem; padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(115deg,color-mix(in srgb,var(--mint) 16%,var(--card)),var(--card)); box-shadow:0 8px 24px rgba(13,66,58,.06); }
.library-goal-card h2 { margin:.1rem 0 .35rem; font-size:1.25rem; }
.library-goal-card p { margin:.2rem 0; color:var(--muted); line-height:1.45; }
.library-goal-progress { display:grid; grid-template-columns:minmax(120px,1fr) auto; align-items:center; gap:.7rem; margin-top:.7rem; font-size:.76rem; font-weight:800; color:var(--muted); }
.library-goal-card.completed { background:linear-gradient(115deg,color-mix(in srgb,var(--gold) 20%,var(--card)),var(--card)); }
.library-goal-card .goal-complete-mark { color:var(--teal-dark); font-weight:900; }
.trail-planner { display:grid; grid-template-columns:minmax(250px,.72fr) minmax(0,1.58fr); gap:1.2rem 1.5rem; align-items:stretch; margin:1.25rem 0 1.8rem; padding:clamp(1rem,2.4vw,1.5rem); border:1px solid color-mix(in srgb,var(--teal) 42%,var(--line)); border-radius:28px; background:linear-gradient(140deg,color-mix(in srgb,var(--teal) 14%,var(--card)),color-mix(in srgb,var(--gold) 9%,var(--card))); box-shadow:var(--shadow); overflow:hidden; }
.trail-planner h2 { margin:.1rem 0 .5rem; font-size:clamp(1.45rem,3vw,2.15rem); letter-spacing:-.04em; }
.trail-planner p { margin:.2rem 0; color:var(--muted); line-height:1.5; }
.trail-planner-copy { display:flex; flex-direction:column; min-width:0; }
.trail-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; margin:1rem 0 .8rem; }
.trail-summary span { min-width:0; padding:.65rem .7rem; border:1px solid color-mix(in srgb,var(--teal) 22%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--card) 86%,transparent); }
.trail-summary small,.trail-summary strong { display:block; overflow:hidden; text-overflow:ellipsis; }
.trail-summary small { min-height:1.7em; color:var(--muted); font-size:.64rem; font-weight:800; line-height:1.1; text-transform:uppercase; letter-spacing:.06em; }
.trail-summary strong { margin-top:.2rem; color:var(--teal-dark); font-size:.9rem; white-space:nowrap; }
.trail-leg-tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; padding-top:.5rem; }
.trail-leg-tab { min-height:36px; padding:.35rem .58rem; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--muted); font-size:.7rem; font-weight:850; cursor:pointer; }
.trail-leg-tab[aria-pressed="true"] { border-color:var(--teal); background:var(--teal); color:#fff; }
.trail-leg-tab:disabled { opacity:.58; cursor:not-allowed; }
.trail-planner-route { display:grid; grid-template-rows:minmax(0,1fr) auto auto; gap:.65rem; min-width:0; }
.trail-map { position:relative; min-height:276px; border:1px solid rgba(255,255,255,.5); border-radius:22px; overflow:hidden; background:linear-gradient(180deg,#9fd9dc 0 43%,#dfece5 44% 66%,#8ead91 67% 100%); box-shadow:inset 0 0 0 1px rgba(10,70,69,.1),0 10px 25px rgba(13,66,58,.12); isolation:isolate; }
.trail-map::before { content:""; position:absolute; z-index:-1; inset:28% -4% 26%; background:linear-gradient(145deg,transparent 22%,rgba(255,255,255,.93) 23% 35%,transparent 36%) 0 0/170px 100%,linear-gradient(35deg,transparent 29%,rgba(88,125,120,.5) 30% 45%,transparent 46%) 50px 0/210px 100%; opacity:.88; }
.trail-map::after { content:""; position:absolute; z-index:0; left:0; right:0; top:54%; height:6px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.95) 0 11px,transparent 11px 20px); filter:drop-shadow(0 2px 0 rgba(31,92,77,.22)); opacity:.9; }
.trail-map-landscape { position:absolute; z-index:0; inset:0; pointer-events:none; }
.trail-map-landscape::before { content:""; position:absolute; width:72px; height:72px; right:8%; top:8%; border-radius:50%; background:rgba(255,242,174,.86); box-shadow:0 0 0 13px rgba(255,255,255,.17); }
.trail-map-landscape i { position:absolute; bottom:11%; width:26px; height:62px; background:#2d6d60; clip-path:polygon(50% 0,68% 26%,58% 26%,79% 54%,64% 54%,89% 88%,59% 88%,59% 100%,41% 100%,41% 88%,11% 88%,36% 54%,21% 54%,42% 26%,32% 26%); opacity:.48; }
.trail-map-landscape i:nth-child(1) { left:5%; transform:scale(.78); }
.trail-map-landscape i:nth-child(2) { left:46%; bottom:8%; transform:scale(1.08); }
.trail-map-landscape i:nth-child(3) { right:4%; bottom:13%; transform:scale(.66); }
.trail-stops { position:relative; z-index:2; display:flex; align-items:center; gap:.7rem; min-height:276px; margin:0; padding:2.35rem 1.15rem; overflow-x:auto; overflow-y:hidden; list-style:none; scroll-snap-type:x proximity; scrollbar-color:rgba(15,111,104,.55) transparent; }
.trail-stop { position:relative; flex:0 0 132px; min-width:0; scroll-snap-align:center; }
.trail-stop:nth-child(3n+1) { transform:translateY(30px); }
.trail-stop:nth-child(3n+2) { transform:translateY(-28px); }
.trail-stop:nth-child(3n) { transform:translateY(8px); }
.trail-node { width:100%; min-height:142px; padding:.55rem; border:2px solid rgba(255,255,255,.9); border-radius:20px; background:color-mix(in srgb,var(--card) 94%,transparent); color:var(--ink); box-shadow:0 8px 20px rgba(13,66,58,.17); cursor:pointer; text-align:left; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; }
.trail-node:hover:not(:disabled) { transform:translateY(-3px); box-shadow:0 13px 25px rgba(13,66,58,.22); }
.trail-node:disabled { cursor:not-allowed; }
.trail-node-top { display:flex; align-items:center; justify-content:space-between; gap:.35rem; }
.trail-node-number { width:1.7rem; height:1.7rem; display:grid; place-items:center; border-radius:50%; background:var(--line); color:var(--ink); font-size:.7rem; font-weight:950; font-variant-numeric:tabular-nums; }
.trail-node-state { color:var(--muted); font-size:.62rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.trail-node strong,.trail-node span { display:block; }
.trail-node strong { margin:.55rem 0 .28rem; font-size:.82rem; line-height:1.13; }
.trail-node-detail { color:var(--muted); font-size:.66rem; font-weight:750; line-height:1.3; }
.trail-node-score { margin-top:.38rem; color:var(--teal-dark); font-size:.66rem; font-weight:900; }
.trail-stop[data-status="completed"] .trail-node { border-color:color-mix(in srgb,var(--teal) 72%,#fff); background:color-mix(in srgb,var(--mint) 28%,var(--card)); }
.trail-stop[data-status="completed"] .trail-node-number { background:var(--teal-dark); color:var(--paper); }
.trail-stop[data-status="current"] .trail-node { border-color:var(--gold); box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 32%,transparent),0 14px 28px rgba(13,66,58,.24); }
.trail-stop[data-status="current"] .trail-node-number { background:var(--gold); color:#3b2c08; }
.trail-stop[data-status="locked"] .trail-node { opacity:.7; filter:saturate(.45); background:color-mix(in srgb,var(--soft) 86%,var(--card)); }
.trail-status { min-height:1.2rem; margin:0 !important; font-size:.8rem; font-weight:800; }
.trail-route-actions { display:flex; flex-wrap:wrap; gap:.55rem; }
.trail-route-actions .button { min-height:42px; }
.game-library { scroll-margin-top:112px; }
.game-library .section-heading p:not(.eyebrow) { max-width:620px; margin:.35rem 0 0; color:var(--muted); font-size:.86rem; line-height:1.45; }
.garden-panel { display:grid; grid-template-columns:minmax(210px,.65fr) minmax(300px,1.35fr); gap:1rem 1.5rem; align-items:center; margin:1.2rem 0; padding:1.15rem 1.25rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:0 8px 24px rgba(13,66,58,.06); overflow:hidden; }
.garden-copy h2 { margin:.1rem 0 .3rem; }
.garden-copy p:not(.eyebrow) { margin:0; color:var(--muted); line-height:1.45; font-size:.88rem; }
.garden-scene { position:relative; min-height:128px; border-radius:18px; overflow:hidden; background:linear-gradient(#bde7e0 0 48%,#dbe8cf 49% 73%,#7c9e72 74% 100%); isolation:isolate; }
.garden-scene::before { content:""; position:absolute; inset:10px 16px auto auto; width:54px; height:54px; border-radius:50%; background:#fff3b0; box-shadow:0 0 0 12px rgba(255,255,255,.2); }
.garden-scene::after { content:""; position:absolute; inset:auto 0 23px; height:25px; background:linear-gradient(150deg,transparent 18%,rgba(255,255,255,.75) 19% 31%,transparent 32%) 0 0/110px 100%; opacity:.65; }
.garden-item { position:absolute; bottom:17px; z-index:2; width:42px; height:62px; opacity:.2; filter:grayscale(1); transform:translateY(8px); transition:opacity .3s ease,filter .3s ease,transform .3s ease; }
.garden-item.unlocked { opacity:1; filter:none; transform:none; }
.garden-item::before,.garden-item::after { content:""; position:absolute; }
.garden-item[data-kind="sprout"] { left:8%; }
.garden-item[data-kind="sprout"]::before { left:19px; bottom:0; width:5px; height:48px; border-radius:9px; background:#426f45; }
.garden-item[data-kind="sprout"]::after { left:3px; bottom:25px; width:36px; height:18px; border-radius:100% 0 100% 0; background:#65aa68; transform:rotate(9deg); }
.garden-item[data-kind="flower"] { left:27%; }
.garden-item[data-kind="flower"]::before { left:19px; bottom:0; width:5px; height:43px; background:#3f7a4e; border-radius:8px; }
.garden-item[data-kind="flower"]::after { left:6px; bottom:34px; width:31px; height:31px; border-radius:50%; background:radial-gradient(circle,#f7c857 0 20%,#d15a7b 21% 42%,transparent 43%),conic-gradient(from 0deg,#f29cbc,#e65f8d,#f5b2c8,#e65f8d,#f29cbc); }
.garden-item[data-kind="bush"] { left:46%; width:62px; }
.garden-item[data-kind="bush"]::before { inset:15px 0 0; border-radius:50% 50% 30% 30%; background:radial-gradient(circle at 25% 35%,#b43155 0 5%,transparent 6%),radial-gradient(circle at 62% 24%,#b43155 0 5%,transparent 6%),radial-gradient(circle at 74% 52%,#b43155 0 5%,transparent 6%),#4b8a58; }
.garden-item[data-kind="fireweed"] { left:67%; height:82px; }
.garden-item[data-kind="fireweed"]::before { left:20px; bottom:0; width:4px; height:72px; background:#3e794a; }
.garden-item[data-kind="fireweed"]::after { left:6px; bottom:28px; width:32px; height:47px; background:radial-gradient(circle,#d55386 0 35%,transparent 38%) 0 0/15px 15px; }
.garden-item[data-kind="star"] { right:6%; bottom:47px; width:48px; height:48px; }
.garden-item[data-kind="star"]::before { inset:0; background:#fff; clip-path:polygon(50% 0,58% 38%,100% 50%,58% 62%,50% 100%,42% 62%,0 50%,42% 38%); filter:drop-shadow(0 0 5px #fff); }
.garden-progress { grid-column:1/-1; display:grid; grid-template-columns:minmax(120px,1fr) auto; gap:.7rem; align-items:center; color:var(--muted); font-size:.76rem; }
.garden-progress .progress-track span { width:0; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin:2.5rem 0 1.1rem; }
.section-heading h2,.page-intro h1 { margin:.12rem 0; }
.search-label,label { font-weight:750; color:var(--ink); }
.search-label { font-size:.78rem; color:var(--muted); }
input,select { width:100%; min-height:44px; margin-top:.3rem; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); padding:.64rem .75rem; }
textarea { width:100%; margin-top:.3rem; resize:vertical; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); padding:.64rem .75rem; font:inherit; }
.search-label input { width:min(310px,70vw); }
.discovery-chips { display:flex; gap:.5rem; overflow-x:auto; padding:.1rem 0 .9rem; scrollbar-width:thin; }
.discovery-chips button { flex:0 0 auto; min-height:38px; padding:.45rem .75rem; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--muted); cursor:pointer; font-weight:800; }
.discovery-chips button:hover { border-color:var(--teal); color:var(--ink); }
.discovery-chips button[aria-pressed="true"] { color:#fff; background:var(--teal); border-color:var(--teal); }
.game-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; }
.game-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:0 8px 26px rgba(13,66,58,.07); display:flex; flex-direction:column; min-width:0; }
.game-card:hover { box-shadow:var(--shadow); }
.game-thumb { height:175px; background:linear-gradient(145deg,var(--soft),color-mix(in srgb,var(--mint) 30%,var(--card))); position:relative; overflow:hidden; }
.game-thumb img { width:100%; height:100%; object-fit:cover; }
.game-thumb .fallback-icon { height:100%; display:grid; place-items:center; font-size:4rem; color:var(--teal); }
.type-chip { position:absolute; top:.75rem; left:.75rem; padding:.3rem .6rem; border-radius:999px; color:#fff; background:rgba(8,63,59,.82); backdrop-filter:blur(8px); font-size:.7rem; font-weight:800; }
.game-card-body { padding:1.05rem; display:flex; flex:1; flex-direction:column; }
.game-card h3 { font-size:1.22rem; letter-spacing:-.025em; margin:0 0 .35rem; }
.game-card p { color:var(--muted); font-size:.88rem; line-height:1.48; margin:0 0 1rem; flex:1; }
.game-card .game-detail-line { display:flex; flex:0 0 auto; flex-wrap:wrap; gap:.35rem .75rem; margin:-.05rem 0 .55rem; color:var(--accent-strong); font-size:.76rem; font-weight:750; }
.game-card .game-detail-line span + span::before { content:"·"; margin-right:.75rem; color:var(--muted); }
.game-progress-row { display:grid; gap:.4rem; margin:.1rem 0 .65rem; }
.game-progress-row .progress-track { height:8px; }
.game-progress-row>span { display:flex; justify-content:space-between; gap:.5rem; color:var(--muted); font-size:.72rem; }
.game-best { font-weight:750; color:var(--teal-dark) !important; }
.game-meta { display:flex; justify-content:space-between; gap:.5rem; align-items:center; font-size:.76rem; color:var(--muted); }
.game-card-actions { display:flex; gap:.4rem; align-items:center; }
.read-game-button { width:40px; min-height:40px; padding:0; border-radius:12px; }
.game-meta .button { min-height:40px; }

.page-intro { max-width:820px; margin-bottom:2rem; }
.page-intro>p:not(.eyebrow) { color:var(--muted); line-height:1.55; font-size:1.05rem; }
.split-intro { max-width:none; display:flex; align-items:end; justify-content:space-between; gap:2rem; }
.no-prizes { display:flex; flex-direction:column; flex:0 0 280px; padding:1rem; background:var(--soft); border:1px solid var(--line); border-radius:16px; }
.no-prizes strong { color:var(--berry); }
.no-prizes span { color:var(--muted); font-size:.82rem; line-height:1.4; }
.goal-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.goal-card,.panel,.leaderboard-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 24px rgba(13,66,58,.06); }
.goal-card { padding:1.25rem; }
.goal-card header { display:flex; align-items:start; justify-content:space-between; gap:1rem; }
.goal-card h2 { margin:0; font-size:1.2rem; }
.goal-card p { color:var(--muted); line-height:1.5; }
.goal-bonus { color:var(--teal-dark); background:var(--soft); border-radius:999px; padding:.35rem .6rem; white-space:nowrap; font-size:.74rem; font-weight:850; }
.progress-track { height:12px; border-radius:99px; overflow:hidden; background:var(--soft); border:1px solid var(--line); }
.progress-track span { display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--mint)); border-radius:inherit; }
.goal-progress { width:100%; height:13px; appearance:none; border:1px solid var(--line); border-radius:99px; overflow:hidden; background:var(--soft); }
.goal-progress::-webkit-progress-bar { background:var(--soft); }
.goal-progress::-webkit-progress-value { background:linear-gradient(90deg,var(--teal),var(--mint)); border-radius:99px; }
.goal-progress::-moz-progress-bar { background:linear-gradient(90deg,var(--teal),var(--mint)); border-radius:99px; }
.goal-foot { display:flex; justify-content:space-between; margin-top:.55rem; color:var(--muted); font-size:.78rem; }
.goal-actions { display:flex; justify-content:flex-end; margin-top:.9rem; }
.goal-card.completed { border-color:color-mix(in srgb,var(--gold) 65%,var(--line)); background:linear-gradient(145deg,color-mix(in srgb,var(--gold) 12%,var(--card)),var(--card)); }
.goal-card.completed .goal-bonus { color:var(--ink); background:color-mix(in srgb,var(--gold) 30%,var(--soft)); }
.empty-state { text-align:center; padding:2.5rem; background:var(--card); border:1px dashed var(--line); border-radius:var(--radius); color:var(--muted); }
.filter-bar { display:flex; gap:.8rem; align-items:end; flex-wrap:wrap; margin-bottom:1rem; }
.filter-bar label { min-width:170px; color:var(--muted); font-size:.74rem; }
.ranking-guide { display:flex; justify-content:space-between; gap:1rem; margin:.2rem 0 1rem; color:var(--muted); font-size:.78rem; }
.ranking-guide p { margin:0; }
.ranking-summary { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:0 0 1rem; padding:1rem 1.1rem; border:1px solid color-mix(in srgb,var(--gold) 60%,var(--line)); border-radius:18px; background:color-mix(in srgb,var(--gold) 12%,var(--card)); }
.ranking-summary strong { font-size:1.2rem; color:var(--teal-dark); }
.ranking-summary p { margin:.2rem 0 0; color:var(--muted); font-size:.8rem; }
.ranking-nearby { margin:0 0 1rem; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--card); }
.ranking-nearby h2 { margin:0; padding:.7rem 1rem; background:var(--soft); font-size:.9rem; }
.compact-leaderboard li { min-height:44px; padding:.55rem 1rem; }
.leaderboard-card { overflow:hidden; }
.leaderboard-head,.leaderboard li { display:grid; grid-template-columns:70px minmax(0,1fr) minmax(100px,180px); align-items:center; gap:.7rem; }
.leaderboard-head { padding:.75rem 1.1rem; color:var(--muted); background:var(--soft); font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; font-weight:850; }
.leaderboard-head span:last-child,.leaderboard li strong { text-align:right; }
.leaderboard { list-style:none; padding:0; margin:0; }
.leaderboard li { padding:.9rem 1.1rem; border-top:1px solid var(--line); }
.leaderboard li.current { background:color-mix(in srgb,var(--gold) 15%,var(--card)); }
.rank-number { font-weight:900; color:var(--teal-dark); font-variant-numeric:tabular-nums; }
.alias { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leaderboard .verification { display:inline-block; margin-left:.4rem; font-size:.62rem; color:var(--muted); font-weight:600; }
.leaderboard-card>.button { margin:1rem; }

.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.panel { padding:1.25rem; }
.panel h2,.panel h3 { margin-top:0; }
.panel p { color:var(--muted); line-height:1.5; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.switch-row+.switch-row { margin-top:1rem; }
.switch-row span { display:flex; flex-direction:column; }
.switch-row small { color:var(--muted); font-weight:500; }
.switch-row input { width:52px; height:28px; accent-color:var(--teal); }
.choice-row { border:0; padding:0; margin:1.5rem 0 0; }
.choice-row legend { font-weight:800; margin-bottom:.5rem; }
.choice-row button { border:1px solid var(--line); background:var(--card); border-radius:12px; padding:.55rem .7rem; margin:.2rem; cursor:pointer; }
.choice-row button.selected { background:var(--teal); color:var(--paper); border-color:var(--teal); }
.offline-scope-label { display:block; margin:.9rem 0; color:var(--muted); font-size:.78rem; }
.detail-list { margin:0; }
.detail-list div { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:.65rem 0; }
.detail-list dt { color:var(--muted); }
.detail-list dd { margin:0; font-weight:800; }
.link-list { padding-left:1.2rem; line-height:2; }
.small-status,.fine-print { color:var(--muted); font-size:.76rem; line-height:1.45; }

.accent-panel { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-bottom:1rem; background:linear-gradient(120deg,var(--soft),var(--card)); }
.inline-form { display:flex; align-items:end; gap:.65rem; flex-wrap:wrap; }
.inline-form label { min-width:220px; flex:1; font-size:.78rem; color:var(--muted); }
.parent-signin { display:flex; justify-content:space-between; align-items:center; gap:2rem; }
.check-list { list-style:"✓  "; color:var(--muted); padding-left:1.3rem; }
.check-list li::marker { color:var(--teal); font-weight:900; }
.dashboard-head { display:flex; align-items:center; justify-content:space-between; margin:1.2rem 0; }
.dashboard-head h2 { margin:0; }
.parent-setup { display:grid; grid-template-columns:minmax(230px,.7fr) minmax(320px,1.3fr); gap:1.4rem; align-items:center; margin-bottom:1rem; border-left:6px solid var(--gold); }
.parent-setup h3 { margin:.1rem 0 .25rem; }
.parent-setup p:not(.eyebrow) { margin:.2rem 0; }
.setup-checklist { list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin:0; padding:0; counter-reset:setup; }
.setup-checklist li { position:relative; min-height:44px; padding:.65rem .65rem .65rem 2.5rem; border:1px solid var(--line); border-radius:13px; background:var(--soft); font-size:.79rem; font-weight:750; }
.setup-checklist li::before { counter-increment:setup; content:counter(setup); position:absolute; left:.65rem; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:1.35rem; height:1.35rem; border:1px solid var(--line); border-radius:50%; background:var(--card); color:var(--muted); }
.setup-checklist li.done::before { content:"✓"; color:#fff; background:var(--teal); border-color:var(--teal); }
.parent-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(250px,.8fr); gap:1rem; }
.kid-list { display:grid; gap:1rem; margin-top:1rem; }
.kid-card { padding:1.1rem; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); }
.kid-card.active-kid { border:2px solid var(--teal); box-shadow:0 9px 25px rgba(15,111,104,.12); }
.active-device-badge { display:inline-flex; margin-top:.45rem; padding:.27rem .5rem; border-radius:999px; background:var(--teal); color:#fff; font-size:.68rem; font-weight:850; }
.kid-card header { display:flex; align-items:start; justify-content:space-between; gap:1rem; }
.kid-card h3 { margin:0; }
.kid-card .alias-line { color:var(--muted); font-size:.8rem; margin:.2rem 0; }
.kid-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.kid-actions .button { min-height:39px; font-size:.77rem; padding:.48rem .7rem; }
.visibility-control { display:flex; justify-content:space-between; gap:1rem; align-items:center; background:var(--soft); border-radius:14px; padding:.7rem .8rem; margin-top:.8rem; }
.visibility-control input { width:24px; height:24px; accent-color:var(--teal); }
.device-list { list-style:none; margin:.7rem 0 0; padding:0; }
.device-list li { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding:.55rem 0; font-size:.78rem; }
.family-tools { align-self:start; position:sticky; top:160px; }
.family-tools .button { width:100%; margin:.3rem 0; }
.family-tools hr { border:0; border-top:1px solid var(--line); margin:1rem 0; }
.owner-panel { margin-top:2.5rem; padding-top:1.5rem; border-top:3px solid var(--teal); }
.owner-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.75fr); gap:1rem; }
.owner-tools { display:grid; align-content:start; gap:1rem; }
.stack-form { display:grid; gap:.8rem; }
.stack-form label { color:var(--muted); font-size:.78rem; }
.form-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
.owner-drafts { display:grid; gap:.7rem; margin-top:1.2rem; }
.owner-draft { border:1px solid var(--line); background:var(--soft); border-radius:14px; padding:.8rem; }
.owner-draft header { display:flex; justify-content:space-between; align-items:start; gap:.7rem; }
.owner-draft h4 { margin:0; }
.owner-draft p { margin:.35rem 0; font-size:.8rem; }

.game-view { position:fixed; inset:0; z-index:200; background:#071b1c; display:grid; grid-template-rows:62px minmax(0,1fr); }
.game-view>header { display:flex; align-items:center; gap:1rem; padding:.55rem 1rem; color:#f5fffb; background:#0b3735; }
.game-view>header>div { display:flex; flex:1; min-width:0; flex-direction:column; }
.game-view>header span { color:#b8d9d3; font-size:.72rem; }
.game-view .button.quiet { border-color:#537975; color:#fff; }
.mini-points { color:#fff !important; font-weight:900; }
.game-view iframe { width:100%; height:100%; border:0; background:#fff; }
.game-loading { position:absolute; inset:62px 0 0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#eefcf6; background:#0b2b2c; gap:.55rem; }
.game-loading img { width:90px; animation:float 1.8s ease-in-out infinite; }
@keyframes float { 50% { transform:translateY(-8px); } }
.game-loading span { color:#b8d9d3; }

dialog { color:var(--ink); }
.modal { width:min(560px,calc(100% - 2rem)); max-height:calc(100vh - 2rem); overflow:auto; border:1px solid var(--line); border-radius:26px; padding:1.5rem; background:var(--card); box-shadow:0 30px 90px rgba(0,0,0,.28); }
.modal::backdrop { background:rgba(3,24,24,.66); backdrop-filter:blur(5px); }
.modal h2 { margin:.2rem 2rem .7rem 0; font-size:1.6rem; }
.close-button { position:absolute; right:1rem; top:1rem; }
.install-dialog-body { display:grid; grid-template-columns:72px minmax(0,1fr); gap:1rem; align-items:center; }
.install-dialog-body img { width:72px; height:72px; border-radius:18px; box-shadow:0 8px 20px rgba(13,66,58,.16); }
.install-dialog-body p:last-child { margin-bottom:0; color:var(--muted); line-height:1.5; }
.icon-button { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:transparent; cursor:pointer; font-size:1.4rem; }
.guest-connect-modal { width:min(660px,calc(100% - 2rem)); }
.guest-connect-modal>p:not(.eyebrow) { color:var(--muted); line-height:1.55; }
.guest-google-button { width:100%; margin-top:.55rem; }
.guest-choice-divider { display:flex; align-items:center; gap:.7rem; margin:1rem 0; color:var(--muted); font-size:.75rem; font-weight:850; text-transform:uppercase; letter-spacing:.1em; }
.guest-choice-divider::before,.guest-choice-divider::after { content:""; flex:1; height:1px; background:var(--line); }
.guest-pair-form label { display:block; font-size:.82rem; color:var(--ink); }
.guest-pair-row { display:grid; grid-template-columns:minmax(150px,1fr) auto; align-items:end; gap:.6rem; margin-top:.25rem; }
.guest-pair-row input { margin:0; text-transform:uppercase; letter-spacing:.12em; font-weight:850; }
.guest-pair-form small { display:block; margin-top:.4rem; color:var(--muted); line-height:1.4; }
.guest-anonymous-choice { margin-top:1.15rem; padding:1rem; border:1px solid var(--line); border-radius:16px; background:var(--soft); }
.guest-anonymous-choice .button { width:100%; }
.guest-anonymous-choice p { margin:.75rem 0 0; color:var(--muted); font-size:.9rem; line-height:1.5; }
.big-award { font-size:3.2rem; line-height:1; font-weight:950; color:var(--teal-dark); }
.result-modal[data-layout="road"] .result-highlights { grid-template-columns:1fr; }
.result-modal[data-layout="road"] .big-award { font-size:clamp(1.8rem,7vw,2.6rem); }
.result-highlights { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; margin:1rem 0; }
.result-highlight { padding:.72rem; border:1px solid var(--line); border-radius:14px; background:var(--card); }
.result-highlight strong { display:block; color:var(--teal-dark); font-size:1.05rem; }
.result-highlight span { display:block; margin-top:.2rem; color:var(--muted); font-size:.72rem; line-height:1.35; }
.result-details { background:var(--soft); padding:.8rem; border-radius:14px; font-size:.84rem; }
.result-actions .button { flex:1 1 190px; }
.points-breakdown { display:grid; gap:.7rem; margin:1rem 0; }
.points-breakdown div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.2rem 1rem; padding:.85rem; border:1px solid var(--line); border-radius:14px; background:var(--soft); }
.points-breakdown dt { font-weight:850; }
.points-breakdown dd { margin:0; color:var(--teal-dark); font-size:1.15rem; font-weight:950; }
.points-breakdown small { grid-column:1/-1; color:var(--muted); line-height:1.4; }
.merge-preview { background:var(--soft); border-radius:14px; padding:1rem; }
.merge-preview dl { margin:0; display:grid; grid-template-columns:1fr auto; gap:.5rem; }
.merge-preview dd { margin:0; font-weight:900; }
.confirm-row { display:flex; gap:.6rem; align-items:start; margin:1rem 0; line-height:1.4; }
.confirm-row input { flex:0 0 auto; width:22px; height:22px; margin:0; accent-color:var(--teal); }
.pair-code { letter-spacing:.24em; font-size:2.2rem; font-weight:950; text-align:center; color:var(--teal-dark); background:var(--soft); border-radius:16px; padding:1rem; font-variant-numeric:tabular-nums; }
.pair-qr { width:220px; height:220px; display:block; margin:1rem auto; border:10px solid #fff; border-radius:10px; }
.pair-link { overflow-wrap:anywhere; text-align:center; }
.pending-pair { margin-top:1rem; border-top:1px solid var(--line); padding-top:1rem; }
.toast { position:fixed; z-index:400; bottom:1rem; left:50%; transform:translateX(-50%); max-width:min(520px,calc(100% - 2rem)); background:var(--ink); color:var(--paper); box-shadow:var(--shadow); padding:.8rem 1rem; border-radius:14px; pointer-events:none; }
.noscript { position:fixed; inset:auto 1rem 1rem; z-index:999; padding:1rem; background:#801f32; color:white; border-radius:12px; }

.legal-shell { width:min(800px,calc(100% - 2rem)); margin:0 auto; padding:2rem 0 5rem; }
.legal-shell header { margin-bottom:2rem; }
.legal-shell .brand { display:inline-flex; }
.legal-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.2rem,4vw,2.5rem); box-shadow:var(--shadow); line-height:1.65; }
.legal-card h1 { font-size:clamp(2rem,6vw,3.3rem); line-height:1; letter-spacing:-.05em; }
.legal-card h2 { margin-top:2rem; }
.legal-card .updated { color:var(--muted); }

@media (max-width:850px) {
  .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero { grid-template-columns:1fr; }
  .hero-art { display:none; }
  .guest-connect-banner { grid-template-columns:1fr; align-items:stretch; }
  .guest-banner-actions { justify-content:flex-start; }
  .trail-planner,.garden-panel,.parent-setup { grid-template-columns:1fr; }
  .trail-planner-copy { display:block; }
  .trail-leg-tabs { margin-top:.2rem; }
  .garden-progress { grid-column:auto; }
  .parent-layout { grid-template-columns:1fr; }
  .owner-grid { grid-template-columns:1fr; }
  .family-tools { position:static; }
  .split-intro,.parent-signin,.accent-panel { align-items:stretch; flex-direction:column; }
  .no-prizes { flex:auto; }
}

@media (max-width:620px) {
  body { padding-bottom:70px; }
  .site-header { min-height:72px; padding:.75rem; top:0; }
  .brand img { width:40px; }
  .brand span { display:none; }
  .header-tools { gap:.35rem; }
  .status-pill { padding:.42rem .55rem; font-size:.7rem; }
  #installButton { min-height:38px; padding:.42rem .55rem; font-size:.7rem; }
  .points-pill { min-width:86px; }
  .tab-bar { position:fixed; inset:auto 0 0; top:auto; z-index:100; justify-content:space-around; padding:.38rem max(.35rem,env(safe-area-inset-right)) calc(.38rem + env(safe-area-inset-bottom)) max(.35rem,env(safe-area-inset-left)); background:var(--card); box-shadow:0 -8px 28px rgba(13,66,58,.12); }
  .tab-bar button { display:flex; flex:1 1 0; flex-direction:column; gap:.1rem; align-items:center; min-width:0; padding:.35rem .12rem; font-size:.58rem; }
  .tab-bar button span { font-size:1rem; }
  main { width:min(100% - 1rem,1180px); padding-top:.75rem; padding-bottom:2rem; }
  .hero { min-height:0; border-radius:24px; padding:1.35rem; }
  .hero h1 { font-size:2.25rem; }
  .section-heading { align-items:stretch; flex-direction:column; }
  .library-goal-card { grid-template-columns:1fr; }
  .library-goal-card>.button { width:100%; }
  .trail-planner { padding:.85rem; border-radius:22px; }
  .trail-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .trail-summary span { padding:.55rem .45rem; }
  .trail-summary small { font-size:.56rem; }
  .trail-summary strong { font-size:.76rem; }
  .trail-map,.trail-stops { min-height:248px; }
  .trail-stops { padding-left:.85rem; padding-right:.85rem; }
  .trail-stop { flex-basis:122px; }
  .trail-node { min-height:134px; }
  .trail-route-actions { display:grid; grid-template-columns:1fr; }
  .trail-route-actions .button { width:100%; }
  .garden-scene { min-height:112px; }
  .garden-progress { grid-template-columns:1fr; }
  .search-label input { width:100%; }
  .game-grid,.goal-grid,.settings-grid { grid-template-columns:1fr; }
  .game-card { flex-direction:row; }
  .game-thumb { flex:0 0 120px; height:auto; min-height:170px; }
  .game-card-body { min-width:0; }
  .game-card p { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .install-dialog-body { grid-template-columns:56px minmax(0,1fr); }
  .install-dialog-body img { width:56px; height:56px; border-radius:14px; }
  .filter-bar label { min-width:calc(50% - .5rem); flex:1; }
  .ranking-guide { flex-direction:column; gap:.3rem; }
  .ranking-summary { align-items:flex-start; flex-direction:column; }
  .leaderboard-head,.leaderboard li { grid-template-columns:45px minmax(0,1fr) 88px; padding-left:.65rem; padding-right:.65rem; }
  .verification { display:none !important; }
  .accent-panel,.parent-signin { padding:1rem; }
  .inline-form,.inline-form label,.inline-form .button { width:100%; }
  .guest-banner-actions,.guest-banner-actions .button { width:100%; }
  .guest-pair-row { grid-template-columns:1fr; }
  .guest-pair-row .button { width:100%; }
  .form-pair { grid-template-columns:1fr; }
  .setup-checklist { grid-template-columns:1fr; }
  .result-highlights { grid-template-columns:1fr; }
  .game-view { grid-template-rows:56px minmax(0,1fr); }
  .game-loading { inset:56px 0 0; }
}

@media (max-width:390px) {
  .brand strong { font-size:.92rem; }
  .game-card { display:block; }
  .game-thumb { height:150px; }
  .tab-bar button { min-width:0; font-size:.54rem; }
}

/* Trail-first shell ------------------------------------------------------- */
.site-header {
  min-height:64px;
  padding:.55rem clamp(.8rem,3vw,2rem);
}
.brand img { width:42px; height:42px; }
.brand small { font-size:.68rem; }
.tab-bar {
  top:64px;
  min-height:48px;
  padding:.3rem .75rem;
}
.tab-bar button {
  min-height:38px;
  padding:.42rem .9rem;
}
main {
  width:min(1280px,calc(100% - 1.5rem));
  padding:clamp(.65rem,1.4vw,1rem) 0 4rem;
}

.guest-connect-banner {
  display:block;
  margin:0 0 .65rem;
  padding:0;
  border-left-width:1px;
  border-radius:14px;
  overflow:hidden;
}
.guest-connect-banner summary {
  min-height:40px;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .8rem;
  cursor:pointer;
  list-style:none;
  font-size:.78rem;
}
.guest-connect-banner summary::-webkit-details-marker { display:none; }
.guest-connect-banner summary strong {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.guest-connect-banner summary::after {
  content:"›";
  margin-left:auto;
  color:var(--muted);
  font-size:1.2rem;
  font-weight:900;
  transform:rotate(90deg);
  transition:transform .15s ease;
}
.guest-connect-banner[open] summary::after { transform:rotate(-90deg); }
.guest-connect-banner summary>span:not(.status-dot) { color:var(--teal-dark); font-weight:850; }
.guest-connect-banner .status-dot { flex:0 0 auto; background:var(--gold); }
.guest-banner-body {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.65rem .8rem .8rem;
  border-top:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));
}
.guest-banner-body>p { margin:0; color:var(--muted); font-size:.8rem; line-height:1.4; }

.trail-view {
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:.4rem;
  min-height:0;
}
.trail-view>#syncNotice { margin:0; }
.trail-view>#trailPlanner { grid-row:2; }
.trail-planner {
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto auto auto minmax(0,1fr);
  gap:.65rem;
  height:100%;
  min-height:620px;
  margin:0;
  padding:clamp(.8rem,1.5vw,1.1rem);
  border-radius:24px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--teal) 11%,var(--card)),color-mix(in srgb,var(--gold) 7%,var(--card)));
}
.trail-planner-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
}
.trail-title { min-width:0; }
.trail-title .eyebrow { margin-bottom:.12rem; }
.trail-planner h1 {
  margin:0;
  font-size:clamp(1.35rem,2.3vw,2rem);
  line-height:1;
  letter-spacing:-.045em;
}
.trail-summary {
  grid-template-columns:repeat(3,minmax(112px,1fr));
  width:min(520px,55%);
  margin:0;
}
.trail-summary span { padding:.45rem .6rem; }
.trail-summary small { min-height:0; font-size:.58rem; }
.trail-summary strong { font-size:.82rem; }
.trail-leg-tabs {
  flex-wrap:nowrap;
  margin:0;
  padding:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.trail-leg-tabs::-webkit-scrollbar { display:none; }
.trail-leg-tab { flex:0 0 auto; min-width:40px; min-height:32px; padding:.25rem .55rem; }

.trail-quest-chip { min-height:0; margin:0; }
.trail-quest-chip:empty { display:none; }
.trail-quest-chip .library-goal-card {
  grid-template-columns:minmax(0,1fr) auto;
  min-height:50px;
  gap:.75rem;
  padding:.55rem .7rem;
  border-radius:15px;
  box-shadow:none;
}
.trail-quest-chip .library-goal-card>div {
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(150px,310px);
  gap:.75rem;
  align-items:center;
}
.trail-quest-chip .library-goal-card .eyebrow,
.trail-quest-chip .library-goal-card p:not(.eyebrow) { display:none; }
.trail-quest-chip .library-goal-card h2 {
  display:block;
  overflow:hidden;
  margin:0;
  font-size:.86rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.trail-quest-chip .library-goal-progress {
  display:inline-grid;
  grid-template-columns:minmax(70px,130px) auto;
  width:min(310px,100%);
  margin:0;
  font-size:.65rem;
}
.trail-quest-chip .progress-track { height:7px; }
.trail-quest-chip .button { min-height:34px; padding:.4rem .65rem; font-size:.72rem; }

.trail-stage {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,300px);
  gap:.7rem;
  min-height:0;
}
.trail-planner-route {
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:.35rem;
  min-width:0;
  min-height:0;
}
.trail-map,.trail-stops { min-height:390px; }
.trail-map { height:100%; }
.trail-stops { height:100%; padding:2.1rem 1.15rem; }
.trail-stop { flex-basis:118px; }
.trail-node {
  min-height:126px;
  border-radius:18px;
}
.trail-node strong { font-size:.78rem; }
.trail-stop[data-selected="true"] .trail-node {
  outline:3px solid color-mix(in srgb,var(--gold) 88%,#fff);
  outline-offset:2px;
}
.trail-status {
  min-height:1rem;
  padding:0 .2rem;
  overflow:hidden;
  color:var(--muted) !important;
  font-size:.72rem !important;
  line-height:1.25 !important;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.trail-route-actions { display:none !important; }

.trail-checkpoint-panel.hero {
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 58px;
  gap:.8rem;
  align-items:center;
  padding:1rem;
  border:1px solid rgba(255,255,255,.26);
  border-radius:20px;
  overflow:hidden;
  color:#f6fff9;
  background:linear-gradient(150deg,#075b57,#117b6d 64%,#478764);
  box-shadow:0 12px 28px rgba(13,66,58,.18);
}
.trail-checkpoint-panel.hero::before {
  width:210px;
  height:210px;
  right:-100px;
  top:-120px;
  border-width:34px;
}
.trail-checkpoint-panel.hero h2 {
  margin:.15rem 0 .55rem;
  font-size:clamp(1.3rem,2.2vw,1.8rem);
  line-height:1.05;
  letter-spacing:-.04em;
}
.trail-checkpoint-panel.hero .hero-context {
  margin:.4rem 0 .75rem;
  padding:.5rem .6rem;
  font-size:.76rem;
  line-height:1.35;
}
.trail-checkpoint-panel .trail-welcome {
  margin:.4rem 0 .8rem !important;
  color:rgba(255,255,255,.76) !important;
  font-size:.74rem !important;
  line-height:1.35 !important;
}
.trail-checkpoint-panel .button { width:100%; min-height:44px; }
.checkpoint-compass {
  position:relative;
  z-index:1;
  align-self:start;
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.06);
}
.checkpoint-compass span { font-size:2rem; transform:rotate(-18deg); }

.library-view .section-heading { margin:.2rem 0 1rem; }
.library-view .section-heading h1 { margin:.1rem 0; font-size:clamp(1.8rem,4vw,3rem); letter-spacing:-.045em; }
.game-library { scroll-margin-top:120px; }

.more-intro { margin-bottom:1rem; }
.more-intro h1 { font-size:clamp(1.8rem,4vw,3rem); }
.more-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem;
}
.more-card {
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:.75rem;
  align-items:center;
  min-height:88px;
  padding:.8rem;
  border:1px solid var(--line);
  border-radius:18px;
  color:var(--ink);
  background:var(--card);
  box-shadow:0 7px 20px rgba(13,66,58,.06);
  cursor:pointer;
  text-align:left;
}
.more-card:hover { border-color:var(--teal); box-shadow:var(--shadow); }
.more-card>span { grid-row:1/-1; display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:var(--soft); color:var(--teal-dark); font-size:1.2rem; font-weight:900; }
.more-card strong { align-self:end; }
.more-card small { align-self:start; color:var(--muted); }
.more-device {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1rem;
}
.more-device h2,.more-device p { margin:.1rem 0; }
.more-device-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; }

@media (min-width:851px) and (min-height:700px) {
  html:not([data-large-text="true"]) body:has(#trailView:not([hidden])) { height:100dvh; overflow:hidden; }
  html:not([data-large-text="true"]) body:has(#trailView:not([hidden])) main {
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    height:calc(100dvh - 112px);
    padding-bottom:.75rem;
    overflow:hidden;
  }
  html:not([data-large-text="true"]) #trailView:not([hidden]) { grid-row:2; height:100%; }
  html:not([data-large-text="true"]) #trailView:not([hidden]) .trail-planner { min-height:0; }
  html:not([data-large-text="true"]) #trailView:not([hidden]) .trail-map,
  html:not([data-large-text="true"]) #trailView:not([hidden]) .trail-stops { min-height:0; }
}

@media (max-width:850px) {
  .trail-planner { grid-template-columns:1fr; }
  .trail-planner-head { align-items:start; }
  .trail-summary { width:min(480px,65%); }
  .trail-stage { grid-template-columns:minmax(0,1fr) minmax(220px,260px); }
  .trail-map,.trail-stops { min-height:340px; }
  .more-grid { grid-template-columns:1fr; }
}

@media (max-width:620px) {
  body { padding-bottom:calc(58px + env(safe-area-inset-bottom)); }
  .site-header { min-height:58px; padding:.45rem .65rem; }
  .brand img { width:38px; height:38px; }
  .brand span { display:none; }
  .header-tools { gap:.28rem; }
  .status-pill { min-width:0; padding:.36rem .48rem; font-size:.64rem; }
  .points-pill { min-width:76px; padding:.34rem .6rem; }
  .points-pill span { font-size:.55rem; }
  .points-pill strong { font-size:1.05rem; }
  .tab-bar {
    inset:auto 0 0;
    top:auto;
    height:auto;
    min-height:58px;
    grid-template-columns:repeat(4,1fr);
    gap:.15rem;
    padding:.28rem max(.25rem,env(safe-area-inset-right)) calc(.28rem + env(safe-area-inset-bottom)) max(.25rem,env(safe-area-inset-left));
  }
  .tab-bar button { font-size:.58rem; }
  .tab-bar button span { line-height:1; font-size:1rem; }
  main { width:calc(100% - .7rem); padding:.4rem 0 1rem; }

  .guest-connect-banner { margin-bottom:.4rem; border-radius:12px; }
  .guest-connect-banner summary { min-height:34px; padding:.35rem .6rem; font-size:.68rem; }
  .guest-banner-body { align-items:stretch; flex-direction:column; gap:.55rem; padding:.55rem .6rem .65rem; }
  .guest-banner-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .guest-banner-actions .button { width:auto; min-height:38px; font-size:.72rem; }

  .trail-planner {
    min-height:620px;
    gap:.42rem;
    padding:.55rem;
    border-radius:18px;
  }
  .trail-planner-head { gap:.45rem; }
  .trail-title .eyebrow { display:none; }
  .trail-planner h1 { font-size:1.05rem; white-space:nowrap; }
  .trail-summary { width:auto; flex:1; gap:.25rem; }
  .trail-summary span { padding:.3rem .35rem; border-radius:10px; }
  .trail-summary span:first-child { display:none; }
  .trail-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trail-summary small { font-size:.48rem; letter-spacing:.03em; }
  .trail-summary strong { margin-top:.08rem; font-size:.68rem; }
  .trail-leg-tabs { gap:.25rem; }
  .trail-leg-tab { min-width:34px; min-height:29px; padding:.18rem .42rem; font-size:.62rem; }

  .trail-quest-chip .library-goal-card { min-height:42px; padding:.4rem .5rem; }
  .trail-quest-chip .library-goal-card>div { display:block; }
  .trail-quest-chip .library-goal-card .eyebrow,
  .trail-quest-chip .library-goal-card p:not(.eyebrow) { display:none; }
  .trail-quest-chip .library-goal-card h2 {
    display:block;
    overflow:hidden;
    margin:0;
    font-size:.72rem;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .trail-quest-chip .library-goal-progress { grid-template-columns:minmax(55px,1fr) auto; width:100%; margin-top:.22rem; font-size:.58rem; }
  .trail-quest-chip .button { min-height:32px; max-width:104px; overflow:hidden; padding:.3rem .48rem; text-overflow:ellipsis; white-space:nowrap; }

  .trail-stage {
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) auto;
    gap:.42rem;
  }
  .trail-map,.trail-stops { min-height:240px; }
  .trail-map { border-radius:16px; }
  .trail-stops { gap:.5rem; padding:1.6rem .7rem; }
  .trail-stop { flex-basis:102px; }
  .trail-stop:nth-child(3n+1) { transform:translateY(20px); }
  .trail-stop:nth-child(3n+2) { transform:translateY(-18px); }
  .trail-stop:nth-child(3n) { transform:translateY(5px); }
  .trail-node { min-height:98px; padding:.45rem; border-radius:15px; }
  .trail-node-number { width:1.45rem; height:1.45rem; font-size:.62rem; }
  .trail-node-state { font-size:.52rem; }
  .trail-node strong { display:-webkit-box; margin:.4rem 0 0; overflow:hidden; font-size:.7rem; line-height:1.1; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .trail-node-detail,.trail-node-score { display:none !important; }
  .trail-status { display:none; }

  .trail-checkpoint-panel.hero {
    grid-template-columns:1fr;
    min-height:126px;
    padding:.7rem;
    border-radius:16px;
  }
  .trail-checkpoint-panel.hero h2 { margin:.08rem 0 .32rem; font-size:1.15rem; }
  .trail-checkpoint-panel.hero .eyebrow { margin-bottom:.08rem; font-size:.55rem; }
  .trail-checkpoint-panel.hero .hero-context { margin:.25rem 0 .45rem; padding:.35rem .45rem; font-size:.66rem; }
  .trail-checkpoint-panel .trail-welcome { display:none; }
  .trail-checkpoint-panel .button { min-height:40px; padding:.5rem .7rem; font-size:.8rem; }
  .checkpoint-compass { display:none; }

  .library-view .section-heading { gap:.7rem; }
  .library-view .section-heading h1 { font-size:1.8rem; }
  .library-view .section-heading p:not(.eyebrow) { font-size:.78rem; }
  .library-view .search-label input { min-height:40px; }
  .library-view .game-grid { grid-template-columns:1fr; }
  .more-intro { margin:.2rem 0 .75rem; }
  .more-intro h1 { font-size:1.8rem; }
  .more-intro p:not(.eyebrow) { font-size:.85rem; }
  .more-grid { gap:.5rem; }
  .more-card { min-height:74px; }
  .more-device { align-items:stretch; flex-direction:column; }
  .more-device-actions { display:grid; grid-template-columns:1fr; }

  html:not([data-large-text="true"]) body:has(#trailView:not([hidden])) { height:100dvh; overflow:hidden; }
  html:not([data-large-text="true"]) body:has(#trailView:not([hidden])) main {
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    height:calc(100dvh - 58px - 58px - env(safe-area-inset-bottom));
    padding-bottom:.35rem;
    overflow:hidden;
  }
  html:not([data-large-text="true"]) body:has(#guestConnectBanner[open]) { height:auto; overflow:auto; }
  html:not([data-large-text="true"]) body:has(#guestConnectBanner[open]) main { height:auto; overflow:visible; }
  html:not([data-large-text="true"]) body:has(#guestConnectBanner[open]) #trailView,
  html:not([data-large-text="true"]) body:has(#guestConnectBanner[open]) #trailView .trail-planner { height:auto; min-height:620px; }
  html:not([data-large-text="true"]) body:has(#guestConnectBanner[open]) #trailView .trail-map,
  html:not([data-large-text="true"]) body:has(#guestConnectBanner[open]) #trailView .trail-stops { min-height:240px; }
  html:not([data-large-text="true"]) #trailView:not([hidden]),
  html:not([data-large-text="true"]) #trailView:not([hidden]) .trail-planner { min-height:0; height:100%; }
  html:not([data-large-text="true"]) #trailView:not([hidden]) { grid-row:2; }
  html:not([data-large-text="true"]) #trailView:not([hidden]) .trail-map,
  html:not([data-large-text="true"]) #trailView:not([hidden]) .trail-stops { min-height:0; }
}

@media (max-width:620px) and (max-height:699px) {
  body:has(#trailView:not([hidden])) { height:auto !important; overflow:auto !important; }
  body:has(#trailView:not([hidden])) main { height:auto !important; overflow:visible !important; }
  #trailView:not([hidden]),#trailView:not([hidden]) .trail-planner { height:auto !important; min-height:580px !important; }
}

:root[data-theme="contrast"] .trail-map { border:2px solid #fff; }
:root[data-theme="contrast"] .trail-checkpoint-panel.hero { border:2px solid #fff; background:#000; }
:root[data-theme="contrast"] .trail-stop[data-selected="true"] .trail-node { outline-color:var(--gold); }

/* Winding trail checkpoint scene */
.trail-planner { grid-template-rows:auto auto minmax(0,1fr); }
.trail-quest-chip,.trail-checkpoint-panel { display:none !important; }
.trail-stage { grid-template-columns:minmax(0,1fr); min-height:0; }
.trail-planner-route { grid-template-rows:minmax(0,1fr) auto; min-height:0; }
.trail-map {
  min-height:470px;
  height:100%;
  background:linear-gradient(180deg,#9fd9dc 0%,#cfe6dc 38%,#d9e5c9 72%,#8ead91 100%);
}
.trail-map::before { inset:0; z-index:0; opacity:.55; }
.trail-map::after { display:none; }
.trail-map-landscape { z-index:0; }
.trail-road-art { position:absolute; z-index:1; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.trail-road-art path { fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.trail-road-art #trailRoadPath { stroke:#3e5149; stroke-width:43px; filter:drop-shadow(0 3px 2px rgba(24,47,39,.35)); }
.trail-road-art #trailRoadSurface { stroke:#77756d; stroke-width:35px; }
.trail-road-art #trailRoadCenter { stroke:rgba(255,255,255,.82); stroke-width:2px; stroke-dasharray:5px 5px; }
.trail-stops {
  position:absolute; z-index:2; inset:0; display:block; min-height:0; height:100%; margin:0;
  padding:0; overflow:visible; list-style:none;
}
.trail-stops .trail-stop {
  position:absolute; top:var(--trail-y); left:var(--trail-x); width:48px; height:48px;
  margin:0; transform:translate(-50%,-50%); scroll-snap-align:none;
}
.trail-stop[data-status="current"] { z-index:3; }
.trail-node {
  display:grid; place-items:center; width:48px; min-height:48px; height:48px; padding:0;
  border:3px solid #fff; border-radius:50%; color:#263c35; background:#f6f4e9;
  box-shadow:0 3px 9px rgba(15,50,43,.35); text-align:center; cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.trail-node:hover:not(:disabled),.trail-node:focus-visible { z-index:4; transform:scale(1.13); }
.trail-node:focus-visible { outline:3px solid #ffe27a; outline-offset:3px; }
.trail-node-top { display:contents; }
.trail-node-number { width:100%; height:100%; border-radius:50%; display:grid; place-items:center; font-size:.86rem; background:transparent; color:inherit; }
.trail-node-state,.trail-node strong,.trail-node-detail,.trail-node-score { display:none !important; }
.trail-stop[data-status="completed"] .trail-node { background:#138276; border-color:#d8fff2; color:#fff; }
.trail-stop[data-status="completed"] .trail-node-number { color:#fff; background:transparent; }
.trail-stop[data-status="current"] .trail-node { background:#ffd266; border-color:#fff8d8; color:#3e2d09; box-shadow:0 0 0 5px rgba(255,210,102,.37),0 4px 12px rgba(15,50,43,.4); }
.trail-stop[data-status="current"] .trail-node-number { background:transparent; color:inherit; }
.trail-stop[data-status="locked"] .trail-node { color:#445851; background:#d5dfd9; border-color:rgba(255,255,255,.85); opacity:.84; filter:none; }
.trail-status { min-height:1.25rem; margin:0 !important; padding:0 .2rem; color:var(--muted) !important; font-size:.76rem !important; line-height:1.3 !important; text-align:center; }
.trail-leg-tabs { margin:0; padding:.1rem 0; }
.trail-leg-tab { min-width:44px; min-height:38px; }
@media (max-width:850px) {
  .trail-map { min-height:450px; }
  .trail-stage { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
}
@media (max-width:620px) {
  .trail-planner { min-height:0; grid-template-rows:auto auto minmax(0,1fr); gap:.48rem; }
  .trail-planner-head { align-items:center; }
  .trail-title .eyebrow { display:none; }
  .trail-planner h1 { font-size:1rem; white-space:nowrap; }
  .trail-summary { display:flex; flex:0 0 auto; width:auto; }
  .trail-summary span:first-child { display:none; }
  .trail-summary span { padding:.3rem .42rem; }
  .trail-summary small { font-size:.48rem; }
  .trail-summary strong { font-size:.68rem; }
  .trail-map { min-height:0; height:100%; border-radius:16px; }
  .trail-stop,.trail-node { width:44px; height:44px; min-height:44px; }
  .trail-node-number { font-size:.8rem; }
  .trail-status { display:block; white-space:normal; }
}
:root[data-theme="contrast"] .trail-road-art #trailRoadPath { stroke:#000; stroke-width:45px; }
:root[data-theme="contrast"] .trail-road-art #trailRoadSurface { stroke:#444; stroke-width:37px; }
:root[data-theme="contrast"] .trail-road-art #trailRoadCenter { stroke:#fff; stroke-width:3px; }

/* TundraBloom illustrated adventure shell v2 */
@font-face { font-family:"Fredoka";src:url('/fonts/fredoka-latin-variable.woff2') format('woff2');font-style:normal;font-weight:600 700;font-display:swap; }
@font-face { font-family:"Atkinson Hyperlegible";src:url('/fonts/atkinson-hyperlegible-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap; }
@font-face { font-family:"Atkinson Hyperlegible";src:url('/fonts/atkinson-hyperlegible-bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap; }
:root[data-ui-version="2"] {
  --ink:#102f35;
  --muted:#526e73;
  --paper:#edf5f0;
  --card:rgba(255,255,255,.94);
  --soft:#e0efe8;
  --line:rgba(20,73,73,.18);
  --teal:#117b72;
  --teal-dark:#07544f;
  --mint:#70d5a6;
  --gold:#f5bf59;
  --berry:#b94d76;
  --night:#082f3a;
  --radius:24px;
  --display-font:"Fredoka","Trebuchet MS","Arial Rounded MT Bold",ui-rounded,system-ui,sans-serif;
  --ui-font:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,sans-serif;
  --shadow:0 22px 60px rgba(5,43,48,.16),0 4px 14px rgba(5,43,48,.08);
  font-family:var(--ui-font);
}
:root[data-ui-version="2"][data-theme="dark"] {
  --ink:#effdf9;--muted:#b7d2d1;--paper:#061f29;--card:rgba(10,45,55,.95);--soft:#123e45;
  --line:rgba(184,229,220,.22);--teal:#72dfc3;--teal-dark:#9cf0d6;--night:#03161d;
}
:root[data-ui-version="2"] body {
  background:
    radial-gradient(circle at 4% -10%,rgba(105,210,176,.24),transparent 34rem),
    radial-gradient(circle at 96% 18%,rgba(185,77,118,.12),transparent 29rem),var(--paper);
}
:root[data-ui-version="2"] h1,
:root[data-ui-version="2"] h2,
:root[data-ui-version="2"] h3,
:root[data-ui-version="2"] .brand strong { font-family:var(--display-font); }
:root[data-ui-version="2"] .aurora { height:4px;background:linear-gradient(90deg,#66e2bf,#90a7ff,#d78bd0,#ffc969,#66e2bf); }

:root[data-ui-version="2"] .site-header {
  min-height:68px;padding:.55rem clamp(.75rem,3vw,2rem);border:0;
  background:color-mix(in srgb,var(--night) 91%,transparent);color:#f4fffb;
  box-shadow:0 8px 30px rgba(1,24,31,.22);backdrop-filter:blur(22px) saturate(1.2);
}
:root[data-ui-version="2"] .brand-lockup { width:clamp(172px,23vw,276px);height:52px;object-fit:contain;object-position:left center;filter:drop-shadow(0 4px 10px rgba(0,0,0,.22)); }
:root[data-ui-version="2"] .brand-copy { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
:root[data-ui-version="2"] .header-tools { gap:.5rem; }
:root[data-ui-version="2"] .site-header .status-pill,
:root[data-ui-version="2"] .site-header .points-pill { color:#e8faf5;border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.09);box-shadow:none; }
:root[data-ui-version="2"] .site-header .points-pill strong { color:#fff2bb; }
:root[data-ui-version="2"] .site-header .points-pill span,
:root[data-ui-version="2"] .site-header .status-pill { color:#c8e1dd; }
:root[data-ui-version="2"] .compass-button {
  appearance:none;display:inline-flex;align-items:center;gap:.42rem;min-height:44px;padding:.52rem .72rem;
  border:1px solid rgba(255,255,255,.2);border-radius:15px;color:#082f3a;background:linear-gradient(145deg,#fff1b4,#f5bf59);
  box-shadow:0 7px 18px rgba(0,0,0,.2);font-weight:900;cursor:pointer;
}
:root[data-ui-version="2"] .compass-button svg { width:22px;height:22px; }

:root[data-ui-version="2"] main { width:min(1460px,calc(100% - 1.5rem));padding:clamp(.75rem,2vw,1.5rem) 0 4rem; }
:root[data-ui-version="2"] .guest-connect-banner {
  position:relative;z-index:20;margin:0 0 .65rem;border:1px solid rgba(245,191,89,.5);border-left:0;border-radius:16px;
  background:linear-gradient(100deg,color-mix(in srgb,#f5bf59 24%,var(--card)),var(--card));box-shadow:0 10px 28px rgba(6,45,50,.1);
}
:root[data-ui-version="2"] .guest-connect-banner summary { min-height:42px; }

:root[data-ui-version="2"] .compass-menu-dialog {
  width:min(920px,calc(100vw - 2rem));max-height:min(760px,calc(100dvh - 2rem));padding:0;border:0;border-radius:32px;
  color:var(--ink);background:transparent;box-shadow:0 36px 100px rgba(0,16,25,.42);overflow:visible;
}
:root[data-ui-version="2"] .compass-menu-dialog::backdrop { background:rgba(2,24,31,.72);backdrop-filter:blur(8px); }
:root[data-ui-version="2"] .compass-menu-board {
  position:relative;min-height:510px;padding:clamp(1.15rem,3vw,2.2rem);border:1px solid rgba(255,255,255,.62);border-radius:32px;overflow:hidden;
  background:
    linear-gradient(120deg,rgba(255,255,255,.98),rgba(235,247,239,.94)),
    url('/art/biomes/birch-flats.webp') center/cover;
}
:root[data-ui-version="2"][data-theme="dark"] .compass-menu-board { background:linear-gradient(120deg,rgba(7,35,44,.97),rgba(10,54,58,.94)); }
:root[data-ui-version="2"] .compass-menu-board::after { content:"";position:absolute;inset:auto -14% -60% 32%;height:130%;background:radial-gradient(circle,rgba(112,213,166,.28),transparent 64%);pointer-events:none; }
:root[data-ui-version="2"] .compass-menu-board>header { position:relative;z-index:2;display:flex;justify-content:space-between;gap:1rem;align-items:start;margin-bottom:1.25rem; }
:root[data-ui-version="2"] .compass-menu-board h2 { margin:.15rem 0;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.045em; }
:root[data-ui-version="2"] .compass-menu-board .icon-button svg { width:22px;height:22px; }
:root[data-ui-version="2"] .compass-menu { position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;width:min(630px,76%); }
:root[data-ui-version="2"] .compass-menu button {
  display:grid;grid-template-columns:48px 1fr;align-items:center;gap:.8rem;min-height:80px;padding:.85rem;text-align:left;
  border:1px solid var(--line);border-radius:20px;color:var(--ink);background:color-mix(in srgb,var(--card) 92%,transparent);box-shadow:0 8px 22px rgba(7,53,56,.08);cursor:pointer;
}
:root[data-ui-version="2"] .compass-menu button:hover { transform:translateY(-2px);border-color:var(--teal);box-shadow:0 14px 30px rgba(7,53,56,.14); }
:root[data-ui-version="2"] .compass-menu button[aria-current="page"] { border-color:var(--gold);background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 22%,var(--card)),var(--card));box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent); }
:root[data-ui-version="2"] .compass-menu svg { width:42px;height:42px;padding:.55rem;border-radius:14px;color:var(--teal-dark);background:var(--soft); }
:root[data-ui-version="2"] .compass-menu span,.compass-menu strong,.compass-menu small { display:block; }
:root[data-ui-version="2"] .compass-menu strong { font:800 1rem/1.1 var(--display-font); }
:root[data-ui-version="2"] .compass-menu small { margin-top:.25rem;color:var(--muted);font-size:.76rem; }
:root[data-ui-version="2"] .compass-mascot { position:absolute;z-index:1;right:-1rem;bottom:-2rem;width:38%;max-width:330px;pointer-events:none;filter:drop-shadow(0 22px 25px rgba(3,39,42,.25)); }

:root[data-ui-version="2"] .trail-planner {
  position:relative;isolation:isolate;display:grid!important;grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr)!important;
  min-height:clamp(620px,calc(100dvh - 130px),880px);margin:0;padding:clamp(.65rem,1.4vw,1.1rem);gap:.65rem;
  border:1px solid rgba(255,255,255,.28);border-radius:32px;background:#0b3740;box-shadow:0 30px 80px rgba(3,35,43,.22);overflow:hidden;
}
:root[data-ui-version="2"] .trail-biome-art { position:absolute;z-index:-3;inset:0;background-image:var(--trail-biome-image);background-size:cover;background-position:center;transition:background-image .3s ease; }
:root[data-ui-version="2"] .trail-atmosphere { position:absolute;z-index:-2;inset:0;background:linear-gradient(180deg,rgba(3,27,37,.6) 0,rgba(3,30,38,.08) 31%,rgba(3,25,30,.05) 64%,rgba(2,22,28,.5));pointer-events:none; }
:root[data-ui-version="2"] .trail-planner-head { position:relative;z-index:4;align-items:center;padding:.35rem .55rem;color:#fff; }
:root[data-ui-version="2"] .trail-planner-head .eyebrow { color:#b9f3df; }
:root[data-ui-version="2"] .trail-planner h1 { color:#fff;text-shadow:0 3px 12px rgba(0,0,0,.34);font-size:clamp(1.45rem,3vw,2.5rem); }
:root[data-ui-version="2"] .trail-summary { border:1px solid rgba(255,255,255,.16);background:rgba(5,39,47,.64);backdrop-filter:blur(12px); }
:root[data-ui-version="2"] .trail-summary span { border-color:rgba(255,255,255,.13);background:rgba(5,39,47,.78); }
:root[data-ui-version="2"] .trail-summary small { color:#b9d9d6; }
:root[data-ui-version="2"] .trail-summary strong { color:#fff; }
:root[data-ui-version="2"] .trail-leg-tabs { position:relative;z-index:4;justify-content:center;gap:.4rem;padding:0; }
:root[data-ui-version="2"] .trail-leg-tab { min-width:42px;min-height:38px;border-color:rgba(255,255,255,.25);color:#eefdf8;background:rgba(5,39,47,.6);backdrop-filter:blur(10px); }
:root[data-ui-version="2"] .trail-leg-tab[aria-pressed="true"] { color:#332507;background:var(--gold);border-color:#fff4c5;box-shadow:0 5px 16px rgba(0,0,0,.22); }
:root[data-ui-version="2"] .trail-quest-chip { display:none!important; }
:root[data-ui-version="2"] .trail-stage { position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:.8rem;min-height:0; }
:root[data-ui-version="2"] .trail-planner-route { grid-template-rows:minmax(0,1fr) auto;min-height:0; }
:root[data-ui-version="2"] .trail-map { min-height:520px;height:100%;border:0;border-radius:24px;background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);overflow:hidden; }
:root[data-ui-version="2"] .trail-map::before,
:root[data-ui-version="2"] .trail-map::after,
:root[data-ui-version="2"] .trail-map-landscape { display:none; }
:root[data-ui-version="2"] .trail-road-art { filter:drop-shadow(0 5px 5px rgba(0,0,0,.28)); }
:root[data-ui-version="2"] .trail-road-art #trailRoadPath { stroke:rgba(33,39,38,.72);stroke-width:28px; }
:root[data-ui-version="2"] .trail-road-art #trailRoadSurface { stroke:rgba(222,192,143,.92);stroke-width:21px; }
:root[data-ui-version="2"] .trail-road-art #trailRoadCenter { stroke:rgba(255,249,220,.92);stroke-width:2px;stroke-dasharray:7px 7px; }
:root[data-ui-version="2"] .trail-stop { width:58px;height:58px; }
:root[data-ui-version="2"] .trail-node { position:relative;width:58px;height:58px;min-height:58px;border:3px solid rgba(255,255,255,.92);background:rgba(238,245,239,.95);box-shadow:0 5px 14px rgba(0,25,31,.46); }
:root[data-ui-version="2"] .trail-node-badge { display:grid!important;place-items:center;width:100%;height:100%;font:900 1rem/1 var(--display-font); }
:root[data-ui-version="2"] .trail-node-number { position:absolute;right:-6px;bottom:-5px;width:23px;height:23px;border:2px solid #fff;background:#0d5e59!important;color:#fff!important;font-size:.58rem;box-shadow:0 3px 7px rgba(0,0,0,.25); }
:root[data-ui-version="2"] .trail-stop[data-status="completed"] .trail-node { background:#117b72;color:#fff; }
:root[data-ui-version="2"] .trail-stop[data-status="current"] .trail-node { background:#ffd36c;color:#3e2d09;animation:current-stop-pulse 2.4s ease-in-out infinite; }
:root[data-ui-version="2"] .trail-stop[data-status="locked"] .trail-node { opacity:.72;background:rgba(184,201,196,.9); }
@keyframes current-stop-pulse { 50% { box-shadow:0 0 0 9px rgba(255,211,108,.23),0 8px 20px rgba(0,25,31,.5); } }
:root[data-ui-version="2"] .trail-status { min-height:1.1rem;color:#f1fbf7!important;text-shadow:0 2px 6px rgba(0,0,0,.7); }
:root[data-ui-version="2"] .trail-checkpoint-panel.hero { display:grid!important;grid-template-columns:1fr;align-content:end;min-height:0;padding:1rem;border:1px solid rgba(255,255,255,.18);border-radius:24px;color:#fff;background:linear-gradient(180deg,rgba(6,42,48,.5),rgba(5,35,42,.9));backdrop-filter:blur(14px);box-shadow:0 18px 42px rgba(0,20,26,.28); }
:root[data-ui-version="2"] .trail-checkpoint-panel.hero::before { display:none; }
:root[data-ui-version="2"] .trail-checkpoint-panel.hero h2 { margin:.15rem 0 .5rem;font-size:clamp(1.25rem,2.2vw,2rem); }
:root[data-ui-version="2"] .trail-checkpoint-panel .hero-context { color:#d8ece7;background:rgba(0,0,0,.13); }
:root[data-ui-version="2"] .trail-checkpoint-panel .trail-welcome { font-size:.86rem; }
:root[data-ui-version="2"] .trail-checkpoint-panel .button.primary { color:#213006;background:linear-gradient(135deg,#fff5c7,#f5bf59); }
:root[data-ui-version="2"] .checkpoint-guide { align-self:end;justify-self:center;width:min(170px,60%);max-height:210px;filter:drop-shadow(0 15px 15px rgba(0,0,0,.28));overflow:hidden; }
:root[data-ui-version="2"] .checkpoint-guide img { width:100%;transform:translateY(13%); }

:root[data-ui-version="2"] .page-intro { padding:clamp(1.2rem,3vw,2.1rem);border:1px solid var(--line);border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--mint) 13%,var(--card)),var(--card));box-shadow:0 14px 38px rgba(4,50,54,.08); }
:root[data-ui-version="2"] .page-intro h1 { font-size:clamp(2.2rem,5vw,4.4rem); }
:root[data-ui-version="2"] .illustrated-intro { position:relative;min-height:220px;padding-right:min(31vw,310px);overflow:hidden; }
:root[data-ui-version="2"] .illustrated-intro>img { position:absolute;right:2%;bottom:-30%;width:min(29vw,280px);max-height:290px;object-fit:contain;filter:drop-shadow(0 15px 20px rgba(5,43,48,.2)); }

:root[data-ui-version="2"] .game-library { margin-top:.25rem; }
:root[data-ui-version="2"] .game-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:1.15rem; }
:root[data-ui-version="2"] .game-card { position:relative;border:1px solid color-mix(in srgb,var(--game-accent) 36%,var(--line));border-radius:26px;background:var(--card);box-shadow:0 12px 30px rgba(5,43,48,.1);transition:transform .2s ease,box-shadow .2s ease; }
:root[data-ui-version="2"] .game-card:hover { transform:translateY(-5px);box-shadow:0 24px 48px rgba(5,43,48,.17); }
:root[data-ui-version="2"] .game-thumb { aspect-ratio:16/9;min-height:0;overflow:hidden;background:var(--night); }
:root[data-ui-version="2"] .game-thumb picture,
:root[data-ui-version="2"] .game-thumb img { display:block;width:100%;height:100%; }
:root[data-ui-version="2"] .game-thumb img { object-fit:cover;transition:transform .35s ease; }
:root[data-ui-version="2"] .game-card:hover .game-thumb img { transform:scale(1.035); }
:root[data-ui-version="2"] .game-thumb::after { content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,rgba(4,25,31,.62));pointer-events:none; }
:root[data-ui-version="2"] .game-thumb .type-chip { z-index:2;color:var(--game-accent-text);background:var(--game-accent);border:1px solid rgba(255,255,255,.65); }
:root[data-ui-version="2"] .game-art-icon { position:absolute;z-index:2;right:.75rem;bottom:.65rem;display:grid!important;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.62);border-radius:15px;color:#fff;background:rgba(3,29,35,.7);backdrop-filter:blur(10px);font:900 1rem/1 var(--display-font); }
:root[data-ui-version="2"] .game-card-body { padding:1.05rem 1.1rem 1.15rem; }
:root[data-ui-version="2"] .game-card-title { margin-bottom:.55rem; }
:root[data-ui-version="2"] .game-card-title h3 { margin:0;font-size:1.3rem; }
:root[data-ui-version="2"] .game-card-title>span { display:block;margin-top:.2rem;color:var(--teal-dark);font-size:.78rem;font-weight:800; }
:root[data-ui-version="2"] .game-card .button.primary { background:var(--game-accent);color:var(--game-accent-text);box-shadow:0 7px 16px color-mix(in srgb,var(--game-accent) 28%,transparent); }

:root[data-ui-version="2"] .goal-card { position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--gold) 44%,var(--line));border-radius:26px;background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 12%,var(--card)),var(--card));box-shadow:0 13px 32px rgba(5,43,48,.08); }
:root[data-ui-version="2"] .goal-card::before { content:"";position:absolute;right:-35px;top:-42px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--gold) 30%,transparent),transparent 70%); }
:root[data-ui-version="2"] .garden-panel { position:relative;overflow:hidden;border:1px solid rgba(112,213,166,.38);border-radius:30px;background:linear-gradient(140deg,color-mix(in srgb,var(--mint) 18%,var(--card)),var(--card));box-shadow:var(--shadow); }
:root[data-ui-version="2"] .garden-scene { min-height:260px;border:1px solid rgba(255,255,255,.45);border-radius:24px;background:linear-gradient(180deg,#98d6dc 0 42%,#dce9cc 43% 66%,#789c68 67%);box-shadow:inset 0 0 45px rgba(5,70,65,.12); }
:root[data-ui-version="2"] .garden-guide { position:absolute;z-index:4;right:1%;bottom:-24%;width:min(34%,220px);height:auto;filter:drop-shadow(0 15px 18px rgba(4,43,43,.25)); }
:root[data-ui-version="2"] .garden-item { z-index:3;filter:drop-shadow(0 5px 5px rgba(0,0,0,.18)); }

:root[data-ui-version="2"] .ranking-podium { display:flex;align-items:end;justify-content:center;gap:.55rem;min-height:130px;margin:1rem auto;padding:1rem;border-radius:25px;background:linear-gradient(180deg,color-mix(in srgb,var(--mint) 17%,var(--card)),var(--card)); }
:root[data-ui-version="2"] .podium { display:grid;place-items:center;width:88px;border-radius:18px 18px 7px 7px;color:#fff;background:var(--teal);font:900 1.4rem/1 var(--display-font);box-shadow:0 10px 22px rgba(5,43,48,.14); }
:root[data-ui-version="2"] .podium.first { height:102px;background:linear-gradient(#ffd978,#dca93c);color:#432f08; }
:root[data-ui-version="2"] .podium.second { height:76px;background:linear-gradient(#a8c8d0,#688d98); }
:root[data-ui-version="2"] .podium.third { height:60px;background:linear-gradient(#d69369,#9d5e3e); }

:root[data-ui-version="2"] .game-view { grid-template-rows:58px minmax(0,1fr);background:#041820; }
:root[data-ui-version="2"] .game-view>header { background:linear-gradient(90deg,#062a34,#0c4850);border-bottom:1px solid color-mix(in srgb,var(--game-accent) 50%,transparent); }
:root[data-ui-version="2"] .game-loading { inset:58px 0 0;display:grid;grid-template-columns:minmax(240px,680px);grid-template-rows:minmax(0,1fr) auto;align-content:center;justify-items:center;padding:clamp(1rem,4vw,3rem);gap:1.2rem;background:radial-gradient(circle at 50% 24%,color-mix(in srgb,var(--game-accent) 18%,#092b33),#041820 68%);text-align:center; }
:root[data-ui-version="2"] .game-loading>img { width:min(680px,90vw);max-height:55vh;aspect-ratio:16/9;object-fit:cover;border:1px solid rgba(255,255,255,.2);border-radius:30px;box-shadow:0 28px 70px rgba(0,0,0,.38);animation:loading-breathe 2.4s ease-in-out infinite; }
:root[data-ui-version="2"] .game-loading>div { display:grid;gap:.3rem; }
@keyframes loading-breathe { 50% { transform:translateY(-5px) scale(1.006); } }
:root[data-ui-version="2"] .result-modal { overflow:hidden;isolation:isolate;padding-top:2rem;background:linear-gradient(145deg,color-mix(in srgb,var(--game-accent) 12%,var(--card)),var(--card)); }
:root[data-ui-version="2"] .result-modal::before { content:"";position:absolute;z-index:-2;inset:0 0 auto;height:150px;background-image:linear-gradient(180deg,rgba(3,27,34,.2),var(--card)),var(--result-art);background-size:cover;background-position:center;opacity:.5; }
:root[data-ui-version="2"] .result-mascot { position:absolute;z-index:-1;right:-4%;top:1rem;width:min(34%,180px);max-height:210px;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(4,40,45,.22));opacity:.96; }
:root[data-ui-version="2"] .big-award { color:var(--teal-dark);text-shadow:0 2px 0 #fff; }

:root[data-ui-version="2"][data-theme="contrast"] .trail-biome-art { opacity:.22;filter:grayscale(1) contrast(1.4); }
:root[data-ui-version="2"][data-theme="contrast"] .trail-atmosphere { background:rgba(0,0,0,.64); }
:root[data-ui-version="2"][data-theme="contrast"] .compass-menu button,
:root[data-ui-version="2"][data-theme="contrast"] .game-card,
:root[data-ui-version="2"][data-theme="contrast"] .goal-card { border:2px solid #fff; }

@media (min-width:851px) and (min-height:700px) {
  :root[data-ui-version="2"] body:has(#trailView:not([hidden])) { height:100dvh;overflow:hidden; }
  :root[data-ui-version="2"] body:has(#trailView:not([hidden])) main { display:grid;grid-template-rows:auto minmax(0,1fr);height:calc(100dvh - 68px);padding-bottom:.65rem;overflow:hidden; }
  :root[data-ui-version="2"] #trailView:not([hidden]),
  :root[data-ui-version="2"] #trailView:not([hidden]) .trail-planner { height:100%;min-height:0; }
  :root[data-ui-version="2"] #trailView:not([hidden]) .trail-map { min-height:0; }
}

@media (max-width:1000px) {
  :root[data-ui-version="2"] .trail-stage { grid-template-columns:minmax(0,1fr) 270px; }
  :root[data-ui-version="2"] .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  :root[data-ui-version="2"] .compass-menu { width:74%; }
}

@media (max-width:760px) {
  :root[data-ui-version="2"] .site-header { min-height:60px;padding:.4rem .55rem; }
  :root[data-ui-version="2"] .brand-lockup { width:156px;height:48px; }
  :root[data-ui-version="2"] .status-pill { display:none; }
  :root[data-ui-version="2"] .points-pill { min-width:82px;padding:.35rem .55rem; }
  :root[data-ui-version="2"] .points-pill span { font-size:.52rem; }
  :root[data-ui-version="2"] .points-pill strong { font-size:1rem; }
  :root[data-ui-version="2"] .compass-button { width:44px;padding:.45rem;justify-content:center; }
  :root[data-ui-version="2"] .compass-button span { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
  :root[data-ui-version="2"] main { width:min(100% - .7rem,760px);padding:.4rem 0 2.5rem; }
  :root[data-ui-version="2"] .compass-menu-dialog { width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0; }
  :root[data-ui-version="2"] .compass-menu-board { min-height:100dvh;padding:1rem;border-radius:0; }
  :root[data-ui-version="2"] .compass-menu { grid-template-columns:1fr;width:100%;padding-bottom:7rem; }
  :root[data-ui-version="2"] .compass-menu button { min-height:68px;grid-template-columns:42px 1fr; }
  :root[data-ui-version="2"] .compass-menu svg { width:38px;height:38px; }
  :root[data-ui-version="2"] .compass-mascot { position:fixed;right:-2rem;bottom:-4rem;width:190px;opacity:.28; }
  :root[data-ui-version="2"] .trail-planner { min-height:calc(100dvh - 68px);border-radius:22px;padding:.45rem;gap:.4rem; }
  :root[data-ui-version="2"] .trail-planner-head { gap:.5rem;padding:.25rem .4rem; }
  :root[data-ui-version="2"] .trail-title .eyebrow { display:none; }
  :root[data-ui-version="2"] .trail-planner h1 { font-size:1.1rem;white-space:nowrap; }
  :root[data-ui-version="2"] .trail-summary span:first-child { display:none; }
  :root[data-ui-version="2"] .trail-summary span { padding:.3rem .4rem; }
  :root[data-ui-version="2"] .trail-summary small { font-size:.48rem; }
  :root[data-ui-version="2"] .trail-summary strong { font-size:.68rem; }
  :root[data-ui-version="2"] .trail-stage { grid-template-columns:1fr;grid-template-rows:minmax(300px,1fr) auto;gap:.4rem; }
  :root[data-ui-version="2"] .trail-map { min-height:340px;border-radius:17px; }
  :root[data-ui-version="2"] .trail-stop,
  :root[data-ui-version="2"] .trail-node { width:48px;height:48px;min-height:48px; }
  :root[data-ui-version="2"] .trail-node-number { width:20px;height:20px;font-size:.52rem; }
  :root[data-ui-version="2"] .trail-checkpoint-panel.hero { grid-template-columns:minmax(0,1fr) 76px;align-items:center;min-height:116px;padding:.62rem .72rem; }
  :root[data-ui-version="2"] .trail-checkpoint-panel.hero h2 { font-size:1.02rem; }
  :root[data-ui-version="2"] .trail-checkpoint-panel.hero .eyebrow { font-size:.5rem; }
  :root[data-ui-version="2"] .trail-checkpoint-panel .trail-welcome { display:none; }
  :root[data-ui-version="2"] .trail-checkpoint-panel .hero-context { margin:.2rem 0 .35rem;padding:.3rem .4rem;font-size:.62rem; }
  :root[data-ui-version="2"] .trail-checkpoint-panel .button { min-height:36px;padding:.4rem .6rem;font-size:.72rem; }
  :root[data-ui-version="2"] .checkpoint-guide { width:90px;max-height:112px; }
  :root[data-ui-version="2"] .trail-status { font-size:.64rem!important;white-space:normal; }
  :root[data-ui-version="2"] .game-grid { grid-template-columns:1fr; }
  :root[data-ui-version="2"] .game-card { display:grid;grid-template-columns:42% 58%; }
  :root[data-ui-version="2"] .game-thumb { height:100%;min-height:230px;aspect-ratio:auto;border-radius:0; }
  :root[data-ui-version="2"] .game-card-body { padding:.9rem; }
  :root[data-ui-version="2"] .game-card-body>p:not(.game-detail-line) { display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
  :root[data-ui-version="2"] .illustrated-intro { min-height:190px;padding-right:34%; }
  :root[data-ui-version="2"] .garden-scene { min-height:210px; }
  :root[data-ui-version="2"] .game-loading { inset:56px 0 0; }
}

@media (max-width:470px) {
  :root[data-ui-version="2"] .brand-lockup { width:132px; }
  :root[data-ui-version="2"] .install-button { display:none; }
  :root[data-ui-version="2"] .game-card { display:block; }
  :root[data-ui-version="2"] .game-thumb { min-height:0;aspect-ratio:16/9; }
  :root[data-ui-version="2"] .trail-leg-tab { min-width:34px;min-height:32px;font-size:.62rem; }
  :root[data-ui-version="2"] .trail-map { min-height:300px; }
  :root[data-ui-version="2"] .illustrated-intro { padding-right:1.2rem; }
  :root[data-ui-version="2"] .illustrated-intro>img { opacity:.18;width:55%; }
}

@media (max-height:600px) and (min-width:761px) {
  :root[data-ui-version="2"] .compass-menu-dialog {
    width:min(920px,calc(100vw - 1rem));max-height:calc(100dvh - 1rem);border-radius:22px;overflow:auto;
  }
  :root[data-ui-version="2"] .compass-menu-board { min-height:0;padding:.7rem 1rem .8rem;border-radius:22px; }
  :root[data-ui-version="2"] .compass-menu-board>header { align-items:center;margin-bottom:.45rem; }
  :root[data-ui-version="2"] .compass-menu-board h2 { margin:0;font-size:1.65rem; }
  :root[data-ui-version="2"] .compass-menu-board .eyebrow { font-size:.58rem; }
  :root[data-ui-version="2"] .compass-menu { gap:.4rem;width:74%; }
  :root[data-ui-version="2"] .compass-menu button { min-height:52px;padding:.45rem .65rem;grid-template-columns:36px 1fr;gap:.55rem;border-radius:15px; }
  :root[data-ui-version="2"] .compass-menu svg { width:34px;height:34px;padding:.45rem;border-radius:11px; }
  :root[data-ui-version="2"] .compass-menu strong { font-size:.88rem; }
  :root[data-ui-version="2"] .compass-menu small { margin-top:.12rem;font-size:.65rem; }
  :root[data-ui-version="2"] .compass-mascot { right:-.5rem;bottom:-3.5rem;width:34%; }
}

/* Shell consistency and compact-screen contract v3 ----------------------- */
:root[data-ui-version="2"] .mobile-dock { display:none; }
:root[data-ui-version="2"] .game-card[data-game-card] { cursor:pointer; }
:root[data-ui-version="2"] .game-card[data-game-card]:focus-within { outline:3px solid color-mix(in srgb,var(--game-accent) 65%,transparent);outline-offset:2px; }
:root[data-ui-version="2"] .game-meta>span { display:grid;gap:.16rem;min-width:0; }
:root[data-ui-version="2"] .game-offline-status { display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-weight:800;color:var(--muted); }
:root[data-ui-version="2"] .game-offline-status::before { content:"";width:.48rem;height:.48rem;border-radius:50%;background:#889b9c; }
:root[data-ui-version="2"] .game-offline-status.ready { color:#16714e; }
:root[data-ui-version="2"] .game-offline-status.ready::before { background:#2bb878;box-shadow:0 0 0 3px rgba(43,184,120,.13); }
:root[data-ui-version="2"] .game-offline-status.needed { color:#9b4b2f; }
:root[data-ui-version="2"] .game-offline-status.needed::before { background:#cf704c; }
:root[data-ui-version="2"] .game-offline-status.checking::before { animation:offline-pulse 1s ease-in-out infinite; }
:root[data-ui-version="2"] .trail-checkpoint-panel .game-offline-status { margin:.1rem 0 .45rem;color:#d7ece7; }
:root[data-ui-version="2"] .trail-checkpoint-panel .game-offline-status.ready { color:#b9f3d4; }
@keyframes offline-pulse { 50% { opacity:.3;transform:scale(.75); } }

:root[data-ui-version="2"] .compass-menu-dialog[open] { overflow:auto;overscroll-behavior:contain; }
:root[data-ui-version="2"] .compass-menu-board { min-height:min(510px,calc(100dvh - 2rem)); }

:root[data-ui-version="2"] .game-view { grid-template-rows:52px minmax(0,1fr);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
:root[data-ui-version="2"] .game-view>header { min-width:0;gap:.65rem;padding:.3rem .65rem; }
:root[data-ui-version="2"] .game-view>header>.button { flex:0 1 auto;min-width:44px;max-width:min(34vw,150px);min-height:44px;overflow:hidden;padding:.42rem .65rem;text-overflow:ellipsis;white-space:nowrap; }
:root[data-ui-version="2"] .game-view>header>div { overflow:hidden; }
:root[data-ui-version="2"] .game-view>header strong,
:root[data-ui-version="2"] .game-view>header span { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
:root[data-ui-version="2"] .game-view>header strong { font-size:.94rem; }
:root[data-ui-version="2"] .game-view .mini-points { flex:0 0 auto;max-width:24vw; }
:root[data-ui-version="2"] .game-loading { inset:calc(52px + env(safe-area-inset-top)) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

:root[data-ui-version="2"] .result-modal[open] {
  display:grid;grid-template-rows:minmax(0,1fr) auto;width:min(600px,calc(100% - 1rem));
  max-height:calc(100dvh - max(1rem,env(safe-area-inset-top)) - max(1rem,env(safe-area-inset-bottom)));
  padding:0;overflow:hidden;
}
:root[data-ui-version="2"] .result-modal .result-scroll { min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:1.5rem 1.5rem .5rem;scrollbar-gutter:stable; }
:root[data-ui-version="2"] .result-modal>.close-button { z-index:5;top:.7rem;right:.7rem;background:color-mix(in srgb,var(--card) 86%,transparent);backdrop-filter:blur(8px); }
:root[data-ui-version="2"] .result-modal .result-actions { position:relative;z-index:4;display:grid;grid-template-columns:1fr 1fr;margin:0;padding:.8rem 1rem max(.8rem,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:color-mix(in srgb,var(--card) 94%,transparent);box-shadow:0 -10px 25px rgba(5,43,48,.08);backdrop-filter:blur(14px); }
:root[data-ui-version="2"] .result-modal .result-actions .button { min-height:48px; }
:root[data-ui-version="2"] .result-modal .result-actions .button:first-child { grid-column:1/-1; }

:root[data-ui-version="2"] .guest-anonymous-choice>p { margin:.65rem 0; }
:root[data-ui-version="2"] .guest-anonymous-details { color:var(--muted);font-size:.86rem; }
:root[data-ui-version="2"] .guest-anonymous-details summary { min-height:44px;display:flex;align-items:center;color:var(--teal-dark);font-weight:800;cursor:pointer; }
:root[data-ui-version="2"] .guest-anonymous-details p { margin:.25rem 0 0; }

@media (max-width:760px) {
  :root[data-ui-version="2"] body { padding-bottom:calc(66px + env(safe-area-inset-bottom)); }
  :root[data-ui-version="2"] .site-header {
    min-height:58px;
    padding-top:calc(.35rem + env(safe-area-inset-top));
    padding-right:max(.5rem,env(safe-area-inset-right));
    padding-left:max(.5rem,env(safe-area-inset-left));
  }
  :root[data-ui-version="2"] .site-header #installButton { display:none!important; }
  :root[data-ui-version="2"] .mobile-dock {
    position:fixed;z-index:120;inset:auto 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    min-height:62px;padding:.28rem max(.35rem,env(safe-area-inset-right)) calc(.28rem + env(safe-area-inset-bottom)) max(.35rem,env(safe-area-inset-left));
    border:0;border-top:1px solid var(--line);background:color-mix(in srgb,var(--card) 96%,transparent);box-shadow:0 -8px 28px rgba(13,66,58,.12);backdrop-filter:blur(18px);
  }
  :root[data-ui-version="2"] .mobile-dock button { display:grid;place-items:center;align-content:center;gap:.1rem;min-width:0;min-height:52px;padding:.22rem;border:0;border-radius:14px;color:var(--muted);background:transparent;font-size:.75rem;font-weight:800; }
  :root[data-ui-version="2"] .mobile-dock button svg { width:23px;height:23px; }
  :root[data-ui-version="2"] .mobile-dock button[aria-current="page"] { color:#fff;background:var(--teal);box-shadow:0 5px 13px rgba(15,111,104,.2); }
  :root[data-ui-version="2"] main { padding-right:env(safe-area-inset-right);padding-left:env(safe-area-inset-left);padding-bottom:1rem; }

  :root[data-ui-version="2"] .guest-connect-banner { margin-bottom:.35rem;border-radius:12px; }
  :root[data-ui-version="2"] .guest-connect-banner summary { min-height:44px;padding:.36rem .6rem; }
  :root[data-ui-version="2"] .guest-banner-body { padding:.6rem; }

  :root[data-ui-version="2"] .compass-menu-dialog { overflow-y:auto!important;overscroll-behavior:contain; }
  :root[data-ui-version="2"] .compass-menu-board { min-height:100%;height:auto;padding:max(.75rem,env(safe-area-inset-top)) max(.75rem,env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left));overflow:hidden; }
  :root[data-ui-version="2"] .compass-menu-board>header { position:sticky;z-index:5;top:0;margin:0 0 .5rem;padding:.2rem 0 .5rem;background:linear-gradient(var(--card) 70%,transparent); }
  :root[data-ui-version="2"] .compass-menu-board h2 { font-size:1.55rem; }
  :root[data-ui-version="2"] .compass-menu { gap:.42rem;padding-bottom:1rem; }
  :root[data-ui-version="2"] .compass-menu button { min-height:58px;padding:.48rem .65rem;grid-template-columns:38px 1fr;gap:.6rem;border-radius:16px; }
  :root[data-ui-version="2"] .compass-menu svg { width:36px;height:36px;padding:.45rem; }
  :root[data-ui-version="2"] .compass-menu small { margin-top:.08rem;font-size:.7rem; }

  :root[data-ui-version="2"] .page-intro { max-width:none;margin:0 0 .65rem;padding:.78rem .9rem;border-radius:18px; }
  :root[data-ui-version="2"] .page-intro h1 { font-size:clamp(1.45rem,8vw,2rem); }
  :root[data-ui-version="2"] .page-intro>p:not(.eyebrow) { margin:.35rem 0 0;font-size:.82rem;line-height:1.35; }
  :root[data-ui-version="2"] .illustrated-intro { min-height:0;padding-right:5.5rem; }
  :root[data-ui-version="2"] .illustrated-intro>img { right:.25rem;bottom:-35%;width:90px;opacity:.32; }
  :root[data-ui-version="2"] .more-intro { margin-bottom:.4rem; }
  :root[data-ui-version="2"] .garden-panel { margin:.4rem 0 .7rem;padding:.75rem;border-radius:20px; }
  :root[data-ui-version="2"] .garden-scene { min-height:140px; }
  :root[data-ui-version="2"] .more-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  :root[data-ui-version="2"] .trail-planner { min-height:calc(100dvh - 124px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  :root[data-ui-version="2"] .trail-checkpoint-panel .button { min-height:48px; }

  :root[data-ui-version="2"] .library-view .section-heading { margin:.1rem 0 .55rem;gap:.5rem; }
  :root[data-ui-version="2"] .library-view .section-heading h1 { font-size:1.55rem; }
  :root[data-ui-version="2"] .library-view .section-heading p:not(.eyebrow) { margin:.2rem 0;font-size:.76rem;line-height:1.3; }
  :root[data-ui-version="2"] .library-view .search-label input { min-height:44px;margin-top:.18rem; }
  :root[data-ui-version="2"] .discovery-chips { position:sticky;z-index:12;top:calc(58px + env(safe-area-inset-top));margin:0 -.35rem .55rem;padding:.3rem .35rem;background:color-mix(in srgb,var(--paper) 94%,transparent);scrollbar-width:none;backdrop-filter:blur(12px); }
  :root[data-ui-version="2"] .discovery-chips::-webkit-scrollbar { display:none; }
  :root[data-ui-version="2"] .discovery-chips button { min-height:44px; }
  :root[data-ui-version="2"] .game-grid { gap:.65rem; }
  :root[data-ui-version="2"] .game-card { grid-template-columns:clamp(126px,34vw,168px) minmax(0,1fr);min-height:184px;max-height:none;transform:none!important;border-radius:20px; }
  :root[data-ui-version="2"] .game-thumb { min-height:184px;height:100%;aspect-ratio:auto; }
  :root[data-ui-version="2"] .game-card-body { padding:.7rem .75rem;overflow:hidden; }
  :root[data-ui-version="2"] .game-card-title { margin-bottom:.32rem; }
  :root[data-ui-version="2"] .game-card-title h3 { font-size:1.08rem;line-height:1.12; }
  :root[data-ui-version="2"] .game-card-title>span { margin-top:.12rem;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  :root[data-ui-version="2"] .game-card .game-detail-line { display:none; }
  :root[data-ui-version="2"] .game-card-body>p:not(.game-detail-line) { margin:0 0 .4rem;font-size:.77rem;line-height:1.3;-webkit-line-clamp:2; }
  :root[data-ui-version="2"] .game-progress-row { gap:.28rem;margin:.1rem 0 .4rem; }
  :root[data-ui-version="2"] .game-progress-row>span { font-size:.68rem; }
  :root[data-ui-version="2"] .game-best { display:none; }
  :root[data-ui-version="2"] .game-meta { margin-top:auto; }
  :root[data-ui-version="2"] .game-card-actions .button { min-height:44px; }
  :root[data-ui-version="2"] .read-game-button { width:44px; }

  :root[data-ui-version="2"] .ranking-podium { display:none; }
  :root[data-ui-version="2"] .filter-bar { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-bottom:.55rem; }
  :root[data-ui-version="2"] .filter-bar label { min-width:0; }
  :root[data-ui-version="2"] .filter-bar label[hidden] { display:none; }
  :root[data-ui-version="2"] .ranking-guide { margin:.1rem 0 .55rem;font-size:.72rem; }
  :root[data-ui-version="2"] .ranking-guide #rankingRefreshStatus { display:none; }

  :root[data-ui-version="2"] .game-view { grid-template-rows:52px minmax(0,1fr); }
  :root[data-ui-version="2"] .game-loading { inset:calc(52px + env(safe-area-inset-top)) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  :root[data-ui-version="2"] .game-loading>img { width:min(520px,94vw);border-radius:20px; }
  :root[data-ui-version="2"] .game-view>header { padding:.25rem .45rem; }

  :root[data-ui-version="2"] .toast { top:calc(64px + env(safe-area-inset-top));bottom:auto;max-width:calc(100% - 1rem); }
  :root[data-ui-version="2"] .button.compact { min-height:44px; }
}

@media (max-width:470px) {
  :root[data-ui-version="2"] .brand-lockup { width:112px; }
  :root[data-ui-version="2"] .points-pill { min-width:70px;padding:.3rem .42rem; }
  :root[data-ui-version="2"] .game-card { display:grid;grid-template-columns:108px minmax(0,1fr);min-height:156px;overflow:hidden; }
  :root[data-ui-version="2"] .game-thumb { min-height:156px;height:100%;aspect-ratio:auto; }
  :root[data-ui-version="2"] .game-thumb .type-chip { top:.42rem;left:.42rem;max-width:calc(100% - .84rem);overflow:hidden;padding:.24rem .4rem;text-overflow:ellipsis;white-space:nowrap;font-size:.58rem; }
  :root[data-ui-version="2"] .game-art-icon { display:none!important; }
  :root[data-ui-version="2"] .game-card-body { padding:.58rem .62rem; }
  :root[data-ui-version="2"] .game-card-title h3 { font-size:1rem; }
  :root[data-ui-version="2"] .game-card-body>p:not(.game-detail-line) { display:none; }
  :root[data-ui-version="2"] .game-meta { align-items:end; }
  :root[data-ui-version="2"] .game-meta .read-game-button { display:none; }
  :root[data-ui-version="2"] .game-meta .button.primary { min-width:62px;padding:.45rem .62rem; }
  :root[data-ui-version="2"] .game-offline-status { font-size:.62rem; }
  :root[data-ui-version="2"] .game-view>header>span { display:none; }
  :root[data-ui-version="2"] .game-view>header>div span { font-size:.65rem; }
  :root[data-ui-version="2"] .result-modal .result-scroll { padding:1.05rem .9rem .35rem; }
  :root[data-ui-version="2"] .result-modal .result-mascot { width:110px;max-height:120px;right:-7%;top:.2rem;opacity:.78; }
  :root[data-ui-version="2"] .result-modal h2 { max-width:75%;font-size:1.35rem; }
  :root[data-ui-version="2"] .result-modal .big-award { font-size:2.55rem; }
  :root[data-ui-version="2"] .result-modal .result-highlights { gap:.38rem;margin:.65rem 0; }
  :root[data-ui-version="2"] .result-modal .result-highlight { padding:.55rem .62rem; }
  :root[data-ui-version="2"] .result-modal .result-actions { grid-template-columns:1fr;padding:.55rem .65rem max(.55rem,env(safe-area-inset-bottom));gap:.45rem; }
  :root[data-ui-version="2"] .result-modal .result-actions .button:first-child { grid-column:auto; }
}

@media (max-height:640px) {
  :root[data-ui-version="2"] .result-modal { max-height:calc(100dvh - .5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  :root[data-ui-version="2"] .result-modal .result-mascot { width:92px;max-height:98px;opacity:.62; }
  :root[data-ui-version="2"] .result-modal .result-scroll { padding-top:.8rem; }
  :root[data-ui-version="2"] .result-modal .result-scroll>p { margin:.35rem 0; }
}