/* learner.css — the learner screens: door, deck (home), the dive run, evidence.
   Every screen is one centred column (max 480 px) over the full-screen sea. Phones and laptops get the same
   layout; on a laptop the sea fills the window around the column, as in Remember the Deep v7. */

.screen { min-height: 100vh; display: flex; flex-direction: column; }
.col { width: 100%; max-width: var(--col); margin: 0 auto; padding: 0 var(--gutter); }
.stack { display: grid; gap: 18px; }
.grow { flex: 1; min-width: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---- top bar: wordmark left, one quiet item right ---- */
.topbar { width: 100%; max-width: 1180px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 44px); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.topbar--col { max-width: var(--col); padding: 20px 0; }

/* ---- door: the front page, in deep water ---- */
.door { min-height: 100vh; display: flex; flex-direction: column; }
.door__mid { flex: 1; display: grid; justify-items: center; align-content: center; gap: clamp(16px, 3vh, 28px); text-align: center; padding: 8px 16px 40px; }
.port--door { width: clamp(88px, 13vh, 120px); height: clamp(88px, 13vh, 120px); box-shadow: 0 0 0 7px var(--brass), 0 0 0 10px rgba(0, 0, 0, .3), 0 30px 80px rgba(0, 0, 0, .45); }
.port--door img { width: 82%; margin-bottom: 3px; animation: bob 3.6s ease-in-out infinite; }
.door__titlebox { position: relative; display: grid; justify-items: center; width: 100%; }
.door__title { font: 200 clamp(56px, min(13vw, 14vh), 168px)/.88 var(--wide); letter-spacing: -.06em; padding-bottom: .06em; transition: opacity .7s ease; text-wrap: balance; }
.door__title.is-dissolving { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 94vw; opacity: 0; pointer-events: none; }
.ptext { display: block; width: min(1080px, 94vw); touch-action: pan-y; cursor: crosshair; }
.door__sub { font: 300 clamp(17px, 1.6vw, 20px)/1.5 var(--text); letter-spacing: -.01em; color: var(--ink-2); max-width: 30ch; }
.door__cta { display: grid; justify-items: center; gap: 10px; }
.door__cta .pill { min-width: 260px; }
.door__foot { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 44px) 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px;
  font: 400 10.5px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 560px) { .door__foot { justify-content: center; text-align: center; } }

/* ---- deck: home, on the surface ---- */
.deck { min-height: 100vh; padding-bottom: 56px; }
.count { display: flex; align-items: baseline; gap: 7px; font: 400 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.count b { font: 400 20px/1 var(--text); letter-spacing: -.02em; color: var(--ink); }
.hello { display: grid; gap: 10px; padding-top: 8px; }
.sec { margin-top: 44px; display: grid; gap: 16px; }
.sec--tight { margin-top: 28px; }

/* the journey: the seven W7 stages, the otter's line, one next step */
.stages { display: grid; gap: 10px; }
.stages__bar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.stages__bar i { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .2); }
.stages__bar i.done { background: var(--glow); }
.stages__bar i.now { background: linear-gradient(90deg, var(--glow) 50%, rgba(255, 255, 255, .2) 50%); }
.stages__names { font: 400 10.5px/1.8 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.stages__names span + span::before { content: " · "; color: var(--ink-4); }
.stages__names .done { color: var(--ink-2); }
.stages__names .now { color: var(--glow); }
.journey__cta { display: grid; gap: 10px; }

/* feedback moment: the teacher's stamp comes back to the learner */
.feedback { padding: 18px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.feedback__line { font: 400 24px/1.2 var(--text); letter-spacing: -.025em; }
.feedback .pill { justify-self: start; }

/* crew group (Zewen) and class crew */
.group { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.group__name { font: 400 22px/1.15 var(--text); letter-spacing: -.02em; color: var(--ink); }
.goal { display: grid; gap: 10px; }
.board { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 400 10.5px/1.7 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.board b { font-weight: 500; color: var(--ink); }
.board .me, .board .me b { color: var(--glow); }
.deck__foot { margin-top: 44px; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--hair); padding-top: 6px; }

/* ---- the dive run ---- */
.run { min-height: 100vh; display: flex; flex-direction: column; color: var(--ink); }
.run__bar { position: sticky; top: 0; z-index: 3; padding-top: env(safe-area-inset-top, 0px); background: linear-gradient(180deg, rgba(2, 12, 18, .5), rgba(2, 12, 18, 0)); }
.hud { max-width: var(--col); margin: 0 auto; padding: 14px 18px 10px; display: flex; align-items: center; gap: 12px; }
.hud__btn { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .26); color: var(--ink); display: grid; place-items: center; font: 300 20px/1 var(--text); }
.hud__btn:hover { border-color: var(--glow); }
.hud__depth { flex: 1; min-width: 0; display: grid; gap: 1px; }
.hud__lab { display: flex; align-items: center; gap: 6px; font: 400 10px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.hud__lab::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ox); box-shadow: 0 0 0 3px rgba(255, 106, 61, .22); animation: live 2s ease-in-out infinite; }
@keyframes live { 50% { box-shadow: 0 0 0 5px rgba(255, 106, 61, 0); } }
.hud__num { font: 400 21px/1.1 var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.hud__num small { font: 400 13px var(--mono); color: var(--ink-2); margin-left: 3px; }
.hud__zone { font: 400 10.5px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--glow); white-space: nowrap; }
.track { max-width: calc(var(--col) - 36px); margin: 0 auto 4px; height: 2px; background: rgba(255, 255, 255, .12); border-radius: 2px; overflow: hidden; }
.track i { display: block; height: 100%; background: var(--glow); transition: width .4s ease-out; }
.run__col { flex: 1 0 auto; width: 100%; max-width: var(--col); margin: 0 auto; padding: 18px var(--gutter) 28px; display: flex; flex-direction: column; gap: 22px; }
.bbar { position: sticky; bottom: 0; z-index: 2; padding-bottom: env(safe-area-inset-bottom, 0px); background: linear-gradient(180deg, rgba(2, 10, 16, 0), rgba(2, 10, 16, .72) 50%); }
.bbar__in { max-width: var(--col); margin: 0 auto; padding: 22px var(--gutter) 16px; display: grid; gap: 8px; justify-items: center; }

.divecard { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--hair); }
.clues, .steps { list-style: none; counter-reset: c; border-top: 1px solid var(--hair); }
.clues li, .steps li { counter-increment: c; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 17px; line-height: 1.45; color: var(--ink); }
.clues li::before, .steps li::before { content: "0" counter(c); font: 400 12px/1.9 var(--mono); color: var(--glow); }
.steps li { font-size: 16px; color: var(--ink-2); }
.opts { display: grid; gap: 10px; }
.opt { display: flex; align-items: center; min-height: 56px; padding: 12px 18px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); font: 500 17px/1.25 var(--text); color: var(--ink); text-align: left; transition: box-shadow .15s, background .15s; }
.opt:hover:not([disabled]) { box-shadow: inset 0 0 0 1px var(--glow); }
.opt[disabled] { cursor: default; }
.opt--right { box-shadow: inset 0 0 0 2px var(--ok); background: rgba(87, 217, 163, .12); }
.opt--wrong { box-shadow: inset 0 0 0 2px var(--no); background: rgba(255, 132, 102, .1); }
.souvenir { display: grid; justify-items: center; padding: 4px 0; }
.souvenir img { width: min(280px, 100%); }
.logline { display: grid; gap: 4px; border-left: 1px solid var(--ox); padding-left: 14px; }
.logline b { font: 400 10.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ox); }
.logline span { font-size: 16px; line-height: 1.45; color: var(--ink-2); }

.sortlist { display: grid; gap: 12px; }
.sortitem { display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); background: var(--shade); }
.sortitem b { font: 500 18px/1.2 var(--text); color: var(--ink); }
.sortitem > span { font-size: 14px; color: var(--ink-2); }
.sortitem .chips { margin-top: 10px; }
.sortitem.ok { box-shadow: inset 0 0 0 2px var(--ok); }
.sortitem.no { box-shadow: inset 0 0 0 2px var(--no); }
.sortitem .fb { margin-top: 8px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }

/* feedback sheet: slides up over the bottom of the dive */
.sheet { --accent: var(--glow); position: sticky; bottom: 0; z-index: 4; margin-top: auto; background: #04121A; border-top: 1px solid var(--accent); border-radius: 28px 28px 0 0;
  box-shadow: 0 -30px 60px rgba(0, 0, 0, .55); padding-bottom: env(safe-area-inset-bottom, 0px); animation: slideup .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes slideup { from { transform: translateY(64px); } to { transform: none; } }
.sheet__in { max-width: var(--col); margin: 0 auto; padding: 24px var(--gutter) 20px; display: grid; gap: 16px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.compare--one { grid-template-columns: 1fr; }
.compare > div { padding: 12px 14px 12px 0; min-width: 0; overflow-wrap: anywhere; }
.compare > div + div { padding-left: 14px; border-left: 1px solid var(--hair); }
.compare span { font: 400 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.compare p { margin-top: 3px; font-size: 16px; line-height: 1.4; color: var(--ink); }
.model { display: grid; gap: 8px; }
.model figcaption { display: flex; align-items: center; gap: 7px; font: 400 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.model figcaption::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ox); }
.model blockquote { font: 400 23px/1.35 var(--text); letter-spacing: -.015em; color: var(--ink); }
.model blockquote b { font-weight: 600; color: var(--glow); }
.model__more { font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.model__more span { font: 400 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-right: 6px; }
.q-hint { display: inline-block; font: 400 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--glow); vertical-align: middle; white-space: nowrap; }
.rule { color: var(--ink-3); }

/* bring it home: three real actions */
.acts { display: grid; gap: 10px; }
.act { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 16px 18px; border-radius: 18px; text-align: left;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); background: var(--shade); transition: box-shadow .15s, background .15s; }
.act:hover { box-shadow: inset 0 0 0 1px var(--glow); }
.act[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--glow); background: rgba(111, 231, 225, .12); }
.act b { font: 500 18px/1.2 var(--text); letter-spacing: -.01em; color: var(--ink); }
.act > span { grid-column: 1; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.act__unit { grid-column: 2; grid-row: 1 / span 2; max-width: 86px; font: 400 10px/1.35 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--glow); text-align: right; }

/* what next: Wei Yee's journey tracker */
.tracker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tracker span { display: grid; gap: 8px; font: 400 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.tracker i { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .2); }
.tracker .done { color: var(--ink-2); }
.tracker .done i { background: var(--glow); }
.tracker .next { color: var(--glow); }
.tracker .next i { background: linear-gradient(90deg, var(--glow) 50%, rgba(255, 255, 255, .2) 50%); }
.slot { padding: 14px 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--hair); }

/* the captain's weekly mission */
.mission__row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.mission__row b { display: block; font: 400 20px/1.15 var(--text); letter-spacing: -.02em; color: var(--ink); }
.act--mission { box-shadow: inset 0 0 0 1px rgba(255, 106, 61, .55); }
.act b .stamp { margin-left: 6px; }
/* returned for a redo: the check's reasons, on the evidence page */
.returned { display: grid; gap: 4px; border-left: 2px solid var(--no); padding: 2px 0 2px 14px; }
.returned b { font: 400 10.5px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--no); }
.returned p { font-size: 16px; line-height: 1.45; color: var(--ink); }
.tick { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.4; color: var(--ink); cursor: pointer; }
.tick input { width: 22px; height: 22px; accent-color: var(--glow); flex: none; }
.feedback--returned .feedback__line { background: linear-gradient(180deg, #FFFFFF, #FFD9CC); -webkit-background-clip: text; background-clip: text; }

/* ---- evidence (on deck) ---- */
.photo__box { aspect-ratio: 4 / 3; max-width: 100%; border-radius: 22px; background: var(--shade); box-shadow: inset 0 0 0 1px var(--hair-2); display: grid; place-items: center; overflow: hidden; padding: 16px; text-align: center; font-size: 14px; color: var(--ink-2); }
.photo__box img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.field--num { max-width: 160px; }

/* ---- Expedition Field Guide (on deck): species cards are paper, like the dive log; stamps carry the tier ---- */
.guide { padding-bottom: 56px; }
.guide .hello + .readout { margin-top: 26px; }
.art { display: block; width: 100%; height: auto; }
.stamp--tier { transform: rotate(-3deg); }
.stamp--common { --c: #8C5A2B; }
.stamp--rare { --c: var(--teal); }
.stamp--legendary { --c: #B8860B; }
.stamp--shiny { --c: #A07A3A; }
.stamp--mythic { --c: #B83A28; }

/* the companion: the otter or a legendary form, in the same brass porthole */
.port--form { place-items: center; }
.port--form .art, .port--form .still { width: 92%; }
.port--lg.port--form .art { animation: bob 3.4s ease-in-out infinite; }
.port--empty { place-items: center; font: 400 22px/1 var(--mono); color: var(--paper-mute); box-shadow: 0 0 0 4px rgba(214, 176, 122, .35), 0 0 0 6px rgba(0, 0, 0, .3); }
.forms { display: flex; flex-wrap: wrap; gap: 14px 18px; }
.form { display: grid; justify-items: center; gap: 8px; font: 400 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); max-width: 84px; text-align: center; }
.form[aria-pressed="true"] { color: var(--glow); }
.form[aria-pressed="true"] .port { box-shadow: 0 0 0 4px var(--glow), 0 0 0 6px rgba(0, 0, 0, .3); }
.form--locked { opacity: .7; }

/* deck row and what-next row into the guide; small arts sit on paper chips */
.guiderow, .voyage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 14px 0; text-align: left;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); color: var(--ink); }
.guiderow:hover, .voyage:hover { border-color: var(--glow); }
.guiderow b { display: block; font: 400 19px/1.2 var(--text); letter-spacing: -.015em; }
.guiderow .small { display: block; margin-top: 2px; }
.guiderow__arts, .voyage__arts { display: flex; gap: 4px; }
.guiderow__arts .art, .voyage__arts .art { width: 42px; background: var(--paper); border-radius: 7px; padding: 2px 3px; }
.guiderow__go { font: 300 22px/1 var(--text); color: var(--glow); }
.new { font-style: normal; color: var(--glow); }
.unlocked { font-weight: 500; color: var(--glow); }

/* voyages, in order */
.voyages { list-style: none; display: grid; }
.voyages li + li .voyage { border-top: 0; }
.voyage { grid-template-columns: 52px minmax(0, 1fr) auto; }
.voyage__year { font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--glow); }
.voyage__name { display: flex; align-items: center; gap: 10px; font: 400 21px/1.15 var(--text); letter-spacing: -.02em; }
.voyage__meta { display: block; margin-top: 3px; font: 400 10.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 400px) { .voyage__arts .art:nth-child(n + 3) { display: none; } }

/* live region: the ship at sea (simulated dates) */
.live { display: inline-flex; align-items: center; gap: 6px; font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #1B0A04; background: var(--ox); border-radius: 999px; padding: 4px 8px 4px 7px; }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1B0A04; animation: live 2s ease-in-out infinite; }
.livebar { display: grid; gap: 8px; padding: 16px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.livebar .live { justify-self: start; }
.livebar p b { font-weight: 500; }

/* species cards */
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.specs--row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.spec { position: relative; display: grid; gap: 6px; align-content: start; width: 100%; padding: 10px 12px 12px 18px; text-align: left; background: var(--paper); color: var(--paper-ink);
  border-radius: 6px 16px 16px 6px; box-shadow: 0 16px 34px rgba(0, 0, 0, .28); transition: transform .12s, box-shadow .12s; }
.spec::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; border-radius: 6px 0 0 6px; background: repeating-linear-gradient(180deg, #B58A52 0 10px, #C9A36A 10px 20px); }
button.spec:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(0, 0, 0, .34); }
.spec__art { display: block; padding: 2px 0; }
.spec__name { font: 500 15px/1.2 var(--text); letter-spacing: -.01em; min-height: 2.4em; }
.spec--hidden .spec__name { font: 400 15px/1.2 var(--mono); letter-spacing: .2em; color: var(--paper-mute); }
.spec__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 22px; }
.spec__hint { font: 400 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-mute); }
.spec__hint--shiny { color: #A07A3A; }
.spec--hidden { background: #EFE5CF; }
.spec--shiny { box-shadow: 0 0 0 2px var(--brass), 0 0 22px rgba(214, 176, 122, .45), 0 16px 34px rgba(0, 0, 0, .28); background: linear-gradient(160deg, #FFF8E8 0%, var(--paper) 60%, #F5E6C4 100%); }
.spec--big { padding: 18px 20px 18px 28px; }
.spec--big .spec__name { font: 400 30px/1.1 var(--text); letter-spacing: -.03em; min-height: 0; }
.spec__wrap.is-new .spec { box-shadow: 0 0 0 2px var(--glow), 0 16px 34px rgba(0, 0, 0, .28); }
.spec__wrap.is-new .spec--shiny { box-shadow: 0 0 0 2px var(--glow), 0 0 22px rgba(214, 176, 122, .45), 0 16px 34px rgba(0, 0, 0, .28); }
.sci { font: italic 300 17px/1.4 var(--text); color: var(--ink-2); }
.metaline a { color: inherit; text-underline-offset: 3px; }

/* recall status: hairline rows, mono labels */
.recall { display: grid; border-top: 1px solid var(--hair); }
.recall__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 15px; color: var(--ink); }
.recall__row span:first-child { font: 400 10.5px/1.9 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.recall__row span:last-child { text-align: right; }
.recall .pill { margin-top: 14px; }
.due { font-weight: 500; color: var(--glow); }

/* how species unlock */
.tiers { list-style: none; display: grid; border-top: 1px solid var(--hair); }
.tiers li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.tiers .stamp { justify-self: start; background: var(--paper); }
.tiers__how { font-size: 15px; line-height: 1.4; color: var(--ink); }
.tiers em { grid-column: 2; font: 400 10px/1.4 var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--glow); }

/* Live from the Deck */
.ldeck { display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--hair-2); background: var(--shade); }
.ldeck--open { box-shadow: inset 0 0 0 2px var(--glow); background: rgba(111, 231, 225, .1); }
.ldeck__head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 400 10.5px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.ldeck__head span:first-child { color: var(--ink); }
.ldeck--open .ldeck__head span:last-child { color: var(--glow); }

/* the torn page (Giant Squid): paper with a ripped top edge, no silhouette */
.torn { --rip: polygon(0 10px, 6% 2px, 12% 9px, 19% 1px, 26% 8px, 33% 3px, 41% 10px, 48% 2px, 56% 9px, 63% 3px, 71% 10px, 78% 2px, 86% 8px, 93% 1px, 100% 9px, 100% 100%, 0 100%);
  display: grid; gap: 12px; padding: 26px 20px 18px; background: var(--paper); color: var(--paper-ink); clip-path: var(--rip); border-radius: 0 0 16px 16px; text-align: left; width: 100%; }
.torn--teaser { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.torn--teaser b { font: 400 19px/1.2 var(--text); letter-spacing: -.015em; }
.torn--teaser .small { color: var(--paper-mute); }
.torn__line { font: 400 22px/1.25 var(--text); letter-spacing: -.02em; }
.torn .small { color: var(--paper-mute); }
.torn__seen .art { width: 120px; }
.clues--paper { border-top-color: var(--paper-line); }
.clues--paper li { color: var(--paper-ink); border-bottom-color: var(--paper-line); font-size: 15.5px; }
.clues--paper li::before { color: var(--stamp-no); }

/* sonar ping: three rings */
.sonar { position: relative; width: 64px; height: 64px; flex: none; }
.sonar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--glow); opacity: 0; animation: sonar 2.4s ease-out infinite; }
.sonar i:nth-child(2) { animation-delay: .8s; } .sonar i:nth-child(3) { animation-delay: 1.6s; }
.torn .sonar i { border-color: var(--stamp-no); }
@keyframes sonar { from { transform: scale(.2); opacity: .9; } to { transform: scale(1); opacity: 0; } }
.pingbox { display: flex; gap: 16px; align-items: center; }
.ping__line { font: 400 22px/1.2 var(--text); letter-spacing: -.02em; }

/* ---- Ship deck (03b phase 2): plankton, classmates' decks, the class reef, Zewen's groups. Same column, paper and hairlines ---- */
.crew { padding-bottom: 56px; }
.crew .hello + .readout { margin-top: 26px; }
.crew .hello .comms { margin-top: 6px; }
/* plankton: a cloud of glowing dots; bright = ripe, dim = ripening */
.cloud { width: 120px; flex: none; }
.cloud circle { fill: rgba(168, 225, 206, .32); }
.cloud circle.ripe { fill: var(--glow); filter: drop-shadow(0 0 3px rgba(111, 231, 225, .9)); }
.cloud--sm { width: 56px; background: var(--paper); border-radius: 7px; padding: 2px 3px; }
.cloud--sm circle { fill: rgba(8, 127, 150, .35); }
.cloud--sm circle.ripe { fill: var(--teal); filter: none; }
.plank { display: flex; align-items: center; gap: 16px; }
.plank p:first-child { font-size: 17px; line-height: 1.45; color: var(--ink); }
.blooms, .notices, .mates { list-style: none; border-top: 1px solid var(--hair); }
.bloom { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; color: var(--ink-2); }
.bloom span:last-child { white-space: nowrap; color: var(--ink); }
.notices li { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.notices li > span { font: 400 10.5px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.notices p { font-size: 16px; line-height: 1.45; color: var(--ink); }
/* the class reef: one coral per stamped action */
.reef { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.reef i { height: 28px; border-radius: 6px 6px 2px 2px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px var(--hair); }
.reef i.on { background: linear-gradient(180deg, var(--coral) 0%, #C9633F 100%); box-shadow: 0 0 12px rgba(245, 140, 114, .35); }
/* classmates' decks: a grid of portholes, like the companion forms */
.mates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 8px; padding-top: 18px; }
.mate { display: grid; justify-items: center; gap: 6px; width: 100%; font: 400 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); text-align: center; }
.mate b { font: 400 13.5px/1.2 var(--text); letter-spacing: 0; text-transform: none; color: var(--ink); max-width: 100%; overflow-wrap: anywhere; }
.mate:hover .port { box-shadow: 0 0 0 3px var(--glow), 0 0 0 4px rgba(0, 0, 0, .3); }
.mate--tangled span { color: var(--no); }
.tangled { font-style: normal; color: var(--no); }
/* a ghost net over a tangled companion's porthole */
.netwrap { position: relative; flex: none; }
.net { position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; opacity: .85;
  background: repeating-linear-gradient(45deg, transparent 0 7px, rgba(20, 30, 36, .55) 7px 8.5px), repeating-linear-gradient(-45deg, transparent 0 7px, rgba(20, 30, 36, .55) 7px 8.5px); }
.stickers { display: grid; gap: 8px; }
.sticker { display: flex; align-items: center; min-height: 52px; padding: 12px 18px; border-radius: 16px; background: var(--paper); color: var(--paper-ink); font: 500 16px/1.25 var(--text); text-align: left; transform: rotate(-.6deg); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); }
.sticker:nth-child(2) { transform: rotate(.5deg); }
.sticker:hover { box-shadow: 0 0 0 2px var(--glow), 0 12px 28px rgba(0, 0, 0, .28); }
/* the action wall: the friend's verified action, on paper */
.wall { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0 10px; }
.wall p:first-child { font-size: 16px; line-height: 1.4; }
.wall__photo { aspect-ratio: 4 / 3; display: grid; place-items: center; border-radius: 10px; background: var(--paper-line); color: var(--paper-mute); font: 400 9.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-align: center; overflow: hidden; }
.wall__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Zewen's interest groups */
.gcards { display: grid; gap: 10px; }
.gcard { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.gcard + .gcard { border-top: 0; }
.gcard b { display: block; font: 400 20px/1.15 var(--text); letter-spacing: -.02em; color: var(--ink); }
.gcard .small { margin-top: 3px; }
.gcard .metaline { margin-top: 6px; }
.scooprule { font-weight: 500; color: var(--ink); }

/* ---- card effects and game feel (fx.js). Our own take on what card games do: tilt, glare, foil by tier, a shine sweep on
   a card that changed, a pack-style flip reveal, a confetti burst and a toast for reward moments. All off under reduced motion. ---- */
:root { --bounce: cubic-bezier(.34, 1.56, .64, 1); }
.spec--fx { --px: 50%; --py: 50%; --rx: 0deg; --ry: 0deg; transform-style: preserve-3d; transition: transform .45s var(--bounce), box-shadow .3s; will-change: transform; }
.spec--fx.is-lit { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .09s linear, box-shadow .3s; }
.spec--big.spec--fx { touch-action: none; }                     /* a finger drag tilts the big card instead of scrolling */
.spec__foil, .spec__glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; }
.spec--fx.is-lit .spec__foil, .spec--fx.is-lit .spec__glare, .spec--fx.is-wobble .spec__foil, .spec--fx.is-wobble .spec__glare { opacity: 1; }
[data-fx="holo"].is-lit .spec__foil, [data-fx="holo"].is-wobble .spec__foil { opacity: .9; }
.spec__glare { background: radial-gradient(circle at var(--px) var(--py), rgba(255, 255, 255, .6), rgba(255, 255, 255, .14) 30%, transparent 62%); mix-blend-mode: soft-light; }
/* foil by tier: rare = teal sheen · legendary = rainbow holo with fine lines · shiny = brass foil + sparkle · mythic = dark aura, slow foil */
.spec__foil { background-size: 260% 260%; background-position: var(--px) var(--py); mix-blend-mode: overlay; }
[data-fx="tilt"] .spec__foil { display: none; }
[data-fx="sheen"] .spec__foil { background-image: linear-gradient(115deg, transparent 32%, rgba(111, 231, 225, .5) 46%, rgba(168, 225, 206, .75) 50%, rgba(111, 231, 225, .5) 54%, transparent 68%); }
[data-fx="holo"] .spec__foil { background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .22) 0 1.5px, transparent 1.5px 4px),
  linear-gradient(115deg, #FF8A8A 0%, #FFD36E 18%, #8AFFC1 36%, #6FE7E1 52%, #A78BFA 70%, #FF8AD6 86%, #FF8A8A 100%); background-size: 100% 100%, 260% 260%; background-position: 0 0, var(--px) var(--py); filter: saturate(1.7) contrast(1.15); }
[data-fx="shiny"] .spec__foil { background-image: radial-gradient(circle, #FFFFFF 0 1px, transparent 1.7px), linear-gradient(115deg, transparent 26%, rgba(214, 176, 122, .7) 42%, #FFF2C8 50%, rgba(214, 176, 122, .7) 58%, transparent 74%);
  background-size: 16px 16px, 260% 260%; background-position: var(--px) var(--py), var(--px) var(--py); mix-blend-mode: overlay; }
[data-fx="mythic"] .spec__foil { background-image: linear-gradient(115deg, #2A0A2A 0%, #B83A28 30%, #6E3B6E 50%, #F58C72 70%, #2A0A2A 100%); opacity: .45; animation: foilslow 7s linear infinite; mix-blend-mode: soft-light; }
.spec[data-fx="mythic"] { box-shadow: 0 0 0 2px #6E3B6E, 0 0 28px rgba(184, 58, 40, .55), 0 16px 34px rgba(0, 0, 0, .3); animation: aura 3.2s ease-in-out infinite alternate; }
@keyframes aura { from { box-shadow: 0 0 0 2px #6E3B6E, 0 0 18px rgba(184, 58, 40, .4), 0 16px 34px rgba(0, 0, 0, .3); } to { box-shadow: 0 0 0 2px #B83A28, 0 0 40px rgba(184, 58, 40, .75), 0 16px 34px rgba(0, 0, 0, .3); } }
@keyframes foilslow { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
/* rarity frames on cards in colour */
.spec--colour.tier--rare { box-shadow: 0 0 0 1.5px rgba(8, 127, 150, .5), 0 16px 34px rgba(0, 0, 0, .28); }
.spec--colour.tier--legendary { box-shadow: 0 0 0 2px var(--stamp-no), 0 0 18px rgba(184, 58, 40, .35), 0 16px 34px rgba(0, 0, 0, .28); }
.spec--colour.tier--legendary.spec--shiny { box-shadow: 0 0 0 2px var(--brass), 0 0 0 4px var(--stamp-no), 0 0 24px rgba(214, 176, 122, .5), 0 16px 34px rgba(0, 0, 0, .28); }
/* tap on a phone: a short wobble with the foil sweeping across */
@keyframes wobble { 0% { transform: perspective(900px) rotateX(0) rotateY(0); } 25% { transform: perspective(900px) rotateX(8deg) rotateY(-13deg); } 55% { transform: perspective(900px) rotateX(-6deg) rotateY(13deg); } 80% { transform: perspective(900px) rotateX(3deg) rotateY(-5deg); } 100% { transform: none; } }
@keyframes foilsweep { from { background-position: 0 0, 100% 100%; } to { background-position: 0 0, 0% 0%; } }
.spec--fx.is-wobble { animation: wobble 1.05s var(--bounce) both; }
.spec--fx.is-wobble .spec__foil { animation: foilsweep 1.05s ease-in-out both; }
/* a card that just changed: one diagonal shine */
.spec__wrap.is-new .spec::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%) no-repeat; background-size: 260% 100%; animation: sweep 1.5s ease-out .4s both; }
@keyframes sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }
/* the reveal: face down on the card back, then flipped up by fx.js one after another */
.reveal--one { display: grid; }
.flip { perspective: 1000px; }
.flip__in { position: relative; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform .75s var(--bounce); }
.flip.is-up .flip__in { transform: rotateY(0); }
.flip__front, .flip__back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip__back { position: absolute; inset: 0; transform: rotateY(180deg); }
.cardback { display: grid; place-items: center; align-content: center; gap: 8px; width: 100%; height: 100%; border-radius: 6px 16px 16px 6px; color: var(--paper);
  background: var(--navy) radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.5px) 0 0 / 10px 10px; box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 8px var(--brass), 0 16px 34px rgba(0, 0, 0, .28); }
.cardback i { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--brass); box-shadow: inset 0 0 0 4px var(--navy), inset 0 0 0 6px rgba(214, 176, 122, .5); }
.cardback b { font: 400 11px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; }
.cardback b em { font-style: normal; color: var(--ox); }
.cardback > span { font: 400 9px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; opacity: .7; }
/* the back glows with the tier before it turns, so a legendary is felt before it is seen */
.flip[data-tier="rare"]:not(.is-up) .cardback { box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 8px var(--brass), 0 0 22px rgba(111, 231, 225, .55), 0 16px 34px rgba(0, 0, 0, .28); }
.flip[data-tier="legendary"]:not(.is-up) .cardback, .flip[data-shiny="1"]:not(.is-up) .cardback { box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 8px var(--brass), 0 0 30px rgba(245, 140, 114, .75), 0 16px 34px rgba(0, 0, 0, .28); animation: backglow 1.2s ease-in-out infinite alternate; }
.flip[data-tier="mythic"]:not(.is-up) .cardback { box-shadow: inset 0 0 0 6px #2A0A2A, inset 0 0 0 8px var(--stamp-no), 0 0 40px rgba(184, 58, 40, .8), 0 16px 34px rgba(0, 0, 0, .28); animation: backglow 1s ease-in-out infinite alternate; }
@keyframes backglow { to { filter: brightness(1.25); } }
/* reward moments */
.fxlayer { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
.toast { position: fixed; top: 16px; left: 50%; z-index: 60; transform: translate(-50%, 0); background: var(--paper); color: var(--navy); font: 500 11.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 13px 20px; border-radius: 999px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .35); white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; animation: drop .55s var(--bounce) both; }
.toast.is-out { animation: lift .4s ease-in both; }
@keyframes drop { from { transform: translate(-50%, -160%); } to { transform: translate(-50%, 0); } }
@keyframes lift { to { transform: translate(-50%, -160%); opacity: 0; } }
/* every tap squashes and springs back; cards keep their own tilt transform */
@keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(.94, .9); } 65% { transform: scale(1.04, 1.06); } 100% { transform: none; } }
.is-pop:not(.spec):not(.flip) { animation: pop .4s var(--bounce); }
.chip, .pill, .act, .opt, .sticker, .mate .port, .form .port { transition-timing-function: var(--bounce); }
.cloud circle.ripe { animation: twinkle 2.8s ease-in-out infinite; }
.cloud circle.ripe:nth-child(2n) { animation-delay: -1.4s; } .cloud circle.ripe:nth-child(3n) { animation-delay: -.7s; }
@keyframes twinkle { 50% { opacity: .45; } }
.reef i.on { animation: pop .55s var(--bounce) both; }
.reef i.on:nth-child(2n) { animation-delay: .06s; } .reef i.on:nth-child(3n) { animation-delay: .12s; }

/* ---- 3D and motion (Gaoyang, 21 Oct: "3D, iridescent effects, motion design, like a real game") ---- */
/* every screen enters with a short rise; the dive frame keeps its own sticky bars */
#app > .screen, #app > .deck, #app > .door, #app > .run > .run__col { animation: enter .42s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes enter { from { opacity: 0; transform: translateY(14px); } }
/* depth on the card: the animal lifts off the paper, the name a little, the foil stays on it; a soft shadow sells the lift */
.spec--fx { --nx: 0; --ny: 0; }
.spec--fx .spec__art, .spec--fx .spec__name, .spec--fx .spec__foot { transition: transform .45s var(--bounce); }
.spec--fx .spec__art { position: relative; }
.spec--fx .spec__art::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -2px; height: 14px; border-radius: 50%; background: rgba(46, 36, 24, .28); filter: blur(6px); opacity: 0; transition: opacity .4s, transform .45s var(--bounce); transform: translateZ(-1px); }
.spec--fx.is-lit .spec__art, .spec--fx.is-wobble .spec__art { transform: translate3d(calc(var(--nx) * -5px), calc(var(--ny) * -5px), 28px); }
.spec--fx.is-lit .spec__art::after, .spec--fx.is-wobble .spec__art::after { opacity: 1; transform: translate3d(calc(var(--nx) * 10px), calc(var(--ny) * 8px), -1px) scale(1.04); }
.spec--fx.is-lit .spec__name, .spec--fx.is-wobble .spec__name { transform: translateZ(12px); }
.spec--fx.is-lit .spec__foot, .spec--fx.is-wobble .spec__foot { transform: translateZ(8px); }
/* iridescence: the holo hue turns with the tilt angle, like thin-film colour */
[data-fx="holo"] .spec__foil { filter: saturate(1.7) contrast(1.15) hue-rotate(calc(var(--ry) * 5)); }
/* rays behind a legendary or mythic card as it turns up: the big reward moment */
.flip { position: relative; }
.flip[data-tier="legendary"].is-up::before, .flip[data-tier="mythic"].is-up::before { content: ""; position: absolute; inset: -40%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(245, 140, 114, .28) 0 9deg, transparent 9deg 24deg); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%); mask-image: radial-gradient(circle, #000 20%, transparent 70%);
  animation: rays 2.6s ease-out .4s both; }
.flip[data-tier="mythic"].is-up::before { background: repeating-conic-gradient(from 0deg, rgba(184, 58, 40, .4) 0 9deg, transparent 9deg 24deg); }
@keyframes rays { 0% { opacity: 0; transform: rotate(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(60deg) scale(1.15); } }
/* the 3D characters (model3d.js): the baked still waits under the canvas as a poster until the renderer mounts after the bubbles clear */
.m3d { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #061D2B, #01060A); box-shadow: inset 0 0 0 1px var(--hair-2), 0 24px 60px rgba(0, 0, 0, .4); }
.m3d .m3d__poster { position: absolute; left: 50%; top: 50%; width: 72%; transform: translate(-50%, -50%); pointer-events: none; }
.m3d canvas { position: relative; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.m3d--enter { animation: rise3d .9s var(--bounce) both; transform-origin: 50% 110%; }
@keyframes rise3d { from { opacity: 0; transform: translateY(120px) scale(.4); } }
.m3d canvas:active { cursor: grabbing; }
.m3d__tag { position: absolute; right: 14px; bottom: 12px; font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #04202B; background: var(--glow); padding: 5px 8px; border-radius: 999px; pointer-events: none; }
/* plankton flying into your count */
.fly { position: fixed; z-index: 55; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 10px var(--glow); }
/* the ghost net tears away once the otter is freed */
.net--cut { animation: netcut .9s ease-in both; }
@keyframes netcut { 30% { transform: rotate(-8deg) scale(1.05); opacity: .9; } 100% { transform: translate(-30px, 60px) rotate(-30deg) scale(.6); opacity: 0; } }
/* the companion sways in its porthole; the otter bobs */
.port--form .art { animation: swim 4.4s ease-in-out infinite; }
@keyframes swim { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(-3px) rotate(-3deg); } }
.comms .port img { animation: bob 3.8s ease-in-out infinite; }
.pill:hover:not([disabled]) { transform: translateY(-1px); }

/* ---- the ship hub (integration, 21 Oct): the research vessel in 3D with tappable parts, and chunky game buttons ---- */
.hub { position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #8FD0D6 0%, #1D7C93 55%, #0A3B51 100%); box-shadow: inset 0 0 0 1px var(--hair-2), 0 24px 60px rgba(0, 0, 0, .35); margin-top: 22px; }
.hub > canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.hub__hots { position: absolute; inset: 0; pointer-events: none; }
.hot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 4px; pointer-events: auto; opacity: 0; transition: opacity .4s, transform .2s var(--bounce); }
.hot.is-placed { opacity: 1; }
.hot i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--paper); color: var(--navy); box-shadow: 0 0 0 3px var(--brass), 0 0 0 5px rgba(0, 0, 0, .25), 0 0 18px rgba(111, 231, 225, .55); }
.hot .ico { width: 20px; height: 20px; }
.hot span { font: 500 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #04202B; background: var(--glow); padding: 4px 7px; border-radius: 999px; white-space: nowrap; }
.hot:hover, .hot:focus-visible { transform: translate(-50%, -100%) scale(1.08); }
.hot[data-hot="sub"] i { box-shadow: 0 0 0 3px var(--ox), 0 0 0 5px rgba(0, 0, 0, .25), 0 0 18px rgba(255, 106, 61, .6); }
.gbtns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.gbtn { display: grid; justify-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 18px; background: var(--paper); color: var(--navy); text-align: center;
  box-shadow: 0 5px 0 #B58A52, 0 14px 30px rgba(0, 0, 0, .3); transition: transform .12s var(--bounce), box-shadow .12s; }
.gbtn i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--teal); color: var(--cream); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.gbtn .ico { width: 24px; height: 24px; }
.gbtn b { font: 500 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.gbtn span { font-size: 11.5px; line-height: 1.3; color: var(--paper-mute); min-height: 2.6em; }
.gbtn:active { transform: translateY(4px); box-shadow: 0 1px 0 #B58A52, 0 8px 20px rgba(0, 0, 0, .3); }
.gbtn--primary i { background: var(--ox); }
.gbtn .new { font-style: normal; color: var(--teal); font-weight: 500; }
.ico { display: inline-block; vertical-align: middle; }
/* account, friends, cabin, expeditions, levels, team */
.oxid { display: grid; gap: 6px; padding: 18px 20px; border-radius: 18px; background: var(--paper); color: var(--paper-ink); box-shadow: 0 5px 0 #B58A52, 0 14px 30px rgba(0, 0, 0, .3); }
.oxid span { font: 400 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-mute); }
.oxid b { font: 500 26px/1.1 var(--mono); letter-spacing: .12em; color: var(--navy); }
.frow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.frow b { display: block; font: 400 17px/1.2 var(--text); color: var(--ink); }
.frow .small { display: block; }
.err { color: var(--no); }
.recall__row.is-now span { color: var(--glow); }
.shelf { display: grid; gap: 10px; margin-top: 10px; }
.shelf__head { display: flex; justify-content: space-between; font: 400 10.5px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.shelf__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0 0 12px; border-bottom: 6px solid #B58A52; border-radius: 0 0 4px 4px; }
.shelf__row .spec { padding: 6px 6px 8px 10px; gap: 2px; } .shelf__row .spec__name { font-size: 10px; min-height: 2.4em; } .shelf__row .spec__foot { display: none; }
.stops { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.stops li { display: flex; align-items: center; gap: 6px; font: 400 10.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.stops li i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.stops li.done { color: var(--ink-2); } .stops li.done i { background: var(--glow); box-shadow: none; }
.stops li.now, .stops li.next { color: var(--glow); } .stops li.now i, .stops li.next i { box-shadow: inset 0 0 0 1.5px var(--glow); }
.teamlist .frow b { font-size: 15.5px; }
.door__foot .textlink { padding: 0; }

.gbtn { position: relative; padding: 12px 6px 10px; }
.gbtn .ico3 { width: 52px; height: 52px; }
.gbtn__badge { position: absolute; top: 8px; right: 8px; font: 500 11px/1 var(--mono); font-style: normal; letter-spacing: .04em; color: var(--paper); background: var(--navy); padding: 5px 7px; border-radius: 999px; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.gbtn--primary .gbtn__badge { background: var(--ox); }
.gbtn--wide { grid-template-columns: auto 1fr; justify-items: start; text-align: left; gap: 4px 14px; padding: 12px 16px; }
.gbtn--wide .ico3 { grid-row: 1 / span 2; } .gbtn--wide .guiderow__arts { grid-column: 2; }
.hot .ico3 { width: 46px; height: 46px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); }
.hot i { display: none; }
.hot span { opacity: 0; transition: opacity .2s; }
.hot:hover span, .hot:focus-visible span { opacity: 1; }
.who { display: flex; align-items: center; gap: 8px; }
.who .port--sm { width: 34px; height: 34px; box-shadow: 0 0 0 2px var(--brass), 0 0 0 3px rgba(0, 0, 0, .3); }
.who__n { font: 500 13px/1 var(--text); color: var(--ink); }
.who__v { display: inline-flex; align-items: center; gap: 4px; font: 500 14px/1 var(--text); color: var(--ink); }
.who__v .ico3 { width: 22px; height: 22px; }
.mission__row .ico3 { flex: none; }
.hub { aspect-ratio: 5 / 4; }
/* the icon sheet (review) */
.icosheet { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 10px; padding: 24px; background: var(--abyss-1); }
.icosheet__i { display: grid; justify-items: center; gap: 6px; font: 400 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }

/* the cloze (day-7 recall, friend quiz): a sentence with blanks you type into */
.cloze { font: 400 22px/1.7 var(--text); letter-spacing: -.015em; color: var(--ink); }
.blank { display: inline-block; width: 7.5em; max-width: 60%; margin: 0 .15em; padding: 0 .3em 2px; background: transparent; border: 0; border-bottom: 2px solid var(--glow); border-radius: 0; font: inherit; color: var(--glow); text-align: center; vertical-align: baseline; }
.blank:focus { outline: 0; background: rgba(111, 231, 225, .1); }
.cloze--marked b { font-weight: 500; padding: 0 .3em 2px; border-bottom: 2px solid currentColor; }
.cloze--marked b.ok { color: var(--ok); } .cloze--marked b.no { color: var(--no); text-decoration: line-through; }
.model blockquote b { color: var(--glow); font-weight: 600; }

/* ---- the game-screen kit (ui.js, 22 Oct): back coin, section heads, stats, tags, badges, icon rows, tiles, the (i) sheet ---- */
.back { display: inline-flex; align-items: center; gap: 6px; padding: 0; font: 500 13px/1 var(--text); color: var(--ink); }
.back .ico3 { width: 34px; height: 34px; }
.hello__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.hello__row .h-display { flex: 1; min-width: 0; }
.sect { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.sect b { font: 500 17px/1.2 var(--text); letter-spacing: -.01em; color: var(--ink); }
.sect .ico3 { width: 30px; height: 30px; flex: none; }
.sect .info { margin-left: auto; }
.badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; font: 600 11.5px/1 var(--text); font-style: normal; letter-spacing: 0; text-transform: none;
  color: var(--paper); background: var(--navy); box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 0 0 2px rgba(255, 255, 255, .14); white-space: nowrap; }
.badge--ox { background: var(--ox); } .badge--ok { background: var(--stamp-ok); } .badge--mute { background: #3A5564; } .badge--glow { background: var(--glow); color: #04202B; }
.badge--lg { height: 28px; min-width: 28px; font-size: 13.5px; padding: 0 10px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { display: grid; justify-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 18px; background: var(--shade); box-shadow: inset 0 0 0 1px var(--hair); text-align: center; }
.stat__coin { position: relative; display: inline-block; line-height: 0; }
.stat__coin .ico3 { width: 48px; height: 48px; }
.stat__coin .badge { position: absolute; right: -12px; top: -6px; }
.stat > span:last-child { font: 500 12.5px/1.2 var(--text); color: var(--ink-2); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 4px; border-radius: 999px; background: rgba(2, 14, 22, .5); box-shadow: inset 0 0 0 1px var(--hair-2); font: 500 12.5px/1 var(--text); color: var(--ink); white-space: nowrap; }
.tag .ico3 { width: 24px; height: 24px; flex: none; }
.tag--stage { background: var(--glow); color: #04202B; box-shadow: none; }
.tag--paper { background: var(--paper); color: var(--navy); box-shadow: 0 2px 0 #B58A52; }
.info { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font: 600 15px/1 var(--text); font-style: italic; color: var(--navy); background: var(--paper); box-shadow: 0 2px 0 #B58A52, 0 6px 14px rgba(0, 0, 0, .3); transition: transform .12s var(--bounce); }
.info:hover { transform: translateY(-1px); }
.infosheet { position: fixed; inset: 0; z-index: 80; background: rgba(1, 6, 10, .6); display: grid; align-items: end; justify-items: center; animation: fadein .22s ease both; }
@keyframes fadein { from { opacity: 0; } }
.infosheet__card { width: 100%; max-width: var(--col); max-height: 82vh; overflow: auto; background: var(--paper); color: var(--paper-ink); border-radius: 26px 26px 0 0; padding: 18px var(--gutter) calc(26px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .5); animation: slideup .32s cubic-bezier(.2, .8, .2, 1) both; }
@media (min-width: 720px) { .infosheet { align-items: center; padding: 24px; } .infosheet__card { border-radius: 26px; } }
.infosheet__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.infosheet__head .ico3 { width: 30px; height: 30px; }
.infosheet__head b { flex: 1; font: 500 20px/1.2 var(--text); letter-spacing: -.02em; }
.infosheet__x { width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: var(--paper); font: 300 24px/1 var(--text); display: grid; place-items: center; }
.infosheet__body { display: grid; gap: 10px; font-size: 15.5px; line-height: 1.5; }
.infosheet__body p + p { margin-top: 2px; }
.infosheet__body .tiers { border-top-color: var(--paper-line); } .infosheet__body .tiers li { border-bottom-color: var(--paper-line); } .infosheet__body .tiers__how { color: var(--paper-ink); } .infosheet__body .tiers em { color: var(--teal); }
.infosheet__body .irow { border-bottom-color: var(--paper-line); } .infosheet__body .irow__l { color: var(--paper-ink); } .infosheet__body .irow__r { color: var(--paper-mute); }
.infosheet__body b { font-weight: 600; }
.irows { display: grid; }
.irow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.irow .ico3 { width: 34px; height: 34px; }
.irow__l { font: 500 15.5px/1.3 var(--text); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.irow__r { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1.2 var(--text); color: var(--ink-2); white-space: nowrap; }
.irow--now .irow__l, .irow--now .irow__r { color: var(--glow); }
.irow--dim { opacity: .55; }
.tile { display: grid; gap: 10px; width: 100%; padding: 16px 18px; border-radius: 20px; background: var(--paper); color: var(--paper-ink); text-align: left; box-shadow: 0 5px 0 #B58A52, 0 14px 30px rgba(0, 0, 0, .3); }
.tile--dark { background: var(--shade); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-2); }
button.tile { transition: transform .12s var(--bounce), box-shadow .12s; } button.tile:active { transform: translateY(4px); box-shadow: 0 1px 0 #B58A52, 0 8px 20px rgba(0, 0, 0, .3); }
.tile__row { display: flex; align-items: center; gap: 12px; }
.tile__row b { font: 500 17px/1.2 var(--text); letter-spacing: -.01em; }
.tile__row .grow { min-width: 0; }
.tile .small { color: inherit; opacity: .78; }
.ring { display: block; color: var(--glow); }
.deck__foot { margin-top: 36px; display: flex; justify-content: center; gap: 10px; border-top: 0; padding-top: 0; }
.foot__b { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(2, 14, 22, .45); box-shadow: inset 0 0 0 1px var(--hair); font: 500 12.5px/1 var(--text); color: var(--ink-2); }
.foot__b .ico3 { width: 26px; height: 26px; }
.foot__b:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--glow); }

/* ---- the hub fills the screen (22 Oct): no framed box, labels always on, the coins kept apart by mountHub ---- */
.hub { aspect-ratio: auto; width: 100%; height: min(64vh, 560px); min-height: 330px; margin-top: 0; border-radius: 0; box-shadow: none; }
.hub > canvas { touch-action: none; cursor: grab; }   /* the free orbit: the canvas owns the touch; the page does not scroll under a drag */
.hub.hub--3d { --hz: 27%; background: radial-gradient(circle at 82% 9%, #FFF5DF 0 2.2%, rgba(255, 245, 223, .35) 3.2%, transparent 5%), radial-gradient(circle at 12% 4%, #FFF5DF 0 1px, transparent 2px), radial-gradient(circle at 31% 9%, #FFF5DF 0 1px, transparent 2px), radial-gradient(circle at 47% 3%, #FFF5DF 0 1.5px, transparent 2.5px), radial-gradient(circle at 63% 7%, #FFF5DF 0 1px, transparent 2px), radial-gradient(circle at 93% 3%, #FFF5DF 0 1px, transparent 2px), radial-gradient(circle at 24% 14%, #FFF5DF 0 1px, transparent 2px), linear-gradient(180deg, #0E0E30, #2A1F55 calc(var(--hz) * .3), #6A3A66 calc(var(--hz) * .6), #B9524A calc(var(--hz) * .82), #F2A26B var(--hz), #2A8EA3 calc(var(--hz) + 1.2%), #135F78 calc(var(--hz) + 14%), #061D2B); }   /* the 2D sky: dusk down to the horizon, the moon, stars; the 3D ship's canvas is transparent over it, its sea covers the rest */
@media (orientation: portrait) { .hub.hub--3d { --hz: 20%; } }
.hub--3d .hub__hots { z-index: 2; }
.hot span { opacity: 1; font: 600 10.5px/1 var(--text); letter-spacing: .02em; text-transform: none; padding: 5px 9px; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.hot .ico3 { width: 48px; height: 48px; }
.deck .col + .hub { margin-top: 4px; }
.hub + .col .gbtns { margin-top: -26px; position: relative; z-index: 2; }
.stages { margin-bottom: 2px; }
/* the dive chrome: the zone as a tag, no mono label over the depth */
.hud__zone { margin-left: auto; }
.hud__num { font-size: 24px; }
.divecard .tags { padding-top: 2px; }
.q-hint { font: 500 12px/1 var(--text); letter-spacing: 0; text-transform: none; color: #04202B; background: var(--glow); padding: 4px 9px; border-radius: 999px; }
/* labels and links in sentence case (the mono uppercase stays for the wordmark, the pills and the paper logs) */
.q-label { font: 500 13px/1.5 var(--text); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.textlink { font: 500 13px/1 var(--text); letter-spacing: 0; text-transform: none; }
.metaline { font: 400 13px/1.5 var(--text); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.compare span, .logbook__head, .model figcaption { letter-spacing: .1em; }
.hud__zone.tag { text-transform: none; letter-spacing: 0; color: var(--ink); font: 500 12.5px/1 var(--text); }
.node__art img { transform: scale(1.42); object-position: 50% 56%; }

.pill--ico { padding-left: 14px; gap: 8px; }
.pill .ico3 { width: 26px; height: 26px; flex: none; }
.pill--sm.pill--ico { padding-left: 10px; }
.row--mid { justify-content: center; }

/* ---- touch targets ≥ 44 px everywhere a finger lands (22 Oct, the six-size bar) ---- */
.pill--sm { min-height: 44px; }
.textlink, .quiet, .link { display: inline-flex; align-items: center; min-height: 44px; }
.hud__btn { width: 44px; height: 44px; font-size: 22px; }
.who, .back, .foot__b { min-height: 44px; }
.info { position: relative; isolation: isolate; width: 44px; height: 44px; background: none; box-shadow: none; }
.info::before { content: ""; position: absolute; inset: 7px; z-index: -1; border-radius: 50%; background: var(--paper); box-shadow: 0 2px 0 #B58A52, 0 6px 14px rgba(0, 0, 0, .3); }
.infosheet__x { width: 44px; height: 44px; }
.chip { min-height: 44px; }
.spec__wrap .spec, button.spec { min-height: 44px; }

/* the hub fills the viewport: tall in portrait, wide in landscape */
@media (orientation: portrait) { .hub { height: clamp(330px, 72vh, 760px); } }
@media (orientation: landscape) { .hub { height: clamp(260px, 70vh, 640px); } }
/* a tall desktop window (29 Oct, the coordinator's round 2: at 1470×1200 the scene filled the top 55 % over a plain gradient): from
   16:9 to 5:4 the hub takes the whole viewport under the header — the drawing grows downward to the seabed, the 3D sea fills the
   bottom — and the three pills sit over the scene's bottom edge */
@media (orientation: landscape) and (min-width: 1024px) and (min-height: 700px) {
  .deck--wide { position: relative; }
  .deck--wide .hub { height: calc(100vh - 60px); height: calc(100dvh - 60px); max-height: none; min-height: 480px; }   /* a definite height: the canvas's height: 100% resolves against it (a flex-grown box would leave it at the buffer's own aspect) */
  .deck.deck--wide .deck__foot { position: absolute; left: 0; right: 0; bottom: 112px; margin: 0; padding: 0; z-index: 3; pointer-events: none; }   /* above the big button's band, so the page's last taps clear the HUD (ui-lint) */
  .deck.deck--wide .deck__foot .foot__b { pointer-events: auto; }
}

/* the sponsor tour (29 Oct): a caption bar at the top, the next tap outlined */
.tour { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: min(640px, calc(100vw - 24px)); padding: 10px 14px; border-radius: 16px; background: rgba(2, 14, 22, .92); color: var(--ink); box-shadow: 0 8px 28px rgba(0, 0, 0, .4), inset 0 0 0 1px var(--glow); font: 400 14px/1.4 var(--text); }
.tour__n { font: 600 12px/1 var(--text); color: #04202B; background: var(--glow); padding: 6px 9px; border-radius: 999px; white-space: nowrap; } .tour__cap { margin: 0; flex: 1 1 260px; min-width: 0; }
.tour__btns { display: flex; gap: 6px; margin-left: auto; } .tour__b { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--glow); color: #04202B; font: 600 13px/1 var(--text); cursor: pointer; } .tour__b--skip { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair-2); }
.tour-hi { outline: 3px solid var(--glow); outline-offset: 5px; animation: tourpulse 1.1s ease-in-out infinite; } @keyframes tourpulse { 0%, 100% { outline-offset: 5px; outline-color: var(--glow); } 50% { outline-offset: 9px; outline-color: #FFF5DF; } }
body.console-page .tour { font-family: var(--text); }
@media (prefers-reduced-motion: reduce) { .tour-hi { animation: none; } }
/* the bubble wipe between screens (fx.js): its own canvas over everything */
.wipelayer { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 70; }

/* ---- Expeditions, Gate A v2 (22 Oct): a depth chart with the dives at their real depths, a glowing route, a chunky
   game button where the thumb is, stop coins, and three layouts (tall · land · wide) ---- */
.exped { padding-bottom: 0; }
.map__head { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; max-width: 1400px; margin: 0 auto; padding: 14px clamp(14px, 3vw, 32px) 6px; }
.map__head .back { min-width: 44px; }
.ribbon { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px; background: linear-gradient(180deg, #FFF8E8, #F1DFB6); color: var(--navy); border-radius: 10px; font: 800 20px/1 var(--text); letter-spacing: -.01em;
  box-shadow: 0 4px 0 #B58A52, 0 10px 24px rgba(0, 0, 0, .35); }
.ribbon::before, .ribbon::after { content: ""; position: absolute; top: 8px; width: 16px; height: calc(100% - 8px); background: #C9A36A; z-index: -1; }
.ribbon::before { left: -10px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); } .ribbon::after { right: -10px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.ribbon b { font-weight: 800; }
.map { position: relative; width: 100%; overflow: hidden; }
.map__chart { position: relative; width: 100%; overflow: hidden;
  background: linear-gradient(180deg, #3FB3C2 0%, #1D7C93 14%, #135F78 32%, #0A3B51 56%, #061D2B 78%, #02101A 100%); }
.map__rays { position: absolute; inset: 0 -20% 55%; pointer-events: none; opacity: .55; background: repeating-linear-gradient(104deg, rgba(255, 255, 255, .12) 0 26px, transparent 26px 90px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); animation: rays 16s ease-in-out infinite alternate; }
.map__drift { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.map__drift i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: rgba(168, 225, 206, .55); box-shadow: 0 0 6px rgba(111, 231, 225, .6); animation: driftup var(--t) linear var(--d) infinite; }
@keyframes driftup { 0% { transform: translateY(40px); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .7; } 100% { transform: translateY(-60px); opacity: 0; } }
.map__shadow { position: absolute; transform: translate(-50%, -50%); opacity: .22; pointer-events: none; animation: swimby 9s ease-in-out infinite alternate; }
.map__shadow .art { width: 100%; height: auto; filter: blur(.4px); }
.map__shadow .art path, .map__shadow .art * { fill: #01060A !important; stroke: none !important; }
@keyframes swimby { from { transform: translate(-50%, -50%) translateX(-14px); } to { transform: translate(-50%, -50%) translateX(14px); } }
.map__bed { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 90px; fill: #01060A; opacity: .95; pointer-events: none; }
.map__rail { position: absolute; right: 8px; top: 0; bottom: 0; width: 56px; pointer-events: none; font: 500 10.5px/1 var(--text); color: rgba(201, 220, 221, .55); text-align: right; }
.map__rail span { position: absolute; right: 0; transform: translateY(-50%); padding-right: 12px; white-space: nowrap; }
.map__rail span::after { content: ""; position: absolute; right: 0; top: 50%; width: 8px; height: 1px; background: rgba(201, 220, 221, .4); }
.map__in { position: relative; width: 100%; max-width: 480px; margin: 0 auto; height: 100%; padding: 0 16px; }
.map__path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.map__path path { fill: none; stroke-linecap: round; }
.map__path .glow { stroke-width: 18; filter: url(#mapglow); opacity: 0; }
.map__path .glow--done { stroke: var(--glow); opacity: .55; } .map__path .glow--open { stroke: var(--glow); opacity: .3; }
.map__path .link { stroke-width: 7; }
.map__path .link--locked { stroke: rgba(255, 255, 255, .18); stroke-dasharray: 0 18; }
.map__path .link--open { stroke: rgba(111, 231, 225, .75); stroke-dasharray: 0 18; animation: routeflow 1.4s linear infinite; }
.map__path .link--done { stroke: var(--glow); stroke-dasharray: 26 10; animation: routeflow 2.2s linear infinite; }
@keyframes routeflow { to { stroke-dashoffset: -36; } }
.node { position: absolute; width: 200px; display: grid; justify-items: center; gap: 6px; transform: translateY(-80px); }
.node__coin { position: relative; width: 160px; height: 160px; display: grid; place-items: center; border-radius: 50%; transition: transform .14s var(--bounce); filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .45)); }
.node__coin:hover { transform: translateY(-2px) scale(1.02); }
.node__coin .scene { display: block; }
.node .ring { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--glow); }
.node__state { position: absolute; right: -4px; top: -4px; line-height: 0; }
.node__state .ico3 { width: 44px; height: 44px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.node__depth { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); }
.node__name { display: grid; justify-items: center; gap: 1px; text-align: center; }
.node__name b { font: 700 15px/1.2 var(--text); color: var(--ink); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.node__name span { font: 500 13px/1.3 var(--text); color: var(--ink-2); max-width: 176px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.node.is-locked .node__name { opacity: .75; }
.node.is-done .ring { color: var(--ok); }
.node.is-active .node__coin::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--glow); opacity: 0; animation: nodeping 2.2s ease-out infinite; }
.stops { list-style: none; display: flex; flex-wrap: nowrap; gap: 1px; justify-content: center; max-width: 200px; }
.stops li { line-height: 0; position: relative; }
.stops li .ico3 { width: 32px; height: 32px; }
.stops li.locked, .stops li.next { opacity: .5; filter: saturate(.35) brightness(.85); }
.stops li.next { opacity: .7; }
.stops li.now { position: relative; }
.stops li.now::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; border: 2px solid var(--glow); animation: nodeping 1.8s ease-out infinite; }
.stops li.done .ico3 { filter: drop-shadow(0 0 6px rgba(111, 231, 225, .8)); }
/* the one big game button */
.gbig { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 176px; min-height: 64px; padding: 12px 28px 12px 18px; border-radius: 22px;
  background: linear-gradient(180deg, #FF8A62 0%, #FF6A3D 55%, #E7532A 100%); color: #FFF; font: 800 19px/1 var(--text); letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 0 0 3px var(--navy), 0 7px 0 #8A2E14, 0 7px 0 3px var(--navy), 0 18px 34px rgba(0, 0, 0, .45);
  transition: transform .1s var(--bounce), box-shadow .1s; }
.gbig .ico3 { width: 36px; height: 36px; }
.gbig:hover { filter: brightness(1.05); }
.gbig:active { transform: translateY(6px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 0 0 3px var(--navy), 0 1px 0 #8A2E14, 0 1px 0 3px var(--navy), 0 8px 18px rgba(0, 0, 0, .45); }
.map__cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: flex-end; padding: 22px 12px calc(18px + env(safe-area-inset-bottom, 0px)); pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 16, 26, 0), rgba(2, 16, 26, .75) 60%); }
.map__cta .gbig { pointer-events: auto; }
.map__panel { display: none; }
/* tall: the chart column; room under the chart for the fixed button */
.exped--tall .map { padding-bottom: 110px; }
.exped--tall .map__in { padding: 0 60px 0 16px; }
/* the fixed button must not sit inside a transformed ancestor: this screen fades in without the rise */
#app > .exped { animation-name: fadein; }
.ribbon, .ribbon b { color: var(--navy); }
/* land: a phone on its side, the whole chart in the viewport, the button at the bottom centre */
.exped--land .map__head { padding: 6px 14px 2px; }
.exped--land .ribbon { font-size: 16px; padding: 7px 14px; }
.exped--land .map__in { max-width: none; padding: 0 60px 0 16px; }
.exped--land .node { width: 140px; transform: translateY(-56px); }
.exped--land .stops li .ico3 { width: 22px; height: 22px; }
.exped--land .node__coin { width: 112px; height: 112px; }
.exped--land .node__state .ico3 { width: 36px; height: 36px; }
.exped--land .node__name span { font-size: 11.5px; max-width: 140px; }
.exped--land .map__cta { padding: 8px 16px 10px; justify-content: center; }
.exped--land .gbig { min-height: 56px; min-width: 180px; font-size: 17px; }
.exped--land .map__bed { height: 50px; }
/* wide: the chart fills the width, the active dive's detail beside it */
.exped--wide .map { display: flex; align-items: stretch; gap: 0; }
.exped--wide .map__chart { flex: 1; min-width: 0; }
.exped--wide .map__in { max-width: none; padding: 0 70px 0 24px; }
.exped--wide .map__rail { right: auto; left: 10px; text-align: left; }
.exped--wide .map__rail span { right: auto; left: 0; padding-right: 0; padding-left: 12px; }
.exped--wide .map__rail span::after { right: auto; left: 0; }
.exped--wide .node { width: 208px; transform: translateY(-88px); }
.exped--wide .stops li .ico3 { width: 34px; height: 34px; }
.exped--wide .node__coin { width: 176px; height: 176px; }
.exped--wide .map__cta { display: none; }
.exped--wide .map__panel { display: grid; align-content: start; justify-items: center; gap: 14px; width: 340px; flex: none; padding: 26px 22px 30px; background: linear-gradient(180deg, rgba(2, 20, 30, .55), rgba(2, 20, 30, .85)); box-shadow: inset 1px 0 0 var(--hair); }
.map__panel-art { filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .45)); }
.map__panel-title { font: 700 22px/1.2 var(--text); letter-spacing: -.02em; color: var(--ink); text-align: center; text-wrap: balance; }
.exped--wide .map__panel .gbig { margin-top: 8px; }
@media (max-height: 700px) { .exped--wide .map__panel { padding-top: 16px; } .map__panel-art .scene { width: 150px; height: 150px; } }

/* v2 polish: the rail keeps clear of the nodes, waves at the surface, a soft pulse on the button, the panel's stops */
.exped--tall .map__in { padding: 0 66px 0 12px; }
.exped--tall .map__rail { width: 54px; right: 6px; }
.exped--wide .map__in { padding: 0 24px 0 76px; }
.map__surface { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 22px; fill: #8FD0D6; pointer-events: none; }
.gbig { animation: ctaglow 2.4s ease-in-out infinite; }
@keyframes ctaglow { 50% { filter: brightness(1.08) drop-shadow(0 0 14px rgba(255, 138, 98, .55)); } }
.stops--panel { max-width: 240px; gap: 3px; margin-top: 6px; }
.stops--panel li .ico3 { width: 36px; height: 36px; }
.map__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.map__head .back { justify-self: start; } .map__head .info { justify-self: end; }

/* Gate A polish (22 Oct 02:55): locked stops stay inviting; the rail keeps its ticks away from the nodes (views-team.js) */
.stops li.locked { opacity: .62; filter: saturate(.75) brightness(1); }
.stops li.next { opacity: .8; filter: saturate(.9); }

/* ---- the Field Guide as a collection game (22 Oct): the sea chart, the diorama, the showcase, the torn page ---- */
#app > .guide { animation-name: fadein; }
.guide { padding-bottom: 0; }
.guide__under { display: grid; gap: 22px; padding-top: 18px; padding-bottom: 120px; }
.guide--wide .guide__under { padding-bottom: 40px; }
/* the chart */
.chart { position: relative; width: 100%; }
.chart__sea { position: relative; width: 100%; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #0F4B66 0%, #072C40 45%, #03141F 100%); }
.chart__grid { position: absolute; inset: 0; pointer-events: none; opacity: .5; background: repeating-linear-gradient(0deg, rgba(111, 231, 225, .08) 0 1px, transparent 1px 64px), repeating-linear-gradient(90deg, rgba(111, 231, 225, .08) 0 1px, transparent 1px 64px); }
.chart__rose { position: absolute; right: 14px; bottom: 14px; opacity: .55; pointer-events: none; }
.chart__route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.chart__route path { fill: none; stroke: rgba(111, 231, 225, .55); stroke-width: 5; stroke-dasharray: 2 16; stroke-linecap: round; stroke-linejoin: round; animation: routeflow 2.6s linear infinite; }
.chart__fog { position: absolute; inset: 0; pointer-events: none; }
.rnode { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; width: 150px; }
.rnode__coin { position: relative; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #1D5A7A, #0A2434); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 6px var(--brass), 0 14px 28px rgba(0, 0, 0, .5); transition: transform .14s var(--bounce); }
.rnode__coin .art, .rnode__coin .still { width: 78%; } .rnode__coin .still { display: block; }
.rnode__coin .ring { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); color: var(--glow); }
.rnode__q { display: grid; place-items: center; opacity: .8; }
.rnode__state { position: absolute; right: 6px; top: -2px; line-height: 0; }
.rnode__state .ico3 { width: 36px; height: 36px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
.rnode__year { position: absolute; left: 50%; top: 100px; transform: translateX(-50%); }
.rnode__name { display: grid; justify-items: center; gap: 4px; margin-top: 10px; font: 700 14px/1.2 var(--text); color: var(--ink); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); text-align: center; }
.rnode:hover .rnode__coin { transform: translateY(-2px) scale(1.03); }
.rnode.is-fog .rnode__coin { background: radial-gradient(circle at 50% 50%, #35566A, #0A2434); box-shadow: inset 0 0 0 4px #5E6C72, inset 0 0 0 6px #35566A, 0 14px 28px rgba(0, 0, 0, .5); filter: saturate(.3); }
.rnode.is-fog::before { content: ""; position: absolute; inset: -40px -50px; border-radius: 50%; background: radial-gradient(circle, rgba(201, 220, 221, .22), rgba(201, 220, 221, 0) 70%); filter: blur(10px); pointer-events: none; animation: fogdrift 9s ease-in-out infinite alternate; }
@keyframes fogdrift { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
.rnode.is-fog .rnode__name { opacity: .7; }
.rnode.is-live .rnode__coin::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid var(--ox); opacity: 0; animation: nodeping 2s ease-out infinite; }
.rnode.is-done .rnode__coin { box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 6px var(--glow), 0 0 24px rgba(111, 231, 225, .45), 0 14px 28px rgba(0, 0, 0, .5); }
.chart__panel, .dio__panel, .show__panel, .torn__panel { display: none; }
.meta { display: flex; align-items: center; gap: 18px; }
.meta__total { position: relative; width: 92px; height: 92px; flex: none; display: grid; place-items: center; color: var(--glow); }
.meta__total .ring { position: absolute; inset: 0; }
.meta__total b { font: 800 22px/1 var(--text); color: var(--ink); }
.meta__total b i { font: 600 12px/1 var(--text); font-style: normal; color: var(--ink-2); }
.meta__tiers { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.meta__tier { position: relative; display: inline-block; line-height: 0; }
.meta__tier .badge { position: absolute; right: -14px; top: -6px; }
.closest { display: flex; align-items: center; gap: 10px; font: 600 14px/1.2 var(--text); color: var(--ink); }
.closest .ico3 { flex: none; }
.guide__under .closest { margin-top: -4px; }
.guide__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.guide__tiles .tile { justify-items: center; text-align: center; gap: 6px; padding: 14px 10px; }
.tile__t { font: 700 13.5px/1.2 var(--text); }
.tile--torn { background: linear-gradient(160deg, #FBF3E1, #EADFC6); color: var(--paper-ink); }
.tile--live { color: var(--ink); }
/* the scene: a region's creatures at their depths (v2) */
.dio { position: relative; width: 100%; }
.dio__sea { position: relative; width: 100%; overflow: hidden; touch-action: pan-y; background: linear-gradient(180deg, #2FA7B8 0%, #1D7C93 14%, #135F78 30%, #0A3B51 48%, #061D2B 64%, #02101A 86%, #0B1A14 100%); }
.dio__bands { position: absolute; inset: 0; pointer-events: none; }
.dio__band { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding-left: 10px; border-top: 1px dashed rgba(255, 255, 255, .16); }
.dio__band .badge { opacity: .85; }
.dio__bandico { width: 30px; height: 30px; line-height: 0; margin-top: 6px; opacity: .85; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.dio__bandico svg { width: 100%; height: 100%; fill: currentColor; }
.dio__band--sun { color: #FFE9A8; } .dio__band--dusk { color: #A8D8E6; } .dio__band--night { color: #C9B6F0; } .dio__band--bed { color: #C9A36A; }
.dio__bed { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72px; pointer-events: none; }
.dio__sweep { position: absolute; left: -20%; top: -20%; width: 140%; height: 140%; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0 82%, rgba(111, 231, 225, .12) 94%, rgba(111, 231, 225, .32) 100%); animation: sweepturn 11s linear infinite; }
@keyframes sweepturn { to { transform: rotate(360deg); } }
.dio__layer { position: absolute; inset: 0; transition: transform .35s ease-out; }
.cre { position: absolute; transform: translate(-50%, -50%); width: 150px; display: grid; justify-items: center; gap: 0; }
.cre--colour, .cre--shiny, .cre--sketch { animation: swim var(--sw, 8s) ease-in-out var(--dd, 0s) infinite alternate; }
.cre--colour .still__img, .cre--shiny .still__img { filter: contrast(1.14) saturate(1.12) brightness(1.04) drop-shadow(0 0 5px rgba(111, 231, 225, .45)) drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); }
@keyframes swim { from { transform: translate(-50%, -50%) translate(-9px, -3px) rotate(-1.5deg); } to { transform: translate(-50%, -50%) translate(9px, 3px) rotate(1.5deg); } }
.cre--hidden { animation: shadowdrift 7s ease-in-out var(--dd, 0s) infinite alternate; }
@keyframes shadowdrift { from { transform: translate(-50%, -50%) translateY(-7px); } to { transform: translate(-50%, -50%) translateY(7px); } }
.cre__body { position: relative; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 16px; }
.cre__body .still { display: block; width: 100%; }
.cre__body .still__img { filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45)); }
.cre--sketch .still__img { filter: grayscale(1) brightness(1.25) contrast(1.05) drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); opacity: .85; }
.cre--hidden .still__img { filter: brightness(.06) saturate(.3); opacity: .92; animation: shadowflash 6s ease-in-out var(--dd, 0s) infinite; }
@keyframes shadowflash { 0%, 14%, 100% { filter: brightness(.06) saturate(.3); } 7% { filter: brightness(.7) saturate(.6) drop-shadow(0 0 10px rgba(111, 231, 225, .95)); } }
.cre__eye { position: absolute; left: var(--ex); top: var(--ey); width: 7px; height: 7px; border-radius: 50%; background: #FFE9A8; box-shadow: 0 0 8px #FFE9A8, 0 0 18px rgba(255, 233, 168, .7); animation: blink 5s ease-in-out var(--dd, 0s) infinite; pointer-events: none; }
@keyframes blink { 0%, 86%, 100% { transform: scaleY(1); } 90% { transform: scaleY(.1); } }
.cre__lock { position: absolute; right: 4px; top: 0; line-height: 0; }
.cre__lock .ico3 { width: 30px; height: 30px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.cre__coral { position: absolute; inset: -4px -8px; pointer-events: none; }
.cre__coral svg { width: 100%; height: 100%; }
.cre.is-sealed .cre__body { box-shadow: inset 0 0 0 2px rgba(245, 140, 114, .35), 0 0 30px rgba(245, 140, 114, .35); overflow: hidden; }
.cre.is-sealed .cre__body::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%) no-repeat; background-size: 260% 100%; animation: sweep 3.2s ease-in-out infinite; }
.tier--rare .cre__body { filter: drop-shadow(0 0 10px rgba(111, 231, 225, .35)); } .tier--legendary .cre__body { filter: drop-shadow(0 0 12px rgba(255, 200, 80, .4)); }
.cre__plate { position: absolute; left: 50%; top: calc(100% - 2px); z-index: 2; opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .25s, transform .25s, visibility 0s .25s; pointer-events: none; padding: 4px 10px; border-radius: 999px; border: 2px solid transparent; font: 700 12px/1.2 var(--text); color: var(--ink); white-space: nowrap;
  background: linear-gradient(rgba(2, 20, 30, .92), rgba(2, 20, 30, .92)) padding-box, var(--frame, rgba(255, 255, 255, .2)) border-box; box-shadow: var(--fglow, none), 0 6px 14px rgba(0, 0, 0, .4); }
.cre:hover .cre__plate, .cre:focus-within .cre__plate { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s, transform .25s, visibility 0s; }
.cre__new { margin-top: -8px; transform: rotate(-4deg); box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
/* a hidden creature's hint: an icon coin under it, the words on a tap (or hover) */
.cre__hintbtn { width: 44px; height: 44px; margin-top: 0; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.cre__hintbtn .ico3 { width: 34px; height: 34px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); opacity: .9; transition: transform .15s var(--bounce); }
.cre__hintbtn:hover .ico3, .cre.is-open .cre__hintbtn .ico3 { transform: scale(1.12); opacity: 1; }
.cre .dio__hint { position: absolute; left: 50%; top: 100%; z-index: 3; transform: translate(-50%, 2px); padding: 6px 10px; border-radius: 10px; background: rgba(2, 20, 30, .94); color: var(--ink); white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; pointer-events: none; }
.cre.is-open .dio__hint, .cre__hintbtn:hover + .dio__hint { opacity: 1; visibility: visible; transition: opacity .2s, visibility 0s; }
/* the deep: marine snow from the midnight band down, a vent glowing on the seabed */
.dio__deep { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; overflow: hidden; }
.dio__deep i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: rgba(230, 238, 240, .8); box-shadow: 0 0 4px rgba(230, 238, 240, .5); animation: snowfall var(--t) linear var(--d) infinite; }
@keyframes snowfall { from { transform: translate(0, -20px); opacity: 0; } 12% { opacity: .9; } 88% { opacity: .9; } to { transform: translate(14px, 140px); opacity: 0; } }
.dio__vent { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; background: radial-gradient(ellipse at 68% 100%, rgba(255, 150, 70, .5), rgba(255, 120, 60, .18) 30%, transparent 62%), radial-gradient(ellipse at 22% 100%, rgba(255, 150, 70, .22), transparent 40%); }
.dio__vent i { position: absolute; left: 68%; bottom: 10px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, rgba(120, 130, 140, .55), rgba(120, 130, 140, 0) 70%); animation: ventsmoke 5s ease-out infinite; }
.dio__vent i:nth-child(2) { animation-delay: 1.7s; left: 66%; } .dio__vent i:nth-child(3) { animation-delay: 3.4s; left: 70%; }
@keyframes ventsmoke { from { transform: translate(-50%, 0) scale(.5); opacity: .9; } to { transform: translate(-30%, -150px) scale(2.6); opacity: 0; } }
.dio__bed .bed__ground { fill: #14281F; } .dio__bed .bed__rock { fill: #0C1C16; }
.cre.is-new .cre__body { animation: unlock 1.9s var(--bounce) both; }
@keyframes unlock { 0% { filter: brightness(0); transform: scale(.72); } 38% { filter: brightness(0); transform: scale(.9); } 58% { filter: brightness(2.4) drop-shadow(0 0 18px #FFE9A8); transform: scale(1.06); } 100% { filter: none; transform: scale(1); } }
.dio__hint { font: 600 11.5px/1.2 var(--text); color: var(--ink-2); text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); max-width: 150px; }
.dio__sonar { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(111, 231, 225, .9); box-shadow: 0 0 18px rgba(111, 231, 225, .7), inset 0 0 14px rgba(111, 231, 225, .35); transform: translate(-50%, -50%) scale(.2); opacity: 0; pointer-events: none; animation: sonarsweep 6s ease-out infinite; }
@keyframes sonarsweep { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 1; } 16% { transform: translate(-50%, -50%) scale(30); opacity: 0; } 100% { opacity: 0; } }
.dio__torch { --tx: 50%; --ty: 40%; position: absolute; inset: 0; pointer-events: none; background: rgba(1, 6, 10, .5); }
.dio__sea.is-lit .dio__torch { -webkit-mask-image: radial-gradient(circle at var(--tx) var(--ty), transparent 0, transparent 110px, #000 230px); mask-image: radial-gradient(circle at var(--tx) var(--ty), transparent 0, transparent 110px, #000 230px); }
.dio__sea.is-lit .dio__torch::after { content: ""; position: absolute; left: var(--tx); top: var(--ty); width: 440px; height: 440px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 233, 168, .3), rgba(255, 233, 168, .08) 45%, transparent 62%); }
.dio__ring { position: absolute; left: var(--tx); top: var(--ty); width: 230px; height: 230px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(255, 233, 168, .35); box-shadow: 0 0 24px rgba(255, 233, 168, .25); pointer-events: none; }
.seal { position: absolute; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 8px 8px; border-radius: 999px; background: var(--paper); color: var(--navy); font: 800 12px/1 var(--text); transform: rotate(-6deg); box-shadow: 0 4px 0 #B58A52, 0 10px 24px rgba(0, 0, 0, .4); }
/* the showcase */
.show { position: relative; width: 100%; display: grid; gap: 14px; padding: 0 0 120px; }
.show__stage { position: relative; width: 100%; max-width: 480px; margin: 0 auto; padding: 0 16px; }
.show__stage .m3d { box-shadow: inset 0 0 0 1px var(--hair-2), 0 0 0 4px var(--stagec, transparent), 0 24px 60px rgba(0, 0, 0, .4); }
.show__stage--rare { --stagec: rgba(8, 127, 150, .7); } .show__stage--legendary { --stagec: var(--stamp-no); } .show__stage--shiny { --stagec: var(--brass); } .show__stage--mythic { --stagec: #6E3B6E; }
.show__shadow { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #0A3B51, #01060A); box-shadow: inset 0 0 0 1px var(--hair-2), 0 24px 60px rgba(0, 0, 0, .4); }
.show__shadow .art { width: 70%; opacity: .6; }
.show__shadow .shadow__lock { right: 14px; top: 12px; }
.show__panel { display: grid; gap: 14px; justify-items: center; width: 100%; max-width: 480px; margin: 0 auto; padding: 0 16px; }
.show__panel .spec--big { width: 100%; }
/* the torn page */
.tornwrap { width: 100%; max-width: 480px; margin: 0 auto; padding: 8px 16px 120px; display: grid; gap: 14px; }
.torn--ink { position: relative; overflow: hidden; }
.torn--ink::before, .torn--ink::after { content: ""; position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(46, 36, 24, .35), rgba(46, 36, 24, 0) 70%); pointer-events: none; }
.torn--ink::before { width: 160px; height: 120px; right: -40px; top: -20px; } .torn--ink::after { width: 120px; height: 100px; left: -30px; bottom: 30px; }
.clues__blank i { display: block; height: 2px; margin: 12px 0; background: repeating-linear-gradient(90deg, var(--paper-mute) 0 6px, transparent 6px 12px); opacity: .5; }
.torn .irow { border-bottom-color: var(--paper-line); } .torn .irow__l { color: var(--paper-ink); }
/* tall / land / wide */
.guide--land .chart__sea, .guide--land .dio__sea { min-height: 300px; }
.guide--land .rnode { width: 110px; } .guide--land .rnode__coin { width: 84px; height: 84px; } .guide--land .rnode__year { top: 74px; } .guide--land .rnode__name { font-size: 12px; margin-top: 8px; }
.guide--land .dio__hint { font-size: 10.5px; } .guide--land .dio__band .badge { display: none; } .guide--land .dio__bandico { width: 24px; height: 24px; }
.guide--wide .cre { width: var(--cw, 150px); }
.guide--land .cre { grid-template-columns: auto auto; align-items: center; column-gap: 2px; width: calc(var(--cw, 112px) + 46px); }
.guide--land .cre__body { width: var(--cw, 112px); } .guide--land .cre__new { margin-top: 0; } .guide--land .cre__plate { left: calc(var(--cw, 112px) / 2); }
.guide--land .map__cta { padding: 8px 16px 10px; justify-content: center; }
.guide--wide .chart, .guide--wide .dio { display: flex; align-items: stretch; }
.guide--wide .chart__sea, .guide--wide .dio__sea { flex: 1; min-width: 0; }
.guide--wide .chart__panel, .guide--wide .dio__panel { display: grid; align-content: start; justify-items: center; gap: 16px; width: 340px; flex: none; padding: 26px 22px 30px; background: linear-gradient(180deg, rgba(2, 20, 30, .55), rgba(2, 20, 30, .85)); box-shadow: inset 1px 0 0 var(--hair); }
.guide--wide .chart__panel .meta { flex-direction: column; } .guide--wide .chart__panel .stats, .guide--wide .dio__panel .stats { width: 100%; } .guide--wide .dio__panel .irows { width: 100%; }
.guide--wide .map__cta, .guide--wide .meta--row, .guide--wide .guide__under .stats, .guide--wide .guide__under .irows { display: none; }
.guide--wide .guide__under { max-width: 900px; }
.guide--wide .show { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: 24px; padding: 10px 32px 40px; max-width: 1200px; margin: 0 auto; }
.guide--wide .show__stage { max-width: none; padding: 0; } .guide--wide .show__panel { max-width: none; padding: 0; }
.guide--wide .tornwrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; max-width: 980px; gap: 24px; align-items: start; padding-bottom: 40px; }
.guide--wide .torn__panel { display: grid; justify-items: center; padding-top: 20px; }

/* guide v2 polish */
.meta__tiers { gap: 10px 20px; }
@media (max-width: 480px) { .guide--tall .meta--row .meta__tiers { display: grid; grid-template-columns: repeat(3, 36px); gap: 14px 26px; } }   /* phones: the five tier coins as 3 + 2, not 4 + 1 */
.rnode.is-fog::before { opacity: 1.6; }
.map__head .ribbon { max-width: 60vw; } .map__head .ribbon b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .guide--show .map__head .back span, .guide--show .map__head .back span { display: none; } .guide--show .map__head .ribbon { max-width: 66vw; font-size: 17px; } }

.show__btn { display: none; }
.guide--wide .show__btn { display: block; } .guide--wide .show .map__cta { display: none; }
.form--locked .port--empty { display: grid; place-items: center; }
/* the chart's button sits bottom left (its right-hand nodes stay clear); the torn page uses the width on a desktop */
.guide--chart.guide--tall .map__cta { justify-content: flex-start; }
.guide--wide .tornwrap { max-width: min(1100px, 80vw); }

/* ---- Field Guide v2 (22 Oct): baked stills, rarity frames, the chart's land, fog and ship ---- */
.still { display: block; width: 100%; line-height: 0; }
.still__img { display: block; width: 100%; height: auto; }
.still--hidden .still__img { filter: brightness(.06) saturate(.3); opacity: .9; }
.still--sketch .still__img { filter: grayscale(1) contrast(1.1) brightness(1.08); opacity: .85; }
.spec .still--sketch .still__img { mix-blend-mode: multiply; }
.still--shiny { position: relative; }
.still--shiny .still__img { filter: drop-shadow(0 0 5px rgba(214, 176, 122, .9)) drop-shadow(0 4px 8px rgba(0, 0, 0, .3)); }
.still--shiny::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 18% 28%, #FFF 0 2px, transparent 3px), radial-gradient(circle at 78% 22%, #FFF 0 1.6px, transparent 2.6px), radial-gradient(circle at 64% 76%, #FFF 0 2px, transparent 3px), radial-gradient(circle at 30% 70%, #FFE9A8 0 1.4px, transparent 2.4px); animation: twinkle 2.4s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .35; transform: scale(.98); } to { opacity: 1; transform: scale(1.02); } }
.still--svg .art { width: 100%; }
.spec__art .still { padding: 2px 0; }
/* rarity frames: bronze · teal foil · gold holo · sparkle · red ink; the same on cards, stages and name plates */
.frame--common { --frame: linear-gradient(135deg, #7A4A20, #C98C4A 35%, #8C5A2B 55%, #E0B07A 80%, #7A4A20); --fglow: 0 0 14px rgba(201, 140, 74, .3); }
.frame--rare { --frame: linear-gradient(135deg, #0B6E82, #6FE7E1 30%, #0B6E82 55%, #B8F3EF 80%, #0B6E82); --fglow: 0 0 18px rgba(111, 231, 225, .45); }
.frame--legendary { --frame: linear-gradient(135deg, #B8860B, #FFE08A 25%, #F0B13A 45%, #FFF3C4 60%, #E6A23C 80%, #B8860B); --fglow: 0 0 22px rgba(255, 200, 80, .5); }
.frame--shiny { --frame: linear-gradient(135deg, #B58A52, #FFF3C4 30%, #D6B07A 50%, #FFFFFF 65%, #B58A52); --fglow: 0 0 24px rgba(214, 176, 122, .6); }
.frame--mythic { --frame: linear-gradient(135deg, #2B0F0C, #B83A28 40%, #5A1F18 60%, #F58C72 85%, #2B0F0C); --fglow: 0 0 26px rgba(184, 58, 40, .55); }
.frame--hidden, .frame--sketch { --frame: linear-gradient(#B8A58A, #B8A58A); --fglow: none; }
.spec[class*="frame--"] { border: 4px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--frame) border-box; box-shadow: var(--fglow), 0 16px 34px rgba(0, 0, 0, .28); }
.spec--shiny[class*="frame--"] { background: linear-gradient(160deg, #FFF8E8 0%, var(--paper) 60%, #F5E6C4 100%) padding-box, var(--frame) border-box; }
.spec--hidden.frame--hidden { background: linear-gradient(#EFE5CF, #EFE5CF) padding-box, var(--frame) border-box; }
.spec.frame--legendary::after, .spec.frame--mythic::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; pointer-events: none; mix-blend-mode: overlay; opacity: .55;
  background: conic-gradient(from 0deg, rgba(255, 60, 90, .6), rgba(255, 210, 60, .6), rgba(60, 255, 190, .6), rgba(90, 140, 255, .6), rgba(255, 60, 90, .6)); animation: holo 7s linear infinite; }
.spec.frame--mythic::after { background: conic-gradient(from 0deg, rgba(255, 90, 60, .5), rgba(60, 10, 20, .6), rgba(255, 140, 110, .5), rgba(60, 10, 20, .6), rgba(255, 90, 60, .5)); }
@keyframes holo { to { filter: hue-rotate(360deg); } }
.show__stage[class*="frame--"] .m3d, .show__stage[class*="frame--"] .show__shadow { border: 5px solid transparent; background: linear-gradient(180deg, #061D2B, #01060A) padding-box, var(--frame) border-box; box-shadow: var(--fglow), 0 24px 60px rgba(0, 0, 0, .4); }
.show__stage--sketch.frame--sketch .show__shadow { background: linear-gradient(180deg, #FBF3E1, #EADFC6) padding-box, var(--frame) border-box; }
.show__shadow--sketch .still__img { mix-blend-mode: multiply; opacity: .9; }
.show__shadow .still { width: 72%; }
.show__shadow--hidden .still__img { opacity: .75; }
/* the chart: land, fog, the ship, the route */
.chart__land { position: absolute; width: 230px; height: 150px; transform: translate(-50%, -50%); pointer-events: none; fill: #041C2A; stroke: rgba(201, 163, 106, .5); stroke-width: 1.5; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35)); opacity: .85; }
.chart__land path, .chart__land ellipse { stroke-linejoin: round; }
.rnode { z-index: 2; } .chart__fog { z-index: 1; }
.rnode__coin { overflow: hidden; }
.rnode__coin .fog { position: absolute; inset: 0; pointer-events: none; }
.rnode__coin .fog i { position: absolute; width: 90px; height: 54px; border-radius: 50%; background: rgba(201, 220, 221, .5); filter: blur(10px); }
.rnode__coin .fog i:nth-child(1) { left: -20px; top: 20px; animation: fogdrift 9s ease-in-out infinite alternate; }
.rnode__coin .fog i:nth-child(2) { left: 30px; top: 50px; width: 110px; animation: fogdrift 13s ease-in-out -4s infinite alternate-reverse; }
.rnode__coin .fog i:nth-child(3) { left: 10px; top: -10px; animation: fogdrift 11s ease-in-out -7s infinite alternate; }
.rnode.is-fog .rnode__q { opacity: .55; }
.rnode.is-fog .rnode__q .still, .rnode.is-fog .rnode__q .art { width: 100%; }
.chart__ship { position: absolute; z-index: 3; transform: translate(-50%, -50%); line-height: 0; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); animation: shipbob 3s ease-in-out infinite alternate; }
@keyframes shipbob { from { transform: translate(-50%, -50%) rotate(-3deg) translateY(-2px); } to { transform: translate(-50%, -50%) rotate(3deg) translateY(2px); } }
.chart__route path.route--done { stroke: rgba(111, 231, 225, .95); stroke-width: 5; stroke-dasharray: none; animation: none; filter: drop-shadow(0 0 6px rgba(111, 231, 225, .8)); }
.chart__route path.route--todo { stroke-dasharray: 2 16; }
.guide--land .chart__land { width: 170px; height: 110px; }

/* ---- the ship hub v2 (22 Oct): the cartoon vessel fills the screen; hotspots on its parts, rooms in the cutaway ---- */
#app > .deck { animation-name: fadein; }
.deck { padding-bottom: 0; }
.hub { background: #0E0E30; }
.hub svg.ship { width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.hub svg.ship:active { cursor: grabbing; }
.ship__dots { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(1, 6, 10, .45); }
.ship__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 245, 223, .35); cursor: pointer; }
.ship__dots i.is-on { background: var(--paper); box-shadow: 0 0 8px var(--glow); }
.hot { transition: opacity .4s; }
.hot .badge { position: absolute; right: -10px; top: -4px; }
.hot__lock { position: absolute; right: -10px; top: -6px; line-height: 0; }
.hot__lock .ico3 { width: 22px; height: 22px; }
.room { position: absolute; pointer-events: auto; display: flex; align-items: flex-end; justify-content: center; border-radius: 12px; opacity: 0; transition: opacity .4s, box-shadow .15s; box-shadow: inset 0 0 0 2px rgba(111, 231, 225, 0); }
.room.is-placed { opacity: 1; }
.room:hover, .room:focus-visible { box-shadow: inset 0 0 0 3px var(--glow), 0 0 18px rgba(111, 231, 225, .45); }
.room__tag { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: 999px; background: rgba(1, 6, 10, .62); font: 600 10.5px/1 var(--text); color: var(--ink); white-space: nowrap; transform: translateY(42%); }
.room__tag .ico3 { width: 28px; height: 28px; }
.room--up .room__tag { transform: translateY(-42%); }   /* a tag moved to the room's top edge (off a crew figure) hangs above it */
.room__tag .badge { margin-left: 2px; } .room__tag .hot__lock { position: static; }
.hub__head { padding-top: 10px; padding-bottom: 6px; }
.toggle { display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 3px 4px; border-radius: 999px; background: rgba(1, 6, 10, .45); box-shadow: inset 0 0 0 1px var(--hair); justify-self: center; }
.toggle { padding: 0; gap: 0; height: auto; }   /* 22 Oct: two labelled segments, the active one on paper */
.toggle__b { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 2px 12px 2px 5px; border-radius: 999px; color: var(--ink-2); font: 600 11.5px/1 var(--text); }
.toggle__b .ico3 { width: 30px; height: 30px; opacity: .55; transition: opacity .2s; }
.toggle__b[aria-pressed="true"] { background: var(--paper); color: var(--navy); box-shadow: 0 2px 0 #B58A52, 0 6px 14px rgba(0, 0, 0, .3); }
.toggle__b[aria-pressed="true"] .ico3 { opacity: 1; }
.hub__log { position: relative; justify-self: end; }
.hub__log .badge { position: absolute; right: -4px; top: -2px; }
.log { display: grid; gap: 12px; }
.log .comms > p { color: var(--paper-ink); }
.log__row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--paper-line); }
.log__row b { display: block; font: 600 15px/1.3 var(--text); } .log__row .small { color: var(--paper-mute); }
.deck__foot { margin-top: 10px; padding: 14px 16px calc(120px + env(safe-area-inset-bottom, 0px)); border-top: 0; }
.deck--wide .deck__foot { padding-bottom: 40px; }
.deck--land .deck__foot { padding-bottom: 96px; }
.deck--land .map__cta { justify-content: flex-end; }
.room--narrow .room__tag > span { display: none; }   /* a narrow room keeps its icon and badge; the name is in its label */
.room--tiny .room__tag .badge, .room--tiny .room__tag .hot__lock { display: none; } .room--tiny .room__tag { padding-right: 3px; }
.deck .map__cta { justify-content: flex-end; }
.deck--land .map__cta { justify-content: flex-end; padding: 8px 16px 10px; }   /* a phone on its side: bottom right, over the sea, never over the rooms */

/* the learner's finds swim under the hull as live 3D canvases (a slow pass to the left, in and out of the dark); the tentacle rises off the stern; the companion sleeps in the cabin */
.hub__live { position: absolute; inset: 0; pointer-events: none; }
.hub__live canvas { position: absolute; display: block; pointer-events: none; }
.hub__fish { animation: hubswim var(--t, 12s) ease-in-out var(--d, 0s) infinite; }
@keyframes hubswim { 0% { transform: translateX(22px); opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translateX(-30px); opacity: 0; } }
/* the flat tentacles are moved by Ship.animate (ship.js): a spine that unfurls, holds, leans and sinks, with its splash and foam collar */
/* the palm island's crown sways a little in the breeze */
.isle__crown { animation: palm 4.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 70%; }
@keyframes palm { from { transform: translate(36px, -116px) rotate(-3deg); } to { transform: translate(36px, -116px) rotate(3deg); } }
.ship__mate { animation: matebob 3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes matebob { from { transform: translateY(0); } to { transform: translateY(-2px); } }

/* while the bubbles own the screen nothing else on the page moves (one layer to composite per frame) */
.is-wiping #app *, .is-wiping #app *::before, .is-wiping #app *::after { animation-play-state: paused !important; }
.wipelayer { will-change: transform; }

/* ---- the ship deck and a friend's deck as game screens (22 Oct, Gate A rolled out) ---- */
#app > .crew { animation-name: fadein; }   /* no transform on the screen (the enter slide would pin the fixed big button to it), like the guide and the deck */
.crew .crewdeck, .crew .visit { width: 100%; max-width: 560px; margin: 0 auto; padding: 8px 16px 130px; display: grid; gap: 18px; }
.crew .sec { display: grid; gap: 12px; }
.crew__reef .reef { grid-template-columns: repeat(10, 1fr); gap: 7px; }
.crew__reef .reef i { height: 34px; border-radius: 8px 8px 3px 3px; }
.crew .bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; }
.crew .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--coral), #FFB38A); box-shadow: 0 0 12px rgba(245, 140, 114, .5); }
.crew .plank { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 18px; background: rgba(2, 20, 30, .45); box-shadow: inset 0 0 0 1px var(--hair); }
.crew .plank .cloud { width: 132px; }
.plank__b { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.plank__b .row { gap: 8px; flex-wrap: wrap; }
.crew .mates { grid-template-columns: repeat(4, 1fr); gap: 16px 6px; padding-top: 4px; }
.crew .mate { position: relative; gap: 4px; padding: 4px 0 2px; border-radius: 16px; font: 500 11px/1.3 var(--text); letter-spacing: 0; text-transform: none; min-height: 44px; }
.crew .mate b { font: 700 12.5px/1.2 var(--text); color: var(--ink); }
.mate__b { position: absolute; right: 2px; top: -2px; line-height: 0; }
.mate__b .ico3 { width: 22px; height: 22px; opacity: .8; }
.crew .mate--locked .port { filter: saturate(.3) brightness(.7); }
.crew .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.crew .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px 6px 8px; border-radius: 999px; background: rgba(1, 6, 10, .45); color: var(--ink); font: 600 13px/1 var(--text); box-shadow: inset 0 0 0 1px var(--hair); }
.crew .chip[aria-pressed="true"] { background: var(--paper); color: var(--navy); box-shadow: 0 3px 0 #B58A52, 0 8px 18px rgba(0, 0, 0, .3); }
.crew .chip .ico3 { width: 24px; height: 24px; }
.crew .gcards { display: grid; gap: 10px; }
.crew .gcard { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; border: 0; background: rgba(2, 20, 30, .45); box-shadow: inset 0 0 0 1px var(--hair); }
.crew .gcard + .gcard { border-top: 0; }
.crew .gcard > .ico3 { flex: none; width: 44px; height: 44px; }
.crew .gcard b { font: 700 15px/1.2 var(--text); letter-spacing: 0; }
.crew .gcard .tags { margin-top: 6px; }
.crew .gcard--rec { box-shadow: inset 0 0 0 2px var(--glow); }
.crew .gcard .pill { flex: none; }
.crew .sticker { gap: 10px; padding: 10px 14px; min-height: 48px; }
.crew .sticker .ico3 { flex: none; width: 28px; height: 28px; }
.visit__stage { display: grid; justify-items: center; gap: 12px; padding: 6px 0 2px; }
.port--lg { width: 148px; height: 148px; }
.port--lg img, .port--lg .still { width: 86%; }
.visit__stage .stats { width: 100%; }
.crew .wall { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 4px 0 8px; }
.crew .wall b { display: block; font: 700 15px/1.2 var(--text); color: var(--ink); margin-bottom: 4px; }
.crew .wall p { font-size: 14px; line-height: 1.4; color: var(--ink-2); margin-bottom: 6px; }
.crew .wall__photo { border-radius: 12px; background: rgba(1, 6, 10, .45); color: var(--ink-2); }
.crew .cloze { font: 500 17px/1.6 var(--text); color: var(--ink); }
.crew .comms p { font-size: 15px; }
/* a phone on its side: two columns; wide: two columns across the screen */
.crew--land .crewdeck, .crew--wide .crewdeck { max-width: 1200px; grid-template-columns: 1fr 1fr; align-items: start; gap: 16px 24px; padding-bottom: 110px; }
.crew--land .crewdeck { max-width: none; padding: 8px 16px 100px; }
.crew--wide .crewdeck { padding: 16px 32px 110px; }
.crew--wide .crew__mates { grid-column: 1 / -1; }
.crew--wide .mates, .crew--land .mates { grid-template-columns: repeat(8, 1fr); }
.crew--land .visit, .crew--wide .visit { max-width: 1100px; grid-template-columns: 340px minmax(0, 1fr); align-items: start; gap: 16px 28px; padding-bottom: 110px; }
.crew--wide .visit { padding: 16px 32px 110px; }
.crew--land .visit .visit__stage, .crew--wide .visit .visit__stage { grid-row: 1 / span 4; }
.crew--land .map__cta { padding: 8px 16px 10px; justify-content: flex-end; }

/* ---- group 2 as game screens (22 Oct): the cabin, friends and the crew board, on the ship-deck shell (.crew) ---- */
.crew .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 0; }
.cab .sec, .frs .sec, .lvl .sec { margin-top: 6px; }
.pill--round { min-width: 48px; min-height: 48px; padding: 0; justify-content: center; border-radius: 50%; gap: 0; }
.pill--round::after { display: none; }
.pill--round .ico3 { width: 30px; height: 30px; }
/* the cabin: your companion, the trophy shelves, the action tickets, the dive medallions */
.cab__me { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px;  border-radius: 24px; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 201, 138, .22), rgba(2, 20, 30, .5) 70%); box-shadow: inset 0 0 0 1px var(--hair); }
.cab__port { position: relative; }
.cab__port::after { content: ""; position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 233, 168, .35), transparent); z-index: -1; }
.cab__me .stats { width: 100%; gap: 6px; }
.cab__me .stat { padding: 10px 2px 8px; }
.cab__me .port--lg { width: 112px; height: 112px; }
.cab__shelf .shelf__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 6px 6px 14px; margin: 0; border-bottom: 10px solid #B58A52; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, rgba(114, 80, 68, .35), rgba(114, 80, 68, .6)); box-shadow: inset 0 0 0 1px rgba(214, 176, 122, .25), 0 6px 0 #6E4E2C; }
/* a shelf card is a little display case: the creature fills a square window (~70 % of the card) on a dark sea tinted by
   its rarity, in the Field Guide's rarity frame (rare teal, legendary coral-gold, shiny brass, mythic red) */
.cab__shelf .spec { padding: 3px; border-radius: 12px; }
.cab__shelf .spec::before { display: none; }
.cab__shelf .spec__name { display: none; }
.cab__shelf .spec[class*="frame--"] { background: radial-gradient(75% 70% at 50% 46%, var(--tint), #0B2B3C 78%) padding-box, var(--frame) border-box; }
.cab__shelf .frame--common { --tint: rgba(233, 189, 142, .5); } .cab__shelf .frame--rare { --tint: rgba(111, 231, 225, .55); }
.cab__shelf .frame--legendary { --tint: rgba(245, 140, 114, .62); } .cab__shelf .frame--shiny { --tint: rgba(255, 224, 150, .62); } .cab__shelf .frame--mythic { --tint: rgba(184, 58, 40, .7); }
.cab__shelf .spec__art { position: relative; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; border-radius: 9px; }
.cab__shelf .spec__art .still, .cab__shelf .spec__art > .art { position: absolute; inset: 0; padding: 0; }
.cab__shelf .still__img { position: absolute; max-width: none; width: 124%; left: -19%; top: 2%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.cab__shelf .spec--fx .spec__art::after { display: none; }
.shelf__more, .shelf__slot { display: grid; place-items: center; align-content: center; gap: 4px; min-height: 64px; aspect-ratio: 1 / 1; border-radius: 10px; background: rgba(1, 6, 10, .35); box-shadow: inset 0 0 0 2px rgba(214, 176, 122, .3); }
.shelf__slot { opacity: .55; border: 2px dashed rgba(214, 176, 122, .35); box-shadow: none; }
.tickets { display: grid; gap: 10px; }
.ticket { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--paper); color: var(--paper-ink); box-shadow: 0 4px 0 #B58A52, 0 10px 22px rgba(0, 0, 0, .3); position: relative; }
.ticket::before { content: ""; position: absolute; left: 62px; top: 8px; bottom: 8px; border-left: 2px dashed rgba(139, 106, 59, .35); }
.ticket > .ico3 { grid-row: 1 / span 2; width: 44px; height: 44px; margin-right: 8px; }
.ticket b { font: 800 16px/1.15 var(--text); color: var(--navy); }
.ticket__b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ticket .tag { background: rgba(18, 59, 82, .08); box-shadow: inset 0 0 0 1px rgba(18, 59, 82, .18); color: var(--navy); }
.ticket--verified .tag, .ticket--commended .tag { background: #DDF3E6; }
.ticket--returned .tag { background: #FFE2D8; }
.medals { display: flex; flex-wrap: wrap; gap: 14px; }
.medal { position: relative; display: grid; justify-items: center; gap: 6px; }
.medal .scene { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.medal__depth { position: absolute; top: 70px; }
.medal__dots { display: flex; gap: 5px; padding-top: 8px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: #3A5564; box-shadow: 0 0 0 2px rgba(0, 0, 0, .25); }
.dot--had { background: var(--ok); } .dot--partly { background: var(--mid); } .dot--missed { background: var(--no); }
/* friends: the ID on a brass tag, the sonar finder, the crew */
.oxid--tag { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; }
.oxid--tag b { flex: 1; font: 500 clamp(18px, 5.4vw, 24px)/1.1 var(--mono); letter-spacing: .08em; color: var(--navy); overflow-wrap: anywhere; }
.oxid--tag .pill--ghost { --fg: var(--navy); box-shadow: inset 0 0 0 2px rgba(18, 59, 82, .25); }
.finder { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 999px; background: rgba(1, 6, 10, .45); box-shadow: inset 0 0 0 2px var(--hair-2); }
.finder .field { border: 0; padding: 8px 0; font: 500 18px/1.2 var(--mono); letter-spacing: .06em; }
.finder:focus-within { box-shadow: inset 0 0 0 2px var(--glow); }
.found { animation: pop .45s var(--bounce) both; }
.found > .ico3 { flex: none; width: 44px; height: 44px; }
.found--hit { box-shadow: inset 0 0 0 2px var(--glow); }
.crew .gcard .port { flex: none; }
.mate--wait .port { filter: saturate(.5); }
.frs .mates .port--empty { width: 56px; height: 56px; }
/* the crew board: the depth gauge, the podium */
.gauge { display: grid; border-radius: 22px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair), 0 12px 30px rgba(0, 0, 0, .3); }
.gauge__band { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 8px 14px; overflow: hidden; }
.gauge__band--0 { background: linear-gradient(180deg, #8FD0D6, #4FB0C2); min-height: 48px; }
.gauge__band--1 { background: linear-gradient(180deg, #3A9FB4, #1D7C93); }
.gauge__band--2 { background: linear-gradient(180deg, #17647C, #0E4A62); }
.gauge__band--3 { background: linear-gradient(180deg, #0A3B51, #06283A); }
.gauge__band--4 { background: linear-gradient(180deg, #061D2B, #01060A); }
.gauge__band.is-now { min-height: 112px; box-shadow: inset 0 0 0 3px var(--glow), inset 0 0 30px rgba(111, 231, 225, .35); }
.gauge__band.is-locked .gauge__art { opacity: .12; }
.gauge__art { position: absolute; left: 66%; top: 50%; width: 84px; transform: translate(-50%, -50%); opacity: .3; pointer-events: none; animation: swimby 9s ease-in-out infinite alternate; }
.gauge__art .art { width: 100%; height: auto; } .gauge__art .art * { fill: #01060A !important; stroke: none !important; }
.gauge__band--3 .gauge__art .art *, .gauge__band--4 .gauge__art .art * { fill: #6FE7E1 !important; }
.gauge__sun { position: absolute; right: 22%; top: -30px; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(closest-side, #FFF5DF, rgba(255, 245, 223, 0)); opacity: .8; }
.gauge__me { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gauge__me .port { animation: bob 3.6s ease-in-out infinite; }
.gauge__state .ico3 { width: 34px; height: 34px; }
.is-locked .gauge__state { opacity: .7; }
.gauge__tick { position: absolute; right: 10px; bottom: 6px; }
.lvl__stats .stats { width: 100%; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 8px; padding-top: 8px; }
.pod { display: grid; justify-items: center; gap: 8px; }
.pod__top { position: relative; line-height: 0; }
.pod__top .ico3 { width: 40px; height: 40px; }
.pod__top .badge { position: absolute; left: 30px; top: -10px; }
.pod__block { display: grid; justify-items: center; align-content: start; gap: 4px; width: 100%; padding: 10px 4px; border-radius: 14px 14px 4px 4px; background: linear-gradient(180deg, var(--paper), #EAD8B4); color: var(--navy); box-shadow: 0 5px 0 #B58A52; text-align: center; }
.pod__block b { font: 800 14px/1.15 var(--text); }
.pod__block i { font: 800 26px/1 var(--text); font-style: normal; color: #B58A52; }
.pod--1 .pod__block { min-height: 118px; } .pod--2 .pod__block { min-height: 90px; } .pod--3 .pod__block { min-height: 70px; }
.pod--me .pod__block { box-shadow: 0 5px 0 #B58A52, 0 0 0 3px var(--glow), 0 0 24px rgba(111, 231, 225, .45); }
/* a phone on its side and wide screens: two columns */
.crew--land .cab { grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); }
.crew--wide .cab { grid-template-columns: minmax(300px, .85fr) minmax(0, 1.35fr); }
/* wide: the companion stands over its stats, the shelf grows to full rows, so both columns run to about the same depth */
.crew--wide .cab__me { grid-template-columns: 1fr; justify-items: center; padding: 20px 16px 16px; }
.crew--wide .cab__me .port--lg { width: 150px; height: 150px; }
.crew--wide .shelf__more, .crew--wide .shelf__slot { aspect-ratio: 1 / 1; min-height: 0; }
.crew--land .cab__me, .crew--wide .cab__me { grid-column: 1; grid-row: 1; }
.crew--land .cab__acts, .crew--wide .cab__acts { grid-column: 1; grid-row: 2; }
.crew--land .cab__log, .crew--wide .cab__log { grid-column: 1; grid-row: 3; }
.crew--land .cab__shelf, .crew--wide .cab__shelf { grid-column: 2; grid-row: 1 / span 3; }
.crew--wide .cab__shelf .shelf__row, .crew--land .cab__shelf .shelf__row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.crew--land .frs, .crew--wide .frs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.crew--land .frs__crew, .crew--wide .frs__crew { grid-column: 2; grid-row: 1 / span 4; }
.crew--wide .frs .mates, .crew--land .frs .mates { grid-template-columns: repeat(4, 1fr); }
.crew--land .lvl, .crew--wide .lvl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.crew--land .lvl__gauge, .crew--wide .lvl__gauge { grid-row: 1 / span 3; }
.crew--land .cab__me .port--lg { width: 88px; height: 88px; }
.crew--wide .frs .mate .port { width: 80px; height: 80px; }
/* a badge with a tiny coin: the number says what it counts (plankton on a porthole, verified actions on the podium) */
.badge--ico { gap: 3px; padding: 0 7px 0 2px; grid-auto-flow: column; }
.badge--ico .ico3 { width: 16px; height: 16px; }
.badge--lg.badge--ico .ico3 { width: 20px; height: 20px; }

/* ---- the dive as a game screen (22 Oct, group 3): a ship button back to the deck, the (i) in the HUD, the big game
   button bottom right, a tap selects and the button confirms; wide screens and a phone on its side put the art beside the words ---- */
.hud__btn { border: 0; background: rgba(1, 6, 10, .38); box-shadow: inset 0 0 0 1px var(--hair-2); }
.hud__btn .ico3 { width: 30px; height: 30px; }
.hud .info { flex: none; margin-left: 8px; }
.run__col { padding-bottom: 130px; }
.run__art { display: grid; justify-items: center; min-width: 0; }
.run__body { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.run__scene { display: grid; justify-items: center; }
.run__scene .scene { width: min(340px, 100%); height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
.run__scene .badge { margin-top: -16px; position: relative; }
.clues--ico li { grid-template-columns: 34px minmax(0, 1fr); align-items: center; }
.clues--ico li::before { content: none; }
.clues--ico .ico3 { width: 34px; height: 34px; }
.opt { gap: 12px; text-align: left; }
.opt .ico3 { width: 30px; height: 30px; flex: none; }
.opt[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--glow), 0 0 20px rgba(111, 231, 225, .25); background: rgba(111, 231, 225, .14); }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.step3 { position: relative; display: grid; justify-items: center; gap: 8px; padding: 18px 6px 14px; border-radius: 18px; background: var(--shade); box-shadow: inset 0 0 0 1px var(--hair); text-align: center; }
.step3 .ico3 { width: 48px; height: 48px; }
.step3 .badge { position: absolute; top: 8px; right: 10px; }
.step3 b { font: 600 14px/1.2 var(--text); color: var(--ink); }
.buddy { display: flex; align-items: center; gap: 10px; }
.buddy .ico3 { width: 34px; height: 34px; flex: none; }
.sheet__cta { display: flex; justify-content: flex-end; }
.is-nudge { animation: nudge .5s ease both; }
@keyframes nudge { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.run--wide .hud, .run--wide .track { max-width: 1240px; }
.run--land .hud, .run--land .track { max-width: none; }
.run--land .hud { padding: 6px 16px 4px; }
.run--wide .run__col, .run--land .run__col { max-width: 1240px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 24px 56px; padding: 22px 32px 130px; }
.run--land .run__col { max-width: none; gap: 12px 28px; padding: 8px 24px 96px; align-items: start; }
.run--wide .run__art .scan, .run--wide .souvenir { width: 100%; max-width: 560px; }
.run--land .run__art .scan img, .run--land .souvenir img { max-height: calc(100vh - 150px); width: auto; max-width: 100%; }
.run--land .run__scene .scene { width: min(220px, 100%); }
.run--land .comms--hero { gap: 12px; } .run--land .comms--hero > p { font-size: 20px; } .run--land .comms--hero .port--lg { width: 110px; height: 110px; }
.run--land .run__body { gap: 14px; }
.run--land .map__cta { padding: 8px 16px 10px; }
.acts .act { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px 12px 12px; }
.acts .act > .ico3 { width: 40px; height: 40px; }
.acts .act__unit { grid-column: 3; grid-row: 1; font: 600 12px/1.25 var(--text); letter-spacing: 0; text-transform: none; text-align: right; }
.run--wide .acts, .run--land .acts { grid-template-columns: 1fr; }
.run--wide .run__body .h-q, .run--wide .run__body .h-display { font-size: clamp(34px, 3.3vw, 50px); }
.run--wide .run__body .t-body { font-size: 19px; }
.run--wide .comms--hero .port--lg { width: 200px; height: 200px; }
.run--wide .comms--hero > p { font-size: 30px; }
.run--wide .divecard, .run--land .divecard { border-top: 0; padding-top: 0; }
.run--wide .run__scene .scene { width: min(380px, 100%); }
.tracker span { font: 600 12.5px/1.2 var(--text); letter-spacing: 0; text-transform: none; }
/* the dive's choices are chunky paper game tiles (22 Oct, round 3): a picture or a lettered coin, the words, a pop when picked */
.opts--tiles { gap: 12px; }
.run .opt--tile { gap: 14px; min-height: 68px; padding: 8px 16px 8px 8px; border-radius: 18px; background: var(--paper); color: var(--navy); font: 700 16.5px/1.25 var(--text); box-shadow: 0 5px 0 #B58A52, 0 12px 24px rgba(0, 0, 0, .28); transition: transform .12s var(--bounce), box-shadow .15s, background .15s; }
.run .opt--tile:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 7px 0 #B58A52, 0 16px 28px rgba(0, 0, 0, .32); }
.run .opt--tile:active:not([disabled]) { transform: translateY(4px); box-shadow: 0 1px 0 #B58A52, 0 6px 14px rgba(0, 0, 0, .3); }
.run .opt--tile[disabled]:not(.opt--right):not(.opt--wrong) { opacity: .62; }
.run .opt--tile[aria-pressed="true"] { background: #E3FAF7; box-shadow: 0 0 0 3px var(--glow), 0 5px 0 #0B6E82, 0 0 26px rgba(111, 231, 225, .5); animation: tilepop .38s var(--bounce); }
.run .opt--right { background: #DDF3E6; box-shadow: 0 0 0 3px var(--ok), 0 5px 0 #2E7D57; }
.run .opt--wrong { background: #FFE6DD; box-shadow: 0 0 0 3px var(--no), 0 5px 0 #B83A28; }
@keyframes tilepop { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
.opt__t { flex: 1; min-width: 0; }
.opt__pic { flex: none; width: 52px; height: 52px; }
.opt__coin { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, #2A8EA3, #123B52); color: #FFF5DF; font: 800 18px/1 var(--text); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 0 0 3px #D6B07A; }
.run .opt--tile > .ico3 { width: 30px; height: 30px; flex: none; }
/* the dive's illustration fills the space: under the words on a phone, the whole art half on a wide screen */
.run--tall .run__col { min-height: calc(100vh - 80px); }
.run__floor { margin-top: auto; padding-top: 8px; }
.run__pic { position: relative; width: 100%; }
.run__pic .scan { width: 100%; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.run__pic .tags { position: absolute; left: 12px; bottom: 12px; }
.run--wide .run__art { align-self: stretch; align-content: center; }
.run--wide .run__art > *, .run--wide .run__art .scan { width: 100%; max-width: none; }
.disc { position: relative; width: 100%; }
.disc .scan { width: 100%; }
.disc__souv { position: absolute; right: -6px; top: -14px; width: 34%; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .4)); animation: bob 3.6s ease-in-out infinite; }
.run--land .run__pic .scan img, .run--land .disc .scan img { max-height: calc(100vh - 150px); width: auto; max-width: 100%; }
/* on a phone the dive's picture is the seabed under the words: edge to edge, fading in from the sea */
.run__floor { margin: auto calc(-1 * var(--gutter)) 0; }
.run__floor .scan { border-radius: 0; box-shadow: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%); mask-image: linear-gradient(180deg, transparent, #000 28%); }
.run__floor .scan__frame { display: none; }
.run__floor .run__pic .tags { left: var(--gutter); }
.run--tall .run__floor { margin-bottom: -60px; }
.run__floor .scan { -webkit-mask-image: linear-gradient(180deg, transparent, #000 26%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 26%, #000 78%, transparent); }
.run__floor .run__pic .tags { top: 32%; bottom: auto; }
.run--tall .run__floor { flex: 1 0 300px; display: flex; }
.run--tall .run__floor .run__pic, .run--tall .run__floor .scan { flex: 1; display: flex; }
.run--tall .run__floor .scan img { width: 100%; height: 100%; object-fit: cover; object-position: 28% 80%; }
.run__floor .run__pic .tags { top: 30%; left: auto; right: var(--gutter); }
.run__duo { position: relative; width: 100%; }
.run__duo-hero { position: absolute; left: 50%; bottom: -8%; transform: translateX(-50%); width: 86%; }
.run__duo-hero .comms--hero { gap: 12px; }
.run__duo-hero .comms--hero > p { font-size: clamp(18px, 1.9vw, 26px); text-shadow: 0 2px 12px rgba(1, 6, 10, .8); }
.run--wide .run__duo-hero .comms--hero .port--lg { width: 150px; height: 150px; }
.run--wide .run__duo { margin-bottom: 70px; }
.run--land .run__duo-hero { bottom: 0; } .run--land .run__duo-hero .comms--hero .port--lg { width: 80px; height: 80px; } .run--land .run__duo-hero .comms--hero > p { font-size: 15px; }
/* the companion stands on the picture's bottom edge, its line below it; the depth tags go to the top */
.run__duo .run__pic .tags { top: 12px; bottom: auto; }
.run__duo-hero { top: calc(100% - 78px); bottom: auto; }
.run--wide .run__duo { margin-bottom: 150px; }
.run--land .run__duo { margin-bottom: 96px; } .run--land .run__duo-hero { top: calc(100% - 44px); }
/* group 4: register, sign in and my account as a boarding pass (22 Oct) */
.pass { display: grid; justify-items: center; gap: 14px; padding: 20px 16px 18px; border-radius: 24px; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 201, 138, .22), rgba(2, 20, 30, .5) 70%); box-shadow: inset 0 0 0 1px var(--hair); }
.pass .port--lg { width: 120px; height: 120px; }
.pass__body { display: grid; gap: 12px; width: 100%; }
.slot { display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 8px; border-radius: 18px; background: rgba(1, 6, 10, .45); box-shadow: inset 0 0 0 2px var(--hair-2); }
.slot:focus-within { box-shadow: inset 0 0 0 2px var(--glow); }
.slot .ico3 { width: 34px; height: 34px; flex: none; }
.slot .field { border: 0; padding: 10px 0; font: 600 18px/1.2 var(--text); }
.chips--big { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chips--big .chip { justify-content: center; min-height: 52px; font-size: 15px; }
.chips--big .chip .ico3 { width: 30px; height: 30px; }
.accts__alt { display: flex; justify-content: center; }
.port--captain { display: grid; place-items: center; }
.gtiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.crew--wide .accts, .crew--land .accts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.crew--wide .pass .port--lg { width: 170px; height: 170px; }
/* the team: five portholes with initials, the modules as coin tiles with their owners' initials */
.port--ini { display: grid; place-items: center; font: 800 18px/1 var(--text); color: #FFF5DF; }
.ini--gh { background: linear-gradient(180deg, #2A8EA3, #123B52); } .ini--co { background: linear-gradient(180deg, #F58C72, #B85A40); } .ini--hm { background: linear-gradient(180deg, #F2B54A, #A9670A); }
.ini--wy { background: linear-gradient(180deg, #57D9A3, #2E7D57); } .ini--zw { background: linear-gradient(180deg, #9C7BD9, #4A2A5A); } .ini--all { background: linear-gradient(180deg, #6FE7E1, #087F96); color: #04202B; }
.crewroster { grid-template-columns: repeat(5, 1fr); }
.teamlist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tmod { position: relative; display: grid; justify-items: center; gap: 6px; min-height: 104px; padding: 12px 8px 10px; border: 0; border-radius: 18px; background: var(--paper); color: var(--navy); box-shadow: 0 4px 0 #B58A52, 0 10px 22px rgba(0, 0, 0, .28); text-align: center; }
.tmod .ico3 { width: 44px; height: 44px; }
.tmod b { font: 800 14.5px/1.15 var(--text); color: var(--navy); }
.tmod__who { position: absolute; top: 6px; right: 6px; display: flex; }
.tmod__who .ini { display: grid; place-items: center; width: 22px; height: 22px; margin-left: -6px; border-radius: 50%; font: 800 8.5px/1 var(--text); font-style: normal; color: #FFF5DF; box-shadow: 0 0 0 2px var(--paper); }
.crew--wide .teamdeck { grid-template-columns: 1fr; } .crew--wide .teamlist { grid-template-columns: repeat(5, 1fr); }
.crew--land .teamdeck { grid-template-columns: 1fr; } .crew--land .teamlist { grid-template-columns: repeat(5, 1fr); } .crew--land .tmod { min-height: 88px; }
.tmate { display: grid; justify-items: center; gap: 6px; text-align: center; }
.tmate b { font: 700 12px/1.2 var(--text); color: var(--ink); }
/* group 5: the evidence form as a game screen */
#app > .crew--ev { animation-name: fadein; }
.slot--area { align-items: flex-start; padding-top: 10px; }
.slot--area .field { min-height: 84px; padding: 6px 0; font-size: 16px; }
.slot .field--num { max-width: 110px; }
.slot .tag { margin-left: auto; }
.ev__form, .ev__photo { gap: 10px; }
.ev__photo .photo__box { display: grid; place-items: center; min-height: 120px; border-radius: 18px; border: 2px dashed rgba(255, 255, 255, .28); background: rgba(1, 6, 10, .3); }
.ev__photo .photo__box .ico3 { width: 48px; height: 48px; opacity: .8; }
.crew--wide .evdeck, .crew--land .evdeck { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.crew--wide .ev__steps, .crew--land .ev__steps { grid-column: 1 / -1; }
.ev__photo .photo__box { aspect-ratio: auto; min-height: 120px; height: 160px; }
.crew--wide .ev__photo .photo__box { height: 150px; }
/* round 4 (GOAL criterion 1): no mono uppercase labels on a learner screen, at any length: every pill, stamp, tag and hint
   reads in Onest, normal case; the depth number and the IDs keep their mono */
body:not(.console-page) #app :is(.pill, .stamp, .scan__tag, .gbtn b, .spec__hint, .live, .m3d__tag, .tiers em, .returned b, .compare span, .model figcaption, .model__more span,
  .q-hint, .logbook__head, .hot span, .cardback b, .cardback > span, .q-label, .textlink, .metaline, .voyage__meta, .stops li, .mate, .form, .oxid span, .shelf__head,
  .notices li > span, .recall__row span:first-child, .tracker span, .logline b, .hud__zone, .hud__lab, .count, .board, .readout span, .icosheet__i, .ldeck__head, .act__unit) {
  font-family: var(--text); text-transform: none; letter-spacing: 0; }
body:not(.console-page) #app .pill { font-weight: 700; font-size: 15px; }
body:not(.console-page) #app .pill--sm { font-size: 13.5px; }
body:not(.console-page) #app :is(.stamp, .scan__tag, .spec__hint, .live, .m3d__tag, .q-hint, .hot span, .logbook__head, .compare span, .model figcaption, .returned b, .logline b) { font-weight: 700; font-size: 12px; }
body:not(.console-page) #app .gbtn b { font: 800 14px/1.2 var(--text); }
/* a phone on its side: the dive's words and tiles fit above the big button */
.run--land .run__body .h-q, .run--land .run__body .h-display { font-size: 22px; line-height: 1.15; }
.run--land .opts--tiles { gap: 8px; }
.run--land .opt--tile { min-height: 52px; padding: 4px 12px 4px 4px; font-size: 15px; }
.run--land .opt__pic { width: 44px; height: 44px; } .run--land .opt__coin { width: 38px; height: 38px; }
.run--land .run__body > .tags:first-child { margin-bottom: -6px; }
/* the secondary link sits at the top, right under the ribbon, never under the big button */
.accts__alt--top { justify-content: flex-end; margin-top: -4px; }
.crew--wide .accts > .sec, .crew--land .accts > .sec { grid-column: 2; }
.crew--wide .accts > .accts__alt--top, .crew--land .accts > .accts__alt--top { grid-column: 1 / -1; grid-row: 1; }
.crew--wide .accts > .accts__main, .crew--land .accts > .accts__main { grid-column: 1; grid-row: 2 / span 3; }
/* round 4: the empty photo box is a tap target with a camera drawing; the cloze's blanks flow inside the sentence; the crew's portholes wear their module coin */
.ev__photo .photo__box { gap: 8px; border: 0; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22); cursor: pointer; transition: box-shadow .15s, transform .12s var(--bounce); }
.ev__photo .photo__box:hover { box-shadow: inset 0 0 0 2px var(--glow); }
.ev__photo .photo__box:active { transform: scale(.98); }
.photo__cam { width: 96px; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.cloze--flow { line-height: 2.1; }
.blankwrap { display: inline-block; vertical-align: baseline; }
.cloze--flow .blank { display: inline-block; width: auto; max-width: 14em; margin: 0 .1em; padding: 2px 12px 3px; border: 0; border-radius: 999px; background: rgba(111, 231, 225, .14); box-shadow: inset 0 0 0 2px var(--glow); font: 600 18px/1.3 var(--text); color: var(--ink); text-align: center; }
.cloze--flow .blank:focus { background: rgba(111, 231, 225, .24); box-shadow: inset 0 0 0 2px var(--glow), 0 0 16px rgba(111, 231, 225, .35); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.legend__i { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px/1 var(--text); color: var(--ink-2); }
.legend__i .ico3 { width: 22px; height: 22px; }
.crewroster .port--md { position: relative; overflow: visible; font-size: 20px; }
.tmate__mod { position: absolute; right: -8px; bottom: -6px; line-height: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.tmate__mod .ico3 { width: 30px; height: 30px; }
.tmate b { font-size: 13px; }
.crew--wide .teamdeck { min-height: calc(100vh - 110px); align-content: space-evenly; }
.crew--wide .crewroster .port--md { width: 96px; height: 96px; font-size: 28px; } .crew--wide .tmate__mod .ico3 { width: 40px; height: 40px; } .crew--wide .tmate b { font-size: 15px; }
.crew--wide .tmod { min-height: 140px; } .crew--wide .tmod .ico3 { width: 56px; height: 56px; } .crew--wide .tmod b { font-size: 16px; }
.crew--wide .teamdeck { padding-bottom: 150px; min-height: 0; }   /* the last tile row clears the big button on a 1024×768 tablet */
.crew .crewroster { grid-template-columns: repeat(5, 1fr); gap: 10px 4px; }   /* the five teammates on one row, a phone included */
.crew--tall .crewroster .port--md { width: 58px; height: 58px; font-size: 17px; } .crew--tall .tmate__mod .ico3 { width: 26px; height: 26px; } .crew--tall .tmate b { font-size: 11.5px; }
/* round 4, the 844×390 sweep */
.run--land .run__floor { display: none; }   /* the seabed picture is the phone's; on a phone on its side the art half already shows it */
.tag--inline { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.crew--land .accts > .accts__main, .crew--wide .accts > .accts__main { grid-column: 1; grid-row: 2 / span 4; align-self: start; }
.crew--land .accts, .crew--wide .accts { grid-auto-rows: min-content; }
.crew--land .pass { padding: 12px 14px; gap: 8px; } .crew--land .pass .port--lg { width: 72px; height: 72px; }
.crew--land .crewdeck .sect { scroll-margin-bottom: 90px; }
.crew--land .crew__mates { padding-bottom: 8px; }
.crew--land .crew__mates { grid-column: 1 / -1; }
/* the free orbit (23 Oct): coins behind the hull fade; the home button appears once the view is turned */
.hot--behind { transition: opacity .3s, scale .3s; pointer-events: none; }
.hub__home { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: none; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(1, 6, 10, .55); color: var(--ink); box-shadow: inset 0 0 0 2px var(--hair-2), 0 6px 16px rgba(0, 0, 0, .35); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--bounce); transform: scale(.8); }
.hub__home.is-on { display: grid; opacity: 1; pointer-events: auto; transform: none; animation: pop .35s var(--bounce); }
.hub__home .ico3 { width: 28px; height: 28px; }
.deck--land .hub__home { bottom: 60px; }
/* the drawing's livelier sea (28 Oct): gulls drift and flap over the island, the lighthouse lamp blinks, kelp sways from the root
   (each motion on an inner group: the outer one carries the position, which a CSS transform would replace) */
.sea__gullfly { animation: gullfly 9s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes gullfly { from { transform: translate(0, 0); } to { transform: translate(28px, -14px); } }
.sea__gullwing { animation: gullflap .7s ease-in-out var(--d, 0s) infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes gullflap { from { transform: scaleY(1); } to { transform: scaleY(.25); } }
.sea__kelp { animation: kelpsway 3.6s ease-in-out var(--d, 0s) infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes kelpsway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.sea__beacon { animation: beacon 2.6s steps(1) infinite; }
@keyframes beacon { 0%, 54% { fill: #FFE9A8; } 55%, 100% { fill: #C9B98A; } }
.sea__beaconglow { animation: beaconglow 2.6s steps(1) infinite; }
@keyframes beaconglow { 0%, 54% { opacity: .9; } 55%, 100% { opacity: 0; } }
/* the giant squid deep under the ship (the 2D tentacle v4, 28 Oct): its eye blinks now and then; Ship.animate moves the rest */
/* the seabed (29 Oct): the sparkles twinkle, the school drifts, the ROV bobs on its tether */
.sea__spark { animation: spark 3.2s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes spark { from { opacity: .12; } to { opacity: .6; } }
.sea__school { animation: school 26s ease-in-out infinite alternate; }
@keyframes school { from { transform: translate(0, 0); } to { transform: translate(140px, -14px); } }
.sea__rov { animation: rov 7s ease-in-out infinite alternate; }
@keyframes rov { from { transform: translateY(0); } to { transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .sea__spark, .sea__school, .sea__rov { animation: none; } }

/* 30 Oct, round 8: a laptop window (Gaoyang's MacBook shows the app at about 1211×746, 1211×701 with Chrome's debugging bar). The room
   and list pages and the torn page sat in the top half with empty sea below and the torn page's button floating beside it: here they
   are centred in the window too, the torn page a little larger. The tall-window block below still wins at ≥ 1000 high. */
@media (min-width: 1024px) and (min-height: 640px) {
  .crew--wide .crewdeck { min-height: calc(100dvh - 150px); align-content: center; }
  .guide--wide:has(> .tornwrap) { display: flex; flex-direction: column; min-height: 100dvh; }
  .guide--wide .tornwrap { margin: auto; zoom: 1.1; max-width: min(960px, calc(78vw / 1.1)); grid-template-columns: minmax(0, 1fr) 300px; padding-bottom: 60px; }
}
/* 29 Oct, round 6: a tall desktop window (Gaoyang's 1470×1200, and 1280×1024). The hub filled it in round 2; the other routes used the top
   half or two-thirds and left empty sea below. Here each composed group is centred in the window above the big button (the room and list
   pages, the torn page, the species card), the chart, the region scene and the species card grow with the height (the JS raises their
   height caps), and the dive frame scales: the scene about 44 % of the width, the title and body about 1.25×. 1280×800 and 1440×900
   are untouched (min-height 1000). The account page is one composed, centred stack at every wide size. */
@media (min-width: 1024px) and (min-height: 1000px) {
  .crew--wide .crewdeck { min-height: calc(100dvh - 150px); align-content: center; }
  .crew--wide .frs { grid-template-columns: minmax(0, 760px); justify-content: center; gap: 24px; }
  .crew--wide .frs > .sec { grid-column: 1; grid-row: auto; }
  .crew--wide .frs .port--md { width: 112px; height: 112px; font-size: 32px; }
  .crew--wide .pass .port--lg { width: 200px; height: 200px; }
  .guide--wide:has(> .tornwrap) { display: flex; flex-direction: column; min-height: 100dvh; }   /* the torn page is a small note: it sits centred in the window, scaled up */
  .guide--wide .tornwrap { margin: auto; zoom: 1.25; max-width: min(960px, calc(78vw / 1.25)); grid-template-columns: minmax(0, 1fr) 320px; padding-bottom: 60px; }
  .guide--wide .show { min-height: calc(100dvh - 200px); align-content: center; grid-template-columns: minmax(0, 1fr) 420px; max-width: 1380px; }
  .run--wide .run__col { max-width: 1380px; }
  .run--wide .run__scene .scene { width: min(44vw, 100%); }
  .run--wide .run__body .h-q, .run--wide .run__body .h-display { font-size: clamp(42px, 4.1vw, 62px); }
  .run--wide .run__body .t-body { font-size: 24px; }
}
@media (min-width: 1400px) and (min-height: 1000px) {
  .crew--wide .crewdeck { zoom: 1.2; min-height: calc((100dvh - 150px) / 1.2); }   /* a modest scale-up where the width allows it: larger avatars, cards and type */
  .guide--wide .tornwrap { zoom: 1.45; max-width: min(960px, calc(78vw / 1.45)); }
}
.crew--wide .accts { grid-template-columns: minmax(0, 620px); justify-content: center; }
.crew--wide .accts > .sec, .crew--wide .accts > .accts__main, .crew--wide .accts > .accts__alt--top { grid-column: 1; grid-row: auto; }
.crew--wide .accts > .accts__alt--top { justify-content: flex-end; }