/* =====================================================================
   RED ALERT WEB — styles
   Dark industrial command-console look with amber accents.
   ===================================================================== */
:root {
  --bg: #0b1015;
  --panel: #141b23;
  --panel2: #1b242e;
  --line: #2a3642;
  --amber: #f2b33d;
  --amber2: #ffd479;
  --green: #7fd35c;
  --red: #e0553f;
  --blue: #5aa9e6;
  --text: #d8e2ec;
  --dim: #8b98a6;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(1200px 700px at 70% -10%, #1a2431 0%, var(--bg) 60%);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font-family: inherit; }

#app { display: flex; height: 100vh; width: 100vw; }
#stage { position: relative; flex: 1; min-width: 0; overflow: hidden; }
#game { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }

/* ---------------- top HUD ---------------- */
#hud-top {
  position: absolute; top: 0; left: 0; right: 0; height: 38px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,12,16,0.85), rgba(8,12,16,0));
}
#hud-top .hud-left, #hud-top .hud-right { display: flex; gap: 6px; align-items: center; }
#hud-top .btn { pointer-events: auto; }
.chip {
  background: rgba(20,27,35,0.85); border: 1px solid var(--line);
  padding: 3px 9px; border-radius: 4px; font-size: 12px; font-weight: 600;
  letter-spacing: .3px;
}
#chip-funds { color: var(--amber2); }
#chip-power.low { color: var(--red); }

/* ---------------- toasts ---------------- */
#toasts {
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  pointer-events: none; z-index: 20;
}
.toast {
  background: rgba(20,27,35,0.95); border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  padding: 6px 14px; border-radius: 4px; font-size: 13px;
  animation: toastIn .18s ease-out; box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.toast.warn { border-left-color: var(--red); }
.toast.bad { border-left-color: var(--red); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }

/* ---------------- chat ---------------- */
#chat-log {
  position: absolute; left: 10px; bottom: 10px; width: 320px; max-height: 150px;
  overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 2px; pointer-events: none; font-size: 12px;
}
#chat-log .cmsg { background: rgba(8,12,16,0.55); padding: 2px 8px; border-radius: 3px; }
#chat-log .cmsg b { color: var(--amber); }

/* ---------------- overlays / panels ---------------- */
#overlay, #gameover {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(900px 600px at 50% 0%, rgba(30,44,60,0.75), rgba(6,9,12,0.92));
  backdrop-filter: blur(3px); z-index: 40; overflow: auto; padding: 20px;
}
#gameover { z-index: 50; }
.hidden { display: none !important; }

.panel {
  background: linear-gradient(180deg, #18222c, #111820);
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 22px; width: 100%; max-width: 560px;
}
.panel.lobby { max-width: 620px; }
#gameover .panel { max-width: 420px; text-align: center; }

.brand { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.brand-mark {
  font-size: 40px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
  animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.brand h1 { margin: 0; font-size: 30px; letter-spacing: 3px; font-weight: 800; }
.brand h1 span { color: var(--amber); }
.brand .tag { margin: 3px 0 0; color: var(--dim); font-size: 12.5px; }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field > span { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--dim); }
input, select {
  background: #0c1218; border: 1px solid var(--line); color: var(--text);
  padding: 9px 11px; border-radius: 5px; font-size: 14px; outline: none;
}
input:focus, select:focus { border-color: var(--amber); }
.row { display: flex; gap: 10px; flex-wrap: wrap; }

.btn {
  background: linear-gradient(180deg, #2a3745, #1d2732);
  color: var(--text); border: 1px solid var(--line);
  padding: 10px 16px; border-radius: 5px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: .12s; letter-spacing: .3px;
}
.btn:hover { border-color: var(--amber); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, var(--amber), #c98a19); color: #17130a; border-color: #e7b45a; }
.btn.primary:hover { background: linear-gradient(180deg, var(--amber2), var(--amber)); color: #17130a; }
.btn.danger { border-color: #5a2b26; }
.btn.danger:hover { border-color: var(--red); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.small { padding: 6px 10px; font-size: 12px; }
.btn.big { padding: 12px 22px; font-size: 15px; flex: 1; }
.hint { color: var(--dim); font-size: 12px; margin: 12px 0 0; }
#lobby-join .hint { margin-top: 10px; }

.roomhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.roomhead-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lbl { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--dim); }
.code { font-size: 26px; font-weight: 800; letter-spacing: 5px; color: var(--amber2); }

#seats { margin: 14px 0; display: flex; flex-direction: column; gap: 7px; }
.seat {
  display: grid; grid-template-columns: 14px 1fr auto auto auto; gap: 9px; align-items: center;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 8px 11px;
}
.seat .swatch { width: 13px; height: 13px; border-radius: 3px; border: 1px solid rgba(0,0,0,.5); }
.seat .who { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .who .ai { color: var(--blue); font-size: 11px; margin-left: 5px; }
.seat .who.me { color: var(--amber2); }
.seat select { padding: 4px 6px; font-size: 12px; }
.seat .rd { font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 3px; background: #24303c; color: var(--dim); }
.seat .rd.on { background: #1f3a24; color: var(--green); }
.seat .host { font-size: 10px; color: var(--amber); letter-spacing: 1px; }

.settings { display: flex; gap: 14px; }
.settings .field { flex: 1; }

.howto { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.howto summary { cursor: pointer; color: var(--amber); font-size: 13px; font-weight: 600; }
.howto ul { margin: 8px 0 0; padding-left: 18px; color: var(--dim); font-size: 12.5px; line-height: 1.7; }
.howto b { color: var(--text); }

/* ---------------- sidebar ---------------- */
#sidebar {
  width: 236px; flex: 0 0 236px; background: linear-gradient(180deg, #141c25, #0e141b);
  border-left: 1px solid var(--line); display: flex; flex-direction: column;
  box-shadow: -8px 0 24px rgba(0,0,0,.4);
}
#resbar { display: flex; border-bottom: 1px solid var(--line); }
.res { flex: 1; padding: 8px 10px; font-weight: 700; font-size: 15px; display: flex; gap: 6px; align-items: center; }
.res.power { border-left: 1px solid var(--line); color: var(--blue); font-size: 13px; }
.res.power.low { color: var(--red); }
.res .ico { font-size: 13px; }

#tabs { display: flex; border-bottom: 1px solid var(--line); }
.tab {
  flex: 1; background: transparent; border: none; color: var(--dim);
  padding: 9px 4px; font-size: 11px; font-weight: 700; letter-spacing: .4px;
  cursor: pointer; border-bottom: 2px solid transparent;
}
.tab.active { color: var(--amber2); border-bottom-color: var(--amber); background: rgba(242,179,61,.06); }
.tab:hover { color: var(--text); }

#buildgrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px;
  overflow-y: auto; max-height: 42vh;
}
.bcard {
  position: relative; background: linear-gradient(180deg, #222d39, #18212b);
  border: 1px solid var(--line); border-radius: 5px; padding: 7px 6px 6px;
  cursor: pointer; text-align: center; transition: .1s; overflow: hidden;
}
.bcard:hover { border-color: var(--amber); transform: translateY(-1px); }
.bcard.disabled { opacity: .4; cursor: not-allowed; }
.bcard.disabled:hover { border-color: var(--line); transform: none; }
.bcard .ic { font-size: 20px; line-height: 1.1; }
.bcard .nm { font-size: 10.5px; font-weight: 600; margin-top: 2px; line-height: 1.15; }
.bcard .cost { font-size: 11px; color: var(--amber2); font-weight: 700; margin-top: 2px; }
.bcard .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--green); transition: width .1s linear; }
.bcard .req { font-size: 9px; color: var(--red); }

#queues { padding: 0 8px 6px; display: flex; flex-direction: column; gap: 4px; }
.qrow { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.qrow .qname { flex: 0 0 82px; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; font-size: 9.5px; }
.qrow .qbar { flex: 1; height: 12px; background: #0c1218; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; position: relative; }
.qrow .qfill { height: 100%; background: linear-gradient(90deg, #4a8d3a, #7fd35c); width: 0; }
.qrow .qitem { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 600; color: #eaf5e2; }
.qrow .qx { cursor: pointer; color: var(--dim); font-weight: 700; padding: 0 4px; }
.qrow .qx:hover { color: var(--red); }

#selector { margin: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel2); min-height: 56px; font-size: 12px; }
.sel-empty { color: var(--dim); font-size: 12px; }
.sel-title { font-weight: 700; color: var(--amber2); margin-bottom: 3px; }
.sel-row { display: flex; justify-content: space-between; color: var(--dim); }
.sel-actions { display: flex; gap: 6px; margin-top: 7px; }
.sel-actions .btn { flex: 1; padding: 5px; font-size: 11px; }
.hp-mini { height: 5px; background: #0c1218; border-radius: 3px; overflow: hidden; margin-top: 5px; }
.hp-mini > i { display: block; height: 100%; background: var(--green); }
.multi { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.multi span { background: #223040; border-radius: 3px; padding: 1px 5px; font-size: 10px; }

#minimapWrap { margin-top: auto; padding: 8px; border-top: 1px solid var(--line); }
#minimap {
  width: 100%; height: auto; aspect-ratio: 1 / 1; background: #0a0f14;
  border: 1px solid var(--line); border-radius: 4px; display: block; cursor: pointer;
}

#sidechat { padding: 0 8px 8px; }
#sidechat input { width: 100%; font-size: 12px; padding: 6px 8px; }

/* placing mode banner */
.placing-banner {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(20,27,35,.95); border: 1px solid var(--amber); color: var(--amber2);
  padding: 7px 16px; border-radius: 5px; font-size: 13px; pointer-events: none; z-index: 15;
}

@media (max-width: 720px) {
  #sidebar { width: 190px; flex-basis: 190px; }
  .brand h1 { font-size: 22px; }
}