html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        background: #f6f8fb;
      }
      body {
        min-height: 100vh;
        font-family: "Jua", "Segoe UI", Arial, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
      }
      #gameWrap {
        margin: 0 auto;
        margin-top: 5vw;
        background: #fff;
        border-radius: 24px;
        box-shadow: 0 6px 32px #1233;
        padding: 2.5vw 4vw 3vw 4vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 94vw;
        max-width: 470px;
      }
      h2 {
        font-size: 2rem;
        margin: 1vw 0 2vw 0;
        color: #335;
        letter-spacing: 2px;
        text-shadow: 0 2px 12px #beeb;
      }
      #winnerBanner {
        display: none;
        font-size: 1.8rem;
        font-weight: bold;
        background: linear-gradient(90deg, #4aacee 40%, #fdd56b 100%);
        color: #20314f;
        border-radius: 16px;
        box-shadow: 0 4px 22px #1476;
        padding: 13px 22px;
        margin-bottom: 12px;
        text-align: center;
        letter-spacing: 2px;
        z-index: 2;
        position: relative;
      }
      #aiBar {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px;
        margin-bottom: 8px;
        font-size: 1.12rem;
      }
      .ai-btn {
        border: none;
        outline: none;
        border-radius: 10px;
        background: #e8eefa;
        color: #334;
        padding: 8px 27px;
        font-size: 1.14rem;
        font-weight: bold;
        box-shadow: 0 1.5px 7px #cdf3;
        cursor: pointer;
        transition: 0.1s;
        margin: 0 2px;
      }
      .ai-btn.active {
        background: linear-gradient(90deg, #447ee1 40%, #34c1ea 100%);
        color: #fff;
        box-shadow: 0 2px 12px #1355;
      }
      #info {
        font-size: 1.09rem;
        color: #236adc;
        margin-bottom: 1vw;
        letter-spacing: 1px;
        text-align: center;
      }
      #turn {
        font-size: 1.3rem;
        font-weight: bold;
        margin-bottom: 0.7vw;
        margin-top: 0.2vw;
        color: #233;
        background: #f0f6ff;
        border-radius: 14px;
        padding: 7px 18px;
        box-shadow: 0 2px 8px #bbf5;
        display: inline-block;
      }
      #board {
        display: block;
        width: 86vw;
        height: 86vw;
        max-width: 360px;
        max-height: 360px;
        background: transparent;
        margin: 2vw auto;
        touch-action: none;
        user-select: none;
        border-radius: 50%;
        box-shadow: 0 2px 12px #1234;
      }
      .btn-group {
        display: flex;
        justify-content: center;
        gap: 1vw;
        margin-top: 1vw;
      }
      button {
        font-family: inherit;
        background: linear-gradient(90deg, #447ee1 40%, #34c1ea 100%);
        color: #fff;
        border: none;
        border-radius: 12px;
        padding: 10px 22px;
        font-size: 1.18rem;
        font-weight: bold;
        letter-spacing: 2px;
        margin: 0.5vw 2vw 0.5vw 0;
        box-shadow: 0 2px 12px #1355;
        cursor: pointer;
        transition: background 0.13s;
      }
      button:active {
        background: #1b4d8b;
      }
      @media (max-width: 460px) {
        #gameWrap {
          margin-top: 3vw;
        }
        h2 {
          font-size: 6.5vw;
        }
        #info,
        #turn {
          font-size: 1.1rem;
        }
        #board {
          width: 98vw;
          height: 98vw;
          max-width: 370px;
          max-height: 370px;
        }
        #winnerBanner {
          font-size: 1.3rem;
          padding: 10px 10px;
        }
      }