/* CrabbMedia presentation layer. Load after game.css and shared brand tokens.
   Keep all gameplay geometry, artwork, hit areas and behavior in game.css/JS. */
:root {
  --ink: var(--cm-white, #fff);
  --muted: var(--cm-muted, #b8c7dd);
  --brass: var(--cm-orange, #ff793c);
  --brass-deep: var(--cm-orange, #ff793c);
  --cyan: var(--cm-orange, #ff793c);
  --bg: var(--cm-navy, #071a35);
  --site-panel: var(--cm-panel, #0c2447);
  --site-ink: var(--cm-white, #fff);
  --site-muted: var(--cm-muted, #b8c7dd);
  --site-gold: var(--cm-orange, #ff793c);
  --site-page-bg:
    radial-gradient(ellipse at 85% 0%, rgba(17, 62, 146, .45), transparent 70%),
    linear-gradient(180deg, #071a35, #051226);
}

html.is-desktop,
html.is-desktop body {
  background: var(--site-page-bg);
}

html.is-desktop #app {
  box-shadow:
    0 0 0 8px var(--cm-navy, #071a35),
    0 0 0 10px var(--cm-blue, #113e92),
    0 22px 56px rgba(0, 0, 0, .55);
}

/* Let the original underwater scene remain visible behind the menus. */
.overlay {
  background:
    radial-gradient(ellipse at 85% 0%, rgba(17, 62, 146, .22), transparent 70%),
    linear-gradient(180deg, rgba(7, 26, 53, .34), rgba(5, 18, 38, .8));
}

.menu {
  background:
    radial-gradient(ellipse at 85% 0%, rgba(17, 62, 146, .2), transparent 70%),
    linear-gradient(180deg, rgba(7, 26, 53, .2), rgba(5, 18, 38, .7));
}

#local-top {
  background: linear-gradient(180deg, rgba(7, 26, 53, .82), rgba(5, 18, 38, .94));
}

#settings,
#leave {
  background: rgba(5, 18, 38, .86);
}

#board,
#join,
#signin,
#rotate {
  background: var(--site-page-bg);
}

.kicker,
#local-top-list li span:first-child {
  color: var(--cm-orange, #ff793c);
}

#title .kicker {
  font-weight: 800;
  text-shadow: 0 2px 8px var(--cm-deep, #051226);
}

#over-score,
#rotate {
  color: var(--cm-white, #fff);
}

.hint,
.board-note,
.vol-row,
.settings-stat,
.settings-note {
  color: var(--cm-muted, #b8c7dd);
}

/* Match the selectors of the original high-specificity control layer. */
#app :is(#title, #over, #local-top, #settings, #board, #join, #signin, #leave) :where(button) {
  border-color: var(--cm-border, #365278);
  background: var(--cm-navy, #071a35);
  color: var(--cm-white, #fff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

#app :is(#title, #over) :is(.board-actions, .over-account-actions) button {
  border-color: var(--cm-border, #365278);
  background: rgba(7, 26, 53, .86);
  color: var(--cm-orange, #ff793c);
  box-shadow: none;
}

#app :is(#title-best, #over-best) {
  color: var(--cm-white, #fff);
  border-color: var(--cm-border, #365278);
  background: rgba(7, 26, 53, .88);
}

#app #dive,
#app #retry,
#app :is(#settings-close, #join-submit, #otp-send),
#app :is(#join-verify, #signin-verify) button[type="submit"],
#app #board-search button {
  border-color: var(--cm-orange, #ff793c);
  background: var(--cm-orange, #ff793c);
  color: var(--cm-navy, #071a35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 0 rgba(5, 18, 38, .65);
  font-weight: 800;
}

/* Keep warning actions visually distinct without changing confirmations. */
#app :is(#settings-reset-local, #leave-remove) {
  border-color: #bd6b67;
  background: #342039;
  color: #ffb9b1;
  box-shadow: none;
}

.settings-card,
.board-card,
#board .board-card,
#join .board-card,
#signin .board-card {
  border-color: var(--cm-border, #365278);
  background:
    linear-gradient(145deg, rgba(17, 62, 146, .16), transparent 65%),
    var(--cm-panel, #0c2447);
  color: var(--cm-white, #fff);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

.settings-card h3,
.board-card h3,
.join-card h3 {
  color: var(--cm-white, #fff);
}

.settings-data-group,
#board-list li {
  border-color: var(--cm-border, #365278);
}

.board-note a,
.board-card a {
  color: var(--cm-orange, #ff793c);
}

.board-note a:hover,
.board-card a:hover {
  color: var(--cm-paper, #f7f6f2);
}

.board-error {
  color: #ffb9b1;
}

#board-search input,
#otp-form input,
#join-form input,
#join-verify input,
#signin-form input,
#signin-verify input,
.otp-show {
  border-color: var(--cm-border, #365278);
  background: var(--cm-deep, #051226);
  color: var(--cm-white, #fff);
  caret-color: var(--cm-orange, #ff793c);
}

#app input::placeholder {
  color: var(--cm-muted, #b8c7dd);
  opacity: .85;
}

#board-list .board-rank,
#board-list .board-score {
  color: var(--cm-orange, #ff793c);
}

/* Readouts and dock retain their original dimensions and safe-area anchors. */
#level,
#best,
#instruments .instrument-label,
#fire #ammo,
#field #field-ammo {
  color: var(--cm-orange, #ff793c);
}

#instruments {
  color: var(--cm-white, #fff);
  text-shadow: 0 1px 2px #051226, 0 0 4px #051226;
}

#speed-dial {
  border-color: var(--cm-blue, #113e92);
  background: var(--cm-deep, #051226);
  box-shadow: inset 0 0 0 1px var(--cm-border, #365278);
}

#speed-dial .speed-track,
#speed-dial .speed-ticks {
  stroke: var(--cm-muted, #b8c7dd);
}

#speed-dial .speed-unit {
  color: var(--cm-muted, #b8c7dd);
}

/* The cyan speed arc / engine bars, hull mint / amber / coral and hazard
   colors retain their gameplay meaning.
   The original Fire / Shield icons, submarine and wordmark are unchanged. */
#field.is-on {
  box-shadow: 0 0 12px rgba(255, 121, 60, .42);
}

#app :is(#mute, #settings-btn) {
  color: var(--cm-orange, #ff793c);
}

#app :is(#mute, #settings-btn)::before {
  border-color: var(--cm-border, #365278);
  background: var(--cm-navy, #071a35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

#app #mute.is-off {
  color: var(--cm-muted, #b8c7dd);
}

#app #mute.is-off::after {
  background: var(--cm-orange, #ff793c);
  box-shadow: 0 0 0 1px var(--cm-navy, #071a35);
}

#dev-toggle,
#dev button,
#dev button.is-on {
  border-color: var(--cm-border, #365278);
  background: var(--cm-navy, #071a35);
  color: var(--cm-white, #fff);
}

#dev button.is-on {
  border-color: var(--cm-orange, #ff793c);
  color: var(--cm-orange, #ff793c);
}

/* Ad artwork stays intact; only the local fallback and support UI are themed. */
#promo-rail,
.promo-frame {
  background: var(--cm-deep, #051226);
}

.promo-house {
  border-color: var(--cm-border, #365278);
  color: var(--cm-white, #fff);
}

.promo-copy small,
#support-notice strong {
  color: var(--cm-orange, #ff793c);
}

.promo-cta,
#support-help {
  border-color: var(--cm-orange, #ff793c);
  background: var(--cm-orange, #ff793c);
  color: var(--cm-navy, #071a35);
  text-shadow: none;
}

#support-notice {
  background: linear-gradient(110deg, #071a35, #113e92);
  color: var(--cm-white, #fff);
}

#app :is(.settings-card, .board-card, #board-list) {
  scrollbar-color: var(--cm-orange, #ff793c) var(--cm-deep, #051226);
}

#app :is(.settings-card, .board-card, #board-list)::-webkit-scrollbar-track {
  background: var(--cm-deep, #051226);
}

#app :is(.settings-card, .board-card, #board-list)::-webkit-scrollbar-thumb {
  border-color: var(--cm-deep, #051226);
  background: var(--cm-orange, #ff793c);
}

#app :is(.settings-card, .board-card, #board-list)::-webkit-scrollbar-thumb:hover {
  background: var(--cm-paper, #f7f6f2);
}

#app .vol-row input[type="range"] {
  accent-color: var(--cm-orange, #ff793c);
}

#app :is(#title, #over, #local-top, #settings, #board, #join, #signin, #leave) button:focus-visible,
#app :is(#mute, #settings-btn, #fire, #field, #support-help):focus-visible,
#app a:focus-visible,
#app input:focus-visible {
  outline: 2px solid var(--cm-orange, #ff793c);
  outline-offset: 3px;
}

@media (hover: hover) {
  #app :is(#title, #over, #local-top, #settings, #board, #join, #signin, #leave) button:not(:disabled):hover {
    border-color: var(--cm-orange, #ff793c);
    background-color: var(--cm-blue, #113e92);
    color: var(--cm-white, #fff);
  }

  #app button:is(#dive, #retry, #settings-close, #join-submit, #otp-send):not(:disabled):hover,
  #app :is(#join-verify, #signin-verify, #board-search) button[type="submit"]:not(:disabled):hover {
    border-color: var(--cm-paper, #f7f6f2);
    background: var(--cm-orange, #ff793c);
    color: var(--cm-navy, #071a35);
  }

  #app :is(#mute, #settings-btn):hover::before {
    border-color: var(--cm-orange, #ff793c);
    background: var(--cm-blue, #113e92);
  }

  #app :is(#settings, #leave) :is(#settings-reset-local, #leave-remove):hover {
    border-color: #ffb9b1;
    background: #4c2841;
    color: #ffb9b1;
  }
}