*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#04060e;--card:rgba(8,14,30,0.92);--bdr:rgba(80,160,255,0.1);--blue:#4da8ff;--cyan:#00e5c8;--gold:#ffd94a;--red:#ff5c5c;--purple:#b088ff;--orange:#ff9940;--t1:#d8dfe9;--t2:#7a8599;--t3:#4a5568;--glow:rgba(77,168,255,0.15)}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--t1);font-family:'Noto Sans KR',sans-serif}

/* ===== GAME CANVAS ===== */
#gameCanvas{display:block;width:100vw;height:100vh;position:fixed;inset:0;z-index:0}

/* ===== HUD ===== */
.hud{position:fixed;z-index:10;pointer-events:none;font-family:'JetBrains Mono',monospace}
.hud-top{top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-start}
.hud-left{display:flex;flex-direction:column;gap:6px}
.hud-right{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.hud-bottom{bottom:14px;left:50%;transform:translateX(-50%);text-align:center}

.hud-label{font-size:8px;letter-spacing:2px;color:var(--t3);text-transform:uppercase}
.hud-val{font-family:'Orbitron',sans-serif;font-size:16px;font-weight:700}
.hud-unit{font-size:9px;color:var(--t3);margin-left:3px}

.hud-bar{width:160px;height:5px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden;margin-top:3px}
.hud-bar-fill{height:100%;border-radius:3px;transition:width .3s}

.hud-g{font-family:'Orbitron',sans-serif;font-size:28px;font-weight:900;text-shadow:0 0 20px currentColor}
.hud-g-label{font-size:10px;color:var(--t3)}

.hud-score{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;color:var(--gold)}
.hud-mission{font-size:10px;color:var(--cyan);letter-spacing:3px;text-transform:uppercase}

.hud-hint{font-size:11px;color:var(--t2);background:rgba(4,6,14,0.7);padding:6px 14px;border-radius:20px;border:1px solid var(--bdr);pointer-events:none;backdrop-filter:blur(8px)}

.hud-warning{animation:warnPulse 1s infinite;color:var(--red)}
@keyframes warnPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ===== MENU / OVERLAY ===== */
.overlay{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;padding:60px 0;overflow-y:auto;background:rgba(2,4,10,0.92);backdrop-filter:blur(16px);transition:opacity .5s}
.overlay.hidden{opacity:0;pointer-events:none}

.menu{text-align:center;max-width:700px;width:90%;padding:20px;animation:menuIn .6s ease-out;margin-top:auto;margin-bottom:auto}
@keyframes menuIn{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}

.menu-logo{font-family:'Orbitron',sans-serif;font-size:clamp(28px,6vw,52px);font-weight:900;letter-spacing:4px;background:linear-gradient(135deg,var(--blue),var(--cyan),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:6px}
.menu-sub{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:4px;color:var(--cyan);text-transform:uppercase;margin-bottom:32px}
.menu-story{font-size:13px;color:var(--t2);line-height:1.8;max-width:520px;margin:0 auto 20px}

.diff-container{display:flex;justify-content:center;gap:8px;margin-bottom:24px}
.diff-btn{background:rgba(255,255,255,0.06);border:1px solid var(--bdr);color:var(--t2);font-family:'Orbitron',sans-serif;font-size:11px;padding:6px 14px;border-radius:4px;cursor:pointer;transition:all 0.2s;letter-spacing:1px}
.diff-btn:hover{background:rgba(0,229,200,0.2);border-color:var(--cyan);color:var(--t1)}
.diff-btn.active{background:var(--cyan);color:#000;border-color:var(--cyan);font-weight:700}

.mission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:24px}
.mission-card{background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:14px;cursor:pointer;transition:.3s;text-align:left;position:relative;overflow:hidden;pointer-events:auto}
.mission-card:hover{border-color:rgba(77,168,255,.4);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.mission-card.locked{opacity:.4;cursor:not-allowed;pointer-events:none}
.mission-card.completed{border-color:rgba(0,229,200,.3)}
.mission-card.completed::after{content:'✓';position:absolute;top:8px;right:10px;color:var(--cyan);font-weight:700;font-size:16px}
.mc-num{font-family:'Orbitron',sans-serif;font-size:22px;font-weight:900;opacity:.12;position:absolute;bottom:4px;right:10px}
.mc-title{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;margin-bottom:4px}
.mc-desc{font-size:10px;color:var(--t2);line-height:1.5}
.mc-tag{display:inline-block;font-size:8px;font-family:'JetBrains Mono',monospace;letter-spacing:1px;padding:2px 7px;border-radius:8px;margin-top:6px;background:rgba(255,255,255,.04);color:var(--t3)}

.btn-start{display:inline-flex;gap:8px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:var(--bg);font-family:'Orbitron',sans-serif;font-weight:700;font-size:13px;padding:12px 30px;border-radius:28px;border:none;cursor:pointer;transition:.2s;pointer-events:auto;letter-spacing:1px}
.btn-start:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(77,168,255,.4)}
.btn-start:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none}

.btn-back{background:transparent;border:1px solid var(--bdr);color:var(--t2);font-family:'JetBrains Mono',monospace;font-size:11px;padding:8px 18px;border-radius:20px;cursor:pointer;transition:.2s;pointer-events:auto;margin-top:10px}
.btn-back:hover{border-color:var(--blue);color:var(--blue)}

.lbtn {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
  color: var(--t1); font-family: 'Orbitron', monospace; font-size: 11px; padding: 4px 10px;
  border-radius: 4px; cursor: pointer; transition: all 0.2s; letter-spacing: 1px;
}
.lbtn:hover { background: var(--cyan); border-color: var(--cyan); color: #000; }

/* ===== MISSION COMPLETE / FAIL ===== */
.result-overlay{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(2,4,10,0.88);backdrop-filter:blur(20px);transition:opacity .4s}
.result-overlay.hidden{opacity:0;pointer-events:none}
.result-title{font-family:'Orbitron',sans-serif;font-size:clamp(24px,5vw,42px);font-weight:900;margin-bottom:8px}
.result-title.success{color:var(--cyan)}
.result-title.fail{color:var(--red)}
.result-stats{display:flex;gap:20px;margin:16px 0 24px;flex-wrap:wrap;justify-content:center}
.result-stat{text-align:center;min-width:80px}
.result-stat-val{font-family:'Orbitron',sans-serif;font-size:20px;font-weight:700;color:var(--gold)}
.result-stat-lbl{font-size:9px;color:var(--t3);letter-spacing:1px;text-transform:uppercase;margin-top:2px}
.result-msg{font-size:12px;color:var(--t2);margin-bottom:20px;max-width:400px;text-align:center;line-height:1.7}

/* ===== BRIEFING ===== */
.briefing{position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;background:rgba(2,4,10,0.9);backdrop-filter:blur(14px);transition:opacity .4s}
.briefing.hidden{opacity:0;pointer-events:none}
.brief-box{max-width:500px;width:90%;text-align:center}
.brief-num{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:4px;color:var(--cyan);text-transform:uppercase;margin-bottom:6px}
.brief-title{font-family:'Orbitron',sans-serif;font-size:clamp(20px,4vw,34px);font-weight:900;margin-bottom:12px;background:linear-gradient(135deg,var(--blue),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.brief-desc{font-size:13px;color:var(--t2);line-height:1.8;margin-bottom:8px}
.brief-objective{font-size:12px;color:var(--gold);margin-bottom:20px;padding:10px;background:rgba(255,217,74,.04);border:1px solid rgba(255,217,74,.15);border-radius:10px}
.brief-controls{font-size:10px;color:var(--t3);margin-bottom:20px;line-height:1.8}
.brief-controls kbd{background:rgba(255,255,255,.08);border:1px solid var(--bdr);padding:2px 7px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--t2)}

/* ===== TRANSITIONS ===== */
.fade-in{animation:fadeIn .4s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ===== MOBILE ===== */
.mobile-controls{position:fixed;z-index:15;bottom:20px;left:50%;transform:translateX(-50%);display:none;gap:8px;pointer-events:auto}
.m-btn{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid var(--bdr);color:var(--t2);font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
.m-btn:active{background:rgba(77,168,255,.2);border-color:var(--blue);color:var(--blue)}
.m-btn-fire{background:rgba(255,92,92,0.1);border-color:rgba(255,92,92,.3);color:var(--red)}
.m-btn-fire:active{background:rgba(255,92,92,.3)}

@media(max-width:768px){
  .mobile-controls{display:flex}
  .hud-val{font-size:12px}
  .hud-bar{width:100px}
  .hud-g{font-size:20px}
  .hud-hint{font-size:10px;padding:4px 10px}
  .mission-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .mission-grid{grid-template-columns:1fr}
  .m-btn{width:48px;height:48px;font-size:18px}
}

/* ===== ADSENSE COMPLIANCE ===== */
.adsense-container {
  margin-top: 150px; /* Minimum 150px distance from clickable game elements to prevent accidental clicks */
  min-width: 300px;
  min-height: 250px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
}
.adsense-placeholder {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--t3);
  letter-spacing: 2px;
}