:root{
  --cyan:#00ffe0; --magenta:#ff2d95; --bg:#05060a; --panel:#0a0f16;
  --red:#ff2233; --green:#22ff66; --amber:#ffcc44;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  display:grid;
  grid-template:"viewport" 1fr "hud" 170px / 1fr;
  background:var(--bg); color:#cfe;
  font-family:'Share Tech Mono', monospace;
  overflow:hidden;
}

/* ---- 3D viewport (teljes szélesség) ---- */
#viewport{grid-area:viewport; position:relative; min-width:0; min-height:0; cursor:crosshair;}
#viewport canvas{display:block}
#mission{position:absolute; top:14px; left:16px; pointer-events:none; text-shadow:0 0 8px rgba(0,255,224,.6); z-index:5;}
#mission h1{font-family:'Orbitron',sans-serif; font-size:20px; letter-spacing:4px; color:var(--cyan); margin:0;}
#mission .sub{color:var(--magenta); font-size:11px; letter-spacing:2px; margin:3px 0 8px;}
#mission p{
  max-width:360px; font-size:12px; color:#9fd; line-height:1.55;
  background:rgba(5,10,16,.6); padding:8px 10px; border-left:2px solid var(--cyan); margin:0;
}
#mission code{color:var(--cyan)}
#mission b{color:#fff}

/* célkereszt */
#crosshair{
  position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan);
  pointer-events:none; z-index:6;
}

/* interakció-felirat */
#interact-prompt{
  position:absolute; left:50%; top:56%; transform:translateX(-50%);
  font-size:14px; letter-spacing:2px; color:var(--amber);
  background:rgba(5,10,16,.75); border:1px solid var(--amber); border-radius:3px;
  padding:6px 14px; opacity:0; transition:opacity .15s; pointer-events:none; z-index:6;
  text-shadow:0 0 8px rgba(255,204,68,.7);
}
#interact-prompt.visible{opacity:1}

/* pointer-lock overlay */
#lock-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; background:rgba(4,6,11,.55); pointer-events:none; z-index:7; text-align:center;
}
#lock-overlay.hidden{display:none}
#lock-overlay .big{
  font-family:'Orbitron',sans-serif; font-size:18px; letter-spacing:3px; color:var(--cyan);
  text-shadow:0 0 14px rgba(0,255,224,.8); animation:pulse 1.6s ease-in-out infinite;
}
#lock-overlay .small{font-size:12px; color:#8ad; letter-spacing:1px;}
@keyframes pulse{0%,100%{opacity:.65}50%{opacity:1}}

/* szint-vége overlay */
#win-overlay{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(4,6,11,.72); z-index:9;
}
#win-overlay.visible{display:flex;}
#win-overlay .panel{
  text-align:center; padding:36px 48px; background:rgba(6,12,20,.92);
  border:1px solid var(--green); border-radius:6px;
  box-shadow:0 0 40px rgba(34,255,102,.25), inset 0 0 30px rgba(34,255,102,.05);
}
#win-overlay h2{
  font-family:'Orbitron',sans-serif; font-size:26px; letter-spacing:5px; margin:0 0 4px;
  color:var(--green); text-shadow:0 0 16px rgba(34,255,102,.8);
}
#win-overlay .sub{color:var(--cyan); font-size:12px; letter-spacing:3px; margin-bottom:14px;}
#win-overlay p{color:#9fd; font-size:13px; margin:0 0 22px;}
#win-overlay .score-line{
  color:var(--amber); font-size:13px; letter-spacing:1px; margin:-10px 0 22px;
  text-shadow:0 0 8px rgba(255,204,68,.6);
}
#win-overlay .row{display:flex; gap:14px; justify-content:center;}

/* összpontszám-jelző a küldetés-panelen */
#score-badge{
  position:absolute; top:14px; right:16px; z-index:5; pointer-events:none;
  font-size:11px; letter-spacing:2px; color:var(--amber);
  background:rgba(5,10,16,.6); padding:6px 12px; border:1px solid var(--amber); border-radius:3px;
  text-shadow:0 0 8px rgba(255,204,68,.6);
}
.wbtn{
  font-family:'Share Tech Mono',monospace; font-size:13px; letter-spacing:2px;
  padding:10px 22px; border-radius:3px; text-decoration:none; transition:all .15s;
  color:var(--cyan); border:1px solid var(--cyan);
}
.wbtn:hover{background:rgba(0,255,224,.12); box-shadow:0 0 16px rgba(0,255,224,.4);}
.wbtn.primary{background:var(--green); color:#021; border:none; font-weight:bold; box-shadow:0 0 14px rgba(34,255,102,.5);}
.wbtn.primary:hover{box-shadow:0 0 26px rgba(34,255,102,.9); transform:translateY(-1px);}

/* ---- Kódoló-overlay: csak terminál-megnyitáskor jelenik meg ---- */
#editor-pane{
  position:fixed; inset:0; z-index:30; display:none;
  align-items:center; justify-content:center;
  background:rgba(3,5,9,.8);
}
#editor-pane.coding{display:flex; animation:panelIn .18s ease-out;}
@keyframes panelIn{from{opacity:0}to{opacity:1}}
#editor-box{
  width:min(900px,92vw); height:min(580px,82vh);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--panel); border:1px solid var(--cyan); border-radius:6px;
  box-shadow:0 0 60px rgba(0,255,224,.25), inset 0 0 40px rgba(0,255,224,.04);
}
#editor-bar{display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid #123; background:#070b12;}
.tab{font-size:12px; color:#8ad; letter-spacing:1px; border:1px solid #234; padding:4px 10px; border-radius:3px; background:#0a1420;}
.tab::before{content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--cyan); margin-right:7px; box-shadow:0 0 6px var(--cyan);}
#mode-badge{
  font-size:10px; letter-spacing:2px; padding:4px 10px; border-radius:3px;
  color:#567; border:1px solid #234; transition:all .2s;
}
#mode-badge.active{color:#012; background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 12px rgba(0,255,224,.6); font-weight:bold;}
#btn-run,#btn-back,#btn-prev{font-family:'Share Tech Mono',monospace; font-size:12px; letter-spacing:2px; padding:6px 16px; cursor:pointer; border-radius:3px; transition:all .15s;}
#btn-prev{color:#5a8; text-decoration:none; border:1px solid #234; padding:5px 10px;}
#btn-prev:hover{color:var(--cyan); border-color:var(--cyan);}
#btn-run{margin-left:auto; background:var(--cyan); color:#012; border:none; font-weight:bold; box-shadow:0 0 12px rgba(0,255,224,.5);}
#btn-run:hover:not(:disabled){box-shadow:0 0 22px rgba(0,255,224,.9); transform:translateY(-1px);}
#btn-run:disabled{opacity:.4; cursor:wait;}
#btn-back{background:transparent; color:var(--magenta); border:1px solid var(--magenta);}
#btn-back:hover{background:rgba(255,45,149,.12);}
#editor{flex:1; min-height:0;}
#editor-fallback{display:none; padding:20px; color:var(--red); font-size:13px; line-height:1.7;}

/* ---- editor kimeneti konzol (a lefutó program visszajelzései) ---- */
#editor-output{
  height:135px; min-height:90px; flex-shrink:0;
  border-top:1px solid #123; background:#04070c;
  display:flex; flex-direction:column;
}
#editor-output-header{
  padding:4px 10px; font-size:10px; letter-spacing:2px; color:#5a8;
  border-bottom:1px solid #0a1a24; background:#060a10; flex-shrink:0;
}
#editor-output-log{
  flex:1; overflow-y:auto; padding:6px 10px; font-size:12px; line-height:1.6;
}
#editor-output-log .line{white-space:pre-wrap; word-break:break-word;}
#editor-output-log .sys{color:#5a7a8a;}
#editor-output-log .info{color:#bfe;}
#editor-output-log .ok{color:var(--green); text-shadow:0 0 6px rgba(34,255,102,.5); font-weight:bold;}
#editor-output-log .err{color:var(--red); text-shadow:0 0 6px rgba(255,34,51,.4);}
#editor-output-log .warn{color:var(--amber);}
#editor-output-log::-webkit-scrollbar{width:6px}
#editor-output-log::-webkit-scrollbar-thumb{background:#134; border-radius:3px}

/* ---- Alsó HUD terminál ---- */
#hud{grid-area:hud; display:flex; flex-direction:column; background:#04070c; border-top:1px solid #123; min-height:0;}
#hud-header{
  display:flex; justify-content:space-between; gap:16px; padding:6px 12px;
  font-size:11px; letter-spacing:2px; color:#5a8;
  border-bottom:1px solid #0a1a24; background:#060a10;
}
#hud-frags{color:var(--magenta); text-shadow:0 0 6px rgba(255,45,149,.5);}
#hud-hp{color:var(--green); text-shadow:0 0 6px rgba(34,255,102,.5); transition:color .3s;}
#damage-flash{
  position:absolute; inset:0; pointer-events:none; z-index:8; opacity:0;
  transition:opacity .35s;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(255,34,51,.55) 100%);
}
#mission .warn-line{color:var(--amber); border-left-color:var(--amber); margin-top:6px !important;}
#hud-status{color:var(--red);}
#hud-status.online{color:var(--green); text-shadow:0 0 8px rgba(34,255,102,.8);}
#hud-log{flex:1; overflow-y:auto; padding:8px 12px; font-size:12.5px; line-height:1.65;}
#hud-log .line{white-space:pre-wrap; word-break:break-word;}
#hud-log .sys{color:#5a7a8a;}
#hud-log .info{color:#bfe;}
#hud-log .ok{color:var(--green); text-shadow:0 0 8px rgba(34,255,102,.7); font-weight:bold; letter-spacing:3px; font-size:15px;}
#hud-log .err{color:var(--red); text-shadow:0 0 6px rgba(255,34,51,.5);}
#hud-log .warn{color:var(--amber);}
#hud-log::-webkit-scrollbar{width:8px}
#hud-log::-webkit-scrollbar-thumb{background:#134; border-radius:4px}

/* ---- Reszponzív ---- */
@media (max-width:900px){
  body{grid-template:"viewport" 1fr "hud" 150px / 1fr;}
  #editor-box{width:96vw; height:88vh;}
}