:root{
      --white:#f6f8ff;
      --blue:#3aa6ff;
      --blue2:#76d2ff;
      --stroke: rgba(255,255,255,.14);
      --shadow: rgba(0,0,0,.35);
    }

    /* ✅ Fullscreen + perfect center */
    body{
     min-height:100vh;
      margin:0;
      display:flex;
      align-items:center;      /* vertical center */
      justify-content:center;  /* horizontal center */
      color:var(--white);
      background: radial-gradient(1200px 900px at 50% 25%, rgba(118, 210, 255, .18), transparent 60%), radial-gradient(900px 700px at 20% 75%, rgba(58, 166, 255, .14), transparent 60%), linear-gradient(180deg, #203bff, #0024ff 55%, #004aff);
      overflow:hidden;
    }

    /* soft vignette (no dots) */
    .vignette{
      position:fixed;
      inset:-40px;
      pointer-events:none;
      background: radial-gradient(1000px 700px at 50% 40%, transparent 45%, rgba(0,0,0,.45) 100%);
      opacity:.55;
    }

    /* ✅ panel */
    .panel{
      background: rgb(0 71 255 / 45%);
      border: 1px solid var(--stroke);
      box-shadow: 0 30px 80px var(--shadow);
      backdrop-filter: blur(10px);
      border-radius: 28px;
      max-width: 520px;
      width: min(520px, 92vw);

      /* ✅ iPad friendly: keep content centered inside */
      min-height: min(820px, 86vh);
      display:flex;
      flex-direction:column;
      justify-content:center;
    }

    /* Robot float */
    .robot-wrap{
      position:relative;
      width: 280px;
      height: 320px;
      margin-inline:auto;
      display:grid;
      place-items:center;
      animation: floaty 3.2s ease-in-out infinite;
      transform-origin:center;
    }
    @keyframes floaty{
      0%,100%{ transform: translateY(0); }
      50%{ transform: translateY(-14px); }
    }

    .robot{
      position:relative;
      width: 230px;
      height: 260px;
      filter: drop-shadow(0 26px 30px rgba(0,0,0,.35));
    }

    /* head */
    .head{
      position:absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 190px;
      height: 140px;
      background: linear-gradient(180deg, #f7fbff, #dfeaff);
      border-radius: 44px;
      border: 1px solid rgba(0,0,0,.06);
    }

    .ear{
      position:absolute;
      top: 42px;
      width: 34px;
      height: 62px;
      background: linear-gradient(180deg, #f7fbff, #dfeaff);
      border-radius: 18px;
      border: 1px solid rgba(0,0,0,.06);
    }
    .ear.left{ left: -18px; }
    .ear.right{ right: -18px; }
    .ear::after{
      content:"";
      position:absolute;
      inset: 10px 8px;
      border-radius: 14px;
      background: radial-gradient(circle at 50% 40%, rgba(118,210,255,.9), rgba(58,166,255,.25));
      filter: blur(.2px);
    }

    /* face */
    .face{
      position:absolute;
      top: 22px;
      left: 50%;
      transform: translateX(-50%);
      width: 150px;
      height: 92px;
      background:
        radial-gradient(140px 90px at 35% 25%, rgba(118,210,255,.25), transparent 60%),
        linear-gradient(180deg, #071a38, #0b2a55);
      border-radius: 28px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
      overflow:hidden;
    }

    .eyes{
      position:absolute;
      top: 30px;
      left: 0;
      right: 0;
      display:flex;
      justify-content:center;
      gap: 34px;
      align-items:center;
    }
    .eye{
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, var(--blue2), var(--blue));
      box-shadow: 0 0 14px rgba(118,210,255,.6);
      animation: blink 4.2s infinite;
      transform-origin:center;
    }
    .eye:nth-child(2){ animation-delay: .15s; }

    @keyframes blink{
      0%, 7%, 100%{ transform: scaleY(1); }
      8%{ transform: scaleY(.12); }
      10%{ transform: scaleY(1); }
      60%{ transform: scaleY(1); }
      61%{ transform: scaleY(.12); }
      63%{ transform: scaleY(1); }
    }

    .smile{
      position:absolute;
      left:50%;
      top: 58px;
      transform: translateX(-50%);
      width: 42px;
      height: 18px;
      border-bottom: 4px solid rgba(118,210,255,.9);
      border-radius: 0 0 28px 28px;
      filter: drop-shadow(0 0 8px rgba(118,210,255,.35));
    }

    /* body */
    .body{
      position:absolute;
      top: 132px;
      left: 50%;
      transform: translateX(-50%);
      width: 170px;
      height: 118px;
      background: linear-gradient(180deg, #f7fbff, #dfeaff);
      border-radius: 50px;
      border: 1px solid rgba(0,0,0,.06);
    }

    .chest{
      position:absolute;
      left:50%;
      top: 28px;
      transform: translateX(-50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 35%, var(--blue2), var(--blue));
      box-shadow: 0 0 18px rgba(118,210,255,.55);
      animation: pulse 2.2s ease-in-out infinite;
    }
    @keyframes pulse{
      0%,100%{ transform: translateX(-50%) scale(1); filter: brightness(1); }
      50%{ transform: translateX(-50%) scale(1.08); filter: brightness(1.25); }
    }

    /* arms */
    .arm{
      position:absolute;
      top: 156px;
      width: 72px;
      height: 22px;
      background: linear-gradient(180deg, #f7fbff, #dfeaff);
      border-radius: 16px;
      border: 1px solid rgba(0,0,0,.06);
      transform-origin: 10px 50%;
    }
    .arm.left{ left: 6px; transform: rotate(10deg); }
    .arm.right{
      right: 6px;
      transform: rotate(-18deg);
      animation: wave 1.7s ease-in-out infinite;
      transform-origin: 62px 50%;
    }
    @keyframes wave{
      0%,100%{ transform: rotate(-18deg); }
      50%{ transform: rotate(-42deg); }
    }

    .hand{
      position:absolute;
      right: -16px;
      top: -7px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: linear-gradient(180deg, #f7fbff, #dfeaff);
      border: 1px solid rgba(0,0,0,.06);
    }
    .arm.left .hand{ right:auto; left:-16px; }

    /* legs */
    .leg{
      position:absolute;
      top: 232px;
      width: 52px;
      height: 36px;
      background: linear-gradient(180deg, #f7fbff, #dfeaff);
      border-radius: 18px;
      border: 1px solid rgba(0,0,0,.06);
    }
    .leg.left{ left: 70px; }
    .leg.right{ right: 70px; }

    /* floor glow */
    .glow{
      position:absolute;
      bottom: 18px;
      left:50%;
      transform: translateX(-50%);
      width: 220px;
      height: 28px;
      background: radial-gradient(closest-side, rgba(118,210,255,.55), transparent 72%);
      filter: blur(2px);
      opacity:.9;
    }

    /* speech bubble */
    .bubble{
      max-width: 420px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(8px);
      border-radius: 18px;
      padding: 14px 16px;
      box-shadow: 0 18px 40px rgba(0,0,0,.25);
      text-align:left;
    }
    .bubble small{ opacity:.8; }

    /* start button */
    .btn-start{
      border-radius: 999px;
      padding: 14px 26px;
      font-weight: 800;
      letter-spacing:.04em;
      box-shadow: 0 18px 40px rgba(0,0,0,.28);
    }

    /* click feedback */
    .shake{ animation: shake .22s ease-in-out 1; }
    @keyframes shake{
      0%{ transform: translateY(0); }
      40%{ transform: translateY(2px); }
      70%{ transform: translateY(-2px); }
      100%{ transform: translateY(0); }
    }

    .muted{ opacity:.75; }

    /* ✅ small screens */
    @media (max-width: 420px){
      .panel{ min-height: auto; }
      .robot-wrap{ width: 240px; height: 280px; }
      .robot{ transform: scale(.92); }
    }