html, body {
      margin: 0;
      padding: 0;
      background-color: #000;
      color: #0ff;
      font-family: 'Segoe UI', sans-serif;
      text-align: center;
      height: 100%;
    }

    body {
     margin: 0;
      padding: 30px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      background: url('images/codwall.jpg') no-repeat center center fixed;
      background-size: cover;
      color: #0ff;
      font-family: 'Segoe UI', sans-serif;
      text-align: center;
      height: 100%;
    }

    .display {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-bottom: 30px;
    }

    .digit-slot {
      width: 40px;
      height: 60px;
      border-bottom: 3px dotted #0ff;
      font-size: 2em;
      line-height: 60px;
      text-align: center;
      color: #0ff;
    }

    .keypad {
      display: grid;
      grid-template-columns: repeat(3, 80px);
      gap: 15px;
      justify-content: center;
      margin-bottom: 20px;
    }

    .keypad button {
      width: 80px;
      height: 80px;
      font-size: 1.8em;
      border: 2px solid #0ff;
      border-radius: 10px;
      background-color: rgba(0, 0, 0, 0.6);
      color: #0ff;
      box-shadow: 0 0 15px #0ff;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s, box-shadow 0.4s, color 0.3s;
    }

    .keypad button:hover {
      background-color: rgba(0, 255, 255, 0.2);
      transform: scale(1.05);
    }

    .keypad button.clicked {
      box-shadow: 0 0 20px orange;
      border-color: orange;
      color: orange;
    }

    .small-text {
      font-size: 1em !important;
    }

    .wide-button {
      grid-column: span 2;
    }

    .clear-btn {
      font-size: 1.2em;
      padding: 10px 30px;
      background: #222;
      color: #0ff;
      border: 2px solid #0ff;
      border-radius: 10px;
      cursor: pointer;
      box-shadow: 0 0 10px #0ff;
      margin-top: 10px;
    }

    #count {
      margin-top: 10px;
    }

    /* Fullscreen overlay */
    .overlay {
      display: none;
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: #000;
      color: #0ff;
      padding: 20px;
      box-sizing: border-box;
      overflow-y: auto;
    }

    .overlay-header {
      display: flex;
      justify-content: flex-end;
      padding-bottom: 10px;
    }

    .overlay .close {
      font-size: 3em;
      font-weight: bold;
      cursor: pointer;
      color: #0ff;
    }

    .overlay-content {
      font-size: 3em;
      letter-spacing: 0.2em;
      line-height: 1.6;
      white-space: pre-wrap;
      text-align: center;
    }

    .code-item {
      cursor: pointer;
      display: inline-block;
      transition: color 0.2s, text-decoration 0.2s;
    }

    .code-item.struck {
      color: red;
      text-decoration: line-through;
    }

    @media screen and (max-width: 600px) {
      .digit-slot {
        width: 50px;
        height: 70px;
        font-size: 2.5em;
        line-height: 70px;
      }

      .keypad {
        grid-template-columns: repeat(3, 100px);
        gap: 20px;
      }

      .keypad button {
        width: 100px;
        height: 100px;
        font-size: 2.4em;
      }

      .clear-btn {
        font-size: 1.5em;
        padding: 14px 40px;
        margin-top: 20px;
      }

      .overlay-content {
        font-size: 3.5em;
        letter-spacing: 0.3em;
        padding: 10px 0;
      }

      .overlay .close {
        font-size: 3.5em;
      }
    }