:root{
    --sky:#EAF4FE;
    --sky2:#D8EAFB;
    --ink:#27395B;
    --ink2:#6B7CA0;
    --card:#FFFFFF;
    --sun:#FFC531;
    --sun-d:#E8A600;
    --leaf:#3BC77E;
    --leaf-d:#2C9E62;
    --coral:#FF7A59;
    --coral-d:#E05B3B;
    --violet:#7C6CF0;
    --violet-d:#5D4DD6;
    --berry:#FF6B81;
    --line:#DCE6F5;
    --shadow:0 10px 24px rgba(39,57,91,.10);
  }
  *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family: ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color:var(--ink);
    background:
      radial-gradient(420px 220px at 12% -4%, #FFFFFF 0%, rgba(255,255,255,0) 70%),
      radial-gradient(520px 260px at 92% 0%, #F3FAFF 0%, rgba(243,250,255,0) 70%),
      linear-gradient(180deg, var(--sky) 0%, var(--sky2) 100%);
    min-height:100%;
    touch-action:manipulation;
    user-select:none;
    -webkit-user-select:none;
  }
  .wrap{ max-width:760px; margin:0 auto; padding:16px 18px calc(28px + env(safe-area-inset-bottom)); min-height:100vh; display:flex; flex-direction:column; }
  .screen{ display:none; flex:1; flex-direction:column; }
  .screen.on{ display:flex; }

  /* ---------- chunky tactile buttons ---------- */
  .btn{
    font-family:inherit; font-weight:800; color:#fff; border:none; cursor:pointer;
    border-radius:20px; padding:16px 26px; font-size:22px; line-height:1.2;
    box-shadow:0 6px 0 var(--bd, #C9D6EA);
    background:var(--bg, var(--violet));
    transition:transform .08s ease, box-shadow .08s ease, filter .15s ease;
  }
  .btn:active{ transform:translateY(5px); box-shadow:0 1px 0 var(--bd, #C9D6EA); }
  .btn.violet{ --bg:var(--violet); --bd:var(--violet-d); }
  .btn.leaf{ --bg:var(--leaf); --bd:var(--leaf-d); }
  .btn.coral{ --bg:var(--coral); --bd:var(--coral-d); }
  .btn.sun{ --bg:var(--sun); --bd:var(--sun-d); color:#5A4300; }
  .btn.ghost{ --bg:#fff; --bd:#D5E1F2; color:var(--ink); }
  .btn.small{ font-size:17px; padding:10px 16px; border-radius:15px; box-shadow:0 4px 0 var(--bd,#C9D6EA); }
  .btn:disabled{ filter:grayscale(.5) opacity(.55); pointer-events:none; }

  .iconbtn{
    width:52px; height:52px; border-radius:16px; border:none; cursor:pointer;
    background:#fff; box-shadow:0 4px 0 #D5E1F2; font-size:24px; line-height:1;
    display:flex; align-items:center; justify-content:center; color:var(--ink);
    transition:transform .08s ease, box-shadow .08s ease;
  }
  .iconbtn:active{ transform:translateY(3px); box-shadow:0 1px 0 #D5E1F2; }

  /* ---------- top bar ---------- */
  .topbar{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .topbar .spacer{ flex:1; }
  .stars-pill{
    display:flex; align-items:center; gap:6px; background:#fff; border-radius:999px;
    padding:9px 16px; font-weight:900; font-size:20px; box-shadow:0 4px 0 #D5E1F2;
  }
  .who-pill{
    display:flex; align-items:center; gap:10px; background:#fff; border-radius:999px;
    padding:6px 16px 6px 6px; box-shadow:0 4px 0 #D5E1F2; border:none; font-family:inherit; cursor:pointer;
  }
  .who-pill .av{ width:40px; height:40px; border-radius:50%; background:#EFECFF; display:flex; align-items:center; justify-content:center; font-size:24px; }
  .who-pill .nm{ font-weight:900; font-size:18px; color:var(--ink); }
  .progress{ display:flex; gap:7px; align-items:center; justify-content:center; margin:2px 0 10px; }
  .dot{ width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 2.5px var(--line); }
  .dot.done{ background:var(--sun); box-shadow:inset 0 0 0 2.5px var(--sun-d); }
  .dot.now{ background:var(--violet); box-shadow:inset 0 0 0 2.5px var(--violet-d); transform:scale(1.25); }

  /* ---------- home / picker grids ---------- */
  #home, #modes{ gap:6px; }
  .hello{ text-align:center; margin:4px 0 2px; }
  .hello h1{ font-size:34px; margin:0; }
  .hello .sub{ color:var(--ink2); font-size:17px; font-weight:700; margin:6px 0 4px; }
  .pick-title{ text-align:center; font-size:22px; font-weight:900; margin:8px 0 12px; color:var(--ink); }
  .grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; max-width:560px; width:100%; margin:0 auto; }
  .tile{
    display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
    background:#fff; border:none; cursor:pointer; border-radius:24px; padding:20px 14px;
    box-shadow:0 7px 0 #D5E1F2; font-family:inherit;
    transition:transform .08s ease, box-shadow .08s ease;
  }
  .tile:active{ transform:translateY(5px); box-shadow:0 2px 0 #D5E1F2; }
  .tile .tile-emoji{ font-size:44px; width:78px; height:78px; border-radius:22px; background:#F3F7FF; display:flex; align-items:center; justify-content:center; }
  .tile .tile-name{ font-size:20px; font-weight:900; color:var(--ink); }
  .tile.wide{ grid-column:1 / -1; flex-direction:row; justify-content:center; gap:14px; }
  .tile.wide .tile-emoji{ width:56px; height:56px; font-size:32px; border-radius:18px; }

  .modes{ display:flex; flex-direction:column; gap:16px; max-width:460px; width:100%; margin:0 auto; }
  .mode-card{
    display:flex; align-items:center; gap:18px; text-align:left; background:#fff; border:none; cursor:pointer;
    border-radius:26px; padding:20px 22px; box-shadow:0 7px 0 #D5E1F2; font-family:inherit;
    transition:transform .08s ease, box-shadow .08s ease;
  }
  .mode-card:active{ transform:translateY(5px); box-shadow:0 2px 0 #D5E1F2; }
  .mode-emoji{ font-size:42px; width:70px; height:70px; border-radius:22px; display:flex; align-items:center; justify-content:center; flex:none; background:#EFECFF; }
  .mode-card.m2 .mode-emoji{ background:#FFEFE9; }
  .mode-card.m3 .mode-emoji{ background:#FFF6DE; }
  .mode-card.m4 .mode-emoji{ background:#E4F7EC; }
  .mode-name{ font-size:24px; font-weight:900; color:var(--ink); }
  .mode-desc{ font-size:15px; font-weight:600; color:var(--ink2); margin-top:3px; }
  .parent-link{ margin-top:22px; background:none; border:none; color:var(--ink2); font-family:inherit; font-size:16px; font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:3px; align-self:center; }
  .backrow{ margin-bottom:4px; }

  /* ---------- game shared ---------- */
  .scene{
    width:132px; height:132px; margin:2px auto 10px; background:#fff; border-radius:50%;
    box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;
    font-size:56px; letter-spacing:-6px;
  }
  .context{
    display:flex; align-items:center; justify-content:center; gap:10px; margin:0 auto 14px; max-width:560px;
  }
  .context p{ margin:0; font-size:21px; font-weight:800; text-align:center; }
  .context .iconbtn{ width:44px; height:44px; flex:none; font-size:20px; }

  /* ---------- speech bubble (signature) ---------- */
  .bubble{
    position:relative; background:#fff; border-radius:30px; padding:24px 20px; margin:6px auto 20px;
    max-width:640px; width:100%; min-height:110px; box-shadow:var(--shadow);
    display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center;
  }
  .bubble::after{
    content:""; position:absolute; left:56px; bottom:-13px; width:26px; height:26px; background:#fff;
    border-radius:6px; transform:rotate(45deg);
  }
  .bubble.win{ animation:bounce .55s ease; box-shadow:0 0 0 5px var(--leaf), var(--shadow); }
  .bubble.shake{ animation:shake .45s ease; }
  @keyframes bounce{ 0%{transform:scale(1)} 35%{transform:scale(1.06)} 65%{transform:scale(.98)} 100%{transform:scale(1)} }
  @keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-9px)} 50%{transform:translateX(9px)} 75%{transform:translateX(-5px)} }

  .slot{
    min-width:76px; height:62px; border-radius:18px; border:3px dashed #C9D6EA; background:#F6FAFF;
    display:flex; align-items:center; justify-content:center; padding:0 8px;
  }
  .chip{
    font-family:inherit; border:none; cursor:pointer; font-size:24px; font-weight:900; color:var(--ink);
    background:#FFF6DE; border-radius:18px; padding:14px 20px; box-shadow:0 5px 0 #EAD189;
    transition:transform .08s ease, box-shadow .08s ease, opacity .2s ease;
  }
  .chip:active{ transform:translateY(4px); box-shadow:0 1px 0 #EAD189; }
  .chip.inslot{ background:#EFECFF; box-shadow:0 4px 0 #C9C0F5; padding:11px 16px; }
  .chip.good{ background:#DCF7EA; box-shadow:0 4px 0 #9ADDBE; }
  .chip.bad{ animation:shake .4s ease; }
  .tray{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:0 auto 18px; max-width:640px; min-height:66px; }
  .tools{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

  /* ---------- choose / ask mode ---------- */
  .opts{ display:flex; flex-direction:column; gap:14px; max-width:600px; width:100%; margin:4px auto 10px; }
  .opt{
    display:flex; align-items:center; gap:14px; background:#fff; border:none; cursor:pointer; text-align:left;
    border-radius:22px; padding:16px 18px; box-shadow:0 6px 0 #D5E1F2; font-family:inherit;
    font-size:21px; font-weight:800; color:var(--ink); line-height:1.35;
    transition:transform .08s ease, box-shadow .08s ease, opacity .2s ease;
  }
  .opt:active{ transform:translateY(4px); box-shadow:0 2px 0 #D5E1F2; }
  .opt .speak{ flex:none; width:44px; height:44px; border-radius:14px; border:none; background:#F0F5FC; font-size:19px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .opt.right{ background:#DCF7EA; box-shadow:0 6px 0 #9ADDBE; }
  .opt.wrong{ opacity:.45; }
  .opt.wrong .txt{ text-decoration:line-through; text-decoration-thickness:3px; text-decoration-color:var(--berry); }
  .opt.shake{ animation:shake .45s ease; }
  .opt .emo{ font-size:34px; flex:none; }

  /* ---------- story mode: book page ---------- */
  .story-card{
    background:#FFFCF3; border-radius:22px; padding:22px 26px 24px; max-width:620px; width:100%;
    margin:0 auto 16px; box-shadow:var(--shadow); text-align:left;
    font-family: ui-serif, Georgia, "Times New Roman", serif;
  }
  .s-title{ text-align:center; font-size:22px; font-weight:800; margin:0 0 14px; color:var(--ink); letter-spacing:.2px; }
  .s-unit{ display:block; cursor:pointer; }
  .s-unit + .s-unit{ margin-top:10px; }
  .s-text, .s-dlg{ display:block; font-size:20px; line-height:1.75; }
  .s-dlg{ padding-left:22px; font-weight:600; }
  .s-who{ font-weight:800; }
  .hl{
    border-radius:8px; padding:1px 5px; margin:-1px -5px;
    -webkit-box-decoration-break:clone; box-decoration-break:clone;
    transition:background .3s ease;
  }
  .s-unit.now .hl{ background:#FFEDA8; }
  .s-unit.now{ color:var(--ink); }
  .s-unit.past{ color:#6F80A3; }
  .s-unit.future{ color:#BCC8DC; }
  .s-unit.past .s-who, .s-unit.future .s-who{ color:inherit !important; }
  .replay-row{ display:flex; justify-content:center; margin:0 0 12px; }

  /* ---------- feedback & next ---------- */
  .feedback{ text-align:center; font-size:24px; font-weight:900; min-height:34px; margin:4px 0 10px; }
  .feedback.good{ color:var(--leaf-d); }
  .feedback.oops{ color:var(--berry); }
  .nextrow{ display:flex; justify-content:center; margin-top:4px; }

  /* ---------- done ---------- */
  #done{ justify-content:center; text-align:center; }
  .big-emoji{ font-size:96px; animation:floaty 3s ease-in-out infinite; }
  @keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
  #done h2{ font-size:40px; margin:10px 0 6px; font-weight:900; }
  .star-count{ font-size:26px; font-weight:900; color:var(--sun-d); margin-bottom:8px; }
  #done p{ color:var(--ink2); font-size:19px; font-weight:700; margin:0 0 28px; }
  .done-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

  /* ---------- confetti ---------- */
  .spark{ position:fixed; font-size:26px; pointer-events:none; z-index:99; animation:fly 1.1s ease-out forwards; }
  @keyframes fly{
    0%{ transform:translate(0,0) scale(.6) rotate(0deg); opacity:1; }
    100%{ transform:translate(var(--dx), var(--dy)) scale(1.25) rotate(var(--rot)); opacity:0; }
  }

  /* ---------- modals (profile / gate / parent) ---------- */
  .modal-back{ position:fixed; inset:0; background:rgba(39,57,91,.45); display:none; align-items:center; justify-content:center; padding:20px; z-index:50; }
  .modal-back.on{ display:flex; }
  .modal{ background:#fff; border-radius:26px; max-width:540px; width:100%; padding:24px 24px 20px; box-shadow:var(--shadow); max-height:88vh; overflow:auto; }
  .modal h3{ margin:0 0 14px; font-size:24px; font-weight:900; }
  .modal p{ font-size:16.5px; line-height:1.55; color:var(--ink); margin:0 0 11px; font-weight:600; }
  .modal p.mut{ color:var(--ink2); }
  .modal p b{ color:var(--violet-d); }
  .modal .btn{ width:100%; margin-top:8px; }
  .modal .btn.small{ width:auto; }

  .field{ margin:0 0 16px; }
  .field > label{ display:block; font-weight:800; font-size:16px; margin:0 0 8px; }
  .txtinput{
    width:100%; font-family:inherit; font-size:20px; font-weight:800; color:var(--ink);
    border:2.5px solid var(--line); border-radius:16px; padding:12px 14px; background:#fff;
  }
  .txtinput:focus{ outline:none; border-color:var(--violet); }
  .avgrid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; }
  .avpick{ font-size:28px; padding:8px 0; border:2.5px solid transparent; border-radius:14px; background:#F3F7FF; cursor:pointer; }
  .avpick.sel{ border-color:var(--violet); background:#EFECFF; }

  /* parent settings rows */
  .prow{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
  .prow:first-child{ border-top:none; }
  .prow .plabel{ flex:1; font-weight:800; font-size:16.5px; }
  .prow .pdesc{ font-weight:600; font-size:13.5px; color:var(--ink2); margin-top:2px; }
  .switch{ width:58px; height:34px; border-radius:999px; background:#D5E1F2; border:none; position:relative; cursor:pointer; flex:none; transition:background .15s ease; }
  .switch .knob{ position:absolute; top:3px; left:3px; width:28px; height:28px; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.15); transition:left .15s ease; }
  .switch.on{ background:var(--leaf); }
  .switch.on .knob{ left:27px; }
  .seg{ display:flex; gap:6px; flex:none; }
  .segbtn{ font-family:inherit; font-weight:800; font-size:14px; padding:8px 12px; border-radius:12px; border:2px solid var(--line); background:#fff; color:var(--ink2); cursor:pointer; }
  .segbtn.on{ border-color:var(--violet); background:#EFECFF; color:var(--violet-d); }
  .chipset{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
  .chiptog{ font-family:inherit; font-weight:800; font-size:14px; padding:8px 12px; border-radius:999px; border:2px solid var(--line); background:#fff; color:var(--ink2); cursor:pointer; }
  .chiptog.on{ border-color:var(--leaf); background:#DCF7EA; color:var(--leaf-d); }
  .psection-title{ font-weight:900; font-size:15px; color:var(--ink2); text-transform:uppercase; letter-spacing:.5px; margin:18px 0 4px; }

  .gate-eq{ text-align:center; font-size:34px; font-weight:900; margin:6px 0 14px; letter-spacing:1px; }
  .gate-msg{ text-align:center; min-height:22px; font-weight:800; color:var(--berry); margin-bottom:8px; }

  .stat-summary{ display:flex; gap:10px; margin:4px 0 12px; }
  .stat-box{ flex:1; background:#F3F7FF; border-radius:16px; padding:12px; text-align:center; }
  .stat-box b{ display:block; font-size:26px; color:var(--violet-d); }
  .stat-box span{ font-size:13px; font-weight:700; color:var(--ink2); }
  .miss-list{ list-style:none; padding:0; margin:0; }
  .miss-list li{ display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
  .miss-list li .mtxt{ flex:1; font-weight:700; font-size:15px; }
  .miss-list li .mcnt{ font-weight:900; color:var(--berry); font-size:15px; flex:none; }
  .miss-empty{ color:var(--ink2); font-weight:700; font-size:15px; padding:8px 0; }

  @media (max-width:430px){
    .hello h1{ font-size:28px; }
    .chip{ font-size:21px; padding:12px 16px; }
    .scene{ width:110px; height:110px; font-size:46px; }
    .opt{ font-size:19px; }
    .tile .tile-name{ font-size:18px; }
    .avgrid{ grid-template-columns:repeat(5, 1fr); }
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }