:root{
    --bg:#07070a;
    --wall:#2b6cff;
    --wall-dk:#0a1230;
    --dirt:#c9a670;
    --dust:#7d6a49;
    --gold:#f5b421;
    --red:#e8321c;
    --cyan:#57d9ff;
    --cream:#f6f0e4;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%;margin:0}
  body{
    background:var(--bg);
    color:var(--cream);
    font-family:"Courier New",Courier,monospace;
    font-weight:700;
    letter-spacing:1px;
    overflow:hidden;
    touch-action:none;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    user-select:none;-webkit-user-select:none;
  }
  /* dusty vignette */
  body::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:5;
    background:radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,.75) 100%);
  }

  #hud{
    width:100%;max-width:900px;
    display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
    font-size:12px;padding:6px 8px 4px;text-transform:uppercase;
  }
  #hud .cell{display:flex;flex-direction:column;align-items:center;line-height:1.25}
  #hud .lbl{color:#8c7f68;font-size:9px}
  #hud .val{color:var(--gold);font-size:14px}
  #hud .val.red{color:var(--red)}
  #hud .val.cyan{color:var(--cyan)}
  #goHome{color:var(--gold);font-size:12px;display:none}
  #goHome.on{display:block;animation:blink .5s steps(2,end) infinite}
  #slowed{color:#d8607f;font-size:12px;display:none}
  #slowed.on{display:block;animation:blink .35s steps(2,end) infinite}
  #inverted{color:#e8321c;font-size:12px;display:none}
  #inverted.on{display:block;animation:blink .2s steps(2,end) infinite}
  #binFullMsg{color:var(--gold);font-size:12px;display:none}
  #binFullMsg.on{display:block;animation:blink .5s steps(2,end) infinite}
  #ridingMsg{color:var(--red);font-size:12px;display:none}
  #ridingMsg.on{display:block;animation:blink .25s steps(2,end) infinite}
  @keyframes blink{50%{opacity:.15}}

  #binIcon{width:34px;height:42px;image-rendering:pixelated}

  #stage{position:relative;line-height:0}
  canvas{
    display:block;background:#000;
    image-rendering:pixelated;image-rendering:crisp-edges;
    border:2px solid #17224a;
    box-shadow:0 0 26px rgba(43,108,255,.22), inset 0 0 40px rgba(0,0,0,.9);
  }

  .keyGrid{
    display:grid;grid-template-columns:repeat(3,auto);gap:4px 18px;
    justify-content:center;margin-top:8px;padding:8px 10px;
    background:#0a0c11;border:1px solid #1d2740;border-radius:6px;
  }
  .kitem{display:flex;align-items:center;gap:5px;text-align:left}
  .kicon{width:22px;height:22px;flex:none}
  .kitem b{color:#c6b795;font-size:9px;letter-spacing:.5px;display:block}
  .kitem span{color:#6d6252;font-size:8px;letter-spacing:0;display:block}
  @media (max-width:520px){
    .keyGrid{grid-template-columns:repeat(2,auto);gap:2px 12px;padding:6px}
    .kitem b{font-size:8px} .kitem span{font-size:7px}
  }

  #hint{font-size:10px;color:#6d6252;margin-top:8px;text-align:center;padding:0 8px}

  /* ---------- overlay ---------- */
  #overlay{
    position:fixed;inset:0;z-index:10;
    background:rgba(4,4,8,.93);
    display:flex;align-items:center;justify-content:center;padding:14px;
    overflow:auto;
  }
  #overlay.hidden{display:none}
  .panel{
    width:100%;max-width:460px;text-align:center;
  }
  .panel img{width:100%;max-width:420px;height:auto;image-rendering:auto;
    filter:drop-shadow(0 0 18px rgba(43,108,255,.35))}
  .panel img.splashArt{max-width:340px;border-radius:8px;animation:splashIn .4s ease-out}
  .panel img.titleLogo{max-width:260px;margin-bottom:4px}
  @keyframes splashIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
  .madeby{
    margin-top:14px;font-size:12px;letter-spacing:4px;color:var(--gold);
    text-shadow:2px 2px 0 #7a1a0c;
  }
  h1{font-size:22px;color:var(--gold);margin:6px 0 2px;text-shadow:3px 3px 0 #7a1a0c}
  .sub{font-size:10px;color:#8c7f68;margin-bottom:12px;line-height:1.7}
  input{
    font-family:inherit;font-weight:700;font-size:16px;letter-spacing:2px;
    text-align:center;text-transform:uppercase;
    background:#0d0f18;color:var(--cream);
    border:2px solid var(--wall);border-radius:6px;
    padding:10px;width:230px;max-width:80%;
  }
  input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 12px rgba(87,217,255,.4)}
  button.big{
    display:block;margin:12px auto 0;
    font-family:inherit;font-weight:700;font-size:16px;letter-spacing:3px;
    background:linear-gradient(#f5b421,#c07a06);color:#2a1500;
    border:none;border-radius:6px;padding:12px 34px;cursor:pointer;
    box-shadow:0 4px 0 #6d4204;
  }
  button.big:active{transform:translateY(3px);box-shadow:0 1px 0 #6d4204}
  .lb{margin:16px auto 0;max-width:330px;text-align:left;font-size:12px}
  .lb h2{font-size:12px;color:var(--cyan);text-align:center;margin:0 0 8px;letter-spacing:2px}
  .lbrow{display:flex;justify-content:space-between;padding:3px 8px;color:#bdb09a}
  .lbrow:nth-child(odd){background:rgba(255,255,255,.035)}
  .lbrow.me{color:var(--gold);background:rgba(245,180,33,.13)}
  .lbrow span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .note{font-size:10px;color:#6d6252;margin-top:10px;line-height:1.6}
  .final{font-size:14px;color:var(--cream);margin:4px 0 2px}
  .final b{color:var(--gold);font-size:22px}