.crew[hidden] { display: none; }
.crew { position: fixed; inset: 0; z-index: 55; color: #e9e7d2; background: #071824ed; overflow: auto;
  font: 500 16px/1.5 "Oxanium", sans-serif; padding: clamp(12px, 3vw, 36px); box-sizing: border-box; }
.crew * { box-sizing: border-box; }
.crew-shell { max-width: 1100px; min-height: min(650px, 90dvh); margin: auto; border: 1px solid #b6cbac40;
  border-radius: 22px; padding: clamp(16px, 3vw, 32px); background: linear-gradient(130deg, #153b39e8, #0b2033f5 65%), url(assets/title-farm-v210.png) center/cover;
  box-shadow: 0 30px 90px #0009, inset 0 1px #e5edcc35, inset 0 -5px #020c1670; }
.crew header, .crew-actions, .crew-hud { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.crew header { margin-bottom: 22px; }
.crew h1 { font-size: clamp(25px, 4vw, 42px); line-height: 1.12; margin: 5px 0; letter-spacing: -.035em; }
.crew h2 { font-size: 23px; margin: 5px 0 10px; }
.crew p { margin: 8px 0 15px; }
.crew-kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #9ed4bb; }
.crew-muted { color: #b5c8c4; font-size: 14px; }
.crew-connection { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; margin: 14px 0 20px; border: 1px solid #a7c5b433; border-radius: 10px; background: #071b27aa; font-size: 14px; }
.crew-connection [data-state="online"] { color: #ade5c4; }
.crew-connection [data-state="offline"] { color: #ecd1a0; }
.crew-connection button { flex: 0 0 auto; font-size: 13px; }
.crew-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 20px 0; }
.crew-card { background: linear-gradient(150deg, #38574b80, #091b2de0); border: 1px solid #aac3a938; border-radius: 15px;
  padding: 22px; box-shadow: inset 0 1px #e4e0b31a, 0 6px 0 #04101d75; }
.crew-card .crew-symbol { font-size: 34px; color: #e2c791; display: block; margin-bottom: 16px; }
.crew button, .crew input, .crew select { font: inherit; color: inherit; border: 1px solid #b7ceb558; border-radius: 9px; background: #0c2631;
  padding: 10px 15px; min-height: 44px; max-width: 100%; }
.crew button { cursor: pointer; box-shadow: inset 0 1px #ededd222, 0 3px #06151c; transition: background .12s, transform .12s; }
.crew button:hover:not(:disabled) { background: #315749; transform: translateY(-1px); }
.crew button:disabled { opacity: .5; cursor: wait; }
.crew-body > button { margin: 5px 8px 5px 0; }
.crew .crew-primary { background: linear-gradient(#b8d4a6, #87b59a); color: #102c2c; border-color: #d4e5b5; font-weight: 700; }
.crew :focus-visible { outline: 3px solid #efcb85; outline-offset: 3px; }
.crew label { display: grid; gap: 6px; margin: 12px 0; max-width: 420px; }
.crew details { margin-top: 20px; }
.crew summary { cursor: pointer; color: #cddac4; }
.crew-notice { min-height: 24px; color: #efd3a0; font-size: 14px; }
.crew-code { font-size: 28px; letter-spacing: .14em; font-weight: 700; color: #cfe6b7; }
.crew-seats { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
.crew-seat { flex: 1 1 160px; border: 1px solid #89a69c55; border-radius: 12px; padding: 16px; background: #0d2735; }
.crew-seat[data-pilot="0"] { border-top: 3px solid #78e2ca; }
.crew-seat[data-pilot="1"] { border-top: 3px solid #e0b46e; }
.crew-field { display: block; width: min(100%, calc((100dvh - 185px) * 1.7857)); height: auto; aspect-ratio: 1000/560;
  border: 1px solid #b0c7b244; border-radius: 12px; margin: 10px auto; background: #0b1c2d; touch-action: none; }
.crew.playing { padding: 10px; }
.crew.playing .crew-shell { padding: 12px 16px; min-height: 0; }
.crew.playing header { margin-bottom: 6px; }
.crew.playing h1 { font-size: 21px; }
.crew.playing .crew-kicker { display: none; }
.crew-hud { font-size: 14px; color: #c7d9cb; }
.crew-score { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.crew-toolbar { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.crew-toolbar button { font-size: 13px; padding: 5px 12px; }
.crew-help { font-size: 12px; text-align: center; color: #a6bcb4; }
.crew table { width: 100%; border-collapse: collapse; margin: 15px 0; }
.crew th, .crew td { text-align: left; padding: 9px; border-bottom: 1px solid #b8c7b333; }
.crew-receipt { max-width: 720px; margin: 20px auto; border: 1px solid #c4cba259; border-radius: 12px; padding: 26px;
  background: linear-gradient(120deg, #394b35, #102b32); }
.crew-bindings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.crew-bindings button { display: flex; justify-content: space-between; gap: 12px; }
.crew-touch { display: none; }
.crew-touch button.is-held { background: #5a8270; color: #fff6d8; transform: translateY(2px); }
@media (pointer: coarse) { .crew-touch { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; } }
@media (max-width: 700px) { .crew-grid { grid-template-columns: 1fr; } .crew-shell { min-height: 0; }
  .crew-card { padding: 18px; } .crew-card .crew-symbol { float: right; margin: 0 0 10px 10px; }
  .crew header { align-items: flex-start; } .crew-actions { justify-content: flex-start; }
  .crew table { font-size: 13px; } .crew th, .crew td { padding: 6px; } }
@media (max-height: 500px) and (min-width: 650px) {
  .crew.playing { padding: 4px; } .crew.playing .crew-shell { padding: 4px 10px; }
  .crew.playing header { position: absolute; right: 14px; top: 10px; } .crew.playing header h1 { display: none; }
  .crew.playing header button { min-height: 30px; padding: 3px 8px; font-size: 12px; }
  .crew-hud { padding-right: 85px; } .crew-field { width: min(100%, calc((100dvh - 112px) * 1.7857)); margin: 5px auto; }
  .crew-toolbar button { min-height: 28px; padding: 2px 8px; } .crew-help { margin: 3px 0 !important; }
  .crew.playing .crew-notice { margin: 2px 0; min-height: 18px; }
}
@media (prefers-reduced-motion: reduce) { .crew button { transition: none; } }
@media (pointer: coarse) {
  .crew.playing .crew-field { width: min(100%, calc((100dvh - 280px) * 1.7857)); }
  .crew.playing .crew-help { display: none; }
  .crew-touch { touch-action: none; }
  .crew-touch button { min-width: 44px; min-height: 44px; padding: 6px 10px; }
}
@media (pointer: coarse) and (max-height: 500px) and (min-width: 650px) {
  .crew.playing .crew-field { width: min(100%, calc((100dvh - 190px) * 1.7857)); }
  .crew.playing .crew-toolbar button, .crew.playing header button { min-height: 44px; }
  .crew.playing .crew-hud { min-height: 44px; padding-right: 112px; }
}
/* Flight fills the viewport, with controls over its quiet edges. */
.crew.playing { padding: 0; overflow: hidden; background: #102c3b; }
.crew.playing .crew-shell { position: relative; max-width: none; width: 100%; height: 100dvh; min-height: 0; padding: 0; border: 0; border-radius: 0; background: #102c3b; }
.crew.playing header { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.crew.playing .crew-body { position: absolute; inset: 0; }
.crew.playing .crew-field { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(100vw, calc(100dvh * 1.785714)); height: auto; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
.crew.playing .crew-hud { position: absolute; z-index: 2; top: max(8px,env(safe-area-inset-top)); left: max(12px,env(safe-area-inset-left)); right: max(150px,env(safe-area-inset-right)); min-height: 0; padding: 6px 10px; gap: 4px 16px; justify-content: flex-start; background: #102632cc; border-radius: 8px; pointer-events: none; font-size: 12px; }
.crew.playing .crew-objective { max-width: 530px; }
.crew.playing .crew-score { color: #f2d6a0; white-space: nowrap; }
.crew.playing .crew-flight-menu { position: absolute; z-index: 5; top: max(8px,env(safe-area-inset-top)); right: max(10px,env(safe-area-inset-right)); margin: 0; max-width: min(350px,90vw); border-radius: 9px; background: #0c2631f5; border: 1px solid #c1d5b644; }
.crew-flight-menu summary { min-height: 44px; padding: 10px 12px; font-size: 12px; }
.crew-flight-menu .crew-toolbar { padding: 10px; }
.crew.playing .crew-toolbar button { min-height: 44px; }
.crew.playing .crew-bank-consent { position: absolute; z-index: 6; top: 64px; right: 12px; max-width: min(340px,90vw); padding: 14px; border-radius: 12px; background: #102c36f5; border: 1px solid #dfc88c; }
.crew.playing .crew-help { position: absolute; bottom: 6px; left: 0; right: 0; margin: 0; pointer-events: none; }
.crew.playing .crew-notice { position: absolute; z-index: 4; bottom: max(6px,env(safe-area-inset-bottom)); left: 25%; right: 25%; margin: 0; text-align: center; pointer-events: none; }
.crew.playing .crew-notice:empty { display: none; }
@media (pointer: coarse) {
  .crew.playing .crew-touch { display: block; position: absolute; inset: 0; pointer-events: none; }
  .crew-touch button { pointer-events: auto; position: absolute; width: 54px; height: 54px; min-width: 54px; padding: 0; border-radius: 50%; background: #143a4299; border: 1px solid #beded070; color: #ebf5d9; font-size: 12px; touch-action: none; }
  .crew-touch button[data-action="left"] { left: max(12px,env(safe-area-inset-left)); bottom: 64px; }
  .crew-touch button[data-action="right"] { left: max(124px,calc(env(safe-area-inset-left) + 112px)); bottom: 64px; }
  .crew-touch button[data-action="up"] { left: max(68px,calc(env(safe-area-inset-left) + 56px)); bottom: 119px; }
  .crew-touch button[data-action="down"] { left: max(68px,calc(env(safe-area-inset-left) + 56px)); bottom: max(9px,env(safe-area-inset-bottom)); }
  .crew-touch button[data-action="beam"] { right: max(15px,env(safe-area-inset-right)); bottom: 66px; width: 68px; height: 68px; color: #adf0d4; }
  .crew-touch button[data-action="fire"] { right: max(91px,calc(env(safe-area-inset-right) + 76px)); bottom: 25px; }
  .crew-touch button[data-action="shield"] { right: max(91px,calc(env(safe-area-inset-right) + 76px)); bottom: 92px; color: #bdd7ff; }
  .crew-touch button[data-action="dodge"] { right: max(23px,calc(env(safe-area-inset-right) + 8px)); bottom: 147px; }
  .crew.playing .crew-help { display: none; }
}

.crew-touch button[data-action="left"], .crew-touch button[data-action="right"], .crew-touch button[data-action="up"], .crew-touch button[data-action="down"] { font-family: system-ui, sans-serif; font-size: 22px; }

.crew-upgrades:not([hidden]) { position: absolute; z-index: 20; inset: 12px; margin: auto; max-width: 760px; max-height: calc(100dvh - 24px); overflow: auto; padding: 20px; background: #10212bf5; border: 1px solid #82ceb0; border-radius: 16px; box-shadow: 0 18px 70px #0008; }
.crew-upgrades button { display: block; width: 100%; min-height: 44px; margin: 8px 0; text-align: left; }
.crew-upgrades h2 { font-size: clamp(18px, 3vw, 26px); }
@media (max-height: 500px) { .crew-upgrades:not([hidden]) { padding: 12px; } .crew-upgrades button { display: inline-block; width: calc(50% - 10px); margin: 4px; vertical-align: top; } }
.crew .crew-primary { transition: transform .12s; }
.crew .crew-primary:hover:not(:disabled) { background: #c4dfb4; color: #102c2c; }
.crew button.crew-pad-selected { outline: 3px solid #efcb85; outline-offset: 2px; }