:root {
  --red:    #c0392b;
  --blue:   #2980b9;
  --gold:   #f0c040;
  --green:  #27ae60;
  --bg:     #1a1208;
  --surf:   #2a1f0e;
  --surf2:  #1e160a;
  --border: #5a3e1b;
  --text:   #e8d5a0;
  --dim:    #7a6040;
  --pixel-font: 'Press Start 2P', monospace;
  --mono:   'Share Tech Mono', monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: var(--mono); font-size: 15px;
  background-image: repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(90,62,27,.08) 31px,rgba(90,62,27,.08) 32px);
}
.screen { display: none; width: 100%; height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.screen.active { display: flex !important; flex-direction: column; align-items: center; justify-content: center; }
.screen.screen-top.active { justify-content: flex-start; }
/* Game screen never scrolls vertically on desktop */
#screen-game { overflow: hidden; }
.btn {
  font-family: var(--pixel-font); font-size: 9px;
  padding: 14px 22px; cursor: pointer; text-transform: uppercase;
  border: 3px solid; background: var(--surf2); color: var(--text);
  transition: transform .08s, box-shadow .08s; outline: none;
  box-shadow: 4px 4px 0 #0a0804; letter-spacing: 1px;
  image-rendering: pixelated;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #0a0804; }
.btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 #0a0804; }
.btn-red   { border-color: var(--red);  color: #ffaaaa; box-shadow: 4px 4px 0 #5a0000; }
.btn-red:hover   { box-shadow: 6px 6px 0 #5a0000; }
.btn-blue  { border-color: var(--blue); color: #aaddff; box-shadow: 4px 4px 0 #003355; }
.btn-blue:hover  { box-shadow: 6px 6px 0 #003355; }
.btn-gold  { border-color: var(--gold); color: var(--gold); box-shadow: 4px 4px 0 #5a3800; }
.btn-gold:hover  { box-shadow: 6px 6px 0 #5a3800; }
.btn-green { border-color: var(--green);color: #aaffaa;box-shadow: 4px 4px 0 #0a3310; }
.btn-green:hover { box-shadow: 6px 6px 0 #0a3310; }
.btn:disabled { opacity: .35; cursor: not-allowed; transform: none !important; }
input, select {
  background: var(--surf2); border: 2px solid var(--border); color: var(--text);
  padding: 10px 14px; font-family: var(--mono); font-size: 14px; outline: none;
  width: 100%;
}
input:focus, select:focus { border-color: var(--gold); }
label { font-size: 11px; color: var(--dim); margin-bottom: 6px; display: block; letter-spacing: 1px; }
.form-group { display: flex; flex-direction: column; margin-bottom: 16px; }

/* AUTH MODAL */
#auth-modal {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.85); display: none;
  align-items: center; justify-content: center;
}
#auth-modal.show { display: flex; }
.auth-box {
  background: var(--surf); border: 3px solid var(--gold);
  padding: 28px 32px; min-width: 320px; max-width: 380px;
  width: 90%; position: relative;
  box-shadow: 0 0 40px rgba(240,192,64,.2), 4px 4px 0 #0a0804;
}
.auth-box::before {
  content:''; position:absolute; top:-3px; left:16px; right:16px; height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.auth-tabs { display:flex; gap:0; margin-bottom:20px; border-bottom:2px solid var(--border); }
.auth-tab {
  flex:1; padding:10px; font-family:var(--pixel-font); font-size:8px;
  cursor:pointer; text-align:center; color:var(--dim); background:none;
  border:none; border-bottom:2px solid transparent; margin-bottom:-2px;
  letter-spacing:1px; transition:color .1s, border-color .1s;
}
.auth-tab.active { color:var(--gold); border-bottom-color:var(--gold); }
.auth-error { color:#ff6666; font-size:10px; margin-top:8px; min-height:16px; text-align:center; }
.auth-success { color:#aaffaa; font-size:10px; margin-top:8px; min-height:16px; text-align:center; }

/* Login button top-left - only visible in lobby/home screens */
#login-btn-area {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  display: none; align-items: center; gap: 10px;
}
#login-btn-area.lobby-visible { display: flex; }
.login-topbtn {
  font-family: var(--pixel-font); font-size: 8px;
  padding: 8px 14px; cursor: pointer;
  border: 2px solid var(--gold); background: var(--surf2); color: var(--gold);
  transition: transform .08s, box-shadow .08s;
  box-shadow: 3px 3px 0 #3a2000; letter-spacing: 1px;
}
.login-topbtn:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 #3a2000; }
.user-info-bar {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--pixel-font); font-size: 9px; color: var(--text);
  background: var(--surf2); border: 2px solid var(--border);
  padding: 8px 16px; box-shadow: 2px 2px 0 #0a0804;
}
.user-coins {
  display: flex; align-items: center; gap: 8px;
  color: var(--gold); font-size: 13px; font-weight: bold;
}
.user-coins img { width: 24px; height: 24px; image-rendering: pixelated; }
#login-username-display { font-size: 10px; color: var(--text); }
#login-coins-display { font-size: 15px; color: var(--gold); font-family: var(--pixel-font); letter-spacing: 1px; }

/* HOME */
#screen-home { gap: 0; }
.home-title {
  text-shadow: 0 0 16px rgba(240,192,64,.6), 2px 2px 0 #3a2000, 4px 4px 0 #1a0e00;
  animation: titlePulse 3s ease-in-out infinite;
  top: 0;
  position: fixed;
}
@keyframes titlePulse {
  0%,100% { text-shadow: 0 0 16px rgba(240,192,64,.6), 2px 2px 0 #3a2000, 4px 4px 0 #1a0e00; }
  50%     { text-shadow: 0 0 30px rgba(240,192,64,.9), 2px 2px 0 #5a3000, 4px 4px 0 #2a1500; }
}
.vs-badge { font-family: var(--pixel-font); font-size: 14px; margin: 10px 0 28px;
  color: var(--gold); letter-spacing: 6px; text-shadow: 1px 1px 0 #3a2000; margin-top: 175px; }
.home-subtitle { color: var(--dim); font-size: 11px; margin-bottom: 40px; letter-spacing: 2px; font-style: italic; }
.home-btns { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.lang-toggle { position: fixed; top: 20px; right: 20px; z-index: 100; font-family: var(--pixel-font); font-size: 8px; }
.mute-btn   { position: fixed; top: 20px; right: 120px; z-index: 100; font-family: var(--pixel-font); font-size: 8px; }

/* ═══ IN-GAME MENU BUTTON ═══ */
#game-menu-btn {
  position: fixed; top: 8px; right: 8px; z-index: 500;
  font-family: var(--pixel-font); font-size: 8px;
  padding: 7px 12px; cursor: pointer;
  border: 2px solid var(--border); background: var(--surf2); color: var(--text);
  letter-spacing: 1px; display: none;
  box-shadow: 2px 2px 0 #0a0804;
  transition: border-color .1s;
}
#game-menu-btn:hover { border-color: var(--gold); }
@media (max-width: 700px) {
  #game-menu-btn {
    background: rgba(10,8,4,0.25) !important;
    border-color: rgba(240,192,64,0.3) !important;
    color: rgba(240,192,64,0.75) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    font-size: 7px !important;
    padding: 5px 9px !important;
  }
  #game-menu-btn:hover {
    background: rgba(10,8,4,0.6) !important;
    border-color: var(--gold) !important;
  }
}
#game-menu-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,.85);
  display: none; align-items: center; justify-content: center;
}
#game-menu-overlay.show { display: flex; }
.game-menu-box {
  background: var(--surf); border: 3px solid var(--gold);
  padding: 28px 32px; min-width: 280px; max-width: 340px; width: 90%;
  position: relative;
  box-shadow: 0 0 40px rgba(240,192,64,.2), 4px 4px 0 #0a0804;
}
.game-menu-box::before {
  content:''; position:absolute; top:-3px; left:16px; right:16px; height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.game-menu-title {
  font-family: var(--pixel-font); font-size: 10px; color: var(--gold);
  text-align: center; margin-bottom: 20px; letter-spacing: 2px;
  text-shadow: 1px 1px 0 #3a2000;
}
.volume-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
  background: var(--surf2); border: 2px solid var(--border); padding: 10px 14px;
}
.volume-label {
  font-family: var(--pixel-font); font-size: 7px; color: var(--dim);
  letter-spacing: 1px; white-space: nowrap;
}
#volumeSlider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 6px; background: var(--border); outline: none; border: none; padding: 0;
  cursor: pointer;
}
#volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px;
  background: var(--gold); border: 2px solid #3a2000; cursor: pointer;
}
#volumeSlider::-moz-range-thumb {
  width: 14px; height: 14px; background: var(--gold); border: 2px solid #3a2000; cursor: pointer; border-radius: 0;
}
#muteToggleBtn {
  font-family: var(--pixel-font); font-size: 8px; padding: 5px 8px;
  border: 2px solid var(--border); background: var(--surf); color: var(--text);
  cursor: pointer; white-space: nowrap;
}
.game-menu-divider { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.game-menu-actions { display: flex; flex-direction: column; gap: 10px; }
.game-menu-actions .btn { width: 100%; font-size: 8px; padding: 12px; }

/* PANEL */
.panel { background: var(--surf); border: 3px solid var(--border); padding: 28px 32px; width: 100%; max-width: 420px; position: relative;
  box-shadow: inset 0 0 20px rgba(0,0,0,.4), 4px 4px 0 #0a0804; }
.panel-title { font-family: var(--pixel-font); font-size: 11px; letter-spacing: 2px; color: var(--gold); margin-bottom: 28px; text-align: center;
  text-shadow: 1px 1px 0 #3a2000; }
.panel::before { content: ''; position: absolute; top: -3px; left: 16px; right: 16px; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* LOBBY */
.lobby-code { font-family: var(--pixel-font); font-size: 28px; letter-spacing: 8px; color: var(--gold); text-align: center; padding: 20px; border: 3px solid var(--gold); background: rgba(255,215,0,.05); text-shadow: 0 0 20px var(--gold); margin: 20px 0; }
.waiting-dot { animation: blink 1s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.player-slot { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 2px solid var(--border); margin: 8px 0; font-family: var(--pixel-font); font-size: 8px; }
.dot-red  { width:12px;height:12px;background:var(--red);  box-shadow:0 0 8px var(--red); }
.dot-blue { width:12px;height:12px;background:var(--blue); box-shadow:0 0 8px var(--blue); }
.tag { font-size:8px;padding:3px 8px;border:1px solid; font-family:var(--pixel-font); }

/* Game screen layout */
#screen-game {
  flex-direction: column; justify-content: flex-start; padding: 8px; overflow: hidden; gap: 0;
}

.game-hud {
  display: grid; grid-template-columns: 1fr auto 1fr;
  width: 100%; max-width: 1200px; margin: 0 auto 6px;
  align-items: center; gap: 10px; padding: 0 4px;
}
.score-box { display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  background: var(--surf2); border: 2px solid var(--border);
  box-shadow: 2px 2px 0 #0a0804; }
.score-label { font-family: var(--pixel-font); font-size: 7px; letter-spacing: 1px; opacity: .7; }
.score-val   { font-family: var(--pixel-font); font-size: 14px; }
.score-red   { color: #ffaaaa;  border-color: var(--red) !important; }
.score-blue  { color: #aaddff; border-color: var(--blue) !important; }
.hud-timer {
  font-family: var(--pixel-font); font-size: 18px; color: var(--gold);
  text-align: center; text-shadow: 1px 1px 0 #3a2000;
  padding: 6px 16px; background: var(--surf2); border: 2px solid var(--border); min-width: 110px;
  box-shadow: 2px 2px 0 #0a0804;
}
.hud-timer.urgent { color: #ff6655; animation: timerUrgent .5s ease-in-out infinite; border-color: var(--red); }
@keyframes timerUrgent { 0%,100%{opacity:1} 50%{opacity:.5} }

.game-body {
  display: flex; gap: 14px; width: 100%;
  flex: 1; overflow: hidden; align-items: stretch;
}

/* WARZONE panel (left) */
.warzone-panel {
  width: 340px; flex-shrink: 0;
  background: var(--surf); border: 2px solid var(--border);
  padding: 14px; overflow-y: auto;
  border-color: rgba(255,45,85,.4);
  align-self: flex-start;
  max-height: calc(100vh - 120px);
  -webkit-overflow-scrolling: touch;
}
.warzone-title { font-family: var(--pixel-font); font-size: 7px; color: #ffaaaa; text-align: center; margin-bottom: 10px; border-bottom: 2px solid rgba(192,57,43,.4); padding-bottom: 8px; letter-spacing: 1px; text-shadow: 1px 1px 0 #3a0000; }
#attackSlotList { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.attack-slot {
  border: 2px dashed var(--border); padding: 6px;
  cursor: pointer; transition: border-color .1s, background .1s; position: relative;
  min-height: 110px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.01); overflow: hidden;
}
.attack-slot:hover { border-color: var(--red); background: rgba(255,45,85,.04); }
.attack-slot.occupied { border-style: solid; }
.attack-slot.slot-bot   { border-color: rgba(0,170,255,.5); }
.attack-slot.slot-bhole { border-color: rgba(80,0,120,.8); }
.attack-slot.slot-twarp { border-color: rgba(0,255,200,.5); }
.aslot-label { position: absolute; top: 2px; left: 3px; font-family: var(--pixel-font); font-size: 7px; color: var(--dim); }
.aslot-level { position: absolute; top: 2px; right: 3px; font-family: var(--pixel-font); font-size: 7px; color: var(--gold); }
.aslot-status { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-family: var(--pixel-font); font-size: 7px; }
.aslot-bar { position: absolute; bottom: 9px; left: 2px; right: 2px; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.aslot-bar-fill { height: 100%; transition: width 0.1s linear, background 0.3s linear; will-change: width; border-radius: 2px; }
.aslot-bar-fill.bar-animated { transition: width .4s; }
.aslot-img { width: 90px; height: 90px; object-fit: contain; image-rendering: pixelated; display: block; }
/* Black hole active overlay */
.blackhole-overlay {
  position: absolute; pointer-events: none; z-index: 120; border-radius: 50%;
  animation: bhPulse .5s ease-in-out infinite;
}
@keyframes armedPulse { 0%{opacity:0.3} 100%{opacity:1} }
@keyframes bhPulse {
  0%,100% { box-shadow: 0 0 12px 4px rgba(80,0,150,.8), inset 0 0 20px rgba(0,0,0,.9); }
  50%      { box-shadow: 0 0 24px 8px rgba(120,0,255,.9), inset 0 0 30px rgba(0,0,0,1); }
}
/* Time warp active on bots */
@keyframes warpSpin { to { transform: rotate(360deg); } }

/* Center: canvas column */
.canvas-column { display: flex; flex-direction: column; gap: 10px; align-items: center; flex: 1; min-width: 0; overflow: hidden; }

/* Canvas wrapper */
.canvas-wrap {
  position: relative; flex-shrink: 0;
  border: 3px solid var(--border);
  box-shadow: 0 0 30px rgba(0,170,255,.1);
  cursor: crosshair;
  max-width: 100%;
  overflow: hidden;
}
.canvas-wrap.my-red  { border-color: rgba(255,45,85,.5); }
.canvas-wrap.my-blue { border-color: rgba(0,170,255,.5); }
#gameCanvas { display: block; image-rendering: pixelated; max-width: 100%; height: auto; }
#botOverlay  { image-rendering: pixelated; max-width: 100%; height: auto; }

/* Building Area */
.building-area {
  background: var(--surf2); border: 2px solid var(--border);
  padding: 8px; position: relative;
  align-self: center;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  max-height: 220px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.building-area-title { font-family: var(--pixel-font); font-size: 6px; color: var(--dim); margin-bottom: 6px; letter-spacing: 1px; text-align: center; }
.building-slots { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.building-slot {
  width: 68px; height: 68px;
  border: 2px dashed var(--border); background: rgba(255,255,255,.02);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; transition: border-color .1s, background .1s;
  font-size: 9px; color: var(--dim); overflow: hidden;
}
.building-slot:hover { border-color: var(--gold); background: rgba(255,215,0,.05); }
.building-slot.occupied { border-style: solid; cursor: pointer; }
.building-slot.bank-full { border-color: var(--red); animation: bankPulse .6s ease-in-out infinite; }
.building-slot.bank-ready { border-color: var(--gold); }
@keyframes bankPulse { 0%,100%{box-shadow:0 0 6px var(--red)} 50%{box-shadow:0 0 18px var(--red)} }
.slot-icon { font-size: 18px; text-align: center; }
.slot-fill-bar { position: absolute; bottom: 0; left: 0; height: 5px; background: var(--gold); transition: width .3s; }
.slot-fill-bar.full { background: var(--red); }
.slot-label { position: absolute; top: 2px; left: 2px; font-family: var(--pixel-font); font-size: 5px; color: var(--dim); }
.slot-level { position: absolute; top: 2px; right: 2px; font-family: var(--pixel-font); font-size: 8px; color: var(--gold); text-shadow: 0 0 4px rgba(0,0,0,0.8); }
.slot-img { width: 60px; height: 60px; object-fit: contain; image-rendering: pixelated; display: block; }
.money-sign {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  font-size: 14px; animation: floatMoney .6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes floatMoney { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-4px)} }
.turret-cooldown {
  position: absolute; bottom: 4px; right: 4px;
  font-family: var(--pixel-font); font-size: 5px; color: var(--green);
}

/* Shop panel */
.shop-panel {
  flex: 0 0 520px; min-width: 460px; max-width: 600px;
  background: var(--surf); border: 2px solid var(--border);
  padding: 14px; overflow-y: auto; max-height: calc(100vh - 120px);
  box-shadow: inset 0 0 12px rgba(0,0,0,.3);
}
.shop-title { font-family: var(--pixel-font); font-size: 8px; letter-spacing: 2px; color: var(--gold); border-bottom: 2px solid var(--border); padding-bottom: 10px; margin-bottom: 10px; text-align: center; text-shadow: 1px 1px 0 #3a2000; }
.currency-display { font-family: var(--pixel-font); font-size: 12px; color: var(--gold); text-align: center; margin-bottom: 12px; text-shadow: 1px 1px 0 #3a2000; }
.shop-section-title { font-family: var(--pixel-font); font-size: 7px; color: var(--gold); letter-spacing: 1px; margin: 8px 0 5px; padding: 4px 0; border-bottom: 1px solid var(--border); text-shadow: 1px 1px 0 #3a2000; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 4px; }
.upg-btn {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%; margin-bottom: 6px; padding: 8px 10px;
  background: var(--surf2); border: 2px solid var(--border);
  cursor: pointer; text-align: left; transition: border-color .1s, background .1s;
  font-family: var(--mono); box-shadow: 2px 2px 0 #0a0804;
}
.upg-btn:hover:not(:disabled) { background: rgba(240,192,64,.07); border-color: var(--gold); }
.upg-btn:disabled { opacity: .3; cursor: not-allowed; }
.upg-top { display: flex; justify-content: space-between; align-items: center; }
.upg-name { font-size: 12px; color: var(--text); font-weight: bold; }
.upg-cost { font-family: var(--pixel-font); font-size: 9px; color: var(--gold); }
.upg-desc { font-size: 10px; color: var(--dim); }
.upg-stat { font-size: 10px; color: var(--green); font-weight: bold; }
.shop-divider { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
.stat-row { display: flex; justify-content: space-between; font-size: 11px; padding: 3px 0; }
.stat-row .sv { color: var(--green); font-family: var(--pixel-font); font-size: 9px; }
.pps-row { text-align: center; padding: 4px; background: rgba(0,170,255,.1); border: 1px solid var(--blue); margin-bottom: 6px; }
.pps-val { font-family: var(--pixel-font); font-size: 10px; color: var(--blue); }

/* Event Banner */
#event-banner {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0);
  z-index: 1000; pointer-events: none; text-align: center;
  background: rgba(5,5,15,.9); border: 3px solid var(--gold);
  padding: 24px 48px; min-width: 360px;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
#event-banner.show { transform: translate(-50%,-50%) scale(1); }
.evt-title { font-family: var(--pixel-font); font-size: 14px; color: var(--gold); text-shadow: 0 0 20px var(--gold); }

/* Building Overlay */
#building-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,.8);
  display: none; align-items: center; justify-content: center;
}
#building-overlay.show { display: flex; }
.building-modal {
  background: var(--surf); border: 3px solid var(--gold);
  padding: 24px; min-width: 320px; position: relative;
  max-height: 85vh; display: flex; flex-direction: column;
}
#bmodalContent {
  overflow-y: auto; flex: 1; padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}
.building-modal-title { font-family: var(--pixel-font); font-size: 10px; color: var(--gold); margin-bottom: 16px; }
.building-option {
  border: 2px solid var(--border); padding: 12px; margin-bottom: 8px;
  cursor: pointer; transition: border-color .1s, background .1s;
}
.building-option:hover { border-color: var(--gold); background: rgba(255,215,0,.05); }
.bopt-name { font-family: var(--pixel-font); font-size: 9px; color: var(--text); margin-bottom: 4px; }
.bopt-desc { font-size: 10px; color: var(--dim); margin-bottom: 4px; }
.bopt-cost { font-family: var(--pixel-font); font-size: 9px; color: var(--gold); }

/* Bot upgrade overlay */
#bot-upgrade-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,.8);
  display: none; align-items: center; justify-content: center;
}
#bot-upgrade-overlay.show { display: flex; }
.bot-modal {
  background: var(--surf); border: 3px solid var(--blue);
  padding: 24px; min-width: 280px; position: relative;
}
.bot-modal-title { font-family: var(--pixel-font); font-size: 10px; color: var(--blue); margin-bottom: 16px; }

/* Building upgrade overlay */
#bupgrade-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,.8);
  display: none; align-items: center; justify-content: center;
}
#bupgrade-overlay.show { display: flex; }
.bupgrade-modal {
  background: var(--surf); border: 3px solid var(--gold);
  padding: 24px; min-width: 300px;
  max-height: 85vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Bomb explosion effect */
.bomb-flash {
  position: absolute; border: 3px solid var(--gold);
  background: rgba(255,215,0,.3); pointer-events: none;
  animation: bombExplode .5s ease-out forwards;
  z-index: 100;
}
@keyframes bombExplode { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.5)} }

/* Laser beam effect */
.laser-beam {
  position: absolute; left: 0; right: 0; pointer-events: none; z-index: 110;
  animation: laserFire .6s ease-out forwards;
}
.laser-beam.red-laser  { background: linear-gradient(90deg,transparent,rgba(255,45,85,1),rgba(255,45,85,.4),transparent); box-shadow: 0 0 12px var(--red),0 0 24px rgba(255,45,85,.6); }
.laser-beam.blue-laser { background: linear-gradient(90deg,transparent,rgba(0,170,255,1),rgba(0,170,255,.4),transparent); box-shadow: 0 0 12px var(--blue),0 0 24px rgba(0,170,255,.6); }
@keyframes laserFire { 0%{opacity:0;transform:scaleX(0)} 10%{opacity:1;transform:scaleX(1)} 80%{opacity:1} 100%{opacity:0} }

/* Shield glow overlay */
.shield-zone {
  position: absolute; pointer-events: none; z-index: 105;
  animation: shieldPulse 1s ease-in-out infinite;
}
.shield-zone.red-shield  { border: 2px solid rgba(255,45,85,.8);  background: rgba(255,45,85,.1); }
.shield-zone.blue-shield { border: 2px solid rgba(0,170,255,.8); background: rgba(0,170,255,.1); }
@keyframes shieldPulse { 0%,100%{opacity:.7} 50%{opacity:1} }

/* Minigun & building status indicators */
.slot-phase { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-family: var(--pixel-font); font-size: 4px; }
.slot-phase.firing  { color: var(--red); }
.slot-phase.cooling { color: var(--dim); }
.slot-phase.active  { color: var(--green); }
.slot-phase.paused  { color: var(--dim); }
.slot-cd-bar { position: absolute; bottom: 8px; left: 2px; right: 2px; height: 3px; background: var(--border); }
.slot-cd-fill { height: 100%; background: var(--green); transition: width .5s; }

/* Bot visual on canvas overlay */
#botOverlay { position: absolute; top: 0; left: 0; pointer-events: none; }

/* Public Lobbies */
.lobby-list { width: 100%; max-width: 500px; }
.lobby-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--surf2); border: 2px solid var(--border); margin-bottom: 8px; cursor: pointer; transition: border-color .1s; }
.lobby-item:hover { border-color: var(--blue); }
.lobby-id  { font-family: var(--pixel-font); font-size: 10px; color: var(--gold); }
.lobby-dur { font-size: 12px; color: var(--dim); }

/* Game Over */
.winner-text { font-family: var(--pixel-font); font-size: clamp(16px,3vw,32px); margin-bottom: 24px; text-align: center; }
.final-scores { display: flex; gap: 30px; margin: 20px 0 32px; flex-wrap: wrap; justify-content: center; }
.final-score { text-align: center; padding: 16px 28px; border: 3px solid; background: var(--surf); }
.final-score .fs-label { font-family: var(--pixel-font); font-size: 8px; margin-bottom: 8px; }
.final-score .fs-val   { font-family: var(--pixel-font); font-size: 24px; }

/* Misc */
.flex-row  { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.mt-8 { margin-top: 8px; }
.mt-16{ margin-top: 16px; }
.error-msg { color: var(--red); font-size: 12px; min-height: 20px; text-align: center; font-family: var(--pixel-font); font-size: 8px; letter-spacing: 1px; }
.back-btn  { position: fixed; top: 20px; left: 20px; z-index: 100; }
.radio-group { display: flex; gap: 12px; }
.radio-opt { flex: 1; padding: 10px; border: 2px solid var(--border); cursor: pointer; text-align: center; font-size: 12px; transition: border-color .1s; }
.radio-opt input { display: none; }
.radio-opt.selected-red  { border-color: var(--red);  background: rgba(255,45,85,.1); }
.radio-opt.selected-private { border-color: var(--dim); background: rgba(255,255,255,.03); }
.radio-opt.selected-public  { border-color: var(--blue); background: rgba(0,170,255,.06); }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--dim); border-top-color: var(--blue); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes crtFlicker { 0%,100%{opacity:1} 10%,30%,60%,80%{opacity:.85} 20%,50%,70%{opacity:1} }
@keyframes rainbowShift { 0%{background-position:0%} 100%{background-position:200%} }


/* ═══ HOME SCREEN NEW LAYOUT ═══ */
#screen-home {
  justify-content: flex-start;
  overflow-y: auto;
  padding: 0 0 20px 0;
}
.home-header {
  display: flex; flex-direction: column; align-items: center;
}
.home-mode-cards {
  display: flex; gap: 20px; justify-content: center; align-items: stretch;
  padding: 0 20px; width: 100%; max-width: 900px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.home-subtitle {
  margin-bottom: 24px;
}
.mode-card {
  flex: 1; min-width: 260px; max-width: 420px;
  border: 3px solid var(--border); background: var(--surf2);
  cursor: pointer; position: relative; overflow: hidden;
  transition: border-color .15s, transform .1s, box-shadow .1s;
  box-shadow: 4px 4px 0 #0a0804;
  display: flex; flex-direction: column;
}
.mode-card:hover { border-color: var(--gold); transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #0a0804; }
.mode-card:active { transform: translate(1px,1px); box-shadow: 2px 2px 0 #0a0804; }
.mode-card::before { content:''; position:absolute; top:0; left:16px; right:16px; height:3px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.mode-card-img {
  width: 100%; height: 170px; object-fit: cover; display: block;
  image-rendering: pixelated;
  border-bottom: 2px solid var(--border);
  background: var(--surf);
}
.mode-card-img-placeholder {
  width: 100%; height: 170px;
  background: linear-gradient(135deg, var(--surf) 0%, #1e1608 100%);
  border-bottom: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
}
.mode-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.mode-card-title {
  font-family: var(--pixel-font); font-size: 9px; color: var(--gold);
  letter-spacing: 2px; margin-bottom: 8px; text-shadow: 1px 1px 0 #3a2000;
}
.mode-card-desc { font-size: 10px; color: var(--dim); line-height: 1.6; flex: 1; }
.mode-card-btns { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Left sidebar shop icon */
.home-shop-btn {
  position: fixed; left: 18px; top: 140px;
  z-index: 200; cursor: pointer;
  width: 70px; height: 70px;
  border: 3px solid var(--gold); background: var(--surf2);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, transform .1s, box-shadow .1s;
  box-shadow: 4px 4px 0 #3a2000;
}
.home-shop-btn:hover { border-color: #fff8c0; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #3a2000; }
.home-shop-btn img { width: 52px; height: 52px; object-fit: contain; image-rendering: pixelated; }

/* Inventory button (below shop, left sidebar) */
.home-inv-btn {
  position: fixed; left: 18px; top: 224px;
  z-index: 200; cursor: pointer;
  width: 70px; height: 70px;
  border: 3px solid var(--border); background: var(--surf2);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, transform .1s, box-shadow .1s;
  box-shadow: 4px 4px 0 #1a0e00;
}
.home-inv-btn:hover { border-color: #aaddff; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #1a0e00; }
.home-inv-btn img { width: 52px; height: 52px; object-fit: contain; image-rendering: pixelated; }

/* Inventory screen */
#screen-inventory { overflow-y: auto; padding: 70px 20px 40px; }
.inv-item-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px; width: 100%; max-width: 900px; margin: 0 auto 32px;
}
.inv-item-card {
  border: 3px solid var(--border); background: var(--surf2);
  padding: 16px; position: relative; overflow: hidden;
  box-shadow: 3px 3px 0 #0a0804; cursor: pointer;
  transition: border-color .15s, transform .1s, box-shadow .1s;
}
.inv-item-card::before { content:''; position:absolute; top:0; left:8px; right:8px; height:3px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.inv-item-card:hover { border-color: var(--gold); transform: translate(-2px,-2px); box-shadow: 5px 5px 0 #0a0804; }
.inv-item-card.active-item { border-color: #44ff88; box-shadow: 0 0 12px rgba(68,255,136,.3), 3px 3px 0 #0a0804; }
.inv-item-card.active-item::before { background: linear-gradient(90deg,transparent,#44ff88,transparent); }
.inv-item-card.locked-item { opacity: .45; cursor: default; }
.inv-item-card.locked-item:hover { transform: none; box-shadow: 3px 3px 0 #0a0804; border-color: var(--border); }
.inv-item-preview { height: 70px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; margin: -16px -16px 12px; border-bottom: 2px solid var(--border); }
.inv-item-card.active-item .inv-item-preview { border-bottom-color: rgba(68,255,136,.4); }
.inv-item-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(0,0,0,.55); }
@media (max-width: 600px) {
  .inv-item-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}

/* Scrolls of Wisdom bottom-right */
.home-scrolls-btn {
  position: fixed; bottom: 20px; right: 20px; z-index: 200;
  font-size: 10px !important; padding: 12px 20px !important;
  border-color: var(--gold) !important; color: var(--gold) !important;
  box-shadow: 4px 4px 0 #3a2000 !important;
}

/* ═══ QUEST PANEL (bottom-left, home screen) ═══ */
#quest-home-panel-wrap {
  position: fixed;
  bottom: 20px;
  left: 18px;
  z-index: 200;
  width: 270px;
  display: none;
  font-family: var(--mono);
}

.qpanel-box {
  background: linear-gradient(160deg, #1e160a, #2a1f0e);
  border: 2px solid var(--border);
  box-shadow: 4px 4px 0 #0a0804, 0 0 20px rgba(0,0,0,.6);
  overflow: hidden;
}
.qpanel-header {
  background: rgba(240,192,64,.06);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.qpanel-header:hover { background: rgba(240,192,64,.12); }
.qpanel-title {
  font-family: var(--pixel-font);
  font-size: 7px;
  color: var(--gold);
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.qpanel-badge {
  font-family: var(--pixel-font);
  font-size: 6px;
  background: var(--gold);
  color: #1a0e00;
  padding: 1px 5px;
  line-height: 1.4;
}
.qpanel-arrow {
  font-size: 9px;
  color: var(--dim);
  transition: transform .2s;
}
.qpanel-arrow.open { transform: rotate(180deg); }

.qpanel-body {
  padding: 10px 12px 12px;
  max-height: 340px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.qpanel-body::-webkit-scrollbar { width: 3px; }
.qpanel-body::-webkit-scrollbar-track { background: transparent; }
.qpanel-body::-webkit-scrollbar-thumb { background: var(--border); }

.qpanel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.qpanel-count { font-size: 10px; color: var(--dim); }
.qpanel-timer { font-family: var(--pixel-font); font-size: 7px; color: var(--dim); }

.qpanel-item {
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  transition: border-color .15s;
}
.qpanel-item.done {
  background: rgba(39,174,96,.06);
  border-color: rgba(39,174,96,.3);
}
.qpanel-item.claimable {
  background: rgba(240,192,64,.06);
  border-color: rgba(240,192,64,.45);
}

.qpanel-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 5px;
}
.qpanel-item-label {
  font-size: 9px;
  color: var(--text);
  line-height: 1.4;
  flex: 1;
}
.qpanel-item.done .qpanel-item-label { color: var(--green); }
.qpanel-item.claimable .qpanel-item-label { color: var(--gold); }
.qpanel-item-reward {
  font-family: var(--pixel-font);
  font-size: 7px;
  color: var(--gold);
  white-space: nowrap;
  padding-top: 1px;
}

.qpanel-bar-track {
  height: 4px;
  background: var(--surf2);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 3px;
}
.qpanel-bar-fill {
  height: 100%;
  background: #2980b9;
  transition: width .4s;
}
.qpanel-item.done .qpanel-bar-fill { background: var(--green); }
.qpanel-item.claimable .qpanel-bar-fill { background: var(--gold); }

.qpanel-item-prog { font-size: 8px; color: var(--dim); }

.qpanel-claim-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-family: var(--pixel-font);
  font-size: 7px;
  letter-spacing: 1px;
  padding: 6px 8px;
  background: rgba(240,192,64,.1);
  border: 1px solid var(--gold);
  color: var(--gold);
  cursor: pointer;
  transition: background .15s, transform .08s;
  box-shadow: 2px 2px 0 #3a2000;
}
.qpanel-claim-btn:hover {
  background: rgba(240,192,64,.22);
  transform: translate(-1px,-1px);
  box-shadow: 3px 3px 0 #3a2000;
}
.qpanel-claim-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #3a2000; }
.qpanel-claim-btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }

.qpanel-all-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-family: var(--pixel-font);
  font-size: 7px;
  letter-spacing: 1px;
  padding: 7px 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--dim);
  cursor: pointer;
  transition: border-color .15s, color .15s;
  text-align: center;
}
.qpanel-all-btn:hover { border-color: var(--gold); color: var(--gold); }

/* Hide on mobile — panel would overlap controls */
@media (max-width: 700px) {
  #quest-home-panel-wrap { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME QUEST BOARD — 3-column grid in the main menu
   ═══════════════════════════════════════════════════════════════════════════ */
#home-quest-board {
  /* scrollable home screen can show it */
}
#screen-home {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  padding-top: 40px;
}
/* keep the header/cards centred */
#screen-home .home-header,
#screen-home .home-mode-cards,
#screen-home > div:not(#home-quest-board) {
  flex-shrink: 0;
}

.hqb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 800px) { .hqb-grid { grid-template-columns: 1fr; } }

.hqb-col {
  background: var(--surf2);
  border: 2px solid var(--border);
  overflow: hidden;
}

/* Column header strip */
.hqb-col-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  font-family: var(--pixel-font);
  font-size: 7px;
  letter-spacing: 1px;
  border-bottom: 2px solid;
}
.hqb-daily  { color: #5bb8ff; border-color: #2299ff; background: rgba(34,153,255,.08); }
.hqb-weekly { color: #cc88ff; border-color: #aa44ff; background: rgba(170,68,255,.08); }
.hqb-monthly{ color: #ffaa55; border-color: #ff8822; background: rgba(255,136,34,.08); }

.hqb-timer {
  font-size: 6px;
  color: var(--dim);
  letter-spacing: 0;
  font-family: var(--mono);
}

.hqb-list {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 80px;
}

.hqb-placeholder {
  font-size: 9px;
  color: var(--dim);
  text-align: center;
  padding: 18px 0;
  font-style: italic;
}

/* Individual quest row */
.hqb-item {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  padding: 8px 10px;
  transition: border-color .15s;
}
.hqb-item.hqb-done {
  background: rgba(39,174,96,.06);
  border-color: rgba(39,174,96,.35);
}
.hqb-item.hqb-claimable {
  background: rgba(240,192,64,.07);
  border-color: rgba(240,192,64,.55);
  animation: hqbPulse 2s ease-in-out infinite;
}
@keyframes hqbPulse {
  0%,100% { box-shadow: none; }
  50%      { box-shadow: 0 0 8px rgba(240,192,64,.3); }
}

.hqb-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 5px;
}
.hqb-item-label {
  font-size: 9px;
  color: var(--text);
  line-height: 1.45;
  flex: 1;
}
.hqb-item.hqb-done     .hqb-item-label { color: #44cc88; }
.hqb-item.hqb-claimable .hqb-item-label { color: var(--gold); }

.hqb-item-reward {
  font-family: var(--pixel-font);
  font-size: 6px;
  color: var(--gold);
  white-space: nowrap;
  padding-top: 1px;
}

.hqb-bar-track {
  height: 4px;
  background: #0a0804;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 3px;
}
.hqb-bar-fill {
  height: 100%;
  transition: width .5s ease;
}
.hqb-item.hqb-done      .hqb-bar-fill { background: #44cc88; }
.hqb-item.hqb-claimable .hqb-bar-fill { background: var(--gold); }

.hqb-item-prog {
  font-size: 7px;
  color: var(--dim);
  margin-bottom: 5px;
}

/* CLAIM button inside quest board */
.hqb-claim-btn {
  display: block;
  width: 100%;
  padding: 6px 0;
  font-family: var(--pixel-font);
  font-size: 6px;
  letter-spacing: 1px;
  background: rgba(240,192,64,.1);
  border: 1px solid var(--gold);
  color: var(--gold);
  cursor: pointer;
  transition: background .15s, transform .08s;
  box-shadow: 2px 2px 0 #3a2000;
  text-align: center;
}
.hqb-claim-btn:hover  { background: rgba(240,192,64,.24); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 #3a2000; }
.hqb-claim-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #3a2000; }
.hqb-claim-btn:disabled { opacity:.4; cursor:not-allowed; transform:none!important; }



/* Map selection screen */
#screen-map-select { overflow-y: auto; padding: 70px 20px 40px; }
.map-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px; width: 100%; max-width: 900px; margin: 0 auto;
}
.map-card {
  border: 3px solid var(--border); background: var(--surf2);
  cursor: pointer; overflow: hidden;
  transition: border-color .15s, transform .1s, box-shadow .1s;
  box-shadow: 4px 4px 0 #0a0804;
}
.map-card:hover { border-color: var(--gold); transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #0a0804; }
.map-card:active { transform: translate(1px,1px); }
.map-card-img {
  width: 100%; height: 130px; object-fit: cover;
  background: var(--surf); display: flex; align-items: center;
  justify-content: center; font-size: 40px; border-bottom: 2px solid var(--border);
}
.map-card-info { padding: 12px; }
.map-card-name { font-family: var(--pixel-font); font-size: 8px; color: var(--gold); margin-bottom: 6px; letter-spacing: 1px; }
.map-card-desc { font-size: 10px; color: var(--dim); line-height: 1.5; }
.map-card-tag { display: inline-block; margin-top: 8px; font-family: var(--pixel-font); font-size: 6px; padding: 3px 8px; border: 1px solid var(--border); color: var(--dim); }

/* Shop screen */
#screen-shop { overflow-y: auto; padding: 70px 20px 40px; }
.item-shop-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px; width: 100%; max-width: 900px; margin: 0 auto;
}
.shop-item-card {
  border: 3px solid var(--border); background: var(--surf2);
  padding: 16px; position: relative; overflow: hidden;
  box-shadow: 3px 3px 0 #0a0804;
}
.shop-item-card::before { content:''; position:absolute; top:0; left:8px; right:8px; height:3px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.shop-item-icon { font-size: 36px; text-align: center; margin-bottom: 10px; }
.shop-item-name { font-family: var(--pixel-font); font-size: 8px; color: var(--gold); margin-bottom: 6px; letter-spacing: 1px; padding-top: 4px; line-height: 1.6; overflow: visible; }
.shop-item-desc { font-size: 10px; color: var(--dim); line-height: 1.5; margin-bottom: 10px; }
.shop-item-price { font-family: var(--pixel-font); font-size: 9px; color: var(--gold); margin-bottom: 10px; }
.shop-item-badge { position: absolute; top: 8px; right: 8px; font-family: var(--pixel-font); font-size: 5px; padding: 3px 6px; background: var(--surf); border: 1px solid var(--border); color: var(--dim); }
.shop-item-badge.coming { border-color: rgba(240,192,64,.3); color: rgba(240,192,64,.5); }

@media (max-width: 1060px) {
  .game-body { flex-direction: column; align-items: center; }
  .shop-panel { max-width: 780px; width: 100%; max-height: 160px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 8px; }
  .shop-title, .currency-display, .shop-divider, .stat-row, .shop-section-title, .pps-row { display: none; }
  .upg-btn { flex: 1; min-width: 100px; max-width: 130px; margin-bottom: 0; }
  .upg-desc { display: none; }
  .bot-station-panel { display: none; }
}

/* ═══ FULL MOBILE GAME SUPPORT ═══ */
@media (max-width: 700px) {
  /* ── Game screen: full viewport, canvas dominates ── */
  /* IMPORTANT: only show when .active — without this game screen is always visible on mobile */
  #screen-game.active {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  #screen-game:not(.active) {
    display: none !important;
  }

  /* HUD: compact, readable */
  .game-hud {
    padding: 3px 6px !important;
    min-height: 40px !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
    margin-bottom: 0 !important;
  }
  .score-box {
    padding: 4px 8px !important;
    gap: 4px !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .score-val { font-size: 18px !important; line-height: 1 !important; }
  .score-label { font-size: 5px !important; letter-spacing: 0 !important; }
  #redPerc, #bluePerc { font-size: 8px !important; display: none !important; }
  .hud-timer { font-size: 14px !important; padding: 4px 8px !important; min-width: 70px !important; }
  /* Currency: big & gold so user always sees their money */
  #myCurrency { font-size: 18px !important; font-weight: bold; color: var(--gold) !important; }

  /* Canvas fills remaining space above the bottom bar */
  .game-body {
    flex: 1 1 auto !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .canvas-column {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  #canvasWrap, .canvas-wrap {
    flex: 1 1 auto !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
  }
  #gameCanvas { max-width: 100% !important; max-height: 100% !important; touch-action: none; }

  /* Hide desktop side panels in game */
  .warzone-panel, .shop-panel, .building-area { display: none !important; }

  /* But show them when moved into mobile panels */
  #mobile-warzone-content .warzone-panel { display: block !important; max-height: none !important; overflow: visible !important; }
  #mobile-shop-content .shop-panel {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: none !important;
    flex: none !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  #mobile-buildings-content .building-area { display: block !important; max-height: none !important; overflow: visible !important; }

  /* Bottom info bar: compact single line */
  #bottomBar {
    padding: 4px 8px !important;
    padding-bottom: 48px !important; /* room for tab bar */
    gap: 10px !important;
    flex-shrink: 0 !important;
    font-size: 8px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Mobile bottom tab bar ── */
  #mobile-panel-btns {
    display: none !important; /* hidden by default always */
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 300;
    justify-content: stretch;
    gap: 0;
    background: linear-gradient(0deg,#0a0804,#120e06);
    border-top: 2px solid var(--gold);
  }
  /* Only show inside the game screen */
  body.game-active #screen-game ~ * #mobile-panel-btns,
  body.game-active #mobile-panel-btns {
    display: flex !important;
  }
  .mpb-btn {
    flex: 1;
    font-family: var(--pixel-font);
    font-size: 7px;
    letter-spacing: 0.5px;
    padding: 10px 4px;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(240,192,64,.2);
    color: var(--dim);
    cursor: pointer;
    transition: color .15s, background .15s;
  }
  .mpb-btn:last-child { border-right: none; }
  .mpb-btn.active {
    color: var(--gold);
    background: rgba(240,192,64,.08);
    text-shadow: 0 0 8px rgba(240,192,64,.5);
  }

  /* ── Mobile slide-up panels — full screen above tab bar ── */
  .mobile-panel {
    position: fixed !important;
    left: 0; right: 0;
    top: 0;               /* from very top */
    bottom: 44px;         /* above tab bar */
    background: linear-gradient(160deg,#0e0c08,#17110a);
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid var(--gold);
    border-radius: 0;
    z-index: 250;
    transform: translateY(-100%);   /* slide DOWN from top */
    transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    display: flex !important;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,.9);
  }
  .mobile-panel.open { transform: translateY(0); }

  .mobile-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 8px;
    border-bottom: 1px solid rgba(240,192,64,.2);
    flex-shrink: 0;
    position: sticky; top: 0;
    background: linear-gradient(135deg,#1a1408,#120e06);
    z-index: 1;
  }
  .mobile-panel-title {
    font-family: var(--pixel-font);
    font-size: 9px;
    color: var(--gold);
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(240,192,64,.4);
  }
  .mobile-panel-close {
    font-size: 14px;
    background: none;
    border: 1px solid rgba(240,192,64,.3);
    color: var(--dim);
    width: 28px; height: 28px;
    cursor: pointer;
    border-radius: 2px;
  }

  /* Mobile currency/stats bar: larger, readable */
  #myCurrency { font-size: 14px !important; }

  /* Shop content inside mobile panel — full height, scrollable */
  #mobile-shop-content, #mobile-buildings-content, #mobile-warzone-content {
    padding: 12px 14px 20px;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Show all shop content that was hidden in old compact mode */
  #mobile-shop-content .shop-title { display: block !important; font-size: 10px !important; }
  #mobile-shop-content .currency-display {
    display: flex !important;
    font-size: 20px !important;
    margin-bottom: 14px !important;
    color: var(--gold) !important;
    align-items: center;
    gap: 6px;
  }
  #mobile-shop-content .shop-section-title { display: block !important; }
  #mobile-shop-content .pps-row { display: flex !important; }
  #mobile-shop-content .upg-btn {
    max-width: none !important;
    width: 100% !important;
    flex: none !important;
    margin-bottom: 8px !important;
  }
  #mobile-shop-content .upg-desc { display: block !important; }
  #mobile-shop-content .shop-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  #mobile-buildings-content .building-area-title { display: block !important; }
  #mobile-buildings-content .building-slots {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #mobile-warzone-content .warzone-title { display: block !important; }

  /* Shop/scrolls: visibility controlled by JS showScreen() */

  /* ── Back button: always fixed top-LEFT on mobile ── */
  .back-btn {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    z-index: 500 !important;
    font-size: 7px !important;
    padding: 8px 12px !important;
    box-shadow: 2px 2px 0 #0a0804 !important;
  }

  /* ── Shop screen: full viewport, scrollable, 2-column card grid ── */
  #screen-shop {
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 54px 10px 24px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #screen-shop #shop-coin-bar {
    margin: 0 auto 10px !important;
    max-width: 100% !important;
  }
  #screen-shop #shop-login-hint { display: none !important; }
  #screen-shop > div:last-child {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Skin card grid: 2 columns on mobile */
  .shop-item-card-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
  }
  .shop-item-card {
    padding: 10px !important;
  }
  .shop-item-card-preview {
    height: 52px !important;
    margin: -10px -10px 8px !important;
  }
  .shop-item-name { font-size: 6px !important; margin-bottom: 3px !important; }
  .shop-item-desc { display: none !important; }
  .shop-item-price { font-size: 7px !important; }
  .shop-item-card .btn { font-size: 6px !important; padding: 7px 8px !important; }

  /* Guide screen: readable on mobile */
  #screen-guide > div:last-child {
    padding: 54px 16px 80px !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    max-width: 100% !important;
  }

  /* Building/Warzone slot picker modals: scrollable with cancel always visible */
  .building-modal, .bot-modal, .bupgrade-modal {
    max-height: 82vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 94vw !important;
    min-width: unset !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Sticky cancel button at bottom of modals */
  .building-modal > .btn,
  .bot-modal > .btn,
  .bupgrade-modal > .btn {
    position: sticky !important;
    bottom: 0 !important;
    margin-top: auto !important;
    background: var(--surf) !important;
    z-index: 2 !important;
    border-top: 1px solid var(--border) !important;
  }
}

/* Desktop — hide all mobile elements */
@media (min-width: 701px) {
  #mobile-panel-btns { display: none !important; }
  #mobile-warzone-panel, #mobile-shop-panel, #mobile-buildings-panel,
  #mobile-upgrade-panel { display: none !important; }
}

/* ═══ MUSIC MENU BUTTON (mittelalterlich) ═══ */
#home-music-ctrl {
  /* already positioned fixed top-right in HTML */
}
/* Hide music button during game on ALL screen sizes */
body.game-active #home-music-ctrl {
  display: none !important;
}
#musicMenuBtn:hover {
  background: linear-gradient(135deg,#3a2510,#4d3018) !important;
  box-shadow: 0 0 18px rgba(240,192,64,.5),inset 0 1px 0 rgba(255,220,100,.2) !important;
}
#music-dropdown {
  /* Decorative corner accents via pseudo-elements */
  position: absolute;
}
/* Ensure music ctrl stays above game screens */
@media (max-width: 700px) {
  #home-music-ctrl {
    top: 8px !important;
    right: 8px !important;
    z-index: 901 !important;
  }
  /* Hide music menu during game (covered by game menu btn) */
  body.game-active #home-music-ctrl {
    display: none !important;
  }
}

/* ── Game-over screen: always on top, even on mobile ── */
#screen-over.active {
  position: relative;
  z-index: 400;
}
@media (max-width: 700px) {
  #screen-over.active {
    z-index: 400 !important;
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background: var(--bg) !important;
    overflow-y: auto !important;
  }
  /* When game is over, force-hide all mobile game panels */
  #screen-over.active ~ #mobile-warzone-panel,
  #screen-over.active ~ #mobile-shop-panel,
  #screen-over.active ~ #mobile-buildings-panel,
  #screen-over.active ~ #mobile-panel-btns {
    display: none !important;
  }
}