/* ---------- Manifest · chart direction ----------
   Presentation only. Nothing here touches game logic.
   Tokens from the reskin kit (tokens/tokens.css), plus the shared components
   the screens are built from: dock, chart, aside, steppers, plates, stamps. */

:root{
  --water:#060E1A; --water-lift:#0D1C30; --coast:#0C1725;
  --panel:rgba(11,20,34,.66); --panel-solid:rgba(9,17,30,.92); --plate:rgba(9,17,30,.95);
  --paper:#EDF2F7; --paper-soft:#DCE7F0; --body:#C3D2E0; --muted:#A8BDD0;
  --ink:#7AA0BE; --ink-dim:rgba(168,189,208,.3);
  /* Compatibility aliases. The shared class-debrief renderer and some verbatim
     copy still name the old tokens; mapping them here keeps that markup in the
     chart palette without touching the code that writes it. */
  --dim:#A8BDD0; --text:#EDF2F7; --panel-2:#0F1D31; --line2:rgba(143,168,190,.28);
  --teal:#5FD4BE; --amber:#E8A33D; --red:#E4575B;
  --cargo:#5FD4BE; --cargo-hover:#7FDFCB; --on-cargo:#04231E;
  --risk:#E8A33D; --loss:#E4575B;
  --hairline:rgba(143,168,190,.22); --hairline-strong:rgba(143,168,190,.34); --hairline-soft:rgba(143,168,190,.14);
  --cargo-fill:rgba(95,212,190,.12); --cargo-border:rgba(95,212,190,.6);
  --risk-fill:rgba(232,163,61,.07); --risk-border:rgba(232,163,61,.5);
  --loss-fill:rgba(228,87,91,.08); --loss-border:rgba(228,87,91,.5);
  --font-decree:'Bodoni Moda','Bodoni 72',Didot,serif;
  --font-cargo:'Big Shoulders Display',Oswald,'Arial Narrow',sans-serif;
  --font-mono:'Martian Mono',ui-monospace,Menlo,monospace;
  --font-chart:'EB Garamond',Georgia,serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --t-press:120ms; --t-state:220ms; --t-value:550ms; --t-reveal:900ms;
  --dock-w:340px; --aside-w:448px; --touch:44px;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--water); color:var(--body);
  font-family:var(--font-chart); -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--cargo);}
a.lock,a.btnx{text-decoration:none;}

/* ---------- the four registers ---------- */
.decree{font-family:var(--font-decree); font-variant-numeric:tabular-nums lining-nums; font-weight:500;}
.cargo{font-family:var(--font-cargo); font-variant-numeric:tabular-nums lining-nums;}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.chartf{font-family:var(--font-chart);}
.cur{font-size:.5em; vertical-align:.5em; font-weight:500; letter-spacing:0;}
.unit{font-size:.42em; font-weight:400; letter-spacing:.02em;}
.colon{vertical-align:.06em;}

/* ---------- rules, plates, tags ---------- */
.rule{height:1px; background:linear-gradient(90deg,rgba(143,168,190,.34),rgba(143,168,190,.06));}
.rule-c{height:1px; background:linear-gradient(90deg,transparent,rgba(143,168,190,.4),transparent);}
.glass{background:var(--panel); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); border:1px solid var(--hairline);}
.tag{display:inline-block; padding:4px 8px; border:1px solid rgba(143,168,190,.26); font-size:8.5px; letter-spacing:.14em; font-family:var(--font-mono); white-space:nowrap;}
.krow{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px solid var(--hairline-soft);}
.krow:last-child{border-bottom:0;}
.lbl{font-family:var(--font-mono); font-size:9px; letter-spacing:.3em; color:var(--ink);}

/* ---------- pressables ---------- */
.step,.lock,.opt,.tabx{
  transition:transform var(--t-press) var(--ease-out), background-color var(--t-state) ease,
             border-color var(--t-state) ease, color var(--t-state) ease, box-shadow var(--t-state) ease;
  cursor:pointer; font-family:var(--font-cargo); border-radius:0;
}
.step{width:var(--touch); height:var(--touch); flex-shrink:0; background:none;
  border:1px solid rgba(143,168,190,.28); color:var(--muted); font-family:var(--font-mono); font-size:15px;}
.step.plus{border-color:rgba(95,212,190,.4); color:var(--cargo);}
.step:active{transform:scale(.94);}
.step:disabled{opacity:.3; cursor:not-allowed;}
.lock:active,.opt:active{transform:scale(.97);}
.step:focus-visible,.lock:focus-visible,.opt:focus-visible,.tabx:focus-visible{
  outline:none; border-color:var(--cargo); box-shadow:0 0 0 3px rgba(95,212,190,.22);}
@media (hover:hover) and (pointer:fine){
  .step:hover{border-color:rgba(95,212,190,.65); color:var(--cargo);}
  .opt:hover{border-color:rgba(95,212,190,.5);}
  .row:hover{background-color:rgba(95,212,190,.05);}
}
.lock{display:flex; align-items:center; justify-content:center; gap:12px; width:100%; height:64px;
  font-size:22px; font-weight:700; letter-spacing:.18em; border:1px solid var(--cargo);
  background:var(--cargo); color:var(--on-cargo);}
.lock.ghost{background:transparent; border-color:rgba(143,168,190,.26); color:var(--muted);}
.lock.ghost.warn{border-color:var(--loss-border); color:var(--loss);}
.lock.ready{box-shadow:0 0 34px rgba(95,212,190,.22);}
.lock.sm{height:44px; font-size:15px; font-weight:600; letter-spacing:.12em;}
.lock[disabled]{cursor:not-allowed;}

/* ---------- inputs ---------- */
input.field,textarea.field{
  width:100%; border-radius:0; background:rgba(6,14,26,.6); color:var(--paper);
  border:1px solid rgba(95,212,190,.5); font-family:var(--font-cargo);
  caret-color:var(--cargo);
}
input.field:focus,textarea.field:focus{outline:none; border-color:var(--cargo); box-shadow:0 0 0 3px rgba(95,212,190,.16);}

/* ---------- animation ---------- */
.flow{stroke-dasharray:3 13; animation:flow 3.2s linear infinite;}
@keyframes flow{to{stroke-dashoffset:-32}}
.lane{transition:stroke-width var(--t-value) var(--ease-out), stroke-opacity var(--t-value) ease;}
.ring{transition:stroke-dashoffset var(--t-value) var(--ease-out), stroke var(--t-state) ease;}
.rose{animation:rose 130s linear infinite;}
@keyframes rose{to{transform:rotate(360deg)}}
.ping{animation:ping .62s var(--ease-out);}
@keyframes ping{0%{background-color:rgba(95,212,190,.22)}100%{background-color:rgba(95,212,190,0)}}
.stamp{opacity:0; transform:rotate(-14deg) scale(1.6); transition:opacity .28s ease, transform .5s var(--ease-out);
  display:inline-block; font-family:var(--font-cargo); font-weight:700; letter-spacing:.2em; mix-blend-mode:screen;}
.stamp.on{opacity:1; transform:rotate(-4.5deg) scale(1);}
.fade{opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .6s var(--ease-out);}
.fade.on{opacity:1; transform:translateY(0);}
.rise{opacity:0; transform:translateY(8px); animation:rise .5s var(--ease-out) forwards;}
@keyframes rise{to{opacity:1; transform:translateY(0)}}
.sound{transform-origin:bottom; transform:scaleY(0); animation:sound .85s var(--ease-out) forwards;}
@keyframes sound{to{transform:scaleY(1)}}
.tickpulse{animation:tickpulse 2s ease-in-out infinite;}
@keyframes tickpulse{0%,100%{opacity:1}50%{opacity:.4}}
.heart{animation:heart 1s ease-in-out infinite;}
@keyframes heart{0%,100%{opacity:1}50%{opacity:.55}}
.livedot{animation:tickpulse 3s ease-in-out infinite;}
.voy{position:absolute; left:0; top:0; width:22px; height:10px; offset-rotate:auto; offset-distance:0%;
  transition:offset-distance 3.2s cubic-bezier(.4,0,.2,1);}
.voy.on{offset-distance:100%;}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.2s !important; transition-duration:.2s !important;}
  .rose,.flow,.tickpulse,.heart,.ping{animation:none;}
  .stamp,.fade,.voy{transform:none;}
  .voy{offset-distance:100%;}
}

/* ---------- details / disclosure ---------- */
details summary{cursor:pointer; list-style:none;}
details summary::-webkit-details-marker{display:none;}

/* ---------- the live board: dock | chart | aside ---------- */
.board{display:none; min-height:100vh; position:relative;}
.board.on{display:block;}
.chartwrap{position:absolute; inset:0; overflow:hidden;}
.chartwrap svg{width:100%; height:100%; display:block;}
.dock{position:absolute; left:0; top:0; width:var(--dock-w); height:100%; padding:40px 32px;
  background:linear-gradient(100deg,rgba(6,14,26,.9) 62%,rgba(6,14,26,.42));
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  border-right:1px solid rgba(143,168,190,.2); display:flex; flex-direction:column; overflow:auto;}
.aside{position:absolute; right:0; top:0; width:var(--aside-w); height:100%; padding:34px 40px 28px;
  background:linear-gradient(90deg,rgba(6,14,26,.72),rgba(6,14,26,.93) 26%);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-left:1px solid var(--hairline); display:flex; flex-direction:column; overflow:auto;}
.pane{display:none; flex-direction:column; flex:1; min-height:0;}
.pane.on{display:flex;}
.grow{flex-grow:1; min-height:10px;}
.mobile-only{display:none;}

/* ---------- full-page screens (join, check in, brief) ---------- */
.page{display:none; position:relative; min-height:100vh;}
.page.on{display:block;}
.pagebg{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.pagebg svg{width:100%; height:100%; display:block;}

/* ---------- phone ---------- */
@media (max-width:980px){
  .board{padding:0;}
  .chartwrap{position:relative; inset:auto; height:auto;}
  .dock,.aside{position:static; width:auto; height:auto; padding:0; background:none; border:0;
    backdrop-filter:none; -webkit-backdrop-filter:none; overflow:visible;}
  .board.on{display:flex; flex-direction:column; gap:14px; padding:18px 24px 28px;}
  .mobile-only{display:block;}
  .desktop-only{display:none !important;}
  .lock{height:58px; font-size:19px;}
}