/* Expedition console: full-size water, stable actions, and on-demand records. */
#game { border: 0; border-radius: 0; box-shadow: none; }
#play { padding: 0; }
#topbar {
  position: absolute; inset: 0 0 auto;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: calc(10px + env(safe-area-inset-top)) calc(22px + env(safe-area-inset-right))
           10px calc(22px + env(safe-area-inset-left));
  background: linear-gradient(180deg, #0a1923, #091722f5);
  border: 0; box-shadow: 0 1px 0 rgba(174,211,226,.12);
}
#topbar .top-right { gap: 8px; }
#topbar .brand { position: relative; min-height: 44px; padding-left: 15px; gap: 0; }
#topbar .brand .mark {
  position: absolute; inset: 0; width: 100%; height: 44px; z-index: 1;
  background: transparent; box-shadow: none; border-radius: 8px;
}
#topbar .brand .mark::after {
  content: ''; position: absolute; left: 1px; top: 19px; width: 6px; height: 6px;
  border-radius: 50%; background: #87e7f4; box-shadow: 0 0 9px rgba(111,230,255,.55);
}
#topbar .brand .mark.round-ping::before { left: 4px; top: 22px; }
#topbar .brand .name { pointer-events: none; }
#topbar #wallet-btn, #topbar #menu-btn, #topbar #mute {
  min-height: 44px; height: 44px; border-radius: 10px;
  background-color: rgba(15,34,46,.82);
  border: 1px solid rgba(173,210,225,.18);
  box-shadow: inset 0 1px rgba(211,235,245,.055), 0 2px 4px rgba(0,0,0,.12);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
#topbar :is(#wallet-btn, #menu-btn, #mute):active {
  transform: none;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.32), inset 0 -1px rgba(211,235,245,.09);
}
#mute { position: relative; min-width: 44px; width: 44px; font-size: 0; color: #d1e5ee; }
#mute::before {
  content: ''; display: block; width: 20px; height: 20px; margin: auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 9h4l5-4v14l-5-4H4zM17 8a6 6 0 0 1 0 8M20 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 9h4l5-4v14l-5-4H4zM17 8a6 6 0 0 1 0 8M20 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E") center / contain no-repeat;
}
#mute.off { color: #8babbc; }
#mute.off::after { content: ''; position: absolute; width: 24px; height: 2px; top: 21px; left: 9px; background: currentColor; transform: rotate(-45deg); box-shadow: 0 1px 0 #102330; }
#ticker { top: calc(76px + env(safe-area-inset-top)); left: calc(22px + env(safe-area-inset-left)); right: calc(22px + env(safe-area-inset-right)); }
#ticker .hist { background-color: rgba(5,18,28,.86); }

#dock {
  position: absolute;
  left: calc(22px + env(safe-area-inset-left)); right: calc(22px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: auto; max-width: 1280px; margin-inline: auto;
  max-height: none; overflow: visible; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
  align-items: end;
}
#dock > .panel, #dock > #bets {
  min-width: 0;
  background: linear-gradient(135deg, #172c37, #0a1b26 60%);
  border: 1px solid rgba(176,211,226,.24);
  box-shadow: inset 0 1px 0 rgba(209,232,242,.06), 0 8px 24px rgba(0,0,0,.18);
  border-radius: 10px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
#dock > .panel:focus-within, #dock > #bets[data-expanded="true"] {
  border-color: rgba(166,220,238,.40);
  box-shadow: inset 0 1px rgba(218,241,249,.10), 0 8px 24px rgba(0,0,0,.20);
}
#dock > #watch-prompt { padding: 10px 12px; min-height: 64px; }
#watch-prompt .small { font-size: 12px; color: #bbced8; }
#watch-signin { min-height: 44px; padding: 10px 18px; }
#dock > #idle-panel, #dock > #dive-panel { padding: 10px; }
#dock #idle-panel .seat { display: flex; flex-direction: column; gap: 8px; }
#dock #idle-panel .seat > .row { display: flex; flex-direction: row; gap: 10px; min-width: 0; }
#dock #idle-panel .seat > .row > .field { flex: 1 1 0; min-width: 0; gap: 5px; }
#dock #idle-panel .field > span { font-size: 10px; letter-spacing: .08em; color: #b1cad6; }
#dock .stepper {
  min-height: 44px; border-radius: 8px; background: #081823;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.24), 0 1px rgba(194,222,237,.06);
}
#dock .stepper:focus-within {
  box-shadow: inset 0 2px 5px rgba(0,0,0,.24), 0 0 0 1px rgba(135,212,235,.34);
}
#dock .field:focus-within > span { color: #d1e9f0; }
#dock .stepper button:hover:not(:disabled) { background-color: rgba(151,196,215,.13); }
#dock .stepper button:focus-visible { outline-offset: -3px; }
#dock .stepper input { min-height: 44px; font-size: 16px; padding: 8px; }
#dock .stepper button { min-height: 44px; min-width: 44px; padding-inline: 8px; }
#dock .big {
  min-height: 64px; border-radius: 7px; padding: 10px 14px; animation: none; overflow: hidden;
  transition: filter .12s ease, box-shadow .12s ease;
}
/* The response belongs to the plate, never to the changing amount or its position. */
#dock .big:hover:not(:disabled), #dock .big:active:not(:disabled),
#dock .stepper button:active:not(:disabled) { transform: none; }
#dock .big.primary:not(:disabled)::after, #dock .cash-amt.tick { animation: none; }
#dock .big b { font-size: 20px; letter-spacing: .08em; }
#dock .big small { font-size: 11px; line-height: 1.35; }
#dock .cash-amt { font-size: clamp(25px, 3vw, 34px); }
#dock #dive-panel.watch-only { display: none; }

#dock > #bets { display: flex; max-height: none; width: 100%; overflow: hidden; }
.activity-bar { display: flex; align-items: stretch; flex: 0 0 auto; min-height: 44px; }
#bets .bets-head { flex: 1 1 auto; min-width: 0; padding: 0 3px; gap: 0; border: 0; background: none; }
#bets .bets-tab {
  position: relative; min-height: 44px; flex: 1 1 auto; padding: 0 8px;
  font-size: 10px; letter-spacing: .04em; white-space: nowrap;
}
#bets .bets-tab::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #83b6c8, #b2e6ed, #83b6c8);
  opacity: 0; transform: scaleX(.5);
  transition: opacity .14s ease, transform .2s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
#bets .bets-tab[aria-selected="true"] {
  color: #e1f0f5;
  background: linear-gradient(180deg, rgba(121,178,202,.13), rgba(107,170,193,.045));
  box-shadow: inset 0 1px rgba(218,241,249,.06);
}
#bets .bets-tab[aria-selected="true"]::after { opacity: 1; transform: scaleX(1); }
#bets .bets-tab:active { transform: none; background-color: rgba(142,201,220,.12); }
#activity-toggle {
  flex: 0 0 44px; min-width: 44px; min-height: 44px; padding: 0;
  display: grid; place-items: center; border: 0; border-left: 1px solid rgba(172,208,223,.12);
  background: rgba(112,168,194,.045); color: #bddce9; cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
#activity-toggle:hover { background: rgba(127,200,225,.13); }
#activity-toggle svg { transition: transform 160ms ease; }
#activity-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
#activity-content {
  display: flex; flex-direction: column; min-height: 0; height: min(25vh, 180px);
  border-top: 1px solid rgba(172,208,223,.12);
  background: #061620;
}
#bets #table{ flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
#bets #table.hidden { display: none !important; }
#bets #table .who{ min-height: 38px; flex-shrink: 0; }
#bets #table .cap { flex: 0 0 auto; padding: 9px 4px; }
#bets #table .who.hdr{ min-height: 28px; }

@media (min-width: 700px) {
  #dock #idle-panel .seat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, .44fr); grid-template-areas: "fields action"; align-items: end; }
  #dock #idle-panel .seat > .row { grid-area: fields; }
  #dock #idle-panel .seat > #dive { grid-area: action; align-self: stretch; }
}
@media (min-width: 1024px) {
  #dock { grid-template-columns: minmax(0, 1fr) 392px; column-gap: 12px; }
  #dock > .panel { grid-column: 1; grid-row: 1; }
  #dock > #bets { grid-column: 2; grid-row: 1; }
  #activity-content { height: min(25vh, 230px); }
  #bets .bets-tab { font-size: 10px; }
}







/* One visual language for the header, controls and field guide. */
:root {
  --ink-hi: #f3f1e9;
  --console-text: #e8eee9;
  --console-muted: #9eb5c0;
  --console-accent: #b4efdf;
}
#topbar { min-height: 76px; column-gap: 36px; }
#topbar .brand { padding-left: 46px; min-width: 162px; }
#topbar .brand .mark { height: 48px; border-radius: 5px; }
#topbar .brand .mark::after, #topbar .brand .mark.round-ping::before { display: none; }
#topbar .brand .mark svg {
  position: absolute; left: 0; top: 6px; width: 34px; height: 34px;
  fill: none; stroke: var(--console-accent); stroke-width: 1.25;
}
.brand-copy { display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
#topbar .brand .name { color: var(--ink-hi); font-size: 20px; line-height: 1; letter-spacing: .2em; }
.brand-domain { color: #7f9ca9; font-size: 10px; letter-spacing: .06em; margin-left: 2px; }
.brand-caption { color: #a0b5bf; font: 10px/1.2 var(--ui); letter-spacing: .055em; }
.game-nav { display: flex; align-items: center; gap: 24px; justify-self: start; height: 48px; }
.game-nav > * { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
.game-nav button { background: none; border: 0; color: #a9bdc7; font: 500 12px var(--ui); cursor: pointer; }
.game-nav button:hover { color: var(--ink-hi); }
.game-nav-current { position: relative; color: #e5f4ef; font: 600 12px var(--ui); }
.game-nav-current::after { content: ''; position: absolute; bottom: -10px; inset-inline: 0; height: 2px; background: var(--console-accent); }
#topbar :is(#wallet-btn, #menu-btn, #mute, #account-btn) { border-radius: 7px; background-color: #132934; border-color: #29414c; }
#topbar #wallet-btn { background: #07151e; }
#topbar #wallet-btn .val { color: var(--console-text); }
#topbar #account-btn { background: #203c48; }
#topbar .top-right { justify-self: end; }
#ticker { top: calc(88px + env(safe-area-inset-top)); }
#ticker .hist { border-radius: 5px; font-size: 12px; }

#dock { gap: 8px; bottom: calc(22px + env(safe-area-inset-bottom)); }
#dock > .panel { border-color: #627e885c; box-shadow: inset 0 1px #bed6dc0d, 0 12px 36px #0004; }
#dock > #idle-panel, #dock > #dive-panel { padding: 14px; }
.console-eyebrow { color: #b9cec9; font: 600 10px/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.console-heading { display: flex; align-items: center; justify-content: space-between; min-height: 36px; margin: -8px 0 7px; }
.console-heading button {
  align-self: stretch; min-width: 44px; min-height: 44px; padding: 0 0 0 10px;
  color: #aac5d0; background: none; border: 0; font: 12px var(--ui); cursor: pointer;
}
.console-heading button:hover { color: #e9f2ee; }
.console-heading button span { margin-left: 10px; color: var(--console-accent); }
#dock #idle-panel .field > span { font: 500 10px/1.2 var(--ui); color: #aec3cc; letter-spacing: .09em; }
#dock .stepper { border: 1px solid #435966; border-radius: 6px; background: #06151f; }
#dock .stepper:focus-within { border-color: #a2dbc9; box-shadow: 0 0 0 2px #a2dbc91a; }
#dock .stepper input { color: #eef3ed; font-size: 18px; }
#dock .stepper button { border-radius: 4px; background: #1e3642; border-color: #435966; font-size: 12px; }
#dock .stepper #auto { color: #b7e6d5; }
#dock .big.primary:not(:disabled) {
  color: #08241e; border: 1px solid #cff5e3;
  background: linear-gradient(130deg, #d0f2df, #a6dfc6);
  box-shadow: inset 0 1px #f6fff9a6, 0 3px 0 #598674;
}
#dock .big.primary:not(:disabled) small { color: #163d32; }
#dock .big.cash:not(:disabled) {
  color: #042a1b; border-color: #bcf6cf;
  background: linear-gradient(125deg, #a6edb9, #59d68b);
  box-shadow: inset 0 1px #ecfff085, 0 3px 0 #287649;
}
#dock .big.cash .cash-verb { color: #0e4b2b; opacity: 1; }
#dock .big.cash small { color: #124d2e; }
#dock .big::before { border: 0; background: none; }
#dock .big:hover:not(:disabled) { filter: brightness(1.035); }
#dock .big:active:not(:disabled) { box-shadow: inset 0 3px 6px #09261a30; }
#dock .big b { font-size: 19px; letter-spacing: .12em; }
#dock .big .cash-key { opacity: .75; }
#dock > #bets { background: #0b1c27; border-color: #536e7a70; border-radius: 8px; }
#bets .bets-tab { font-family: var(--ui); font-size: 11px; text-transform: none; color: #a8c0cb; letter-spacing: .015em; }
#bets .bets-tab[aria-selected="true"] { color: #e1f3ec; background: #bddccc0a; box-shadow: none; }
#bets .bets-tab::after { background: #b4dfcf; height: 2px; }
#bets #table .who{ padding-block: 11px; border-color: #7393a31a; }
#bets #table .who.hdr{ background: #19323e66; color: #9cb8c4; }

#dock > #watch-prompt { padding: 20px 22px; gap: 22px; align-items: center; }
.watch-copy { min-width: 0; flex: 1; }
#watch-prompt h2 { margin: 7px 0 9px; color: var(--ink-hi); font: 600 24px/1.12 var(--ui); letter-spacing: -.04em; }
#watch-prompt .small { color: #9fb9c6; font-size: 12px; white-space: normal; line-height: 1.5; }
.watch-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; flex-shrink: 0; }
#watch-signin { display: inline-flex; align-items: center; gap: 16px; color: #082820; border-color: #c3eedb; background: #bfe7d5; box-shadow: none; border-radius: 6px; }
#watch-signin:hover { background: #d3f0e2; }
.watch-guide { min-height: 44px; padding: 0 12px; border: 0; background: none; color: #b5cdd6; font: 12px var(--ui); cursor: pointer; }
.watch-guide span { margin-left: 16px; color: var(--console-accent); }
.watch-guide:hover { color: var(--ink-hi); }

@media (max-width: 1199px) {
  #topbar { column-gap: 20px; }
  .game-nav { gap: 18px; }
  .game-nav-current { display: none; }
}
@media (max-width: 1023px) {
  #topbar { grid-template-columns: auto 1fr; }
  .game-nav { display: none; }
  #dock > #watch-prompt { padding: 16px; }
}
@media (max-width: 700px) {
  #topbar #account-btn { width: 44px; padding: 0; flex: 0 0 44px; }
  .account-caption { display: none; }
}
@media (max-width: 700px) {
  #topbar .brand { min-width: 132px; padding-left: 41px; }
  #topbar .brand .name { font-size: 17px; }
  .brand-caption { font-size: 9px; }
  #dock > #idle-panel, #dock > #dive-panel { padding: 10px; }
}
@media (max-width: 600px) {
  #topbar { padding: calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left)); }
  #topbar .brand .name { font-size: 13px; letter-spacing: .12em; }
  #topbar .top-right { gap: 5px; }
  #topbar #wallet-btn { min-width: 0; padding: 0 7px; }
  #topbar #play-purse { min-width: 0; }
  #topbar #wallet-btn .val { min-width: 0; font-size: 12px; }
  #ticker { top: calc(70px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); right: calc(12px + env(safe-area-inset-right)); }
  #dock { left: calc(8px + env(safe-area-inset-left)); right: calc(8px + env(safe-area-inset-right)); bottom: calc(8px + env(safe-area-inset-bottom)); }
  #dock .stepper button { min-width: 44px; padding-inline: 6px; }
  #dock #idle-panel .seat > .row { gap: 8px; }
  #dock #idle-panel .seat > .row > .field:first-child { flex: 1.15 1 0; }
  #dock #idle-panel .seat > .row > .field:last-child { flex: .85 1 0; }
  #bets .bets-tab { padding-inline: 5px; font-size: 10px; }
  #activity-content { height: min(23vh, 172px); }
}
@media (max-width: 600px) {
  #topbar { min-height: 64px; gap: 8px; }
  #topbar .brand { min-width: 0; padding-left: 0; }
  #topbar .brand .mark svg { display: none; }
  #topbar .brand .mark { height: 44px; }
  #topbar .brand .name { font-size: 14px; letter-spacing: .13em; }
  .brand-domain, .brand-caption { display: none; }
  #topbar .top-right { gap: 5px; }
  #ticker { top: calc(76px + env(safe-area-inset-top)); }
  #dock { bottom: calc(10px + env(safe-area-inset-bottom)); gap: 6px; }
  .console-heading { margin: -8px 0 2px; min-height: 32px; }
  .console-eyebrow { font-size: 9px; }
  #dock > #watch-prompt { padding: 13px 14px; gap: 12px; }
  #watch-prompt h2 { font-size: 19px; max-width: 17ch; margin: 6px 0; }
  #watch-prompt .small { font-size: 11px; }
  #watch-signin { font-size: 12px; gap: 6px; padding-inline: 11px; }
  #watch-signin span { display: none; }
  .watch-guide { padding-inline: 5px; }
  .watch-guide span { margin-left: 5px; }
}
@media (max-width: 360px) {
  #topbar { padding-left: calc(8px + env(safe-area-inset-left)); padding-right: calc(8px + env(safe-area-inset-right)); column-gap: 6px; }
  #topbar .brand { padding-left: 11px; }
  #topbar .brand .name { font-size: 11px; letter-spacing: .075em; }
  #topbar .top-right { gap: 4px; }
  #topbar #wallet-btn { max-width: 91px; padding-inline: 5px; }
  #topbar #wallet-btn .val { font-size: 11px; }
}
@media (max-width: 360px) {
  #topbar .brand .name { font-size: 11px; }
  #topbar .brand { padding-left: 0; }
  #dock > #watch-prompt { gap: 8px; padding: 12px 10px; }
  #watch-prompt h2 { font-size: 17px; }
  .watch-copy .console-eyebrow { font-size: 8px; letter-spacing: .065em; }
  #watch-signin { padding-inline: 10px; font-size: 11px; }
  #dock .stepper input { font-size: 16px; }
}
@media (max-height: 620px) {
  .console-heading { display: none; }
  #dock > #watch-prompt { padding-block: 9px; }
  #watch-prompt h2 { font-size: 17px; margin: 3px 0; }
  .watch-copy .console-eyebrow { display: none; }
  .watch-actions { flex-direction: row; align-items: center; }
  #watch-prompt .watch-guide { display: none; }
}
@media (max-height: 520px) {
  #dock { bottom: calc(6px + env(safe-area-inset-bottom)); }
  #topbar { padding-top: calc(5px + env(safe-area-inset-top)); padding-bottom: 5px; }
  #ticker { top: calc(61px + env(safe-area-inset-top)); }
  #activity-content { height: min(25vh, 110px); }
  #dock > #idle-panel, #dock > #dive-panel { padding: 6px; }
  #dock .big { min-height: 58px; }
}
@media (min-width: 760px) and (max-height: 520px) {
  #dock { grid-template-columns: minmax(0, 1fr) 290px; gap: 8px; left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right)); }
  #dock > .panel { grid-column: 1; grid-row: 1; }
  #dock > #bets { grid-column: 2; grid-row: 1; }
  #dock #idle-panel .seat { grid-template-columns: minmax(0, 1fr) 142px; gap: 6px; }
  #dock .stepper button { padding-inline: 5px; min-width: 44px; }
  #dock .stepper input { padding-inline: 5px; }
  #dock #idle-panel .field > span { font-size: 9px; letter-spacing: .02em; }
}
@media (max-height: 520px) {
  #topbar { min-height: 56px; }
  #topbar .brand-caption { display: none; }
  #ticker { top: calc(66px + env(safe-area-inset-top)); }
  #dock { bottom: calc(6px + env(safe-area-inset-bottom)); }
  #dock > #idle-panel, #dock > #dive-panel { padding: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  #activity-toggle svg { transition: none; }
  #topbar *, #topbar *::before, #topbar *::after,
  #dock *, #dock *::before, #dock *::after { transition: none !important; animation: none !important; }
}

/* Exceptional settlement notices occupy their own row, never the stake controls. */
#dock > #outro-panel { grid-column: 1 / -1; grid-row: 3; width: 100%; }