/* ================================================================
   STELLAR UNIVERSE — GAME HUD
   Unified sci-fi design system for all in-game panels/windows
   ================================================================ */

#game {
  --hud-bg:           rgba(3, 12, 9, 0.94);
  --hud-bg-item:      rgba(0, 18, 11, 0.65);
  --hud-border:       rgba(0, 180, 100, 0.2);
  --hud-border-hi:    rgba(0, 204, 122, 0.55);
  --hud-accent:       #00cc7a;
  --hud-accent-dim:   rgba(0, 204, 122, 0.3);
  --hud-text:         #a8f0cf;
  --hud-text-dim:     rgba(140, 210, 175, 0.8);
  --hud-text-muted:   rgba(90, 155, 120, 0.55);
  --hud-danger:       #ff3060;
  --hud-danger-dim:   rgba(255, 48, 96, 0.3);
  --hud-warning:      #ffaa00;
  --hud-warning-dim:  rgba(255, 170, 0, 0.3);
  --hud-info:         #00aacc;
  --hud-glow:         0 0 16px rgba(0, 100, 60, 0.32);
  --hud-r:            3px;
  --hud-fs:           11px;
  --hud-fs-sm:        9px;
}

#game .card:hover { transform: none !important; box-shadow: none !important; }

/* ─── Base panel ───────────────────────────────────────── */
/* DomUI.setClassName() replaces the outer div class with just templateName,
   so HUD base styles must also be applied to each panel selector directly. */
#game .hud-panel,
#game .top-panel, #game .panel-right, #game .panel-chat, #game .panel-units,
#game .planet-window, #game .empire-window, #game .policy-window,
#game .specy-window, #game .activity-window, #game .research-window,
#game .tutorial-window, #game .politics-window {
  background: var(--hud-bg);
  border: 1px solid var(--hud-border);
  border-top: 2px solid var(--hud-border-hi);
  box-shadow: var(--hud-glow), inset 0 0 40px rgba(0,0,0,0.35);
  border-radius: var(--hud-r);
  font-family: 'Orbitron', monospace;
  font-size: var(--hud-fs);
  color: var(--hud-text);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
}
#game .hud-panel p { font-size: var(--hud-fs); text-shadow: none; line-height: 1.4; }
#game .hud-panel::after,
#game .top-panel::after, #game .panel-right::after, #game .panel-chat::after, #game .panel-units::after,
#game .planet-window::after, #game .empire-window::after, #game .policy-window::after,
#game .specy-window::after, #game .activity-window::after, #game .research-window::after,
#game .tutorial-window::after, #game .politics-window::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,rgba(0,0,0,0.022) 0px,rgba(0,0,0,0.022) 1px,transparent 1px,transparent 3px);
  pointer-events: none;
  border-radius: inherit;
}

/* ─── Header strip ─────────────────────────────────────── */
#game .hud-header {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--hud-border);
  font-size: var(--hud-fs-sm);
  text-transform: uppercase; letter-spacing: 1.8px;
  color: var(--hud-accent);
  flex-shrink: 0;
}
#game .hud-header i { opacity: .8; }
#game .hud-header-actions { margin-left: auto; display: flex; gap: 4px; align-items: center; }

/* ─── Section label ─────────────────────────────────────── */
#game .hud-section {
  font-size: var(--hud-fs-sm); text-transform: uppercase; letter-spacing: 2px;
  color: var(--hud-text-muted);
  padding: 5px 10px 3px;
  border-bottom: 1px solid rgba(0,150,80,0.08);
  flex-shrink: 0;
}

/* ─── Data row ──────────────────────────────────────────── */
#game .hud-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; border-bottom: 1px solid rgba(0,100,50,0.06); font-size: var(--hud-fs); gap: 8px; transition: background .12s; }
#game .hud-row:last-child { border-bottom: none; }
#game .hud-row:hover, #game .hud-row.pointer:hover { background: rgba(0,204,122,0.04); cursor: pointer; }
#game .hud-row .hud-lbl { color: var(--hud-text-muted); flex-shrink: 0; }
#game .hud-row .hud-val { color: var(--hud-accent); font-weight: 600; text-align: right; }
#game .hud-row .hud-val.danger { color: var(--hud-danger); }
#game .hud-row .hud-val.warn   { color: var(--hud-warning); }

/* ─── Card ──────────────────────────────────────────────── */
#game .hud-card { background: var(--hud-bg-item); border: 1px solid var(--hud-border); border-left: 2px solid var(--hud-accent-dim); border-radius: var(--hud-r); padding: 6px 8px; margin-bottom: 4px; cursor: pointer; transition: all .14s; }
#game .hud-card:hover { border-left-color: var(--hud-accent); background: rgba(0,45,28,0.5); }
#game .hud-card:last-child { margin-bottom: 0; }
#game .hud-card-title { font-size: var(--hud-fs); color: var(--hud-text); display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
#game .hud-card-title i { color: var(--hud-accent-dim); font-size: 10px; }
#game .hud-card-sub { font-size: var(--hud-fs-sm); color: var(--hud-text-muted); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
#game .hud-card-sub img { width: 11px; height: 11px; opacity: .65; }

/* ─── Buttons ───────────────────────────────────────────── */
#game .hud-btn { display: inline-flex; align-items: center; gap: 5px; background: rgba(0,55,35,0.35); border: 1px solid var(--hud-border); color: var(--hud-text-dim); font-family: 'Orbitron', monospace; font-size: var(--hud-fs-sm); text-transform: uppercase; letter-spacing: 1px; padding: 4px 10px; border-radius: var(--hud-r); cursor: pointer; transition: all .17s; white-space: nowrap; user-select: none; -webkit-user-select: none; line-height: 1.4; }
#game .hud-btn:hover { background: rgba(0,204,122,0.1); border-color: var(--hud-border-hi); color: var(--hud-accent); box-shadow: 0 0 8px var(--hud-accent-dim); }
#game .hud-btn:active { transform: scale(.97); }
#game .hud-btn.primary  { background: rgba(0,90,55,0.3); border-color: rgba(0,204,122,0.38); color: var(--hud-accent); }
#game .hud-btn.primary:hover { background: rgba(0,204,122,0.18); box-shadow: 0 0 12px var(--hud-accent-dim); }
#game .hud-btn.danger   { background: rgba(70,0,18,0.3); border-color: var(--hud-danger-dim); color: var(--hud-danger); }
#game .hud-btn.danger:hover  { background: rgba(255,48,96,0.12); border-color: var(--hud-danger); box-shadow: 0 0 8px var(--hud-danger-dim); }
#game .hud-btn.warn     { background: rgba(55,35,0,0.3); border-color: var(--hud-warning-dim); color: var(--hud-warning); }
#game .hud-btn.warn:hover    { background: rgba(255,170,0,0.1); border-color: var(--hud-warning); }
#game .hud-btn.info     { background: rgba(0,35,55,0.3); border-color: rgba(0,170,204,0.3); color: var(--hud-info); }
#game .hud-btn.info:hover    { background: rgba(0,170,204,0.1); border-color: var(--hud-info); }
#game .hud-btn-icon { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--hud-border); color: var(--hud-text-muted); width: 27px; height: 27px; border-radius: var(--hud-r); cursor: pointer; font-size: 12px; transition: all .17s; flex-shrink: 0; }
#game .hud-btn-icon:hover { border-color: var(--hud-border-hi); color: var(--hud-accent); background: rgba(0,204,122,0.07); }
#game .hud-btn-group { display: flex; gap: 4px; flex-wrap: wrap; }

/* ─── Tag / badge ───────────────────────────────────────── */
#game .hud-tag { display: inline-flex; align-items: center; gap: 3px; background: rgba(0,204,122,0.07); border: 1px solid rgba(0,204,122,0.2); color: var(--hud-accent); font-size: var(--hud-fs-sm); padding: 2px 7px; border-radius: 2px; line-height: 1.3; }
#game .hud-tag.danger { background: rgba(255,48,96,0.07); border-color: var(--hud-danger-dim); color: var(--hud-danger); }
#game .hud-tag.warn   { background: rgba(255,170,0,0.07); border-color: var(--hud-warning-dim); color: var(--hud-warning); }

/* ─── Progress bars ─────────────────────────────────────── */
#game .hud-bar { height: 3px; background: rgba(0,70,45,0.25); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
#game .hud-bar-fill { height: 100%; background: var(--hud-accent); border-radius: 2px; box-shadow: 0 0 4px var(--hud-accent-dim); transition: width .4s ease; }
#game .hud-bar-fill.danger { background: var(--hud-danger); box-shadow: 0 0 4px var(--hud-danger-dim); }
#game .hud-bar-fill.warn   { background: var(--hud-warning); box-shadow: 0 0 4px var(--hud-warning-dim); }
#game .hud-bar-fill.animated { background-image: repeating-linear-gradient(90deg,var(--hud-accent) 0,var(--hud-accent) 10px,rgba(0,204,122,0.5) 10px,rgba(0,204,122,0.5) 14px); animation: hud-stripe 1s linear infinite; }
@keyframes hud-stripe { to { background-position: 28px 0; } }
#game .hud-progress-lg { height: 18px; background: rgba(0,35,22,0.4); border: 1px solid var(--hud-border); border-radius: var(--hud-r); overflow: hidden; position: relative; }
#game .hud-progress-lg-fill { height: 100%; background-image: repeating-linear-gradient(90deg,rgba(0,204,122,.65) 0,rgba(0,204,122,.65) 10px,rgba(0,204,122,.35) 10px,rgba(0,204,122,.35) 14px); animation: hud-stripe 1.2s linear infinite; }
#game .hud-progress-lg-lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 8px; color: var(--hud-text); }

/* ─── Resource row ──────────────────────────────────────── */
#game .hud-res { display: flex; align-items: center; gap: 5px; padding: 3px 8px; font-size: var(--hud-fs-sm); border-bottom: 1px solid rgba(0,100,50,0.06); }
#game .hud-res:last-child { border-bottom: none; }
#game .hud-res img { width: 13px; height: 13px; opacity: .72; flex-shrink: 0; }
#game .hud-res-vals { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 5px; }
#game .hud-res-txt { color: var(--hud-text-dim); white-space: nowrap; }
#game .hud-res-bar { width: 40px; }

/* ─── Tabs ──────────────────────────────────────────────── */
#game .hud-tabs { display: flex; border-bottom: 1px solid var(--hud-border); overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
#game .hud-tabs::-webkit-scrollbar { display: none; }
#game .hud-tab { padding: 7px 14px; font-size: var(--hud-fs-sm); text-transform: uppercase; letter-spacing: 1.5px; color: var(--hud-text-muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: all .17s; flex-shrink: 0; display: flex; align-items: center; gap: 5px; }
#game .hud-tab:hover { color: var(--hud-text); }
#game .hud-tab.active { color: var(--hud-accent); border-bottom-color: var(--hud-accent); }

/* ─── Scrollable body ───────────────────────────────────── */
#game .hud-body { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0,204,122,0.22) transparent; }
#game .hud-body::-webkit-scrollbar { width: 5px; }
#game .hud-body::-webkit-scrollbar-thumb { background: rgba(0,204,122,0.22); border-radius: 3px; }

/* ─── Inputs ────────────────────────────────────────────── */
#game .hud-input { background: rgba(0,18,11,0.7); border: 1px solid var(--hud-border); color: var(--hud-text); font-family: 'Orbitron', monospace; font-size: 10px; padding: 5px 8px; border-radius: var(--hud-r); outline: none; transition: border-color .17s; width: 100%; box-sizing: border-box; line-height: 1.4; }
#game .hud-input:focus { border-color: var(--hud-border-hi); box-shadow: 0 0 6px var(--hud-accent-dim); }
#game .hud-input-row { display: flex; gap: 4px; padding: 6px 8px; }
#game .hud-input-row .hud-input { flex: 1; }
#game .hud-select { background: rgba(0,18,11,0.7); border: 1px solid var(--hud-border); color: var(--hud-text); font-family: 'Orbitron', monospace; font-size: 10px; padding: 4px 6px; border-radius: var(--hud-r); outline: none; cursor: pointer; width: 100%; }
#game .hud-select:focus { border-color: var(--hud-border-hi); }
#game .hud-select option { background: #030c09; }

/* ─── Table ─────────────────────────────────────────────── */
#game .hud-table { width: 100%; border-collapse: collapse; font-size: var(--hud-fs-sm); }
#game .hud-table th { color: var(--hud-text-muted); text-transform: uppercase; letter-spacing: 1px; padding: 5px 8px; border-bottom: 1px solid var(--hud-border); font-weight: normal; text-align: left; }
#game .hud-table td { padding: 4px 8px; border-bottom: 1px solid rgba(0,100,50,0.06); color: var(--hud-text); }
#game .hud-table tr:last-child td { border-bottom: none; }
#game .hud-table tr:hover td { background: rgba(0,204,122,0.03); }
#game .hud-table td img { vertical-align: middle; width: 14px; height: 14px; margin-right: 3px; }

/* ─── Divider / form ────────────────────────────────────── */
#game .hud-divider { border: none; border-top: 1px solid var(--hud-border); margin: 4px 0; }
#game .hud-form-row { padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid rgba(0,100,50,0.06); }
#game .hud-form-row:last-child { border-bottom: none; }
#game .hud-form-label { font-size: var(--hud-fs-sm); color: var(--hud-text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }

/* ================================================================
   TOP PANEL
   ================================================================ */
#game .top-panel { display: inline-flex; }
#game .top-panel .hud-topbar { display: flex; align-items: center; gap: 4px; padding: 5px 8px; }
#game .top-panel .hud-topbar-sep { width: 1px; height: 18px; background: var(--hud-border); flex-shrink: 0; margin: 0 2px; }

/* ================================================================
   PANEL RIGHT
   ================================================================ */
#game .panel-right { position: relative; width: 230px; height: 90vh; max-height: 90vh; display: flex; flex-direction: column; overflow: visible; }
#game .panel-right .hud-pull-tab { position: absolute; left: 0; top: 50%; transform: translateY(-50%) translateX(-100%) rotate(-90deg); transform-origin: right center; font-size: var(--hud-fs-sm); padding: 4px 12px; background: var(--hud-bg); border: 1px solid var(--hud-border); border-bottom: none; color: var(--hud-text-muted); cursor: pointer; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; display: flex; align-items: center; gap: 5px; transition: color .17s; }
#game .panel-right .hud-pull-tab:hover { color: var(--hud-accent); }
#game .panel-right .hud-panels-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
#game .panel-right .hud-sect-body { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0,204,122,0.18) transparent; padding: 4px 6px; }
#game .panel-right .hud-sect-body::-webkit-scrollbar { width: 4px; }
#game .panel-right .hud-sect-body::-webkit-scrollbar-thumb { background: rgba(0,204,122,0.18); border-radius: 2px; }

/* ================================================================
   PANEL CHAT
   ================================================================ */
#game .panel-chat { width: 290px; display: flex; flex-direction: column; }
#game .panel-chat .hud-chat-tab { font-size: var(--hud-fs-sm); padding: 5px 12px; color: var(--hud-text-muted); cursor: pointer; letter-spacing: 1.5px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--hud-bg); border: 1px solid var(--hud-border); border-bottom: 2px solid var(--hud-border-hi); transition: color .17s; }
#game .panel-chat .hud-chat-tab:hover { color: var(--hud-accent); }
#game .panel-chat #chat-list { height: 22vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0,204,122,0.18) transparent; }
#game .panel-chat #chat-list::-webkit-scrollbar { width: 4px; }
#game .panel-chat #chat-list::-webkit-scrollbar-thumb { background: rgba(0,204,122,0.18); }
#game .panel-chat .hud-chat-msg { padding: 4px 8px; border-bottom: 1px solid rgba(0,100,50,0.06); }
#game .panel-chat .hud-chat-msg:last-child { border-bottom: none; }
#game .panel-chat .username { font-size: var(--hud-fs-sm); color: var(--hud-accent); font-weight: 600; }
#game .panel-chat .date { font-size: 8px; color: var(--hud-text-muted); margin-left: 6px; }
#game .panel-chat .msg { font-size: var(--hud-fs-sm); color: var(--hud-text-dim); word-break: break-word; margin-top: 1px; }
#game .panel-chat p { font-size: var(--hud-fs-sm); }

/* ================================================================
   PANEL UNITS
   ================================================================ */
#game .panel-units { width: 460px; max-height: 26vh; display: flex; flex-direction: column; }
#game .panel-units .hud-units-layout { display: flex; overflow: hidden; flex: 1; }
#game .panel-units .hud-units-left { width: 130px; flex-shrink: 0; border-right: 1px solid var(--hud-border); overflow-y: auto; padding: 4px; scrollbar-width: thin; scrollbar-color: rgba(0,204,122,0.18) transparent; }
#game .panel-units .hud-units-right { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0,204,122,0.18) transparent; }
#game .panel-units .hud-fleet-tag { display: inline-flex; align-items: center; gap: 3px; background: rgba(0,70,45,0.25); border: 1px solid var(--hud-border); border-radius: 2px; padding: 3px 7px; margin: 2px; cursor: pointer; font-size: var(--hud-fs-sm); color: var(--hud-text-dim); transition: all .14s; }
#game .panel-units .hud-fleet-tag:hover { border-color: var(--hud-border-hi); color: var(--hud-accent); }
#game .panel-units .hud-stats-grid { display: grid; grid-template-columns: 1fr 1fr; }
#game .panel-units .hud-defend-btns { display: flex; gap: 4px; padding: 6px 8px; flex-wrap: wrap; }
#game .panel-units h6 { font-size: var(--hud-fs); }
#game .panel-units p  { font-size: var(--hud-fs-sm); }

/* ================================================================
   PLANET WINDOW
   ================================================================ */
#game .planet-window { width: clamp(700px, 68vw, 1000px); height: 84vh; display: flex; flex-direction: column; overflow: hidden; }
#game .planet-window .hud-planet-visual { display: flex; align-items: stretch; flex-shrink: 0; border-bottom: 1px solid var(--hud-border); }
#game .planet-window .hud-planet-canvas-wrap { background: #000; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--hud-border); flex-shrink: 0; padding: 10px; }
#game .planet-window .hud-planet-canvas-wrap canvas { display: block; }
#game .planet-window .hud-planet-sidebar { flex: 1; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0,204,122,0.18) transparent; }
#game .planet-window .hud-planet-main { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
#game .planet-window .hud-tab-content { flex: 1; overflow-y: auto; padding: 0; scrollbar-width: thin; scrollbar-color: rgba(0,204,122,0.18) transparent; }
#game .planet-window .hud-tab-pane { display: none; }
#game .planet-window .hud-tab-pane.active { display: block; }
#game .planet-window .hud-footer { border-top: 1px solid var(--hud-border); padding: 4px 12px; display: flex; justify-content: space-between; align-items: center; font-size: var(--hud-fs-sm); color: var(--hud-text-muted); flex-shrink: 0; gap: 12px; }
#game .planet-window .hud-footer img { width: 13px; height: 13px; opacity: .6; vertical-align: middle; margin-right: 3px; }
#game .planet-window .hud-bld-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; padding: 8px; }
#game .planet-window .hud-bld-card { background: var(--hud-bg-item); border: 1px solid var(--hud-border); border-radius: var(--hud-r); padding: 8px 6px; display: flex; flex-direction: column; gap: 5px; align-items: center; text-align: center; transition: border-color .14s; }
#game .planet-window .hud-bld-card:hover { border-color: rgba(0,204,122,0.3); }
#game .planet-window .hud-bld-img { width: 44px; height: 44px; object-fit: contain; opacity: .82; }
#game .planet-window .hud-bld-name { font-size: var(--hud-fs-sm); color: var(--hud-text); text-transform: uppercase; letter-spacing: .8px; cursor: pointer; }
#game .planet-window .hud-bld-name:hover { color: var(--hud-accent); }
#game .planet-window .hud-bld-lvl { font-size: 8px; color: var(--hud-text-muted); }
#game .planet-window .hud-bld-actions { display: flex; gap: 4px; width: 100%; }
#game .planet-window .hud-bld-actions .hud-btn { padding: 3px 6px; flex: 1; justify-content: center; font-size: 8px; }
#game .planet-window .hud-ship-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; padding: 8px; }
#game .planet-window .hud-ship-card { background: var(--hud-bg-item); border: 1px solid var(--hud-border); border-radius: var(--hud-r); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
#game .planet-window .hud-ship-card img { width: 56px; height: 56px; object-fit: contain; }
#game .planet-window .hud-ship-name { font-size: var(--hud-fs); color: var(--hud-text); cursor: pointer; }
#game .planet-window .hud-ship-name:hover { color: var(--hud-accent); }
#game .planet-window .hud-overlay { position: absolute; inset: 0; background: rgba(0,4,2,0.93); z-index: 10; overflow-y: auto; padding: 20px; }
#game .planet-window .hud-overlay-content { max-width: 500px; margin: 0 auto; }
#game .planet-window .hud-overlay h3 { color: var(--hud-accent); font-size: 13px; text-shadow: none; margin-bottom: 12px; }
#game .planet-window .hud-overlay h4 { color: var(--hud-text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; margin: 10px 0 5px; }
#game .planet-window .hud-overlay p { font-size: 10px; color: var(--hud-text-dim); margin: 3px 0; text-shadow: none; }
#game .planet-window .hud-bld-section-title { font-size: var(--hud-fs-sm); color: var(--hud-text-muted); text-transform: uppercase; letter-spacing: 1.5px; padding: 6px 8px 2px; display: flex; justify-content: space-between; }

/* ================================================================
   MODAL WINDOWS (empire, policy, specy, activity, research)
   ================================================================ */
#game .empire-window, #game .policy-window, #game .specy-window,
#game .activity-window, #game .research-window {
  display: flex; flex-direction: column; max-height: 80vh; overflow: hidden;
}
#game .empire-window   { width: 580px; }
#game .policy-window   { width: 380px; }
#game .specy-window    { width: 420px; }
#game .activity-window { width: 430px; }
#game .research-window { width: 660px; }

#game .hud-empire-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid rgba(0,100,50,0.07); font-size: var(--hud-fs-sm); transition: background .12s; }
#game .hud-empire-row:last-child { border-bottom: none; }
#game .hud-empire-row:hover { background: rgba(0,204,122,0.03); }
#game .hud-empire-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
#game .hud-empire-name { flex: 1; color: var(--hud-text); }
#game .hud-empire-meta { color: var(--hud-text-muted); text-align: right; min-width: 40px; }

#game .hud-activity-item { padding: 5px 10px; border-bottom: 1px solid rgba(0,100,50,0.06); font-size: var(--hud-fs-sm); color: var(--hud-text-dim); line-height: 1.5; }
#game .hud-activity-item:last-child { border-bottom: none; }
#game .hud-activity-date { color: var(--hud-text-muted); font-size: 8px; margin-bottom: 1px; }

#game .hud-research-card { background: var(--hud-bg-item); border: 1px solid var(--hud-border); border-left: 2px solid var(--hud-border-hi); border-radius: var(--hud-r); padding: 10px 12px; margin: 6px 8px; }
#game .hud-research-title { font-size: var(--hud-fs); color: var(--hud-accent); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; }
#game .hud-research-desc { font-size: var(--hud-fs-sm); color: var(--hud-text-muted); margin-bottom: 8px; line-height: 1.5; }
#game .hud-research-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

#game .hud-trait-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; border-bottom: 1px solid rgba(0,100,50,0.06); font-size: var(--hud-fs-sm); gap: 8px; }
#game .hud-trait-row:last-child { border-bottom: none; }
#game .hud-trait-name { color: var(--hud-text); }
#game .hud-trait-val { color: var(--hud-accent); }
#game .hud-trait-val.negative { color: var(--hud-danger); }

/* ================================================================
   INNER TEMPLATE WRAPPER FIX
   DomUI.setHTML() wraps the compiled template as innerHTML of the
   outer Phaser node on every render after the first. The result is
   the template's outer <div> becomes a direct child of e.g. .panel-right.
   Strip its visual styles and make it a transparent flex passthrough.
   ================================================================ */
#game .panel-right > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
  min-height: 0;
}
#game .panel-chat > div,
#game .panel-units > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
#game .top-panel > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#game .planet-window > div,
#game .empire-window > div, #game .policy-window > div, #game .specy-window > div,
#game .activity-window > div, #game .research-window > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* ================================================================
   TUTORIAL WINDOW
   ================================================================ */
#game .tutorial-window,
#game .tutorial-window::after {
  border-radius: var(--hud-r);
}
#game .tutorial-window { width: 340px; }
#game .tutorial-window > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ================================================================
   POLITICS WINDOW
   ================================================================ */
#game .politics-window {
  width: 700px;
  height: 520px;
}
#game .politics-window > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#game .hud-politics-layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Left column */
#game .hud-politics-cats {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--hud-border);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hud-border) transparent;
}
#game .hud-politics-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,100,60,0.08);
  transition: background 0.15s;
  font-size: 11px;
  color: var(--hud-text-dim);
}
#game .hud-politics-cat:hover {
  background: rgba(0,204,122,0.06);
  color: var(--hud-text);
}
#game .hud-politics-cat.active {
  background: rgba(0,204,122,0.1);
  color: var(--hud-accent);
  border-right: 2px solid var(--hud-accent);
}
#game .hud-politics-cat > .fas {
  width: 14px;
  text-align: center;
  font-size: 11px;
  flex-shrink: 0;
}
#game .hud-politics-cat-name {
  flex: 1;
  font-family: 'Orbitron', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#game .hud-politics-cat-chosen {
  font-size: 8px;
  color: var(--hud-accent);
  background: rgba(0,204,122,0.12);
  border: 1px solid var(--hud-border-hi);
  border-radius: 2px;
  padding: 1px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
}
#game .hud-politics-cat-empty {
  font-size: 10px;
  color: var(--hud-text-muted);
}

/* Right column */
#game .hud-politics-options {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--hud-border) transparent;
}
#game .hud-politics-cat-title {
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  color: var(--hud-accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
#game .hud-politics-cat-desc {
  font-size: 10px;
  color: var(--hud-text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}
#game .hud-politics-option {
  border: 1px solid var(--hud-border);
  border-radius: var(--hud-r);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: rgba(0, 18, 11, 0.4);
}
#game .hud-politics-option:hover {
  border-color: var(--hud-border-hi);
  background: rgba(0, 204, 122, 0.05);
}
#game .hud-politics-option.selected {
  border-color: var(--hud-accent);
  background: rgba(0, 204, 122, 0.08);
  box-shadow: 0 0 8px rgba(0, 204, 122, 0.15);
}
#game .hud-politics-option-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
#game .hud-politics-check {
  font-size: 13px;
  color: var(--hud-text-muted);
  flex-shrink: 0;
}
#game .hud-politics-check.active { color: var(--hud-accent); }
#game .hud-politics-option-name {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  color: var(--hud-text);
  text-transform: uppercase;
  letter-spacing: 1px;
}
#game .hud-politics-option-desc {
  font-size: 10px;
  color: var(--hud-text-dim);
  margin-left: 21px;
  line-height: 1.5;
  margin-bottom: 6px;
}
#game .hud-politics-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 21px;
}
#game .hud-politics-effect {
  font-size: 9px;
  font-family: 'Orbitron', monospace;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid;
}
#game .hud-politics-effect.pos {
  color: #00ff99;
  border-color: rgba(0, 255, 153, 0.3);
  background: rgba(0, 255, 153, 0.08);
}
#game .hud-politics-effect.neg {
  color: var(--hud-danger);
  border-color: var(--hud-danger-dim);
  background: rgba(255, 48, 96, 0.06);
}