:root {
      --background: #22232a;
      --card-bg: #fcfbf5;
      --primary: #ffd600;
      --primary-dark: #000;
      --2ndary: #a18700;
      --text-main: #22232a;
      --input-bg: #f8f8fa;
      --hints-bg: #f7f2d2;
      --danger: #ef5350;
      --success: #3d3d3d;
      --muted: #888;
      --shadow: 0 4px 24px rgba(34,35,42,0.12);
      --btn-shadow: 0 4px 24px rgba(143,120,0,0.5);
      --radius: 1.25rem;
      --keyb-radius: 6px;
      --keyb-color: #fcf9e6;
      --keyb-bg: #ffd600;
      --keyb-special: #3d3d3d;
      --leck-font: "Leckerli One", cursive;
      --block-width: 95%;
    }
    html, body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      background: var(--background);
      font-family: 'Inter', 'Poppins', sans-serif;
    }
    body {
      min-height: 100vh;
      width: 100vw;
      margin: 0;
      padding: 0;
      text-transform: uppercase;
      display: flex;
      flex-direction: column;
      background: var(--background);
      align-items: center;
      justify-content: center;
    }
    * {
      box-sizing: border-box;
      /* Prevent double-tap zoom on mobile */
      touch-action: manipulation;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    /* Allow text selection only where needed */
    .modal-content, .flash-message {
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      user-select: text;
    }

    /* ===== App Structure ===== */
    main#app-container {
      min-height: 100vh;
      width: 100vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--background);
      padding: 0;
    }
    section#content-area {
      width: 100vw;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      margin: 0;
    }

    /* ===== Game Card and Animation ===== */
    .game-card {
      width: 100%;
      max-width: 350px;
      min-width: 300px;
      min-height: 55vh;
      max-height: 75vh;
      background: var(--card-bg);
      border-radius: 16px;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      margin: 0 auto;
      padding: 1.1rem 1.1rem 1.2rem 1.1rem;
      overflow: visible;
      position: relative;
      animation: popIn 0.5s cubic-bezier(.68,-0.55,.27,1.55);
    }
    @keyframes popIn {
      0% { transform: scale(0.8); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }

    /* ===== Header Section ===== */
    header.card-header,
    .clue-section,
    .hints-section,
    .input-section,
    .wrong-guesses-section {
      width: 100%;
      text-align: center;
      align-items: center;
      justify-content: center;
    }
    header.card-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      position: relative;
      flex-shrink: 0;
    }
    .logo-img, .howto-btn, .stats-btn {
      border-radius: 10px;
      box-shadow: var(--btn-shadow);
      flex-shrink: 0;
    }
    .logo-img {
      height: 2.8rem;
      width: 2.8rem;
      background: #fff;
      cursor: pointer;
      display: block;
    }
    .header-buttons {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }
    .howto-btn, .stats-btn {
      height: 2.8rem;
      width: 2.8rem;
      background: var(--primary);
      color: var(--text-main);
      font-size: 1.7rem;
      font-weight: 900;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
      outline: none;
      padding: 0;
      line-height: 1;
      user-select: none;
      margin-top: 0;
      /* Prevent double-tap zoom */
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .stats-btn {
      font-size: 1.3rem;
    }
    .howto-btn:hover, .stats-btn:hover {
      background: var(--2ndary);
      transform: scale(1.05);
    }
    .howto-btn:active, .stats-btn:active {
      transform: scale(0.95);
    }
    .title {
      flex: 1 1 0;
      text-align: center;
      font-family: var(--leck-font);
      font-size: 2.3rem;
      font-weight: 700;
      color: var(--primary);
      letter-spacing: 3px;
      margin: 0;
      user-select: none;
      min-width: 0;
      max-width: 70%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-shadow: var(--btn-shadow);
      border-radius: 10px;
      text-transform: none;
    }
    .subtitle {
      text-align: center;
      font-size: 1.18rem;
      font-weight: 700;
      color: var(--2ndary);
      letter-spacing: 1px;
      margin: 0.2em 0 0 0;
      user-select: none;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .tilted {
      display: inline-block;
      transform: rotate(25deg);
      font-size: 0.9rem;
      margin-left: 2px;
    }

    /* ===== Clue and Hints Section ===== */
    .clue-section {
      margin: 0;
    }
    .clue-label {
      font-weight: 700;
      color: var(--primary);
      font-size: 1.1rem;
      margin-bottom: 0;
    }
    .clue-container {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #clue-text {
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--text-main);
      letter-spacing: 0.1em;
      margin: 0;
    }
    .level-badge {
      height:40px;
      width:48px;
      margin: 8px;
      position: absolute;
      left: 5%;
      --r: .8em; /* control the cutout */
      border-inline: .5em solid #0000;
      padding: .5em .2em calc(var(--r) + .2em);
      clip-path: polygon(0 0,100% 0,100% 100%,calc(100% - .5em) calc(100% - var(--r)),50% 100%,.5em calc(100% - var(--r)),0 100%);
      background:
      radial-gradient(50% .2em at top,#000a,#0000) border-box, var(--primary) padding-box; /* the color  */
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: var(--primary-dark);
    }
    .level-badge-text {
      position: absolute;
      top: 4px;
      left: 3px;
      font-size: 0.6rem;
      font-weight: 600;
      line-height: 0.8;
      margin-bottom: 1px;
      letter-spacing: 0.3px;
    }
    .level-badge-number {
      position: absolute;
      top: 14px;
      left: 11px;
      font-size: 1.2rem;
      font-weight: 800;
      line-height: 0.9;
    }
    .hints-section {
      min-width: var(--block-width);
      max-width: var(--block-width);
      border-radius: 0.7rem;
      padding: 0.3rem 0;
      margin: 0 0 0 0;
      text-align: center;
      border: solid var(--2ndary) 1px;
      box-shadow: inset 0 0 15px #473c00;
      flex-shrink: 0;
    }
    .hints-label {
      font-weight: 700;
      color: var(--primary);
      font-size: 1.1rem;
      margin-bottom: 0.2rem;
    }
    .hint-letters {
      font-family: 'Inter', monospace;
      font-size: 1.5rem;
      letter-spacing: 0.3rem;
      color: var(--text-main);
      margin-top: 0.1rem;
      transition: color 0.25s;
      font-weight: 700;
    }

    /* ===== Streak and Input Section ===== */
    .streak-info {
      text-align: center;
      margin: 0.3em 0 0 0;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--success);
      flex-shrink: 0;
    }
    .input-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
      margin: 0.3em 0 0.2rem 0;
      flex-shrink: 0;
    }
    .guesses-left {
      font-weight: 700;
      color: var(--primary);
      margin: 0 0 0 0;
      font-size: 1.1rem;
    }
    /* Flash highlight for guesses left */
    .guesses-left-highlight-red {
      background: #fff0f1;
      color: #ef5350 !important;
      border-radius: 0.4em;
      transition: background 0.3s, color 0.3s;
      padding: 0.12em 0.5em;
    }
    .guesses-left-highlight-green {
      background: #eafbe7;
      color: #3dbe3d !important;
      border-radius: 0.4em;
      transition: background 0.3s, color 0.3s;
      padding: 0.12em 0.5em;
    }
    
    /* ===== Input Container (Input + Submit Button) ===== */
    .input-container {
      display: flex;
      width: var(--block-width);
      max-width: var(--block-width);
      background: var(--primary);
      border-color: var(--primary);
      box-shadow: var(--btn-shadow);
      border-radius: 0.7rem;
      transition: border 0.2s, box-shadow 0.2s;
      overflow: hidden;
      align-items: stretch;
    }
/*    
      .input-container:focus-within {
      border-color: var(--primary);
      box-shadow: var(--btn-shadow);
    }
*/
    .input-container.shake {
      animation: shake 0.3s;
      border-color: var(--danger);
      background: var(--danger);
    }
    .input-container.success {
      border-color: #3dbe3d;
      background: #3dbe3d;
    }
    
    .guess-input {
      flex: 1;
      background: transparent;
      border: none;
      padding: 0.3rem 0.5rem;
      margin: 0;
      font-weight: 700;
      font-size: 1.4em;
      outline: none;
      font-family: 'Inter', monospace;
      text-align: center;
      letter-spacing: 0.2em;
      user-select: none;
      color: var(--text-main);
      transition: color 0.2s;
      min-width: 0;
      /* Critical mobile keyboard prevention */
      readonly: true;
      pointer-events: none;
      caret-color: transparent;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
    }
    .guess-input::placeholder {
      color: var(--muted);
    }
    .input-container.success .guess-input {
      color: var(--success);
    }

    .submit-btn {
      background: var(--keyb-special);
      color: var(--primary);
      border: none;
      border-left: 2px solid var(--keyb-special);
      padding: 0.3rem 0.6rem;
      font-weight: 900;
      font-size: 1.2em;
      cursor: pointer;
      transition: background 0.18s, transform 0.18s, border-color 0.18s, box-shadow 0.18s;
      outline: none;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      font-family: 'Inter', 'Poppins', sans-serif;
      flex-shrink: 0;
      width: 60px;
      min-width: 60px;
      /* Prevent double-tap zoom */
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    
    .submit-btn:hover {
      background: var(--primary);
      border-left-color: var(--primary);
      color: var(--text-main);
      transform: scale(1.05);
    }
    
    .submit-btn:active {
      transform: scale(0.95);
    }
    
    .submit-btn:disabled {
      background: #999;
      border-left-color: #999;
      color: #666;
      cursor: not-allowed;
      transform: none;
    }

    @keyframes shake {
      0% { transform: translateX(0); }
      20% { transform: translateX(-8px); }
      40% { transform: translateX(8px); }
      60% { transform: translateX(-8px); }
      80% { transform: translateX(8px); }
      100% { transform: translateX(0); }
    }

    /* ===== Wrong Guesses Section ===== */
    .wrong-guesses-section {
      min-width: var(--block-width);
      max-width: var(--block-width);
      min-height: 2em;
      max-height: 4em;
      padding: 0;
      margin: .5em 0;
      font-size: 0.9em;
      color: var(--danger);
      background: transparent;
      border-radius: 0.7rem;
      padding-left: 0.5em;
      user-select: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1 1 0;
      overflow-y: auto;
      border: dotted #b08989 1px;
    }
    .wrong-label {
      font-weight: 600;
      color: var(--danger);
      letter-spacing: 0.03em;
      margin-bottom: 0.1em;
      align-self: center;
    }
    #wrong-guesses-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.1em 0.1em;
      width: 100%;
    }
    .wrong-guess-bubble {
      background: #fff0f1;
      color: var(--danger);
      border-radius: 0.8em;
      padding: 0.15em 0.6em;
      font-size: 0.95em;
      font-family: 'Inter', monospace;
      margin-bottom: 0.08em;
      box-shadow: 0 1px 3px rgba(239,83,80,0.07);
      border: 1px solid #f8d7da;
      display: inline-block;
      word-break: break-word;
    }

    /* ===== Virtual Keyboard ===== */
    #keyboard {
      width: 100%;
      max-width: 350px;
      min-width: 300px;
      margin: 1.5em auto;
      background: var(--keyb-bg);
      padding: 10px 6px 8px 6px;
      box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
      border-radius: 12px;
      flex-shrink: 0;
      height: 140px;
    }
    .keyboard-row {
      display: flex;
      justify-content: center;
      margin-bottom: 2px;
      width: 100%;
      gap: 2px;
    }
    .key {
      flex: 1 1 0;
      padding: 7px 0;
      margin: 0;
      border: none;
      border-radius: var(--keyb-radius);
      background: var(--keyb-color);
      color: var(--primary-dark);
      font-size: 1.1rem;
      font-weight: 700;
      max-width: 32px;
      min-width: 0;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      text-align: center;
      font-family: 'Poppins', 'Inter', sans-serif;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      /* Prevent double-tap zoom on keyboard keys */
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .key:active,
    .key.active {
      background: var(--primary-dark);
      color: var(--primary);
    }
    .key.enter:active,
    .key.backspace:active,
    .key.enter.active,
    .key.backspace.active {
      background: var(--primary);
      color: var(--primary-dark);
    }
    .key.enter, .key.backspace {
      flex: 1.5 1 0;
      max-width: 48px;
      background: var(--keyb-special);
      color: var(--primary);
      font-weight: 900;
    }

    /* ===== Flash Message ===== */
    .flash-message {
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 2000;
      transform: translate(-50%, -50%);
      font-size: 1.4rem;
      font-weight: 900;
      letter-spacing: 0.06em;
      padding: 0.3em 0.7em;
      border-radius: 1.1em;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s;
      box-shadow: 0 4px 24px rgba(34,35,42,0.18);
      text-align: center;
      max-width: 90vw;
      word-wrap: break-word;
      box-sizing: border-box;
    }
    .flash-message.show {
      opacity: 1;
    }
    .flash-message.success {
      background: #eafbe7;
      color: var(--success);
    }
    .flash-message.error {
      background: #fff0f1;
      color: var(--danger);
    }

    /* ===== Modals (Stats and How-to-Play) ===== */
    .modal {
      display: none; /* hidden by default */
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(34,35,42,0.75);
      z-index: 3000;
    }

    .modal-content {
      background-color: var(--card-bg);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      position: relative;
      text-align: center;
      box-sizing: border-box;
      overflow-y: auto;
      width: 92%;
      max-width: 350px;
      max-height: 90vh;
      margin: 0;
      padding: .35rem 1rem 1.2rem 1.5rem;
      text-transform: none;
    }
    .lister{
      display: list-item; /* This has to be "list-item"*/
      margin-left : 2em;
    }

    .modal-header {
      font-size: 1.6em;
      font-weight: 700;
      margin-bottom: 0;
      color: var(--primary);
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.5rem;
      margin-bottom: 0;
    }
    .stat-item {
      text-align: center;
      padding: 0.8rem 0 1rem 0;
      border: 2px solid var(--primary);
      border-radius: 0.8rem;
      background: var(--input-bg);
      box-shadow: 0 4px 12px rgba(255, 214, 0, 0.2);
    }
    .stat-number {
      font-size: 1.4em;
      font-weight: 700;
      color: var(--primary);
    }
    .stat-label {
      font-size: 0.9em;
      color: var(--muted);
    }
    .distribution {
      margin-bottom: 1rem;
    }
    .distribution-row {
      display: flex;
      align-items: center;
      margin-bottom: 1.5px;
    }
    .distribution-number {
      width: 20px;
      text-align: center;
      font-weight: 700;
      color: var(--primary);
    }
    .distribution-bar {
      height: 18px;
      background-color: var(--primary);
      margin-left: 8px;
      min-width: 18px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 6px;
      color: var(--text-main);
      font-size: 0.9em;
      border-radius: 0.3rem;
      transition: width 0.2s;
    }
    .modal-buttons {
      text-align: center;
      margin-top: 1rem;
    }
    .modal-btn {
      padding: 8px 18px;
      margin: 0 8px;
      border: none;
      border-radius: 0.7rem;
      cursor: pointer;
      font-size: 0.95em;
      font-weight: 700;
      transition: background 0.2s, transform 0.18s;
      box-shadow: var(--btn-shadow);
      /* Prevent double-tap zoom */
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .play-again-btn {
      background-color: var(--primary);
      color: var(--text-main);
    }
    .play-again-btn:hover {
      background: var(--2ndary);
      transform: scale(1.05);
    }
    .share-btn {
      background-color: var(--keyb-special);
      color: var(--primary);
    }
    .share-btn:hover {
      background: var(--primary);
      color: var(--text-main);
      transform: scale(1.05);
    }
    .close-btn {
      background-color: var(--keyb-special);
      color: var(--primary);
    }
    .close-btn:hover {
      background: var(--primary);
      color: var(--text-main);
      transform: scale(1.05);
    }
    
    /* ===== Responsive and Media Queries ===== */
    @media (max-width: 400px) {
      .game-card, #keyboard, .modal-content {
        max-width: 98vw;
        min-width: 0;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
      }
    }
    @media (max-height: 600px) {
      .game-card {
        min-height: 340px;
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
      }
      #keyboard {
        height: 105px;
        padding: 4px 2px 4px 2px;
      }
    }
    @media (max-width: 350px) {
      .title {
        font-size: 1.5rem;
      }
      .key {
        font-size: 1em;
        padding: 6px 0;
      }
      #clue-text {
        font-size: 1.3rem;
      }
      .hint-letters {
        font-size: 1.1rem;
      }
    }
    @media (max-width: 330px) {
      .title {
        font-size: 1.4rem;
      }
      .key {
        font-size: .9em;
        padding: 5px 0;
      }
      #clue-text {
        font-size: 1.1rem;
      }
      .hint-letters {
        font-size: .95rem;
      }
    }