:root{
    --floor:#101a2c;
    --wall:#2c3e5c;
    --amber:#ffb020;
    --alarm:#ff3b3b;
    --mint:#dff6e8;
    --gold:#ffd75e;
    --panel:#0a1120;
  }
  *{margin:0;padding:0;box-sizing:border-box;
    -webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;}
  input{-webkit-user-select:text;user-select:text;}
  html,body{height:100%;}
  body{
    background:radial-gradient(circle at 50% 30%, #16233c 0%, #070c16 70%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
    font-family:'Share Tech Mono', monospace;color:var(--mint);
    overflow:hidden; touch-action:none;
  }
  #wrap{position:relative;}
  canvas{
    display:block;background:var(--floor);
    border:3px solid #3b4f73;border-radius:6px;
    box-shadow:0 0 60px rgba(255,176,32,.08), 0 20px 60px rgba(0,0,0,.6);
    max-width:96vw;max-height:72vh;height:auto;
  }
  /* ---------- virtual joystick (below the map) ---------- */
  #joy{
    display:none;position:relative;
    width:112px;height:112px;border-radius:50%;
    background:radial-gradient(circle, rgba(44,62,92,.5) 0%, rgba(44,62,92,.25) 70%);
    border:2px solid #4a628c;
    touch-action:none;
  }
  #stick{
    position:absolute;left:50%;top:50%;
    width:48px;height:48px;border-radius:50%;
    transform:translate(-50%,-50%);
    background:linear-gradient(180deg,#5a749e,#3b537c);
    border:2px solid #8fa3c4;
    box-shadow:0 3px 8px rgba(0,0,0,.5);
    pointer-events:none;
  }
  #joy.live{border-color:var(--amber);}
  #joy.live #stick{background:linear-gradient(180deg,#ffd75e,#ffb020);border-color:var(--gold);}
  @media (pointer:coarse){ #joy{display:block;} }
  /* ---------- overlay screens ---------- */
  .screen{
    position:absolute;inset:3px;border-radius:4px;
    background:rgba(7,12,22,.93);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:24px;gap:14px;
  }
  .screen.hidden{display:none;}
  h1{
    font-family:'Black Ops One', cursive;
    font-size:clamp(28px,6vw,54px);
    letter-spacing:2px;color:var(--gold);
    text-shadow:0 0 24px rgba(255,176,32,.45);
  }
  h2{
    font-family:'Black Ops One', cursive;
    font-size:clamp(22px,5vw,40px);letter-spacing:2px;
  }
  .sub{color:#8fa3c4;max-width:440px;line-height:1.5;font-size:14px;}
  .stamp{
    border:2px solid var(--alarm);color:var(--alarm);
    padding:2px 10px;font-size:12px;letter-spacing:4px;
    transform:rotate(-4deg);
  }
  button.cta{
    font-family:'Black Ops One', cursive;font-size:20px;letter-spacing:2px;
    color:#0a1120;background:linear-gradient(180deg,#ffd75e,#ffb020);
    border:none;border-radius:6px;padding:14px 42px;cursor:pointer;
    box-shadow:0 4px 0 #9c6a00, 0 0 30px rgba(255,176,32,.35);
    transition:transform .08s;
  }
  button.cta:active{transform:translateY(3px);box-shadow:0 1px 0 #9c6a00;}
  button.cta:focus-visible{outline:3px solid var(--mint);outline-offset:3px;}
  .keys{font-size:13px;color:#8fa3c4;}
  .keys b{color:var(--mint);}
  /* ---------- difficulty + scores ---------- */
  .diffrow{display:flex;gap:8px;}
  .diffrow button{
    font-family:'Share Tech Mono',monospace;font-size:14px;letter-spacing:1px;
    color:#8fa3c4;background:rgba(44,62,92,.5);border:1px solid #4a628c;
    border-radius:6px;padding:8px 16px;cursor:pointer;
  }
  .diffrow button.on{
    color:#0a1120;background:var(--gold);border-color:var(--gold);
    box-shadow:0 0 16px rgba(255,215,94,.35);font-weight:bold;
  }
  .diffrow button:focus-visible{outline:2px solid var(--mint);outline-offset:2px;}
  button.ghost{
    font-family:'Share Tech Mono',monospace;font-size:13px;letter-spacing:2px;
    color:var(--amber);background:none;border:1px solid var(--amber);
    border-radius:6px;padding:8px 20px;cursor:pointer;
  }
  button.ghost:focus-visible{outline:2px solid var(--mint);outline-offset:2px;}
  table.board{border-collapse:collapse;font-size:14px;min-width:320px;}
  table.board th{color:var(--amber);text-align:left;padding:4px 12px;border-bottom:1px solid #3b4f73;font-weight:normal;letter-spacing:1px;}
  table.board td{padding:5px 12px;color:var(--mint);}
  table.board tr.top td{color:var(--gold);text-shadow:0 0 10px rgba(255,215,94,.4);}
  table.board td.dim{color:#8fa3c4;}
  #initials, #caughtInitials{
    font-family:'Black Ops One',cursive;font-size:26px;letter-spacing:8px;
    width:130px;text-align:center;text-transform:uppercase;
    color:var(--gold);background:#101a2c;border:2px solid #4a628c;border-radius:6px;
    padding:8px 0 8px 8px;
  }
  #initials:focus, #caughtInitials:focus{outline:none;border-color:var(--gold);}
  /* ---- how to play ---- */
  #howto{justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 16px;gap:6px;}
  .howto-topbar{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:4px;}
  .howto-content{display:flex;flex-direction:column;gap:8px;width:100%;max-width:420px;text-align:left;}
  .howto-block{display:flex;flex-direction:column;gap:2px;}
  .howto-label{color:var(--amber);font-size:11px;letter-spacing:2px;}
  .howto-desc{color:#8fa3c4;font-size:12px;line-height:1.45;}
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important;}
  }
  .blink{animation:blink 1s steps(2) infinite;}
  @keyframes blink{50%{opacity:.25;}}
  .dossier-ref{
    font-size:10px;letter-spacing:3px;color:#4a6288;
    text-decoration:none;border-bottom:1px solid rgba(74,98,136,.35);
    padding-bottom:1px;transition:color .12s,border-color .12s;
  }
  .dossier-ref:hover{color:var(--amber);border-color:rgba(255,176,32,.4);}
  /* ---- board filters ---- */
  .board-filters{display:flex;gap:8px;margin-bottom:10px;}
  .bfilt{
    font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1px;
    color:#8fa3c4;background:rgba(44,62,92,.3);border:1px solid #4a628c;
    border-radius:4px;padding:5px 12px;cursor:pointer;
  }
  .bfilt.on{color:var(--gold);border-color:var(--gold);background:rgba(255,215,94,.08);}
  .bfilt:focus-visible{outline:2px solid var(--mint);}
  td.amber{color:var(--amber);}