@font-face{font-family:'RubikMono';src:url(fonts/rubikmono.woff) format('woff');font-display:block}
@font-face{font-family:'Rubik';src:url(fonts/rubik.woff) format('woff');font-weight:300 900;font-display:block}
@font-face{font-family:'Lobster';src:url(fonts/lobster.woff) format('woff');font-display:block}
@font-face{font-family:'Neucha';src:url(fonts/neucha.woff) format('woff');font-display:block}
@font-face{font-family:'SwingulyaMusic';src:url(fonts/music.woff) format('woff');font-display:block}
@font-face{font-family:'SwingulyaText';src:url(fonts/musictext.woff) format('woff');font-display:block}

:root{
  --paper:#F2E8CF; --paper2:#E6D6B0; --ink:#1E1A16; --red:#D23A2E; --red-d:#9E2A21;
  --mus:#E8A927; --cream:#FFF8E7; --face:#F7DDB7; --green:#3F8A3A; --gray:#5E574F; --lamp:#CFC3A3;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--ink)}
body{font-family:Rubik,SwingulyaText,system-ui,sans-serif;color:var(--ink);-webkit-user-select:none;user-select:none;overscroll-behavior:none;touch-action:manipulation}
button{font:inherit;cursor:pointer;touch-action:manipulation}
svg{display:block}

#app{height:100vh;height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto;position:relative;
  background-color:var(--paper);
  background-image:radial-gradient(rgba(30,26,22,.075) 1px,transparent 1.3px);background-size:7px 7px}

/* ---------- шапка ---------- */
.top{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 8px) 14px 8px;background:var(--ink);border-bottom:3px solid var(--mus)}
.logo{display:flex;flex-direction:column}
.logo-word{font-family:Lobster,SwingulyaText;font-size:30px;line-height:1;color:var(--mus);text-shadow:2px 2px 0 var(--red)}
.logo-sub{font-family:RubikMono,SwingulyaText;font-size:9px;letter-spacing:.12em;color:var(--paper);margin-top:3px}
.icon-btn{width:42px;height:42px;border-radius:50%;border:2px solid var(--paper);background:transparent;color:var(--paper);display:grid;place-items:center;padding:0}
.icon-btn svg{width:24px;height:24px}

main{flex:1;overflow-y:auto;overflow-x:hidden;position:relative}
.screen{display:none;flex-direction:column;gap:12px;padding:12px 14px 20px}
.screen.active{display:flex;animation:screenIn .25s ease-out}
#tuner.active{min-height:100%;justify-content:center}
@media (min-height:800px){#lev{width:140px}.stage{min-height:160px}}
@keyframes screenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- сцена и реплики ---------- */
.stage{display:flex;align-items:flex-end;gap:4px;min-height:140px}
#lev{width:124px;height:auto;flex:none}
.bubble-wrap{flex:1;align-self:center;min-width:0}
.who{font-family:Lobster,SwingulyaText;font-size:17px;color:var(--red-d);margin:0 0 3px 14px}
.bubble{font-family:Neucha,SwingulyaText;font-size:20px;line-height:1.15;background:var(--cream);border:3px solid var(--ink);border-radius:18px;padding:10px 12px;position:relative;box-shadow:4px 4px 0 var(--ink);min-height:62px}
.bubble::after{content:'';position:absolute;left:-11px;bottom:16px;width:16px;height:16px;background:var(--cream);border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg) skew(8deg,8deg)}
.bubble-wrap.mute .bubble{visibility:hidden}
.bubble-wrap.mute .who{visibility:hidden}

.stage-band{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:0 6px;align-items:end}
.stage-band .band-bubble{grid-column:1/-1;grid-row:1;margin-bottom:6px}
.stage-band .char{height:128px;width:100%;grid-row:2}
.band-bubble .bubble{min-height:0}
.band-bubble .bubble::after{left:22%;bottom:-11px;transform:rotate(-45deg) skew(8deg,8deg)}
.band-bubble.right .bubble::after{left:auto;right:22%}
.band-bubble.right .who{text-align:right;margin-right:14px}

/* ---------- карточки ---------- */
.card{background:var(--cream);border:3px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);padding:10px 12px}

/* ---------- тюнер ---------- */
#gauge{width:100%;height:auto}
.g-brand{font-family:Lobster,SwingulyaText;font-size:15px;fill:var(--red-d)}
.g-cap{font-family:RubikMono,SwingulyaText;font-size:7px;letter-spacing:.2em;fill:var(--gray)}
.g-lbl{font-family:RubikMono,SwingulyaText;font-size:10px;fill:var(--ink)}
.readout{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:6px;margin-top:-4px}
.note-box{text-align:center;transition:opacity .3s}
.note-box.dim{opacity:.3}
.note{font-family:RubikMono,SwingulyaText;font-size:58px;line-height:1;display:flex;align-items:flex-start;justify-content:center;color:var(--ink);text-shadow:3px 3px 0 var(--mus);transition:color .2s}
.note.long{font-size:40px}
.note .acc{display:inline-flex}
.note .acc svg{width:.4em;height:.8em;margin:.02em 0 0 .04em;filter:drop-shadow(2px 2px 0 var(--mus))}
.note sub{font-family:Rubik,SwingulyaText;font-weight:700;font-size:20px;align-self:flex-end;margin:0 0 2px 3px;text-shadow:none}
.note-box.ok .note{color:var(--green);text-shadow:3px 3px 0 var(--ink)}
.note-box.ok .note .acc svg{filter:drop-shadow(2px 2px 0 var(--ink))}
.alt{font-size:14px;font-weight:500;color:var(--gray);min-height:19px;display:flex;align-items:center;justify-content:center;gap:1px}
.alt svg,.acc-i{width:7px;height:14px;display:inline-block;vertical-align:-2px}
.lamp{width:46px;height:46px;border-radius:50%;border:3px solid var(--ink);background:var(--lamp);display:grid;place-items:center;color:var(--ink);transition:background .15s}
.lamp svg{width:15px;height:27px}
.lamp-high svg{width:18px}
.lamp.on{background:var(--red);color:var(--cream)}
.freqline{display:flex;justify-content:center;gap:8px;font-family:RubikMono,SwingulyaText;font-size:12px;color:var(--gray);margin-top:4px}

.big-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:12px 16px;font-family:RubikMono,SwingulyaText;font-size:15px;color:var(--cream);background:var(--red);border:3px solid var(--ink);border-radius:999px;box-shadow:4px 4px 0 var(--ink);transition:transform .06s,box-shadow .06s}
.big-btn:active,.tap-btn:active,.nudge:active,.mini:active,.chips button:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.big-btn svg{width:22px;height:22px;flex:none}
.big-btn.on{background:var(--ink);color:var(--mus)}

.calib{display:flex;align-items:center;justify-content:center;gap:10px;font-family:RubikMono,SwingulyaText;font-size:14px}
.calib sub{font-size:9px}
.mini{width:38px;height:38px;border-radius:50%;border:3px solid var(--ink);background:var(--mus);font-family:RubikMono,SwingulyaText;font-size:18px;line-height:1;color:var(--ink);box-shadow:2px 2px 0 var(--ink);padding:0}
#a4val{min-width:42px;text-align:center;font-size:18px}

/* ---------- метроном ---------- */
.tempo{display:grid;grid-template-columns:62px 1fr 62px;gap:4px 6px;align-items:center}
.nudge{width:56px;height:56px;border-radius:50%;border:3px solid var(--ink);background:var(--mus);font-family:RubikMono,SwingulyaText;font-size:28px;line-height:1;color:var(--ink);box-shadow:3px 3px 0 var(--ink);padding:0;justify-self:center}
.bpm-box{text-align:center}
.bpm{font-family:RubikMono,SwingulyaText;font-size:62px;line-height:1;text-shadow:3px 3px 0 var(--red)}
.bpm-unit{font-size:12px;color:var(--gray);letter-spacing:.04em;margin-top:2px}
.tempo-name{font-family:Lobster,SwingulyaText;font-size:22px;line-height:1.2;color:var(--red-d);min-height:27px}
.tempo input[type=range]{grid-column:1/-1}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:8px;background:var(--ink);border-radius:8px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--red);border:3px solid var(--ink);margin-top:-10px;box-shadow:2px 2px 0 var(--ink)}
input[type=range]:focus{outline:none}

.beats{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;padding-top:2px}
.beat{width:42px;height:42px;border-radius:50%;border:3px solid var(--ink);background:var(--cream);padding:0;font-family:RubikMono,SwingulyaText;font-size:13px;color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.beats.many .beat{width:36px;height:36px;font-size:12px}
.beat.lv3{background:var(--red);color:var(--cream)}
.beat.lv2{background:var(--mus)}
.beat.lv1{background:var(--cream)}
.beat.lv0{background:transparent;border-style:dashed;color:var(--gray);box-shadow:none}
.beat.now{outline:4px solid var(--ink);outline-offset:2px}
.beats-hint{font-size:12px;text-align:center;color:var(--gray);margin-top:-4px}

.play-row{display:flex;gap:12px}
.play-row .big-btn{flex:1;font-size:17px}
.tap-btn{width:98px;flex:none;border-radius:999px;border:3px solid var(--ink);background:var(--cream);font-family:RubikMono,SwingulyaText;font-size:16px;color:var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .06s,box-shadow .06s,background .1s}
.tap-btn.hit{background:var(--mus)}

.opt-label{font-family:Lobster,SwingulyaText;font-size:19px;margin:0 0 6px 2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{display:inline-flex;align-items:center;border:2.5px solid var(--ink);background:var(--cream);border-radius:999px;padding:7px 13px;font-family:Rubik,SwingulyaText;font-weight:600;font-size:14px;color:var(--ink);box-shadow:2px 2px 0 var(--ink);transition:transform .06s,box-shadow .06s}
.chips button.active{background:var(--ink);color:var(--mus)}
.swing-row{display:none;align-items:center;gap:10px;margin-top:8px;font-size:14px;font-weight:500;white-space:nowrap}
.swing-row.show{display:flex}
.swing-row b{font-family:RubikMono,SwingulyaText;font-size:13px;min-width:38px;text-align:right}
.bar-count{text-align:center;font-family:RubikMono,SwingulyaText;font-size:11px;color:var(--gray);min-height:14px}

/* ---------- вкладки ---------- */
.tabs{display:flex;gap:10px;background:var(--ink);padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:3px solid var(--mus)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:56px;border-radius:14px;border:2px solid #5A534C;background:transparent;color:var(--paper);font-family:RubikMono,SwingulyaText;font-size:10px;letter-spacing:.02em;position:relative;padding:0;min-width:0}
.tab svg{width:22px;height:22px;flex:none}
.tab.active{background:var(--red);border-color:var(--cream);color:var(--cream)}
.tab-pulse{position:absolute;top:7px;right:10px;width:10px;height:10px;border-radius:50%;background:var(--mus);border:2px solid var(--ink);display:none}
.tab-pulse.on{display:block}

/* ---------- настройки ---------- */
.modal{position:fixed;inset:0;background:rgba(30,26,22,.55);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.modal[hidden]{display:none}
.sheet{background:var(--paper);width:100%;max-width:560px;border:3px solid var(--ink);border-bottom:0;border-radius:22px 22px 0 0;padding:12px 16px calc(18px + env(safe-area-inset-bottom));max-height:86vh;overflow:auto;animation:sheetUp .22s ease-out}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;font-family:Lobster,SwingulyaText;font-size:26px;margin-bottom:4px}
.sheet .icon-btn{border-color:var(--ink);color:var(--ink);font-size:26px;line-height:1}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:2px dashed rgba(30,26,22,.22);font-size:16px;font-weight:500;position:relative}
.set-row.col{flex-direction:column;align-items:stretch;gap:9px}
.set-label{font-weight:500}
.set-row input{position:absolute;opacity:0;pointer-events:none}
.sw{width:54px;height:31px;border-radius:31px;border:3px solid var(--ink);background:var(--lamp);position:relative;flex:none;transition:background .15s}
.sw::after{content:'';position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:var(--cream);border:2px solid var(--ink);transition:left .15s}
.set-row input:checked + .sw{background:var(--red)}
.set-row input:checked + .sw::after{left:25px}
.about{font-size:13px;line-height:1.55;color:var(--gray);margin-top:14px}
.about .ver{font-family:RubikMono,SwingulyaText;font-size:11px}

/* ---------- заставка ---------- */
#splash{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;clip-path:circle(150% at 50% 50%);transition:clip-path .75s cubic-bezier(.6,0,.4,1)}
#splash.close{clip-path:circle(0% at 50% 50%)}
#splash.gone{display:none}
.rings{--ring:min(92vw,440px);width:var(--ring);height:var(--ring);grid-area:1/1;animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.splash-text{--ring:min(92vw,440px);grid-area:1/1;text-align:center;width:calc(var(--ring) * .5);animation:titleIn .6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes titleIn{from{transform:scale(.4);opacity:0}}
.splash-pre{font-family:Neucha,SwingulyaText;font-size:calc(var(--ring) * .038);line-height:1.1;color:var(--gray)}
.splash-title{font-family:Lobster,SwingulyaText;font-size:calc(var(--ring) * .11);line-height:1.05;color:var(--red);text-shadow:2px 2px 0 var(--ink)}
.splash-sub{font-family:RubikMono,SwingulyaText;font-size:calc(var(--ring) * .026);letter-spacing:.06em;line-height:1.4;margin-top:4px}

/* ---------- старая плёнка ---------- */
.film{position:fixed;inset:0;pointer-events:none;z-index:40;display:none;
  background:radial-gradient(ellipse at center,transparent 58%,rgba(45,28,10,.26) 100%);animation:flicker .16s steps(2) infinite}
body.film-on .film{display:block}
@keyframes flicker{0%{opacity:.88}100%{opacity:1}}
.scratch{position:absolute;top:0;bottom:0;width:1.5px;background:rgba(30,26,22,.16);left:22%;animation:scratch 3.3s steps(10) infinite}
.scratch.s2{left:68%;animation-duration:4.7s;width:1px}
@keyframes scratch{0%{transform:translateX(0);opacity:0}12%{opacity:1}30%{transform:translateX(38px)}48%{opacity:0}62%{transform:translateX(-26px);opacity:.8}82%{transform:translateX(84px)}100%{opacity:0}}

/* ---------- персонажи ---------- */
.char g{transform-box:fill-box}
#lev .brow,#lev .mouth{display:none}
#lev.st-idle .b-sly,#lev.st-idle .m-idle,#lev.st-ok .b-sly,#lev.st-ok .m-ok,
#lev.st-low .b-sad,#lev.st-low .m-low,#lev.st-high .b-up,#lev.st-high .m-high{display:inline}
#lev .body{transform-origin:50% 100%;transition:transform .3s}
#lev.st-idle .body{animation:breathe 2.4s ease-in-out infinite}
#lev.st-low .body{transform:translateY(4px) rotate(-3deg)}
#lev.st-high .body{transform:scaleY(1.05)}
#lev.st-ok .body{animation:bob .44s ease-in-out infinite}
#lev .pupils{transition:transform .2s}
#lev.st-low .pupils{transform:translate(-1px,1.5px)}
#lev.st-high .pupils{transform:translate(1px,-1.5px)}
#lev .snap-arm{transform-origin:0% 100%}
#lev.st-ok .snap-arm{animation:snap .44s ease-in-out infinite}
#lev .notes{display:none;color:var(--ink)}
#lev.st-ok .notes{display:inline}
#lev .fn{animation:floatUp 1.4s linear infinite;opacity:0}
#lev .fn2{animation-delay:.45s}#lev .fn3{animation-delay:.9s}
@keyframes floatUp{0%{transform:translateY(10px);opacity:0}20%{opacity:1}100%{transform:translateY(-14px);opacity:0}}
@keyframes bob{50%{transform:translateY(-4px)}}
@keyframes breathe{50%{transform:scaleY(1.015)}}
@keyframes snap{50%{transform:rotate(-14deg)}}

#bas .body,#senya .body{transform-origin:50% 100%}
#bas .vib{opacity:0}
#bas .arm-pluck{transform-origin:0% 0%}
#bas .dbass{transform-origin:50% 100%}
#senya .arm-brush{transform-origin:12px 0}
#senya .arm-cym{transform-origin:0% 100%}
#senya .cymbal{transform-origin:50% 50%}
#metro.idle #bas .body,#metro.idle #senya .body{animation:breathe 2.6s ease-in-out infinite}

@media (max-height:700px){
  .stage{min-height:120px} #lev{width:104px}
  .stage-band .char{height:104px}
  .note{font-size:50px} .bpm{font-size:54px}
}
@media (max-width:350px){
  .bubble{font-size:18px} .chips button{padding:6px 10px;font-size:13px}
}

/* ---------- гаммы и лады ---------- */
#scales{gap:10px}
.sc-top{display:flex;flex-direction:column;gap:8px;position:sticky;top:-12px;z-index:5;background:var(--paper);margin:0 -14px;padding:10px 14px 8px;border-bottom:2px dashed rgba(30,26,22,.18)}
.seg{display:flex;border:2.5px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--cream);box-shadow:3px 3px 0 var(--ink)}
.seg button{flex:1;border:0;background:transparent;padding:9px 4px;font-family:RubikMono,SwingulyaText;font-size:12px;color:var(--ink);border-right:2px solid var(--ink)}
.seg button:last-child{border-right:0}
.seg button.active{background:var(--ink);color:var(--mus)}
.trans{display:flex;align-items:center;gap:10px;font-family:Lobster,SwingulyaText;font-size:18px}
.seg.small{flex:1;box-shadow:2px 2px 0 var(--ink)}
.seg.small button{font-family:Rubik,SwingulyaText;font-weight:700;font-size:15px;padding:6px 4px}
.sc-pane{display:flex;flex-direction:column;gap:10px}
.mini-l{font-size:12px;font-weight:600;color:var(--gray);margin:2px 0 6px 2px;text-transform:none}
.hint{font-family:Rubik,SwingulyaText;font-size:12px;color:var(--gray);font-weight:400}
.rootgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.rk{border:2.5px solid var(--ink);background:var(--cream);border-radius:12px;padding:8px 0;font-weight:700;font-size:15px;color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.rk.active{background:var(--red);color:var(--cream)}
.chgrp{margin-bottom:2px}
.chips .chk{font-family:Rubik,SwingulyaText;font-weight:600}
.chcard{display:flex;flex-direction:column;gap:6px}
.chhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.chsym{font-family:Rubik,SwingulyaText;font-weight:800;font-size:34px;line-height:1.05;color:var(--ink)}
.chname{font-size:13px;color:var(--gray)}
.chf{display:flex;gap:8px;flex-wrap:wrap;font-weight:700;font-size:14px;color:var(--red-d)}
.chf span{border:2px solid var(--red-d);border-radius:8px;padding:1px 7px}
.pbtn{border:2.5px solid var(--ink);background:var(--red);color:var(--cream);border-radius:999px;padding:8px 14px;font-family:Rubik,SwingulyaText;font-weight:700;font-size:14px;box-shadow:2px 2px 0 var(--ink);white-space:nowrap}
.pbtn.ghost{background:var(--cream);color:var(--ink)}
.pbtn.big{font-size:15px;padding:10px 16px}
.pbtn.on{background:var(--ink);color:var(--mus)}
.pbtn:active,.rk:active,.pch:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.stw{margin:0 -4px}
.staff{display:block;max-width:none}
.staff .sl{stroke:#1E1A16;stroke-width:1.1}
.staff .led{stroke:#1E1A16;stroke-width:1.3}
.staff .bar{stroke:#1E1A16;stroke-width:1.4}
.staff .clef,.staff .nh,.staff .acc{font-family:SwingulyaMusic;font-size:40px;fill:#1E1A16}
.staff .ct,.staff .ct .nh,.staff .ct .acc{fill:#C2321F}
.staff .av,.staff .av .nh,.staff .av .acc{fill:#9A938A}
.staff .lab{font-family:Rubik,SwingulyaText;font-weight:700;font-size:12px;text-anchor:middle;fill:#1E1A16}
.staff .ct .lab{fill:#C2321F}
.staff .av .lab{fill:#9A938A}
.staff .nmn{font-family:Rubik,SwingulyaText;font-size:11px;text-anchor:middle;fill:#5E574F}
.staff .sn{transition:transform .08s}
.staff .sn.hl .nh,.staff .sn.hl .acc{fill:#E8A927;stroke:#1E1A16;stroke-width:1}
.staff .sn.hl .lab{fill:#E8A927}
.sccard{background:var(--cream);border:3px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.sch{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.sct{font-weight:800;font-size:17px;line-height:1.2}
.sce{font-size:12px;color:var(--gray);font-style:italic}
.tag{font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;border:2px solid var(--ink);white-space:nowrap}
.tag.r1{background:var(--red);color:var(--cream)}
.tag.r2{background:var(--mus);color:var(--ink)}
.tag.r3{background:var(--paper2);color:var(--ink)}
.sctx{font-size:14px;line-height:1.4}
.legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--gray)}
.lg{width:10px;height:10px;border-radius:50%;display:inline-block;margin-left:4px}
.lg.ct{background:#C2321F}.lg.av{background:#9A938A}
.scb{display:flex;gap:8px;flex-wrap:wrap}
.selwrap{border:2.5px solid var(--ink);border-radius:14px;background:var(--cream);box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.selwrap select{width:100%;border:0;background:transparent;font:inherit;font-weight:700;font-size:16px;padding:10px 12px;color:var(--ink);-webkit-appearance:none;appearance:none}
.tip{font-family:Neucha,SwingulyaText;font-size:18px;line-height:1.2;background:var(--cream);border:2.5px dashed var(--ink);border-radius:14px;padding:8px 12px}
.tip b{font-family:Lobster,SwingulyaText;font-weight:400;color:var(--red-d)}
.prow{display:flex;flex-wrap:wrap;gap:6px}
.pch{flex:1 1 0;min-width:70px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:2.5px solid var(--ink);background:var(--cream);border-radius:12px;padding:6px 8px;box-shadow:2px 2px 0 var(--ink);text-align:left;color:var(--ink)}
.pch b{font-size:16px;font-weight:800}
.pch small{font-size:11px;color:var(--gray)}
.pch.active{background:var(--mus)}
.pch.now{background:var(--red);color:var(--cream)}
.pch.now small{color:var(--cream)}
.pctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ptempo{flex:1;min-width:150px;font-family:RubikMono,SwingulyaText;font-size:12px;display:flex;flex-direction:column;gap:2px}
.ritem{border:2.5px solid var(--ink);border-radius:14px;background:var(--cream);margin-bottom:8px;box-shadow:2px 2px 0 var(--ink);overflow:hidden}
.rhead{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;background:transparent;border:0;padding:9px 12px;text-align:left;color:var(--ink)}
.rhead b{display:block;font-size:15px}
.rhead small{font-size:11px;color:var(--gray);font-style:italic}
.rform{font-size:12px;font-weight:700;color:var(--red-d);text-align:right;flex:none;max-width:48%}
.ritem.open{background:var(--paper2)}
.rbody{padding:0 8px 8px}
.rbody .sccard{box-shadow:none;border-width:2px}
.fitc.r1{background:var(--red);color:var(--cream)}
.fitc.r2{background:var(--mus)}

/* ---------- импровизация: ведущий и подложка ---------- */
.stage-improv{min-height:0;align-items:center}
#host{width:96px;height:auto;flex:none}
#host .mic{transform-origin:60px 130px;transform-box:view-box;animation:micSway 3s ease-in-out infinite}
#host .spark{animation:spark 1.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes micSway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes spark{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
.stage-improv .bubble{font-size:18px;min-height:0}
.backcard{display:flex;flex-direction:column;gap:9px}
.bk-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bk-head .pbtn{min-width:150px}
.bk-tempo{display:grid;grid-template-columns:38px 64px 38px 1fr;align-items:center;gap:8px}
.bk-tv{text-align:center;line-height:1}
.bk-tv b{font-family:RubikMono,SwingulyaText;font-size:20px;display:block}
.bk-tv small{font-size:10px;color:var(--gray)}
.enh{font-weight:500;font-size:13px;color:var(--gray)}
.sctx b{font-family:Lobster,SwingulyaText;font-weight:400;color:var(--red-d);font-size:16px}
.seg.small button{min-width:0}
.tab span{font-family:Rubik,SwingulyaText;font-weight:700;font-size:11.5px;letter-spacing:0;white-space:nowrap}

/* ---------- персонажи-картинки ---------- */
.char-img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none;transform-origin:50% 100%;filter:drop-shadow(3px 3px 0 rgba(30,26,22,.18))}
#lev{position:relative;width:98px;height:auto;flex:none}
#lev .char-img{transition:transform .3s}
#lev.st-idle .char-img{animation:breathe 2.4s ease-in-out infinite}
#lev.st-ok .char-img{animation:bob .44s ease-in-out infinite}
#lev.st-low .char-img{transform:translateY(4px) rotate(-4deg) scaleY(.97)}
#lev.st-high .char-img{transform:translateY(-3px) rotate(4deg) scaleY(1.03)}
#lev .notes{position:absolute;right:-18px;top:-4px;width:40px;height:60px;display:none;color:var(--ink);overflow:visible}
#lev.st-ok .notes{display:block}
#sax{width:96px;flex:none}
#metro.idle #sax .char-img{animation:breathe 2.6s ease-in-out infinite}
#host{width:100px;flex:none}
#host .char-img{animation:hostSway 3s ease-in-out infinite}
#host.playing .char-img{animation:hostBob .5s ease-in-out infinite}
@keyframes hostSway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes hostBob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1.5deg)}}
#mStage{min-height:140px}
@media (max-height:700px){ #lev{width:84px} #sax{width:82px} #host{width:84px} }

/* ---------- заставка с бандой ---------- */
#splash{display:flex;flex-direction:column;align-items:center;justify-content:center;--h:min(48vw,25vh,230px)}
.splash-stage{display:grid;place-items:center}
.splash-band{display:flex;align-items:flex-end;justify-content:center;margin-top:calc(var(--h) * -0.62);position:relative;z-index:1}
.sb{display:block;height:var(--h);width:auto;filter:drop-shadow(0 6px 0 rgba(0,0,0,.35));animation:bandIn .55s cubic-bezier(.3,1.6,.5,1) both}
.sb-vocal{height:calc(var(--h) * 1.18);margin:0 -4vw;position:relative;z-index:2;animation-delay:.25s}
.sb-sax{animation-delay:.1s}
.sb-tr{height:calc(var(--h) * .92);animation-delay:.4s}
@keyframes bandIn{from{transform:translateY(40px) scale(.7);opacity:0}}
.splash-band::after{content:'';position:absolute;left:-6vw;right:-6vw;bottom:-14px;height:20px;background:var(--red);border-top:5px solid var(--mus);border-radius:4px;box-shadow:0 6px 0 rgba(0,0,0,.35);z-index:3}

/* ---------- замедлитель ---------- */
.tabs{gap:6px;padding-left:8px;padding-right:8px}
.tab span{font-size:clamp(8.4px,2.75vw,10.5px)}
.logo-sub{font-size:clamp(6.2px,calc((100vw - 82px) / 38.5),7.6px);letter-spacing:0;white-space:nowrap}
@media (max-width:340px){ .tabs{gap:4px;padding-left:6px;padding-right:6px} }
#slow .file{display:flex;align-items:center;gap:10px}
#slow .disc{width:42px;height:42px;border-radius:50%;flex:none;border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  background:radial-gradient(circle,var(--paper) 0 7%,var(--red) 8% 26%,var(--ink) 27% 40%,#3A332D 41% 43%,var(--ink) 44% 60%,#3A332D 61% 63%,var(--ink) 64%)}
#slow.has.playing .disc{animation:spin 1.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#slow .nm{flex:1;min-width:0}
#slow .nm b{display:block;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#slow .nm small{display:block;font-size:12px;color:var(--gray);line-height:1.3}
#slow .nm small.err{color:var(--red-d);font-weight:600}
#slow .lbl{font-family:Lobster,SwingulyaText;font-size:19px;color:var(--red-d);margin:0 0 6px}
#slow .lbl small{font-family:Rubik,SwingulyaText;font-size:12px;color:var(--gray);margin-left:8px}
.sl-empty p{margin:0 0 12px;font-size:14px;line-height:1.4}
.sl-empty p.lbl{margin-bottom:6px}
.sl-player,.sl-seg,.sl-pane{display:none!important}
#slow.has .sl-empty{display:none}
#slow.has .sl-player{display:block!important}
#slow.has .sl-seg{display:flex!important}
#slow.has .sl-pane:not([hidden]){display:block!important}
.wavebox{position:relative;background:var(--ink);border:2.5px solid var(--ink);border-radius:12px;overflow:hidden;box-shadow:inset 0 0 18px rgba(232,169,39,.12)}
.wavebox canvas{display:block;width:100%;height:132px;touch-action:none;cursor:pointer}
.times{display:flex;justify-content:space-between;gap:6px;font-weight:600;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--gray);margin-top:6px}
.times b{color:var(--ink);font-weight:700}
.zoom{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--gray)}
.zoom #slZoomL{min-width:112px;text-align:right;white-space:nowrap}
.rng{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:10px;border-radius:6px;margin:0;
  background:linear-gradient(90deg,var(--red) 0 var(--v,0%),var(--paper2) var(--v,0%) 100%);border:2px solid var(--ink)}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--red);border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.rng::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--red);border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.zoom .rng{height:8px}
.zoom .rng::-webkit-slider-thumb{width:22px;height:22px}
.sl-trans{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.tbtn{--s:clamp(38px,12vw,46px);--sp:clamp(52px,16vw,62px);width:var(--s);height:var(--s);border-radius:50%;border:2.5px solid var(--ink);background:var(--cream);box-shadow:2px 2px 0 var(--ink);
  font-family:Rubik,SwingulyaText;font-weight:700;font-size:13px;color:var(--ink);display:grid;place-items:center;padding:0;flex:none}
.tbtn svg{width:22px;height:22px}
.tbtn.play{--s:var(--sp);background:var(--red);color:var(--cream)}
/* размер кнопок — от ширины карточки, а не экрана (важно в горизонтальной колонке) */
@supports (width:1cqw){
  .sl-player{container-type:inline-size}
  .tbtn{--s:clamp(32px,13.8cqw,46px);--sp:clamp(42px,18.6cqw,62px)}
}
.tbtn.play svg{width:26px;height:26px}
.tbtn.play.on{background:var(--ink);color:var(--mus)}
.tbtn.ab{background:var(--mus);font-size:17px}
.tbtn.on{background:var(--ink);color:var(--mus)}
.tbtn:disabled{opacity:.4;box-shadow:none}
.tbtn:active:not(:disabled){transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.sl-seg button{font-size:11px;padding:10px 2px;white-space:nowrap}
.big-v{font-family:RubikMono,SwingulyaText;font-size:26px;line-height:1;color:var(--ink);min-width:80px;text-align:right}
.big-v small{font-size:13px}
#slow .row{display:flex;align-items:center;gap:8px}
#slow .chips{margin-top:12px}
#slow .sp{flex:1}
.sl-semi{min-width:52px;text-align:center}
.sl-unit{font-size:13px;color:var(--gray)}
.sl-tune{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13px;line-height:1.35;color:var(--gray)}
.auto{border:2.5px solid var(--ink);border-radius:999px;background:var(--cream);box-shadow:2px 2px 0 var(--ink);padding:8px 12px;
  font-family:Rubik,SwingulyaText;font-weight:700;font-size:13px;color:var(--ink);white-space:nowrap;flex:none}
.auto.done{background:var(--green);color:var(--cream)}
.auto:disabled{opacity:.45;box-shadow:none}
.auto:active:not(:disabled){transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
#slow .oct{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
#slow .oct b{font-family:RubikMono,SwingulyaText;font-size:13px;font-weight:400}
#slow sub{font-size:.7em;vertical-align:baseline;position:relative;top:.25em}
.sl-keys{position:relative;height:150px;touch-action:none;-webkit-touch-callout:none}
.sl-keys .wk,.sl-keys .bk{position:absolute;top:0;box-sizing:border-box}
.sl-keys .wk{height:100%;padding:0 1px}
.sl-keys .wk::before{content:'';position:absolute;inset:0 1px;background:var(--cream);border:2.4px solid var(--ink);border-radius:0 0 6px 6px}
.sl-keys .wk span{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-weight:700;font-size:12px;color:var(--gray);pointer-events:none}
.sl-keys .wk span.c{color:var(--red-d)}
.sl-keys.ru .wk span{font-size:9.5px}
.sl-keys .wk.on::before{background:var(--red)}
.sl-keys .wk.on span{color:var(--cream)}
.sl-keys .bk{height:58%;z-index:2;background:var(--ink);border-radius:0 0 4px 4px;border:2px solid var(--ink)}
.sl-keys .bk::after{content:'';position:absolute;left:2px;right:2px;top:2px;height:16%;border-radius:2px;background:#4A423B}
.sl-keys .bk.on{background:var(--red)}
.sl-keys .bk.on::after{background:#E8604F}
.note-hint{font-size:12px;color:var(--gray);margin:8px 0 0}
@media (max-height:740px){ .sl-keys{height:120px} .wavebox canvas{height:112px} #slow .note-hint{display:none} #slow .oct{margin-bottom:6px} #slow .oct .mini{width:34px;height:34px;font-size:16px} }

/* ---------- обёртки колонок: в портрете не влияют на раскладку ---------- */
.lcol,.rcol{display:contents}

/* =====================================================================
   Горизонтальный экран телефона: вкладки столбиком слева, разделы в две колонки
   ===================================================================== */
@media (orientation:landscape) and (max-height:560px){
  #app{max-width:none;display:grid;--rail:calc(104px + env(safe-area-inset-left));
    grid-template-columns:var(--rail) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
  #app::before{content:'';grid-column:1;grid-row:1/4;background:var(--ink);border-right:3px solid var(--mus)}
  .top{display:contents}
  .logo{grid-column:1;grid-row:1;align-items:center;padding:calc(env(safe-area-inset-top) + 8px) 6px 2px calc(6px + env(safe-area-inset-left))}
  .logo-word{font-size:23px}
  .logo-sub{display:none}
  .tabs{grid-column:1;grid-row:2;flex-direction:column;justify-content:center;gap:6px;background:transparent;border-top:0;
    padding:6px 8px 6px calc(8px + env(safe-area-inset-left));min-height:0}
  .tab{flex:1 1 0;height:auto;min-height:40px;max-height:66px}
  .tab span{font-size:10.5px}
  .tab-pulse{top:5px;right:6px}
  #openSettings{grid-column:1;grid-row:3;justify-self:center;margin:2px 0 calc(8px + env(safe-area-inset-bottom)) env(safe-area-inset-left);width:38px;height:38px}
  #openSettings svg{width:22px;height:22px}
  main{grid-column:2;grid-row:1/4;min-height:0;padding-right:env(safe-area-inset-right)}

  .screen.active{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 16px;align-content:start;align-items:start;padding:10px 16px 16px}
  .lcol,.rcol{display:flex;flex-direction:column;gap:10px;min-width:0}
  .lcol{grid-column:1}
  .rcol{grid-column:2}

  /* сцена и реплики — меньше */
  .stage{min-height:0}
  .bubble{font-size:17px;min-height:0;padding:8px 10px}
  #lev{width:84px} #sax{width:76px} #host{width:76px}

  /* тюнер: слева певица, кнопка и строй, справа шкала */
  #tuner.active{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:1fr auto auto;min-height:100%;align-content:stretch}
  #tuner .stage{grid-column:1;grid-row:1;align-self:center}
  #tuner .meter{grid-column:2;grid-row:1/4;align-self:center}
  #tuner #micBtn{grid-column:1;grid-row:2}
  #tuner .calib{grid-column:1;grid-row:3;padding-bottom:4px;gap:6px;font-size:13px;white-space:nowrap}
  #gauge{max-height:calc(100dvh - 150px)}
  .note{font-size:46px} .note sub{font-size:16px}
  .lamp{width:40px;height:40px}

  /* метроном: слева темп, доли и «Поехали!», справа саксофонист и настройки */
  #metro.active{grid-template-rows:auto auto 1fr}
  #metro .lcol{grid-row:1/4;position:sticky;top:0}
  #metro #mStage{grid-column:2;grid-row:1;min-height:0}
  #metro .rcol{grid-row:2}
  #metro .bar-count{grid-column:1;grid-row:4}
  .bpm{font-size:50px}
  .tempo-name{font-size:19px;min-height:23px}
  .nudge{width:50px;height:50px;font-size:24px}
  .play-row .big-btn{min-height:50px;padding:8px 14px}
  .opt-label{font-size:17px;margin-bottom:4px}

  /* импровизация: слева ведущий и переключатели, справа содержимое */
  #scales .lcol{grid-row:1/3;position:sticky;top:0}
  #scales .sc-pane{grid-column:2;grid-row:1/3}
  .sc-top{position:static;margin:0;padding:0;border:0;background:transparent}

  /* замедлитель: слева запись, волна и кнопки, справа панели */
  #slow.active{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  #slow .disc{width:34px;height:34px}
  #slow .card.file{padding:6px 10px}
  #slow .nm b{font-size:14px}
  .wavebox canvas{height:max(64px,calc(100dvh - 262px))}
  .zoom{margin-top:6px}
  .sl-trans{margin-top:8px}
  .sl-seg button{padding:8px 2px}
  .sl-keys{height:max(96px,min(220px,calc(100dvh - 176px)))}
  #slow .note-hint{display:none}
  #slow .lbl{font-size:17px;margin-bottom:4px}
  #slow .chips{margin-top:10px}

  /* заставка помещается по высоте */
  .rings,.splash-text{--ring:min(88vh,440px)}
  #splash{--h:min(26vh,230px)}

  /* настройки */
  .sheet{max-height:92vh}

  /* метроном: число темпа и кнопки ± помещаются в колонку */
  #metro.active{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .tempo{grid-template-columns:50px 1fr 50px}
  .nudge{width:46px;height:46px;font-size:22px}
  .bpm{font-size:clamp(38px,5.4vw,50px)}
  #scales.active{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  #scMode button{font-size:clamp(8.5px,1.5vw,12px);padding:9px 2px}
  .sl-seg button{white-space:normal;line-height:1.15;font-size:10.5px;padding:6px 2px}
  #slow .file .pbtn{padding:6px 10px;font-size:13px}
}
@media (orientation:landscape) and (max-height:560px) and (max-width:720px){
  #app{--rail:calc(86px + env(safe-area-inset-left))}
  .logo-word{font-size:19px}
  .tab span{font-size:9px}
  .tab svg{width:20px;height:20px}
  .tabs{padding-left:calc(6px + env(safe-area-inset-left));padding-right:6px}
  .screen.active{padding:8px 12px 14px;gap:8px 12px}
}
@media (orientation:landscape) and (max-height:380px){
  .beats-hint{display:none}
  #metro .beat{width:38px;height:38px}
}