* { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    height: 100%;
    background: #0a0a0a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "Courier New", monospace;
    color: #fff;
    overflow: hidden;
    touch-action: none;
  }
  #hud {
    display: flex;
    gap: 0;
    align-items: center;
    padding: 5px 0 3px;
    font-size: .78rem;
    letter-spacing: 1px;
    color: #b0f080;
    text-shadow: 0 0 6px #3f9;
    flex-shrink: 0;
    width: min(460px, 100vw - 8px);
    justify-content: space-between;
  }
  .hudCell {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 0 4px;
    border-right: 1px solid #2a3a1e;
  }
  .hudCell:last-child { border-right: none; }
  .hudLabel {
    font-size: .62rem;
    letter-spacing: 1px;
    color: #5a8a48;
    line-height: 1;
    margin-bottom: 1px;
  }
  .hudVal {
    font-size: .92rem;
    letter-spacing: 2px;
    color: #b0f080;
    line-height: 1;
  }
  #hudName .hudVal {
    font-size: .78rem;
    color: #7fd050;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  canvas {
    display: block;
    image-rendering: pixelated;
    border: 2px solid #3a3a3a;
    flex-shrink: 0;
  }

  /* D-pad */
  #dpad {
    display: none;
    grid-template-areas: ". up ." "left . right" ". down .";
    gap: 6px;
    margin-top: 8px;
    flex-shrink: 0;
  }
  @media (pointer: coarse) { #dpad { display: grid; } }
  .dbtn {
    width: 60px; height: 60px;
    background: #1a1a1a;
    border: 2px solid #444;
    border-radius: 10px;
    color: #b0f080;
    font-size: 1.6rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
  }
  .dbtn:active, .dbtn.pressed { background: #2a4a18; border-color: #7fd050; color: #d0ff90; }
  .up    { grid-area: up; }
  .left  { grid-area: left; }
  .right { grid-area: right; }
  .down  { grid-area: down; }

  /* Overlay */
  #overlay {
    position: fixed; inset: 0;
    background: rgba(5,10,3,0.92);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px;
    z-index: 20;
    padding: 16px;
  }
  #overlay.hidden { display: none; }

  #overlay h1 {
    font-size: clamp(1.3rem, 6vw, 2rem);
    color: #7fd050;
    text-shadow: 0 0 14px #3f9;
    letter-spacing: 4px;
    text-align: center;
    line-height: 1.2;
  }
  .tagline { color: #7a9a6a; font-size: .8rem; letter-spacing: 1px; text-align: center; }

  /* Name panel */
  #namePanel { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  #namePanel label { color: #b0f080; font-size: .85rem; letter-spacing: 2px; }
  #nameInput {
    background: #0d180a;
    border: 2px solid #3a7a22;
    color: #a0ff70;
    font-family: "Courier New", monospace;
    font-size: 1.2rem;
    padding: 10px 16px;
    border-radius: 4px;
    width: 220px;
    text-align: center;
    outline: none;
    letter-spacing: 3px;
    -webkit-appearance: none;
  }
  #nameInput:focus { border-color: #7fd050; box-shadow: 0 0 10px #3f94; }
  #playBtn {
    background: #2e6618;
    color: #c8f0a0;
    border: none;
    font-family: "Courier New", monospace;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 4px;
    padding: 12px 32px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 4px 0 #173d0c;
    margin-top: 4px;
  }
  #playBtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #173d0c; }
  #playBtn:disabled { opacity: .35; cursor: default; transform: none; }

  /* Death panel */
  #deathPanel { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
  #deathPanel.hidden { display: none; }
  #deathTitle { font-size: 2rem; color: #ff4040; text-shadow: 0 0 14px #f006; letter-spacing: 5px; }
  #deathScore { font-size: 1rem; color: #ddd; letter-spacing: 1px; }
  #saveMsg    { font-size: .82rem; color: #7fd050; min-height: 1.1em; letter-spacing: 1px; }
  #retryBtn {
    background: #2e6618;
    color: #c8f0a0;
    border: none;
    font-family: "Courier New", monospace;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 4px;
    padding: 16px 48px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 5px 0 #173d0c;
    margin-top: 6px;
  }
  #retryBtn:active { transform: translateY(4px); box-shadow: 0 1px 0 #173d0c; }

  #newPlayerSection {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    border-top: 1px solid #2a3a20;
    padding-top: 10px;
    width: min(280px, 90vw);
  }
  #newPlayerSection label { color: #7a9a6a; font-size: .75rem; letter-spacing: 2px; }
  #newNameInput {
    background: #0d180a;
    border: 1px solid #2e5a1a;
    color: #a0ff70;
    font-family: "Courier New", monospace;
    font-size: 1rem;
    padding: 8px 12px;
    border-radius: 4px;
    width: 100%;
    text-align: center;
    outline: none;
    letter-spacing: 2px;
    -webkit-appearance: none;
  }
  #newNameInput:focus { border-color: #5a9a30; }
  #newPlayerBtn {
    background: transparent;
    color: #7a9a6a;
    border: 1px solid #3a5a28;
    font-family: "Courier New", monospace;
    font-size: .8rem;
    letter-spacing: 2px;
    padding: 7px 18px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
  }
  #newPlayerBtn:active { background: #1a2e10; color: #b0f080; }

  /* Leaderboard */
  #leaderboard {
    width: min(300px, 88vw);
    border: 1px solid #1e3e12;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
  }
  #leaderboard h3 {
    background: #152e0c;
    color: #7fd050;
    font-size: .78rem;
    letter-spacing: 3px;
    padding: 6px 10px;
    text-align: center;
  }
  #lbRows { max-height: 180px; overflow-y: auto; }
  .lbRow {
    display: grid;
    grid-template-columns: 26px 1fr 52px 76px;
    padding: 4px 8px;
    font-size: .76rem;
    border-bottom: 1px solid #142010;
    color: #a0c880;
    align-items: center;
  }
  .lbRow:nth-child(odd) { background: #0a1208; }
  .lbRow.gold   { color: #f0d060; }
  .lbRow.silver { color: #b8c4cc; }
  .lbRow.bronze { color: #c88858; }
  .lbRow .pts   { text-align: right; color: #e8d060; }
  .lbRow .date  { text-align: right; color: #4a6040; font-size: .7rem; }
  .lbRow.newentry { animation: flashin .6s ease; }
  @keyframes flashin { 0%,50% { background: #2a5010; } 100% {} }
  #lbEmpty { padding: 10px; text-align: center; color: #4a6040; font-size: .8rem; }
  .hidden { display: none !important; }