:root{
    --bg:#0F1320; --panel:#191E30; --card:#232941; --edge:#333B57;
    --ink:#EAEEF8; --dim:#8891B0;
    --teal:#3FC7A8; --violet:#8E7BF5; --azure:#5B9BE8; --lamp:#F7C64E; --bad:#E9695B;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink)}
  body{font-family:"Rubik",system-ui,sans-serif;
    user-select:none;-webkit-user-select:none;overscroll-behavior:none;touch-action:manipulation}

  /* ══ СТАРТОВЫЙ ЭКРАН ══ */
  #intro{
    position:fixed;inset:0;z-index:20;
    background:radial-gradient(120% 80% at 50% 10%,#1B2237,#0F1320 62%);
    display:flex;flex-direction:column;align-items:center;justify-content:space-between;
    padding:calc(env(safe-area-inset-top) + 22px) 22px calc(env(safe-area-inset-bottom) + 24px);
    max-width:520px;margin:0 auto;
  }
  #intro h1{
    margin:0;font-weight:700;letter-spacing:-.015em;line-height:.9;text-align:center;
    font-size:clamp(44px,15vw,84px);
  }
  #intro h1 span{display:block;font-family:"Fira Code",monospace;font-weight:400;
    font-size:10.5px;letter-spacing:.3em;color:var(--dim);margin-top:12px}

  .helper{display:flex;flex-direction:column;align-items:center;flex:1;justify-content:center;gap:2px;min-height:0}
  .bubble{
    max-width:286px;background:var(--panel);border:1px solid var(--edge);
    border-radius:14px;padding:12px 15px;font-size:14px;line-height:1.5;text-align:center;
    position:relative;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;
  }
  .bubble.on{opacity:1;transform:translateY(0)}
  .bubble b{font-weight:500;color:var(--lamp)}
  .bubble::after{
    content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:var(--panel);
    border-right:1px solid var(--edge);border-bottom:1px solid var(--edge);
    transform:translateX(-50%) rotate(45deg);
  }
  #botsvg{margin-top:8px;animation:bob 3.4s ease-in-out infinite;cursor:pointer;flex:none}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  .pips{display:flex;gap:5px;margin-top:12px}
  .pips i{width:6px;height:6px;border-radius:50%;background:#39405F}
  .pips i.on{background:var(--lamp)}

  #introBtn{
    width:100%;max-width:330px;font-family:"Rubik";font-weight:700;font-size:16px;
    padding:16px;border:0;border-radius:12px;background:var(--panel);
    border:1px solid var(--edge);color:var(--ink);cursor:pointer;
  }
  #introBtn.ready{background:var(--lamp);border-color:var(--lamp);color:#2C2205}
  #introBtn:active{transform:translateY(1px)}
  #introBtn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
  .foot{width:100%;max-width:330px;display:flex;flex-direction:column;align-items:center;gap:9px}
  .codeRow{display:flex;gap:7px;width:100%}
  .codeRow input{
    flex:1;min-width:0;background:var(--panel);border:1px solid var(--edge);border-radius:10px;
    color:var(--ink);font-family:"Fira Code",monospace;font-size:15px;letter-spacing:.22em;
    text-align:center;padding:11px 8px;
  }
  .codeRow input::placeholder{letter-spacing:.08em;color:var(--dim)}
  .codeRow input.bad{border-color:var(--bad);animation:nudge .3s}
  @keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
  .codeRow button{
    flex:none;background:var(--panel);border:1px solid var(--edge);border-radius:10px;
    color:var(--ink);font-family:"Rubik";font-size:13px;padding:11px 14px;cursor:pointer;
  }
  .mini{background:none;border:0;color:var(--dim);font-family:"Rubik";font-size:12px;
    cursor:pointer;padding:2px 6px;text-decoration:underline}
  .note{font-family:"Fira Code",monospace;font-size:10.5px;color:var(--dim);
    text-align:center;line-height:1.5;margin:0}
  .note b{color:var(--teal);font-weight:400}
  .levels button.lock{opacity:.4;pointer-events:none}
  #winCode{margin:8px 0 0;display:none;flex-direction:column;align-items:center;gap:5px}
  #winCode.on{display:flex}
  #winCode .cap{font-family:"Fira Code",monospace;font-size:10.5px;letter-spacing:.16em;
    color:var(--dim);text-transform:uppercase}
  #winCode .num{
    font-family:"Fira Code",monospace;font-weight:700;
    font-size:clamp(40px,13vw,58px);line-height:1;letter-spacing:.14em;
    color:var(--lamp);background:rgba(247,198,78,.1);
    border:1px solid rgba(247,198,78,.45);border-radius:12px;
    padding:10px 18px 10px 24px;
  }
  #winCode .hint{font-size:11.5px;color:var(--dim)}

  /* ══ ИГРА ══ */
  #game{
    height:100dvh;max-width:520px;margin:0 auto;display:none;
    padding:calc(env(safe-area-inset-top) + 6px) 10px calc(env(safe-area-inset-bottom) + 8px);
    flex-direction:column;gap:7px;
  }
  .bar{flex:none;display:flex;align-items:center;gap:8px;height:34px}
  .brand{flex:none;line-height:1;white-space:nowrap}
  .brand b{display:block;font-size:12.5px;font-weight:700;letter-spacing:.07em}
  .brand span{display:block;font-family:"Fira Code",monospace;font-size:8px;
    letter-spacing:.15em;color:var(--dim);margin-top:3px}
  .lvltag{position:absolute;left:11px;top:9px;z-index:2;
    font-family:"Fira Code",monospace;font-size:10.5px;color:var(--dim);letter-spacing:.05em}
  .lvltag b{color:var(--lamp);font-weight:500}
  .lamps{flex:1;display:flex;gap:4px;justify-content:center;align-items:center;min-width:0;overflow:hidden}
  .lamps i{width:8px;height:8px;border-radius:50%;background:#39405F;flex:none}
  .lamps i.on{background:var(--lamp);box-shadow:0 0 7px rgba(247,198,78,.65)}
  .bar button{flex:none;width:32px;height:32px;border-radius:9px;background:var(--panel);
    border:1px solid var(--edge);color:var(--dim);font-size:14px;cursor:pointer;
    display:flex;align-items:center;justify-content:center}

  .stage{flex:1 1 auto;min-height:0;position:relative;
    background:radial-gradient(120% 90% at 50% 20%,#1A2035,#101423 70%);
    border:1px solid var(--edge);border-radius:13px;overflow:hidden}
  .stage canvas{position:absolute;inset:0;width:100%;height:100%}
  .win{position:absolute;inset:0;background:rgba(15,19,32,.94);display:none;
    flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:18px}
  .win.on{display:flex}
  .win h2{margin:0;font-size:20px;color:var(--lamp)}
  .win p{margin:0;font-size:13px;color:var(--dim);max-width:30ch;line-height:1.45}
  .win button{margin-top:4px;font-family:"Rubik";font-weight:700;font-size:14px;padding:11px 22px;
    border:0;border-radius:10px;background:var(--lamp);color:#2C2205;cursor:pointer}

  .line{flex:none;min-height:32px;display:flex;align-items:center;font-size:12.5px;line-height:1.35;color:var(--dim)}
  .line b{color:var(--ink);font-weight:500}
  .line.bad,.line.bad b{color:var(--bad)}

  .tape{flex:none;display:flex;align-items:center;gap:7px;
    background:var(--card);border:1px solid var(--edge);border-radius:10px;padding:6px 8px}
  .tape .tag{flex:none;width:34px;font-family:"Fira Code",monospace;font-size:9.5px;
    color:var(--dim);line-height:1.15;text-align:center}
  .tape .tag b{display:block;font-size:10.5px;font-weight:500}
  .tape .row{flex:1;display:flex;gap:5px;overflow-x:auto;padding:1px}
  .tape.sel{border-color:var(--teal)}
  .tape.sel .tag b{color:var(--teal)}
  .tape.p.sel{border-color:var(--violet)}
  .tape.p.sel .tag b{color:var(--violet)}
  .tape.q.sel{border-color:var(--azure)}
  .tape.q.sel .tag b{color:var(--azure)}
  .slot{touch-action:none}
  .slot.cond{color:var(--lamp);font-size:13px;letter-spacing:-.05em;position:relative}
  /* условие охраняет следующую команду: скоба между слотами */
  .slot.cond::after{
    content:"";position:absolute;right:-6px;top:50%;width:6px;height:2px;
    background:var(--lamp);
  }
  .slot.guarded{
    border-color:rgba(247,198,78,.75);
    box-shadow:inset 0 0 0 1px rgba(247,198,78,.2);
  }
  .slot.guarded::before{
    content:"";position:absolute;left:-1px;top:50%;transform:translateY(-50%);
    border-left:5px solid var(--lamp);border-top:4px solid transparent;border-bottom:4px solid transparent;
  }
  .slot.guarded{position:relative}
  .slot.dragsrc{opacity:.3}
  .ghostslot{
    position:fixed;z-index:40;transform:translate(-50%,-50%);pointer-events:none;
    width:40px;height:40px;border-radius:9px;background:#3A4470;
    border:1px solid var(--lamp);color:var(--ink);
    display:flex;align-items:center;justify-content:center;font-size:18px;
    box-shadow:0 6px 16px rgba(0,0,0,.5);
  }
  #winStars{font-size:26px;letter-spacing:.12em;color:var(--lamp);margin:0}
  #bSound.off{opacity:.34}
  .slot.skipped{border-color:var(--bad)!important;opacity:.45}
  .pal.dense button{font-size:7.5px;padding:5px 0 4px;gap:2px}
  .pal.dense button em{font-size:15px}
  #game.tight .pal.dense button{padding:4px 0 3px}
  .pal.dense button em{font-size:15px}
  .pal button.condb{border-color:rgba(247,198,78,.5);color:#F6DFA6}
  .pal button.condb em{font-size:14px;letter-spacing:-.05em}
  #bSpeed{font-family:"Fira Code",monospace;font-size:11px;color:var(--ink)}
  .slot.call2{color:var(--azure);font-family:"Fira Code",monospace;font-size:13px;font-weight:500}
  #game.tight .slot{width:33px;height:33px;font-size:16px}
  #game.tight .slot.call,#game.tight .slot.call2{font-size:11.5px}
  #game.tight .tape{padding:5px 7px}
  #game.tight .line{min-height:26px;font-size:12px}
  .slot{width:38px;height:38px;border-radius:8px;flex:none;display:flex;align-items:center;
    justify-content:center;font-size:18px;line-height:1;cursor:pointer;
    border:1px dashed #3C4463;background:rgba(255,255,255,.02)}
  .slot.full{border-style:solid;background:#2C3455;border-color:#434D74}
  .slot.call{color:var(--violet);font-family:"Fira Code",monospace;font-size:13px;font-weight:500}
  .slot.now{border-color:var(--lamp);box-shadow:0 0 0 2px rgba(247,198,78,.4)}

  .pal{flex:none;display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
  .pal button{background:var(--panel);border:1px solid var(--edge);border-radius:10px;color:var(--ink);
    padding:7px 1px 5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;
    font-family:"Rubik";font-size:8.5px;font-weight:500;line-height:1}
  .pal button em{font-style:normal;font-size:18px;line-height:1}
  .pal button:active{background:#2B3357}
  .pal button.call{border-color:rgba(142,123,245,.55);color:#CBC2FF}
  .pal button.call em{font-family:"Fira Code",monospace;font-size:13px;font-weight:500}
  .pal.wide{grid-template-columns:repeat(7,1fr)}
  .pal.wide button{font-size:8px;padding:7px 0 5px}
  .pal button.call2{border-color:rgba(91,155,232,.55);color:#BDD8FA}
  .pal button.call2 em{font-family:"Fira Code",monospace;font-size:13px;font-weight:500}
  .pal button.off{opacity:.28;pointer-events:none}

  .run{flex:none;display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:6px}
  .run button{font-family:"Rubik";font-weight:700;font-size:13px;padding:12px 2px;border:0;
    border-radius:10px;background:var(--teal);color:#0B2A22;cursor:pointer}
  .run button.sec{background:var(--panel);border:1px solid var(--edge);color:var(--ink);font-weight:500}
  button:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}

  .modal{position:fixed;inset:0;background:rgba(8,10,18,.82);display:none;
    align-items:flex-end;justify-content:center;z-index:30}
  .modal.on{display:flex}
  .sheet{width:100%;max-width:520px;max-height:88dvh;overflow-y:auto;background:var(--panel);
    border:1px solid var(--edge);border-radius:16px 16px 0 0;
    padding:16px 16px calc(env(safe-area-inset-bottom) + 18px)}
  .sheet h3{margin:0 0 10px;font-size:15px}
  .sheet .rules{font-size:13px;color:var(--dim);line-height:1.7;margin:0 0 18px}
  .sheet .rules b{color:var(--ink);font-weight:500}
  .sheet .rules i{font-style:normal;color:var(--lamp)}
  .levels{display:grid;gap:6px;margin-bottom:16px}
  .levels button{display:flex;align-items:center;gap:10px;text-align:left;background:var(--card);
    border:1px solid var(--edge);border-radius:9px;padding:9px 11px;color:var(--ink);
    font-family:"Rubik";font-size:13px;cursor:pointer}
  .levels button u{text-decoration:none;font-family:"Fira Code",monospace;font-size:11px;
    color:var(--dim);width:14px;flex:none}
  .levels button.ok{border-color:rgba(63,199,168,.5)}
  .levels button.ok u{color:var(--teal)}
  .levels button.cur{background:#2B3355}
  .sheet .close{width:100%;padding:13px;border:0;border-radius:10px;background:var(--card);
    color:var(--ink);font-family:"Rubik";font-weight:500;font-size:14px;cursor:pointer}

  @media (prefers-reduced-motion:reduce){#botsvg{animation:none}.bubble{transition:none}}