:root {
  color-scheme: dark;
  --bg: #060817;
  --panel: rgba(7, 14, 34, .94);
  --cyan: #5df6ff;
  --green: #82ff92;
  --yellow: #ffe169;
  --orange: #ff9c52;
  --red: #ff5273;
  --muted: #9bb9c8;
  --line: rgba(93,246,255,.42);
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #01030b; font-family: "Trebuchet MS", Arial, sans-serif; }
body { user-select: none; }
button, select, input { font: inherit; }
#app { position: relative; width: 100vw; height: 100vh; overflow: hidden; background: radial-gradient(circle at 50% 35%, #16265a 0, #070b20 48%, #01030a 100%); }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; image-rendering: pixelated; }
#scanlines { position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: overlay; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.09) 0 1px, transparent 1px 4px); }
.panel { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(760px, calc(100vw - 36px)); max-height: calc(100vh - 36px); overflow: auto; padding: 28px; color: #eafcff; background: linear-gradient(160deg, rgba(13,24,57,.97), rgba(3,8,24,.97)); border: 2px solid var(--line); border-radius: 14px; box-shadow: 0 0 0 3px rgba(0,0,0,.5), 0 0 40px rgba(55,190,255,.22), inset 0 0 30px rgba(93,246,255,.05); }
.panel.wide { width: min(1020px, calc(100vw - 30px)); }
.panel.modal { width: min(840px, calc(100vw - 30px)); z-index: 9; }
.hidden { display: none !important; }
.title-panel { text-align: center; padding-top: 34px; }
.logo-wrap h1 { margin: 0; font-size: clamp(58px, 10vw, 108px); line-height: .9; letter-spacing: .12em; color: var(--yellow); text-shadow: 4px 5px 0 #8b3d22, 0 0 22px rgba(255,225,105,.38); }
.logo-wrap h2 { margin: 10px 0 14px; font-size: clamp(20px, 3vw, 35px); letter-spacing: .28em; color: var(--cyan); }
.eyebrow { color: var(--orange); letter-spacing: .28em; font-size: 12px; font-weight: 800; margin-bottom: 18px; }
.tagline { color: #cce4ed; max-width: 620px; margin: 0 auto 26px; font-size: 16px; }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; max-width: 520px; margin: 0 auto; }
button { min-height: 44px; padding: 10px 16px; border: 1px solid rgba(93,246,255,.55); border-radius: 7px; color: #dffcff; background: linear-gradient(#182b55,#0a1430); cursor: pointer; font-weight: 800; letter-spacing: .05em; box-shadow: inset 0 0 12px rgba(93,246,255,.05); }
button:hover, button:focus-visible { border-color: var(--yellow); color: #fff6bd; transform: translateY(-1px); }
button.primary { color: #041019; background: linear-gradient(#92fff0,#45d5e8); border-color: #d9ffff; }
button.danger { background: linear-gradient(#672236,#321020); border-color: #ff5273; }
button:disabled { opacity: .4; cursor: default; transform: none; }
h2 { margin: 0 0 20px; color: var(--yellow); letter-spacing: .13em; }
h3 { color: var(--cyan); margin: 14px 0 6px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
label { display: grid; gap: 7px; color: #bcd6e1; font-weight: 700; }
select, input[type="text"] { width: 100%; min-height: 42px; color: #e9ffff; background: #07122d; border: 1px solid rgba(93,246,255,.45); border-radius: 6px; padding: 8px 10px; }
input[type="range"] { width: 100%; }
output { color: var(--yellow); }
.player-setup { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.player-card { padding: 12px; border: 1px solid rgba(255,255,255,.16); border-left: 5px solid var(--player); background: rgba(255,255,255,.035); border-radius: 8px; }
.player-card strong { color: var(--player); }
.player-card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.panel-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.help-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; line-height: 1.45; color: #c6dce5; }
.legal-note { margin: 24px auto 0; max-width: 650px; color: #7893a2; font-size: 11px; line-height: 1.4; }
#toast, #banner { position: absolute; z-index: 8; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; border: 1px solid rgba(93,246,255,.55); background: rgba(2,9,24,.9); color: #eaffff; box-shadow: 0 0 22px rgba(0,220,255,.25); }
#toast { bottom: 22px; padding: 10px 18px; border-radius: 6px; max-width: min(820px,90vw); }
#banner { top: 8%; padding: 13px 25px; font-size: clamp(15px,2vw,24px); font-weight: 900; color: var(--yellow); letter-spacing: .12em; }
.touch-controls { position: absolute; z-index: 7; inset: auto 16px 16px; display: flex; align-items: flex-end; justify-content: space-between; pointer-events: none; }
.touch-controls button { pointer-events: auto; min-width: 54px; opacity: .72; }
.touch-pad > button { display: block; margin: 0 auto 4px; }
.touch-pad div { display: flex; gap: 4px; }
.touch-action { min-width: 95px !important; min-height: 72px; border-radius: 50%; }
#modalBody { color: #d4e8ee; line-height: 1.5; }
#modalBody .score-table { width: 100%; border-collapse: collapse; }
#modalBody td, #modalBody th { padding: 8px; border-bottom: 1px solid rgba(255,255,255,.12); text-align: right; }
#modalBody td:first-child, #modalBody th:first-child { text-align: left; }
@media (max-width: 720px) {
  .panel { padding: 18px; }
  .menu-grid, .form-grid, .player-setup, .help-columns { grid-template-columns: 1fr; }
  .logo-wrap h1 { letter-spacing: .06em; }
  .touch-controls { display: flex; }
}

/* ROVER4 accessibility, save and negotiation foundation */
.slot-picker{display:flex;gap:.7rem;align-items:center;justify-content:center;margin:.75rem auto 0;color:#b8e9ef;font:700 .78rem/1.2 monospace;letter-spacing:.08em}
.slot-picker select{min-width:8rem}
.check-row{display:flex!important;gap:.55rem;align-items:center}
.check-row input{width:auto!important}
.private-reveal{min-height:5rem;width:100%;border-color:#e68cff!important;background:linear-gradient(180deg,#32164a,#160c29)!important}
.private-result{margin-top:.8rem;padding:.8rem;border:1px solid #e68cff;background:#130c23;color:#f1d5ff;text-align:center}
.tutorial-callout{padding:.8rem 1rem;border-left:4px solid #ffe169;background:rgba(255,225,105,.08)}
.market-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1rem;margin:.8rem 0}
.market-form label{display:grid;gap:.25rem}
.score-table small{color:#91aebb}
.high-contrast canvas{filter:contrast(1.12) saturate(1.12)}
.high-contrast .panel{outline:2px solid #fff}
.reduced-motion #scanlines{display:none!important}
body[data-text-scale="1.15"] .panel{font-size:1.15em}
body[data-text-scale="1.3"] .panel{font-size:1.3em}
body[data-text-scale="0.9"] .panel{font-size:.9em}
button.danger{border-color:#ff647f;color:#ffd6dc}
@media(max-width:760px){.market-form{grid-template-columns:1fr}.slot-picker{flex-direction:column}.panel.wide{max-height:94vh}}

/* ROVER4 layout hardening */
.panel-actions{flex-wrap:wrap}
.panel-actions button{flex:1 1 135px}
input[type="number"],input[type="text"],select{max-width:100%;background:#07142d;color:#eafcff;border:1px solid rgba(93,246,255,.5);border-radius:5px;padding:.55rem .65rem}
#modalBody{overflow-x:auto}
#modalBody .score-table{font-size:clamp(.72rem,1.35vw,.96rem);min-width:560px}
#modalBody .score-table th,#modalBody .score-table td{white-space:nowrap}
@media(max-width:620px){.panel.modal{width:calc(100vw - 16px);padding:14px}.panel-actions button{flex-basis:46%}}

/* ROVER4 enhanced visual presentation */
#game {
  image-rendering: auto;
  background: #01030b;
}
#scanlines {
  opacity: .115;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.065) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(255,80,80,.018), rgba(80,255,180,.012), rgba(80,150,255,.018));
}
.panel {
  background:
    linear-gradient(145deg, rgba(18,36,75,.975), rgba(4,12,32,.982) 52%, rgba(2,7,20,.99)),
    radial-gradient(circle at 15% 0, rgba(93,246,255,.12), transparent 38%);
  border-color: rgba(126,237,255,.58);
  box-shadow:
    0 22px 65px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.045) inset,
    0 0 42px rgba(55,190,255,.20),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(8px) saturate(1.12);
}
.panel::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 10px;
  pointer-events: none;
}
.title-panel {
  background:
    linear-gradient(150deg, rgba(12,27,62,.93), rgba(2,8,24,.965)),
    radial-gradient(circle at 78% 18%, rgba(93,246,255,.12), transparent 42%);
}
.logo-wrap h1 {
  color: transparent;
  background: linear-gradient(180deg, #fff4a2 0%, #ffd85c 44%, #f38d38 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(4px 6px 0 #762f20) drop-shadow(0 0 16px rgba(255,225,105,.34));
  text-shadow: none;
}
.logo-wrap h2 {
  color: transparent;
  background: linear-gradient(90deg, #72e8ff, #d7ffff 48%, #72e8ff);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 18px rgba(93,246,255,.28);
}
.eyebrow { text-shadow: 0 0 10px rgba(255,156,82,.28); }
button {
  position: relative;
  overflow: hidden;
  border-color: rgba(126,237,255,.46);
  background: linear-gradient(180deg, #1f3d6d 0%, #102750 48%, #07152f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 15px rgba(0,0,0,.24);
  transition: transform .13s ease, border-color .13s ease, box-shadow .13s ease, color .13s ease;
}
button::after {
  content: "";
  position: absolute;
  left: -65%; top: 0;
  width: 45%; height: 100%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transition: left .3s ease;
}
button:hover::after, button:focus-visible::after { left: 125%; }
button:hover, button:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 8px 20px rgba(0,0,0,.30), 0 0 15px rgba(93,246,255,.16);
}
button.primary {
  background: linear-gradient(180deg, #b5fff5 0%, #5de6ed 48%, #2bb4d1 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 7px 18px rgba(0,180,220,.20);
}
select, input[type="text"], input[type="number"] {
  background: linear-gradient(180deg, rgba(9,27,57,.98), rgba(4,15,36,.98));
  border-color: rgba(126,237,255,.42);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.04);
}
.player-card {
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.18);
}
#toast, #banner {
  backdrop-filter: blur(7px);
  background: linear-gradient(180deg, rgba(10,30,59,.94), rgba(2,10,26,.95));
  box-shadow: 0 10px 35px rgba(0,0,0,.45), 0 0 24px rgba(0,220,255,.22), inset 0 1px 0 rgba(255,255,255,.09);
}
@media (prefers-reduced-motion: no-preference) {
  .logo-wrap h2 { background-size: 200% 100%; animation: rover4-shimmer 8s linear infinite; }
  @keyframes rover4-shimmer { from { background-position: 0 0; } to { background-position: 200% 0; } }
}
.reduced-motion button::after { display: none; }

/* ROVER8 settings: audio diagnostics */
.sound-test-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin:1rem 0 .3rem;padding:.8rem;border:1px solid rgba(255,225,105,.22);border-radius:10px;background:rgba(255,225,105,.055)}
.sound-test-buttons button{min-height:38px;font-size:.78rem;padding:.45rem .65rem;color:#fff4bc;border-color:rgba(255,225,105,.42);background:linear-gradient(180deg,#2c2946,#131b36)}
@media(max-width:720px){.sound-test-buttons{grid-template-columns:1fr 1fr}}


/* ROVER8 controller-first main menu and join screen */
.main-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:600px}
.controller-summary{margin:1rem 0 0;padding:.7rem .9rem;border:1px solid rgba(93,246,255,.24);border-radius:8px;background:rgba(93,246,255,.055);color:#bddde7;font-size:.9rem}
.controller-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1rem 0}
.controller-slot{position:relative;min-height:116px;padding:1rem;border:1px solid rgba(255,255,255,.16);border-left:6px solid var(--player,#5df6ff);border-radius:10px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.055)}
.controller-slot.assigned{border-color:rgba(130,255,146,.36);background:linear-gradient(145deg,rgba(130,255,146,.08),rgba(255,255,255,.025))}
.controller-slot.missing{border-color:rgba(255,82,115,.36);background:linear-gradient(145deg,rgba(255,82,115,.08),rgba(255,255,255,.025))}
.controller-slot h3{margin:.1rem 0 .35rem;font-size:1rem;color:var(--player,#5df6ff)}
.controller-slot small{display:block;color:#91adba;line-height:1.35}
.controller-badge{display:inline-flex;align-items:center;gap:.35rem;margin:.2rem .2rem .2rem 0;padding:.22rem .48rem;border-radius:999px;border:1px solid rgba(93,246,255,.30);background:rgba(93,246,255,.08);color:#dffcff;font:700 .72rem/1.1 monospace}
.controller-help{margin:.8rem 0 0;padding:.8rem 1rem;border-left:4px solid var(--cyan);background:rgba(93,246,255,.07);color:#cbe3ea;line-height:1.4}
.gamepad-focus, button.gamepad-focus, select.gamepad-focus, input.gamepad-focus{outline:3px solid var(--yellow)!important;outline-offset:3px;box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 22px rgba(255,225,105,.35)!important}
@media(max-width:760px){.controller-list,.main-menu-grid{grid-template-columns:1fr}.controller-slot{min-height:auto}}


/* ROVER8 main menu and full controller support */
.controller-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:1rem 0}
.controller-slot{border:1px solid rgba(126,237,255,.32);border-left:5px solid var(--player,#5df6ff);border-radius:10px;padding:.8rem;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.018));min-height:88px}
.controller-slot strong{display:block;color:var(--player,#5df6ff);margin-bottom:.25rem;letter-spacing:.08em}
.controller-slot.assigned{box-shadow:0 0 18px rgba(93,246,255,.14), inset 0 1px 0 rgba(255,255,255,.08)}
.controller-slot.waiting{border-style:dashed;color:#9ab5c2}
.controller-device{font-size:.82rem;color:#d8f9ff;line-height:1.35}
.controller-meter{height:7px;border-radius:10px;background:#061022;border:1px solid rgba(255,255,255,.12);overflow:hidden;margin:.4rem 0}
.controller-meter span{display:block;height:100%;background:linear-gradient(90deg,#58d9ff,#ffe169);width:0%}
.controller-help{padding:.8rem;border:1px solid rgba(93,246,255,.22);border-radius:10px;background:rgba(93,246,255,.055);color:#cce7ef;line-height:1.45}
.controller-hint{position:absolute;z-index:9;right:16px;bottom:14px;max-width:min(540px,calc(100vw - 32px));padding:.55rem .8rem;border:1px solid rgba(93,246,255,.4);border-radius:9px;background:rgba(3,11,29,.88);color:#dffcff;font:700 .76rem/1.35 monospace;pointer-events:none;box-shadow:0 0 18px rgba(0,220,255,.16)}
.controller-focus{outline:3px solid #ffe169!important;outline-offset:3px!important;box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 22px rgba(255,225,105,.35)!important}
button.controller-focus::after{left:125%}
@media(max-width:720px){.controller-slots{grid-template-columns:1fr}.controller-hint{left:12px;right:12px;bottom:10px}}
.controller-calibration{margin-top:.85rem;padding-top:.75rem;border-top:1px solid rgba(93,246,255,.16)}
.controller-calibration output{display:inline-block;margin-left:.5rem;color:var(--yellow);font-weight:800}

/* Space Colony X-01 merged release */
.title-panel .tagline{max-width:760px}
#game{background:#02040b}


/* Space Colony X01 display refinements imported from the companion prototype */
html, body { font-family: Consolas, Monaco, "Courier New", monospace; }
#game { cursor: crosshair; image-rendering: auto; }
.palette-redgreen #game { filter: hue-rotate(12deg) saturate(.88) contrast(1.12); }
.palette-redgreen .panel { border-color: rgba(255,225,105,.60); }
.palette-redgreen button.primary { background: linear-gradient(180deg,#fff0a2,#62d8ff); }
.sprite-vector #game { image-rendering: auto; }