:root{
    /* === EDU GAME PALETTE === */
    --green:#3ddc97;
    --green-soft:#b9f5d3;
    --yellow:#ffd93d;
    --yellow-soft:#fff1b8;
    --purple:#9b7cff;
    --purple-soft:#e5dcff;

    --bg1:#eafff3;
    --bg2:#f6f1ff;

    --card:rgba(255,255,255,0.94);
    --shadow:rgba(40,40,80,0.12);
  }

  *{box-sizing:border-box}

  html,body{
    height:100%;
    margin:0;
    font-family:
      "Comic Neue",
      "Baloo 2",
      "Fredoka",
      "Nunito",
      "Comic Sans MS",
      cursive,
      system-ui;
    background:linear-gradient(135deg,var(--bg1),var(--bg2));
    color:#2a2a2a;
  }

  /* ================= LAYOUT ================= */
  .page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
  }

  .panel{
    width:460px;
    max-width:96vw;
    background:linear-gradient(
      180deg,
      var(--card),
      rgba(255,255,255,0.88)
    );
    border-radius:26px;
    padding:20px;
    box-shadow:
      0 18px 40px var(--shadow),
      inset 0 0 0 2px var(--green-soft);
    position:relative;
    overflow:hidden;
  }

  /* ================= TITLES ================= */
  h1{
    margin:0 0 6px;
    text-align:center;
    font-size:24px;
    color:var(--purple);
    letter-spacing:1px;
    text-shadow:0 2px 0 #fff;
  }

  .subtitle{
    text-align:center;
    font-size:13px;
    color:#4b4b7a;
    margin-bottom:14px;
  }

  /* ================= CONTROLS ================= */
  .controls{
    display:flex;
    gap:10px;
    justify-content:center;
    align-items:center;
    margin-bottom:14px;
  }

  select,button{
    font-family:inherit;
    font-weight:700;
  }

  select{
    padding:8px 12px;
    border-radius:14px;
    border:none;
    background:linear-gradient(
      180deg,
      var(--yellow-soft),
      #fff
    );
    box-shadow:0 6px 14px rgba(0,0,0,0.08);
    cursor:pointer;
  }

  /* ================= BOARD ================= */
  .board-area{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
  }

  #game{
    display:grid;
    grid-template-columns:repeat(3,96px);
    grid-template-rows:repeat(3,96px);
    gap:12px;
    padding:12px;
    background:linear-gradient(
      180deg,
      var(--green-soft),
      var(--purple-soft)
    );
    border-radius:20px;
    box-shadow:inset 0 10px 24px rgba(0,0,0,0.08);
  }

  .cell{
    width:96px;
    height:96px;
    border-radius:18px;
    background:linear-gradient(
      180deg,
      #ffffff,
      var(--yellow-soft)
    );
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    cursor:pointer;
    user-select:none;
    transition:
      transform .18s ease,
      box-shadow .18s ease;
    box-shadow:0 8px 18px rgba(0,0,0,0.12);
  }

  .cell:hover{
    transform:translateY(-6px) scale(1.05);
  }

  .cell.selected{
    outline:4px solid var(--green);
    box-shadow:0 20px 40px rgba(61,220,151,0.35);
  }

  .cell.canmove{
    background:linear-gradient(
      180deg,
      #fff,
      var(--green-soft)
    );
    box-shadow:0 22px 44px rgba(155,124,255,0.25);
    transform:scale(1.06);
  }

  /* ================= TURN INDICATOR ================= */
  #turn{
    padding:8px 16px;
    border-radius:999px;
    font-weight:800;
    background:linear-gradient(
      90deg,
      var(--green),
      var(--purple)
    );
    color:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
  }

  /* ================= BUTTONS ================= */
  .bottom-row{
    display:flex;
    gap:12px;
    justify-content:center;
    margin-top:8px;
  }

  .btn{
    padding:8px 16px;
    border-radius:16px;
    border:none;
    background:linear-gradient(
      90deg,
      var(--yellow),
      var(--green)
    );
    color:#333;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 26px rgba(0,0,0,0.18);
  }

  .btn.ghost{
    background:transparent;
    border:2px dashed var(--purple);
    color:var(--purple);
    box-shadow:none;
  }

  /* ================= ANIMATION ================= */
  .move-anim{
    animation:eduPop .28s ease;
  }

  @keyframes eduPop{
    0%{transform:scale(.7);opacity:.5}
    60%{transform:scale(1.15)}
    100%{transform:scale(1)}
  }

  /* ================= WIN EFFECT ================= */
  .glitter{
    pointer-events:none;
    position:absolute;
    inset:0;
    border-radius:26px;
    background:
      radial-gradient(circle at 20% 30%, rgba(255,255,255,.7) 0, transparent 6%),
      radial-gradient(circle at 70% 60%, rgba(255,255,255,.6) 0, transparent 6%);
    opacity:0;
    transition:.4s;
  }

  .panel.win .glitter{
    opacity:1;
  }

  .sparkle{
    position:absolute;
    width:10px;
    height:10px;
    border-radius:50%;
    background:radial-gradient(circle,#fff,var(--yellow),transparent 60%);
    animation:sparkleEdu 900ms ease forwards;
  }

  @keyframes sparkleEdu{
    0%{opacity:1;transform:scale(.6)}
    50%{transform:scale(1.3) translateY(-40px)}
    100%{opacity:0;transform:scale(.2) translateY(-80px)}
  }

  .small{
    font-size:13px;
    color:#5a5a8a;
  }

  /* ================= RESPONSIVE ================= */
  @media (max-width:520px){
    #game{
      grid-template-columns:repeat(3,70px);
      grid-template-rows:repeat(3,70px);
      gap:10px;
    }
    .cell{
      width:70px;
      height:70px;
      font-size:30px;
    }
  }