:root{
  --green:#00ff66;
  --green-dim:#00a94a;
  --green-dark:#003b1b;
  --amber:#ffb000;
  --black:#000;
  --red:#ff3333;
}
*{box-sizing:border-box}
html,body{width:100%;height:100dvh;margin:0;background:#000;color:var(--green);font-family:"Courier New",Courier,monospace;overflow:hidden;text-transform:uppercase}
body{image-rendering:pixelated}
a{color:var(--green);text-decoration:underline}
button,input{font:inherit;text-transform:uppercase}
#scanlines{position:fixed;inset:0;z-index:900;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 3px,rgba(0,255,80,.08) 4px),radial-gradient(ellipse at center,rgba(0,255,80,.06),rgba(0,0,0,.25) 62%,rgba(0,0,0,.65));mix-blend-mode:screen}
#crtGlow{position:fixed;inset:0;z-index:899;pointer-events:none;box-shadow:inset 0 0 42px rgba(0,255,102,.25), inset 0 0 120px rgba(0,255,102,.12)}
#gameShell{height:100dvh;width:100vw;display:grid;grid-template-rows:minmax(74px,12vh) 1fr minmax(98px,18vh);gap:6px;padding:8px;position:relative}
.dos-box{border:2px solid var(--green);background:rgba(0,0,0,.88);box-shadow:0 0 0 1px var(--green-dark),0 0 12px rgba(0,255,102,.22);border-radius:0;color:var(--green)}
.dos-button{border:2px solid var(--green);background:#000;color:var(--green);padding:5px 8px;border-radius:0;cursor:pointer;box-shadow:none}
.dos-button:hover,.dos-button:focus{background:var(--green);color:#000;outline:none}
#topBar{position:relative;z-index:20;display:grid;grid-template-columns:minmax(250px,31vw) 1fr minmax(150px,210px);gap:8px;align-items:start}
#hintBox{grid-column:2;text-align:left;min-height:66px;padding:7px;cursor:pointer;justify-self:center;width:min(100%,720px)}
.box-label{display:block;font-size:12px;letter-spacing:1px;color:var(--amber);margin-bottom:3px}
#hintText{display:block;font-size:clamp(11px,1.35vw,16px);line-height:1.15}
#titleBox{grid-column:1;grid-row:1;align-self:start;justify-self:start;padding:8px 14px;font-weight:bold;font-size:clamp(18px,2.35vw,34px);letter-spacing:4px;text-shadow:0 0 8px var(--green);white-space:nowrap}
#scorePanel{grid-column:3;padding:6px;text-align:right;display:flex;flex-direction:column;gap:3px;align-items:stretch}
#scoreValue{font-size:22px;font-weight:bold}
#progressValue{font-size:11px;color:var(--green)}
#howDidIDo{font-size:12px;padding:4px}
#mapWrap{position:relative;z-index:1;min-height:0}
#worldMap{width:100%;height:100%;display:block;background:#000;shape-rendering:crispEdges}
.graticule{fill:none;stroke:rgba(0,255,102,.18);stroke-width:.7;stroke-dasharray:2 5}
.country{fill:rgba(0,0,0,0);stroke:var(--green);stroke-width:.7;vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
.country.solved{fill:url(#solvedPattern);stroke:var(--green);stroke-width:1}
.country.active{fill:url(#activePattern);stroke:var(--amber);stroke-width:1.8;filter:url(#amberGlow)}
.country:hover{stroke-width:1.1}
#countryPopup{position:absolute;z-index:30;max-width:min(360px,33vw);min-width:235px;padding:9px;font-size:12px;line-height:1.18;pointer-events:none}
#countryPopup h3{margin:0 0 5px 0;font-size:16px;color:var(--amber);letter-spacing:1px}
#countryPopup dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:2px 8px}
#countryPopup dt{color:var(--green);white-space:nowrap}
#countryPopup dd{margin:0;color:var(--green)}
#loading{position:absolute;z-index:40;left:50%;top:50%;transform:translate(-50%,-50%);padding:12px 18px}
.hidden{display:none!important}
#passwordPanel{z-index:25;align-self:stretch;padding:8px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}
#promptLine{font-size:13px;margin-bottom:4px;color:var(--amber);letter-spacing:2px}
#answerSlots{display:flex;gap:clamp(3px,.7vw,9px);justify-content:center;align-items:center;max-width:96vw;outline:none}
.slot{display:inline-flex;align-items:center;justify-content:center;width:clamp(18px,3.3vw,42px);height:clamp(28px,6vh,54px);border-bottom:3px solid var(--green);font-size:clamp(20px,4.5vw,44px);font-weight:bold;color:var(--green)}
.slot.cursor{background:rgba(0,255,102,.17);animation:cursorBlink .75s steps(1) infinite}
#mobileInput{position:absolute;left:-9999px;opacity:.01}
.blink{animation:cursorBlink .75s steps(1) infinite}
@keyframes cursorBlink{50%{opacity:0}}
.modalOverlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:18px}
.modalOverlay.open{display:flex}
.modal{max-width:min(760px,92vw);max-height:88vh;overflow:auto;padding:18px;position:relative}
.terminal-modal h1{font-size:clamp(32px,7vw,72px);letter-spacing:8px;margin:0 0 12px;text-align:center;text-shadow:0 0 10px var(--green)}
.modal h2{color:var(--amber);letter-spacing:3px;margin-top:0}
.modal p{line-height:1.35}
.terminalInput{border:2px solid var(--green);padding:8px;display:flex;gap:7px;align-items:center;margin:8px 0 12px}
.terminalInput input{flex:1;background:#000;border:0;color:var(--green);outline:none;font-size:22px}
.tiny{font-size:10px;color:var(--green-dim)}
.closeModal{position:absolute;right:8px;top:8px}
.shareRow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#scoreReport,#victoryReport{white-space:pre-wrap;line-height:1.25}
.victory h2{font-size:clamp(50px,11vw,120px);text-align:center;text-shadow:0 0 14px var(--green);margin-bottom:4px}
.victory h3{text-align:center;color:var(--amber)}
#sourceButton{position:fixed;z-index:50;left:8px;bottom:8px;font-size:10px;opacity:.72}
#rotateNotice{z-index:2000}
@media (max-height:520px){
  #gameShell{grid-template-rows:70px 1fr 72px}
  #countryPopup{font-size:10px;max-width:300px}
  .slot{height:30px;font-size:23px}
}


/* Mobile orientation guard and compact landscape game layout.
   The portrait notice is intentionally CSS-driven so it appears before JS finishes loading. */
#rotateNotice{display:none}
@media (orientation:portrait) and (pointer:coarse), (orientation:portrait) and (max-width:1200px){
  #rotateNotice{
    display:flex!important;
    z-index:3000;
    background:#000;
  }
  #rotateNotice .modal{
    max-width:92vw;
    text-align:left;
  }
  #gameShell{
    filter:brightness(.45);
    pointer-events:none;
  }
}

/* Phone/tablet landscape: preserve the game-critical UI.
   Title is hidden, hint remains centered, and password slots stay inside the viewport. */
@media (orientation:landscape) and (pointer:coarse), (max-height:560px) and (max-width:1000px){
  #gameShell{
    grid-template-rows:54px minmax(0,1fr) 76px;
    gap:4px;
    padding:4px max(4px, env(safe-area-inset-right)) 4px max(4px, env(safe-area-inset-left));
  }
  #topBar{
    grid-template-columns:1fr minmax(116px,172px);
    gap:4px;
    align-items:start;
  }
  #titleBox{
    display:none;
  }
  #hintBox{
    grid-column:1;
    grid-row:1;
    justify-self:center;
    width:min(100%, 680px);
    min-height:50px;
    max-height:54px;
    padding:4px 6px;
    overflow:hidden;
  }
  .box-label{
    font-size:9px;
    margin-bottom:1px;
  }
  #hintText{
    font-size:clamp(10px,1.7vw,12px);
    line-height:1.08;
  }
  #scorePanel{
    grid-column:2;
    grid-row:1;
    padding:4px;
    gap:1px;
  }
  #scoreValue{
    font-size:15px;
    line-height:1;
  }
  #progressValue{
    font-size:8px;
    line-height:1;
  }
  #howDidIDo{
    font-size:8px;
    padding:2px 3px;
    line-height:1.1;
  }
  #mapWrap{
    min-height:0;
  }
  #countryPopup{
    max-width:min(300px,44vw);
    min-width:190px;
    max-height:calc(100% - 8px);
    overflow:auto;
    padding:6px;
    font-size:9px;
    line-height:1.08;
  }
  #countryPopup h3{
    font-size:12px;
    margin-bottom:3px;
  }
  #passwordPanel{
    min-height:72px;
    padding:4px 6px calc(5px + env(safe-area-inset-bottom));
    justify-content:center;
  }
  #promptLine{
    font-size:10px;
    margin-bottom:0;
    letter-spacing:1px;
  }
  #answerSlots{
    gap:clamp(2px,.55vw,5px);
    max-width:98vw;
    min-height:44px;
  }
  .slot{
    width:clamp(15px,4.9vw,31px);
    height:clamp(28px,10vh,42px);
    border-bottom-width:2px;
    font-size:clamp(18px,6.5vh,31px);
  }
  #sourceButton{
    display:none;
  }
  .modalOverlay{
    padding:8px;
  }
  .modal{
    max-height:92dvh;
  }
}