/* Fateclatter — a company carrying the dawn. Shared interface foundations. */
:root {
  --ui-ink:#0b191b;
  --ui-panel:#142b2b;
  --ui-panel-raised:#1b3533;
  --ui-text:#f3efdf;
  --ui-muted:#bbc9be;
  --ui-gold:#dfb96d;
  --ui-action:#dfedb1;
  --ui-line:rgba(204,213,183,.22);
  --action-clearance:148px;
  color-scheme:dark;
}
html { scroll-padding-block-end:var(--action-clearance); }
body {
  color:var(--ui-text);
  background:radial-gradient(ellipse at 9% 0,#28403966,transparent 42rem),#0b191b;
  padding-bottom:var(--action-clearance);
  -webkit-font-smoothing:antialiased;
}
button,summary,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button,summary { touch-action:manipulation; }
button:focus-visible,summary:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid var(--ui-gold); outline-offset:4px;
  scroll-margin-block:1rem var(--action-clearance);
}
button:disabled { cursor:not-allowed; }
.skip-to-play {
  position:fixed; inset:8px auto auto 12px; z-index:100;
  transform:translateY(-150%); padding:14px 22px; border-radius:8px;
  color:var(--ui-ink); background:var(--ui-action); font-weight:700;
}
.skip-to-play:focus { transform:translateY(0); }
.app-shell { max-width:1440px; padding-inline:clamp(16px,3vw,40px); }
.topbar { height:auto; min-height:76px; gap:16px; padding-block:18px; border-color:var(--ui-line); }
.brand { gap:12px; color:var(--ui-text); }
.brand>span:last-child { font-size:clamp(17px,1.7vw,23px); letter-spacing:.14em; }
.brand-sub { color:var(--ui-muted); font-size:10px; letter-spacing:.18em; margin-top:6px; }
.brand-mark { width:42px; height:46px; border-radius:13px 13px 18px 18px; color:var(--ui-gold); border-color:#dfb96d66; }
.top-actions { flex-wrap:wrap; gap:6px; }
.top-actions>.quiet-button,.comfort-menu>summary { min-height:44px; border-radius:10px; font-size:12px; }
.top-actions .quiet-button { color:var(--ui-muted); }
.top-actions .quiet-button:hover { color:var(--ui-text); background:#243b36; }
.adventure-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; margin:12px 0 18px; padding:4px; background:#102322; border:1px solid var(--ui-line); border-radius:14px; }
.adventure-nav-item {
  position:relative; min-width:0; min-height:52px; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:12px; border:1px solid transparent; border-radius:10px; background:transparent;
  color:var(--ui-muted); font:inherit; font-size:14px; font-weight:600; line-height:1.4; cursor:pointer; white-space:normal;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.adventure-nav-item svg { width:19px; height:19px; flex-shrink:0; opacity:.8; }
.adventure-nav-item:hover { background:#243d35; color:var(--ui-text); }
.adventure-nav-item.is-current { color:var(--ui-action); background:#263c31; border-color:#c1d69838; box-shadow:inset 0 1px #f5efdc0d; }
.nav-active-mark { width:5px; height:5px; border-radius:50%; background:var(--ui-action); }
.page-intro.opening-vista { margin-top:0; min-height:148px; padding:24px 28px; border-radius:18px; overflow:hidden; }
.opening-vista .arrival-copy { max-width:70ch; padding:0; }
.opening-vista .arrival-copy h1 { margin:8px 0; font-size:clamp(25px,3vw,38px); line-height:1.2; letter-spacing:.015em; }
.opening-vista .arrival-copy p { max-width:58ch; color:#e1e5d6; font-size:14px; line-height:1.6; margin-block:8px; }
.opening-vista .eyebrow { color:var(--ui-gold); font-size:10px; letter-spacing:.16em; }
.opening-vista .arrival-checkpoint { font-size:12px; line-height:1.5; border:0; padding:0; background:transparent; color:#d4daba; }
.opening-vista .expedition-summary { flex-shrink:0; padding:14px 18px; border-radius:12px; background:#10282bcf; }
body:is([data-phase="dice"],[data-phase="command"],[data-phase="playback"],[data-phase="result"]) .opening-vista { min-height:112px; padding-block:18px; }
body:is([data-phase="dice"],[data-phase="command"],[data-phase="playback"],[data-phase="result"]) .opening-vista h1 { font-size:clamp(23px,2.5vw,32px); }
.coop-hub { margin:12px 0; }
.coop-entry-compact { min-height:58px; padding:10px 16px; gap:16px; border-radius:12px; border-color:var(--ui-line); background:#132725; }
.coop-entry-compact>span { gap:10px; color:var(--ui-text); flex-wrap:wrap; }
.coop-entry-compact>span>svg { color:var(--ui-gold); }
.coop-entry-compact strong { font-size:13px; }
.coop-entry-compact small { color:var(--ui-muted); font-size:12px; }
.coop-entry-compact .coop-button { min-height:42px; padding:10px 16px; border-radius:9px; background:#213b32; border-color:#b0cba34d; color:var(--ui-action); }
.campaign-toolbar { gap:12px; margin:12px 0; min-height:44px; }
#campaign-progress { color:var(--ui-muted); font-size:12px; }
.adventure-tools { gap:6px; flex-wrap:wrap; }
.adventure-tools>.text-button,.explore-menu>summary { min-height:44px; border-radius:9px; padding:10px 14px; font-size:13px; }
.journey-overview { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:12px; margin-bottom:18px; }
.journey-overview>.route-disclosure,.company-disclosure { margin:0; min-width:0; border:1px solid var(--ui-line); border-radius:12px; background:#122627; }
.journey-overview>.route-disclosure[open],.company-disclosure[open] { grid-column:1/-1; }
.journey-overview>.route-disclosure>summary,.company-disclosure>summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:14px 18px; color:#e5e5d3; cursor:pointer; font-size:13px; list-style:none; }
.company-disclosure>summary::-webkit-details-marker { display:none; }
.company-disclosure>summary::after { content:'+'; color:var(--ui-gold); font-size:20px; }
.company-disclosure[open]>summary::after { content:'−'; }
#company-count { margin-left:auto; color:var(--ui-muted); font-variant-numeric:tabular-nums; font-size:12px; }
.company-disclosure #progression-strip { margin:0; padding:4px 16px 16px; }
.company-disclosure .party-growth-heading { margin-top:0; }
.action-dock { border-color:#bac5a847; background:linear-gradient(130deg,#1b3534fa,#102a2cfa); box-shadow:0 -8px 40px #020d1855,inset 0 1px #f5edc910; }
.dock-context { min-width:0; }
.dock-context>span { color:#e6e6cf; }
.dock-primary { min-height:56px; font-size:15px; }
.dock-assist { min-height:48px; }
.app-footer { border-color:var(--ui-line); color:var(--ui-muted); }
@media(min-width:1000px) {
  .adventure-nav { max-width:660px; margin-inline:auto; }
}
@media(max-width:720px) {
  .topbar { align-items:flex-start; padding-block:14px; flex-wrap:wrap; }
  .top-actions { width:100%; justify-content:flex-start; gap:6px; }
  .top-actions>.quiet-button,.comfort-menu>summary { min-height:44px; padding-inline:12px; }
  .adventure-nav { margin-block:6px 14px; }
  .adventure-nav-item { padding:10px 5px; gap:6px; font-size:13px; min-height:54px; flex-direction:column; }
  .adventure-nav-item svg { width:18px; height:18px; }
  .nav-active-mark { display:none; }
  .page-intro.opening-vista { padding:20px; min-height:156px; gap:12px; }
  .opening-vista .expedition-summary { padding:10px; }
  .opening-vista .arrival-copy { min-width:0; }
  .opening-vista .arrival-copy p { font-size:14px; }
  .coop-entry-compact { padding:12px; align-items:center; }
  .coop-entry-compact>span { gap:7px; }
  .coop-entry-compact small { display:none; }
  .coop-entry-compact .coop-button { min-height:48px; font-size:12px; }
  .campaign-toolbar { align-items:flex-start; flex-wrap:wrap; }
  .adventure-tools { width:100%; display:flex; }
  .adventure-tools>.text-button,.explore-menu { flex:1; }
  .explore-menu>summary { justify-content:center; }
  .journey-overview { gap:8px; }
  .journey-overview>.route-disclosure>summary,.company-disclosure>summary { padding:12px; font-size:12px; gap:6px; }
  .company-disclosure #progression-strip { padding-inline:10px; }
}
@media(max-width:480px),(max-height:560px) {
  body { padding-bottom:20px; }
  .app-shell { padding-inline:12px; }
  .action-dock,#action-dock { position:static; margin:16px 12px; width:auto; transform:none; }
  .opening-vista .expedition-summary { display:none; }
  .journey-overview { grid-template-columns:1fr; }
  .adventure-nav-item { font-size:12px; }
  .coop-entry-compact { flex-wrap:wrap; }
  .coop-entry-compact>span { flex:1 1 8rem; }
}
@media(prefers-reduced-motion:reduce) { .adventure-nav-item { transition:none; } }
html[data-motion="reduced"] .adventure-nav-item { transition:none; }