:root {
  --bg: #120d09;
  --panel: #241a12;
  --panel2: #2f2218;
  --line: #5a4330;
  --sand: #e3b86f;
  --text: #f1e2c4;
  --muted: #a8916f;
  --accent: #e8a33c;
  --danger: #c8412f;
  --good: #5fcf5f;
  --house: #e8a33c;
  --sidebar: 300px;
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; user-select: none; -webkit-user-select: none; }
button, select, input { font-family: inherit; }
[hidden] { display: none !important; }

/* ---------- menus ---------- */
.screen {
  position: fixed; inset: 0; overflow: auto;
  display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  background:
    radial-gradient(ellipse at 70% 15%, #f6d79b 0 4%, transparent 4.5%),
    radial-gradient(ellipse at 70% 15%, #f6d79b33 0 12%, transparent 30%),
    linear-gradient(180deg, #2a1608 0%, #7a3f15 38%, #c77b33 58%, #8c5523 59%, #5d3615 100%);
}
.screen::before, .screen::after {
  content: ''; position: fixed; left: -10%; right: -10%; pointer-events: none;
  border-radius: 50% 50% 0 0;
}
.screen::before { bottom: -18%; height: 48%; background: linear-gradient(#b7712e, #6e4019); transform: rotate(-3deg); }
.screen::after { bottom: -26%; height: 46%; background: linear-gradient(#9a5b24, #4a2a10); transform: rotate(4deg); }
.screen > * { position: relative; z-index: 1; }

.menu-wrap { text-align: center; }
.logo {
  font-family: 'Cinzel', serif; font-weight: 800; font-size: clamp(54px, 11vw, 120px); letter-spacing: 0.12em; margin: 0;
  color: #f7dfa6; text-shadow: 0 4px 0 #6b3a12, 0 10px 30px #000a;
}
.logo span { color: var(--accent); font-size: 0.45em; letter-spacing: 0.3em; display: block; margin-top: -0.2em; }
.tag { font-size: 22px; letter-spacing: 0.25em; text-transform: uppercase; color: #f3d9a8; margin: 6px 0 28px; text-shadow: 0 2px 6px #000; }
.foot { margin-top: 30px; font-style: italic; color: #f3d9a8cc; text-shadow: 0 2px 4px #000; }

.menu { display: flex; flex-direction: column; gap: 10px; align-items: stretch; width: min(320px, 100%); margin: 0 auto; }
button {
  cursor: pointer; border: 1px solid var(--line); background: linear-gradient(#3a2a1c, #241a12); color: var(--text);
  padding: 10px 18px; font-size: 17px; font-weight: 600; letter-spacing: 0.04em; border-radius: 6px;
  transition: background .15s, border-color .15s, transform .05s;
}
button:hover { border-color: var(--accent); background: linear-gradient(#4a3522, #2c1f15); }
button:active { transform: translateY(1px); }
button.primary { background: linear-gradient(#c9822b, #8a4f14); border-color: #f0b25a; color: #fff6e0; }
button.primary:hover { background: linear-gradient(#dc923a, #9a5a1a); }
button.danger { background: linear-gradient(#7a2a1f, #4a1610); border-color: #b54a3a; }
button.dim { opacity: 0.6; }
button:disabled { cursor: not-allowed; opacity: 0.5; }

.panel {
  background: linear-gradient(#2b1f15f2, #1a130df2); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px 26px; width: min(760px, 100%); box-shadow: 0 20px 60px #000a; max-height: calc(100vh - 48px); overflow: auto;
}
.panel.wide { width: min(1000px, 100%); }
.panel.small { width: min(380px, 100%); text-align: center; }
.panel h1 { font-family: 'Cinzel', serif; margin: 0 0 16px; color: #f7dfa6; letter-spacing: 0.06em; font-size: 30px; }
.panel h3 { margin: 18px 0 6px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; font-size: 15px; }
.row { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.row.center { justify-content: center; }
.muted { color: var(--muted); }
select, input[type=number], input:not([type]) {
  background: #1a130d; color: var(--text); border: 1px solid var(--line); border-radius: 5px; padding: 6px 8px; font-size: 16px;
}
label { display: flex; gap: 10px; align-items: center; font-size: 17px; }

.houses { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.house-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 14px;
  border: 2px solid var(--hd); background: linear-gradient(160deg, color-mix(in srgb, var(--hc) 30%, #1a120b), #160f09);
}
.house-card:hover { border-color: var(--hc); background: linear-gradient(160deg, color-mix(in srgb, var(--hc) 45%, #1a120b), #160f09); }
.house-card h2 { margin: 4px 0 0; font-family: 'Cinzel', serif; color: #fff; font-size: 26px; }
.house-card p { margin: 0; font-weight: 500; color: #e9d6b2; min-height: 44px; }
.house-card small { color: var(--muted); }
.prog { width: 100%; height: 6px; background: #0006; border-radius: 3px; overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--hc); }

.map-strip svg { width: 100%; display: block; border-radius: 8px; border: 1px solid var(--line); }
.missions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.mission { display: flex; align-items: center; gap: 14px; text-align: left; padding: 10px 14px; }
.mission .num { font-family: 'Cinzel', serif; font-size: 26px; width: 34px; text-align: center; color: var(--hc); }
.mission .mt { flex: 1; display: flex; flex-direction: column; }
.mission .mt small { color: var(--muted); font-weight: 500; }
.mission .ms { color: var(--muted); font-size: 15px; }
.mission.done .ms { color: var(--good); }
.pill { display: inline-block; padding: 0 7px; border-radius: 8px; color: #fff; font-size: 13px; }

.briefing .brief-head { display: flex; gap: 16px; align-items: center; }
.briefing .brief-head small { color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.briefing .brief-head h1 { margin: 2px 0 0; }
.brief-text { font-size: 19px; line-height: 1.45; font-weight: 500; color: #f3e4c6; border-left: 3px solid var(--hc, var(--accent)); padding-left: 14px; }
.objs li, .tips li { margin: 4px 0; font-size: 17px; }
.objs li::marker { color: var(--accent); }
.techs { display: flex; flex-wrap: wrap; gap: 8px; }
.tech { display: flex; align-items: center; gap: 6px; background: #0004; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px 3px 3px; }
.tech img { border-radius: 4px; }

.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 24px; }
.form label { justify-content: space-between; }
label.full { margin-bottom: 10px; }
label.full input { flex: 1; }

.slots { display: flex; flex-direction: column; gap: 6px; }
.slot { display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: #0003; border: 1px solid var(--line); border-radius: 6px; }
.slot > div { flex: 1; display: flex; flex-direction: column; }
.slot small { color: var(--muted); }
.slot.empty b { color: var(--muted); }
.file-btn { cursor: pointer; border: 1px dashed var(--line); padding: 9px 14px; border-radius: 6px; }
.file-btn:hover { border-color: var(--accent); }

table.keys { width: 100%; border-collapse: collapse; }
table.keys td { padding: 5px 8px; border-bottom: 1px solid #ffffff12; font-size: 16px; }
table.keys td:first-child { color: var(--accent); font-weight: 700; white-space: nowrap; }

.loading { text-align: center; font-size: 20px; }
.spinner { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; border: 5px solid #0004; border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- game ---------- */
#game { position: fixed; inset: 0; display: grid; grid-template-columns: 1fr var(--sidebar); }
#viewport { position: relative; overflow: hidden; background: #000; }
#view { display: block; width: 100%; height: 100%; }
#objectives {
  position: absolute; top: 8px; left: 8px; background: #000a; border: 1px solid #ffffff22; border-radius: 6px;
  padding: 6px 10px; font-size: 15px; pointer-events: none; max-width: 360px;
}
#objectives ul { margin: 2px 0 0; padding-left: 18px; }
#objectives li.done { color: var(--good); text-decoration: line-through; }
#clock { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); background: #0009; padding: 2px 10px; border-radius: 4px; font-weight: 700; pointer-events: none; }
#messages { position: absolute; left: 8px; bottom: 8px; display: flex; flex-direction: column-reverse; gap: 4px; pointer-events: none; max-width: 60%; }
.msg { background: #000b; border-left: 3px solid var(--house); padding: 4px 10px; border-radius: 3px; font-size: 16px; font-weight: 600; transition: opacity 1s; }
.msg.warn { border-left-color: #ff4a3a; color: #ffd0c0; }
.msg.fade { opacity: 0; }
#paused { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: 48px; background: #0006; pointer-events: none; }
#paused small { font-family: 'Rajdhani', sans-serif; font-size: 18px; }

#sidebar {
  display: flex; flex-direction: column; gap: 6px; padding: 8px; min-height: 0;
  background: linear-gradient(90deg, #1a120b, #2a1e14); border-left: 2px solid #4a3523; box-shadow: inset 3px 0 8px #0008;
}
.sb-top { display: flex; justify-content: space-between; align-items: center; }
#house-name { font-family: 'Cinzel', serif; font-weight: 800; font-size: 18px; }
#btn-menu { padding: 3px 10px; font-size: 14px; }
.credits-box {
  display: flex; align-items: center; justify-content: center; gap: 8px; background: #000; border: 1px solid #5a4330; border-radius: 4px;
  font-family: 'Consolas', monospace; font-size: 24px; color: #ffb347; padding: 2px; text-shadow: 0 0 6px #ff8a0088;
}
.spice-icon { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(#ffcf7a, #c4521c); box-shadow: 0 0 6px #ff8a00; }
.radar-row { display: flex; gap: 6px; }
.mm-wrap { position: relative; flex: 1; aspect-ratio: 1; border: 2px solid #4a3523; border-radius: 4px; overflow: hidden; background: #000; }
#minimap { width: 100%; height: 100%; display: block; cursor: pointer; }
#radar-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #c9a36a; font-weight: 700; letter-spacing: 0.12em; pointer-events: none; }
#radar-off small { font-size: 11px; letter-spacing: 0; color: var(--muted); margin-top: 4px; font-weight: 500; }
.power { width: 16px; }
.power-bar { position: relative; height: 100%; background: #000; border: 1px solid #4a3523; border-radius: 3px; overflow: hidden; }
#power-fill { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(#7aff7a, #2a9a2a); transition: height .3s; }
#power-fill.low { background: linear-gradient(#ff7a5a, #9a2a1a); }
#power-use { position: absolute; left: 0; right: 0; height: 2px; background: #fff; box-shadow: 0 0 4px #fff; }
#power-text { font-size: 13px; color: var(--muted); text-align: center; margin-top: -3px; }
#power-text.low { color: #ff6a5a; font-weight: 700; }
.tools { display: flex; gap: 6px; }
.tools button { flex: 1; padding: 4px; font-size: 14px; }
.tools button.on { border-color: var(--accent); background: linear-gradient(#8a5a20, #4a2e10); }

.build-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; overflow-y: auto; align-items: start; }
.build-cols h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); text-align: center; position: sticky; top: 0; background: #241a12; z-index: 2; }
.build-list { display: flex; flex-direction: column; gap: 4px; }
.build-list .empty { font-size: 13px; color: var(--muted); text-align: center; padding: 8px 2px; }
button.build {
  position: relative; padding: 0; overflow: hidden; border-radius: 4px; border: 1px solid #5a4330; background: #1d1712;
  display: flex; flex-direction: column; height: 76px;
}
button.build img { width: 100%; height: 56px; object-fit: cover; display: block; pointer-events: none; }
.bname { font-size: 12px; line-height: 20px; height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 3px; background: #0008; text-align: left; }
.bcost { position: absolute; top: 2px; right: 3px; font-size: 12px; color: #ffcf7a; background: #000a; padding: 0 3px; border-radius: 2px; }
.bprog { position: absolute; left: 0; right: 0; top: 0; background: #000a; display: none; pointer-events: none; }
.bstate { position: absolute; top: 18px; left: 0; right: 0; text-align: center; font-weight: 700; font-size: 16px; color: #fff; text-shadow: 0 1px 3px #000, 0 0 2px #000; pointer-events: none; }
.bcount { position: absolute; top: 2px; left: 3px; font-weight: 700; color: #fff; background: var(--house); border-radius: 8px; padding: 0 5px; font-size: 12px; }
.bcount:empty { display: none; }
button.build.ready { border-color: #7dff7d; box-shadow: 0 0 8px #7dff7d88; animation: pulse 1s infinite alternate; }
button.build.ready .bstate { color: #9dff9d; }
button.build.busy { opacity: 0.45; }
button.build.poor .bcost { color: #ff6a5a; }
@keyframes pulse { to { box-shadow: 0 0 2px #7dff7d33; } }

#selection { min-height: 112px; background: #0005; border: 1px solid #4a3523; border-radius: 4px; padding: 6px; font-size: 14px; }
#selection .hint { color: var(--muted); text-align: center; padding-top: 18px; }
.sel-one { display: flex; gap: 8px; align-items: center; }
.sel-one > div { flex: 1; min-width: 0; }
.sel-one img { border-radius: 4px; border: 1px solid #4a3523; }
.sel-one small { color: var(--muted); display: block; }
.hpbar { height: 5px; background: #000; border-radius: 2px; margin: 3px 0; overflow: hidden; }
.hpbar i { display: block; height: 100%; background: linear-gradient(90deg, #3fbf3f, #8fef5f); }
.sel-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
button.act { padding: 3px 8px; font-size: 13px; }
.sel-many { display: flex; flex-wrap: wrap; gap: 3px; }
.sel-type { position: relative; padding: 0; width: 50px; height: 32px; border-radius: 3px; }
.sel-type img { display: block; }
.sel-type span { position: absolute; bottom: 0; right: 2px; font-size: 12px; font-weight: 700; text-shadow: 0 0 3px #000; }

.overlay { position: fixed; inset: 0; background: #000b; display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
#endscreen .panel { text-align: center; }
#endscreen h1 { font-size: 54px; }
#endscreen .win h1 { color: #ffd36b; text-shadow: 0 0 20px #ffb34788; }
#endscreen .lose h1 { color: #ff6a5a; }
#endscreen .brief-text { text-align: left; }
table.stats { width: 100%; border-collapse: collapse; margin-top: 10px; font-weight: 700; }
table.stats th { color: var(--muted); font-size: 13px; font-weight: 600; }
table.stats td, table.stats th { padding: 4px 6px; border-bottom: 1px solid #ffffff12; }

@media (max-width: 900px) {
  :root { --sidebar: 210px; }
  .bname { font-size: 10px; }
  button.build { height: 66px; }
  button.build img { height: 46px; }
  .build-cols { grid-template-columns: 1fr; }
  #objectives { font-size: 13px; max-width: 60%; }
}

/* starport */
.sp-list { display: flex; flex-direction: column; gap: 6px; }
.sp-row { display: flex; align-items: center; gap: 10px; background: #0003; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.sp-row img { border-radius: 4px; }
.sp-name { flex: 1; font-weight: 600; }
.sp-price { width: 120px; text-align: right; color: #ffcf7a; }
.sp-price small { color: var(--muted); }
.sp-row button { padding: 2px 10px; }
.sp-row b { width: 22px; text-align: center; }
.cheap { color: var(--good) !important; }
.dear { color: #ff6a5a !important; }

#rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 700px) {
  #rotate-hint {
    display: block; position: fixed; left: 8px; right: 8px; top: 8px; z-index: 40; text-align: center;
    background: #000c; border: 1px solid var(--accent); border-radius: 6px; padding: 8px; font-weight: 700; pointer-events: none;
  }
  :root { --sidebar: 150px; }
  .bname { display: none; }
  button.build { height: 50px; }
  button.build img { height: 50px; }
}
@media (max-height: 560px) {
  #sidebar { overflow-y: auto; gap: 4px; padding: 4px; }
  #house-name { font-size: 13px; }
  #btn-menu { padding: 2px 6px; font-size: 12px; }
  .credits-box { font-size: 17px; }
  .radar-row { height: 92px; flex: none; }
  .mm-wrap { aspect-ratio: auto; }
  #radar-off small { display: none; }
  .tools button { font-size: 12px; padding: 2px; }
  .build-cols { flex: none; overflow: visible; }
  #selection { min-height: 0; font-size: 12px; }
  #selection .hint { display: none; }
  #objectives { font-size: 12px; padding: 3px 6px; }
  .msg { font-size: 13px; }
}

.territories { display: flex; gap: 10px; flex-wrap: wrap; }
.terr { flex: 1; min-width: 180px; }
.terr.on { border-color: var(--accent); background: linear-gradient(#6a4520, #3a2410); box-shadow: 0 0 10px #e8a33c55; }
.terr.on::before { content: '◆ '; color: var(--accent); }