/* Swabby homepage. The game's own UI in daylight: cream panels, navy 2.5px outlines with a hard drop,
   Fredoka for display, Rubik for text, pixel icons at whole-number scales.
   An app shell, not a long page: the cove scene is the backdrop and a dock of tabs switches the views
   (Home, Articles, Quests, Game, Swabbies, FAQ). The dock floats at the bottom on phones and sits in the HUD on desktop. */
:root {
  --cream: #FBF7EF; --cream-hi: #FFFDF8; --cream-2: #F1EADC; --cream-3: #E6DCC8; --cream-4: #C9BDA5;
  --navy: #1B3A57; --ink: #16324A; --ink-2: #4E6274;
  --go: #2E9E4C; --go-hi: #5FCB78; --go-2: #24843E; --go-3: #175E2B;
  --gold: #F5B43C; --gold-hi: #FFE08A; --gold-2: #E39A1E; --gold-3: #8A5A08;
  --red: #C23A2A; --good: #1F7A43; --ring: #2A6FB0;
  --t-common: #8696A4; --t-uncommon: #3FA45B; --t-rare: #3B7BB5; --t-epic: #8E5BC8; --t-legendary: #E39A1E;
  --sea: #1AB3D1; --sea-2: #2FC4D6; --sand: #F6C978; --sand-2: #F9DA98; --beach: #FAC46E; --sand-ink: #5B4A2A;
  --lagoon: #47C3D9; --lagoon-2: #2B9FD0; --deep: #1E6E9F; --deep-2: #175C88; --on-deep: #E6F4FC;
  --paper: #F3E2B8; --paper-2: #E9D29C; --paper-ink: #3A1F0C;
  --well: #05050A;
  --drop: 0 5px 0 var(--navy), 0 14px 26px -12px rgba(6, 48, 82, .5);
  --ease: cubic-bezier(.23, 1, .32, 1); --ease-hero: cubic-bezier(.16, 1, .3, 1);
  --fn: "Fredoka", "Rubik", system-ui, sans-serif;
  --fb: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fnum: "Fredoka Tnum", "Fredoka", "Rubik", system-ui, sans-serif;
  --hud: 58px; --top: calc(var(--hud) + env(safe-area-inset-top));
  --dockh: 66px; --bot: calc(var(--dockh) + 16px + env(safe-area-inset-bottom));
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { margin: 0; background: var(--sea); color: var(--ink); font: 500 16px/1.55 var(--fb); -webkit-tap-highlight-color: transparent; }
img, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { touch-action: manipulation; }
h1, h2, h3, h4 { font-family: var(--fn); font-weight: 700; margin: 0; line-height: 1.08; text-wrap: balance; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; }
::selection { background: var(--gold-hi); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 6px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 50; background: var(--cream); border: 2.5px solid var(--navy); border-radius: 12px; padding: 10px 14px; font: 700 16px/1 var(--fn); text-decoration: none; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }

/* pixel art: whole-number scales only */
img[class^="px"], img[class*=" px"], .tiles img, .seal, .pface, .dwells img { image-rendering: pixelated; image-rendering: crisp-edges; }
.px2[width="16"] { width: 32px; height: 32px; }
.px2[width="24"] { width: 48px; height: 48px; }
.px2[width="48"] { width: 96px; height: 96px; }
.px3[width="16"] { width: 48px; height: 48px; }
.px4[width="48"] { width: 192px; height: 192px; }
.px6[width="16"] { width: 96px; height: 96px; }
.px1 { flex: none; }

.panel { background: linear-gradient(180deg, var(--cream-hi), var(--cream) 55%, var(--cream-2)); border: 2.5px solid var(--navy); border-radius: 20px; box-shadow: var(--drop); }
.quiet { color: var(--ink-2); font-size: 15px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 600; font-size: .92em; word-break: break-all; }

/* ---------- buttons, straight from the game ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 17px/1 var(--fn); text-decoration: none; cursor: pointer; white-space: nowrap; border: 0; -webkit-user-select: none; user-select: none;
  transition: transform 140ms var(--ease), box-shadow 140ms var(--ease), filter 160ms ease, opacity 200ms ease; }
.btn img { flex: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:not(:disabled):active { transform: translateY(2px); }
.btn-lg { height: 56px; padding: 0 22px 0 16px; border-radius: 16px; font-size: 19px; }
.btn-md { height: 48px; padding: 0 18px; border-radius: 14px; }
.btn-go { color: #fff; border: 2.5px solid var(--go-3); background: linear-gradient(180deg, var(--go-hi), var(--go) 46%, var(--go-2));
  box-shadow: inset 0 3px 0 rgba(255,255,255,.38), inset 0 -5px 0 rgba(0,0,0,.14), 0 5px 0 var(--go-3), 0 14px 22px -10px rgba(6,48,82,.55);
  text-shadow: 0 1.5px 0 var(--go-3), 1.5px 0 0 var(--go-3), -1.5px 0 0 var(--go-3), 0 -1.5px 0 var(--go-3); }
.btn-go:not(:disabled):active { box-shadow: inset 0 3px 0 rgba(255,255,255,.38), inset 0 -5px 0 rgba(0,0,0,.14), 0 3px 0 var(--go-3); }
.btn-cream { color: var(--ink); border: 2.5px solid var(--navy); background: linear-gradient(180deg, var(--cream-hi), var(--cream) 55%, var(--cream-2)); box-shadow: inset 0 3px 0 #fff, 0 5px 0 var(--navy), 0 14px 22px -10px rgba(6,48,82,.5); }
.btn-cream:not(:disabled):active { box-shadow: inset 0 3px 0 #fff, 0 3px 0 var(--navy); }
.btn-gold { height: 50px; padding: 0 20px 0 14px; border-radius: 999px; color: var(--ink); border: 2.5px solid var(--gold-3); background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-2)); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 4px 0 var(--gold-3); }
.btn-gold:not(:disabled):active { box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 2px 0 var(--gold-3); }
.btn-white { height: 44px; padding: 0 16px; border-radius: 12px; background: #fff; color: var(--ink); border: 2.5px solid var(--navy); box-shadow: 0 3px 0 var(--navy); font-size: 16px; }
.btn-white:not(:disabled):active { box-shadow: 0 1px 0 var(--navy); }
.btn-white.btn-lg { height: 56px; font-size: 18px; padding: 0 20px; border-radius: 16px; box-shadow: 0 5px 0 var(--navy); }
.btn-ink { height: 52px; padding: 0 22px; border-radius: 14px; color: #fff; background: linear-gradient(180deg, #2E5578, var(--ink)); border: 2.5px solid #0D2236; box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 4px 0 #0D2236; font-size: 18px; }
.btn-ink:not(:disabled):active { box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 2px 0 #0D2236; }
@media (hover: hover) and (pointer: fine) { .btn:not(:disabled):hover { filter: brightness(1.05) saturate(1.05); } }
.textlink { background: none; border: 0; padding: 6px 4px; font: 600 15px/1 var(--fb); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.textlink:hover { color: var(--ink); }

/* ---------- the scene: the cove stays behind every view ---------- */
/* Home shows it clear. Every other tab lays its panels over the same cove, softened and sunk into the sea
   so the cream panels read, the way the game dims the world behind a menu. */
.scene { position: fixed; z-index: 0; top: var(--top); left: 0; right: 0; bottom: 0; overflow: hidden; background: #59B8EA; }
.scene picture, .scene .cove { width: 100%; height: 100%; }
.scene .cove { object-fit: cover; object-position: 50% 0; animation: coveIn 900ms var(--ease-hero) backwards;
  transition: filter 320ms var(--ease), transform 320ms var(--ease); }
@keyframes coveIn { from { opacity: 0; transform: scale(1.03); } }
.scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 320ms var(--ease);
  background: linear-gradient(180deg, rgba(22,104,150,.62), rgba(18,78,120,.74) 60%, rgba(16,66,104,.82)); }
html:not([data-tab="home"]) .scene .cove { filter: blur(8px) saturate(1.08); transform: scale(1.06); }
html:not([data-tab="home"]) .scene::after { opacity: 1; }

/* ---------- HUD ---------- */
.hud { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: var(--top); display: flex; align-items: center; gap: 12px;
  padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  background: linear-gradient(180deg, var(--cream-hi), var(--cream) 60%, var(--cream-2)); border-bottom: 2.5px solid var(--navy); box-shadow: 0 4px 0 rgba(27,58,87,.25); }
.brand { display: block; flex: none; border-radius: 8px; }
.brand img { width: auto; height: 32px; }
.btn-hud { margin-left: auto; height: 42px; padding: 0 15px 0 9px; border-radius: 13px; font-size: 16px; gap: 6px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.38), inset 0 -4px 0 rgba(0,0,0,.14), 0 4px 0 var(--go-3); }
.btn-hud:not(:disabled):active { box-shadow: inset 0 3px 0 rgba(255,255,255,.38), inset 0 -4px 0 rgba(0,0,0,.14), 0 2px 0 var(--go-3); }

/* ---------- the dock: tabs like the game's dock chips ---------- */
/* phones and tablets: a floating bar at the bottom, in thumb reach */
.dock { position: fixed; z-index: 30; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: calc(8px + env(safe-area-inset-bottom));
  height: var(--dockh); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; padding: 5px; max-width: 640px; margin: 0 auto;
  background: linear-gradient(180deg, var(--cream-hi), var(--cream) 55%, var(--cream-2)); border: 2.5px solid var(--navy); border-radius: 20px;
  box-shadow: 0 4px 0 var(--navy), 0 16px 26px -10px rgba(6,40,70,.6); }
.tab { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; border-radius: 14px; border: 2px solid transparent;
  text-decoration: none; color: var(--ink-2); font: 700 12px/1.05 var(--fn); -webkit-user-select: none; user-select: none; cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, transform 160ms var(--ease), box-shadow 160ms var(--ease); }
.tab-ic { width: 32px; height: 32px; display: grid; place-items: center; flex: none; }
.tab-ic img { image-rendering: pixelated; image-rendering: crisp-edges; transition: transform 160ms var(--ease); }
.tab-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab[aria-selected="true"] { background: #fff; border-color: var(--navy); color: var(--ink); box-shadow: 0 3px 0 var(--navy); transform: translateY(-2px); }
.tab:active { transform: translateY(1px); }
.tab:focus-visible { outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .tab:not([aria-selected="true"]):hover { background: rgba(255,255,255,.7); color: var(--ink); }
  .tab:not([aria-selected="true"]):hover .tab-ic img { transform: translateY(-1px); }
}
@media (max-width: 400px) { .tab { font-size: 11.5px; letter-spacing: -.01em; } .dock { gap: 2px; padding: 4px; } }
@media (max-width: 359px) { .tab { font-size: 11px; } .dock { gap: 1px; } }

/* landscape phones: a slimmer HUD and dock, icon beside the label */
@media (max-height: 500px) and (max-width: 1099px) {
  :root { --hud: 50px; --dockh: 48px; }
  .btn-hud { height: 38px; }
  .dock { max-width: 760px; padding: 3px 4px; }
  .tab { display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 13px; }
  .tab[aria-selected="true"] { transform: none; box-shadow: 0 2px 0 var(--navy); }
}
/* desktop: the dock moves up into the HUD as a segmented bar */
@media (min-width: 1100px) {
  :root { --hud: 72px; --bot: 0px; }
  .hud { gap: 18px; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
  .brand img { height: 36px; }
  .dock { position: static; height: 52px; margin: 0 auto; display: flex; gap: 3px; padding: 4px; max-width: none;
    background: var(--cream-2); border: 2px solid var(--cream-3); border-radius: 17px; box-shadow: inset 0 2px 0 rgba(27,58,87,.07); }
  .tab { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 12px 0 5px; font-size: 15.5px; border-radius: 12px; }
  .tab[aria-selected="true"] { transform: none; box-shadow: 0 3px 0 var(--navy); }
  .tab:active { transform: translateY(1px); }
  .btn-hud { margin-left: 0; height: 48px; padding: 0 18px 0 11px; font-size: 17px; }
}
@media (min-width: 1280px) { .tab { padding: 0 15px 0 7px; font-size: 16.5px; gap: 7px; } .dock { gap: 4px; } }

/* ---------- views ---------- */
/* each tab is one view that fits the screen; a view scrolls inside itself only when its content is taller */
.views { position: fixed; z-index: 1; top: var(--top); left: 0; right: 0; bottom: 0; overflow: clip; }
.view { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(251,247,239,.55) transparent; }
.view:focus { outline: none; }
.view:focus-visible { outline: 3px solid var(--ring); outline-offset: -4px; border-radius: 0; }
.view-in { width: 100%; max-width: 1160px; min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 18px;
  padding: 20px max(16px, env(safe-area-inset-right)) calc(var(--bot) + 20px) max(16px, env(safe-area-inset-left)); }
@media (min-width: 900px) { .vhead p { font-size: 16.5px; } }
@media (min-width: 1100px) { .view-in { padding-top: 26px; padding-bottom: 28px; gap: 20px; } }
/* the one transition: a view rises in while the scene behind it softens */
.view.enter > * { animation: viewIn 260ms var(--ease) backwards; }
@keyframes viewIn { from { opacity: 0; transform: translateY(12px); } }

.vhead { display: grid; gap: 8px; max-width: 64ch; }
.vhead h2 { font-size: clamp(28px, 7.4vw, 44px); letter-spacing: -.01em; color: #fff;
  text-shadow: 0 3px 0 var(--navy), 2px 0 0 var(--navy), -2px 0 0 var(--navy), 0 -2px 0 var(--navy), 2px 2px 0 var(--navy), -2px 2px 0 var(--navy), 2px -2px 0 var(--navy), -2px -2px 0 var(--navy); }
.vhead p { color: #fff; font-size: 15.5px; line-height: 1.5; text-shadow: 0 1px 2px rgba(6,40,70,.55); }

/* ---------- HOME ---------- */
/* The wordmark sits on the open sea just under the posters: --ar is the scene's height/width, so
   max(100vw * ar, scene height) * .3 is where the poster rope ends in any viewport. The quest card rests on the beach. */
.v-home { display: flex; flex-direction: column; align-items: center; --ar: .6255; --sh: calc(100vh - var(--top));
  padding: 0 max(16px, env(safe-area-inset-right)) calc(var(--bot) + 14px) max(16px, env(safe-area-inset-left)); }
@supports (height: 100dvh) { .v-home { --sh: calc(100dvh - var(--top)); } }
@media (max-aspect-ratio: 3/4) { .v-home { --ar: 1.7276; } }
.hero-h1 { flex: none; margin: calc(max(100vw * var(--ar), var(--sh)) * .3 + 4px) 0 14px; line-height: 0; }
.hero-logo { width: min(86vw, 520px, calc(var(--sh) * .5)); height: auto;
  filter: drop-shadow(0 6px 10px rgba(6,48,82,.35)); animation: logoIn 700ms 150ms var(--ease-hero) backwards; }
@keyframes logoIn { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the X button: the game's button, dressed in X black */
.btn-x { color: #fff; border: 2.5px solid #000; background: linear-gradient(180deg, #3B424B, #171B20 52%, #0C0E11);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.2), inset 0 -4px 0 rgba(0,0,0,.4), 0 5px 0 #000, 0 14px 22px -10px rgba(6,48,82,.55); }
.btn-x:not(:disabled):active { box-shadow: inset 0 3px 0 rgba(255,255,255,.2), inset 0 -4px 0 rgba(0,0,0,.4), 0 3px 0 #000; }
.btn-x.btn-md { height: 50px; }
.xlogo { width: 20px; height: 20px; flex: none; fill: currentColor; }
.btn-lg .xlogo { width: 22px; height: 22px; }

/* the quest card */
.quest { margin-top: auto; width: 100%; max-width: 560px; padding: 14px 16px 14px; display: grid; gap: 12px; }
.quest.pop { animation: questPop 380ms var(--ease-hero); }
@keyframes questPop { 0% { transform: translateY(6px) scale(.985); } 100% { transform: none; } }
.q-top { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.q-track { list-style: none; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; max-width: 300px; }
.q-track li { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.q-track li:last-child { flex: none; }
.q-track li:not(:last-child)::after { content: ""; flex: 1 1 auto; min-width: 6px; height: 4px; margin: 0 4px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--cream-4) 0 5px, transparent 5px 9px); }
.q-track li.ok:not(:last-child)::after { background: var(--good); }
.q-pip { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2.5px solid var(--cream-4); color: var(--ink-2); font: 700 15px/1 var(--fnum);
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
.q-pip img { display: none; }
.q-track li.on .q-pip { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 0 0 4px rgba(26,179,209,.35); }
.q-track li.ok .q-pip { background: none; border-color: transparent; }
.q-track li.ok .q-pip b { display: none; }
.q-track li.ok .q-pip img { display: block; }
.q-lab { display: none; }
.q-count { margin-left: auto; flex: none; font: 700 14px/1 var(--fnum); color: var(--ink); background: var(--cream-2); border: 2px solid var(--cream-3);
  border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.quest[data-q="soon"] .q-top { display: none; }
.q-av { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid var(--navy); background: var(--cream-2); }
.q-count[hidden] + .q-av { margin-left: auto; }

.q-body { display: flex; align-items: center; gap: 14px; min-width: 0; }
.q-text { min-width: 0; display: grid; gap: 4px; }
.q-text h2 { font-size: 24px; color: var(--ink); letter-spacing: -.005em; }
.quest[data-q="done"] .q-text h2 { color: var(--good); }
.q-text p { color: var(--ink-2); font-size: 15px; line-height: 1.4; }
.q-soon { flex: none; }
/* the poster thumbnail on the done card */
.q-poster { flex: none; display: grid; justify-items: center; gap: 3px; width: 66px; padding: 6px 5px 7px; border-radius: 4px; text-decoration: none;
  background: linear-gradient(170deg, #F8EBC8, var(--paper) 45%, var(--paper-2)); border: 2px solid #6B4A22; box-shadow: 0 3px 0 #6B4A22; transform: rotate(-3deg); }
.q-wanted { width: 52px; height: auto; }
.q-face { width: 48px; height: 48px; background: var(--well); border-radius: 3px; box-shadow: 0 0 0 2px #4D3215; image-rendering: pixelated; image-rendering: crisp-edges; }

.q-act { display: grid; gap: 10px; }
.q-act .btn, .q-done .btn { width: 100%; }
.q-wallet { display: grid; gap: 10px; }
.q-wallet .input { height: 52px; flex: none; }
.q-done { display: grid; }
.q-err { background: #FBE7E3; border: 2px solid #E3A296; color: #7E2414; border-radius: 12px; padding: 9px 12px; font: 600 14.5px/1.35 var(--fb); }
.q-werr { margin-top: -4px; }

.q-bonus { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border-radius: 14px; background: var(--cream-2); border: 2px solid var(--cream-3);
  text-decoration: none; color: var(--ink); font: 500 15px/1.2 var(--fb); transition: background-color 140ms ease, border-color 140ms ease; }
.q-bonus b { font: 700 15.5px/1 var(--fn); }
.q-bs { margin-left: auto; flex: none; font: 700 13px/1 var(--fn); color: var(--ink-2); background: #fff; border: 2px solid var(--cream-3); border-radius: 999px; padding: 6px 10px; }
.q-bonus.ok .q-bs { color: #fff; background: var(--good); border-color: #145230; }
.q-bonus:not(.ok) .q-ok, .q-bonus.ok .q-todo { display: none; }
.q-bl { white-space: nowrap; }
@media (max-width: 380px) { .q-nw { display: none; } }
@media (hover: hover) and (pointer: fine) { .q-bonus:hover { background: #fff; border-color: var(--navy); } }

/* phones: an error takes the place of the step's description and the bonus */
/* the wallet step leaves the bonus to the HUD's play button, everywhere */
.quest[data-q="wallet"] .q-bonus { display: none; }
@media (max-width: 699px), (max-height: 500px) {
  .quest.has-err .q-text p, .quest.has-err .q-bonus { display: none; }
}
/* short phones: a smaller wordmark and a tighter card, so the primary button stays above the dock */
@media (max-height: 760px) and (max-width: 640px) {
  .hero-h1 { margin-bottom: 8px; }
  .hero-logo { width: min(80vw, calc(var(--sh) * .42)); }
  .quest { gap: 10px; padding: 12px 14px; }
  .q-text h2 { font-size: 22px; }
  .q-text p { font-size: 14.5px; }
  .q-act .btn-lg { height: 52px; }
  .q-wallet .input { height: 48px; }
}
/* tablets and up: the steps get their names, the action sits beside the text */
@media (min-width: 700px) {
  .quest { max-width: 820px; padding: 18px 22px 16px; gap: 14px; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; }
  .q-top, .q-err, .q-werr, .q-bonus { grid-column: 1 / -1; }
  .q-track { max-width: none; }
  .q-lab { display: block; margin-left: 7px; font: 700 14.5px/1 var(--fn); color: var(--ink-2); white-space: nowrap; }
  .q-track li.on .q-lab, .q-track li.ok .q-lab { color: var(--ink); }
  .q-text h2 { font-size: 27px; }
  .q-text p { font-size: 15.5px; max-width: 44ch; }
  .q-act .btn, .q-done .btn { width: auto; min-width: 240px; }
  .quest[data-q="wallet"] .q-act { grid-column: 1 / -1; }
  .q-wallet { display: flex; }
  .q-wallet .input { flex: 1 1 auto; }
  .q-wallet .btn { min-width: 0; }
  .q-poster { width: 78px; }
  .q-wanted { width: 62px; }
}
@media (min-width: 700px) and (max-width: 799px) { .q-lab { font-size: 13.5px; margin-left: 5px; } .q-track li:not(:last-child)::after { margin: 0 3px; } }
@media (min-width: 1100px) {
  .hero-logo { width: min(600px, 44vw, calc(var(--sh) * .74)); }
  .v-home { padding-bottom: 26px; }
  .quest { max-width: 880px; }
}
/* landscape phones: wordmark on the left, the card on the right */
@media (max-height: 500px) and (max-width: 1099px) {
  .v-home { flex-direction: row; align-items: stretch; justify-content: center; gap: 24px; padding-top: 6px; padding-bottom: calc(var(--bot) + 6px); }
  .hero-h1 { margin: auto 0 18px; }
  .hero-logo { width: min(34vw, 300px); }
  .quest { margin: auto 0 0; max-width: 430px; padding: 12px 14px; gap: 10px; grid-template-columns: minmax(0, 1fr); }
  .q-lab { display: none; }
  .q-text h2 { font-size: 21px; }
  .q-text p { font-size: 14px; }
  .q-act .btn-lg, .q-done .btn-lg { height: 48px; width: 100%; }
  .q-wallet { display: grid; }
  .q-bonus { padding-block: 2px; }
}

/* ---------- ARTICLES ---------- */
.stat { font: 700 16px/1.2 var(--fn); color: #fff; text-shadow: 0 2px 0 var(--navy); display: inline-flex; align-items: center; gap: 8px; }
.art-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: center; }
@media (min-width: 900px) {
  .art-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto; grid-template-areas: "head doc" "poster doc"; gap: 22px 36px; align-items: start; align-content: center; }
  .art-grid > .vhead { grid-area: head; }
  .art-grid > .doc { grid-area: doc; }
  .art-grid > .poster-col { grid-area: poster; }
}

.doc { padding: 18px 16px 20px; display: grid; gap: 16px; }
@media (min-width: 520px) { .doc { padding: 24px 26px; } }
.who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; color: var(--ink-2); }
.who b { color: var(--ink); }
.who-av { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--navy); }
.who .textlink { margin-left: auto; }
.doc h3 { font-size: 26px; }
.arts { list-style: none; display: grid; gap: 10px; counter-reset: a; }
.arts li { counter-increment: a; display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: baseline; font-size: 16px; }
.arts li::before { content: counter(a, upper-roman); font: 700 15px/1 var(--fn); color: var(--gold-3); background: var(--gold-hi); border: 2px solid var(--gold-3); border-radius: 8px; text-align: center; padding: 5px 0; }
.pane { display: none; gap: 14px; border-top: 2px dashed var(--cream-3); padding-top: 16px; }
.doc[data-state="loading"] [data-pane="loading"], .doc[data-state="soon"] [data-pane="soon"], .doc[data-state="out"] [data-pane="out"],
.doc[data-state="sign"] [data-pane="sign"], .doc[data-state="wallet"] [data-pane="wallet"], .doc[data-state="done"] [data-pane="done"] { display: grid; }
.doc[data-state="wallet"] .arts, .doc[data-state="done"] .arts, .doc[data-state="wallet"] h3, .doc[data-state="done"] h3 { display: none; }
.doc[data-state="wallet"] .pane, .doc[data-state="done"] .pane { border-top: 0; padding-top: 0; }
.signed { justify-items: start; }
.notice, .done { grid-template-columns: auto 1fr; align-items: start; gap: 14px; }
.notice h4, .done h4 { font-size: 22px; margin-bottom: 4px; }
.notice p { margin-bottom: 12px; }
.done h4 { font-size: 26px; color: var(--good); }
.done p + p { margin-top: 4px; }
.pane[data-pane="out"] .btn { justify-self: start; }
.pane[data-pane="out"] .btn-x { padding: 0 22px 0 18px; }
.young { background: #FFF1D6; border: 2px solid var(--gold-3); border-radius: 12px; padding: 10px 12px; font-size: 15px; }
.field { display: grid; gap: 8px; }
.flabel { font: 700 15px/1 var(--fn); color: var(--ink); }
.hint { color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.namebox { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.name { font: 700 21px/1.2 var(--fn); background: #fff; border: 2px solid var(--cream-3); border-radius: 12px; padding: 10px 14px; flex: 1 1 240px; min-width: 0; }
.name em { font-style: normal; color: var(--ink-2); font-weight: 700; font-size: 16px; }
.input { flex: 1 1 260px; min-width: 0; height: 48px; padding: 0 14px; border-radius: 12px; background: #fff; border: 2px solid var(--cream-4); font: 600 16px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); }
.input:focus { border-color: var(--navy); outline: none; box-shadow: 0 0 0 3px rgba(42,111,176,.3); }
.input[aria-invalid="true"] { border-color: var(--red); }
.err { color: var(--red); font: 600 14.5px/1.35 var(--fb); }
.padwrap { position: relative; }
#pad { width: 100%; height: 160px; background: var(--cream-2); border: 2px solid var(--cream-3); border-radius: 14px; touch-action: none; cursor: crosshair; }
.padwrap::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 42px; border-top: 2px dashed rgba(27,58,87,.32); pointer-events: none; }
.padx { position: absolute; left: 22px; bottom: 48px; font: 700 20px/1 var(--fn); color: rgba(27,58,87,.45); pointer-events: none; }
.padhint { position: absolute; left: 22px; bottom: 14px; font-size: 13.5px; color: var(--ink-2); pointer-events: none; }
.seal { position: absolute; right: 12px; bottom: 10px; width: 96px; height: 96px; opacity: 0; pointer-events: none; filter: drop-shadow(0 3px 0 rgba(138,90,8,.6)); }
.doc.stamping .seal { animation: stamp 260ms var(--ease) forwards; }
@keyframes stamp { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: scale(1); } }
.signrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sealed-line { display: flex; align-items: center; gap: 8px; font: 700 16px/1.3 var(--fn); }

/* wanted poster */
.poster-col { display: grid; gap: 16px; justify-items: center; }
.poster-tag { font: 700 16px/1.2 var(--fn); color: #fff; text-shadow: 0 2px 0 var(--navy); }
.poster { position: relative; width: min(100%, 360px); padding: 22px 22px 18px; display: grid; justify-items: center; gap: 8px; text-align: center;
  background: linear-gradient(170deg, #F8EBC8, var(--paper) 45%, var(--paper-2)); border: 2.5px solid #6B4A22; border-radius: 6px;
  box-shadow: inset 0 0 0 5px rgba(255,248,226,.55), inset 0 0 26px rgba(138,90,8,.28), 0 5px 0 #6B4A22, 0 18px 30px -14px rgba(60,30,8,.55); transform: rotate(-1.2deg); }
.pin { position: absolute; top: -12px; left: 50%; width: 22px; height: 30px; margin-left: -11px; border-radius: 5px; background: linear-gradient(90deg, #A5713A, #C8925A 45%, #8C5A2A); border: 2px solid #4D3215; box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.wanted { width: 240px; height: auto; margin-top: 4px; }
.pwell { width: 192px; height: 192px; background: var(--well); border-radius: 6px; box-shadow: 0 0 0 3px #4D3215; display: grid; place-items: center; overflow: hidden; }
.pface { width: 192px; height: 192px; }
.pface-ph { opacity: .55; }
.p-name { font: 700 26px/1.1 var(--fn); color: var(--paper-ink); overflow-wrap: anywhere; margin-top: 6px; }
.p-ship { font: 600 15px/1.2 var(--fb); color: #6B4A22; }
.psig { width: 100%; height: 56px; border-bottom: 2px dashed rgba(107,74,34,.5); }
.p-foot { font: 600 13.5px/1.3 var(--fb); color: #6B4A22; }
.poster.pop { animation: pop 420ms var(--ease-hero); }
@keyframes pop { 0% { transform: rotate(-1.2deg) translateY(-14px); opacity: .3; } 100% { transform: rotate(-1.2deg); opacity: 1; } }
.poster-btn { width: min(100%, 360px); }

/* ---------- QUESTS: notes pinned to a wooden board ---------- */
.cork { display: grid; gap: 14px; padding: 14px; border-radius: 22px; border: 2.5px solid var(--navy); background: #A8692F;
  background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.07) 0 2px, transparent 2px 52px); box-shadow: inset 0 -6px 0 #7A4A1E, inset 0 0 0 4px #B97A3C, var(--drop); }
.notes > .note { transform: none !important; }
.notes.snap { margin: 0 -14px; padding: 2px 14px 6px; scroll-padding: 0 14px; grid-auto-columns: min(86%, 320px); }
@media (min-width: 760px) { .cork { padding: 18px; gap: 14px; } .notes.snap { display: grid; grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 14px; overflow: visible; margin: 0; padding: 0; } }
@media (min-width: 1100px) {
  .cork { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); padding: 20px; gap: 16px; align-items: start; }
  .notes.snap { grid-template-columns: 1fr; }
  .note-wide .eyes { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-top: 18px; }
  .note-wide .guesses { justify-content: center; }
}

.note { display: grid; gap: 12px; align-items: start; padding: 14px; border-radius: 14px; background: linear-gradient(180deg, var(--cream-hi), var(--cream)); border: 2.5px solid var(--navy); box-shadow: 0 4px 0 var(--navy); }
.note:nth-child(even) { transform: rotate(.5deg); }
.note:nth-child(odd):not(.note-wide) { transform: rotate(-.5deg); }
.note-wide { grid-template-columns: 1fr; }
.note-top { display: grid; gap: 12px; align-items: start; }
.q-ic { width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2.5px var(--navy), 0 3px 0 var(--navy); display: grid; place-items: center; }
.note h3 { font-size: 19px; }
.note p { color: var(--ink-2); font-size: 15px; margin-top: 3px; line-height: 1.45; }
.soon { font: 700 13px/1 var(--fn); color: var(--gold-3); padding: 7px 10px; border-radius: 999px; border: 2px solid var(--gold-3); background: var(--gold-hi); white-space: nowrap; }
.eyes { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; justify-items: center; text-align: center; border-top: 2px dashed var(--cream-3); padding-top: 14px; }
.eyes h4 { font-size: 20px; }
.ewell, .lwell { position: relative; background: var(--well); border-radius: 12px; box-shadow: 0 0 0 2.5px var(--navy), 0 4px 0 2.5px var(--navy); overflow: hidden; }
.ewell { width: 192px; height: 192px; }
.ewell img, .lwell img { position: absolute; inset: 0; }
.e-lit { transition: opacity 900ms var(--ease); }
.js .e-lit { opacity: 0; }
.js .lit .e-lit { opacity: 1; }
.guesses { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.guesses button { min-height: 44px; padding: 0 14px; border-radius: 12px; background: #fff; border: 2.5px solid var(--navy); box-shadow: 0 3px 0 var(--navy); font: 700 15px/1 var(--fn); cursor: pointer; transition: transform 120ms var(--ease); }
.guesses button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--navy); }
.guesses button.no { background: #FBE3DF; border-color: var(--red); color: var(--red); box-shadow: none; text-decoration: line-through; cursor: default; }
.guesses button.yes { background: #DDF3E3; border-color: var(--good); color: var(--good); box-shadow: none; }
.eyes .msg { margin-top: 6px; font: 700 16px/1.35 var(--fn); min-height: 1.35em; }
/* phones: the eyes sit beside the question, the guesses go full width under both */
@media (max-width: 639px) {
  .eyes { grid-template-columns: 96px 1fr; justify-items: start; text-align: left; align-items: start; gap: 4px 14px; }
  .eyes > div:not(.ewell) { display: contents; }
  .eyes .ewell { grid-row: 1 / span 2; width: 96px; height: 96px; }
  .eyes .ewell img.px4[width="48"] { width: 96px; height: 96px; }
  .eyes h4 { font-size: 18px; align-self: end; }
  .eyes .quiet { font-size: 14px; align-self: start; }
  .eyes .guesses, .eyes .msg { grid-column: 1 / -1; width: 100%; }
  .eyes .guesses { margin-top: 10px; justify-content: stretch; }
  .eyes .guesses button { flex: 1 1 auto; }
  .note p { font-size: 14px; }
}@media (min-width: 640px) { .eyes { grid-template-columns: 192px 1fr; justify-items: start; text-align: left; } .guesses { justify-content: flex-start; } }
/* "Soon" is a sticker on the note's corner, so it takes no room from the text */
.note { position: relative; }
.note:not(.note-wide) { grid-template-columns: 56px 1fr; }
.note-top { grid-template-columns: 56px 1fr; }
.note .soon { position: absolute; top: -10px; right: 14px; transform: rotate(3deg); box-shadow: 0 2px 0 var(--gold-3); }
.note h3 { padding-right: 44px; }
.notes.snap { padding-top: 12px; }
@media (max-width: 420px) { .note:not(.note-wide), .note-top { grid-template-columns: 48px 1fr; } .q-ic { width: 48px; height: 48px; } .q-ic .px2[width="24"], .q-ic .px3[width="16"] { width: 32px; height: 32px; } }

/* ---------- GAME ---------- */
.game-grid { display: grid; gap: 16px; }
.game-grid > .vhead .btn { justify-self: start; margin-top: 4px; }
/* swipe rows: a row of cards that scrolls sideways on phones, the next card peeking in */
.snap { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 340px); gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 16px; margin: 0 -16px; padding: 4px 16px 12px; scrollbar-width: none; }
.snap::-webkit-scrollbar { display: none; }
.snap > * { scroll-snap-align: start; }
@media (min-width: 640px) { .shots.snap { grid-auto-columns: calc(47% - 6px); } }
.shot { margin: 0; display: grid; gap: 10px; align-content: start; padding: 8px 8px 14px; border-radius: 20px; border: 2.5px solid var(--navy); box-shadow: var(--drop);
  background: linear-gradient(180deg, var(--cream-hi), var(--cream) 55%, var(--cream-2)); }
.frame { position: relative; border-radius: 13px; overflow: hidden; border: 2px solid var(--navy); background: var(--deep); aspect-ratio: 16 / 9; }
.frame > img { width: 100%; height: 100%; object-fit: cover; }
.shot figcaption { padding: 0 6px; }
.shot h3 { font-size: 19px; color: var(--ink); }
.shot p { color: var(--ink-2); font-size: 15px; line-height: 1.45; margin-top: 3px; max-width: 46ch; }
.builds { display: flex; flex-wrap: wrap; gap: 2px 4px; margin-top: 8px; }
.builds img.px2[width="24"] { width: 24px; height: 24px; }
@media (min-width: 420px) { .builds img.px2[width="24"] { width: 48px; height: 48px; } .builds { gap: 2px; } }
.bubble { position: absolute; display: flex; align-items: center; gap: 6px; background: #fff; border: 2.5px solid var(--navy); border-radius: 999px; padding: 5px 12px 5px 6px; font: 700 15px/1 var(--fnum); box-shadow: 0 3px 0 var(--navy); }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 11px; height: 11px; background: #fff; border-right: 2.5px solid var(--navy); border-bottom: 2.5px solid var(--navy); transform: translateX(-50%) rotate(45deg); }
.b1 { left: 40%; top: 26%; }
.b2 { left: 42%; top: 38%; }
@media (min-width: 900px) {
  .game-grid > .vhead { grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: center; max-width: none; }
  .game-grid > .vhead .btn { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .shots { display: grid; grid-auto-flow: row; grid-template-columns: minmax(0, 1.36fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; overflow: visible; margin: 0; padding: 0; align-items: stretch; }
}
.fleet { padding: 14px 14px 8px; }
.fleet h3 { font-size: 20px; margin: 0 0 4px 4px; }
.ships { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 6px; }
.ships li { display: grid; justify-items: center; text-align: center; padding: 2px 2px 7px; border-radius: 14px; }
.ships img { width: 64px; height: 64px; }
.ships b { font: 700 15px/1.1 var(--fn); }
.ships span { font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.ships li.top { background: var(--gold-hi); box-shadow: inset 0 0 0 2px var(--gold-3); }
@media (max-width: 759px) {
  .ships { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 31%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -14px; padding: 0 14px 4px; scroll-padding: 0 14px; overscroll-behavior-x: contain; }
  .ships::-webkit-scrollbar { display: none; }
  .ships li { scroll-snap-align: start; }
  .game-grid > .vhead .btn { display: none; }
}
@media (min-width: 760px) { .ships { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ships img { width: 88px; height: 88px; } .fleet { padding: 16px 20px 10px; } .ships b { font-size: 16px; } }

/* ---------- SWABBIES ---------- */
.legends { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (min-width: 1100px) { .v-swabbies .view-in { gap: 16px; } }
.legend { padding: 12px 12px 14px; display: grid; justify-items: center; text-align: center; gap: 4px; }
.lwell { width: 144px; height: 144px; margin-bottom: 8px; }
.lwell img { width: 144px; height: 144px; image-rendering: pixelated; image-rendering: crisp-edges; }
.legend h3 { font-size: 20px; }
.legend p { color: var(--ink-2); font-size: 14px; }
.dark { grid-column: 1 / -1; padding: 16px; display: grid; gap: 6px; align-content: center; background: linear-gradient(180deg, #24425E, #15304A); border-color: #0D2236; box-shadow: 0 5px 0 #0D2236, 0 14px 26px -12px rgba(0,0,0,.5); }
.dark h3 { color: #fff; font-size: 21px; }
.dark p { color: var(--on-deep); font-size: 15px; }
.dwells { display: grid; grid-template-columns: repeat(3, 96px); justify-content: center; gap: 12px; margin-top: 10px; }
.dwells img { width: 96px; height: 96px; border-radius: 10px; box-shadow: 0 0 0 2.5px #0D2236; }
@media (min-width: 560px) and (min-height: 700px) { .lwell, .lwell img { width: 192px; height: 192px; } }
@media (min-width: 900px) {
  .legends { grid-template-columns: auto auto 1fr; gap: 18px; }
  .legend { padding: 14px 14px 16px; }
  .dark { grid-column: auto; padding: 20px 22px; align-content: start; }
  .dwells { grid-template-columns: repeat(3, 96px); justify-content: start; }
}
@media (min-width: 700px) and (max-width: 899px) { .dwells { grid-template-columns: repeat(6, 96px); gap: 8px; } }
@media (min-width: 1100px) { .dwells { grid-template-columns: repeat(6, 96px); gap: 8px; margin-top: 18px; } }
/* phones: six eyes in one row at 1x */
@media (max-width: 559px) { .dwells { grid-template-columns: repeat(6, 48px); gap: 6px; margin-top: 6px; } .dwells img.px2 { width: 48px; height: 48px; border-radius: 7px; } }
@media (max-width: 380px) { .dwells { grid-template-columns: repeat(3, 48px); gap: 8px; } }
@media (max-width: 559px) { .boost th, .boost td { padding: 7px 4px; } }
@media (max-width: 400px) { .legends { gap: 12px; } .legend { padding: 10px 8px 12px; } .dark { padding: 14px 12px; } .dwells { gap: 8px; } .crew { padding: 14px 12px; } .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .tiles img { width: 100%; height: auto; aspect-ratio: 1; } }
.crewline { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .crewline { grid-template-columns: auto minmax(0, 1fr); align-items: stretch; } }
.crew, .boost { padding: 16px; }
.crew { display: grid; grid-template-rows: auto 1fr; }
.tiles { align-content: center; }
.crew h3, .boost h3 { font-size: 20px; margin-bottom: 10px; }
.tiles { display: grid; grid-template-columns: repeat(4, 72px); gap: 10px; justify-content: center; }
.tiles img { width: 72px; height: 72px; border-radius: 9px; background: var(--well); box-shadow: 0 0 0 2.5px var(--navy), 0 4px 0 0 var(--tc); }
/* phones show one row of the crew, wider screens two rows */
.tiles img:nth-child(n+5) { display: none; }
@media (min-width: 560px) { .tiles img:nth-child(-n+8) { display: block; } }
@media (min-width: 560px) { .tiles { grid-template-columns: repeat(4, 96px); } .tiles img { width: 96px; height: 96px; } }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(6, 96px); } .tiles img:nth-child(n+9) { display: block; } .tiles img:nth-child(n+13) { display: none; } }
.t-common { --tc: var(--t-common); } .t-uncommon { --tc: var(--t-uncommon); } .t-rare { --tc: var(--t-rare); } .t-epic { --tc: var(--t-epic); } .t-legendary { --tc: var(--t-legendary); }
.boost table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.boost th, .boost td { text-align: left; padding: 8px 4px; border-bottom: 2px solid var(--cream-3); font-size: 15.5px; }
.boost thead th { font: 700 13.5px/1 var(--fn); color: var(--ink-2); padding-top: 0; }
.boost tbody th { font: 700 16px/1 var(--fn); white-space: nowrap; }
.boost tbody th i { display: inline-block; vertical-align: -2px; margin-right: 10px; width: 14px; height: 14px; border-radius: 4px; background: var(--tc); box-shadow: 0 0 0 2px var(--navy); }
.boost td:last-child { font: 700 16px/1 var(--fnum); color: var(--gold-3); text-align: right; }
.boost thead th:last-child { text-align: right; }
.boost tbody tr:last-child > * { border-bottom: 0; }
.boost .quiet { margin-top: 10px; font-size: 14px; line-height: 1.45; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 1.4fr 1fr; gap: 22px; } }
.qa { padding: 4px 18px; }
details { border-bottom: 2px solid var(--cream-3); }
details:last-child { border-bottom: 0; }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 0; font: 700 18px/1.25 var(--fn); }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 32px; height: 32px; background: url(/img/icons/caret-16.png) center / 32px 32px no-repeat; image-rendering: pixelated; transition: transform 200ms var(--ease); }
details[open] summary::after { transform: rotate(90deg); }
details p { padding: 0 0 16px; color: var(--ink-2); max-width: 62ch; }
.safe { padding: 18px 20px; background: #EAF3FB; }
.safe h3 { font-size: 21px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.safe ul { padding-left: 20px; display: grid; gap: 7px; font-size: 15.5px; }
.faq-side { display: grid; gap: 18px; }
@media (max-width: 899px) {
  summary { padding: 13px 0; font-size: 16.5px; }
  .qa { padding: 2px 16px; }
  .faq-side { gap: 14px; }
  .safe { padding: 16px 18px; }
  .safe ul { font-size: 15px; gap: 5px; }
}
.final { padding: 18px 20px; display: grid; gap: 8px; justify-items: start; }
.final h3 { font-size: 21px; }
.final p { color: var(--ink-2); font-size: 15.5px; margin-bottom: 6px; }
.final-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.foot { color: #fff; font-size: 14px; text-shadow: 0 1px 2px rgba(6,40,70,.6); }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--bot) + 4px); z-index: 40; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
  background: var(--cream); border: 2.5px solid var(--navy); border-radius: 999px; box-shadow: 0 4px 0 var(--navy); padding: 10px 18px 10px 12px; font: 700 16px/1.2 var(--fn);
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none; transition: transform 260ms var(--ease), opacity 200ms ease; }
.toast.on { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 379px) { .lwell, .lwell img { width: 96px; height: 96px; } .legend h3 { font-size: 18px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .e-lit { transition: opacity 300ms ease !important; }
  .view.enter > * { animation: none !important; }
  html:not([data-tab="home"]) .scene .cove { transform: none; }
}