@media (max-width: 600px) {
      body {
        font-size: 15px;
      }

      .menu {
        gap: 10px;
      }

      .menu a {
        padding: 9px 14px;
        border-radius: 12px;
      }
    }

    .words {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      width: 100%;
      max-width: 600px;
    }

    .word {
      border: 1px solid rgba(255, 255, 255, 0.06);
      background: rgba(255, 255, 255, 0.02);
      padding: 10px 16px;
      border-radius: 14px;
      cursor: pointer;
      transition: all .2s ease;
      user-select: none;
      font-size: 1rem;
    }

    .word.selected {
      background: rgba(122, 162, 255, .2);
      border-color: rgba(122, 162, 255, .4);
      transform: scale(1.05);
    }

    button {
      margin-top: 30px;
      padding: 12px 24px;
      border: none;
      border-radius: 14px;
      font-weight: 600;
      color: var(--text);
      background: var(--primary);
      cursor: pointer;
      transition: background .2s ease, transform .2s ease;
      font-size: 1rem;
    }

    button:hover {
      background: #8bb0ff;
      transform: translateY(-2px);
    }

    /* Roulette display */
    .roulette {
      margin-top: 50px;
      min-height: 60px;
      font-size: 2rem;
      font-weight: 700;
      opacity: 0;
      transition: opacity 0.4s ease;
      position: relative;
    }

    .roulette.spin {
      animation: spin 2.2s cubic-bezier(.23, 1, .32, 1) forwards;
    }

    @keyframes spin {
      0% {
        transform: scale(1) rotate(0);
        opacity: .8;
        filter: blur(0px);
      }

      25% {
        transform: scale(1.3) rotate(15deg);
        filter: blur(2px);
      }

      50% {
        transform: scale(.8) rotate(-10deg);
        filter: blur(1px);
      }

      75% {
        transform: scale(1.1) rotate(5deg);
        filter: blur(0px);
      }

      100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
      }
    }

    .appear {
      animation: appear 1s ease forwards;
    }

    @keyframes appear {
      0% {
        opacity: 0;
        transform: scale(.6) rotate(-5deg);
        text-shadow: none;
      }

      100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        text-shadow: 0 0 18px rgba(122, 162, 255, .4);
      }
    }

    /* glowing border animation */
    .roulette::before {
      content: '';
      position: absolute;
      inset: -10px;
      border-radius: 16px;
      border: 2px solid rgba(122, 162, 255, .2);
      opacity: 0;
      transition: opacity .3s ease;
      pointer-events: none;
    }

    .roulette.active::before {
      opacity: 1;
      animation: borderPulse 1.5s infinite alternate ease-in-out;
    }

    @keyframes borderPulse {
      from {
        border-color: rgba(122, 162, 255, .2);
      }

      to {
        border-color: rgba(122, 162, 255, .7);
      }
    }

    /* Modal container (semi-transparent dark background) */
    #editor-container {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.8);
        padding: 40px;
        box-sizing: border-box;
        z-index: 9999;
    }

    /* Modal box */
    .editor-box {
        background: var(--bg);
        max-width: 600px;
        margin: auto;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    }

    /* Editor title */
    .editor-box h3 {
        margin-top: 0;
        margin-bottom: 12px;
        font-weight: 600;
        font-size: 20px;
    }

    /* Textarea */
    #editor-textarea {
        width: 100%;
        height: 250px;
        font-size: 16px;
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid #aaa;
        border-radius: 4px;
        resize: vertical;
        color: var(--muted);
        background: var(--bg);
    }

    /* Buttons under editor */
    .editor-buttons {
        margin-top: 12px;
        display: flex;
        gap: 10px;
    }