:root{
    --sky-top:#6EC3E8;
    --sky-bottom:#DFF6FF;
    --grass:#7BC96F;
    --grass-dark:#5FAE55;
    --coral:#FF7A5C;
    --coral-dark:#E15A3E;
    --ink:#1F3550;
    --ink-soft:#4C6280;
    --card:#FFFFFF;
    --card-line:#E4EEF5;
    --paper:#F3FAFF;

    --c-takeoff:#4EC9B0; --c-takeoff-d:#2FA48A;
    --c-forward:#FFC94A; --c-forward-d:#E0A928;
    --c-turnleft:#4FB6E8; --c-turnleft-d:#2E93C4;
    --c-turnright:#A78BFA; --c-turnright-d:#8467E0;
    --c-wait:#6FCF97; --c-wait-d:#45B173;
    --c-land:#FF6FA5; --c-land-d:#E0508A;
    --c-safefwd:#5B8DEF; --c-safefwd-d:#3A6BC7;
    --c-ifblocked:#FF9F43; --c-ifblocked-d:#E07B1F;
    --c-repeat:#9B59B6; --c-repeat-d:#7D3C98;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Nunito',sans-serif;
    color:var(--ink);
    background:
      radial-gradient(1200px 500px at 85% -10%, #ffffffaa, transparent),
      linear-gradient(180deg, var(--sky-top), var(--sky-bottom) 60%, #EFFBFF 100%);
    min-height:100vh;
    padding:12px 12px 24px;
  }
  .wrap{max-width:1280px;margin:0 auto;}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  /* ---------- Header ---------- */
  header.top{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; flex-wrap:wrap; margin-bottom:18px;
  }
  .brand{display:flex; align-items:center; gap:10px;}
  .brand svg{width:46px;height:46px; flex-shrink:0;}
  .brand-text{line-height:1.05;}
  .brand-text .word{
    font-family:'Baloo 2',sans-serif; font-weight:800; font-size:28px;
    letter-spacing:-0.5px;
  }
  .brand-text .word .mino{color:var(--ink);}
  .brand-text .word .drone{color:var(--coral);}
  .brand-text .tag{font-size:13px; color:var(--ink-soft); font-weight:700;}

  .stage-pill{
    background:#fff; border:2px solid var(--card-line); border-radius:999px;
    padding:6px 14px; font-size:12.5px; font-weight:800; color:var(--ink);
    display:flex; align-items:center; gap:6px; font-family:'Baloo 2',sans-serif;
    margin-left:4px;
  }

  .hero-line{
    font-family:'Baloo 2',sans-serif; font-weight:700; font-size:20px;
    margin:2px 0 18px; color:var(--ink);
  }
  .hero-line span{color:var(--coral);}

  /* ---------- Mode toggle ---------- */
  .mode-row{display:flex; align-items:center; justify-content:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:18px;}
  .mode-toggle{
    display:inline-flex; background:#fff; border-radius:16px; padding:5px;
    border:2px solid var(--card-line); gap:4px;
  }
  .mode-toggle button{
    font-family:'Baloo 2',sans-serif; font-weight:700; font-size:14.5px;
    border:none; background:transparent; color:var(--ink-soft);
    padding:9px 16px; border-radius:12px; cursor:pointer;
    display:flex; align-items:center; gap:7px; transition:.15s;
  }
  .mode-toggle button.active{background:var(--ink); color:#fff;}
  .stars-pill{
    font-family:'Baloo 2',sans-serif; font-weight:700; color:var(--ink);
    background:#fff; border:2px solid var(--card-line); border-radius:999px;
    padding:8px 16px; font-size:14.5px; display:flex; gap:7px; align-items:center;
  }

  /* ---------- Layout grid ---------- */
  .grid{
    display:grid; grid-template-columns: 220px 1fr; gap:18px;
    align-items:start;
  }
  .card{
    background:var(--card); border-radius:24px; padding:20px;
    border:2px solid var(--card-line);
    box-shadow:0 10px 26px -18px rgba(20,40,70,.35);
  }
  .card h2{
    font-family:'Baloo 2',sans-serif; font-size:18px; margin:0 0 4px;
    display:flex; align-items:center; gap:8px;
  }
  .step-num{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:9px; background:var(--ink);
    color:#fff; font-size:14px; font-weight:800; flex-shrink:0;
  }
  .card .sub{font-size:13.5px; color:var(--ink-soft); margin:0 0 14px; font-weight:700;}

  /* ---------- Palette ---------- */
  #palette{display:flex; flex-direction:column; gap:7px;}
  .block-btn{
    --c: var(--ink); --cd: var(--ink);
    background:var(--c); color:#fff; border:none; border-radius:12px;
    padding:9px 12px; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:14px;
    display:flex; align-items:center; gap:8px; width:100%; text-align:left;
    cursor:pointer; box-shadow:0 3px 0 var(--cd), 0 5px 10px -6px rgba(0,0,0,.28);
    transition:transform .08s, box-shadow .08s;
  }
  .block-btn .ic{font-size:17px;}
  .block-btn:active{transform:translateY(2px); box-shadow:0 1px 0 var(--cd), 0 2px 5px -3px rgba(0,0,0,.25);}
  .block-btn:focus-visible{outline:3px solid #1F3550; outline-offset:2px;}
  .block-btn[data-type="takeoff"]{--c:var(--c-takeoff); --cd:var(--c-takeoff-d);}
  .block-btn[data-type="forward"]{--c:var(--c-forward); --cd:var(--c-forward-d); color:var(--ink);}
  .block-btn[data-type="turnLeft"]{--c:var(--c-turnleft); --cd:var(--c-turnleft-d);}
  .block-btn[data-type="turnRight"]{--c:var(--c-turnright); --cd:var(--c-turnright-d);}
  .block-btn[data-type="wait"]{--c:var(--c-wait); --cd:var(--c-wait-d);}
  .block-btn[data-type="land"]{--c:var(--c-land); --cd:var(--c-land-d);}
  .block-btn[data-type="repeat"]{--c:var(--c-repeat); --cd:var(--c-repeat-d);}
  .block-btn[data-type="forwardUntil"]{--c:var(--c-safefwd); --cd:var(--c-safefwd-d);}

  /* ---------- Stack (flight plan) ---------- */
  .row2{display:grid; grid-template-columns:1fr 1.35fr; gap:20px;}
  .stack-tools{display:flex; gap:8px; margin-bottom:12px;}
  .tool-btn{
    font-family:'Baloo 2',sans-serif; font-weight:700; font-size:14px;
    background:var(--paper); border:2px solid var(--card-line); color:var(--ink);
    border-radius:14px; padding:9px 14px; cursor:pointer; display:flex; gap:6px; align-items:center;
  }
  .tool-btn:hover{background:#E9F5FC;}
  .tool-btn:disabled{opacity:.45; cursor:not-allowed;}

  #stackzone{
    min-height:200px; background:var(--paper); border:2px dashed #BFDDEE;
    border-radius:16px; padding:14px 12px 18px; display:flex; flex-direction:column; gap:0;
  }
  #stackzone.empty{align-items:center; justify-content:center; text-align:center; padding:28px 14px; gap:0;}
  .empty-hint{font-weight:700; color:var(--ink-soft); font-size:14px; line-height:1.5;}
  .empty-hint .big{font-size:28px; display:block; margin-bottom:6px;}

  /* Scratch-style interlocking blocks */
  .stack-item{
    --bc: var(--ink);
    position:relative;
    background:var(--bc);
    color:#fff;
    padding:10px 10px 12px;
    display:flex; align-items:center; gap:8px;
    margin-top:-6px;
    z-index:1;
    animation:pop .18s ease-out;
    filter:drop-shadow(0 2px 0 rgba(0,0,0,.18));
    clip-path: polygon(
      0 0,
      14px 0, 14px 7px, 34px 7px, 34px 0,
      100% 0,
      100% calc(100% - 7px),
      34px calc(100% - 7px), 34px 100%, 14px 100%, 14px calc(100% - 7px),
      0 calc(100% - 7px)
    );
  }
  .stack-list > .stack-item:first-child,
  .stack-list > .stack-cblock:first-child{margin-top:0;}
  @keyframes pop{from{transform:scale(.9); opacity:0;} to{transform:scale(1); opacity:1;}}
  .stack-item[data-type="takeoff"]{--bc:var(--c-takeoff);}
  .stack-item[data-type="forward"]{--bc:var(--c-forward); color:var(--ink);}
  .stack-item[data-type="turnLeft"]{--bc:var(--c-turnleft);}
  .stack-item[data-type="turnRight"]{--bc:var(--c-turnright);}
  .stack-item[data-type="wait"]{--bc:var(--c-wait);}
  .stack-item[data-type="land"]{--bc:var(--c-land);}
  .stack-item[data-type="repeat"]{--bc:var(--c-repeat);}
  .stack-item[data-type="forwardUntil"]{--bc:var(--c-safefwd);}
  .stack-item.playing{
    filter:drop-shadow(0 0 0 #FFC94A) drop-shadow(0 0 6px #FFC94A) drop-shadow(0 2px 0 rgba(0,0,0,.15));
    z-index:2;
  }
  .stack-item .ic{font-size:17px;}
  .stack-item .lbl{font-weight:800; font-size:13.5px; flex:1;}
  .amount{display:flex; align-items:center; gap:4px; background:rgba(255,255,255,.28); border-radius:9px; padding:2px;}
  .stack-item[data-type="forward"] .amount{background:rgba(0,0,0,.08);}
  .amount button{
    width:22px; height:22px; border-radius:7px; border:none; background:#fff; cursor:pointer;
    font-weight:800; font-size:13px; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.12);
  }
  .amount .val{font-weight:800; font-size:12.5px; min-width:44px; text-align:center;}
  .mini{width:24px; height:24px; border-radius:7px; border:none; background:rgba(255,255,255,.25); cursor:pointer; font-weight:800; font-size:12px; color:inherit; flex-shrink:0;}
  .mini:hover{background:rgba(255,255,255,.45);}
  .mini.del{background:rgba(0,0,0,.12); color:#fff;}
  .stack-item[data-type="forward"] .mini{color:var(--ink-soft); background:rgba(0,0,0,.06);}
  .stack-item[data-type="forward"] .mini.del{color:#C9435A; background:rgba(201,67,90,.12);}

  /* C-shaped repeat container (Scratch mouth) */
  .stack-cblock{
    margin-top:-6px;
    position:relative;
    z-index:1;
    filter:drop-shadow(0 2px 0 rgba(0,0,0,.15));
  }
  .stack-cblock > .stack-item{
    margin-top:0;
    filter:none;
    clip-path: polygon(
      0 0,
      14px 0, 14px 7px, 34px 7px, 34px 0,
      100% 0,
      100% 100%,
      0 100%
    );
    border-radius:0;
    padding-bottom:8px;
  }
  .stack-cblock .c-body{
    display:flex;
    background:var(--c-repeat);
    margin-top:-1px;
  }
  .stack-cblock .c-rail{
    width:14px;
    flex-shrink:0;
    background:var(--c-repeat);
    border-radius:0 0 0 8px;
  }
  .stack-cblock .c-mouth{
    flex:1;
    background:var(--paper);
    border-radius:0 8px 8px 0;
    margin:0 6px 0 0;
    padding:6px 6px 4px;
    min-height:36px;
  }
  .stack-cblock .c-mouth .stack-list{display:flex; flex-direction:column;}
  .stack-cblock .c-mouth .stack-item{margin-top:-5px;}
  .stack-cblock .c-mouth .stack-item:first-child{margin-top:0;}
  .stack-cblock .c-foot{
    background:var(--c-repeat);
    height:14px;
    margin-top:-1px;
    clip-path: polygon(
      0 0, 100% 0,
      100% calc(100% - 7px),
      34px calc(100% - 7px), 34px 100%, 14px 100%, 14px calc(100% - 7px),
      0 calc(100% - 7px)
    );
  }
  .stack-cblock.insert-target .c-mouth{
    outline:2px dashed #FFC94A;
    outline-offset:-2px;
    background:#FFF8E6;
  }
  .stack-cblock .c-hint{
    font-size:11.5px; font-weight:700; color:var(--ink-soft);
    text-align:center; padding:6px 4px; opacity:.85;
  }
  .insert-banner{
    font-size:12px; font-weight:800; color:var(--ink);
    background:#FFF3C4; border:2px solid #FFC94A; border-radius:10px;
    padding:6px 10px; margin-bottom:8px; display:flex; align-items:center; gap:6px;
  }
  .insert-banner button{
    margin-left:auto; border:none; background:#fff; border-radius:8px;
    font-weight:800; font-size:11px; padding:4px 8px; cursor:pointer; color:var(--ink);
  }

  /* ---------- Stage selector ---------- */
  .stage-row{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap;}
  .stage-chip{
    font-family:'Baloo 2',sans-serif; font-weight:800; font-size:15px;
    border:2px solid var(--card-line); background:#fff; color:var(--ink-soft);
    border-radius:12px; min-width:36px; height:36px; padding:0 8px; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; gap:3px;
  }
  .stage-chip.active{border-color:var(--ink); color:var(--ink); background:var(--paper);}
  .stage-chip.done{color:#C98A1D;}
  .stage-chip:disabled{opacity:.4; cursor:not-allowed;}
  .stage-goal{
    font-size:14px; font-weight:700; color:var(--ink-soft); margin:-4px 0 14px;
    background:var(--paper); border-radius:14px; padding:10px 14px; border:2px solid var(--card-line);
  }

  /* ---------- Flight scene (top-down) ---------- */
  .scene-wrap{position:relative; border-radius:20px; overflow:hidden; border:2px solid var(--card-line);}
  .scene{
    width:100%; aspect-ratio:5/4; min-height:260px; position:relative;
    background:#8FCB7C;
    overflow:hidden;
  }
  .tile{position:absolute; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);}
  .tile.dark{background:rgba(60,110,55,.16);}
  .cloudshadow{position:absolute; border-radius:50%; background:rgba(255,255,255,.35); filter:blur(2px); pointer-events:none;}
  .cs1{width:16%; aspect-ratio:1; top:8%; left:6%; animation:driftx 30s linear infinite;}
  .cs2{width:11%; aspect-ratio:1; top:55%; left:70%; animation:driftx 22s linear infinite reverse;}
  @keyframes driftx{from{transform:translateX(0);} to{transform:translateX(30px);}}

  .cell-mark{position:absolute; display:flex; align-items:center; justify-content:center; transform:translate(-50%,-50%);}
  .runway-mark{font-size:60%; opacity:.75;}
  .runway-mark svg{width:60%; height:60%;}
  .goal-mark{animation:pulse 1.4s ease-in-out infinite;}
  .goal-mark svg{width:74%; height:74%;}
  @keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1);} 50%{transform:translate(-50%,-50%) scale(1.12);}}
  .tree-mark svg{width:78%; height:78%;}
  .bird-mark{animation:birdhop 0.8s ease-in-out infinite;}
  .bird-mark svg{width:70%; height:70%;}
  .bird-mark.leaving{animation:birdleave 0.6s ease-in forwards;}
  @keyframes birdhop{0%,100%{transform:translate(-50%,-50%) translateY(0);} 50%{transform:translate(-50%,-50%) translateY(-6px);}}
  @keyframes birdleave{to{transform:translate(-50%,-50%) translateX(40px) scale(0.4); opacity:0;}}

  .drone-shadow{
    position:absolute; border-radius:50%; background:rgba(10,25,45,.22);
    transform:translate(-50%,-50%); filter:blur(2px);
    transition:left .5s ease, top .5s ease;
  }
  .drone{
    position:absolute; transition: left .5s cubic-bezier(.34,1,.64,1), top .5s cubic-bezier(.34,1,.64,1), transform .45s ease;
    filter:drop-shadow(0 3px 4px rgba(20,40,70,.3));
  }
  .drone svg{width:100%; display:block;}
  .drone .rotor{transform-origin:center; animation:spin 0.3s linear infinite; animation-play-state:paused;}
  .drone.flying .rotor{animation-play-state:running;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .bump{animation:bump .3s ease;}
  @keyframes bump{0%,100%{filter:drop-shadow(0 3px 4px rgba(20,40,70,.3));} 40%{filter:drop-shadow(0 3px 4px rgba(220,60,60,.55));}}

  .hud{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
    padding:10px 2px 0;
  }
  .hud-stats{display:flex; gap:8px; flex-wrap:wrap;}
  .stat{
    background:var(--paper); border:2px solid var(--card-line); border-radius:12px;
    padding:6px 10px; min-width:90px;
  }
  .stat .k{font-size:10px; font-weight:800; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em;}
  .stat .v{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:15px;}
  .batbar{height:5px; border-radius:4px; background:#E1EEF5; margin-top:4px; overflow:hidden;}
  .batbar i{display:block; height:100%; border-radius:4px; background:#4CB27C; transition:width .4s, background .4s;}

  .status-line{
    font-weight:800; font-size:13.5px; color:var(--ink-soft);
    min-height:18px; flex:1; text-align:right;
  }

  .fly-controls{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
  .btn-primary, .btn-danger, .btn-sound, .btn-next, .btn-retry{
    font-family:'Baloo 2',sans-serif; font-weight:800; font-size:15px;
    border:none; border-radius:14px; padding:10px 16px; cursor:pointer;
    display:flex; align-items:center; gap:6px;
  }
  .btn-primary{background:var(--coral); color:#fff; box-shadow:0 4px 0 var(--coral-dark);}
  .btn-primary:active{transform:translateY(3px); box-shadow:0 1px 0 var(--coral-dark);}
  .btn-primary:disabled{opacity:.5; cursor:not-allowed; box-shadow:none; transform:none;}
  .btn-danger{background:#fff; color:#C9435A; border:2px solid #F3C3CC;}
  .btn-danger:disabled{opacity:.4; cursor:not-allowed;}
  .btn-retry{background:#fff; color:var(--ink); border:2px solid var(--card-line);}
  .btn-retry:disabled{opacity:.4; cursor:not-allowed;}
  .btn-sound{background:#fff; border:2px solid var(--card-line); color:var(--ink); width:42px; justify-content:center; padding:10px; font-size:16px; margin-left:auto;}
  .btn-next{background:#3FA66B; color:#fff; box-shadow:0 4px 0 #2C7E4F; display:none;}
  .btn-next:active{transform:translateY(3px); box-shadow:0 1px 0 #2C7E4F;}

  /* ---------- Real-drone purchase notice ---------- */
  .real-panel{
    background:var(--paper); border:2px dashed #BFDDEE; border-radius:16px;
    padding:10px 14px; display:flex; align-items:center; gap:12px;
    text-decoration:none; color:inherit; margin-top:14px;
  }
  .real-panel:hover{background:#E9F5FC;}
  .real-panel .big{font-size:24px; flex-shrink:0;}
  .real-panel .txt{display:flex; flex-direction:column; gap:1px; flex:1; min-width:0;}
  .real-panel .txt strong{font-family:'Baloo 2',sans-serif; font-size:13.5px; color:var(--ink);}
  .real-panel .txt span{font-size:12px; font-weight:700; color:var(--ink-soft);}
  .real-panel .buy-btn{
    font-family:'Baloo 2',sans-serif; font-weight:800; font-size:13px; color:#fff;
    background:var(--coral); border-radius:12px; padding:8px 14px; flex-shrink:0;
    box-shadow:0 3px 0 var(--coral-dark);
  }
  @media (max-width:480px){
    .real-panel .txt span{display:none;}
  }



  .star-pop{
    position:absolute; font-size:22px; pointer-events:none; animation:starpop 1s ease-out forwards;
  }
  @keyframes starpop{
    0%{transform:translateY(0) scale(.6); opacity:0;}
    20%{opacity:1; transform:translateY(-8px) scale(1);}
    100%{transform:translateY(-60px) scale(1.2); opacity:0;}
  }

  /* Stage clear celebration */
  .celeb-overlay{
    position:absolute; inset:0; z-index:20;
    display:flex; align-items:center; justify-content:center;
    background:rgba(15,30,50,.45);
    border-radius:18px;
    animation:celebIn .25s ease-out;
  }
  @keyframes celebIn{from{opacity:0;} to{opacity:1;}}
  .celeb-card{
    background:#fff; border-radius:20px; padding:22px 26px; text-align:center;
    box-shadow:0 16px 40px rgba(20,40,70,.35);
    max-width:90%; animation:celebPop .35s cubic-bezier(.34,1.4,.64,1);
  }
  @keyframes celebPop{from{transform:scale(.7); opacity:0;} to{transform:scale(1); opacity:1;}}
  .celeb-card .emoji{font-size:42px; display:block; margin-bottom:6px;}
  .celeb-card .title{
    font-family:'Baloo 2',sans-serif; font-weight:800; font-size:22px;
    color:var(--ink); margin:0 0 4px;
  }
  .celeb-card .msg{
    font-weight:700; font-size:14.5px; color:var(--ink-soft); margin:0 0 14px; line-height:1.4;
  }
  .celeb-card .celeb-btn{
    font-family:'Baloo 2',sans-serif; font-weight:800; font-size:15px;
    background:var(--coral); color:#fff; border:none; border-radius:14px;
    padding:10px 20px; cursor:pointer; box-shadow:0 4px 0 var(--coral-dark);
  }
  .celeb-card .celeb-btn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--coral-dark);}

  @media (max-width: 960px){
    .grid{grid-template-columns:1fr;}
    .row2{grid-template-columns:1fr;}
    #palette{flex-direction:row; flex-wrap:wrap; gap:8px;}
    #palette .block-btn{width:auto; flex:1 1 46%; min-height:42px; font-size:13.5px; padding:9px 10px;}
    .scene{min-height:280px; aspect-ratio:6/5;}
  }
  @media (max-width: 520px){
    .brand-text .word{font-size:22px;}
    #palette .block-btn{flex:1 1 100%;}
    .btn-primary, .btn-danger, .btn-next{font-size:15px; padding:12px 16px;}
  }