*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #2d4a1e;
  --tile-grass: #4a7c3f;
  --tile-dark: #3a6030;
  --gold: #ffd700;
  --elixir: #cc44ff;
  --red: #e84040;
  --green: #44cc44;
  --blue: #4488ff;
  --brown: #8b5e3c;
  --stone: #888;
  --font-title: 'Cinzel', serif;
  --font-ui: 'Roboto', sans-serif;
}
html, body { touch-action: none;  width:100%; height:100%; overflow:hidden; font-family:var(--font-ui); touch-action:none; background:var(--bg); }
#game-container { position:relative; width:100%; height:100%; overflow:hidden; }
#gameCanvas { position:absolute; top:0; left:0; display:block; cursor:pointer; }

/* SCREENS */
.screen { position:absolute; top:0;left:0;width:100%;height:100%; display:none; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#1a2e0a,#2d4a1e); z-index:100; padding:20px; }
.screen.active { display:flex; }

/* START */
.start-content { display:flex; flex-direction:column; align-items:center; gap:12px; }
.game-thumbnail {
  border-radius: 12px;
  border: 3px solid var(--gold);
  box-shadow: 0 8px 15px rgba(0,0,0,0.1);
  max-width: 300px;
  width: 90%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.game-title { font-family:var(--font-title); font-size:clamp(2rem,8vw,3rem); color:var(--gold);
  text-shadow:2px 2px 0 #7a5500, 0 0 30px rgba(255,215,0,0.5); letter-spacing:2px; text-align:center; }
.game-sub { color:#a0c070; font-size:1rem; letter-spacing:3px; text-transform:uppercase; }
.start-info { display:flex; gap:16px; margin:4px 0; }
.info-stat { background:rgba(255,255,255,0.1); border:1px solid rgba(255,215,0,0.3); border-radius:8px;
  padding:6px 14px; font-size:0.9rem; color:var(--gold); }

/* BUTTONS */
.btn-primary { padding:14px 40px; background:linear-gradient(135deg,#d4a000,#8a6600);
  border:2px solid var(--gold); border-radius:8px; font-family:var(--font-title);
  font-size:1.1rem; color: #333; cursor:pointer; box-shadow:0 4px 15px rgba(212,160,0,0.4),0 3px 0 #5a4000;
  transition:all 0.15s; letter-spacing:1px; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(212,160,0,0.5),0 3px 0 #5a4000; }
.btn-secondary { padding:10px 30px; background:transparent; border:1px solid rgba(255,215,0,0.4);
  border-radius:8px; font-family:var(--font-ui); font-size:0.9rem; color:rgba(255,215,0,0.7);
  cursor:pointer; transition:all 0.15s; }
.btn-secondary:hover { border-color:var(--gold); color:var(--gold); }
.btn-attack { padding:10px 22px; background:linear-gradient(135deg,#cc2222,#880000);
  border:2px solid #ff4444; border-radius:8px; font-family:var(--font-ui); font-size:0.9rem;
  font-weight:700; color: #333; cursor:pointer; box-shadow:0 4px 15px rgba(200,0,0,0.4);
  transition:all 0.15s; animation:attack-pulse 2s infinite; }
@keyframes attack-pulse { 0%,100%{box-shadow:0 4px 15px rgba(200,0,0,0.4)} 50%{box-shadow:0 4px 25px rgba(255,0,0,0.7)} }
.btn-attack:hover { transform:scale(1.05); }
.btn-danger { padding:10px 24px; background:rgba(200,0,0,0.3); border:1px solid #ff4444;
  border-radius:6px; color:#ff6666; font-family:var(--font-ui); font-size:0.9rem; cursor:pointer; }
.btn-back-sm { padding:8px 16px; background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); border:1px solid rgba(255,255,255,0.2);
  border-radius:6px; color: #333; font-size:0.85rem; cursor:pointer; }

/* HUD TOP */
#main-hud { position:absolute; top:0;left:0;right:0;bottom:0; pointer-events:none; z-index:50; }
.hud-top { display:flex; justify-content:space-between; align-items:center; padding:10px 14px;
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); backdrop-filter:blur(6px); pointer-events:auto; }
.resource-bar { display:flex; gap:12px; }
.resource { display:flex; align-items:center; gap:4px; background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
  border:1px solid rgba(255,215,0,0.25); border-radius:20px; padding:4px 12px; }
.res-icon { font-size:1rem; }
.resource span:not(.res-icon) { font-size:0.85rem; font-weight:700; color:var(--gold); }
.village-info { display:flex; flex-direction:column; align-items:center; }
#villageName { font-family:var(--font-title); font-size:0.9rem; color:var(--gold); }
.th-badge { font-size:0.7rem; color: #666; background:rgba(255,255,255,0.1); border-radius:4px; padding:1px 6px; }

/* HUD BOTTOM */
.hud-bottom { position:absolute; bottom:0;left:0;right:0; padding:10px 14px;
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); backdrop-filter:blur(6px); pointer-events:auto; }
.info-row { display:flex; gap:8px; margin-bottom:6px; }
.mode-btn { padding:8px 16px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
  border-radius:6px; color: #555; font-size:0.8rem; cursor:pointer; transition:all 0.15s; }
.mode-btn.active, .mode-btn:hover { background:rgba(255,215,0,0.15); border-color:var(--gold); color:var(--gold); }

.building-palette { overflow-x:auto; padding:6px 0; }
.palette-scroll { display:flex; gap:8px; padding-bottom:2px; }
.palette-item { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 10px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); border-radius:8px;
  cursor:pointer; min-width:60px; transition:all 0.15s; flex-shrink:0; }
.palette-item:hover { border-color:var(--gold); background:rgba(255,215,0,0.1); }
.palette-item .p-icon { font-size:1.4rem; }
.palette-item .p-name { font-size:0.6rem; color: #555; white-space:nowrap; }
.palette-item .p-cost { font-size:0.6rem; color:var(--gold); }

/* BATTLE HUD */
#battle-hud { position:absolute; top:0;left:0;right:0;bottom:0; pointer-events:none; z-index:50; }
.battle-top { display:flex; justify-content:space-between; align-items:center; padding:10px 14px;
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); pointer-events:auto; }
.battle-timer { display:flex; flex-direction:column; align-items:center; }
.timer-label { font-size:0.55rem; color: #666; letter-spacing:2px; }
#battleTimer { font-family:var(--font-title); font-size:1.5rem; color: #333; font-weight:700; }
#battleTimer.warning { color:#ff4444; animation:warn-blink 0.5s infinite; }
@keyframes warn-blink { 0%,100%{opacity:1} 50%{opacity:0.4} }
.battle-stars { font-size:1.5rem; color:var(--gold); }
.battle-pct { font-family:var(--font-ui); font-size:1rem; font-weight:700; color:#aaffaa; }

.battle-bottom { position:absolute; bottom:0;left:0;right:0; padding:10px 14px;
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); pointer-events:auto; }
.troop-bar { display:flex; gap:8px; overflow-x:auto; }
.troop-card { display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 14px;
  background:rgba(255,255,255,0.1); border:2px solid rgba(255,255,255,0.2); border-radius:10px;
  cursor:pointer; min-width:65px; transition:all 0.15s; flex-shrink:0; }
.troop-card.selected { border-color:var(--gold); background:rgba(255,215,0,0.2); }
.troop-card .tc-icon { font-size:1.6rem; }
.troop-card .tc-count { font-size:0.7rem; color:#ffd700; font-weight:700; }
.troop-card .tc-name { font-size:0.6rem; color: #555; }
.troop-card.depleted { opacity:0.4; }

/* RESULT */
.result-title { font-family:var(--font-title); font-size:2.5rem; color:var(--gold);
  text-shadow:2px 2px 0 #5a4000; margin-bottom:16px; }
.result-title.defeat { color:var(--red); text-shadow:2px 2px 0 #5a0000; }
.result-stars { font-size:3rem; margin-bottom:16px; }
.result-rewards { display:flex; flex-direction:column; gap:8px; background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
  border-radius:10px; padding:16px 32px; margin-bottom:20px; min-width:240px; }
.reward-row { display:flex; justify-content:space-between; gap:20px; font-size:1rem;
  color: #555; }
.reward-row span:last-child { color:var(--gold); font-weight:700; }

/* MODAL */
.modal { position:fixed; top:0;left:0;right:0;bottom:0; background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); z-index:200;
  display:flex; align-items:center; justify-content:center; }
.modal-box { background:linear-gradient(135deg,#1a2e0a,#2d4a1e); border:2px solid var(--gold);
  border-radius:16px; padding:24px; max-width:320px; width:90%; display:flex;
  flex-direction:column; gap:10px; box-shadow: 0 8px 15px rgba(0,0,0,0.1); }
.modal-box h3 { font-family:var(--font-title); color:var(--gold); font-size:1.2rem; text-align:center; }
#infoBody { color: #555; font-size:0.9rem; line-height:1.6; }
#infoBody .info-row { display:flex; justify-content:space-between; padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,0.1); }

/* CONSTRUCTION */
.construction-label { font-size:0.6rem; color:#ffaa00; text-align:center; }

/* SOUND */
.sound-btn { position:fixed;bottom:16px;right:16px;z-index:300;font-size:1.2rem;
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);border:1px solid rgba(255,215,0,0.3);border-radius:50%;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer; }

.hidden { display:none!important; }
@media(max-width:480px) { .hud-top { flex-wrap:wrap; gap:6px; } .start-info { flex-wrap:wrap; justify-content:center; } }
::-webkit-scrollbar { height:4px; } ::-webkit-scrollbar-thumb { background:#555; border-radius:2px; }
/* CG-batch-overlay-fix */
#game-canvas, canvas#game-canvas { touch-action: none; }
#game-ui.screen,
#game-ui.screen.active { pointer-events: none !important; }