/* SUNBREAKER UI — menu screens: title, connecting, room, hangar, reveal, debrief, settings, how to play. */

/* ════════════════════════ TITLE ════════════════════════ */
/* Rows: brand · spacer · body · filler · footer. The body row is sized to its content, so it can never slide under
   the footer (it used to overflow a squeezed 1fr row): the spacer above it (the old 9vh drop) and the filler give
   way first, and only a screen too short even for that scrolls (the short-screen block below keeps 960×540 whole). */
.screen--title { overflow-y: auto; overflow-x: hidden; }
.title {
  height: 100%; display: grid; row-gap: 0;
  grid-template-rows: auto minmax(1rem, calc(1rem + clamp(1rem, 9vh, 7.5rem))) auto minmax(1rem, 1fr) auto;
  padding: calc(var(--gutter) * .9) calc(var(--gutter) * 1.6) var(--gutter);
}
.title__brand { grid-row: 1; }
.title__body { grid-row: 3; }
.title__foot { grid-row: 5; }
.title__brand { align-self: start; }
.logo { display: block; width: min(44rem, 56vw); height: auto; overflow: visible; margin-left: -.6rem; }
.logo__text { font-family: 'Chakra Petch', var(--f-display); font-weight: 700; font-size: 150px; letter-spacing: 6px; }
.logo__glow { fill: #B8A6FF; opacity: .45; }
.logo__sun { opacity: .9; animation: sun-breathe 6s ease-in-out infinite; transform-origin: 500px 84px; }
.logo__arc { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 60 900; filter: drop-shadow(0 0 6px var(--gold)); animation: arc-sweep 5.5s var(--ease-out) infinite; opacity: .95; }
.logo__crack { fill: none; stroke-width: 3; stroke-dasharray: 220 1200; animation: glint 4.2s ease-in-out infinite; filter: drop-shadow(0 0 5px #FFD34D); }
.logo__crack-core { fill: none; stroke: rgba(5, 6, 15, .9); stroke-width: 2.2; }
.logo__rim { fill: none; stroke-width: 3; opacity: .9; filter: drop-shadow(0 0 8px rgba(255, 211, 77, .7)); }
.logo__half--top { animation: split-top 4.2s ease-in-out infinite; }
.logo__half--bot { animation: split-bot 4.2s ease-in-out infinite; }
.logo--compact .logo__glow { opacity: .3; }
@keyframes sun-breathe { 50% { transform: scale(.94); opacity: .75; } }
@keyframes arc-sweep { 0% { stroke-dashoffset: 60; opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { stroke-dashoffset: -900; opacity: 0; } }
@keyframes glint { 0%, 30% { stroke-dashoffset: 220; } 70%, 100% { stroke-dashoffset: -1100; } }
@keyframes split-top { 0%, 30%, 100% { transform: translate(0, 0); } 45% { transform: translate(-3px, -2px); } }
@keyframes split-bot { 0%, 30%, 100% { transform: translate(0, 0); } 45% { transform: translate(3px, 2px); } }
.title__tag { margin-top: .2rem; font-family: var(--f-display); font-size: 1.05rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-2); }

.title__body { display: grid; grid-template-columns: minmax(15rem, 20rem) minmax(26rem, 38rem); gap: 1.4rem 2rem; align-content: start; align-items: start; }
.title__left { display: flex; flex-direction: column; gap: 1.4rem; }
.callsign { display: flex; flex-direction: column; gap: .35rem; }
.callsign__label { font-family: var(--f-display); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.callsign__box { display: flex; align-items: center; gap: .55rem; padding-left: .7rem; background: rgba(5, 7, 20, .6); border: 1px solid var(--line); border-bottom: 2px solid var(--line-2); transition: border-color .2s; }
.callsign__box:focus-within { border-bottom-color: var(--gold); }
.callsign__glyph { width: 1.3rem; height: 1.3rem; color: var(--gold); }
.field__input--callsign { border: 0; background: transparent; font-size: 1.2rem; font-weight: 600; letter-spacing: .06em; padding-left: 0; }
.field__input--callsign:focus { background: transparent; box-shadow: none; }

.modelist { display: flex; flex-direction: column; gap: .15rem; }
.modebtn {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; width: 100%;
  padding: .7rem 1rem .7rem 1.3rem; border: 0; background: transparent; text-align: left; color: var(--ink-2);
  transition: color .2s, background .25s, padding .25s var(--ease-out);
}
.modebtn::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; background: var(--gold); transform: scaleY(0); transition: transform .3s var(--ease-out); box-shadow: 0 0 12px var(--gold); }
.modebtn__label { font-family: var(--f-display); font-size: 1.75rem; font-weight: 600; letter-spacing: .04em; line-height: 1.1; }
.modebtn__desc { font-size: .92rem; color: var(--ink-3); }
.modebtn:hover { color: var(--ink); background: linear-gradient(90deg, rgba(160, 175, 255, .08), transparent); }
.modebtn.is-on { color: var(--ink-warm); padding-left: 1.6rem; background: linear-gradient(90deg, rgba(255, 211, 77, .12), transparent 80%); }
.modebtn.is-on::before { transform: scaleY(1); }
.modebtn.is-on .modebtn__desc { color: var(--ink-2); }
.modebtn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(255, 244, 224, .32); }
/* First flight: until the tutorial is done, Skirmish wears a "Start here" badge (it is also preselected). */
.modebtn__badge {
  margin-top: .3rem; padding: .12rem .55rem .14rem; font-family: var(--f-display); font-size: .64rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; color: #06301C; background: var(--ok);
  clip-path: polygon(.35rem 0, 100% 0, calc(100% - .35rem) 100%, 0 100%);
  box-shadow: 0 0 14px -4px var(--ok);
}
.modebtn.is-start:not(.is-on) .modebtn__badge { animation: badge-breathe 2.4s ease-in-out infinite; }
@keyframes badge-breathe { 50% { filter: brightness(1.25); } }
.firstflight { display: flex; flex-direction: column; gap: .2rem; padding: .6rem .8rem .65rem; border-left: 3px solid var(--ok); background: linear-gradient(90deg, rgba(124, 242, 182, .1), rgba(124, 242, 182, .02) 80%); }
.firstflight__kicker { font-family: var(--f-display); font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ok); }
.firstflight__text { font-size: 1rem; line-height: 1.3; color: var(--ink); }
.firstflight__text b { color: var(--ok); font-weight: 700; }
.firstflight__sub { font-size: .9rem; color: var(--ink-2); }

.title__detail { min-height: 19.5rem; padding: 1.3rem 1.4rem; --team: var(--gold); display: flex; flex-direction: column; }
.title__detail > .mode-panel.is-on { flex: 1; }
.mode-panel { display: none; flex-direction: column; gap: 1rem; animation: panel-in .35s var(--ease-out) both; }
.mode-panel.is-on { display: flex; }
.mode-panel--split.is-on { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.mode-panel__col { display: flex; flex-direction: column; gap: .8rem; }
.mode-panel__col + .mode-panel__col { padding-left: 1.6rem; border-left: 1px solid var(--line); }
.mode-panel__lede { font-size: 1.08rem; color: var(--ink-2); max-width: 34rem; }
.mode-panel__h { font-family: var(--f-display); font-size: 1.05rem; font-weight: 600; letter-spacing: .06em; color: var(--ink); }
.mode-panel__cta { margin-top: auto; padding-top: .4rem; display: flex; gap: .6rem; }
@keyframes panel-in { from { opacity: 0; transform: translateX(8px); } }

.formrow { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.formrow--inline { flex-direction: row; align-items: center; gap: .6rem; }
.formrow__label { font-family: var(--f-display); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }

.bigsizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.bigsize {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 1.2rem .6rem 1rem;
  background: rgba(5, 7, 20, .5); border: 1px solid var(--line); color: var(--ink);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background .2s, border-color .2s, transform .25s var(--ease-out);
}
.bigsize__label { font-family: var(--f-mono); font-size: 2.1rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.bigsize__sub { font-size: .9rem; color: var(--ink-3); }
.bigsize:hover, .bigsize:focus-visible { outline: none; background: linear-gradient(180deg, rgba(255, 211, 77, .16), rgba(255, 211, 77, .04)); border-color: var(--gold); transform: translateY(-2px); }
.bigsize:hover .bigsize__label, .bigsize:focus-visible .bigsize__label { color: var(--gold); }
.bigsize:active { transform: translateY(0) scale(.98); }
.sizepips { display: flex; align-items: center; gap: .45rem; }
.sizepips__vs { font-size: .7rem; color: var(--ink-3); letter-spacing: .1em; }
.pips { display: flex; gap: 3px; }
.pips i { width: .55rem; height: .55rem; background: var(--team); transform: rotate(45deg); box-shadow: 0 0 6px var(--team); }

.code { position: relative; width: max-content; cursor: text; }
.code__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 2rem; border: 0; cursor: text; z-index: 1; letter-spacing: 2rem; }
.code__cells { display: flex; gap: .4rem; }
.code__cell {
  display: flex; align-items: center; justify-content: center; width: 2.7rem; height: 3.2rem;
  font-family: var(--f-mono); font-size: 1.6rem; font-weight: 700; color: var(--ink-warm);
  background: rgba(5, 7, 20, .6); border: 1px solid var(--line); border-bottom: 2px solid var(--line-2); transition: border-color .15s, background .15s;
}
.code__cell.is-filled { border-bottom-color: var(--ink-2); }
.code__cell.is-caret { border-bottom-color: var(--gold); background: rgba(255, 211, 77, .08); animation: caret 1s steps(2) infinite; }
.code__cell.is-bad { color: #FF8FA0; border-bottom-color: var(--danger); background: rgba(255, 51, 85, .1); }
.code.is-shake { animation: shake .45s ease-in-out; }
.code__msg { min-height: 1.3em; }
.code__msg.is-bad { color: #FF8FA0; }
.code__msg.is-ok { color: var(--ok); }
@keyframes caret { 50% { border-bottom-color: transparent; } }

.session { list-style: none; margin: auto 0 0; padding: .9rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.session__step { position: relative; display: flex; flex-direction: column; gap: .05rem; padding-left: 1rem; }
.session__step::before { content: ''; position: absolute; left: 0; top: .45rem; width: .45rem; height: .45rem; border: 1px solid var(--gold); transform: rotate(45deg); }
.session__step:not(:last-child)::after { content: ''; position: absolute; left: 1rem; right: .8rem; top: .66rem; height: 1px; background: linear-gradient(90deg, transparent 3.2rem, var(--line-2) 3.2rem); }
.session__time { font-family: var(--f-mono); font-size: .86rem; font-weight: 700; color: var(--gold); }
.session__name { font-family: var(--f-display); font-size: .95rem; font-weight: 600; color: var(--ink); }
.session__what { font-size: .82rem; color: var(--ink-3); }
.title__foot { display: flex; align-items: center; gap: .4rem; }
/* The tagline sits where the title scrim has faded out (over the live arena, gates, grid): a soft oval of its own
   keeps it readable whatever flies behind it. */
.title__build { margin-left: auto; margin-right: -1.4rem; padding: .9rem 1.4rem; font-family: var(--f-mono); font-size: .74rem; color: var(--ink-2); letter-spacing: .04em;
  background: radial-gradient(closest-side, rgba(3, 4, 12, .82), rgba(3, 4, 12, .55) 72%, transparent); text-shadow: 0 1px 2px #000; }

/* Short screens (960×540 … 1100×620): a smaller logotype and tighter spacing so the mode list, the tallest panel
   (first-flight Skirmish) and the Settings / How to play footer all fit without overlapping. */
@media (max-height: 620px) {
  .title { grid-template-rows: auto minmax(.6rem, calc(.6rem + 3vh)) auto minmax(.6rem, 1fr) auto; }
  .logo { width: min(44rem, 56vw, 64vh); }
  .title__tag { font-size: .9rem; }
  .title__left { gap: .9rem; }
  .modebtn { padding-top: .5rem; padding-bottom: .5rem; }
  .modebtn__label { font-size: 1.5rem; }
  .title__detail { min-height: 0; padding: 1rem 1.2rem; }
  .title__detail .mode-panel { gap: .7rem; }
}

/* ════════════════════════ CONNECTING ════════════════════════ */
.connecting { display: grid; place-items: center; height: 100%; }
.connecting__box { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; text-align: center; max-width: 40rem; padding: 2.4rem 4rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 1.2rem rgba(3, 4, 12, .9); }
/* A scrim of its own, larger than the copy and dark all the way under it: the live backdrop (Pyre can sit right
   behind the text) must never wash a line out at the edges. */
.connecting__box::before { content: ''; position: absolute; inset: -3rem -8rem; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(3, 4, 12, .9) 0 58%, rgba(3, 4, 12, .66) 78%, transparent); }
.connecting__row { display: flex; align-items: baseline; justify-content: center; }
.connecting__title { font-family: var(--f-display); font-size: 2rem; font-weight: 600; letter-spacing: .06em; }
.connecting__sub { margin-top: .4rem; font-size: 1.05rem; color: var(--ink-2); }
.connecting__error { margin-top: .5rem; color: var(--ink); font-size: 1.12rem; }
.connecting__error:empty { display: none; }
.connecting__code { font-family: var(--f-mono); font-weight: 700; color: var(--gold); letter-spacing: .12em; margin: 0 -.12em 0 .05em; }
.connecting.is-error .connecting__error:not(:empty) ~ .connecting__sub { font-size: .95rem; color: var(--ink-3); }   /* guidance steps back behind a specific reason */
.connecting__actions { display: flex; gap: .6rem; }
/* Spinning: only Cancel. Error: the kind decides the primary way out (Edit code / Try again) + Back to title. */
.connecting__actions .btn { display: none; }
.connecting:not(.is-error) .connecting__actions .btn:first-child { display: inline-flex; }
.connecting[data-kind="join"] .connecting__actions .btn:nth-child(2),
.connecting[data-kind="net"] .connecting__actions .btn:nth-child(3),
.connecting[data-kind="retry"] .connecting__actions .btn:nth-child(3),
.connecting.is-error .connecting__actions .btn:nth-child(4) { display: inline-flex; }
.connecting.is-error .dots, .connecting.is-rejoin .dots { display: none; }   /* "Rejoining…" carries its own ellipsis */
.connecting.is-error .connecting__title { color: #FFC2CC; }
.connecting__esc { font-size: .82rem; color: var(--ink-3); display: flex; align-items: center; gap: .35rem; }
.connecting.is-error .orbits__ring { animation-play-state: paused; border-color: rgba(255, 51, 85, .35); }
.connecting.is-error .orbits__core { filter: hue-rotate(-40deg) saturate(1.4); animation: none; }

/* ════════════════════════ ROOM ════════════════════════ */
.room { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1.2rem; padding: var(--gutter); }
.room__head { display: flex; align-items: center; gap: 1.4rem; }
.room__titles { display: flex; flex-direction: column; gap: .15rem; }
.room__kind { font-family: var(--f-display); font-size: 2rem; font-weight: 600; letter-spacing: .04em; line-height: 1.1; }
.room__meta { color: var(--ink-2); font-size: 1rem; }
.roomcode { margin-left: auto; display: flex; flex-direction: column; gap: .3rem; align-items: flex-end; }
.roomcode__label { font-family: var(--f-display); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.roomcode__row { display: flex; align-items: center; gap: .6rem; }
.roomcode__cells { display: flex; gap: .3rem; }
.roomcode__cell { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 3rem; font-family: var(--f-mono); font-size: 1.6rem; font-weight: 700; color: var(--gold); background: rgba(5, 7, 20, .65); border: 1px solid rgba(255, 211, 77, .35); text-shadow: 0 0 12px rgba(255, 211, 77, .6); }
.roomcode__copy.is-done { color: var(--ok); }
.room__countdown { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.roomcode:not(.is-hidden) + .room__countdown { margin-left: 1.2rem; }
.room__countdown-label { font-family: var(--f-display); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.room__countdown-num { font-family: var(--f-mono); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--ink-warm); }
.room__countdown.is-urgent .room__countdown-num { color: var(--gold); animation: pulse-num 1s ease-in-out infinite; }

.room__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem); gap: 1.2rem; min-height: 0; }
.room__main { display: flex; flex-direction: column; gap: 1rem; min-height: 0; }
.room__teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .9rem; align-items: start; }
.roomarena { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.roomarena__body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 17rem); gap: 1.2rem; align-items: center; }
.roomarena__map { height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.roomarena__svg { width: 100%; height: 100%; max-height: 26rem; }
.roomarena__facts { margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.roomarena__fact dt { font-family: var(--f-display); font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.roomarena__fact dd { margin: 0; font-size: 1rem; color: var(--ink); }
.roomarena__team { color: var(--team) !important; font-family: var(--f-display); font-weight: 600; }
.room__vs { align-self: center; font-family: var(--f-display); font-size: 1.1rem; font-weight: 700; letter-spacing: .2em; color: var(--ink-3); padding: 0 .2rem; }
.teamcol { padding: 1rem; }
.teamcol__head { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .8rem; }
.teamcol__name { font-family: var(--f-display); font-size: 1.6rem; font-weight: 700; letter-spacing: .12em; color: var(--team); text-shadow: 0 0 18px color-mix(in srgb, var(--team) 55%, transparent); }
.teamcol__count { font-family: var(--f-mono); color: var(--ink-2); font-size: .9rem; }
.teamcol__side { margin-left: auto; font-size: .82rem; color: var(--ink-3); }
.seats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.seat {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; min-height: 4rem; padding: .35rem .7rem .35rem .45rem;
  background: rgba(5, 7, 20, .45); border: 1px solid var(--line); border-left: 3px solid var(--team); transition: background .2s, border-color .2s, transform .2s var(--ease-out);
}
.seat.is-me { background: linear-gradient(90deg, color-mix(in srgb, var(--team) 16%, transparent), rgba(5, 7, 20, .45)); border-color: color-mix(in srgb, var(--team) 45%, transparent); cursor: grab; }
.seat.is-open { border-left-style: dashed; border-left-color: color-mix(in srgb, var(--team) 45%, transparent); }
.seat.is-drop { background: rgba(255, 211, 77, .12); border-color: var(--gold); transform: translateX(3px); }
.seat__idx { font-family: var(--f-mono); color: var(--ink-3); font-size: .9rem; text-align: center; }
.seat__who { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.seat__name { font-family: var(--f-display); font-size: 1.12rem; font-weight: 600; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat__host .glyph { width: 1rem; height: 1rem; color: var(--gold); }
.seat__open { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 2.8rem; padding: 0 .4rem; background: transparent; border: 0; text-align: left; color: var(--ink-3); }
.seat__open .seat__name { font-size: 1rem; font-weight: 500; }
.seat__hint { font-size: .82rem; color: var(--ink-3); opacity: 0; transition: opacity .2s; }
.seat__open:hover .seat__hint, .seat__open:focus-visible .seat__hint { opacity: 1; }
.seat__open:hover, .seat__open:focus-visible { color: var(--ink); outline: none; }
/* The whole row answers a seat button's hover and keyboard focus (the button alone has no box to light up). */
.seat:has(.seat__open:hover) { background: rgba(160, 175, 255, .08); border-color: var(--line-2); }
.seat:has(.seat__open:focus-visible) { background: rgba(255, 211, 77, .07); box-shadow: inset 0 0 0 1px var(--gold); }
.seat:has(.seat__open:active) { transform: translateX(2px); }
.seat__open--bot { color: var(--ink-2); }
.seat__bot { width: 1.2rem; height: 1.2rem; color: var(--ink-3); }
.seat__ready { display: flex; align-items: center; gap: .45rem; font-family: var(--f-display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.seat__ready i { width: .65rem; height: .65rem; border-radius: 50%; background: rgba(160, 175, 255, .18); border: 1px solid var(--line-2); }
.seat.is-ready .seat__ready { color: var(--ok); }
.seat.is-ready .seat__ready i { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 10px var(--ok); }
.seat.is-bot .seat__ready i { background: rgba(160, 175, 255, .35); }
.room.is-dragging .seat.is-open { background: rgba(255, 211, 77, .05); }

.roomchat { display: flex; flex-direction: column; min-height: 0; }
.chatlog { flex: 1; min-height: 6rem; overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; padding-right: .3rem; font-size: 1rem; }
.chat__bar { display: flex; gap: .4rem; margin-top: .7rem; }
.chatlog__empty { margin: auto 0 .2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .35rem; font-size: .9rem; color: var(--ink-3); }
.chatlog__empty > span { display: inline-flex; align-items: center; gap: .35rem; }
.chatlog__lead { display: inline !important; }
.chatlog__code { font-family: var(--f-mono); font-weight: 700; letter-spacing: .12em; margin-right: -.12em; color: var(--gold); }
.chatline { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; line-height: 1.3; }
.chatline__name { font-family: var(--f-display); font-weight: 600; color: var(--team); }
.chatline__text { color: var(--ink); overflow-wrap: anywhere; }
.chatline__scope { font-family: var(--f-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.chatline__scope.is-all { color: var(--gold); }
.chatline--system .chatline__text { color: var(--ink-3); font-style: italic; }
.chatline--bot .chatline__text { color: var(--ink-2); }

.room__foot { display: flex; align-items: center; gap: 1.2rem; }
.hostctl { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.room__guestinfo { color: var(--ink-2); font-size: 1rem; }
.readybtn { margin-left: auto; min-width: 14rem; }
.readybtn__light { width: .75rem; height: .75rem; border-radius: 50%; background: rgba(27, 18, 4, .35); border: 1px solid rgba(27, 18, 4, .6); }
.readybtn.is-on { background: linear-gradient(180deg, #B6FFD8, var(--ok)); }
.readybtn.is-on .readybtn__light { background: #0B3A22; box-shadow: 0 0 0 3px rgba(11, 58, 34, .25); }

/* ════════════════════════ HANGAR ════════════════════════ */
.hangar { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .85rem; padding: 1rem var(--gutter) 1.1rem; }
.hangar__head { display: flex; align-items: center; gap: 1.6rem; }
.hangar__leave { margin: 0 -.6rem 0 -.8rem; align-self: flex-start; }
.hangar__titles { display: flex; flex-direction: column; }
.hangar__title { font-family: var(--f-display); font-size: 1.9rem; font-weight: 700; letter-spacing: .08em; line-height: 1.05; }
.hangar__lede { color: var(--ink-2); font-size: 1rem; }
.budget { margin-left: auto; display: flex; flex-direction: column; gap: .3rem; min-width: 17rem; }
.budget__top { display: flex; align-items: baseline; gap: .5rem; }
.budget__label { font-family: var(--f-display); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.budget__left { font-family: var(--f-mono); font-size: 1.7rem; font-weight: 700; color: var(--gold); line-height: 1; text-shadow: 0 0 14px rgba(255, 211, 77, .45); }
.budget__of { color: var(--ink-3); font-size: .9rem; }
.budget__bar { display: flex; gap: 2px; height: .75rem; }
.budget__seg { position: relative; min-width: 4px; background: rgba(160, 175, 255, .12); transition: flex-grow .3s var(--ease-out); }
.budget__seg b { position: absolute; left: 3px; top: -1px; font-family: var(--f-mono); font-size: .56rem; color: rgba(5, 6, 15, .8); font-weight: 700; }
.budget__seg--dart, .budget__seg--hornet, .budget__seg--bulwark, .budget__seg--lancer { background: linear-gradient(180deg, var(--ink-warm), #C9CDE6); }
.budget__seg--ghost { background: repeating-linear-gradient(135deg, rgba(255, 211, 77, .7) 0 4px, rgba(255, 211, 77, .25) 4px 8px); }
.budget__seg--ghost.is-over { background: repeating-linear-gradient(135deg, rgba(255, 51, 85, .8) 0 4px, rgba(255, 51, 85, .3) 4px 8px); }
.budget__seg--free { background: rgba(255, 211, 77, .14); border: 1px dashed rgba(255, 211, 77, .35); }
.budget__note { font-size: .8rem; color: var(--ink-3); }
.budget.is-deny { animation: shake .4s ease-in-out; }
.budget.is-deny .budget__left { color: var(--danger); }

.hangar__grid { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(20rem, 1.55fr) minmax(16rem, 1.15fr); gap: .85rem; min-height: 0; }
.hangar__side { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .85rem; min-height: 0; }
.hangar__modules, .hangar__fleet, .hangar__call, .hangar__roster { min-height: 0; display: flex; flex-direction: column; }

.modcards { display: flex; flex-direction: column; gap: .5rem; flex: 1; min-height: 0; }
.modcard {
  flex: 1; display: flex; align-items: flex-start; gap: .75rem; padding: .7rem .8rem; text-align: left;
  background: rgba(5, 7, 20, .45); border: 1px solid var(--line); color: var(--ink-2); transition: background .2s, border-color .2s, color .2s;
}
.modcard__icon .glyph { width: 2.2rem; height: 2.2rem; }
.modcard { position: relative; overflow: hidden; }
.modcard__main { position: relative; }
/* A big faint copy of the glyph fills the card's empty corner; it lights up a little when chosen. */
.modcard__mark { position: absolute; right: -2rem; bottom: -2.3rem; opacity: .045; pointer-events: none; transition: opacity .3s, transform .5s var(--ease-out); }
.modcard__mark .glyph { width: 8.5rem; height: 8.5rem; stroke-width: 1.1; }
.modcard.is-on .modcard__mark { opacity: .09; transform: rotate(-8deg) scale(1.04); }
.modcard__main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; align-self: stretch; }
.modcard__use { margin-top: .45rem; padding-top: .35rem; font-size: .82rem; line-height: 1.25; color: var(--ink-3); border-top: 1px dashed var(--line); }
/* Tall screens stretch the three cards: keep each card's copy together and centred instead of split top / bottom. */
.modcard { align-items: center; }
.modcard__main { justify-content: center; }
.modcard.is-on .modcard__use { color: var(--ink-2); }
.modcard__row { display: flex; align-items: baseline; gap: .5rem; }
.modcard__name { font-family: var(--f-display); font-size: 1.12rem; font-weight: 600; color: var(--ink); letter-spacing: .04em; }
.modcard__cd { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); }
.modcard__blurb { font-size: .9rem; line-height: 1.28; }
.modcard:hover { background: rgba(160, 175, 255, .07); border-color: var(--line-2); }
.modcard.is-on { background: linear-gradient(90deg, rgba(255, 211, 77, .12), rgba(5, 7, 20, .45)); border-color: var(--gold); color: var(--ink); box-shadow: inset 3px 0 0 var(--gold); }
.modcard:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ink-warm); }

.fleet__body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 12.5rem; gap: .6rem; align-items: center; }
.rings__wrap { position: relative; height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rings { width: 100%; height: 100%; max-height: 34rem; overflow: visible; }
.rings__me { color: var(--gold); }
.rings__me .glyph { stroke-width: 1.4; }
/* The Bulwark's dome rides ring 1 with its Bulwark; the Breaker at the centre always sits inside it. */
.rings__dome { fill: url(#hg-dome); stroke: rgba(124, 242, 182, .55); stroke-width: 1.5; stroke-dasharray: 5 4; animation: dome-in .6s var(--ease-out) both; }
.rings__domehex { fill: url(#hg-hex); stroke: none; opacity: .9; }
.rings.is-shielded .rings__me { filter: drop-shadow(0 0 10px rgba(124, 242, 182, .75)); }
@keyframes dome-in { from { opacity: 0; } }
.ring { color: var(--team-l); }
.ring__track { fill: none; stroke: rgba(170, 186, 255, .22); stroke-width: 1.5; stroke-dasharray: 3 6; transition: stroke .2s, stroke-width .2s; }
.ring.is-filled .ring__track { stroke: rgba(255, 244, 224, .35); stroke-dasharray: none; }
.ring__hit { fill: none; stroke: transparent; stroke-width: 34; cursor: pointer; pointer-events: stroke; }
.ring:hover .ring__track { stroke: rgba(255, 244, 224, .6); }
.ring.is-selected .ring__track, .ring.is-drop .ring__track { stroke: var(--gold); stroke-width: 3; stroke-dasharray: none; filter: drop-shadow(0 0 6px var(--gold)); }
.ring__ships { transform-box: view-box; transform-origin: 0 0; animation: ring-spin 2s linear infinite; }
.ring__ships .glyph { stroke-width: 1.8; filter: drop-shadow(0 0 3px var(--team)); }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.ring__badge circle { fill: var(--void-2); stroke: rgba(170, 186, 255, .45); stroke-width: 1.5; }
.ring__badge text { font-family: var(--f-mono); font-size: 13px; font-weight: 700; fill: var(--ink-2); }
.ring.is-selected .ring__badge circle { stroke: var(--gold); fill: #2A220A; }
.ring.is-selected .ring__badge text { fill: var(--gold); }
.ring.is-flash .ring__track { animation: ring-flash .6s var(--ease-out); }
@keyframes ring-flash { 0% { stroke: #fff; stroke-width: 8; } }
.hangar.is-pickring .ring__track { animation: ring-flash .6s var(--ease-out); }

.slotchips { display: flex; flex-direction: column; gap: .45rem; }
.slotchip { position: relative; display: flex; flex-wrap: wrap; align-items: center; background: rgba(5, 7, 20, .5); border: 1px solid var(--line); transition: border-color .2s, background .2s; }
.slotchip__main { flex: 1; align-self: stretch; display: flex; align-items: center; gap: .45rem; padding: .45rem .4rem .45rem .5rem; border: 0; background: transparent; text-align: left; min-width: 0; }
.slotchip__num { font-family: var(--f-mono); font-weight: 700; font-size: .85rem; color: var(--ink-3); width: 1rem; }
.slotchip__glyph .glyph { width: 1.4rem; height: 1.4rem; color: var(--team-l); }
.slotchip__glyph:empty { width: 1.4rem; height: 1.4rem; border: 1px dashed var(--line-2); transform: rotate(45deg) scale(.6); }
.slotchip__text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.slotchip__top { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.slotchip__unit { font-family: var(--f-display); font-weight: 600; font-size: .95rem; color: var(--ink); }
.slotchip__ring { font-size: .7rem; color: var(--ink-3); font-family: var(--f-mono); white-space: nowrap; }
.slotchip__hint { flex-basis: 100%; margin-top: -.2rem; padding: 0 .5rem .4rem 2.95rem; font-size: .74rem; line-height: 1.15; color: rgba(124, 242, 182, .62); }
.slotchip__hint::before { content: '⬡ '; }
.slotchip__hint.is-on { color: var(--ok); }
.slotchip__cost { font-family: var(--f-mono); font-size: .78rem; color: var(--gold); }
.slotchip__x { align-self: center; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: .25rem; padding: 0; border: 0; background: transparent; color: var(--ink-3); }
.slotchip__x .glyph { width: .9rem; height: .9rem; }
.slotchip__x:hover { color: var(--danger); }
.slotchip__x:focus-visible { outline: none; color: var(--danger); box-shadow: inset 0 0 0 1px var(--ink-warm); }
.slotchip:not(.is-filled) .slotchip__unit { color: var(--ink-3); font-weight: 500; }
.slotchip:hover { border-color: var(--line-2); background: rgba(160, 175, 255, .06); }
.slotchip__main:active .slotchip__glyph { transform: scale(.92); }
.slotchip__glyph { transition: transform .15s var(--ease-out); }
.slotchip.is-selected, .slotchip.is-drop { border-color: var(--gold); background: rgba(255, 211, 77, .08); }
.slotchip.is-selected .slotchip__num { color: var(--gold); }
.slotchip__main:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ink-warm); }

.hangar__call .panel__head { margin-bottom: .5rem; }
.callmap { display: block; width: 100%; padding: 0; border: 1px solid var(--line); background: rgba(5, 7, 20, .55); cursor: crosshair; }
.callmap:focus-visible { outline: none; border-color: var(--ink-warm); }
.callmap:hover { border-color: var(--line-2); }
.modcard:active, .bigsize:active .bigsize__label { transform: scale(.985); }
.callmap__svg { display: block; width: 100%; height: auto; aspect-ratio: 5040 / 2920; }
.am-bounds { fill: rgba(27, 17, 64, .25); stroke: rgba(170, 186, 255, .35); stroke-width: 10; }
.am-band { fill: none; stroke: rgba(255, 51, 85, .18); stroke-width: 150; }
.am-grid { stroke: rgba(42, 58, 122, .5); stroke-width: 6; }
.am-mid { stroke: rgba(170, 186, 255, .2); stroke-width: 8; stroke-dasharray: 30 40; }
.am-rock { fill: rgba(120, 128, 170, .3); stroke: rgba(180, 190, 230, .55); stroke-width: 10; }
.am-well { fill: rgba(155, 140, 255, .1); stroke: rgba(155, 140, 255, .6); stroke-width: 12; stroke-dasharray: 40 30; }
.am-corona { fill: rgba(184, 166, 255, .15); }
.am-pyre { fill: #FFF4E0; filter: drop-shadow(0 0 40px #FFD27A); }
.am-gate circle { fill: none; stroke: var(--team); stroke-width: 18; }
.am-gate .am-gate__core { fill: var(--team); fill-opacity: .4; stroke: none; }
.am-gate.is-mine circle:first-child { stroke-width: 26; filter: drop-shadow(0 0 30px var(--team)); }
.am-label { font-family: var(--f-display); font-size: 110px; font-weight: 600; letter-spacing: 8px; fill: var(--ink-3); }
.am-label--gate { fill: var(--team); }
.call { color: var(--gold); }
.call .glyph { stroke-width: 1.4; }
.call__pulse { fill: rgba(255, 211, 77, .08); stroke: rgba(255, 211, 77, .6); stroke-width: 8; animation: call-pulse 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.call--mate { opacity: .75; }
.call--mate .call__pulse { animation: none; stroke-dasharray: 20 20; }
.call__label { font-family: var(--f-display); font-size: 150px; font-weight: 600; fill: var(--gold); paint-order: stroke; stroke: rgba(5, 6, 15, .85); stroke-width: 24px; }
@keyframes call-pulse { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

.hangar__roster { overflow: hidden; }
.roster { display: flex; flex-direction: column; gap: .6rem; overflow-y: auto; min-height: 0; }
.roster__team { display: flex; flex-direction: column; gap: .25rem; }
.roster__teamname { display: flex; align-items: baseline; gap: .5rem; font-family: var(--f-display); font-weight: 700; font-size: .8rem; letter-spacing: .16em; color: var(--team); }
.roster__side { font-family: var(--f-body); font-weight: 500; letter-spacing: 0; color: var(--ink-3); font-size: .8rem; }
.roster__row { display: flex; align-items: center; gap: .45rem; min-height: 1.9rem; padding: .15rem .45rem; background: rgba(5, 7, 20, .4); border-left: 2px solid color-mix(in srgb, var(--team) 60%, transparent); }
.roster__row.is-me { background: color-mix(in srgb, var(--team) 10%, rgba(5, 7, 20, .4)); }
.roster__light { width: .55rem; height: .55rem; border-radius: 50%; border: 1px solid var(--line-2); flex: none; }
.roster__row.is-locked .roster__light { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 8px var(--ok); }
.roster__name { font-family: var(--f-display); font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex-shrink: 1; }
.roster__picks { margin-left: auto; display: flex; align-items: center; gap: .3rem; }
.roster__mod .glyph { width: 1.15rem; height: 1.15rem; }
.roster__mod.is-empty { width: 1.15rem; height: 1.15rem; border: 1px dashed var(--line-2); border-radius: 50%; }
.roster__status { margin-left: auto; font-family: var(--f-display); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.roster__row.is-locked .roster__status { color: var(--ok); }
.roster__last { display: flex; align-items: center; gap: .25rem; padding-left: .45rem; margin-left: .2rem; border-left: 1px solid var(--line); opacity: .55; }
.roster__row.is-enemy .roster__last { opacity: .8; }
.roster__last .glyph { width: .9rem !important; height: .9rem !important; }
.roster__last .minifleet__slot { width: 1.1rem; height: 1.1rem; }
.minifleet { display: inline-flex; gap: 2px; }
.minifleet__slot { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; background: rgba(160, 175, 255, .08); color: var(--ink-warm); }
.minifleet__slot .glyph { width: 1rem; height: 1rem; }
.minifleet__slot.is-empty { background: transparent; border: 1px dashed rgba(160, 175, 255, .2); }
.minifleet--ghost .minifleet__slot { color: var(--ink-2); }

.hangar__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .85rem; align-items: stretch; }
.unitcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.unitcard {
  position: relative; display: flex; flex-direction: column; gap: .35rem; padding: .6rem .7rem .55rem; cursor: grab; user-select: none; touch-action: none;
  background: linear-gradient(180deg, rgba(26, 31, 66, .8), rgba(9, 11, 26, .86)); border: 1px solid var(--line); overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  transition: transform .22s var(--ease-out), border-color .2s, background .2s, opacity .2s;
}
.unitcard:hover, .unitcard:focus-visible { outline: none; transform: translateY(-3px); border-color: var(--line-3); background: linear-gradient(180deg, rgba(36, 42, 86, .85), rgba(12, 14, 32, .85)); }
.unitcard:focus-visible { box-shadow: inset 0 0 0 2px var(--ink-warm); }
.unitcard:active { cursor: grabbing; }
.unitcard.is-unaffordable { filter: saturate(.25) brightness(.62); }
.unitcard.is-unaffordable:hover { filter: saturate(.5) brightness(.8); }
.unitcard.is-unaffordable .unitcard__costnum { color: var(--danger); }
.unitcard.is-deny { animation: shake .4s ease-in-out; }
.unitcard__head { display: flex; align-items: center; gap: .55rem; }
.unitcard__glyph .glyph { width: 2.2rem; height: 2.2rem; color: var(--ink-warm); stroke-width: 1.5; }
.unitcard__titles { display: flex; flex-direction: column; min-width: 0; }
.unitcard__name { font-family: var(--f-display); font-size: 1.15rem; font-weight: 700; letter-spacing: .04em; line-height: 1.1; }
.unitcard__role { font-size: .8rem; color: var(--ink-3); line-height: 1.15; }
.unitcard__cost { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.unitcard__costnum { font-family: var(--f-mono); font-size: 1.15rem; font-weight: 700; color: var(--gold); line-height: 1; }
.unitcard__key { margin-top: .2rem; line-height: 1; }
.unitcard__short { display: none; margin-top: .2rem; font-family: var(--f-mono); font-size: .66rem; color: #FF8FA0; white-space: nowrap; }
.unitcard.has-short .unitcard__short { display: block; }
.unitcard.has-short .unitcard__key { display: none; }
.kbd--xs { min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; font-size: .6rem; border-bottom-width: 1px; color: var(--ink-2); }
.hangar:focus { outline: none; }
.lockbtn__kbd { margin-left: .4rem; height: 1.3rem; min-width: 0; font-size: .62rem; color: rgba(27, 18, 4, .75); background: rgba(27, 18, 4, .1); border-color: rgba(27, 18, 4, .35); letter-spacing: .04em; text-transform: none; text-shadow: none; }
.unitcard__stats { display: grid; grid-template-columns: repeat(4, auto) minmax(0, 1fr); gap: .1rem .6rem; margin: 0; }
.unitcard { container-type: inline-size; }
/* Narrow cards (720p, 1024-class): the weapon line gets its own row instead of an ellipsis ("Torpedo 70/3.…"). */
@container (max-width: 22rem) {
  .unitcard__stats { grid-template-columns: repeat(4, auto); justify-content: start; }
  .unitcard__stats .stat:last-child { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: .45rem; }
}
.unitcard__stats .stat:last-child dd { overflow: hidden; text-overflow: ellipsis; }
.stat { display: flex; flex-direction: column; }
.stat dt { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.stat dd { margin: 0; font-family: var(--f-mono); font-size: .78rem; color: var(--ink); white-space: nowrap; }
.unitcard__rule { font-size: .84rem; color: var(--ink-2); line-height: 1.22; }
.unitcard__counters { display: flex; flex-wrap: wrap; gap: .25rem .7rem; margin-top: auto; }
.counter { display: inline-flex; align-items: center; gap: .3rem; }
.counter__label { font-family: var(--f-display); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.counter--up .counter__label { color: var(--ok); }
.counter--down .counter__label { color: #FF8FA0; }
.gchip { display: inline-flex; align-items: center; gap: .15rem; font-size: .76rem; color: var(--ink-2); }
.gchip .glyph { width: .95rem; height: .95rem; }
.counter--up .gchip .glyph { color: var(--ok); }
.counter--down .gchip .glyph { color: #FF8FA0; }

.lock { display: flex; flex-direction: column; justify-content: center; gap: .45rem; min-width: 14rem; }
.lockbtn { width: 100%; }
.lockbtn__icon { width: 1.2rem !important; height: 1.2rem !important; }
.lockbtn.is-locked { background: linear-gradient(180deg, #B6FFD8, var(--ok)); }
.lockbtn.is-nudge { animation: shake .4s ease-in-out; }
.lock__hint { font-size: .86rem; color: var(--ink-3); text-align: center; }
.lock__hint.is-warn { color: var(--gold); }
.hangar.is-locked .unitcard, .hangar.is-locked .modcard, .hangar.is-locked .ring__hit, .hangar.is-locked .callmap { filter: saturate(.4); opacity: .6; cursor: not-allowed; }
.hangar.is-locked .modcard.is-on { opacity: 1; }
.hangar.is-dragging .ring__track { stroke: rgba(255, 211, 77, .45); }

/* ════════════════════════ REVEAL ════════════════════════ */
.screen--reveal { background: radial-gradient(90% 70% at 50% 50%, rgba(5, 6, 15, .35), rgba(3, 4, 12, .85)); }
.reveal { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 1.4rem var(--gutter) 1.2rem; }
.reveal__head { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.reveal__kicker { font-family: var(--f-display); font-size: 2rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-warm); }
.reveal__warp { font-family: var(--f-mono); color: var(--ink-3); font-size: .95rem; }
.reveal__count { color: var(--gold); font-weight: 700; }
.reveal__stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 2rem; min-height: 0; }
.reveal__vs { font-family: var(--f-display); font-size: 3.4rem; font-weight: 700; letter-spacing: .1em; color: var(--ink-warm); text-shadow: 0 0 30px rgba(255, 210, 122, .5); }
.reveal.is-playing .reveal__vs { animation: vs-in .6s .1s var(--ease-snap) both; }
@keyframes vs-in { from { transform: scale(2.4); opacity: 0; filter: blur(8px); } }
.reveal__col { display: flex; flex-direction: column; gap: .8rem; }
.reveal__col:first-child { align-items: flex-end; }
.reveal__team { font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; letter-spacing: .3em; color: var(--team); text-shadow: 0 0 20px var(--team); }
.reveal__cards { display: flex; flex-direction: column; gap: .8rem; width: min(100%, 30rem); }
.flip { perspective: 1200px; }
.flip__inner { position: relative; display: grid; transform-style: preserve-3d; transform: rotateY(180deg); }
.reveal.is-playing .flip__inner { animation: flip-in .7s var(--d) var(--ease-out) both; }
@keyframes flip-in { from { transform: rotateY(180deg); } to { transform: rotateY(0); } }
.flip__face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip__back {
  transform: rotateY(180deg); display: grid; place-items: center; min-height: 7.5rem;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--team) 20%, #070916) 0 10px, #070916 10px 20px);
  border: 1px solid color-mix(in srgb, var(--team) 60%, transparent);
}
.flip__emblem .glyph { width: 3rem; height: 3rem; color: var(--team); }
.flip__front {
  display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem .6rem .6rem; min-height: 7.5rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--team) 14%, rgba(9, 11, 26, .92)), rgba(9, 11, 26, .92));
  border: 1px solid color-mix(in srgb, var(--team) 55%, transparent); box-shadow: 0 0 40px -18px var(--team);
}
.rcard.is-me .flip__front { border-color: var(--gold); }
.minirings { width: 6.6rem; height: 6.6rem; flex: none; color: var(--team-l); overflow: visible; }
.minirings__ring { fill: none; stroke: rgba(170, 186, 255, .22); stroke-width: 1; stroke-dasharray: 2 3; }
.minirings__ring.is-filled { stroke: color-mix(in srgb, var(--team) 60%, transparent); stroke-dasharray: none; }
.minirings .glyph { stroke-width: 2.4; }
.minirings__me { color: var(--team); }
.rcard__info { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.rcard__name { display: flex; align-items: center; gap: .5rem; font-family: var(--f-display); font-size: 1.3rem; font-weight: 700; letter-spacing: .03em; }
.rcard__mod { display: flex; align-items: center; gap: .4rem; font-size: .95rem; color: var(--ink-2); }
.rcard__mod .glyph { width: 1.2rem; height: 1.2rem; }
.rcard__fleet { list-style: none; margin: 0; padding: 0; display: flex; gap: .7rem; flex-wrap: wrap; }
.rcard__fleet li { display: flex; align-items: center; gap: .25rem; font-size: .88rem; color: var(--ink); }
.rcard__fleet li.is-empty { color: var(--ink-3); }
.rcard__fleet .glyph { width: 1.1rem; height: 1.1rem; color: var(--team-l); }
.rcard__slot { font-family: var(--f-mono); font-size: .68rem; color: var(--ink-3); }
/* Drama: each card lands with a small bump, then a light sheen crosses its face. */
.flip__front { position: relative; overflow: hidden; }
.flip__front::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-120%); }
.reveal.is-playing .flip__front::after { animation: sheen .9s calc(var(--d) + .5s) var(--ease-out) both; }
.reveal.is-playing .flip { animation: card-land .75s var(--d) var(--ease-out) both; }
@keyframes sheen { to { transform: translateX(120%); } }
@keyframes card-land { 0% { transform: scale(.93); } 72% { transform: scale(1.025); } 100% { transform: none; } }
.reveal.is-playing .reveal__kicker { animation: kicker-in .8s var(--ease-out) both; }
@keyframes kicker-in { from { letter-spacing: .8em; opacity: 0; } }
/* Fewer pilots → bigger cards, so a 1v1 reveal still fills the stage. */
.reveal[data-size="1"] .reveal__cards { width: min(100%, 36rem); }
.reveal[data-size="1"] .flip__front, .reveal[data-size="1"] .flip__back { min-height: 12rem; }
.reveal[data-size="1"] .minirings { width: 10rem; height: 10rem; }
.reveal[data-size="1"] .rcard__name { font-size: 1.9rem; }
.reveal[data-size="1"] .rcard__mod { font-size: 1.15rem; }
.reveal[data-size="1"] .rcard__fleet li { font-size: 1.05rem; }
.reveal[data-size="1"] .reveal__vs { font-size: 4.6rem; }
.reveal[data-size="2"] .reveal__cards { width: min(100%, 33rem); }
.reveal[data-size="2"] .flip__front, .reveal[data-size="2"] .flip__back { min-height: 9rem; }
.reveal[data-size="2"] .minirings { width: 8rem; height: 8rem; }
.reveal[data-size="2"] .rcard__name { font-size: 1.5rem; }
.reveal__bar { height: 3px; background: rgba(160, 175, 255, .15); }
.reveal__bar i { display: block; height: 100%; background: var(--gold); transform-origin: left; box-shadow: 0 0 10px var(--gold); }

/* ════════════════════════ DEBRIEF ════════════════════════ */
.debrief { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: .9rem; padding: 1.1rem var(--gutter) 1.1rem; }
.debrief[data-team="ember"] { --team: var(--ember); } .debrief[data-team="tide"] { --team: var(--tide); }
.debrief__head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.6rem; }
.debrief__outcome { font-family: var(--f-display); font-size: 4.2rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1; color: var(--team); text-shadow: 0 0 40px color-mix(in srgb, var(--team) 60%, transparent); }
.debrief[data-outcome="defeat"] .debrief__outcome { color: #C8CCE6; text-shadow: none; }
.debrief[data-outcome="draw"] .debrief__outcome { color: var(--ink-warm); text-shadow: 0 0 40px rgba(255, 244, 224, .35); }
.debrief.is-playing .debrief__outcome { animation: outcome-in .9s var(--ease-out) both; }
@keyframes outcome-in { from { letter-spacing: .6em; opacity: 0; filter: blur(10px); } }
.debrief__sub { margin-top: .35rem; font-size: 1.05rem; color: var(--ink-2); }
.debrief__gates { display: flex; align-items: center; gap: 1.2rem; }
.dgate { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: .7rem; }
.dgate__svg { grid-row: span 2; width: 4.2rem; height: 4.2rem; }
.dgate__score { font-family: var(--f-mono); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--team); }
.dgate__name { font-family: var(--f-display); font-size: .74rem; letter-spacing: .2em; color: var(--ink-3); }
.t-tide.dgate { grid-template-columns: auto auto; direction: rtl; }
.t-tide.dgate > * { direction: ltr; }
.dgate__dash { font-family: var(--f-mono); font-size: 2rem; color: var(--ink-3); }
.series { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.series__label { font-family: var(--f-display); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.series__score { font-family: var(--f-mono); font-size: 1.8rem; font-weight: 700; }
.series__score .t-ember { color: var(--ember); } .series__score .t-tide { color: var(--tide); }

.mvps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.mvp {
  position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .7rem .9rem .75rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--team) 12%, rgba(13, 16, 36, .82)), rgba(9, 11, 26, .82));
  border: 1px solid color-mix(in srgb, var(--team) 40%, transparent); border-top: 2px solid var(--team);
}
.debrief.is-playing .mvp { animation: mvp-in .6s var(--d) var(--ease-out) both; }
@keyframes mvp-in { from { opacity: 0; transform: translateY(14px) rotateX(40deg); } }
.mvp__title { font-family: var(--f-display); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--team); }
.mvp__name { font-family: var(--f-display); font-size: 1.35rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mvp__stat { font-family: var(--f-mono); font-size: .8rem; color: var(--ink-2); }
.mvp.is-empty { opacity: .55; border-top-color: var(--line-2); }
.mvp.is-me::after { content: 'you'; position: absolute; top: .6rem; right: .7rem; font-family: var(--f-mono); font-size: .64rem; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); padding: 0 .3rem; }

/* The match reads as a timeline across the full width; the pilot table below takes only the rows it needs. */
.debrief__grid { display: grid; grid-template-rows: minmax(8rem, 1fr) auto; gap: .8rem; min-height: 0; }
.debrief__graph, .debrief__stats { min-height: 0; display: flex; flex-direction: column; }
.debrief__stats .panel__head { margin-bottom: .3rem; }
.momentum { position: relative; flex: 1; min-height: 5rem; display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: .6rem; }
.momentum__plot { position: relative; min-height: 0; grid-column: 2; grid-row: 1; }
.momentum__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.momentum__side { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; padding: .2rem 0; }
.momentum__axis { grid-column: 2; grid-row: 2; }
.mo-mark { position: absolute; width: .6rem; height: .6rem; margin-left: -.3rem; background: var(--team); transform: rotate(45deg); box-shadow: 0 0 8px var(--team), 0 0 0 1px #05060F; }
.mo-mark--ember { top: -.1rem; } .mo-mark--tide { bottom: -.1rem; }
.mo-bline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--team); opacity: .35; }
.momentum__key { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--ink-3); }
.momentum__key i { width: .5rem; height: .5rem; background: linear-gradient(135deg, var(--ember) 50%, var(--tide) 50%); transform: rotate(45deg); }
.stats__load { display: inline-flex; align-items: center; gap: .2rem; }
.stats__load .glyph { width: 1.05rem; height: 1.05rem; }
.stats__load .minifleet__slot { width: 1.25rem; height: 1.25rem; color: var(--team-l); }
.stats__table td.stats__loadcell { text-align: left; }
.momentum__lbl { font-family: var(--f-display); font-size: .66rem; font-weight: 600; letter-spacing: .16em; color: var(--team); opacity: .85; }
.momentum__lbl--down { text-align: left; }
.mo-tick { stroke: rgba(160, 175, 255, .1); stroke-width: 1; }
.mo-zero { stroke: rgba(200, 212, 255, .35); stroke-width: 1; stroke-dasharray: 4 4; }
.mo-area--ember { fill: color-mix(in srgb, var(--ember) 30%, transparent); }
.mo-area--tide { fill: color-mix(in srgb, var(--tide) 30%, transparent); }
.mo-line { fill: none; stroke: var(--ink-warm); stroke-width: 2; }
.momentum__axis { position: relative; height: 1.1rem; margin-top: .2rem; }
.momentum__axis span { position: absolute; transform: translateX(-50%); font-family: var(--f-mono); font-size: .66rem; color: var(--ink-3); }
.momentum__axis span:first-child { transform: none; }
.momentum__axis span:last-child { transform: translateX(-100%); }
.momentum__axis span.is-end { color: var(--ink-2); }
.momentum__empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: .9rem; }
.stats { overflow: auto; min-height: 0; }
.stats__table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.stats__table th, .stats__table td { padding: .32rem .45rem; text-align: right; white-space: nowrap; }
.stats__table thead th { font-family: var(--f-display); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.stats__table td { font-family: var(--f-mono); font-size: .82rem; color: var(--ink-2); }
.stats__table tbody tr { border-bottom: 1px solid rgba(150, 168, 255, .07); }
.stats__table tbody tr.is-me { background: rgba(255, 211, 77, .07); }
.stats__table tbody tr.is-me td { color: var(--ink); }
.stats__pilot { text-align: left !important; }
.stats__table tbody th { font-weight: 600; }
.stats__table th, .stats__table td { vertical-align: middle; }
.stats__who { display: flex; align-items: center; gap: .45rem; }
.stats__bar { width: 3px; height: 1.1rem; background: var(--team); box-shadow: 0 0 6px var(--team); }
.stats__name { font-family: var(--f-display); font-size: .95rem; overflow: hidden; text-overflow: ellipsis; max-width: 9rem; }

.debrief__foot { display: flex; align-items: center; gap: 1.2rem; }
.vote { display: flex; align-items: center; gap: .9rem; }
.vote__body { display: flex; flex-direction: column; gap: .2rem; }
.vote__q { font-family: var(--f-display); font-size: 1.1rem; font-weight: 600; letter-spacing: .04em; }
.vote__text { font-size: .9rem; color: var(--ink-2); }
.votepips { display: flex; gap: .35rem; }
.votepips i { width: .8rem; height: .8rem; border: 1px solid var(--gold); transform: rotate(45deg); }
.votepips i.is-on { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.debrief__actions { margin-left: auto; display: flex; gap: .6rem; }
.debrief__actions .btn--primary.is-on { background: linear-gradient(180deg, #B6FFD8, var(--ok)); }

/* ════════════════════════ SETTINGS ════════════════════════ */
.settings { height: 100%; display: grid; place-items: center; padding: var(--gutter); overflow-y: auto; }
.settings__panel { width: min(62rem, 100%); padding: 1.3rem 1.6rem 1.6rem; --team: var(--gold); }
.settings__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.settings__title { font-family: var(--f-display); font-size: 1.8rem; font-weight: 700; letter-spacing: .08em; }
.settings__head .btn:last-child { margin-left: auto; }
.settings__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2.4rem; align-items: start; }
.settings__col { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
.setgroup { display: flex; flex-direction: column; gap: .85rem; }
.setgroup__title { font-family: var(--f-display); font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.setrow__label { display: flex; flex-direction: column; font-size: 1rem; }
.setrow__hint { font-size: .8rem; color: var(--ink-3); }
.setrow .field__input { max-width: 14rem; }
.setrow--cb { justify-content: flex-start; }
.swatches { display: flex; gap: .3rem; margin-left: auto; }
.swatch { width: 1.4rem; height: 1.4rem; background: var(--team); box-shadow: 0 0 10px var(--team); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.screen.is-overlay .settings { background: none; }

/* ════════════════════════ HOW TO PLAY ════════════════════════ */
.howto { height: 100%; padding: 1.2rem var(--gutter); overflow: hidden; }
.howto__panel { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1rem; max-width: 110rem; margin: 0 auto; }
.howto__head { display: flex; align-items: center; gap: 1.2rem; }
.howto__title { font-family: var(--f-display); font-size: 1.8rem; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.howto__lede { color: var(--ink-2); font-size: 1.05rem; max-width: 44rem; }
.howto__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem); gap: 1rem; min-height: 0; overflow-y: auto; padding-right: .3rem; align-items: start; }
.howto__main { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.howto__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; align-content: start; }
.howcard__art { height: 11.5rem; }
/* The diagrams are wide strips (360 × 124): the art box caps their width too, so on big screens a label never
   outgrows the body text (≈ 11 px at 720p, ≈ 17 px at 1080p). */
.howcard { display: flex; flex-direction: column; gap: .4rem; padding: .9rem 1rem 1rem; background: linear-gradient(180deg, rgba(26, 31, 66, .66), rgba(9, 11, 26, .72)); border: 1px solid var(--line); }
.howcard__art > .diagram { position: absolute; top: .4rem; left: 50%; translate: -50% 0; width: min(100%, 28rem); height: calc(100% - .8rem); max-height: none; }
.howcard__art { position: relative; margin-bottom: .2rem; background: radial-gradient(80% 90% at 50% 50%, rgba(27, 17, 64, .5), transparent); border-bottom: 1px solid var(--line); }
.howcard__title { font-family: var(--f-display); font-size: 1.2rem; font-weight: 700; letter-spacing: .03em; }
.howcard__text { font-size: 1rem; color: var(--ink-2); line-height: 1.4; max-width: 38rem; }
.howto__controls .panel__title, .howto__rules .panel__title { margin-bottom: .7rem; display: block; }
.howto__rules { padding: .75rem 1rem .85rem; }
.howto__rules .panel__title { margin-bottom: .5rem; }
.controls { margin: 0; display: flex; flex-direction: column; gap: .38rem; }
.controls__row { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); align-items: center; gap: .6rem; }
.controls__row dt { display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; }
.controls__row dd { margin: 0; font-size: .92rem; color: var(--ink-2); }
.controls__or { color: var(--ink-3); margin: 0 .15rem; }
.keys { display: inline-flex; gap: .2rem; }
.rules { margin: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem .9rem; }
.rules__row { padding-left: .6rem; border-left: 1px solid var(--line-2); }
.rules__row dt { font-family: var(--f-display); font-weight: 600; font-size: .9rem; color: var(--gold); letter-spacing: .03em; }
.rules__row dd { margin: .1rem 0 0; font-size: .84rem; line-height: 1.26; color: var(--ink-2); }

.diagram { width: 100%; height: 100%; max-height: 11rem; overflow: visible; }
.dg-pyre { fill: #FFF4E0; }
.dg-arrowhead { fill: rgba(220, 226, 255, .8); }
.dg-path { fill: none; stroke: rgba(220, 226, 255, .55); stroke-width: 1.6; stroke-dasharray: 5 5; }
.dg-flare { fill: none; stroke: #FFF4E0; stroke-width: 2; stroke-dasharray: 2 4; }
.dg-shard { color: #FFFFFF; filter: drop-shadow(0 0 4px #A8F4FF) drop-shadow(0 0 6px #FFD27A); }
.dg-shards path { stroke: var(--team); stroke-width: 2; }
.dg-label { font-family: var(--f-display); font-size: 13px; font-weight: 600; letter-spacing: .06em; fill: var(--ink-2); }
.dg-label--hot { fill: var(--gold); }
.dg-label--gold { fill: var(--gold); }
.dg-label--danger { fill: #FF8FA0; }
.dg-label--soft { fill: var(--ink-3); font-weight: 500; }
.dg-label--node { fill: var(--ink); font-size: 13.5px; }
.dg-label--ok { fill: var(--ok); font-weight: 500; }
.dg-ring { fill: none; stroke: rgba(255, 244, 224, .3); stroke-width: 1.2; }
.dg-bubble { fill: rgba(124, 242, 182, .06); stroke: rgba(124, 242, 182, .55); stroke-width: 1.2; stroke-dasharray: 5 4; }
.dg-badge circle { fill: var(--void-2); stroke: rgba(170, 186, 255, .5); stroke-width: 1; }
.dg-badge text { font-family: var(--f-mono); font-size: 8.5px; font-weight: 700; fill: var(--ink-2); }
.dg-well { fill: none; stroke: rgba(184, 166, 255, .25); stroke-width: 1; stroke-dasharray: 3 4; }
.dg-fling { fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 5px var(--gold)); stroke-dasharray: 10 6; animation: dg-flow 1.4s linear infinite; }
@keyframes dg-flow { to { stroke-dashoffset: -32; } }
.dg-deadly { fill: none; stroke: var(--danger); stroke-width: 1.6; stroke-dasharray: 4 4; opacity: .75; }
.dg-x { stroke: var(--danger); stroke-width: 2.4; stroke-linecap: round; }
.dg-landing { fill: rgba(255, 211, 77, .08); stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: 4 3; }
.dg-edge { fill: none; stroke: rgba(220, 226, 255, .55); stroke-width: 1.6; }
.dg-node circle { fill: rgba(9, 11, 26, .9); stroke: rgba(255, 244, 224, .35); stroke-width: 1.2; }
.dg-node { color: var(--ink-warm); }
.gate { overflow: visible; }
.gate__seg { fill: none; stroke: var(--team); stroke-width: 4.2; stroke-linecap: butt; filter: drop-shadow(0 0 2px var(--team)); transition: stroke .3s, opacity .3s; }
.gate__seg.is-broken { stroke: rgba(200, 212, 255, .18); stroke-width: 2; stroke-dasharray: 2 2; filter: none; }
.gate__core { fill: var(--team); fill-opacity: .25; stroke: var(--team); stroke-opacity: .5; stroke-width: 1; }

/* ════════════════════════ narrow / short screens ════════════════════════ */
@media (max-height: 760px) {
  /* Short screens: counters shrink to glyphs (names stay in the tooltip) so the rule line always fits. */
  .unitcard .gchip > span { display: none; }
  .unitcard__counters { flex-wrap: nowrap; }
  .unitcard__role { font-size: .74rem; }
  .unitcard__rule { font-size: .8rem; }
  .howcard__art { height: 7.8rem; }
  .howcard__text { font-size: .94rem; }
}
/* Below the supported minimum (1024×640) only: stack columns and let dense screens scroll. */
@media (max-width: 900px) {
  .title__body { grid-template-columns: 1fr; }
  .hangar__grid { grid-template-columns: 1fr 1.4fr; }
  .hangar__side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .hangar { overflow-y: auto; grid-template-rows: auto auto auto; }
  .unitcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .howto__cards { grid-template-columns: 1fr; }
  .howto__body { grid-template-columns: 1fr; }
  .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings__grid { grid-template-columns: 1fr; }
}

/* ── Hangar roster / map fit (short screens: 3v3 with last-game openings must fit without scrolling) ── */
.hangar__roster { padding-top: .7rem; }
.roster__legend { margin-left: auto; font-family: var(--f-mono); font-size: .62rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.callmap { max-width: calc(27vh * 5040 / 2920); margin: 0 auto; }
@media (max-height: 800px) {
  /* A 3v3 rematch roster is 2 headers + 6 rows with last-game openings: the map gives up a little height for it. */
  .callmap { max-width: calc(22.5vh * 5040 / 2920); }
  .hangar__call .panel__head { margin-bottom: .35rem; }
  .roster { gap: .4rem; }
  .roster__team { gap: .15rem; }
  .roster__row { min-height: 1.55rem; padding: .05rem .4rem; }
  .roster__name { font-size: .88rem; }
  .minifleet__slot { width: 1.15rem; height: 1.15rem; }
  .roster__teamname { font-size: .72rem; }
}

/* ── 1024-class screens (1024×640 … ~1180 wide): same layouts as 720p, tighter copy ── */
@media (max-width: 1180px) {
  /* Panel asides repeat what the controls already say; the room goes to the content. */
  .hangar__fleet .panel__head > .panel__aside, .hangar__call .panel__head > .panel__aside { display: none; }
  .hangar__call .panel__head > .btn { margin-left: auto; }
  .unitcard__role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .seat__hint { display: none; }
  .rules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-height: 680px) {
  .howcard__art { height: 7.2rem; }
  .howto__cards, .howto__main { gap: .7rem; }
  .callmap { max-width: calc(20vh * 5040 / 2920); }
  .hangar__modules .modcard { padding: .55rem .7rem; }
}