:root {
  --abyss: #061019;
  --sea: #0a1c2c;
  --sea-light: #10293f;
  --grid-line: #1c3d57;
  --phosphor: #64e6c4;
  --phosphor-dim: #2e7a68;
  --steel: #9db4c4;
  --paper: #e8f1ef;
  --alert: #ff5f5f;
  --alert-deep: #93261f;
  --amber: #ffc46b;
  --panel: rgba(10, 28, 44, 0.92);
  --panel-edge: #234b66;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background: var(--abyss);
}

body {
  color: var(--paper);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  height: 100svh;
}

#ambient-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

button {
  font: inherit;
  color: inherit;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

#shell {
  position: relative;
  width: 100%;
  height: 100svh;
  margin: 0 auto;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#sea-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140% 90% at 50% 0%, #0d2438 0%, var(--abyss) 62%),
    var(--abyss);
  z-index: 0;
}

#sea-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.14) 4px
  );
  pointer-events: none;
}

#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.75);
  z-index: 40;
}

[hidden] { display: none !important; }

.screen {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px calc(env(safe-area-inset-bottom, 0px) + 14px);
  min-height: 0;
  overflow: hidden;
  animation: screen-in 0.24s ease;
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
}

/* ------------------------------------------------- menu */

.brand { text-align: center; margin: 4vh 0 12px; }

.brand-kicker {
  letter-spacing: 0.35em;
  font-size: 11px;
  color: var(--phosphor-dim);
}

.brand-title {
  margin: 6px 0 2px;
  font-size: clamp(44px, 13vw, 64px);
  letter-spacing: 0.04em;
  background: linear-gradient(178deg, #f2fbf8 18%, #b9d2cd 46%, #7fa39e 52%, #d6e9e4 58%, #94b5af 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(100, 230, 196, 0.3)) drop-shadow(0 3px 0 #06222e);
  font-family: "Arial Black", Arial, sans-serif;
  line-height: 0.95;
}

.brand-title i {
  font-style: normal;
  background: linear-gradient(178deg, #b6ffe9 15%, var(--phosphor) 55%, #2f9e82 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-sub {
  margin: 4px 0 0;
  letter-spacing: 0.42em;
  font-size: 11px;
  color: var(--steel);
}

.brand-sub::after {
  content: "";
  display: block;
  height: 1px;
  margin: 10px auto 0;
  width: min(72%, 300px);
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  transform: scaleX(0);
  animation: rule-in 0.7s 0.25s ease-out forwards;
}

@keyframes rule-in { to { transform: scaleX(1); } }

.rank-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--panel-edge);
  background: var(--panel);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.rank-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--phosphor);
  background:
    radial-gradient(circle at 50% 42%, rgba(100, 230, 196, 0.5), transparent 62%),
    var(--sea-light);
  box-shadow: 0 0 14px rgba(100, 230, 196, 0.35);
  position: relative;
  flex: none;
}

.rank-badge[data-stars]::after {
  content: attr(data-stars);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--paper);
}

.rank-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rank-copy strong { letter-spacing: 0.2em; font-size: 15px; color: var(--phosphor); }
.rank-copy span { font-size: 11px; letter-spacing: 0.08em; color: var(--steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.menu-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
}

.menu-btn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--panel-edge);
  background: linear-gradient(180deg, #132f47, var(--sea));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.menu-stack .menu-btn {
  animation: stack-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.menu-stack .menu-btn:nth-child(1) { animation-delay: 0.05s; }
.menu-stack .menu-btn:nth-child(2) { animation-delay: 0.11s; }
.menu-stack .menu-btn:nth-child(3) { animation-delay: 0.17s; }
.menu-stack .menu-btn:nth-child(4) { animation-delay: 0.23s; }
.menu-stack .menu-btn:nth-child(5) { animation-delay: 0.29s; }

@keyframes stack-in {
  from { opacity: 0; transform: translateY(12px); }
}

.menu-btn strong { letter-spacing: 0.16em; font-size: 16px; }
.menu-btn span { font-size: 11px; letter-spacing: 0.12em; color: var(--steel); }

.menu-btn:active { transform: translateY(1px) scale(0.995); }
.menu-btn:hover, .menu-btn:focus-visible {
  border-color: var(--phosphor);
  box-shadow: 0 0 16px rgba(100, 230, 196, 0.22);
  outline: none;
}

.menu-btn-minor { opacity: 0.85; padding: 10px 16px; }

.menu-btn-hero {
  border-color: var(--phosphor);
  background: linear-gradient(180deg, #17614f, #0d3a36);
  box-shadow: 0 0 20px rgba(100, 230, 196, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.menu-btn-hero strong { color: #d8fff4; }
#btn-resume { border-color: var(--amber); }
#btn-resume strong { color: var(--amber); }

.menu-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.foot-link {
  color: var(--steel);
  text-decoration: none;
  letter-spacing: 0.18em;
  font-size: 12px;
  padding: 10px 8px;
}

.foot-btn {
  border: 1px solid var(--panel-edge);
  background: var(--panel);
  color: var(--steel);
  border-radius: 8px;
  letter-spacing: 0.14em;
  font-size: 12px;
  padding: 10px 14px;
  cursor: pointer;
}

.foot-btn:hover, .foot-btn:focus-visible { border-color: var(--phosphor); color: var(--paper); outline: none; }
.foot-btn.danger { border-color: var(--alert-deep); color: var(--alert); }
.foot-btn.danger:hover { border-color: var(--alert); }

/* ------------------------------------------------- sub-screens */

.screen-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.screen-head h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.24em;
  color: var(--paper);
}

.back-btn {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 9px;
  border: 1px solid var(--panel-edge);
  background: var(--panel);
  color: var(--phosphor);
  font-size: 16px;
  cursor: pointer;
}

.screen-note {
  margin-top: auto;
  text-align: center;
  color: var(--phosphor-dim);
  letter-spacing: 0.18em;
  font-size: 11px;
}

.tier-stack { display: flex; flex-direction: column; gap: 10px; }

.tier-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--panel-edge);
  background: linear-gradient(180deg, var(--sea-light), var(--sea));
  cursor: pointer;
}

.tier-btn:hover:not(:disabled), .tier-btn:focus-visible:not(:disabled) {
  border-color: var(--phosphor);
  box-shadow: 0 0 16px rgba(100, 230, 196, 0.22);
  outline: none;
}

.tier-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.tier-stars { font-size: 18px; color: var(--amber); flex: none; width: 64px; letter-spacing: 0.1em; }
.tier-copy { display: flex; flex-direction: column; gap: 3px; }
.tier-copy strong { letter-spacing: 0.2em; font-size: 16px; }
.tier-copy span { font-size: 11px; letter-spacing: 0.1em; color: var(--steel); }
.tier-beaten { color: var(--phosphor); font-size: 11px; letter-spacing: 0.14em; margin-left: auto; }

/* ------------------------------------------------- online lobby */

.online-panel { display: flex; flex-direction: column; gap: 16px; }

.join-block { display: flex; flex-direction: column; gap: 8px; }
.join-block label { letter-spacing: 0.2em; font-size: 12px; color: var(--steel); }
.join-row { display: flex; gap: 8px; }

#join-code {
  flex: 1;
  min-width: 0;
  background: var(--sea);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  color: var(--phosphor);
  font-family: inherit;
  font-size: 26px;
  letter-spacing: 0.45em;
  text-align: center;
  text-transform: uppercase;
  padding: 12px 8px 12px 14px;
  outline: none;
}

#join-code:focus { border-color: var(--phosphor); }

.join-go {
  border: 1px solid var(--phosphor-dim);
  background: linear-gradient(180deg, #14574a, #0c3a32);
  color: var(--paper);
  letter-spacing: 0.2em;
  border-radius: 10px;
  padding: 0 22px;
  cursor: pointer;
}

.online-note { color: var(--phosphor-dim); font-size: 11px; letter-spacing: 0.12em; text-align: center; }

/* ------------------------------------------------- world ranks */

.ranks-note {
  margin: 0 0 10px;
  color: var(--phosphor-dim);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-align: center;
}

.ranks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.ranks-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--panel-edge);
  border-radius: 9px;
  background: linear-gradient(180deg, var(--sea-light), var(--sea));
}

.ranks-list li.is-you {
  border-color: var(--phosphor);
  box-shadow: 0 0 14px rgba(100, 230, 196, 0.2);
}

.ranks-list .rank-no {
  width: 30px;
  flex: none;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 14px;
  color: var(--amber);
}

.ranks-list .rank-name {
  flex: 1;
  min-width: 0;
  letter-spacing: 0.12em;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranks-list .rank-record {
  flex: none;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--phosphor);
}

.ranks-status {
  margin: 10px 0 0;
  text-align: center;
  color: var(--steel);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.ranks-you {
  margin-top: auto;
  padding-top: 12px;
  text-align: center;
  color: var(--steel);
  font-size: 11px;
  letter-spacing: 0.12em;
}

/* ------------------------------------------------- open room board */

.room-board {
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  background: rgba(8, 22, 34, 0.72);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.room-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--panel-edge);
  letter-spacing: 0.2em;
  font-size: 10px;
  color: var(--phosphor-dim);
}

.room-count { color: var(--steel); letter-spacing: 0.12em; }

.room-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  max-height: 34vh;
  -webkit-overflow-scrolling: touch;
}

.room-list li { display: block; }

.room-join {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--panel-edge);
  background: linear-gradient(180deg, var(--sea-light), var(--sea));
  cursor: pointer;
}

.room-join:hover, .room-join:focus-visible {
  border-color: var(--phosphor);
  box-shadow: 0 0 14px rgba(100, 230, 196, 0.2);
  outline: none;
}

.room-join .room-tag {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 17px;
  letter-spacing: 0.18em;
  color: var(--phosphor);
}

.room-join .room-who {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--steel);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-join .room-go {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--amber);
}

.room-empty {
  padding: 14px 12px;
  text-align: center;
  color: var(--phosphor-dim);
  font-size: 11px;
  letter-spacing: 0.14em;
}

#online-wait { align-items: center; text-align: center; margin-top: 4vh; }
.wait-label { letter-spacing: 0.3em; color: var(--steel); font-size: 12px; margin: 0; }

.room-code {
  font-size: clamp(48px, 16vw, 66px);
  letter-spacing: 0.28em;
  color: var(--phosphor);
  text-shadow: 0 0 24px rgba(100, 230, 196, 0.45);
  padding-left: 0.28em; /* optically recenter tracked text */
  font-family: "Arial Black", Arial, sans-serif;
}

.wait-status { color: var(--steel); letter-spacing: 0.14em; font-size: 12px; min-height: 1.2em; }

.sonar-spin {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 1px solid var(--grid-line);
  position: relative;
  overflow: hidden;
  margin: 8px auto;
}

.sonar-spin::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, rgba(100, 230, 196, 0.55), transparent 24%);
  animation: sweep 1.8s linear infinite;
}

@keyframes sweep { to { transform: rotate(360deg); } }

/* ------------------------------------------------- manual */

.manual-scroll {
  overflow-y: auto;
  min-height: 0;
  padding-right: 6px;
  -webkit-overflow-scrolling: touch;
}

.manual-scroll h3 { color: var(--phosphor); letter-spacing: 0.2em; font-size: 13px; margin: 18px 0 6px; }
.manual-scroll h3:first-child { margin-top: 0; }
.manual-scroll p { margin: 0; color: var(--steel); font-size: 14px; line-height: 1.55; }

/* ------------------------------------------------- placement + battle */

.battle-head { text-align: center; margin-bottom: 8px; flex: none; position: relative; }

.head-corner-btn {
  position: absolute;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  border: 1px solid var(--panel-edge);
  background: var(--panel);
  color: var(--steel);
  font-size: 16px;
  cursor: pointer;
  z-index: 5;
}

.head-corner-btn:hover, .head-corner-btn:focus-visible { border-color: var(--phosphor); color: var(--paper); outline: none; }
.withdraw-btn { left: 0; color: var(--alert); opacity: 0.8; }
.withdraw-btn:hover { border-color: var(--alert); }
.mute-btn { right: 0; }
.mute-btn.is-muted { color: var(--alert); }
.battle-kicker { letter-spacing: 0.3em; font-size: 10px; color: var(--phosphor-dim); }
.battle-head h2 {
  margin: 2px 0 0;
  font-size: 20px;
  letter-spacing: 0.18em;
  min-height: 1.15em;
}

#turn-banner.enemy { color: var(--alert); }
#turn-banner.mine { color: var(--phosphor); }

.board-holder {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.board-holder canvas {
  display: block;
  touch-action: none;
  border-radius: 10px;
  border: 1px solid #244a66;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(160, 220, 240, 0.08);
}

/* battle entrance: boards surface, banner drops in */
#screen-battle .board-block {
  animation: board-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

#screen-battle .own-block { animation-delay: 0.12s; }

@keyframes board-in {
  from { opacity: 0; transform: translateY(14px); }
}

#screen-battle .battle-head h2 {
  animation: banner-in 0.3s 0.2s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes banner-in {
  from { opacity: 0; transform: translateY(-8px); }
}

#screen-place .board-holder { flex: none; }

.fleet-tray {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin: 10px 0 4px;
  flex: none;
}

.tray-chip {
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  background: var(--sea);
  color: var(--steel);
  font-size: 9px;
  letter-spacing: 0.06em;
  padding: 6px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
  max-width: 86px;
  white-space: nowrap;
}

.tray-chip .pips { display: flex; gap: 2px; }
.tray-chip .pips i {
  width: 7px;
  height: 7px;
  background: var(--steel);
  border-radius: 2px;
}

.tray-chip.is-selected { border-color: var(--amber); color: var(--amber); }
.tray-chip.is-selected .pips i { background: var(--amber); }
.tray-chip.is-placed { border-color: var(--phosphor-dim); color: var(--phosphor); }
.tray-chip.is-placed .pips i { background: var(--phosphor-dim); }

.place-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: stretch;
  margin-top: 8px;
  flex: none;
}

.place-hint {
  margin: 8px 0 0;
  text-align: center;
  color: var(--phosphor-dim);
  font-size: 10px;
  letter-spacing: 0.22em;
}

.invite-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.cta-btn {
  border: 1px solid var(--phosphor);
  background: linear-gradient(180deg, #17614f, #0d423a);
  color: var(--paper);
  border-radius: 10px;
  letter-spacing: 0.18em;
  font-size: 15px;
  font-weight: bold;
  padding: 12px 18px;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(100, 230, 196, 0.25);
  white-space: nowrap;
}

.cta-btn:disabled {
  opacity: 0.4;
  box-shadow: none;
  border-color: var(--panel-edge);
  cursor: not-allowed;
}

.cta-btn:active:not(:disabled) { transform: translateY(1px); }

.abort-link {
  margin-top: auto;
  align-self: center;
  background: none;
  border: none;
  color: var(--alert);
  opacity: 0.75;
  letter-spacing: 0.18em;
  font-size: 11px;
  padding: 12px;
  cursor: pointer;
}

.handoff-core {
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.handoff-core h2 { margin: 0; letter-spacing: 0.16em; font-size: 26px; }
.handoff-core p { margin: 0; color: var(--steel); letter-spacing: 0.1em; }

.battle-boards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  min-height: 0;
  flex: 1;
  justify-content: center;
}

.board-block { display: flex; flex-direction: column; gap: 4px; align-items: center; width: 100%; }
.board-label { letter-spacing: 0.26em; font-size: 10px; color: var(--steel); }

.battle-console {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
}

.battle-feed {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--steel);
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 1.4;
  min-height: 2.8em;
  display: flex;
  align-items: center;
}

.fire-btn {
  min-width: 118px;
  text-align: center;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fire-btn.firing { transform: scale(0.93); transition-duration: 0.09s; }
.fire-btn.armed {
  border-color: var(--alert);
  background: linear-gradient(180deg, #7c1f1c, #4d100f);
  box-shadow: 0 0 18px rgba(255, 95, 95, 0.4);
  animation: fire-pulse 0.9s ease-in-out infinite;
}

@keyframes fire-pulse {
  50% { box-shadow: 0 0 26px rgba(255, 95, 95, 0.65); }
}

/* ------------------------------------------------- signal chat */

/* The live feed is always on screen during an online duel so you can follow
   the conversation without opening anything. It never takes pointer input —
   it must not be able to swallow a tap meant for the board or FIRE. */
.chat-feed {
  position: absolute;
  z-index: 18;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* The lower board is small and centred, which leaves a margin either side.
     The feed lives in that left margin — it takes no space from either board,
     so the enemy waters above still run the full width of the screen. The
     mask fades each line out as it rises rather than hard-clipping it. */
  left: 8px;
  right: auto;
  width: min(84px, calc((100% - 240px) / 2 - 12px));
  top: auto;
  height: 30%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
  max-height: none;
  -webkit-mask-image: linear-gradient(to top, #000 0 58%, rgba(0, 0, 0, 0.35) 78%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0 58%, rgba(0, 0, 0, 0.35) 78%, transparent 100%);
  overflow: hidden;
  justify-content: flex-end;
}

.chat-feed:empty { display: none; }

.chat-feed .feed-line {
  font-size: 10.5px;
  white-space: normal;
  overflow-wrap: anywhere;
  letter-spacing: 0.04em;
  line-height: 1.35;
  padding: 4px 8px;
  border-radius: 7px;
  border: 1px solid var(--panel-edge);
  background: rgba(6, 18, 28, 0.82);
  color: var(--paper);
  overflow: hidden;
  align-self: flex-start;
  max-width: 100%;
  animation: feed-in 0.22s ease;
}

.chat-feed .feed-line.mine {
  align-self: flex-start;
  border-color: var(--phosphor-dim);
  background: rgba(8, 40, 34, 0.86);
  color: var(--phosphor);
}

.chat-feed .feed-line.theirs {
  align-self: flex-start;
  border-color: #7a5a22;
  background: rgba(46, 32, 8, 0.86);
  color: var(--amber);
}

.chat-feed .feed-line.system {
  align-self: flex-start;
  border-color: var(--panel-edge);
  color: var(--steel);
}

.chat-feed .feed-line.fading { opacity: 0.45; }

@keyframes feed-in {
  from { opacity: 0; transform: translateY(6px); }
}

.chat-toggle {
  position: absolute;
  right: 14px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--panel-edge);
  background: var(--panel);
  color: var(--steel);
  font-size: 18px;
  cursor: pointer;
  z-index: 22;
  display: grid;
  place-items: center;
}

.chat-toggle:hover, .chat-toggle:focus-visible {
  border-color: var(--phosphor);
  color: var(--paper);
  outline: none;
}

/* Amber ring plus the badge carry the "unread" state. The nudge plays a few
   times and stops — a control that jitters forever is tiring to sit next to
   and impossible to hit reliably. */
.chat-toggle.has-unread {
  border-color: var(--amber);
  color: var(--amber);
  box-shadow: 0 0 14px rgba(255, 196, 107, 0.35);
  animation: chat-nudge 0.85s ease-in-out 3;
}

@keyframes chat-nudge {
  50% { transform: translateY(-3px); }
}

.chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  border-radius: 999px;
  background: var(--alert);
  color: #fff;
  font-size: 11px;
  line-height: 19px;
  text-align: center;
  padding: 0 5px;
}

.chat-panel {
  position: absolute;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
  width: min(320px, calc(100% - 24px));
  max-height: min(60%, 380px);
  z-index: 23;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  background: rgba(6, 18, 28, 0.97);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  animation: chat-in 0.18s ease;
}

@keyframes chat-in {
  from { opacity: 0; transform: translateY(8px); }
}

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid var(--panel-edge);
  letter-spacing: 0.2em;
  font-size: 10px;
  color: var(--phosphor-dim);
}

.chat-close {
  background: none;
  border: none;
  color: var(--steel);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
}

.chat-log {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 64px;
  -webkit-overflow-scrolling: touch;
}

.chat-log li {
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  padding: 6px 9px;
  border-radius: 9px;
  max-width: 86%;
  word-break: break-word;
}

.chat-log li.mine {
  align-self: flex-end;
  background: rgba(23, 97, 79, 0.55);
  border: 1px solid var(--phosphor-dim);
  color: var(--paper);
}

.chat-log li.theirs {
  align-self: flex-start;
  background: rgba(20, 42, 60, 0.9);
  border: 1px solid var(--panel-edge);
  color: var(--paper);
}

.chat-log li.system {
  align-self: center;
  background: none;
  border: none;
  color: var(--phosphor-dim);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  padding: 2px;
}

.chat-quick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 12px 8px;
}

.chat-quick button {
  border: 1px solid var(--panel-edge);
  background: var(--sea);
  color: var(--steel);
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  padding: 6px 10px;
  cursor: pointer;
}

.chat-quick button:hover, .chat-quick button:focus-visible {
  border-color: var(--phosphor);
  color: var(--paper);
  outline: none;
}

.chat-form {
  display: flex;
  gap: 6px;
  padding: 9px 10px;
  border-top: 1px solid var(--panel-edge);
}

#chat-input {
  flex: 1;
  min-width: 0;
  background: var(--sea);
  border: 1px solid var(--panel-edge);
  border-radius: 9px;
  color: var(--paper);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 10px;
  outline: none;
}

#chat-input:focus { border-color: var(--phosphor); }

#chat-send {
  border: 1px solid var(--phosphor-dim);
  background: linear-gradient(180deg, #14574a, #0c3a32);
  color: var(--paper);
  border-radius: 9px;
  padding: 0 14px;
  font-size: 16px;
  cursor: pointer;
}

/* A landscape phone is short: dock the panel down the right side. It stops
   above the console so FIRE and the order feed stay reachable — you must be
   able to shoot without closing the chat first. */
@media (max-height: 520px) and (orientation: landscape) {
  /* The margin beside the boards is narrower than it looks, and a column
     there covers the columns you are aiming at. The strip beside the order
     feed is empty in every layout, so the signals live there. */
  .chat-feed {
    left: 10px;
    right: auto;
    top: auto;
    height: 62%;
    bottom: 56px;
    width: 176px;
    max-height: none;
  }

  .chat-panel {
    top: 8px;
    bottom: 62px;
    max-height: none;
    width: min(280px, 42%);
  }
  .chat-toggle { bottom: auto; top: 8px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-toggle.has-unread, .chat-panel { animation: none; }
}

.peer-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(4, 10, 16, 0.82);
  display: grid;
  place-items: center;
}

.peer-box {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--panel-edge);
  background: var(--panel);
  border-radius: 12px;
  padding: 22px 26px;
}

.peer-box p { margin: 0; letter-spacing: 0.14em; font-size: 13px; color: var(--steel); }

/* ------------------------------------------------- debrief */

#screen-debrief { justify-content: center; }

.debrief-brand { margin-top: 0; }

.medal-row:empty { display: none; }

.debrief-title {
  margin: 8px 0 2px;
  font-size: clamp(42px, 13vw, 58px);
  letter-spacing: 0.06em;
  font-family: "Arial Black", Arial, sans-serif;
}

.debrief-title.win { color: var(--phosphor); text-shadow: 0 0 26px rgba(100, 230, 196, 0.5); }
.debrief-title.loss { color: var(--alert); text-shadow: 0 0 26px rgba(255, 95, 95, 0.4); }

.debrief-title {
  animation: stamp-in 0.26s cubic-bezier(0.2, 1.6, 0.4, 1) backwards;
}

@keyframes stamp-in {
  from { opacity: 0; transform: scale(1.5); }
}

.debrief-stats {
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px 18px;
  width: min(100%, 340px);
}

.debrief-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--panel-edge);
  background: var(--panel);
  border-radius: 8px;
  padding: 8px 12px;
}

.debrief-stats dt { font-size: 10px; letter-spacing: 0.2em; color: var(--steel); }
.debrief-stats dd { margin: 0; font-size: 18px; color: var(--paper); letter-spacing: 0.06em; }

.medal-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

.medal-chip {
  border: 1px solid var(--amber);
  color: var(--amber);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 6px 12px;
  animation: medal-pop 0.5s ease backwards;
}

@keyframes medal-pop {
  from { transform: scale(0.6); opacity: 0; }
}

.debrief-rank {
  margin-top: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: medal-pop 0.6s 0.3s ease backwards;
}

.debrief-rank strong { color: var(--amber); letter-spacing: 0.3em; font-size: 22px; }

.debrief-actions { margin-top: 26px; padding-top: 0; flex: none; }

/* ------------------------------------------------- toast */

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  transform: translateX(-50%);
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  color: var(--paper);
  letter-spacing: 0.1em;
  font-size: 12px;
  border-radius: 999px;
  padding: 10px 18px;
  z-index: 50;
  white-space: nowrap;
}

/* ------------------------------------------------- desktop layout */

@media (min-width: 880px) and (min-aspect-ratio: 5/6) {
  /* Desktop boards fill the shell, so the signals sit in the console strip
     rather than over the water. */
  .chat-feed {
    left: 22px;
    right: auto;
    top: auto;
    height: 54%;
    bottom: 118px;
    width: 208px;
    max-height: none;
  }

  .chat-feed .feed-line { font-size: 12.5px; }

  #shell {
    max-width: 1080px;
    margin: 12px auto;
    height: calc(100svh - 24px);
    border: 1px solid var(--panel-edge);
    border-radius: 18px;
    box-shadow:
      0 0 60px rgba(0, 0, 0, 0.6),
      0 0 22px rgba(100, 230, 196, 0.07);
    overflow: hidden;
  }

  #sea-backdrop { border-radius: 18px; }

  .battle-boards {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 48px;
  }

  .board-block { width: auto; }
  .own-block { order: -1; }

  .battle-console {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
  }

  #screen-menu { justify-content: center; }
  .brand { margin-top: 0; }
  .menu-stack { width: min(100%, 460px); margin: 2px auto 0; }
  .rank-strip { width: min(100%, 460px); margin-left: auto; margin-right: auto; }
  .menu-foot { width: min(100%, 460px); margin-left: auto; margin-right: auto; }

  /* Sub-screens: keep the phone column but center it instead of stretching */
  #screen-tiers, #screen-online, #screen-howto { align-items: center; justify-content: center; }
  #screen-tiers > *, #screen-online > *, #screen-howto > * { width: min(100%, 560px); }
  #screen-tiers .screen-head, #screen-online .screen-head, #screen-howto .screen-head { flex: none; }
  .manual-scroll { max-height: 60vh; }
  .screen-note { margin-top: 22px; }

  #screen-place { align-items: center; justify-content: center; }
  #screen-place > * { width: min(100%, 640px); }
  #screen-place .board-holder { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sonar-spin::before, .fire-btn.armed, .menu-stack .menu-btn,
  #screen-battle .board-block, #screen-battle .battle-head h2,
  .debrief-title, .brand-sub::after, .medal-chip, .debrief-rank {
    animation: none;
  }
}

/* ------------------------------------------------- landscape phone/tablet
   A short, wide screen cannot stack a masthead, a rank strip and five
   buttons. Split the menu into two columns and put the boards side by
   side, so nothing is ever clipped off the top or bottom. */

@media (orientation: landscape) and (max-height: 620px) {
  #shell {
    max-width: none;
    margin: 0;
    height: 100svh;
    border: 0;
    border-radius: 0;
  }

  .screen {
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px calc(env(safe-area-inset-bottom, 0px) + 8px);
  }

  /* Menu: identity on the left, modes on the right. */
  #screen-menu {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    column-gap: 22px;
    row-gap: 10px;
  }

  .brand { grid-column: 1; grid-row: 1; margin: 0; }
  .brand-title { font-size: clamp(30px, 6.4vw, 46px); }
  .brand-sub { font-size: 9px; letter-spacing: 0.3em; }
  .brand-sub::after { margin-top: 6px; }
  .rank-strip { grid-column: 1; grid-row: 2; margin: 0; }
  .menu-stack { grid-column: 2; grid-row: 1 / -1; align-self: center; gap: 7px; }
  .menu-btn { padding: 9px 14px; }
  .menu-btn strong { font-size: 13px; }
  .menu-btn span { font-size: 9px; }
  .menu-foot { grid-column: 1; grid-row: 4; padding-top: 0; margin-top: 0; }

  /* Sub-screens keep their column but scroll rather than clip. */
  #screen-tiers .tier-stack,
  #screen-online .online-panel,
  .manual-scroll {
    overflow-y: auto;
    min-height: 0;
  }

  .screen-head { margin-bottom: 8px; }
  .screen-head h2 { font-size: 15px; }
  .back-btn { width: 36px; height: 36px; }
  .tier-btn { padding: 9px 14px; }
  .tier-stars { width: 48px; font-size: 15px; }
  .screen-note { margin-top: 8px; }

  .online-panel { gap: 9px; }
  .room-code { font-size: clamp(30px, 7vw, 46px); }
  .sonar-spin { width: 44px; height: 44px; margin: 2px auto; }
  #online-wait { margin-top: 0; }

  /* Battle: boards side by side, console along the bottom. */
  .battle-boards {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 26px;
  }

  .board-block { width: auto; }
  .own-block { order: -1; }
  .battle-head { margin-bottom: 4px; }
  .battle-head h2 { font-size: 15px; }
  .battle-kicker { font-size: 8px; }
  .head-corner-btn { width: 34px; height: 34px; font-size: 14px; }
  .battle-console { padding-top: 4px; }
  .battle-feed { font-size: 10px; min-height: 2em; }
  .fire-btn { min-width: 96px; font-size: 13px; padding: 10px 14px; }

  /* Placement: board on the left, fleet and actions on the right. */
  #screen-place {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    column-gap: 22px;
    row-gap: 6px;
    align-items: center;
  }

  #screen-place .battle-head { grid-column: 1 / -1; grid-row: 1; margin-bottom: 2px; }
  #place-board-holder { grid-column: 1; grid-row: 2 / span 3; align-self: center; }
  .fleet-tray { grid-column: 2; grid-row: 2; flex-wrap: wrap; align-self: center; margin: 0; }
  .place-actions { grid-column: 2; grid-row: 3; align-self: center; margin-top: 0; }
  .place-hint { grid-column: 2; grid-row: 4; align-self: start; margin: 0; }
  /* Park the exit in the header corner rather than over the board. */
  .abort-link {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 16px;
    grid-column: auto;
    grid-row: auto;
    margin: 0;
    padding: 6px 8px;
    z-index: 3;
  }

  /* Debrief stays centred and compact. */
  .debrief-title { font-size: clamp(30px, 6vw, 44px); }
  .debrief-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 640px); gap: 8px; }
  .debrief-stats dd { font-size: 15px; }
  .debrief-actions { margin-top: 14px; }
  .handoff-core h2 { font-size: 20px; }
}

/* A landscape phone satisfies the desktop width and aspect queries above, so
   this has to come last: on a short screen the boards sit close to the
   console and the signals need the narrow strip beside the order line. */
@media (orientation: landscape) and (max-height: 560px) {
  .chat-feed {
    left: 10px;
    right: auto;
    top: auto;
    height: 62%;
    bottom: 56px;
    width: 176px;
    max-height: none;
  }

  .chat-feed .feed-line { font-size: 10.5px; padding: 3px 7px; }
}


@media (max-height: 560px) and (orientation: landscape) {
}

@media (min-width: 880px) and (min-aspect-ratio: 5/6) and (min-height: 561px) {
}

/* Side-by-side layouts put your fleet hard left, so the feed needs its own
   width there. Portrait needs none: the lower board is small and centred,
   which already leaves the margin the feed sits in. Mirrors the gutter in
   layout() in game.js. */
@media (max-height: 560px) and (orientation: landscape) {
  body.has-side-chat .battle-boards { padding-left: 190px; }
}

@media (min-width: 880px) and (min-aspect-ratio: 5/6) and (min-height: 561px) {
  body.has-side-chat .battle-boards { padding-left: 226px; }
}