:root{
  --bg:#08070b; --bg2:#0d0c12; --panel:#111017; --panel2:#16141d;
  --line:#221f2d; --line2:#2e2a3c;
  --txt:#eeeaf5; --muted:#8a839c; --dim:#5d5770;
  --acc:#2ef2c2; --acc2:#ff2e79; --acc3:#ffc93c; --acc4:#7ea6ff;
  --r:16px; --r2:12px;
  --disp:"Unbounded","Inter",system-ui,sans-serif;
  --ui:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--txt); font-family:var(--ui);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  min-height:100vh; overflow-x:hidden;
  background-image:
    radial-gradient(900px 500px at 12% -8%, rgba(46,242,194,.10), transparent 60%),
    radial-gradient(800px 460px at 92% 4%, rgba(255,46,121,.09), transparent 60%);
  background-attachment:fixed;
}
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:var(--acc);color:#04120e}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
h1,h2,h3,.num{font-family:var(--disp);letter-spacing:-.02em}
kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--panel2);border:1px solid var(--line2);border-bottom-width:2px;border-radius:6px;padding:2px 7px}
.muted{color:var(--muted)}

/* ---------- шапка ---------- */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;
  padding:12px clamp(14px,4vw,40px);
  background:rgba(8,7,11,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--txt);
  font-family:var(--disp);font-weight:800;letter-spacing:.06em;font-size:17px}
.logo-eq{display:flex;gap:2.5px;align-items:flex-end;height:20px}
.logo-eq i{width:3.5px;background:var(--acc);border-radius:2px;animation:eq 1.1s ease-in-out infinite}
.logo-eq i:nth-child(1){height:8px;animation-delay:0s}
.logo-eq i:nth-child(2){height:18px;animation-delay:.15s;background:var(--acc2)}
.logo-eq i:nth-child(3){height:12px;animation-delay:.3s}
.logo-eq i:nth-child(4){height:16px;animation-delay:.45s;background:var(--acc3)}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.nav{display:flex;gap:4px;margin-left:8px;background:var(--panel);border:1px solid var(--line);padding:4px;border-radius:999px}
.nav-btn{padding:7px 15px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);transition:.18s}
.nav-btn:hover{color:var(--txt)}
.nav-btn.is-active{background:var(--txt);color:#0a0910}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--panel);
  color:var(--muted);display:grid;place-items:center;transition:.18s;font-size:14px}
.icon-btn:hover{color:var(--txt);border-color:var(--line2)}
.vol{display:flex;align-items:center;gap:8px;font-size:13px}
.vol input{width:88px}
@media(max-width:720px){.vol{display:none}.nav-btn{padding:7px 11px;font-size:12px}}

input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;background:var(--line2);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 0 4px rgba(46,242,194,.16);cursor:pointer}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:var(--acc);cursor:pointer}

/* ---------- каркас ---------- */
.screen{display:none;max-width:1120px;margin:0 auto;padding:0 clamp(14px,4vw,40px) 140px;position:relative;z-index:2}
.screen.is-active{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.hero{padding:clamp(38px,7vw,80px) 0 30px}
.hero.small{padding:38px 0 18px}
.kicker{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--acc);font-weight:700;margin-bottom:14px}
.hero h1{font-size:clamp(38px,7.5vw,76px);line-height:.98;font-weight:800;
  background:linear-gradient(96deg,#fff 20%,var(--acc) 62%,var(--acc2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lede{margin-top:16px;max-width:640px;color:var(--muted);font-size:clamp(14px,1.6vw,17px)}
.hero-stats{display:flex;gap:clamp(18px,4vw,46px);margin-top:32px;flex-wrap:wrap}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats b{font-family:var(--disp);font-size:clamp(22px,3.4vw,32px);font-weight:800;line-height:1}
.hero-stats span{font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.11em;margin-top:6px}

.panel{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(18px,3vw,26px);margin-bottom:18px}
.panel-title{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:20px;color:var(--txt)}
.tag{font-family:ui-monospace,monospace;font-size:11px;color:var(--acc);border:1px solid rgba(46,242,194,.3);
  background:rgba(46,242,194,.07);padding:3px 8px;border-radius:6px;letter-spacing:0}
.sub{font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:26px 0 12px;font-weight:600}

.btn{background:var(--acc);color:#04120e;font-weight:700;font-size:13.5px;padding:11px 18px;border-radius:11px;
  transition:.18s;white-space:nowrap;border:1px solid transparent}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn:active{transform:none}
.btn.ghost{background:var(--panel2);color:var(--txt);border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc);filter:none}
.btn.ghost.danger:hover{border-color:var(--acc2);color:var(--acc2)}
.btn.big{padding:15px 34px;font-size:15px;border-radius:13px;
  box-shadow:0 8px 30px -8px rgba(46,242,194,.5)}
.btn[disabled]{opacity:.45;pointer-events:none}

.row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.row.center{justify-content:center;align-items:center}
.row.end{justify-content:flex-end;margin-top:18px}
.field{flex:1;min-width:190px;display:flex;flex-direction:column;gap:9px;font-size:12.5px;color:var(--muted)}
.field b{color:var(--txt);font-family:var(--disp)}
.field input[type=file]{font-size:12px;color:var(--muted);background:var(--panel2);border:1px dashed var(--line2);
  padding:9px;border-radius:10px}

/* ---------- режимы ---------- */
.modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:11px}
.mode{position:relative;text-align:left;padding:15px 14px;border-radius:var(--r2);border:1px solid var(--line);
  background:var(--panel2);transition:.18s;overflow:hidden}
.mode:hover{border-color:var(--line2);transform:translateY(-2px)}
.mode em{font-size:21px;font-style:normal;display:block;margin-bottom:9px}
.mode b{display:block;font-size:14px;font-weight:600;margin-bottom:5px}
.mode span{display:block;font-size:11.5px;color:var(--dim);line-height:1.42}
.mode.is-active{border-color:var(--acc);background:linear-gradient(160deg,rgba(46,242,194,.12),var(--panel2))}
.mode.is-active b{color:var(--acc)}
.mode.is-active::after{content:"";position:absolute;top:11px;right:11px;width:7px;height:7px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 12px var(--acc)}
.mode-hint{margin-top:14px;font-size:13px;color:var(--muted);border-left:2px solid var(--acc);padding-left:12px}

/* ---------- бит ---------- */
.beatcard{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r2);padding:12px;margin-bottom:16px}
.beat-head{display:flex;align-items:center;gap:12px;flex:1 1 320px;min-width:0}
.beat-nav{width:30px;height:44px;border-radius:9px;color:var(--muted);font-size:20px;transition:.15s;flex:0 0 auto}
.beat-nav:hover{background:var(--panel);color:var(--acc)}
.beat-art{width:64px;height:56px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(46,242,194,.16),rgba(255,46,121,.14));border:1px solid var(--line2);overflow:hidden}
#beatViz{width:56px;height:44px}
.beat-meta{flex:1;min-width:0}
.beat-style{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);font-weight:700}
.beat-name{font-family:var(--disp);font-weight:600;font-size:clamp(15px,2.4vw,20px);margin:3px 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.beat-sub{font-size:12px;color:var(--dim)}
.beat-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;flex:0 1 auto}
.beat-actions .btn{padding:9px 13px;font-size:12.5px}
#beatFav.on{color:var(--acc2);border-color:var(--acc2)}
@media(max-width:760px){.beat-actions{width:100%;justify-content:flex-start}}

/* ---------- настройки ---------- */
.settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.setting{display:flex;flex-direction:column;gap:9px}
.setting.wide{margin-top:22px}
.setting-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700}
.setting small{font-size:11.5px;color:var(--dim);line-height:1.4}
.chips{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips.wrap{flex-wrap:wrap;overflow:visible}
.chip{padding:8px 13px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);
  font-size:12.5px;font-weight:500;color:var(--muted);transition:.15s;white-space:nowrap}
.chip:hover{border-color:var(--line2);color:var(--txt)}
.chip.on{background:var(--txt);color:#0a0910;border-color:var(--txt);font-weight:600}
.chip.on.acc{background:var(--acc);color:#04120e;border-color:var(--acc)}

.toggles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:24px;
  border-top:1px solid var(--line);padding-top:20px}
.toggle{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer;flex-wrap:wrap}
.toggle input{display:none}
.toggle span{width:38px;height:22px;border-radius:99px;background:var(--line2);position:relative;transition:.2s;flex:0 0 auto}
.toggle span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:var(--muted);transition:.2s}
.toggle input:checked+span{background:rgba(46,242,194,.28)}
.toggle input:checked+span::after{transform:translateX(16px);background:var(--acc)}
.toggle small{width:100%;padding-left:48px;color:var(--dim);font-size:11.5px;margin-top:-4px}

.startbar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:35;
  display:flex;align-items:center;gap:20px;padding:11px 11px 11px 22px;border-radius:16px;
  background:rgba(17,16,23,.9);backdrop-filter:blur(16px);border:1px solid var(--line2);
  box-shadow:0 20px 50px -20px #000;max-width:calc(100% - 28px)}
.startbar-info{display:flex;flex-direction:column;min-width:0}
.startbar-info b{font-family:var(--disp);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.startbar-info span{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#screen-setup:not(.is-active)~.startbar{display:none}

/* ---------- рифмы ---------- */
.search{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.search input{flex:1;min-width:200px;background:var(--panel2);border:1px solid var(--line2);border-radius:11px;
  padding:13px 16px;font-size:15px;outline:none;transition:.18s}
.search input:focus{border-color:var(--acc)}
.rhyme-out{display:flex;flex-direction:column;gap:18px}
.rgroup h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-weight:700}
.rlist{display:flex;flex-wrap:wrap;gap:7px}
.rword{padding:8px 13px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);font-size:13.5px;cursor:pointer;transition:.15s}
.rword:hover{border-color:var(--acc);color:var(--acc)}
.rword.g3{border-color:rgba(46,242,194,.4);background:rgba(46,242,194,.08)}
.rword.g2{border-color:rgba(126,166,255,.32)}
.rword .cat{font-size:10px;color:var(--dim);margin-left:6px}
.empty{color:var(--dim);font-size:14px;padding:20px 0}

/* ---------- прогресс ---------- */
.bignums{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}
.bignum{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r2);padding:16px}
.bignum b{display:block;font-family:var(--disp);font-size:clamp(22px,4vw,30px);font-weight:800;line-height:1}
.bignum span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin-top:7px}
.bignum.acc b{color:var(--acc)}
.bignum.acc2 b{color:var(--acc2)}
.bignum.acc3 b{color:var(--acc3)}
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,12px);grid-auto-columns:12px;gap:3px;justify-content:start;overflow-x:auto;padding-bottom:4px}
.heat i{border-radius:3px;background:var(--panel2);border:1px solid var(--line)}
.heat i[data-l="1"]{background:rgba(46,242,194,.22);border-color:transparent}
.heat i[data-l="2"]{background:rgba(46,242,194,.45);border-color:transparent}
.heat i[data-l="3"]{background:rgba(46,242,194,.72);border-color:transparent}
.heat i[data-l="4"]{background:var(--acc);border-color:transparent}
.modebars{display:flex;flex-direction:column;gap:9px}
.mbar{display:grid;grid-template-columns:130px 1fr 52px;align-items:center;gap:12px;font-size:13px}
.mbar i{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--acc4));display:block}
.mbar u{text-decoration:none;color:var(--dim);text-align:right;font-size:12px}
.mbar-track{background:var(--panel2);border-radius:99px;overflow:hidden}

/* ---------- игра ---------- */
.game{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;
  background-image:radial-gradient(1000px 620px at 50% -10%,rgba(46,242,194,.09),transparent 62%),
                   radial-gradient(700px 480px at 90% 100%,rgba(255,46,121,.08),transparent 62%)}
.game-top{display:flex;align-items:center;gap:14px;padding:12px clamp(12px,3vw,26px);border-bottom:1px solid var(--line)}
.g-beat{min-width:0}
.g-beat b{display:block;font-family:var(--disp);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.g-beat span{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:34vw}
.g-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px}
.g-counter{font-family:var(--disp);font-size:17px;font-weight:600;display:flex;gap:5px;align-items:baseline}
.g-counter i{color:var(--dim);font-style:normal;font-size:13px}
.g-counter span:first-child{color:var(--acc)}
.g-progress{width:min(320px,40vw);height:3px;background:var(--line);border-radius:99px;overflow:hidden}
.g-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc4));transition:width .2s linear}
.g-right{display:flex;align-items:center;gap:9px}
.g-score{text-align:right;line-height:1.05}
.g-score b{font-family:var(--disp);font-size:19px;color:var(--acc3)}
.g-score span{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

.game-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:14px clamp(12px,3vw,26px);position:relative;min-height:0}
.ticker{position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:5;
  font-size:12px;color:var(--muted);background:var(--panel);border:1px solid var(--line);
  padding:6px 14px;border-radius:99px;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}

/* сетка */
.grid-wrap{position:relative;width:min(1000px,100%);overflow:hidden;
  --rowh:clamp(46px,9vh,74px);--gap:8px;height:calc((var(--rowh) + var(--gap)) * 5)}
.grid-rows{display:flex;flex-direction:column;gap:var(--gap);transition:transform .16s cubic-bezier(.3,.8,.4,1)}
.grow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);height:var(--rowh);flex:0 0 auto;
  opacity:.34;transition:opacity .25s}
.grow.is-now{opacity:1}
.grow.is-next{opacity:.62}
.gcell{border-radius:11px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),#0e0d14);
  display:grid;place-items:center;font-size:clamp(11px,2.1vw,21px);font-weight:600;position:relative;
  transition:.12s;overflow:hidden;padding:0 5px;text-align:center;line-height:1.08;
  overflow-wrap:anywhere;word-break:break-word}
.gcell::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line2);position:absolute}
.gcell.has-word::before{display:none}
.gcell.rhyme{color:#0a0910;font-family:var(--disp);font-weight:700;border-color:transparent}
.gcell.filler{color:var(--txt);font-size:clamp(11px,1.7vw,15px);border-style:dashed;border-color:var(--line2)}
.gcell.lit{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc),0 0 26px -8px var(--acc)}
.gcell.blind{color:transparent!important;background:var(--panel2)!important;border-color:var(--line)!important}
.gcell.blind::after{content:"?";color:var(--dim);font-size:16px}
.ball{position:absolute;top:0;left:0;width:clamp(26px,4.4vw,38px);height:clamp(26px,4.4vw,38px);border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#fff,var(--acc3) 42%,#e07a12 100%);
  box-shadow:0 0 26px rgba(255,201,60,.55);pointer-events:none;z-index:6;will-change:transform}
.judge{position:absolute;left:50%;top:calc(var(--rowh)/2);transform:translate(-50%,-50%);
  font-family:var(--disp);font-weight:800;font-size:clamp(18px,4vw,32px);pointer-events:none;opacity:0;z-index:7}
.judge.show{animation:judge .6s ease-out}
@keyframes judge{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}25%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-120%) scale(1)}}

/* карточка */
.card-wrap{text-align:center;max-width:min(900px,100%)}
.card-pre{font-size:clamp(15px,2.6vw,24px);color:var(--muted);margin-bottom:14px;font-weight:500}
.card-main{font-family:var(--disp);font-weight:800;line-height:1.02;
  font-size:clamp(38px,11vw,110px);
  background:linear-gradient(96deg,#fff,var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:pop .3s ease}
.card-main.big{font-size:clamp(80px,22vw,190px);-webkit-text-fill-color:initial;color:var(--txt);background:none}
.card-main.small{font-size:clamp(21px,4.4vw,44px);background:none;color:var(--txt);-webkit-text-fill-color:initial}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
.card-sub{margin-top:14px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.card-rhymes{margin-top:22px;display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.card-rhymes b{font-weight:500;font-size:12.5px;color:var(--muted);background:var(--panel);
  border:1px solid var(--line);padding:6px 11px;border-radius:8px}
.card-beats{display:flex;gap:7px;justify-content:center;margin-top:26px}
.card-beats i{width:9px;height:9px;border-radius:50%;background:var(--line2);transition:.1s}
.card-beats i.on{background:var(--acc);box-shadow:0 0 14px var(--acc);transform:scale(1.35)}

.battle-banner{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,7,11,.94);z-index:9;
  font-family:var(--disp);text-align:center;padding:20px}
.battle-banner b{display:block;font-size:clamp(30px,8vw,64px);font-weight:800}
.battle-banner span{display:block;margin-top:12px;font-size:14px;color:var(--muted);font-family:var(--ui)}
.battle-banner .btn{margin-top:26px}

.game-bottom{padding:10px clamp(12px,3vw,26px) 16px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:9px}
.viz{display:flex;gap:3px;align-items:flex-end;height:26px}
.viz i{width:4px;min-height:3px;border-radius:2px;background:linear-gradient(180deg,var(--acc),var(--acc4));
  transition:height .07s linear;opacity:.85}
.hint{font-size:12px;color:var(--dim);text-align:center}

/* ---------- оверлеи ---------- */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(6,5,9,.86);backdrop-filter:blur(9px);
  display:grid;place-items:center;padding:16px;animation:fade .2s ease}
#countdown{font-family:var(--disp);font-weight:800;font-size:clamp(70px,20vw,180px);color:var(--acc);
  background:rgba(6,5,9,.7)}
#countdown div{animation:cd .8s ease-out}
@keyframes cd{from{transform:scale(1.7);opacity:0}40%{transform:scale(1);opacity:1}to{opacity:.85}}
.panel.narrow{max-width:520px;width:100%}
.panel.modal{max-width:760px;width:100%;max-height:86vh;display:flex;flex-direction:column}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.modal-head h2{font-size:20px}
.modal-head small{color:var(--dim);font-size:12px}
.results h2{font-size:clamp(26px,5vw,38px);margin-bottom:18px}
.results .bignums{margin-bottom:18px}
.beatlist{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;margin:14px 0;padding-right:4px}
.beatlist::-webkit-scrollbar{width:6px}
.beatlist::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px}
.brow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;border:1px solid var(--line);
  background:var(--panel2);cursor:pointer;transition:.15s;text-align:left}
.brow:hover{border-color:var(--line2)}
.brow.on{border-color:var(--acc);background:rgba(46,242,194,.08)}
.brow .dot{width:30px;height:30px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;font-size:12px;font-weight:700;color:#0a0910}
.brow .bn{flex:1;min-width:0}
.brow .bn b{display:block;font-family:var(--disp);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .bn span{font-size:11.5px;color:var(--dim)}
.brow .play{width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);display:grid;place-items:center;font-size:11px;color:var(--muted)}
.brow .play:hover{color:var(--acc);border-color:var(--acc)}
.keys{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:18px;font-size:13.5px;color:var(--muted)}
.keys kbd{margin-right:10px;min-width:64px;display:inline-block;text-align:center}
#resRec{margin-bottom:16px}
#resRec audio{width:100%;margin-bottom:10px}

.foot{max-width:1120px;margin:0 auto;padding:26px clamp(14px,4vw,40px) 40px;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:12px;color:var(--dim);border-top:1px solid var(--line);position:relative;z-index:2}

@media(max-width:560px){
  .top{flex-wrap:wrap;gap:10px;padding-bottom:10px}
  .nav{order:3;width:100%;margin-left:0;justify-content:space-between}
  .nav-btn{flex:1;text-align:center;padding:8px 6px}
  .top-right{margin-left:auto}
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px}
  .modes{grid-template-columns:1fr 1fr;gap:8px}
  .mode span{display:none}
  .mode em{margin-bottom:6px}
}
@media(max-width:640px){
  .startbar{left:12px;right:12px;transform:none;max-width:none}
  .startbar .btn.big{padding:13px 20px;font-size:14px}
  .grid-wrap{--rowh:clamp(46px,8.5vh,62px)}
  .game-top{gap:8px;padding:10px 12px}
  .g-beat b{font-size:11.5px;max-width:28vw}
  .g-beat span{display:none}
  .g-progress{width:min(190px,36vw)}
  .g-counter{font-size:15px}
  .hint{font-size:11px}
  .gcell{font-size:11.5px;letter-spacing:-.01em;padding:0 3px}
  .gcell.filler{font-size:10px}
  .g-beat b{max-width:26vw}
  .toggle small{padding-left:0}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}