:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #233d40;
  background: #f5f5ef;
  font-synthesis: none;
  --ink: #233d40;
  --muted: #6b7a77;
  --line: #dce0d7;
  --blue: #286571;
  --orange: #c27042;
  --paper: #fbfbf6;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button, select { font: inherit; }
button {
  cursor: pointer; color: inherit; border: 1px solid var(--line); background: var(--paper);
  border-radius: 6px; padding: 10px 13px; transition: background .15s, border-color .15s;
}
button:hover:not(:disabled) { background: #e9eee6; border-color: #9baea5; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid #d59a54; outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .45; }
.masthead {
  height: 82px; padding: 0 32px; display: flex; align-items: center;
  justify-content: space-between; border-bottom: 1px solid var(--line); background: var(--paper);
}
.brand { display: flex; gap: 13px; align-items: center; color: var(--ink); text-decoration: none; font-size: 24px; font-weight: 850; letter-spacing: 2px; }
.brand-icon { width: 39px; height: 39px; background: var(--ink); color: #f6f6ec; display: grid; place-items: center; border-radius: 6px; font-size: 25px; font-weight: 700; }
.brand small { display: block; font-size: 9px; font-weight: 600; letter-spacing: 2px; margin-top: 1px; }
.mode { font-size: 10px; letter-spacing: 1.7px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.mode i, .tiny-dot { height: 6px; width: 6px; background: #809b63; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.quiet { background: transparent; font-size: 12px; }
.quiet span { margin-left: 14px; font-size: 18px; }
main { display: grid; grid-template-columns: 330px minmax(0, 1fr); grid-template-rows: minmax(min-content, calc(100vh - 174px)) auto; }
.panel { padding: 26px 24px 16px; border-right: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; min-width: 0; }
.round-line { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; }
.tag { background: #edf0e8; color: #778272; font-size: 8px; padding: 5px 6px; border-radius: 3px; letter-spacing: .6px; }
.phase-track { display: flex; gap: 22px; margin: 25px 0 26px; border-bottom: 1px solid var(--line); color: #98a199; font-size: 11px; }
.phase-track span { padding-bottom: 10px; }
.phase-track .current { border-bottom: 2px solid var(--blue); color: var(--ink); font-weight: 650; }
h2 { font-size: 26px; font-weight: 600; letter-spacing: -.8px; margin: 8px 0 10px; }
.eyebrow { font-size: 9px; letter-spacing: 2px; color: var(--muted); font-weight: 700; }
.intro { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 0 0 23px; }
.roster { display: grid; gap: 7px; margin-bottom: 23px; }
.mech-card { display: flex; align-items: center; text-align: left; gap: 11px; padding: 12px; width: 100%; background: transparent; }
.mech-card.selected { border-color: var(--blue); background: #edf3ee; }
.mech-icon { font-size: 20px; border: 1px solid #b1c5c0; border-radius: 5px; width: 33px; height: 33px; flex-shrink: 0; display: grid; place-items: center; color: var(--blue); }
.mech-card strong { font-size: 11px; letter-spacing: 1px; display: block; }
.mech-card small { font-size: 10px; display: block; margin-top: 5px; color: var(--muted); }
.mech-readouts { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.mech-readouts .count { font-size: 9px; font-variant-numeric: tabular-nums; color: var(--muted); }
.heat-value { font: 10px ui-monospace, monospace; border: 1px solid #cbd6c7; background: #f3f4e9; padding: 3px 5px; border-radius: 3px; color: #52664f; }
.heat-value.has-heat { color: #a24a28; background: #faecda; border-color: #dab894; }
.structure-value { font-size: 9px; color: #64785e; }
.section-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 10px; letter-spacing: 1.4px; font-weight: 700; }
.text-button { border: 0; padding: 0; background: transparent; font-size: 10px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.primary { background: var(--ink); border-color: var(--ink); color: white; font-size: 12px; font-weight: 550; padding: 13px 18px; }
.primary:hover:not(:disabled) { background: #345a5b; border-color: #345a5b; }
.lock { width: 100%; margin-top: 22px; display: flex; justify-content: space-between; }
.plan-hint { font-size: 10px; line-height: 1.5; color: var(--muted); margin: 9px 0 0; }
.preview-hint { padding-left: 10px; border-left: 2px dashed #328d9a; min-height: 30px; margin-top: 14px; }
.panel-foot { margin-top: auto; padding-top: 25px; display: flex; align-items: center; gap: 7px; font-size: 9px; color: var(--muted); }
.chip-loss { font-size: 11px; color: #a14c30; background: #faecdd; padding: 9px; border-left: 2px solid #c27042; line-height: 1.6; }

/* Arena and camera controls. */
.arena { position: relative; min-height: 500px; overflow: hidden; background: #e8ebe1; }
.arena-heading { position: absolute; top: 28px; left: 32px; right: 30px; display: flex; justify-content: space-between; z-index: 1; pointer-events: none; }
h1 { font-size: 29px; letter-spacing: -1.1px; font-weight: 500; margin: 7px 0; }
.arena-number { font-size: 8px; letter-spacing: 1.4px; line-height: 1.7; text-align: right; color: #889284; }
.arena-number b { font-size: 24px; font-weight: 400; }
#viewport { position: absolute; inset: 0; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.view-controls { position: absolute; bottom: 64px; right: 24px; display: flex; gap: 5px; }
.view-controls button { background: #f7f9f0da; font-size: 10px; padding: 8px 10px; backdrop-filter: blur(10px); }
.arena-footer { position: absolute; bottom: 0; left: 0; right: 0; min-height: 44px; border-top: 1px solid #c9d0c1; display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 12px 24px; font-size: 9px; color: #687868; background: #e9ede3dc; }
.arena-footer span:first-child { letter-spacing: 1px; white-space: nowrap; }
.team-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.blue { background: var(--blue); }
.orange { background: var(--orange); margin-left: 16px; }
.move-status { position: absolute; bottom: 74px; left: 26px; font-size: 11px; color: #5d7167; }
.activity { grid-column: 1/-1; display: flex; gap: 45px; padding: 19px 28px; border-top: 1px solid var(--line); min-height: 92px; background: var(--paper); }
.activity > div { min-width: 245px; }
.activity .eyebrow { display: block; margin-bottom: 7px; }
#connection { font-size: 10px; color: var(--muted); }
#log { margin: 0; padding: 0; list-style: none; display: flex; gap: 30px; align-items: center; flex-wrap: wrap; font-size: 11px; color: #66766d; }
#log li { border-left: 2px solid #c8d2c0; padding-left: 10px; max-width: 260px; }
.resolution-card { background: #edf1e8; padding: 20px 17px; border: 1px solid var(--line); border-radius: 6px; margin: 20px 0; }
.resolution-card b { font-size: 32px; font-weight: 400; display: block; margin: 5px 0; }
.resolution-card p { font-size: 12px; line-height: 1.8; color: var(--muted); margin: 8px 0 0; }
.playback { display: flex; gap: 7px; flex-wrap: wrap; }
.playback button { font-size: 11px; }
.playback select { background: var(--paper); border: 1px solid var(--line); border-radius: 5px; font-size: 11px; color: var(--ink); padding: 8px; }
.actions { display: grid; gap: 8px; }
.team-2 h2, .team-2 .eyebrow { color: #a8653d; }
.team-2 .mech-card.selected { border-color: #b87a4d; background: #f7efe4; }
.team-2 .mech-icon { color: #a8653d; border-color: #d8c2a9; }
dialog { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); max-width: 410px; padding: 34px; box-shadow: 0 25px 100px #233d4033; }
dialog::backdrop { background: #1b303875; backdrop-filter: blur(7px); }
dialog p { font-size: 13px; color: var(--muted); line-height: 1.8; margin-bottom: 24px; }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; }
#error { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #fff5e7; color: #7b3b25; border: 1px solid #cb9a74; z-index: 5; padding: 12px 18px; border-radius: 8px; max-width: 90vw; font-size: 12px; box-shadow: 0 5px 25px #0002; }
#error button { margin-left: 15px; font-size: 11px; }
#error[hidden] { display: none; }

/* Physical drive bays and command disks. */
.drive-rack { background: #34484a; border: 1px solid #253a3c; border-radius: 9px; padding: 12px 10px 9px; box-shadow: inset 0 1px #ffffff26, 0 3px 0 #243638; color: #e3eadf; }
.drive-rack .section-label { font-size: 9px; letter-spacing: 1px; margin-bottom: 14px; }
.drive-rack .text-button { color: #b5c4b6; font-size: 9px; }
.slots { display: flex; }
.drive-rack .slots { gap: 7px; margin: 0; }
.drive-bay { flex: 1; min-width: 0; }
.bay-header { height: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 8px; letter-spacing: 1px; color: #aebeb0; margin-bottom: 5px; }
.bay-header > span { white-space: nowrap; }
.drive-led { display: inline-block; width: 4px; height: 4px; background: #708379; border-radius: 50%; margin-right: 4px; }
.drive-led.loaded { background: #c7e48d; box-shadow: 0 0 5px #cae88c88; }
.eject { padding: 0 3px; line-height: 16px; font-size: 13px; background: #415958; border: 1px solid #5a7067; color: #d4ddca; border-radius: 2px; }
.drive-rack .slot { width: 100%; height: 152px; position: relative; padding: 8px 5px 5px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; background: #233436; border: 1px solid #17292c; border-bottom-color: #61766c; box-shadow: inset 0 5px 9px #0e202a77; border-radius: 5px; overflow: hidden; }
.drive-rack .slot:hover { background: #293f40; }
.drive-rack .slot.active { border: 1px solid #c5d897; box-shadow: inset 0 5px 9px #0e202a66, 0 0 0 1px #c5d89733; }
.slot-rule { color: #b9c8b5; font-size: 8px; font-weight: 500; line-height: 1.3; text-align: center; min-height: 20px; display: grid; place-items: center; }
.empty-bay { height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; border: 1px dashed #6d807477; border-radius: 4px; color: #a2b5a8; font-size: 9px; }
.drive-mouth { height: 8px; width: 70%; background: #101e21; border-radius: 3px; border-bottom: 1px solid #657970; box-shadow: 0 -2px 0 #1c2c2d; }
.insert-arrow { font-size: 21px; color: #aabea9; }
.drive-readout { display: flex; justify-content: space-between; gap: 5px; margin-top: 9px; font: 7px ui-monospace, monospace; letter-spacing: .2px; color: #aebeac; }
.tray-heading { margin: 22px 0 10px; }
.tray-hint { font-weight: 400; letter-spacing: 0; font-size: 10px; color: var(--muted); }
.commands.disk-tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 9px; background: #e9ede4; border: 1px solid #d9e0d2; padding: 11px 9px; border-radius: 7px; box-shadow: inset 0 2px 3px #52644810; }
.disk-item { min-width: 0; cursor: grab; }
.disk-item.dragging { opacity: .5; }
.disk-item .command { width: 100%; display: block; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 3px; }
.disk-item .command:disabled { opacity: .4; }
.disk-item .command:hover:not(:disabled) { background: none; transform: translateY(-3px); }
.disk-shell { --shell: #397681; --edge: #1f5159; display: flex; position: relative; flex-direction: column; align-items: center; gap: 5px; width: 100%; height: 110px; padding: 0 7px 5px; background: var(--shell); border: 1px solid var(--edge); border-radius: 2px 9px 3px 3px; box-shadow: 0 3px 0 var(--edge), inset 2px 0 #ffffff18, inset -2px 0 #00000016; text-align: center; overflow: hidden; }
.disk-turn { --shell: #b39a68; --edge: #7b6740; }
.disk-label { background: #f2f1df; box-shadow: inset 0 0 0 1px #fff9; width: 100%; display: flex; align-items: center; flex-direction: column; padding: 2px 2px 3px; color: #263d40; border-radius: 1px; min-height: 60px; }
.disk-symbol { font-size: 27px; font-weight: 700; line-height: 28px; color: #2d6674; }
.disk-turn .disk-symbol { color: #946638; }
.disk-name { font-size: 9px; font-weight: 650; white-space: nowrap; }
.disk-detail { font-size: 7px; margin-top: 3px; color: #697468; }
.disk-code { width: 100%; display: flex; justify-content: space-between; align-items: center; font: 6px ui-monospace, monospace; letter-spacing: .8px; color: #f4f2df; }
.disk-code i { display: block; width: 5px; height: 5px; background: var(--edge); border: 1px solid #ffffff42; }
.disk-grip { display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: #80907d; padding: 5px 4px 0; line-height: 13px; }
.disk-grip kbd { font: 8px ui-monospace, monospace; color: #667861; }
.disk-stock { font: 8px ui-monospace, monospace; color: #52694f; }
.compact.disk-shell { height: 108px; width: 100%; max-width: 100px; }
.tray-instructions { font-size: 10px; line-height: 1.6; color: var(--muted); margin: 9px 0 0; }
.drive-rack .slot.drop-compatible { outline: 1px dashed #d3e7a7; outline-offset: -4px; }
.drive-rack .slot.drag-over { background: #496358; outline: 2px solid #dbedb1; box-shadow: inset 0 0 20px #a0cc7155; }
.just-inserted .disk-shell { animation: disk-insert .28s ease-out; }
@keyframes disk-insert { from { transform: translateY(-45px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .just-inserted .disk-shell { animation: none; } .disk-item .command { transition: none; } }

@media (min-width: 1600px) { main { grid-template-columns: 370px minmax(0, 1fr); } .panel { padding: 30px; } }
@media (max-width: 800px) {
  .masthead { padding: 0 18px; height: 70px; }
  .mode { display: none; }
  main { grid-template-columns: 290px minmax(0, 1fr); grid-template-rows: minmax(min-content, calc(100vh - 150px)) auto; }
  .panel { padding: 22px 17px; }
  .arena-heading { left: 20px; }
  .arena-number { display: none; }
  h1 { font-size: 22px; }
  .arena-footer { padding: 12px; }
  .arena-footer span:last-child { display: none; }
  .view-controls { left: 15px; right: auto; bottom: 50px; }
  .move-status { bottom: 96px; left: 17px; }
  .activity { gap: 20px; }
  #log li:not(:first-child) { display: none; }
}
@media (max-width: 600px) {
  main { display: flex; flex-direction: column; }
  .arena { order: 0; min-height: 360px; height: 44vh; }
  .panel { order: 1; border-right: 0; border-top: 1px solid var(--line); }
  .activity { order: 2; padding: 16px; display: block; }
  .arena-heading { top: 17px; }
  .panel-foot { padding-top: 20px; }
  .phase-track { margin: 15px 0; }
  .roster { grid-template-columns: 1fr 1fr; }
  .mech-card { padding: 9px; gap: 6px; }
  .mech-icon { display: none; }
  .mech-card strong { font-size: 10px; letter-spacing: .5px; }
  .mech-card small { font-size: 9px; }
  .mech-readouts { gap: 3px; }
  .heat-value { font-size: 8px; padding: 3px; }
  .structure-value, .mech-readouts .count { font-size: 8px; }
  .intro { margin-bottom: 14px; max-width: 420px; }
  #log { margin-top: 14px; }
  .panel h2 { font-size: 23px; }
  .arena-footer { min-height: 33px; padding: 9px; }
  .move-status { bottom: 56px; font-size: 9px; }
  .view-controls { bottom: 47px; left: auto; right: 12px; }
  .view-controls button { font-size: 9px; padding: 7px; }
  .arena-number { display: block; }
  .drive-rack .slot { height: 148px; }
  .commands.disk-tray { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; padding: 10px 7px; }
  .disk-shell { padding: 0 4px 5px; height: 105px; gap: 4px; }
  .disk-name { font-size: 8px; }
  .disk-detail { font-size: 6px; }
  .disk-code { font-size: 5px; letter-spacing: 0; }
  .drive-rack .slots { gap: 10px; }
  .compact.disk-shell { max-width: 105px; }
  .tray-heading { margin-top: 20px; }
}
@media (max-width: 360px) { .commands.disk-tray { grid-template-columns: repeat(3, minmax(0, 1fr)); } .roster { grid-template-columns: 1fr; } }

.chassis-setup { margin: 16px 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
.chassis-setup summary { cursor: pointer; font-weight: 700; }
.chassis-setup label { display: block; margin: 12px 0; }
.chassis-setup select { display: block; width: 100%; padding: 8px; margin-top: 4px; }
.chassis-stats { font-size: 12px; line-height: 1.5; margin-bottom: 16px; }
.chassis-stats small { color: var(--muted); }
.disk-shell.color-blue { background: #487985; }
.disk-shell.color-red { background: #a45c50; }
.disk-shell.color-black { background: #405052; }

.deployment-roster { font-size: 12px; margin: 20px 0; }
.deployment-roster p { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid #d9ded4; padding-bottom: 8px; }
.deployment-inputs { display: flex; gap: 12px; }
.deployment-inputs label { flex: 1; min-width: 0; font-size: 12px; }
.deployment-inputs input { display: block; width: 100%; padding: 10px; margin-top: 6px; border: 1px solid #acb9ad; border-radius: 4px; }
.deployment-turns { display: flex; align-items: center; justify-content: space-between; margin: 16px 0; font-size: 12px; }
.deployment-turns button { padding: 10px; }
#placement-hint { font-size: 12px; line-height: 1.5; min-height: 36px; }

.arena.deploying .arena-heading { display: none; }
.battle-roster {display:grid;gap:10px;margin:20px 0}
.battle-mech {display:grid;gap:4px;padding:12px;border:1px solid var(--line,#bac5b8);border-radius:8px}
.battle-mech span,.battle-mech small {font-size:12px;color:var(--muted)}
.battle-mech.destroyed {opacity:.55}
.dice-row {display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0;font-size:12px}
.dice-row b {min-width:50px}
.combat-die {border:1px solid #9bada3;padding:8px;border-radius:5px;text-transform:capitalize}
.combat-die.success {background:#d0e5bc}.combat-die.critical {background:#ffcfb8;border-color:#b55237}
.actions button[aria-pressed="true"] {outline:2px solid #cc663e;background:#f8e4ca}
#hold-fire {width:100%;margin-top:10px}
.phase-track {flex-wrap:wrap}
.mode-setup {display:grid;gap:8px;margin:16px 0;font-weight:600}
.mode-setup select {width:100%;padding:10px;font:inherit;border:1px solid #bac5b8;border-radius:6px;background:#fff}
.commands.disk-tray.directional-tray {display:flex;flex-direction:column;gap:6px;padding:8px 7px;position:relative;isolation:isolate}
.directional-tray::before {content:"";position:absolute;top:24px;bottom:10px;left:50%;width:2px;background:#acbdae;z-index:-1}
.disk-lane-headings,.disk-tree-row {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.disk-lane-headings {font:9px ui-monospace,monospace;letter-spacing:1px;text-align:center;color:#536b62}
.disk-tree-row {position:relative;align-items:start}
.disk-tree-row::before {content:"";position:absolute;left:16%;right:16%;top:26px;height:1px;background:#acbdae;z-index:-1}
.disk-cell {min-width:0;position:relative}
.disk-node {display:block;margin:23px auto 0;width:7px;height:7px;border:1px solid #acbdae;background:#e9ede4;border-radius:50%}
.directional-tray .disk-shell {height:52px;padding:0 3px 3px;gap:2px;border-radius:2px 5px 2px 2px;box-shadow:0 2px 0 var(--edge)}
.directional-tray .disk-label {min-height:0;height:27px;display:grid;grid-template-columns:20px 1fr;gap:2px;padding:2px}
.directional-tray .disk-symbol {font-size:20px;line-height:22px}
.directional-tray .disk-name {white-space:normal;font-size:9px;line-height:1.1}
.directional-tray .disk-detail {display:none}
.directional-tray .disk-code {font-size:7px;line-height:9px;letter-spacing:0}
.directional-tray .disk-grip {padding:3px 1px 0;gap:2px;font-size:12px;line-height:10px}

/* Etched serial command cards with exposed edge contacts. */
.disk-shell.serial-card {--signal:#87b3b7;display:grid;grid-template-rows:8px 1fr 9px 4px;gap:3px;height:74px;max-width:none;padding:3px 5px 0;background:#293d3e;border:1px solid #15292c;border-left:3px solid var(--signal);border-radius:1px;box-shadow:0 2px 0 #142628;clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,0 100%)}
.disk-shell.serial-card.color-red {--signal:#da9580}
.disk-shell.serial-card.color-black {--signal:#acb6a3}
.serial-card .card-serial {font:7px/8px ui-monospace,monospace;letter-spacing:.4px;color:#b9ccc2;text-align:left;white-space:nowrap}
.serial-card .disk-label {min-height:0;height:100%;display:grid;grid-template-columns:23px 1fr;gap:2px;padding:2px;background:#e9e9d8;box-shadow:none;border-radius:0}
.serial-card .disk-symbol {font-size:21px;line-height:23px}
.serial-card .disk-name {font:600 9px/1.1 ui-monospace,monospace;white-space:normal}
.serial-card .disk-detail {display:none}
.serial-card .disk-code {font:7px/9px ui-monospace,monospace;letter-spacing:0;color:#e1e9d9}
.serial-card .disk-code i {width:4px;height:4px;border:0;background:var(--signal)}
.card-contacts {display:block;justify-self:center;width:80%;height:4px;background:repeating-linear-gradient(90deg,#ccb47c 0 3px,transparent 3px 5px)}
.directional-tray .disk-shell.serial-card {height:52px;grid-template-rows:7px 23px 8px 3px;gap:1px;padding:3px 3px 0}
.directional-tray .serial-card .card-serial {font-size:6px;line-height:7px}
.directional-tray .serial-card .disk-label {grid-template-columns:18px 1fr;padding:1px}
.directional-tray .serial-card .disk-symbol {font-size:19px;line-height:21px}
.directional-tray .serial-card .card-contacts {height:3px}
.drive-rack .slot {height:110px;padding-top:5px}
.empty-bay {height:74px}
.drive-mouth {height:4px;border-radius:0;background:repeating-linear-gradient(90deg,#a49769 0 2px,#101e21 2px 5px)}

/* Command Core orbital terminal. */
:root { color-scheme: dark; color:#e5e9ed; background:#050611; --ink:#e5e9ed; --muted:#929eaf; --line:#30394a; --blue:#80bfd5; --orange:#e5a47e; --paper:#101521; }
.masthead { height:72px; background:#060713; border-bottom:3px solid #30394a; box-shadow:inset 0 -1px #000; }
.brand { gap:14px; font:800 17px/1.05 ui-monospace,monospace; letter-spacing:2px; }
.brand img { width:58px; height:36px; }
.mode,.round-line,.eyebrow,.section-label,.phase-track { font-family:ui-monospace,monospace; }
button,select,dialog,.chassis-setup,.mech-card { border-radius:2px; }
button:hover:not(:disabled) { background:#263344; border-color:#829bad; }
.primary { background:#dbe8e9; border-color:#eff8f7; color:#101a22; box-shadow:0 3px 0 #536770; font-family:ui-monospace,monospace; text-transform:uppercase; letter-spacing:1px; }
.primary:hover:not(:disabled) { background:#fff; border-color:#fff; }
main { grid-template-rows:minmax(min-content,calc(100vh - 144px)) auto; }
.panel { padding:18px 20px; background:linear-gradient(90deg,#121a27,#101521); border-right:3px solid #30394a; box-shadow:inset -1px 0 #000; }
.phase-track { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:16px 0 18px; font-size:10px; color:#82909f; }
.phase-track .current { color:#dbe8e9; border-color:#b9d9de; }
h2 { font-size:22px; letter-spacing:-.5px; margin:7px 0 14px; }
.intro { margin-bottom:14px; line-height:1.5; }
.roster { gap:6px; margin:12px 0; }
.mech-card { padding:9px; background:#131d2a; box-shadow:inset 0 1px #ffffff08; }
.mech-card.selected { background:#1d2e3c; border-color:#83a7b9; }
.mech-icon { border-radius:0; color:#99c5d1; border-color:#47606d; }
.heat-value { background:#1b2b33; color:#c0d4d3; border-color:#415761; border-radius:1px; }
.heat-value.has-heat { background:#37291f; color:#efb98a; border-color:#87603c; }
.structure-value { color:#adbfb9; }
.chassis-stats { font:10px/1.5 ui-monospace,monospace; color:var(--muted); margin:8px 0 14px; }
.chip-loss { color:#ffc59a; background:#35271f; border-color:#de9e72; }
.drive-rack { background:#26383e; border:1px solid #53646b; border-radius:3px; box-shadow:inset 0 1px #81918d55,0 3px 0 #070b12; }
.drive-rack .section-label { margin-bottom:10px; }
.drive-rack .slot { background:#111f28; border-color:#061018; border-bottom-color:#687d7d; border-radius:2px; }
.drive-rack .slot:hover { background:#20333c; }
.drive-rack .slot.active { border-color:#c9ddae; }
.drive-readout { color:#b9ccc0; }
.tray-heading { margin:16px 0 8px; }
.commands.disk-tray { background:#0d1722; border-color:#354650; border-radius:2px; box-shadow:inset 0 2px 5px #0008; }
.directional-tray::before,.disk-tree-row::before { background:#3a5360; }
.disk-node { background:#15222d; border-color:#526e77; }
.disk-lane-headings,.disk-stock,.disk-grip kbd { color:#9eb2bc; }
.disk-grip { color:#8199a6; }
.lock { margin-top:12px; }
.preview-hint { min-height:0; margin-top:10px; }
.plan-hint:empty { display:none; }
.rules-reference { margin-top:18px; padding-top:12px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); line-height:1.6; }
.rules-reference summary { cursor:pointer; font:11px ui-monospace,monospace; text-transform:uppercase; letter-spacing:1px; }
.arena { background:#101722; }
.view-controls button { background:#101b29e8; color:#d0dce4; border-color:#53606e; }
.arena-footer { background:#080e19ed; border-color:#354150; color:#a5b3c3; font-family:ui-monospace,monospace; }
.move-status { color:#d1e4e8; background:#101b29dd; padding:6px 9px; border-left:2px solid #8eb5c1; font-family:ui-monospace,monospace; }
.activity { min-height:72px; padding:14px 24px; gap:24px; background:#090e19; }
.activity>div { min-width:150px; }
#log { color:#a4b5bf; font:10px/1.5 ui-monospace,monospace; }
#log li { border-color:#4b6471; }
.resolution-card { background:#1a2734; border-radius:2px; }
.team-2 h2,.team-2 .eyebrow { color:#efba96; }
.team-2 .mech-card.selected { background:#332922; border-color:#b78a68; }
.team-2 .mech-icon { color:#e4ae83; border-color:#80634b; }
.chassis-setup { margin:10px 0; padding:10px; }
select,.mode-setup select,.deployment-inputs input { background:#09131e; color:#d8e4e9; border:1px solid #465968; }
.mode-setup { font-size:12px; }
.deployment-roster { margin:14px 0; font-size:11px; }
.deployment-roster p { border-color:#303d4b; }
.deployment-turns { margin:12px 0; }
#placement-hint { min-height:0; color:#aabbc4; font-size:11px; }
.battle-mech { border-radius:2px; background:#15202d; }
.combat-die.success { background:#2e4a3b; }.combat-die.critical { background:#654331; border-color:#dcaa85; }
.actions button[aria-pressed="true"] { background:#304858; outline-color:#a7ced8; }
#error { background:#38291f; color:#ffcea9; border-radius:2px; }
@media(min-width:601px) { .arena { position:sticky; top:0; height:calc(100vh - 72px); min-height:500px; max-height:1000px; align-self:start; } }
@media(max-width:600px) { .masthead { height:64px; padding:0 14px; }.brand { font-size:14px; gap:10px; }.brand img { width:48px; height:30px; }.panel { padding:18px 16px; border-right:0; }.roster { gap:6px; }.mech-card { padding:8px 6px; }.move-status { max-width:48%; bottom:54px; }.arena-footer { font-size:8px; }.activity { padding:14px 16px; } }
.serial-card.compact .disk-label { grid-template-columns:16px minmax(0,1fr); padding:1px; }
.serial-card.compact .disk-name { font-size:8px; overflow-wrap:anywhere; }
.serial-card.compact .disk-symbol { font-size:18px; }

/* Select units on the tactical display; keep the console in view. */
.selected-mech { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin:12px 0 4px; font:10px ui-monospace,monospace; }
.selected-mech strong { font-size:13px; margin-right:auto; }
.mech-markers { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.mech-marker { position:absolute; transform:translate(-50%,-100%); pointer-events:auto; white-space:nowrap; padding:5px 7px; font:10px ui-monospace,monospace; background:#17212aee; border:1px solid currentColor; color:#ffe16b; }
.mech-marker[data-orders="ready"] { color:#83ee8c; }
.mech-marker[aria-pressed="true"] { outline:2px solid #e6eff2; outline-offset:3px; }
.mech-marker:disabled { opacity:1; }
.panel-content { width:100%; }
@media(min-width:601px) {
  body { height:100dvh; overflow:hidden; }
  main { height:calc(100dvh - 72px); grid-template-rows:minmax(0,1fr) 52px; }
  .panel { min-height:0; height:100%; overflow:hidden; padding:12px 20px; }
  .arena { position:relative; height:100%; min-height:0; max-height:none; }
  .activity { min-height:0; padding:8px 20px; }
  .activity .eyebrow { margin-bottom:3px; }
  .phase-track { margin:12px 0; }
  .panel h2 { margin:6px 0 10px; }
  .panel .drive-rack .slot { height:94px; }
  .panel .slot-rule:empty { display:none; }
  .panel .tray-heading { margin-top:12px; }
  .panel .rules-reference { margin-top:10px; padding-top:8px; }
  .panel .tray-instructions { font-size:9px; margin-top:6px; }
  .panel .plan-hint { margin-top:6px; }
}
.panel-content { flex-shrink:0; }
.reroll-dice button[aria-pressed="true"] { outline:2px solid #b8dcde; outline-offset:2px; }
#reroll-confirm { display:block; width:100%; margin:18px 0 8px; }
.combat-hud { position:absolute; top:22px; left:50%; transform:translateX(-50%); z-index:2; pointer-events:none; min-width:260px; padding:12px 16px; background:#080e1aee; border:1px solid #67838f; box-shadow:0 4px 24px #0006; font:11px ui-monospace,monospace; }
.combat-hud[hidden] { display:none; }
.combat-heading { display:flex; gap:16px; align-items:center; justify-content:space-between; margin-bottom:8px; }
.combat-heading strong { color:#7eeaff; }.combat-heading span { color:#ffba82; }
.hud-dice { display:flex; gap:5px; align-items:center; margin:5px 0; }.hud-dice b { font-size:9px; color:#9cabb8; margin-right:4px; }
.hud-die { display:inline-block; padding:6px; border:1px solid #46515f; color:#8e9aa6; font-size:9px; }
.hud-die.success { background:#244738; color:#d0efda; }.hud-die.critical { background:#522e62; color:#efc5ff; }
.hud-die.active-die { outline:2px solid #fff; outline-offset:2px; }
#combat-cue { padding-top:8px; color:#d6e5e6; font-weight:bold; letter-spacing:1px; }
#combat-cue[data-kind="armor"] { color:#a7e9ff; }#combat-cue[data-kind="evade"] { color:#b9edcc; }
#combat-cue[data-kind="crit"] { color:#ec83ff; }#combat-cue[data-kind="hit"] { color:#ffb44c; }#combat-cue[data-kind="death"] { color:#ff795d; }
@media(max-width:600px) { .combat-hud { top:10px; min-width:240px; padding:8px 10px; }.hud-die { padding:4px; }.hud-dice { gap:3px; } }
.combat-die.critical { background:#522e62; border-color:#be8cd0; color:#efc5ff; }

/* Round and phase status stay with the battlefield. */
.arena-phases { position:absolute; top:22px; left:24px; right:24px; z-index:2; display:flex; align-items:center; gap:24px; padding:12px 16px; pointer-events:none; }
.arena-phases .round-line { flex-shrink:0; }
.arena-phases .phase-track { flex:1; gap:16px; margin:0; border-bottom:0; }
.arena-phases .phase-track span { position:relative; padding:17px 0 0; white-space:nowrap; text-align:center; --phase-light:#526773; }
.arena-phases .phase-track span::before { content:""; position:absolute; top:3px; left:0; right:0; height:2px; background:var(--phase-light); }
.arena-phases .phase-track span::after { content:""; position:absolute; top:0; left:50%; width:8px; height:8px; transform:translateX(-50%); border:2px solid var(--phase-light); border-radius:50%; background:#23343f; }
.arena-phases .phase-track span:has(~ .current) { --phase-light:#87b6bf; color:#b5ccd0; }
.arena-phases .phase-track span:has(~ .current)::after { background:var(--phase-light); }
.arena-phases .phase-track .current { --phase-light:#a5f3ff; border-bottom:0; color:#e0fbff; text-shadow:0 0 8px #a5f3ff66; }
.arena-phases .phase-track .current::before { box-shadow:0 0 8px #a5f3ff99; }
.arena-phases .phase-track .current::after { background:var(--phase-light); box-shadow:0 0 0 3px #a5f3ff26,0 0 12px #a5f3ff; }
.combat-hud { top:100px; }
@media(max-width:900px) {
  .arena-phases { left:16px; right:16px; flex-direction:column; align-items:stretch; gap:6px; padding:10px 12px; }
  .arena-phases .phase-track { gap:6px; }
  .combat-hud { top:118px; }
}
.weapon-bays{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.weapon-bay{display:flex;gap:2px}.weapon-bay button[aria-pressed="true"]{border-color:#7eeaff;color:#7eeaff}

.combat-die.poise, .hud-die.poise { color:#ffd66b; border-color:#d7ad47; background:#302918; }

/* Compact mech resource readouts. */
.mech-marker>strong,.mech-marker>.mech-resources { display:block; }
.mech-marker>.mech-resources { margin-top:4px; color:#d8e4e9; }
.poise-negative { color:#ff9b88; }
.poise-positive { color:#9cdda5; }
.selected-mech { display:grid; grid-template-columns:1fr; gap:4px; }
.selected-mech .mech-structure { color:var(--muted); font-size:9px; }

.mech-marker { border:0; background:transparent; box-shadow:none; text-shadow:0 1px 3px #000; }
.mech-marker:hover:not(:disabled) { background:transparent; border-color:transparent; }
.mech-marker[aria-pressed="true"] { outline:none; }
.mech-marker:focus-visible { outline:2px solid #d59a54; }

.objective-status { position:absolute; bottom:78px; left:16px; z-index:2; pointer-events:none; padding:8px 10px; background:#080e19e8; border-left:2px solid #c9ddae; color:#dbe8e9; font:10px/1.7 ui-monospace,monospace; white-space:pre-line; max-width:calc(100% - 32px); }
.objective-status[data-control="1"] { border-color:#80bfd5; }
.objective-status[data-control="2"] { border-color:#e5a47e; }
@media(max-width:600px) { .objective-status { bottom:105px; left:8px; padding:5px; font-size:8px; } }
.impact-numbers{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:7}.impact-number{position:absolute;white-space:nowrap;font:900 27px/1.15 ui-monospace,monospace;color:#ffe6a1;text-shadow:-2px -2px 0 #11191c,2px -2px 0 #11191c,-2px 2px 0 #11191c,2px 2px 0 #11191c,0 3px 7px #000;transform-origin:center center}.impact-number[data-kind="crit"]{font-size:32px;color:#ffc66e}.impact-number[data-kind="death"]{font-size:23px;color:#ff9b75}.impact-number[data-kind="armor"],.impact-number[data-kind="evade"]{font-size:20px;color:#b4e4dc}.impact-number[data-kind="miss"]{font-size:18px;color:#b9c2c5}