/* Guitardo concert app — объединение двух прототипов:
   • LIST (.screen--list) — из guitardo_app.html (светлые карточки песен);
   • DETAIL (.screen--detail) — сцена из song3.html (фон + частицы + кнопка).
   Стили сцены живут внутри .screen--detail; container-type:size на ней
   даёт cqw-юниты от размера телефона (как в song3). */

:root{
  --note:#3BB0E2; --note-deep:#1E8AC8; --note-pale:#BfE6F7;
  --navy:#072449; --navy-soft:#13427A; --logo-blue:#11569A;
  --star:#F4C816; --star-deep:#E0A800; --gold:#F4C816; --gold-deep:#E0A800;
  --red:#FF5A4D; --red-hot:#FF3B30; --pink:#FF8A98; --cheek:#FF9CB0;
  --paper:#FFFFFF; --bg1:#F1FAFF; --bg2:#CFEBFB;
  --muted:#5E7C97; --good:#2FC68A; --lock:#FF8A3D; --line:#072449;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Nunito',system-ui,sans-serif;color:var(--navy);background:#bfe3f5;
  display:flex;justify-content:center;overflow:hidden}

.phone{position:relative;width:100%;max-width:430px;height:100dvh;height:100vh;overflow:hidden;
  background:
    radial-gradient(120% 60% at 50% -8%, #FFFFFF, transparent 60%),
    linear-gradient(180deg,var(--bg1) 0%, var(--bg2) 100%);}

/* ПК: телефон-рамка по центру с пропорциями ходовой модели (~390×844, 9:19.5),
   а не узкая полоса во всю высоту окна. */
@media (min-width:600px){
  body{align-items:center;background:#0b0b0e}
  .phone{width:auto;max-width:none;height:min(94dvh,900px);aspect-ratio:9 / 19.5;
    border-radius:40px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 11px #0e0e12,0 0 0 13px #26262c}
}

/* ---------- SCREENS / slide transition ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;
  transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .3s ease}
.screen--detail{transform:translateX(100%);opacity:0;pointer-events:none;
  container-type:size;background:var(--bgColor,#0b1a2b);overflow:hidden}
body.view-detail .screen--list{transform:translateX(-20%);opacity:0;pointer-events:none}
body.view-detail .screen--detail{transform:translateX(0);opacity:1;pointer-events:auto}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px 36px}
.scroll::-webkit-scrollbar{display:none}

/* ---------- LIST HEADER ---------- */
.l-head{padding:22px 18px 8px;text-align:center;position:relative}
.l-title{font-family:'Baloo 2';font-weight:800;font-size:30px;line-height:.98;margin-top:2px;color:var(--navy)}
.l-title b{color:var(--star);-webkit-text-stroke:2px var(--navy);text-shadow:0 3px 0 var(--star-deep)}
.l-sub{color:var(--muted);font-size:13px;font-weight:700;margin-top:4px}

/* ---------- SONG CARD ---------- */
.song{position:relative;display:flex;flex-direction:column;background:var(--paper);
  border:3px solid var(--line);border-radius:22px;padding:12px;margin-top:12px;
  box-shadow:0 5px 0 rgba(7,36,73,.14);transition:box-shadow .2s ease}
.song__row{display:flex;align-items:center;gap:12px;width:100%}
.song__main{flex:1;min-width:0;cursor:pointer}
.song__name{font-family:'Baloo 2';font-weight:700;font-size:16.5px;line-height:1.12;color:var(--navy);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song__meta{display:flex;align-items:center;gap:8px;margin-top:3px;color:var(--muted);font-size:12.5px;font-weight:700}
.song__count{display:inline-flex;align-items:center;gap:5px;font-family:'Baloo 2';font-weight:700;color:var(--navy)}
.song__count svg{width:14px;height:14px;fill:var(--red)}

.song--live{border-color:var(--star-deep);
  background:linear-gradient(180deg,#FFF7DC,#FFFFFF 65%);
  box-shadow:0 0 0 4px rgba(244,200,22,.35), 0 7px 0 rgba(224,168,0,.35)}
.badge-live{display:inline-flex;align-items:center;justify-content:center;font-family:'Baloo 2';font-weight:700;
  font-size:11px;line-height:1;color:var(--navy);background:var(--star);padding:4px 10px;border-radius:999px;
  border:2px solid var(--navy)}
/* крупный эквалайзер играющей песни в списке — как «зал» под кнопкой на
   детали; высоту столбиков гонит JS (drawSongEq), чтобы жил независимо от
   prefers-reduced-motion и выглядел как анализатор спектра винампа. */
.song__eq{display:inline-flex;align-items:flex-end;gap:3px;height:16px;margin-left:4px;flex-shrink:0}
.song__eq i{width:3.5px;height:4px;border-radius:3px;background:linear-gradient(180deg,var(--star),var(--red))}

.song--sung{opacity:.6}
.song--removed{opacity:.5;border-style:dashed;background:#f4f6f9}
.song--removed .song__name{text-decoration:line-through;color:var(--muted)}
.check{width:21px;height:21px;border-radius:50%;background:var(--good);border:2px solid var(--navy);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.check svg{width:11px;height:11px;stroke:#fff;stroke-width:3.4;fill:none}

.likebtn{flex-shrink:0;width:54px;height:54px;border-radius:18px;cursor:pointer;
  background:var(--paper);border:3px solid var(--navy);color:var(--navy);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  box-shadow:0 4px 0 rgba(7,36,73,.18);transition:transform .1s ease}
.likebtn svg{width:22px;height:22px;fill:var(--red);transition:transform .12s ease}
.likebtn small{font-family:'Baloo 2';font-weight:600;font-size:9px;color:var(--muted)}
.likebtn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(7,36,73,.18)}
.likebtn.pop svg{transform:scale(1.4)}
.arrow{flex-shrink:0;width:24px;display:flex;align-items:center;justify-content:center;color:var(--note-deep)}
.arrow svg{width:18px;height:18px;stroke:currentColor;stroke-width:3;fill:none}
.l-foot{text-align:center;color:var(--muted);font-size:11.5px;font-weight:700;opacity:.8;margin-top:20px;line-height:1.5}

/* ---------- ADMIN (режим ведущего) ---------- */
.adm-toggle{position:absolute;top:18px;right:14px;font-family:'Nunito';font-weight:800;font-size:12px;
  padding:6px 12px;border-radius:999px;border:2px solid var(--navy);background:var(--paper);color:var(--navy);cursor:pointer;z-index:6}
.adm-toggle.on{background:var(--navy);color:#fff}
.adminrow{display:flex;align-items:center;gap:6px;width:100%;margin-top:10px;padding-top:10px;
  border-top:2px dashed rgba(7,36,73,.18);flex-wrap:wrap}
.adminrow button{font-family:'Nunito';font-weight:800;font-size:12.5px;border:2px solid var(--navy);
  background:#fff;color:var(--navy);border-radius:11px;padding:7px 9px;cursor:pointer;line-height:1}
.adminrow .mv{width:36px;text-align:center}
.adminrow .adm-go{flex:1;background:var(--good);color:#fff}
.adminrow .adm-stop{flex:1;background:var(--star);color:var(--navy)}
.adminrow .adm-del{color:var(--red);border-color:var(--red)}
.adminrow .adm-restore{flex:1;background:var(--note);color:#fff;border-color:var(--navy)}
.adminrow .adm-edit{color:var(--navy);width:36px;text-align:center}
/* инлайн-форма правки текста + форма добавления песни */
.adm-editform,.adm-addform{display:flex;flex-direction:column;gap:7px;width:100%;margin-top:8px;
  padding:10px;border:2px dashed rgba(7,36,73,.25);border-radius:12px;background:rgba(7,36,73,.03)}
.adm-editform input,.adm-addform input{width:100%;font-family:'Nunito';font-weight:700;font-size:14px;
  border:2px solid var(--navy);border-radius:10px;padding:8px 10px;color:var(--navy);background:#fff}
.adm-formbtns{display:flex;gap:7px}
.adm-formbtns button{flex:1;font-family:'Nunito';font-weight:800;font-size:13px;border:2px solid var(--navy);
  border-radius:11px;padding:8px;cursor:pointer}
.adm-formbtns .adm-go{background:var(--good);color:#fff;border-color:var(--good)}
.adm-formbtns .adm-cancel{background:#fff;color:var(--navy)}
.adm-add{display:block;width:100%;margin:16px auto 0;max-width:260px;font-family:'Nunito';font-weight:800;
  font-size:13px;border:2px solid var(--navy);background:var(--navy);color:#fff;border-radius:12px;padding:10px;cursor:pointer}
.adm-addform{max-width:260px;margin:8px auto 0}
.adm-reset{display:block;width:100%;margin:12px auto 0;max-width:260px;font-family:'Nunito';font-weight:800;
  font-size:13px;border:2px solid var(--red);background:#fff;color:var(--red);border-radius:12px;padding:10px;cursor:pointer}
.adm-reset--ov{border-color:var(--muted);color:var(--muted)}

/* ============ DETAIL — сцена (song3) ============ */
.back{position:absolute;top:calc(12px + env(safe-area-inset-top));left:12px;z-index:9;
  width:44px;height:44px;border-radius:15px;border:3px solid var(--navy);background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--navy);
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 0 rgba(7,36,73,.18)}
.back:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(7,36,73,.18)}
.back svg{width:20px;height:20px;stroke:currentColor;stroke-width:3.2;fill:none}

.bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
#snow{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#fx{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}

.hud{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;pointer-events:none}
/* название песни — ниже кнопки «назад» (кнопка: top 12px + safe-area, высота 44px),
   чтобы она его не перекрывала. */
.title{margin-top:calc(64px + env(safe-area-inset-top));text-align:center;padding:0 14px;
  font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;font-size:clamp(21px,6.3cqw,31px);
  line-height:1.08;color:var(--gold);
  text-shadow:2px 0 0 #072449,-2px 0 0 #072449,0 2px 0 #072449,0 -2px 0 #072449,
    1.5px 1.5px 0 #072449,-1.5px 1.5px 0 #072449,1.5px -1.5px 0 #072449,-1.5px -1.5px 0 #072449,
    0 5px 12px rgba(0,0,0,.55)}
.chant{margin-top:14px;display:flex;justify-content:center;padding:0 14px;width:100%}
.bubble{max-width:88%;text-align:center;color:var(--navy);
  font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;
  font-size:clamp(19px,6cqw,29px);line-height:1.12;padding:16px 34px;border:3.5px solid var(--navy);
  background:rgba(231,235,241,.82);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  border-radius:50% / 48%;box-shadow:0 5px 0 rgba(7,36,73,.20),0 12px 22px rgba(0,0,0,.26)}
.bubble .ln{display:block}
.chant.pulse .bubble{animation:chant-pulse .5s ease}
@keyframes chant-pulse{0%{transform:scale(1)}28%{transform:scale(1.06) rotate(-.6deg)}100%{transform:scale(1) rotate(0)}}

.btnwrap{position:absolute;left:50%;bottom:calc(8% + env(safe-area-inset-bottom));z-index:5;
  transform:translateX(-50%);width:min(40cqw,170px);aspect-ratio:1}
/* эквалайзер «зала» под кнопкой — оживает от тапов (через heat в app.js) */
.crowd{position:absolute;left:50%;bottom:calc(3% + env(safe-area-inset-bottom));transform:translateX(-50%);
  display:flex;align-items:flex-end;justify-content:center;gap:4px;height:26px;z-index:5;
  pointer-events:none;opacity:.4;transition:opacity .25s ease}
.crowd i{width:5px;height:4px;border-radius:3px;background:linear-gradient(180deg,var(--star),var(--red));
  transition:height .08s ease}
.ripple{position:absolute;inset:0;border-radius:50%;border:3px solid var(--red);opacity:0;animation:ripple 2.2s ease-out infinite}
.ripple.r2{animation-delay:1.1s}
.btnwrap.busy .ripple{opacity:0;animation-play-state:paused}
@keyframes ripple{0%{transform:scale(.7);opacity:.4}100%{transform:scale(1.4);opacity:0}}
.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none;z-index:1}
.ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.ring .track{stroke:rgba(7,36,73,.14)}
.ring .prog{stroke:var(--good);transition:stroke-dashoffset .25s ease,stroke .3s ease}
.btn{position:absolute;top:50%;left:50%;width:86%;height:86%;transform:translate(-50%,-50%);border-radius:50%;
  border:4px solid var(--navy);cursor:pointer;user-select:none;z-index:2;
  background:radial-gradient(circle at 50% 34%,rgba(255,116,104,.78),rgba(255,90,77,.78) 55%,rgba(255,59,48,.82));
  color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:0 7px 16px rgba(255,59,48,.5),inset 0 -6px 14px rgba(0,0,0,.18);
  animation:invite 2.2s ease-in-out infinite;transition:transform .08s ease,box-shadow .15s ease}
.btnwrap.busy .btn{animation-play-state:paused}
.btn:active{transform:translate(-50%,-50%) scale(.93)}
.btn.hot{box-shadow:0 0 44px 8px rgba(255,90,77,.6),0 7px 18px rgba(255,59,48,.55),inset 0 -6px 14px rgba(0,0,0,.18)}
@keyframes invite{0%,100%{box-shadow:0 7px 16px rgba(255,59,48,.5),inset 0 -6px 14px rgba(0,0,0,.18)}
  50%{box-shadow:0 0 0 7px rgba(255,90,77,.18),0 10px 22px rgba(255,59,48,.6),inset 0 -6px 14px rgba(0,0,0,.18)}}
.btn svg{width:30%;fill:#fff}
.btn span{font-family:'Baloo 2';font-weight:700;font-size:clamp(12px,3.4cqw,14px)}
.cnt{position:absolute;top:-4px;right:-6px;background:#fff;border:3px solid var(--navy);border-radius:99px;
  font-family:'Baloo 2';font-weight:800;font-size:13px;padding:2px 9px;color:var(--navy);z-index:4;min-width:30px;text-align:center}

.cooldown{position:absolute;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:8;
  background:#fff;border:3px solid var(--lock);border-radius:18px;padding:11px 13px;display:none;
  align-items:center;gap:11px;box-shadow:0 5px 0 rgba(255,138,61,.35)}
.cooldown.show{display:flex}
.cooldown .ic{width:40px;height:40px;border-radius:12px;background:#FFF1E4;border:2px solid var(--lock);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.cooldown .tx{font-size:13px;font-weight:700;line-height:1.3;color:var(--navy)}
.cooldown .tx b{font-family:'Baloo 2';display:block;font-size:14px}
.cooldown #tm{font-family:'Baloo 2';color:var(--lock)}

@media (prefers-reduced-motion:reduce){.bg,.ripple,.btn{animation:none!important}.crowd i{transition:none}.screen{transition:none}}

/* ---------- ADMIN: оверлей логина ведущего ---------- */
.admlogin{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(7,36,73,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.admlogin__card{width:100%;max-width:320px;background:var(--paper);border:3px solid var(--navy);
  border-radius:22px;padding:20px;box-shadow:0 8px 0 rgba(7,36,73,.18);text-align:center}
.admlogin__card h2{font-family:'Baloo 2';font-weight:800;font-size:22px;color:var(--navy)}
.admlogin__card p{color:var(--muted);font-size:13px;font-weight:700;margin:8px 0 14px;line-height:1.4}
.admlogin__card input{width:100%;font-family:'Nunito';font-weight:700;font-size:15px;
  border:2px solid var(--navy);border-radius:12px;padding:11px 13px;color:var(--navy);outline:none}
.admlogin__card button{width:100%;margin-top:12px;font-family:'Baloo 2';font-weight:800;font-size:16px;
  border:3px solid var(--navy);background:var(--good);color:#fff;border-radius:14px;padding:12px;cursor:pointer;
  box-shadow:0 4px 0 rgba(7,36,73,.2)}
.admlogin__card button:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(7,36,73,.2)}
.admlogin__err{color:var(--red);font-size:13px;font-weight:800;margin-top:10px;min-height:16px}