* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; background: #0a1220; }
body { font-family: "Segoe UI", system-ui, sans-serif; color: #dcecf4; }
#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud button, #hud .corebar { pointer-events: auto; }
#topbar {
  position: absolute; top: 8px; left: 8px; right: 8px;
  display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap;
}
.stat {
  background: #0e1f2ecc; border: 1px solid #2ee6c855; border-radius: 10px;
  padding: 6px 12px; display: flex; flex-direction: column; min-width: 74px;
}
.stat .k { font-size: 10px; letter-spacing: 0.14em; color: #6fd8c2; }
.stat span:last-child { font-size: 18px; font-weight: 700; color: #eafff7; }
.cores { display: flex; flex-direction: column; gap: 4px; margin-left: auto; }
.corebar { width: 170px; background: #0e1f2ecc; border-radius: 8px; padding: 4px 8px; border: 1px solid #ffffff22; }
.corebar span { font-size: 9px; letter-spacing: 0.12em; color: #9fc0cc; }
.corebar i { display: block; height: 7px; background: #12212e; border-radius: 4px; margin-top: 3px; overflow: hidden; }
.corebar b { display: block; height: 100%; width: 100%; background: #2ee6c8; border-radius: 4px; }
.corebar.enemy b { background: #ff5a4e; }
#buildbar { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; max-width: 98vw; }
#buildbar button {
  background: #12303fdd; color: #eafff7; border: 1px solid #2ee6c866; border-radius: 10px;
  padding: 8px 10px 6px; font: 700 13px "Segoe UI", sans-serif; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; align-items: center; min-width: 88px;
  text-shadow: 0 1px 0 #000;
}
#buildbar button span { font: 400 9.5px "Segoe UI", sans-serif; color: #8fc4b6; letter-spacing: 0.04em; }
#buildbar button:hover { background: #1a4054; border-color: #2ee6c8; }
#buildbar button.off { opacity: 0.45; }
#touchpad { position: absolute; bottom: 12px; left: 10px; display: flex; gap: 8px; align-items: flex-end; }
#dpad { display: grid; grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(3, 42px); gap: 2px; }
#dpad button { grid-row: span 1; font-size: 16px; border: 1px solid #ffffff33; border-radius: 9px; background: #0e1f2ecc; color: #bfe6ff; }
#pad-up { grid-area: 1/2; } #pad-left { grid-area: 2/1; } #pad-right { grid-area: 2/3; } #pad-down { grid-area: 3/2; }
#zoombox { display: flex; flex-direction: column; gap: 6px; }
#zoombox button, #dpad button { pointer-events: auto; width: 42px; height: 42px; cursor: pointer; }
#mmap { position: absolute; bottom: 12px; right: 10px; border: 1px solid #2ee6c855; border-radius: 10px; overflow: hidden; background: #0c1a26; }
#minimap { display: block; }
#msg {
  position: absolute; top: 62px; left: 50%; transform: translateX(-50%);
  background: #12303fd9; border: 1px solid #2ee6c877; color: #d7fff2; padding: 6px 16px;
  border-radius: 20px; font-size: 14px; opacity: 0; transition: opacity 0.3s; white-space: nowrap;
}
#msg.show { opacity: 1; }
#overlay, #end { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #050a12d9; z-index: 10; }
.hide { display: none !important; }
.panel {
  max-width: 640px; width: min(92vw, 640px); background: #0f2130ee; border: 1px solid #2ee6c866;
  border-radius: 18px; padding: 26px 28px; text-align: center; box-shadow: 0 20px 80px #000a;
}
.panel h1 { font-size: 34px; letter-spacing: 0.12em; color: #2ee6c8; text-shadow: 0 0 24px #2ee6c866; }
.panel h1.lose { color: #ff5a4e; text-shadow: 0 0 24px #ff5a4e66; }
.panel .tag { color: #9fd8c8; margin: 8px 0 14px; font-size: 15px; }
.howto { text-align: left; list-style: none; font-size: 13.5px; line-height: 1.65; color: #c4dfe8; margin-bottom: 16px; }
.howto li { padding-left: 18px; position: relative; margin: 3px 0; }
.howto li::before { content: "◆"; position: absolute; left: 0; color: #2ee6c8; font-size: 10px; top: 4px; }
#btn-start, #btn-again {
  font: 800 18px "Segoe UI", sans-serif; letter-spacing: 0.1em; color: #06241c;
  background: linear-gradient(180deg, #45f2d2, #1fbfa4); border: 0; border-radius: 12px;
  padding: 12px 34px; cursor: pointer; box-shadow: 0 0 30px #2ee6c855;
}
#btn-start:hover, #btn-again:hover { filter: brightness(1.12); }
#end p { color: #c4dfe8; margin: 12px 0 18px; font-size: 16px; }
@media (max-width: 640px) {
  .stat { min-width: 60px; padding: 4px 8px; } .stat span:last-child { font-size: 14px; }
  .corebar { width: 120px; }
  #buildbar { gap: 5px; flex-wrap: wrap; justify-content: center; bottom: 64px; }
  #buildbar button { min-width: 66px; padding: 6px 6px 4px; font-size: 11px; }
  #buildbar button span { display: none; }
  #touchpad { left: 6px; bottom: 6px; }
  #mmap { bottom: 6px; right: 6px; }
  #minimap { width: 92px; height: 92px; }
  .panel h1 { font-size: 26px; } .howto { font-size: 12px; }
}