* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b0e14; font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; color: #e8e4d8; }

.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: block; }
.hidden { display: none !important; }

/* ---------- MENU: see menu.css ---------- */

.big-btn { font-size: 20px; font-weight: bold; padding: 12px 34px; border-radius: 10px; border: none; cursor: pointer; color: #fff; letter-spacing: 1px; box-shadow: 0 4px 0 rgba(0,0,0,.45); font-family: inherit; }
.big-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.45); }
.big-btn.red { background: linear-gradient(180deg, #e0523c, #b03224); }
.big-btn.blue { background: linear-gradient(180deg, #4a7de0, #2c54b0); }
.big-btn.grey { background: linear-gradient(180deg, #5a6478, #3c4454); }

/* ---------- STRATEGY ---------- */
#screen-strategy { background: #cfe0e6; }
#strat-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }

/* floating DOM labels over the 3D map */
#strat-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.strat-label { position: absolute; transform: translate(-50%, 0); white-space: nowrap; }
.strat-label.city { background: rgba(20,28,36,.78); color: #f0ead8; font-size: 12px; font-weight: bold;
  padding: 2px 10px; border-radius: 10px; border: 1.5px solid #888; letter-spacing: .4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.strat-label.city span { color: #f0c95c; font-weight: normal; }
.strat-label.army { display: flex; align-items: center; gap: 5px; background: rgba(20,28,36,.72);
  padding: 2px 8px; border-radius: 9px; font-size: 11px; font-weight: bold; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.strat-label.army .al-n { color: #cdd8e2; font-weight: normal; }
.strat-label.army .al-hp { width: 34px; height: 4px; background: rgba(255,255,255,.22); border-radius: 2px; overflow: hidden; }
.strat-label.army .al-hp i { display: block; height: 100%; border-radius: 2px; }

#strat-topbar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(96%, 1100px); height: 48px;
  background: rgba(20,28,36,.82); backdrop-filter: blur(8px); border-radius: 14px;
  display: flex; align-items: center; gap: 22px; padding: 0 18px; font-size: 15px; font-weight: bold;
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 6px 20px rgba(20,40,50,.25); z-index: 10; }
#hud-gold { color: #ffd35a; }
.tb-spacer { flex: 1; }
.tb-btn { padding: 7px 14px; border-radius: 8px; border: 1px solid #4a5a78; background: #223048; color: #e8e4d8; cursor: pointer; font-size: 14px; font-weight: bold; font-family: inherit; }
.tb-btn:hover:not(:disabled) { background: #2e4262; }
.tb-btn:disabled { opacity: .5; cursor: default; }
.tb-btn.endturn { background: linear-gradient(180deg, #e0523c, #b03224); border-color: #7a2418; }
.tb-btn.endturn:hover:not(:disabled) { background: linear-gradient(180deg, #ee6248, #c23a2a); }

#strat-citybar { position: absolute; top: 68px; left: 50%; transform: translateX(-50%); width: min(96%, 1100px);
  background: rgba(20,28,36,.82); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  display: flex; align-items: center; gap: 8px; padding: 8px 16px; flex-wrap: wrap; z-index: 9; font-size: 13px;
  box-shadow: 0 6px 20px rgba(20,40,50,.25); }
#strat-citybar .cb-title { font-weight: bold; color: #ffd35a; margin-right: 8px; font-size: 15px; }
#strat-citybar .cb-stat { color: #9aa8c0; margin-right: 10px; }
#strat-citybar button { padding: 6px 11px; border-radius: 8px; border: 1px solid #4a5a78; background: #223048; color: #e8e4d8; cursor: pointer; font-size: 13px; font-family: inherit; }
#strat-citybar button:hover:not(:disabled) { background: #2e4262; }
#strat-citybar button:disabled { opacity: .38; cursor: default; }
#strat-citybar .cb-close { margin-left: auto; background: #3a2430; }
#strat-panel { position: absolute; left: 14px; top: 76px; width: 250px; background: rgba(20,28,36,.85); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 14px; font-size: 13px;
  max-height: calc(100% - 140px); overflow-y: auto; box-shadow: 0 6px 20px rgba(20,40,50,.25); z-index: 9; }
#strat-panel h3 { color: #ffd35a; margin-bottom: 6px; font-size: 16px; }
#strat-panel .stat-row { display: flex; justify-content: space-between; padding: 2px 0; color: #c8d0e0; }
#strat-panel button { display: block; width: 100%; margin-top: 7px; padding: 8px; border-radius: 8px; border: 1px solid #4a5a78; background: #223048; color: #e8e4d8; cursor: pointer; font-size: 13px; text-align: left; font-family: inherit; }
#strat-panel button:hover:not(:disabled) { background: #2e4262; }
#strat-panel button:disabled { opacity: .38; cursor: default; }
#strat-log { position: absolute; right: 14px; top: 76px; width: 300px; max-height: 90px; overflow: hidden; font-size: 12px; color: #2c4450; pointer-events: none; text-shadow: 0 1px 0 rgba(255,255,255,.4); text-align: right; z-index: 8; font-weight: bold; }

.modal { position: absolute; inset: 0; background: rgba(5,8,14,.78); display: flex; align-items: center; justify-content: center; z-index: 30; }
.modal-inner { background: #141a28; border: 2px solid #3a4660; border-radius: 16px; padding: 26px; max-width: 860px; max-height: 86vh; overflow-y: auto; }
.modal-inner h2 { color: #ffd35a; margin-bottom: 14px; text-align: center; letter-spacing: 2px; }

.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tech-card { border: 1px solid #3a4660; border-radius: 10px; padding: 11px; font-size: 12px; background: #1a2233; }
.tech-card h4 { font-size: 14px; margin-bottom: 4px; color: #cfe0ff; }
.tech-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tech-head canvas { border-radius: 8px; background: #10151f; flex-shrink: 0; }
.tech-card.owned { border-color: #4a9a5a; background: #16281c; }
.tech-card.owned h4 { color: #7ade8a; }
.tech-card.locked { opacity: .45; }
.tech-card button { margin-top: 7px; padding: 5px 12px; border-radius: 6px; border: none; background: #b8862c; color: #fff; cursor: pointer; font-weight: bold; }
.tech-card button:disabled { background: #3c4454; cursor: default; }
.tech-card p { color: #9aa8c0; line-height: 1.3; }

.battle-choice { display: flex; gap: 14px; margin-top: 18px; justify-content: center; }
.vs-row { display: flex; justify-content: center; gap: 34px; margin: 12px 0 4px; font-size: 14px; }
.vs-side { text-align: center; }
.vs-side .num { font-size: 30px; font-weight: bold; }

kbd { background: #2a3448; border-radius: 4px; padding: 1px 6px; font-size: 12px; border: 1px solid #46536b; }

/* ---------- GAME MENU ---------- */
#game-menu { z-index: 50; }
.gm-inner { min-width: 380px; text-align: center; }
.gm-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 12px 0; font-size: 14px; color: #c8d0e0; }
.gm-row label { flex-shrink: 0; }
.gm-row input[type="range"] { flex: 1; accent-color: #ffd35a; }
.gm-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: #ffd35a; }
#gm-vol-num { width: 44px; text-align: right; color: #ffd35a; font-weight: bold; }
.gm-inner .big-btn { display: block; width: 100%; margin-top: 10px; font-size: 17px; }
.gm-inner .hint { margin-top: 12px; }