/* Mortar Buddies. Glossy cartoon panels, blue and gold, and a layout that
   reflows between a phone held upright and a laptop. */

:root {
  --gold-1: #fff3b8;
  --gold-2: #f7c93f;
  --gold-3: #c98a08;
  --blue-1: #4f9bf0;
  --blue-2: #1f5cba;
  --blue-3: #0d2f6b;
  --ink: #0a1730;
  --rim: #ffd23f;
  --panel-r: 18px;
  --shadow: 0 6px 0 rgba(4, 12, 30, 0.45), 0 12px 22px rgba(4, 12, 30, 0.42);
  --inset: inset 0 3px 0 rgba(255, 255, 255, 0.5),
           inset 0 -7px 14px rgba(0, 0, 0, 0.34);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #0b1a36;
  font-family: var(--font);
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* ---------------------------------------------------------------- panels */

.panel {
  background:
    linear-gradient(180deg, var(--blue-1) 0%, var(--blue-2) 46%, var(--blue-3) 100%);
  border: 3px solid var(--rim);
  border-radius: var(--panel-r);
  box-shadow: var(--shadow), var(--inset);
}

.btn {
  font-family: var(--font);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.3px;
  color: #22160a;
  padding: 12px 22px;
  border-radius: 14px;
  border: 3px solid rgba(10, 20, 45, 0.85);
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  box-shadow: 0 5px 0 rgba(6, 14, 32, 0.55), inset 0 3px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.08s ease, filter 0.12s ease;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 52%, var(--gold-3));
}
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(6, 14, 32, 0.55), inset 0 3px 0 rgba(255, 255, 255, 0.6); }
.btn-blue {
  color: #f2f8ff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  background: linear-gradient(180deg, #6fb2ff, #2a72d6 52%, #123f8c);
}
.btn-ghost {
  color: #eaf3ff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.06));
  border-color: rgba(255, 255, 255, 0.5);
}
.btn-ghost:active { transform: translateY(3px); }
.btn-big { font-size: 22px; padding: 15px 40px; }
.btn-mini { font-size: 14px; padding: 8px 16px; }

/* ------------------------------------------------------------------- HUD */

.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.hud.on { opacity: 1; }
.hud button, .hud .turnorder { pointer-events: auto; }

.hud-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: 8px 10px;
  gap: 8px;
}
.windwrap {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 6px 10px rgba(4, 12, 30, 0.5));
}
.windring { width: 116px; height: 116px; display: block; }
.wr-val {
  font-family: var(--font);
  font-size: 36px;
  font-weight: 900;
  fill: #ffffff;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #0a1f45;
  stroke-width: 6px;
}
.windlabel {
  margin-top: -6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #ffe98a;
  text-shadow: 0 2px 0 rgba(6, 14, 32, 0.9);
}
#wrNeedle { transition: transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); transform-origin: 66px 66px; }

.topbtns { position: absolute; top: 8px; right: 10px; display: flex; gap: 8px; }
.iconbtn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 3px solid rgba(10, 20, 45, 0.8);
  color: #12233f;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3));
  box-shadow: 0 4px 0 rgba(6, 14, 32, 0.5), inset 0 3px 0 rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.iconbtn:active { transform: translateY(2px); }
.iconbtn.off #sndWave { display: none; }
.iconbtn:not(.off) #sndX { display: none; }

/* ------------------------------------------------------------ turn order */

.turnorder {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
  left: 10px;
  top: 10px;
  width: 222px;
}

.tocard {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 14px;
  border: 3px solid rgba(10, 20, 45, 0.75);
  background: linear-gradient(180deg, rgba(58, 116, 200, 0.92), rgba(12, 42, 92, 0.94));
  box-shadow: 0 4px 0 rgba(4, 12, 30, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.35);
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.tocard.active {
  border-color: var(--rim);
  background: linear-gradient(180deg, #5ba0f2, #1b4f9e 60%, #123a78);
  box-shadow: 0 4px 0 rgba(4, 12, 30, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 0 22px rgba(255, 210, 63, 0.55);
  transform: translateX(6px);
}
.tocard.next { border-color: #7dffb0; }
.tocard.dead { filter: grayscale(0.85) brightness(0.62); }
.tocard.right { flex-direction: row-reverse; text-align: right; }

.toface {
  width: 46px; height: 46px;
  border-radius: 12px;
  border: 3px solid rgba(10, 20, 45, 0.75);
  background: linear-gradient(180deg, #9fd0ff, #3f79c8);
  object-fit: cover;
  display: block;
  flex: none;
}
.toinfo { flex: 1; min-width: 0; }
.toname {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 0 rgba(4, 12, 30, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tohp {
  height: 10px;
  margin: 3px 0 3px;
  border-radius: 5px;
  background: rgba(4, 12, 30, 0.65);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.tohp i {
  display: block; height: 100%;
  border-radius: 4px;
  background: linear-gradient(180deg, #86ffab, #23b04a);
  transition: width 0.35s cubic-bezier(0.3, 1.2, 0.5, 1);
}
.tohp.mid i { background: linear-gradient(180deg, #ffe07a, #e0a018); }
.tohp.low i { background: linear-gradient(180deg, #ff9c8c, #d92b1c); }

.todelay {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  color: #cfe3ff;
}
.todelay b {
  font-size: 15px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 rgba(4, 12, 30, 0.8);
}
.todelay .up { color: #ffd166; font-size: 10px; }
.tocard.active .todelay .up { color: #ffe98a; }

.tobadge {
  position: absolute;
  top: -9px; right: 8px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.4px;
  padding: 2px 7px;
  border-radius: 8px;
  background: linear-gradient(180deg, #b6ffcf, #23b04a);
  color: #06331a;
  border: 2px solid rgba(6, 30, 16, 0.7);
}
.tocard.active .tobadge {
  background: linear-gradient(180deg, #fff3b8, #f2b31c);
  color: #3a2604;
  border-color: rgba(58, 38, 4, 0.7);
}
.tocard.right .tobadge { right: auto; left: 8px; }

/* ---------------------------------------------------------------- bottom */

.hud-bottom {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  align-items: stretch;
}
.gauges { display: flex; gap: 10px; }

.chip {
  border-radius: 16px;
  border: 3px solid var(--rim);
  padding: 7px 12px 9px;
  background: linear-gradient(180deg, var(--blue-1), var(--blue-2) 48%, var(--blue-3));
  box-shadow: var(--shadow), var(--inset);
  min-width: 118px;
}
.chip-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffe98a;
  text-shadow: 0 2px 0 rgba(4, 12, 30, 0.85);
  display: flex;
  align-items: center;
  gap: 6px;
}
.chip-hint {
  font-size: 9px;
  letter-spacing: 0.4px;
  color: #bcd8ff;
  font-weight: 700;
  text-transform: none;
}
.chip-value {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 0 rgba(4, 12, 30, 0.7);
}
.chip-sub {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #9ff0bd;
}
.chip-sub.out { color: #ffc08a; }

.angle-chip { position: relative; padding-right: 46px; }
.nudge {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nud {
  width: 32px; height: 26px;
  border-radius: 8px;
  border: 2px solid rgba(10, 20, 45, 0.8);
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  color: #2a1c05;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  padding: 0;
}
.nud:active { transform: translateY(1px); }

.power-chip { min-width: 168px; }
.pbar {
  position: relative;
  height: 15px;
  margin-top: 4px;
  border-radius: 8px;
  background: rgba(4, 12, 30, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.pbar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 6px;
  background: linear-gradient(180deg, #fff6cf, #ffb020 55%, #e2560c);
  transition: width 0.05s linear;
}
.pbar.charging i { background: linear-gradient(180deg, #ffffff, #ffd23f 45%, #ff6a00); }
.pbar.full i { background: linear-gradient(180deg, #ffffff, #7dffb0 45%, #12a94a); }
/* The over-hold reset. The bar has just fallen back to zero, so the chip
   flashes red and rings outward: the drop has to be an event the eye catches,
   because the mistake it prevents is letting go and firing at nothing. */
.pbar.reset {
  border-color: #ff6a5a;
  animation: pbarreset 0.6s ease-out;
}
.pbar.reset i { background: linear-gradient(180deg, #ffffff, #ff9a7a 45%, #c1180a); }
@keyframes pbarreset {
  0% { box-shadow: 0 0 0 0 rgba(255, 96, 64, 0.95); }
  100% { box-shadow: 0 0 0 15px rgba(255, 96, 64, 0); }
}
.power-chip .chip-value.reset { color: #ff7a5c; }
.pbar b {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 3px;
  left: 0;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 2px;
  display: none;
}

/* ---- walking ---------------------------------------------------------- */

/* Two hold buttons and the meter for what is left of this turn's allowance.
   The number is there because the allowance is the whole reason moving is a
   decision, and a bar on its own does not say how much of it is left. */
.walkrow {
  display: flex;
  gap: 8px;
  align-items: stretch;
  border-radius: 16px;
  border: 3px solid var(--rim);
  padding: 5px 8px 6px;
  background: linear-gradient(180deg, var(--blue-1), var(--blue-2) 48%, var(--blue-3));
  box-shadow: var(--shadow), var(--inset);
  opacity: 0.45;
  transition: opacity 0.18s ease;
}
.walkrow.live { opacity: 1; }

.walkbtn {
  width: 46px;
  min-height: 42px;
  border-radius: 12px;
  border: 2px solid rgba(10, 20, 45, 0.8);
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  color: #2a1c05;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.walkbtn:disabled { cursor: default; filter: grayscale(0.6) brightness(0.8); }
.walkbtn:not(:disabled):active { transform: translateY(1px); }
.walkbtn svg { display: block; }

.walkmeter { flex: 1; min-width: 104px; }
.walklabel {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffe98a;
  text-shadow: 0 2px 0 rgba(4, 12, 30, 0.85);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.walklabel b {
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.walkbar {
  height: 12px;
  margin-top: 3px;
  border-width: 2px;
}
.walkbar i {
  background: linear-gradient(180deg, #eafff2, #63e08a 55%, #12a94a);
}
.walkrow.spent .walkbar i { background: linear-gradient(180deg, #ffe3d0, #ff8a5c 55%, #c93a10); }
.walkrow.spent .walklabel b { color: #ffb99a; }
.walkrow.spent .walklabel span { color: #ff8a5c; }
/* A shake for the moment a held key asks for a step the turn cannot pay for.
   The meter already says SPENT; this is the part that reaches a thumb. */
.walkrow.denied { animation: walkdeny 0.52s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes walkdeny {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* ------------------------------------------------------------ shot picker */

.shots { display: flex; gap: 8px; }
.shotbtn {
  position: relative;
  width: 84px;
  border-radius: 16px;
  border: 3px solid rgba(10, 20, 45, 0.8);
  padding: 8px 6px 9px;
  cursor: pointer;
  overflow: hidden;
  color: #f2f8ff;
  background: linear-gradient(180deg, rgba(50, 104, 186, 0.95), rgba(10, 36, 82, 0.96));
  box-shadow: 0 5px 0 rgba(4, 12, 30, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.shotbtn .sname {
  font-size: 20px; font-weight: 900; line-height: 1;
  text-shadow: 0 2px 0 rgba(4, 12, 30, 0.8);
  position: relative;
}
.shotbtn .slabel {
  font-size: 9.5px; font-weight: 800; letter-spacing: 1px;
  color: #b9d6ff; position: relative; margin-top: 3px;
}
.shotbtn .sfill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0%;
  background: linear-gradient(180deg, rgba(196,107,255,0.85), rgba(120,40,200,0.9));
  transition: height 0.3s ease;
}
.shotbtn.selected {
  border-color: var(--rim);
  background: linear-gradient(180deg, #62a8f7, #1d55aa 55%, #12386f);
  box-shadow: 0 5px 0 rgba(4, 12, 30, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 210, 63, 0.5);
  transform: translateY(-3px);
}
.shotbtn.locked { opacity: 0.55; cursor: not-allowed; }
.shotbtn.locked .sname { color: #cbb6e6; }
.shotbtn.ready { animation: shotready 1.1s ease-in-out infinite; }
@keyframes shotready {
  0%, 100% { box-shadow: 0 5px 0 rgba(4,12,30,0.45), 0 0 12px rgba(196,107,255,0.6); }
  50% { box-shadow: 0 5px 0 rgba(4,12,30,0.45), 0 0 26px rgba(196,107,255,0.95); }
}
.shotbtn.ss .sname { color: #f0d4ff; }

/* --------------------------------------------------------------- banner */

.turnbanner {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%) scale(0.7);
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 4px 0 rgba(6, 14, 32, 0.8), 0 0 26px rgba(255, 210, 63, 0.9);
  opacity: 0;
  pointer-events: none;
  /* Long banners wrap instead of running off a phone screen; the short ones
     still sit on one line. */
  white-space: normal;
  max-width: 92vw;
  text-align: center;
  line-height: 1.12;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.turnbanner.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

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

.screen {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: radial-gradient(ellipse at 50% 30%, rgba(14, 40, 90, 0.62), rgba(4, 10, 26, 0.9));
  backdrop-filter: blur(3px);
  z-index: 20;
  overflow: auto;
}
.screen.on { display: flex; }

/* The title screen sits over the battlefield scenery rather than over a flat
   gradient, so the first thing anyone sees is the place they are about to
   play in. It stays dark enough at the edges for the title to carry. */
#screenMenu {
  background: radial-gradient(ellipse at 50% 34%,
    rgba(10, 28, 62, 0.26), rgba(4, 10, 26, 0.74));
  backdrop-filter: blur(1.5px);
}

.menu-inner { text-align: center; max-width: 560px; }
.logo {
  margin: 0 0 4px;
  font-size: clamp(42px, 11vw, 76px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -1px;
  display: flex;
  flex-direction: column;
  color: #fff;
  text-shadow: 0 5px 0 #123f8c, 0 9px 0 rgba(4, 12, 30, 0.55), 0 14px 26px rgba(0, 0, 0, 0.5);
}
.logo em {
  font-style: normal;
  background: linear-gradient(180deg, #fff3b8, var(--gold-2) 55%, var(--gold-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 5px 0 #123f8c) drop-shadow(0 9px 0 rgba(4, 12, 30, 0.5));
}
.tagline {
  margin: 10px 0 20px;
  font-size: 15px;
  font-weight: 700;
  color: #cfe3ff;
  text-shadow: 0 2px 0 rgba(4, 12, 30, 0.7);
}
.menu-btns { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.menu-btns .btn { width: min(320px, 78vw); }
.best {
  margin-top: 18px;
  font-size: 12.5px;
  font-weight: 700;
  color: #a9c8ef;
  min-height: 18px;
  text-shadow: 0 2px 0 rgba(4, 12, 30, 0.7);
}
.best b { color: #ffe98a; }

.setup-inner {
  width: min(880px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(38, 88, 168, 0.96), rgba(8, 26, 62, 0.97));
  border: 3px solid var(--rim);
  border-radius: var(--panel-r);
  box-shadow: var(--shadow), var(--inset);
  overflow: hidden;
}
.setup-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-bottom: 2px solid rgba(255, 210, 63, 0.45);
}
.setup-head h2 { margin: 0; font-size: 20px; font-weight: 900; text-shadow: 0 2px 0 rgba(4, 12, 30, 0.75); }
.setup-body {
  padding: 4px 14px 10px;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0 20px;
}
.setup-col { flex: 1; min-width: 0; }
.setup-foot { padding: 12px 14px; border-top: 2px solid rgba(255, 210, 63, 0.45); text-align: center; }

.field { margin: 12px 0; }
.field .hint {
  margin: 7px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #bcd8ff;
  letter-spacing: 0;
  text-transform: none;
}
.field h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffe98a;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(4, 12, 30, 0.8);
  display: flex; align-items: center; gap: 8px;
}

.optrow { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  padding: 9px 16px;
  border-radius: 12px;
  border: 3px solid rgba(10, 20, 45, 0.7);
  background: linear-gradient(180deg, rgba(90, 145, 220, 0.55), rgba(14, 44, 96, 0.7));
  color: #eaf3ff;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(4, 12, 30, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.25);
}
.opt.sel {
  border-color: var(--rim);
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3));
  color: #2a1c05;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.crewrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.crewcard {
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 14px;
  border: 3px solid rgba(10, 20, 45, 0.7);
  background: linear-gradient(180deg, rgba(90, 145, 220, 0.5), rgba(14, 44, 96, 0.72));
  padding: 6px 8px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(4, 12, 30, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.1s ease;
}
.crewcard .cmeta { min-width: 0; }
.crewcard.sel {
  border-color: var(--rim);
  background: linear-gradient(180deg, #63a9f8, #1d55aa 60%, #12386f);
  box-shadow: 0 4px 0 rgba(4, 12, 30, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 0 20px rgba(255, 210, 63, 0.5);
  transform: translateY(-2px);
}
.crewcard img {
  width: 52px;
  height: 52px;
  border-radius: 11px;
  border: 2px solid rgba(10, 20, 45, 0.6);
  background: linear-gradient(180deg, #a9d6ff, #4d84cf);
  display: block;
  flex: none;
  object-fit: cover;
}
.crewcard .cn {
  font-size: 14px; font-weight: 900; line-height: 1.1;
  text-shadow: 0 2px 0 rgba(4, 12, 30, 0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crewcard .ct { font-size: 10px; font-weight: 700; color: #bcd8ff; letter-spacing: 0.4px; }
.crewcard .cr { font-size: 10px; font-weight: 800; color: #cfe3ff; margin-top: 2px; }
.crewcard .cr.true { color: #9ff0bd; }

.how-inner {
  width: min(760px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 18px;
}
.how-inner h2 { margin: 0 0 12px; font-size: 24px; font-weight: 900; text-shadow: 0 3px 0 rgba(4, 12, 30, 0.75); }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 16px; }
.how-item {
  background: rgba(6, 20, 48, 0.5);
  border: 2px solid rgba(255, 210, 63, 0.35);
  border-radius: 12px;
  padding: 9px 11px;
}
.how-item b { display: block; font-size: 13px; color: #ffe98a; letter-spacing: 1px; margin-bottom: 3px; }
.how-item span { font-size: 13px; line-height: 1.4; color: #dbe9ff; }

.over-inner, .pause-inner {
  width: min(560px, 100%);
  padding: 20px;
  text-align: center;
}
.over-inner h2, .pause-inner h2 {
  margin: 0 0 6px; font-size: 34px; font-weight: 900;
  text-shadow: 0 4px 0 rgba(4, 12, 30, 0.6);
}
.over-sub { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: #cfe3ff; }
.over-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.ostat {
  background: rgba(6, 20, 48, 0.5);
  border: 2px solid rgba(255, 210, 63, 0.35);
  border-radius: 12px;
  padding: 8px 6px;
}
.ostat b { display: block; font-size: 21px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ostat span { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #ffe98a; }
.over-board { margin-bottom: 14px; font-size: 12.5px; color: #cfe3ff; }
.over-board table { width: 100%; border-collapse: collapse; }
.over-board td { padding: 3px 6px; font-weight: 700; }
.over-board tr.me td { color: #ffe98a; }
.over-board .bdh { font-size: 10px; letter-spacing: 2px; color: #ffe98a; font-weight: 900; }
.over-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* On a wide short window the setup screen gets two columns so nothing has to
   be scrolled for. */
@media (orientation: landscape) and (min-width: 620px) {
  .setup-body { flex-direction: row; }
  .setup-body .setup-col:first-child { flex: 0 0 38%; }
}

/* ------------------------------------------------------------ portrait */

@media (orientation: portrait) {
  .windring { width: 90px; height: 90px; }
  .wr-val { font-size: 44px; }
  .windlabel { font-size: 9px; letter-spacing: 2px; }
  .iconbtn { width: 40px; height: 40px; }
  .hud-top { padding: 6px 8px; }
  .topbtns { top: 6px; right: 8px; }

  /* Narrow, but not so narrow that the NAME has to go. Who fires next is the
     whole point of this list, and a face alone only answers that for someone
     who already knows the roster. The column gets 14 more pixels and keeps
     the name. */
  .turnorder {
    top: 14px;
    left: 8px;
    width: 88px;
    gap: 6px;
  }
  .tocard { flex-direction: column; gap: 2px; padding: 4px 5px 5px; border-radius: 12px; }
  .tocard.active { transform: translateX(3px); }
  .tocard.right { flex-direction: column; }
  .toface { width: 38px; height: 38px; }
  .toinfo { width: 100%; }
  .toname { display: block; font-size: 10px; letter-spacing: 0.2px; }
  .tohp { height: 7px; margin: 0 0 2px; }
  .todelay { font-size: 8px; justify-content: center; gap: 2px; letter-spacing: 0.5px; }
  .todelay b { font-size: 13px; }
  .todelay .dlabel { display: none; }
  .tobadge { top: -7px; right: 50%; transform: translateX(50%); font-size: 7.5px; padding: 1px 5px; letter-spacing: 0.8px; }
  .tocard.right .tobadge { left: 50%; right: auto; transform: translateX(-50%); }

  .hud-bottom { flex-direction: column; gap: 7px; left: 8px; right: 8px; }
  .gauges { gap: 7px; }
  .chip { flex: 1; min-width: 0; padding: 5px 9px 7px; border-radius: 14px; }
  .chip-value { font-size: 24px; }
  .chip-label { font-size: 9px; letter-spacing: 1.4px; }
  .chip-hint { display: none; }
  .chip-sub { font-size: 9px; }
  .angle-chip { padding-right: 38px; }
  .nud { width: 28px; height: 22px; font-size: 15px; }
  .power-chip { min-width: 0; }
  .pbar { height: 12px; }
  .shots { gap: 6px; }
  .shotbtn { flex: 1; width: auto; padding: 6px 4px 7px; }
  .shotbtn .sname { font-size: 17px; }
  .shotbtn .slabel { font-size: 8.5px; letter-spacing: 0.5px; }

  /* The walk buttons live on the bottom row in both shapes, so on a phone
     they land under the thumbs without a hand moving off the screen. */
  .walkrow { gap: 6px; padding: 4px 6px 5px; border-radius: 14px; }
  .walkbtn { width: 54px; border-radius: 11px; }
  .walkmeter { min-width: 0; }
  .walklabel { font-size: 9px; letter-spacing: 1.4px; }
  .walkbar { height: 11px; }

  .turnbanner { font-size: 30px; top: 26%; }

  .crewrow { grid-template-columns: repeat(2, 1fr); }
  .over-inner h2, .pause-inner h2 { font-size: 27px; }
  .btn { font-size: 15px; padding: 11px 18px; }
  .btn-big { font-size: 19px; padding: 13px 30px; }
}

@media (orientation: landscape) and (max-height: 460px) {
  .windring { width: 84px; height: 84px; }
  .turnorder { top: 8px; width: 178px; gap: 6px; }
  .tocard { padding: 5px 7px; gap: 7px; border-radius: 12px; }
  .toface { width: 38px; height: 38px; }
  .toname { font-size: 12px; }
  .tohp { height: 7px; }
  .todelay { font-size: 8px; }
  .todelay b { font-size: 13px; }
  .hud-bottom { bottom: 6px; }
  .chip-value { font-size: 22px; }
  .chip { padding: 4px 10px 6px; }
  .chip-hint { display: none; }
  .pbar { height: 11px; }
  .shotbtn { width: 70px; padding: 4px 4px 5px; }
  .shotbtn .sname { font-size: 15px; }
  .shotbtn .slabel { font-size: 8px; }
  .chip { min-width: 96px; }
  .power-chip { min-width: 120px; }
  .walkrow { padding: 3px 6px 4px; }
  .walkbtn { width: 40px; min-height: 38px; }
  .walkmeter { min-width: 48px; }
  .shotbtn { width: 62px; }
  .walklabel { font-size: 9px; }
  .walkbar { height: 10px; }
  .shots { gap: 6px; }
  .chip { padding: 4px 8px 6px; }
  .turnbanner { font-size: 28px; top: 22%; }

  /* The narrowest landscape a phone is held in: 640 wide. Three groups on one
     row is 3px more than the bar has at that width, so the row gap gives back
     the difference rather than the bar growing to a second line. */
  @media (max-width: 700px) {
    .hud-bottom { column-gap: 6px; }
    .shotbtn { width: 58px; }
    .chip { min-width: 88px; }
    .power-chip { min-width: 112px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.05ms !important; }
}