:root{ --acid:#c8ff00; --red:#ff2a2a; --ink:#0a0c0a; --panel:rgba(8,10,8,.82); }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'Courier New',monospace;color:var(--acid)}
  #c{display:block;width:100%;height:100%}
  #hud{position:fixed;inset:0;pointer-events:none;user-select:none}
  .panel{background:var(--panel);border:1px solid var(--acid);padding:8px 14px}
  #timer{position:fixed;top:18px;left:50%;transform:translateX(-50%);font-size:34px;font-weight:bold;letter-spacing:2px;min-width:210px;text-align:center}
  #switches{position:fixed;top:18px;left:18px;font-size:15px;line-height:1.7}
  #switches .lamp{display:inline-block;width:14px;height:14px;margin-right:5px;background:var(--red);border:1px solid #fff;vertical-align:middle;box-shadow:0 0 8px var(--red)}
  #switches .lamp.off{background:#1a3300;box-shadow:none;border-color:#3a5}
  #best{position:fixed;top:18px;right:18px;font-size:14px;text-align:right;line-height:1.6}
  #hint{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);font-size:13px;opacity:.85;text-align:center}
  #cross{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:20px;color:#fff;text-shadow:0 0 4px #000}
  #cross.hit{color:var(--red)}
  #msg{position:fixed;top:26%;left:50%;transform:translateX(-50%);font-size:22px;color:#fff;text-shadow:0 0 10px var(--acid);opacity:0;transition:opacity .3s;text-align:center;letter-spacing:1px}
  #map{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:none;background:rgba(6,10,16,.94);border:1px solid var(--acid);padding:10px;max-width:96vw}
  #map canvas{display:block;max-width:100%}
  #maptitle{font-size:12px;letter-spacing:3px;color:var(--acid);text-align:center;margin-bottom:6px}
  .screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(4,6,4,.9);z-index:10;text-align:center;padding:20px;overflow:auto}
  .screen h1{font-size:clamp(28px,6vw,58px);letter-spacing:6px;color:#fff;text-shadow:0 0 18px var(--acid);margin-bottom:6px}
  .screen h2{font-size:clamp(13px,2vw,17px);color:var(--acid);letter-spacing:4px;margin-bottom:24px;font-weight:normal}
  .screen p{max-width:660px;font-size:14px;line-height:1.8;color:#cfe;margin-bottom:10px}
  .screen .k{color:var(--acid);font-weight:bold}
  .btn{pointer-events:auto;margin-top:24px;background:var(--acid);color:var(--ink);border:none;padding:14px 44px;font-family:inherit;font-size:17px;font-weight:bold;letter-spacing:3px;cursor:pointer}
  .btn:hover{background:#fff}
  #endstats{font-size:26px;color:#fff;margin:8px 0 0;letter-spacing:2px;line-height:1.7}
  .newbest{color:var(--acid);animation:blink .6s steps(2) infinite}
  @keyframes blink{50%{opacity:.25}}
  .tag{font-size:11px;color:#7a9;letter-spacing:2px;margin-top:30px}
  #splits{font-size:13px;color:#9fc;line-height:1.9;margin-top:12px}
  #splits .d-neg{color:var(--acid)} #splits .d-pos{color:#f66}
  #foundlist{font-size:12px;color:#8ba;line-height:1.8;margin-top:12px;text-align:left}
  #loadnote{font-size:11px;color:#7a9;margin-top:8px}
  #modetag{color:#9fc;letter-spacing:2px}
  /* mode-select buttons */
  .modes{display:grid;grid-template-columns:repeat(2,minmax(210px,1fr));gap:12px;max-width:520px;margin:4px auto 0}
  .mbtn{pointer-events:auto;cursor:pointer;background:rgba(200,255,0,.08);border:1px solid var(--acid);color:#dff;
        font-family:inherit;padding:12px 16px;text-align:left;transition:background .12s}
  .mbtn:hover{background:var(--acid);color:var(--ink)}
  .mbtn b{display:block;font-size:16px;letter-spacing:2px;color:var(--acid)}
  .mbtn:hover b{color:var(--ink)}
  .mbtn span{display:block;font-size:11px;margin-top:3px;opacity:.85}
  .padnote{font-size:11px;color:#7a9;letter-spacing:1px;margin-top:12px}
  /* nearest-target pointer (GUIDED mode): rotates around the crosshair */
  #guide{position:fixed;top:50%;left:50%;transform-origin:0 0;pointer-events:none;display:none}
  #guide i{position:absolute;transform:translate(-50%,-78px);width:0;height:0;
           border-left:11px solid transparent;border-right:11px solid transparent;
           border-bottom:18px solid var(--acid);filter:drop-shadow(0 0 4px var(--acid))}
  /* on-screen target marker (GUIDED): floats directly over the button */
  #guidemark{position:fixed;left:0;top:0;pointer-events:none;display:none;transform:translate(-50%,-100%);text-align:center}
  #guidemark b{display:block;font-size:12px;font-weight:bold;color:var(--acid);letter-spacing:1px;text-shadow:0 0 6px #000;margin-bottom:2px}
  #guidemark i{display:block;width:0;height:0;margin:0 auto;
               border-left:10px solid transparent;border-right:10px solid transparent;
               border-top:16px solid var(--acid);filter:drop-shadow(0 0 6px var(--acid));
               animation:markbob .8s ease-in-out infinite alternate}
  @keyframes markbob{from{transform:translateY(0)}to{transform:translateY(6px)}}