/* Абсурдия — тема «Сюр-поп» (основная): игривая и смелая.
   Наклейки, толстые обводки, жёсткие цветные тени, сочные плашки, точечный фон и цветное сияние.
   Включается классом theme-pop на <html>. Селекторы обёрнуты в :where(.theme-pop), чтобы сила правил осталась как в основе. */
html.theme-pop {
  --ink-0: #130b25;
  --ink-1: #1c1236;
  --ink-2: #261a48;
  --ink-3: #33245e;
  --line: #3f2f73;
  --line-2: #5a46a0;
  --moon: #fff6e6;
  --mist: #d4c9f2;
  --dusk: #a396d2;
  --gold: #ffd043;
  --gold-2: #ffe07a;
  --gold-deep: #e0a91a;
  --rose: #ff5fa8;
  --mint: #3ff0c8;
  --ember: #ff5a3c;
  --leaf: #8df07a;
  --violet: #9a7bff;
  --hard: #07040f;
  --shadow: 8px 8px 0 rgba(7, 4, 15, .9);
}

/* ---------- фон: сияние и точки ---------- */
:where(.theme-pop) body {
  background:
    radial-gradient(700px 520px at 88% 2%, rgba(255, 95, 168, .24), transparent 60%),
    radial-gradient(640px 520px at 2% 30%, rgba(63, 240, 200, .13), transparent 60%),
    radial-gradient(900px 640px at 60% 105%, rgba(154, 123, 255, .26), transparent 60%),
    var(--ink-0);
}
:where(.theme-pop) body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255, 246, 230, .08) 1.3px, transparent 1.5px); background-size: 22px 22px;
}
:where(.theme-pop) ::selection { background: var(--rose); color: var(--hard); }
:where(.theme-pop) * { scrollbar-width: thin; scrollbar-color: var(--violet) transparent; }
:where(.theme-pop) ::-webkit-scrollbar { width: 11px; height: 11px; }
:where(.theme-pop) ::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 99px; border: 3px solid var(--ink-0); }
:where(.theme-pop) #view > .wrap { animation: pop-in .35s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- типографика ---------- */
:where(.theme-pop) .h1 { font-weight: 800; letter-spacing: -.035em; }
:where(.theme-pop) .hero-copy .h1 { line-height: 1.2; } /* плашки маркера не налезают на соседние строки */
:where(.theme-pop) .hero-copy .h1 em {
  color: var(--hard); background: var(--gold); padding: 0 .14em; border-radius: 12px; display: inline;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; box-shadow: 5px 5px 0 var(--rose);
}
:where(.theme-pop) .hero-copy .eyebrow, :where(.theme-pop) .comm-copy .comm-sub {
  align-self: flex-start; display: inline-block; padding: 6px 14px; border-radius: 99px; color: var(--hard); background: var(--mint);
  border: 2px solid var(--hard); box-shadow: 3px 3px 0 var(--hard); transform: rotate(-2deg);
}
:where(.theme-pop) .comm-copy .comm-sub { background: var(--rose); font-family: var(--f-ui); font-style: normal; font-weight: 800; }
:where(.theme-pop) .sec-head .h2 { text-shadow: 3px 3px 0 var(--hard); }
:where(.theme-pop) .lbl { color: var(--gold); }

/* ---------- шапка ---------- */
:where(.theme-pop) .top { background: rgba(19, 11, 37, .9); border-bottom: 2px solid var(--hard); box-shadow: 0 4px 0 rgba(7, 4, 15, .55); }
:where(.theme-pop) .wordmark { text-shadow: 3px 3px 0 var(--hard); }
:where(.theme-pop) .brand-mark { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
:where(.theme-pop) .brand:hover .brand-mark { transform: rotate(-14deg) scale(1.1); }
:where(.theme-pop) .nav a { border-radius: 99px; border: 2px solid transparent; transition: transform .15s, background .15s; }
:where(.theme-pop) .nav a:hover { background: var(--ink-2); border-color: var(--hard); }
:where(.theme-pop) .nav a[aria-current="page"] { color: var(--hard); background: var(--gold); border-color: var(--hard); box-shadow: 3px 3px 0 var(--rose); transform: rotate(-1.5deg); }
:where(.theme-pop) .nav a[aria-current="page"] svg { opacity: 1; }
:where(.theme-pop) .gems { border: 2px solid var(--hard); background: var(--ink-3); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .iconbtn, :where(.theme-pop) .userbtn { border: 2px solid var(--hard); background: var(--ink-3); box-shadow: 2px 2px 0 var(--hard); transition: transform .12s, box-shadow .12s; }
:where(.theme-pop) .iconbtn:hover, :where(.theme-pop) .userbtn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--mint); color: var(--moon); }
:where(.theme-pop) .nbadge { background: var(--rose); color: var(--hard); box-shadow: 0 0 0 2px var(--hard); }
:where(.theme-pop) .menu, :where(.theme-pop) .bell-pop, :where(.theme-pop) .more-menu, :where(.theme-pop) .sdrop { border: 2px solid var(--hard); border-radius: 18px; background: var(--ink-2); box-shadow: 6px 6px 0 var(--violet); }

/* ---------- кнопки: наклейки с тенью ---------- */
:where(.theme-pop) .btn {
  border: 2px solid var(--hard); border-radius: 14px; background: var(--ink-3); font-weight: 800;
  box-shadow: 3px 3px 0 var(--hard); transition: transform .12s, box-shadow .12s, background .12s;
}
:where(.theme-pop) .btn:hover { transform: translate(-2px, -2px); border-color: var(--hard); background: #3d2c70; box-shadow: 5px 5px 0 var(--hard); }
:where(.theme-pop) .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--hard); }
:where(.theme-pop) .btn:disabled:hover { transform: none; box-shadow: 3px 3px 0 var(--hard); }
:where(.theme-pop) .btn.gold { color: var(--hard); background: var(--gold); border-color: var(--hard); box-shadow: 4px 4px 0 var(--rose); }
:where(.theme-pop) .btn.gold:hover { background: var(--gold-2); box-shadow: 6px 6px 0 var(--rose); }
:where(.theme-pop) .btn.gold:active { box-shadow: 1px 1px 0 var(--rose); }
:where(.theme-pop) .btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
:where(.theme-pop) .btn.ghost:hover { transform: none; box-shadow: none; background: rgba(255, 255, 255, .07); border-color: transparent; }
:where(.theme-pop) .btn.danger { background: rgba(255, 90, 60, .16); border-color: var(--hard); color: #ff8a73; }
:where(.theme-pop) .btn.force[aria-pressed="true"] { background: var(--mint); color: var(--hard); box-shadow: 3px 3px 0 var(--hard); }

/* ---------- формы и панели ---------- */
:where(.theme-pop) input[type="text"], :where(.theme-pop) input[type="email"], :where(.theme-pop) input[type="password"], :where(.theme-pop) input[type="number"],
:where(.theme-pop) input[type="search"], :where(.theme-pop) input[type="url"], :where(.theme-pop) textarea, :where(.theme-pop) select { border: 2px solid var(--line-2); border-radius: 14px; background: #0f0920; }
:where(.theme-pop) input:focus, :where(.theme-pop) textarea:focus, :where(.theme-pop) select:focus { border-color: var(--mint); box-shadow: 4px 4px 0 var(--mint); }
:where(.theme-pop) input::placeholder, :where(.theme-pop) textarea::placeholder { color: #a396d2; opacity: 1; }
:where(.theme-pop) .panel, :where(.theme-pop) .ai-fill { border: 2px solid var(--hard); border-radius: 22px; box-shadow: 6px 6px 0 var(--hard); }
:where(.theme-pop) .panel { background: var(--ink-1); }
:where(.theme-pop) .panel > .h3 .ic { color: var(--rose); }
:where(.theme-pop) .seg { border: 2px solid var(--hard); border-radius: 16px; background: #0f0920; }
:where(.theme-pop) .seg button { border-radius: 11px; font-weight: 800; }
:where(.theme-pop) .seg button[aria-pressed="true"] { background: var(--gold); color: var(--hard); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .tier-opt, :where(.theme-pop) .chal, :where(.theme-pop) .stepper { border: 2px solid var(--line-2); border-radius: 16px; background: #0f0920; transition: transform .12s, box-shadow .12s; }
:where(.theme-pop) .tier-opt:hover, :where(.theme-pop) .chal:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--hard); }
:where(.theme-pop) .tier-opt[aria-pressed="true"], :where(.theme-pop) .chal[aria-pressed="true"] { border-color: var(--hard); background: var(--ink-3); box-shadow: 4px 4px 0 var(--gold); }
:where(.theme-pop) .chipf { border: 2px solid var(--line-2); font-weight: 700; transition: transform .12s; }
:where(.theme-pop) .chipf:hover { transform: rotate(-2deg); }
:where(.theme-pop) .chipf[aria-pressed="true"] { background: var(--mint); color: var(--hard); border-color: var(--hard); box-shadow: 2px 2px 0 var(--hard); transform: rotate(-2deg); }
:where(.theme-pop) .empty { border: 2px dashed var(--line-2); border-radius: 22px; }
:where(.theme-pop) .note { border-width: 2px; border-radius: 16px; }

/* ---------- главная ---------- */
:where(.theme-pop) .stage { border: 3px solid var(--hard); border-radius: 30px; box-shadow: 10px 10px 0 var(--violet); transform: rotate(1.5deg); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
:where(.theme-pop) .stage:hover { transform: rotate(0); }
:where(.theme-pop) .joinbox { border: 2px solid var(--hard); border-radius: 20px; background: var(--ink-2); box-shadow: 5px 5px 0 var(--hard); }
:where(.theme-pop) .step { border: 2px solid var(--hard); border-radius: 22px; background: var(--ink-1); box-shadow: 5px 5px 0 var(--hard); }
:where(.theme-pop) .step::before { border: 2px solid var(--hard); color: var(--hard); background: var(--rose); transform: rotate(-8deg); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .step:nth-child(2)::before { background: var(--gold); transform: rotate(6deg); }
:where(.theme-pop) .step:nth-child(3)::before { background: var(--mint); transform: rotate(-4deg); }

/* ---------- карточки-наклейки ---------- */
:where(.theme-pop) .card {
  --pop: var(--rose); border: 2px solid var(--hard); border-radius: 24px; background: var(--ink-1);
  box-shadow: 6px 6px 0 var(--hard); transition: transform .18s cubic-bezier(.3, 1.4, .5, 1), box-shadow .18s;
}
:where(.theme-pop) .grid > .card:nth-child(3n+2), :where(.theme-pop) .rail-card:nth-child(3n+2) .card { --pop: var(--gold); }
:where(.theme-pop) .grid > .card:nth-child(3n), :where(.theme-pop) .rail-card:nth-child(3n) .card { --pop: var(--mint); }
:where(.theme-pop) .card:hover { transform: translate(-3px, -3px) rotate(-.7deg); box-shadow: 9px 9px 0 var(--pop); }
:where(.theme-pop) .card .cover { border-radius: 22px 22px 0 0; border-bottom: 2px solid var(--hard); }
:where(.theme-pop) .card-body { border-top: 0; }
:where(.theme-pop) .card-body::before, :where(.theme-pop) .card-body::after { display: none; }
:where(.theme-pop) .card h3 { font-weight: 800; }
:where(.theme-pop) .card .badge { left: 14px; top: 14px; border: 2px solid var(--hard); background: var(--gold); color: var(--hard); font-weight: 800; transform: rotate(-4deg); box-shadow: 2px 2px 0 var(--hard); backdrop-filter: none; }
:where(.theme-pop) .card .badge.official { background: var(--mint); color: var(--hard); border-color: var(--hard); }
:where(.theme-pop) .tag { background: transparent; border: 2px solid var(--line-2); font-weight: 700; }
:where(.theme-pop) .save, :where(.theme-pop) .fnow, :where(.theme-pop) .tile, :where(.theme-pop) .ach, :where(.theme-pop) .ucard, :where(.theme-pop) .pack, :where(.theme-pop) .board, :where(.theme-pop) .frow, :where(.theme-pop) .dlg-list {
  border: 2px solid var(--hard); border-radius: 20px; box-shadow: 4px 4px 0 var(--hard);
}
:where(.theme-pop) .save:hover, :where(.theme-pop) .ucard:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--violet); transition: transform .15s, box-shadow .15s; }
:where(.theme-pop) .ach.got { background: var(--ink-3); box-shadow: 4px 4px 0 var(--gold); }
:where(.theme-pop) .pill { border-width: 2px; }
:where(.theme-pop) .pack .bonus { border: 2px solid var(--hard); transform: rotate(6deg); box-shadow: 2px 2px 0 var(--hard); }

/* ---------- окна ---------- */
:where(.theme-pop) .modal-back { background: rgba(10, 5, 22, .72); }
:where(.theme-pop) .modal { border: 3px solid var(--hard); border-radius: 28px; box-shadow: 10px 10px 0 var(--violet); animation: pop-pop .3s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes pop-pop { from { opacity: 0; transform: scale(.9) rotate(-1deg); } }
:where(.theme-pop) .gift { border: 2px solid var(--hard); border-radius: 16px; background: var(--gold); color: var(--hard); font-weight: 700; box-shadow: 3px 3px 0 var(--hard); }
:where(.theme-pop) .toast { background: var(--gold); color: var(--hard); border: 2px solid var(--hard); border-radius: 16px; box-shadow: 4px 4px 0 var(--rose); font-weight: 700; animation: pop-toast .3s cubic-bezier(.3, 1.5, .5, 1) both; }
:where(.theme-pop) .toast.bad { background: var(--ember); color: #fff; border-color: var(--hard); box-shadow: 4px 4px 0 var(--hard); }
@keyframes pop-toast { from { opacity: 0; transform: translate(-50%, 14px) rotate(-2deg); } }
:where(.theme-pop) .ach-pop { border: 2px solid var(--hard); background: var(--ink-2); box-shadow: 5px 5px 0 var(--gold); }

/* ---------- подвал ---------- */
:where(.theme-pop) .footer { border-top: 2px solid var(--hard); background: rgba(7, 4, 15, .45); }

/* ---------- игра ---------- */
:where(.theme-pop) .sheet, :where(.theme-pop) .scene { background: var(--ink-1); border-color: var(--hard); border-width: 2px; }
:where(.theme-pop) .story-head { background: var(--ink-0); border-bottom: 2px solid var(--hard); }
:where(.theme-pop) .turn { border: 2px solid var(--hard); background: var(--ink-3); color: var(--gold); }
:where(.theme-pop) .narr.first::first-letter { color: var(--hard); background: var(--gold); padding: 6px 12px 2px; margin: 4px 14px 0 0; border-radius: 14px; border: 2px solid var(--hard); box-shadow: 4px 4px 0 var(--rose); }
:where(.theme-pop) .you { background: var(--ink-3); border: 2px solid var(--hard); border-radius: 20px 20px 6px 20px; box-shadow: 4px 4px 0 var(--hard); }
:where(.theme-pop) .you small { color: var(--gold); }
:where(.theme-pop) .you.them { border-radius: 20px 20px 20px 6px; box-shadow: 4px 4px 0 var(--violet); }
:where(.theme-pop) .chip { border-width: 2px; border-radius: 10px; font-weight: 700; }
:where(.theme-pop) .idea { border: 2px solid var(--hard); border-radius: 16px; background: var(--ink-2); box-shadow: 3px 3px 0 var(--hard); transition: transform .12s, box-shadow .12s; }
:where(.theme-pop) .idea:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--k); border-color: var(--hard); }
:where(.theme-pop) .idea .i { border: 2px solid var(--hard); background: var(--k); }
:where(.theme-pop) .tray { border: 2px solid var(--hard); border-radius: 22px; box-shadow: 5px 5px 0 var(--hard); }
:where(.theme-pop) .frame { border-radius: 16px; padding: 8px; background: var(--gold); border: 3px solid var(--hard); box-shadow: 6px 6px 0 var(--rose); }
:where(.theme-pop) .canvas { border-radius: 9px; border: 2px solid var(--hard); }
:where(.theme-pop) .plaque {
  font: 800 var(--fs-15) var(--f-ui); color: var(--hard); background: var(--mint); border: 2px solid var(--hard);
  border-radius: 99px; transform: rotate(-1.5deg); box-shadow: 3px 3px 0 var(--hard); margin-top: 2px;
}
:where(.theme-pop) .hex { clip-path: none; border-radius: 12px; border: 2px solid var(--hard); background: var(--violet); color: var(--hard); width: 40px; height: 40px; }
:where(.theme-pop) .hex.boosted { background: var(--gold); color: var(--hard); }
:where(.theme-pop) .slot, :where(.theme-pop) .cell { border-width: 2px; border-radius: 14px; }
:where(.theme-pop) .slot.filled, :where(.theme-pop) .cell.filled { border-color: var(--hard); background: var(--ink-3); box-shadow: 3px 3px 0 var(--hard); }
:where(.theme-pop) .slot.filled:hover, :where(.theme-pop) .cell.filled:hover { border-color: var(--hard); box-shadow: 3px 3px 0 var(--gold); }
:where(.theme-pop) .portrait { border: 2px solid var(--hard); border-radius: 50%; background: var(--rose); color: var(--hard); box-shadow: 3px 3px 0 var(--hard); }
:where(.theme-pop) .hpbar { border: 2px solid var(--hard); height: 16px; border-radius: 99px; }
:where(.theme-pop) .hpbar i { border-radius: 99px; }
:where(.theme-pop) .coins { border: 2px solid var(--line-2); border-radius: 14px; }
:where(.theme-pop) .composer { background: var(--ink-1); border-top: 2px solid var(--hard); }
:where(.theme-pop) .composer textarea { border-radius: 16px; }

/* ---------- сообщество и профиль ---------- */
:where(.theme-pop) .comm-hero { border: 3px solid var(--hard); border-radius: 30px; box-shadow: 8px 8px 0 var(--violet); }
:where(.theme-pop) .comm-link { border: 2px solid var(--hard); border-radius: 20px; box-shadow: 4px 4px 0 var(--hard); }
:where(.theme-pop) .comm-link:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 6px 6px 0 var(--hard); }
:where(.theme-pop) .profile { border: 3px solid var(--hard); border-radius: 28px; box-shadow: 8px 8px 0 var(--hard); }
:where(.theme-pop) .uav { border: 2px solid var(--hard); background: var(--gold); color: var(--hard); }
:where(.theme-pop) .chat { border: 2px solid var(--hard); border-radius: 24px; box-shadow: 6px 6px 0 var(--hard); }
:where(.theme-pop) .bubble { border: 2px solid var(--hard); box-shadow: 3px 3px 0 var(--hard); }
:where(.theme-pop) .msg.mine .bubble { background: var(--gold); color: var(--hard); border-color: var(--hard); }
:where(.theme-pop) .msg.mine .mt { color: rgba(7, 4, 15, .6); }
:where(.theme-pop) .sbadge { background: var(--gold); color: var(--hard); border: 2px solid var(--hard); transform: rotate(-2deg); }
:where(.theme-pop) .board li.me { background: rgba(255, 208, 67, .14); }
:where(.theme-pop) .verify-bar { background: var(--gold); color: var(--hard); border-bottom: 2px solid var(--hard); }

/* ---------- подсказка в меню профиля: наклейка «Новинка!» и надпись от руки ---------- */
:where(.theme-pop) .th-pop { font: 700 28px/.95 'Caveat', 'Comic Sans MS', cursive; color: var(--gold); text-shadow: 2px 2px 0 var(--hard); transform: rotate(-4deg); gap: 9px; }
:where(.theme-pop) .th-pop b { font: 800 var(--fs-12)/1.2 var(--f-display); letter-spacing: .06em; text-transform: uppercase; text-shadow: none; color: var(--hard); background: var(--rose); border: 2px solid var(--hard); border-radius: 99px; padding: 4px 11px; box-shadow: 3px 3px 0 var(--hard); transform: rotate(-5deg); }
:where(.theme-pop) .th-arrow path { stroke: var(--mint); stroke-width: 3.6; filter: drop-shadow(2px 2px 0 var(--hard)); }
:where(.theme-pop) .new-tag { border: 2px solid var(--hard); box-shadow: 2px 2px 0 var(--hard); transform: rotate(-3deg); }
:where(.theme-pop) .theme-card { border: 2px solid var(--hard); border-radius: 22px; background: var(--ink-1); box-shadow: 5px 5px 0 var(--hard); }
:where(.theme-pop) .theme-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--hard); border-color: var(--hard); }
:where(.theme-pop) .theme-card[aria-checked="true"] { border-color: var(--hard); box-shadow: 6px 6px 0 var(--gold); }
:where(.theme-pop) .tcard-on { border: 2px solid var(--hard); transform: rotate(4deg); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .theme-card[aria-checked="true"] .tcard-on { transform: rotate(4deg); }
:where(.theme-pop) .promo-tag { border: 1.5px solid var(--hard); box-shadow: 1px 1px 0 var(--hard); transform: rotate(-3deg); }
@media (max-width: 600px) { :where(.theme-pop) .th-pop { font-size: 23px; transform: none; } }

/* ---------- редактор: ползунки, числа, публикация, рисование ИИ ---------- */
:where(.theme-pop) .scale { --thumb: 40px; }
:where(.theme-pop) .scale-val { color: var(--gold); text-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .scale-rail { height: 16px; background: #0f0920; box-shadow: none; border: 2.5px solid var(--hard); }
:where(.theme-pop) .scale-dot { width: 10px; height: 10px; background: var(--ink-3); box-shadow: 0 0 0 2px var(--hard); }
:where(.theme-pop) .scale-dot.on { background: var(--moon); }
:where(.theme-pop) .scale-thumb { font-size: 20px; background: var(--gold); border: 2.5px solid var(--hard); box-shadow: 3px 3px 0 var(--hard); }
:where(.theme-pop) .scale-track:active .scale-thumb { transform: rotate(-10deg) scale(1.12); }
:where(.theme-pop) .scale-track:has(input:focus-visible) .scale-thumb { outline: 3px solid var(--mint); outline-offset: 2px; }
:where(.theme-pop) .scale-tone[data-i="0"] .scale-thumb { background: #8fb2ff; }
:where(.theme-pop) .scale-tone[data-i="1"] .scale-thumb { background: var(--mint); }
:where(.theme-pop) .scale-tone[data-i="3"] .scale-thumb { background: var(--rose); }
:where(.theme-pop) .scale-tone[data-i="4"] .scale-thumb { background: var(--violet); }
:where(.theme-pop) .scale-leth[data-i="0"] .scale-thumb { background: var(--mint); }
:where(.theme-pop) .scale-leth[data-i="2"] .scale-thumb { background: #ff8a5c; }
:where(.theme-pop) .scale-leth[data-i="3"] .scale-thumb { background: #ff4f6d; }
:where(.theme-pop) .scale-names button { font-weight: 800; }
:where(.theme-pop) .scale-names button[aria-pressed="true"] em { color: var(--hard); background: var(--gold); border: 2px solid var(--hard); border-radius: 99px; padding: 0 8px; box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .scale-note { border: 2px solid var(--hard); border-radius: 16px; background: var(--ink-2); color: var(--moon); box-shadow: 4px 4px 0 var(--hard); }

:where(.theme-pop) .num { border: 2px solid var(--hard); border-radius: 14px; background: #0f0920; box-shadow: 3px 3px 0 var(--hard); }
:where(.theme-pop) .num:focus-within { border-color: var(--hard); box-shadow: 3px 3px 0 var(--mint); }
:where(.theme-pop) .num-b { background: var(--ink-3); font-weight: 800; }
:where(.theme-pop) .num-b:first-child { border-right: 2px solid var(--hard); }
:where(.theme-pop) .num-b:last-child { border-left: 2px solid var(--hard); }
:where(.theme-pop) .num-b:first-child:hover { background: var(--rose); color: var(--hard); }
:where(.theme-pop) .num-b:last-child:hover { background: var(--mint); color: var(--hard); }

:where(.theme-pop) .pub-card { border: 2.5px dashed var(--line-2); border-radius: 18px; }
:where(.theme-pop) .pub-card:hover { border-color: var(--mint); }
:where(.theme-pop) .pub-card.on { border: 2.5px solid var(--hard); background: var(--mint); box-shadow: 5px 5px 0 var(--hard); }
:where(.theme-pop) .pub-card.on .pub-txt b, :where(.theme-pop) .pub-card.on .pub-txt small { color: var(--hard); }
:where(.theme-pop) .pub-card .sw { background: #0f0920; box-shadow: inset 0 0 0 2px var(--hard); }
:where(.theme-pop) .pub-card .sw::after { background: var(--moon); box-shadow: 0 0 0 2px var(--hard); }
:where(.theme-pop) .pub-card.on .sw { background: var(--gold); box-shadow: inset 0 0 0 2px var(--hard); }
:where(.theme-pop) .pub-card.on .sw::after { background: var(--hard); box-shadow: none; }
:where(.theme-pop) input[type="checkbox"]:not(.sw-in):not(.pub-card input) { background: #0f0920; border: 2px solid var(--hard); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) input[type="checkbox"]:not(.sw-in):not(.pub-card input)::after { background: var(--moon); box-shadow: 0 0 0 1.5px var(--hard); }
:where(.theme-pop) input[type="checkbox"]:not(.sw-in):not(.pub-card input):checked { background: var(--mint); border-color: var(--hard); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) input[type="checkbox"]:not(.sw-in):not(.pub-card input):checked::after { background: var(--hard); box-shadow: none; }
:where(.theme-pop) .chk-grid .check-row { border: 2px solid var(--hard); border-radius: 12px; background: #0f0920; box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .chk-grid .check-row:has(input:checked) { border-color: var(--hard); background: var(--ink-3); box-shadow: 2px 2px 0 var(--mint); }

:where(.theme-pop) .picker-ai { border: 2px dashed var(--line-2); border-radius: 16px; background: rgba(63, 240, 200, .05); }
:where(.theme-pop) .picker-prev { border: 2px solid var(--hard); border-radius: 14px; box-shadow: 4px 4px 0 var(--hard); }
:where(.theme-pop) .picker.is-portrait .picker-prev, :where(.theme-pop) .picker.is-round .picker-prev { border-radius: 50%; }

/* ---------- ободок аватарок: наклейка — чёрный контур, цветное кольцо, жёсткая тень ---------- */
:where(.theme-pop) .uav { --ring: var(--gold); box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px var(--hard); }
:where(.theme-pop) .uav.big { box-shadow: 0 0 0 2.5px var(--ring), 0 0 0 4.5px var(--hard), 3px 3px 0 4.5px var(--hard); }
:where(.theme-pop) .menu .who .uav { --ring: var(--rose); }
:where(.theme-pop) .userbtn { box-shadow: 0 0 0 2.5px var(--rose), 0 0 0 4.5px var(--hard), 3px 3px 0 4.5px var(--hard); }
:where(.theme-pop) .userbtn:hover { box-shadow: 0 0 0 2.5px var(--mint), 0 0 0 4.5px var(--hard), 4px 4px 0 4.5px var(--hard); }
:where(.theme-pop) .profile .uav.huge { --ring: var(--acc, var(--gold)); background: var(--acc, var(--gold)); color: var(--hard); border: 3px solid var(--hard); box-shadow: 0 0 0 6px var(--ring), 0 0 0 9px var(--hard), 7px 7px 0 9px var(--hard); }
:where(.theme-pop) .board li .uav { --ring: var(--violet); box-shadow: 0 0 0 2px var(--ring), 0 0 0 3.5px var(--hard); }
:where(.theme-pop) .board li.p1 .uav { --ring: #ffd043; }
:where(.theme-pop) .board li.p2 .uav { --ring: #d6def0; }
:where(.theme-pop) .board li.p3 .uav { --ring: #f0a46a; }
:where(.theme-pop) .crop-zoom input[type="range"] { height: 12px; background: #0f0920; box-shadow: none; border: 2px solid var(--hard); }
:where(.theme-pop) .crop-zoom input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; border: 2.5px solid var(--hard); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .crop-zoom input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 2.5px solid var(--hard); }
:where(.theme-pop) .erow .x, :where(.theme-pop) .subcard .x, :where(.theme-pop) .cr-ed .x, :where(.theme-pop) button.x:not(.modal-head .x) { border: 2px solid var(--hard); border-radius: 12px; background: var(--ink-3); box-shadow: 2px 2px 0 var(--hard); color: var(--moon); }
:where(.theme-pop) .erow .x:hover, :where(.theme-pop) .subcard .x:hover, :where(.theme-pop) .cr-ed .x:hover, :where(.theme-pop) button.x:not(.modal-head .x):hover { background: var(--ember); color: var(--hard); border-color: var(--hard); }
:where(.theme-pop) .subcard { border: 2px solid var(--hard); border-radius: 14px; background: var(--ink-1); box-shadow: 3px 3px 0 var(--hard); }
:where(.theme-pop) .rows .subcard { border: 2px solid var(--hard); border-radius: 12px; background: var(--ink-0); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .m-cat-ic-btn { border: 2px solid var(--hard); border-radius: 10px; background: var(--ink-3); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .m-char-port-btn { border: 2px solid var(--hard); border-radius: 99px; background: var(--ink-3); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .m-char-port-btn .m-char-av { border: 2px solid var(--hard); }
:where(.theme-pop) .m-cat-img-pane { border: 2px dashed var(--gold); border-radius: 14px; background: #140c29; }
:where(.theme-pop) .m-cat-once { border: 2px solid var(--hard); border-radius: 12px; background: #0f0920; box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .card .badge.new { left: auto; right: 14px; background: var(--rose); color: var(--hard); transform: rotate(5deg); box-shadow: 2px 2px 0 var(--hard); animation: pop-wiggle 2.4s ease-in-out infinite; }
@keyframes pop-wiggle { 0%, 80%, 100% { transform: rotate(5deg); } 88% { transform: rotate(-4deg) scale(1.08); } 94% { transform: rotate(8deg); } }

/* ---------- быстрые чаты ---------- */
:where(.theme-pop) .qc-bubble { border: 2px solid var(--hard); border-radius: 16px 16px 16px 5px; box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .qc-msg.mine .qc-bubble { background: var(--gold); color: var(--hard); border-radius: 16px 16px 5px 16px; }
:where(.theme-pop) .qc-msg.mine .qc-time { color: rgba(7, 4, 15, .6); }
:where(.theme-pop) .qc-name { color: var(--mint); }
:where(.theme-pop) .qc-msg .uav.qc-uav { --ring: var(--violet); box-shadow: 0 0 0 2px var(--ring), 0 0 0 3.5px var(--hard); }
:where(.theme-pop) .qc-msg.mine .uav.qc-uav { --ring: var(--rose); }
:where(.theme-pop) .qc-msg.mine .qc-name { color: var(--hard); }
:where(.theme-pop) .qc-msg.mine .qc-name i { color: rgba(7, 4, 15, .62); }
:where(.theme-pop) .chat-slot .qc-log { border: 2px solid var(--hard); border-radius: 16px; background: #0f0920; }
:where(.theme-pop) .side-tabs { border: 2px solid var(--hard); border-radius: 16px; background: #0f0920; }
:where(.theme-pop) .side-tabs button { font-weight: 800; border-radius: 11px; }
:where(.theme-pop) .side-tabs button[aria-selected="true"] { background: var(--gold); color: var(--hard); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .mchat-fab { background: var(--gold); color: var(--hard); border: 2.5px solid var(--hard); box-shadow: 4px 4px 0 var(--rose); }
:where(.theme-pop) .mchat-fab:hover { box-shadow: 6px 6px 0 var(--rose); }
:where(.theme-pop) .mchat-fab .nbadge { box-shadow: 0 0 0 2px var(--hard); }
:where(.theme-pop) .mchat { border: 2.5px solid var(--hard); border-radius: 22px; box-shadow: 8px 8px 0 var(--violet); background: var(--ink-1); }
:where(.theme-pop) .mchat-head { background: var(--ink-2); border-bottom: 2px solid var(--hard); }
:where(.theme-pop) .mchat-title b { color: var(--gold); text-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .mchat-row:hover { background: var(--ink-3); }

/* ---------- аватарки персонажей в «Моих сценариях» ---------- */
:where(.theme-pop) .char-av { border: 2.5px solid var(--hard); background: var(--rose); color: var(--hard); border-radius: 50%; box-shadow: 3px 3px 0 var(--hard); }
:where(.theme-pop) .char-av.sm { border-radius: 50%; box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .party { border: 2px solid var(--hard); border-radius: 14px; background: #0f0920; }
:where(.theme-pop) .party summary { color: var(--gold); font-weight: 800; }

/* ---------- стикеры ---------- */
:where(.theme-pop) .emo-btn { border: 2px solid var(--hard); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .emo-pop { border: 2.5px solid var(--hard); border-radius: 18px; box-shadow: 6px 6px 0 var(--violet); }
:where(.theme-pop) .sticker .st-t { border: 2px solid var(--hard); }

/* ---------- владелец мира ---------- */
:where(.theme-pop) .owner-bar { border: 2.5px dashed var(--gold); border-radius: 18px; background: #1a1035; }
:where(.theme-pop) .owner-state { color: var(--gold); }
:where(.theme-pop) .btn.edit-btn { background: var(--mint); color: var(--hard); border: 2px solid var(--hard); box-shadow: 2px 2px 0 var(--hard); }

/* ---------- лайки и отзывы ---------- */
:where(.theme-pop) .like-btn { border: 2px solid var(--hard); box-shadow: 2px 2px 0 var(--hard); font-weight: 800; }
:where(.theme-pop) .like-btn.on { background: var(--rose); color: var(--hard); }
:where(.theme-pop) .like-btn.on span { color: var(--hard); }
:where(.theme-pop) .rev { border: 2px solid var(--hard); border-radius: 16px; background: #0f0920; }
:where(.theme-pop) .weekly-plus { color: var(--gold); text-shadow: 3px 3px 0 var(--hard); }

/* Телефон: лупа поиска как остальные кнопки шапки, кольцо аватарки поуже */
@media (max-width: 720px) {
  :where(.theme-pop) .tsearch:not(:focus-within):not(.open) input[type="search"] { border: 2px solid var(--hard); background: var(--ink-3); box-shadow: 2px 2px 0 var(--hard); }
  :where(.theme-pop) .userbtn { box-shadow: 0 0 0 2px var(--rose), 2px 2px 0 2px var(--hard); }
}

:where(.theme-pop) .snd-fab { background: var(--mint); color: var(--hard); border: 2.5px solid var(--hard); box-shadow: 4px 4px 0 var(--violet); }
:where(.theme-pop) .snd-fab:hover { box-shadow: 6px 6px 0 var(--violet); }
:where(.theme-pop) .snd-fab.muted { color: var(--hard); opacity: .75; }
:where(.theme-pop) .snd-pop { border: 2.5px solid var(--hard); box-shadow: 6px 6px 0 var(--hard); border-radius: 16px; }
:where(.theme-pop) .snd-track.sel { border-color: var(--hard); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .snd-mode button[aria-checked="true"] { border-color: var(--hard); box-shadow: 2px 2px 0 var(--hard); }

/* ---------- редактор v3: вкладки, обозреватель предметов, свои настройки, импорт, большой редактор ---------- */
:where(.theme-pop) .ed-tabs { border: 2.5px solid var(--hard); border-radius: 18px; background: rgba(23, 14, 44, .96); box-shadow: 5px 5px 0 var(--hard); }
:where(.theme-pop) .ed-tabs button { font-weight: 800; border-radius: 12px; }
:where(.theme-pop) .ed-tabs button[aria-selected="true"] { background: var(--gold); color: var(--hard); border-color: var(--hard); box-shadow: 2px 2px 0 var(--rose); }
:where(.theme-pop) .ed-tab-n { background: rgba(7, 4, 15, .28); }
:where(.theme-pop) .ed-count { background: var(--gold); color: var(--hard); border: 2px solid var(--hard); box-shadow: 2px 2px 0 var(--hard); font-weight: 800; }
:where(.theme-pop) .cb-node { border-radius: 10px; font-weight: 700; }
:where(.theme-pop) .cb-node.on { background: var(--gold); color: var(--hard); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .cb-node.on b { color: var(--hard); }
:where(.theme-pop) .ci-line { border: 2px solid var(--hard); border-radius: 14px; background: #0f0920; box-shadow: 3px 3px 0 var(--hard); }
:where(.theme-pop) .ci-line:hover, :where(.theme-pop) .ci-line:focus-visible { border-color: var(--gold); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--gold); }
:where(.theme-pop) .ci-line .x { border: 2px solid var(--hard); background: var(--ink-3); color: var(--moon); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .ci-line .x:hover { background: var(--ember); color: var(--hard); border-color: var(--hard); }
:where(.theme-pop) .ci-open { border: 2.5px solid var(--gold); border-radius: 16px; background: #140c29; box-shadow: 4px 4px 0 var(--hard); }
:where(.theme-pop) .opt-ed { border: 2px solid var(--hard); border-radius: 16px; background: #0f0920; box-shadow: 3px 3px 0 var(--hard); }
:where(.theme-pop) .opt-ch { border: 1.5px dashed var(--line-2); border-radius: 12px; background: #160e2c; }
:where(.theme-pop) .opt-prev { border: 2px dashed var(--gold); border-radius: 16px; background: #140c29; }
:where(.theme-pop) .io-tpl { border: 2px solid var(--hard); border-radius: 16px; background: #121c31; box-shadow: 4px 4px 0 var(--mint); }
:where(.theme-pop) .mus-row, :where(.theme-pop) .narr-item { border: 2px solid var(--hard); border-radius: 14px; background: #0f0920; box-shadow: 3px 3px 0 var(--hard); }
:where(.theme-pop) .bigedit { border: 3px solid var(--hard); border-radius: 22px; box-shadow: 10px 10px 0 var(--violet); }
:where(.theme-pop) .be-head, :where(.theme-pop) .be-tools { border-bottom: 2px solid var(--hard); background: var(--ink-2); }
:where(.theme-pop) .be-open-btn { border: 2px solid var(--hard); box-shadow: 2px 2px 0 var(--hard); }

/* ---------- игра v3: время, уровень, перки, состояния, инвентарь-список, крафт, враги, ползунки ---------- */
:where(.theme-pop) .clock { border: 2px solid var(--hard); border-radius: 14px; background: #151030; box-shadow: 3px 3px 0 var(--hard); font-weight: 800; }
:where(.theme-pop) .awake { border: 1.5px solid var(--hard); background: var(--ink-3); color: var(--moon); font-weight: 700; }
:where(.theme-pop) .awake.tired { background: var(--ember); color: var(--hard); border-color: var(--hard); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .lvl-n { background: var(--gold); color: var(--hard); border: 2px solid var(--hard); border-radius: 10px; box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .lvl-bar { height: 12px; border: 2px solid var(--hard); background: #0f0920; box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .lvl-pts { border: 2px dashed var(--gold); border-radius: 12px; background: #1a1133; font-weight: 700; }
:where(.theme-pop) .stat .stat-up { border: 2px solid var(--hard); background: var(--gold); color: var(--hard); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .fx { border: 2px solid var(--hard); border-radius: 12px; background: var(--ink-2); box-shadow: 2px 2px 0 var(--hard); font-weight: 700; }
:where(.theme-pop) .fx.bad { background: #3b1525; border-color: var(--ember); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .fx.good { background: #112e2d; border-color: var(--mint); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .sec-t .inv-view { border: 2px solid var(--hard); background: var(--ink-2); color: var(--moon); box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .sec-t .inv-view:hover { background: var(--gold); color: var(--hard); border-color: var(--hard); }
:where(.theme-pop) .inv-row { border: 2px solid var(--hard); border-radius: 12px; background: #0f0920; box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .inv-row:hover { border-color: var(--gold); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--gold); }
:where(.theme-pop) .cr-row { border: 2px solid var(--hard); border-radius: 14px; background: #0f0920; box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .cr-row.ok { border-color: var(--mint); box-shadow: 3px 3px 0 var(--mint); }
:where(.theme-pop) .craft-dock { border: 2.5px solid var(--hard); border-radius: 18px; box-shadow: 5px 5px 0 var(--hard); }
:where(.theme-pop) .foe { border: 2px solid var(--hard); border-radius: 14px; background: linear-gradient(135deg, #2e1222, #1c0c1b); box-shadow: 3px 3px 0 #ff5fa8; }
:where(.theme-pop) .foe:hover { border-color: var(--ember); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ember); }
:where(.theme-pop) .foe[aria-pressed="true"], :where(.theme-pop) .foe.target { border-color: var(--gold); box-shadow: 4px 4px 0 var(--gold); }
:where(.theme-pop) .foe-ic { border: 1.5px solid var(--hard); background: #140814; }
:where(.theme-pop) .foe-bar { height: 9px; border: 1.5px solid var(--hard); background: #0d060e; }
:where(.theme-pop) .opt-slider input[type="range"], :where(.theme-pop) .opt-sl input[type="range"], :where(.theme-pop) .mus-vol input[type="range"], :where(.theme-pop) .snd-vol input[type="range"] { height: 10px; background: #0f0920; box-shadow: none; border: 2px solid var(--hard); }
:where(.theme-pop) .opt-slider input[type="range"]::-webkit-slider-thumb, :where(.theme-pop) .opt-sl input[type="range"]::-webkit-slider-thumb, :where(.theme-pop) .mus-vol input[type="range"]::-webkit-slider-thumb, :where(.theme-pop) .snd-vol input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; border: 2.5px solid var(--hard); box-shadow: 2px 2px 0 var(--hard); }

/* ---------- фильтры, справочник и украшения профиля ---------- */
:where(.theme-pop) .filters { border: 2.5px solid var(--hard); border-radius: 18px; background: var(--ink-1); box-shadow: 5px 5px 0 var(--hard); }
:where(.theme-pop) .comm-tabs { border-bottom: 2px solid var(--hard); gap: 8px; }
:where(.theme-pop) .comm-tabs a { font-weight: 800; border-radius: 12px 12px 0 0; }
:where(.theme-pop) .comm-tabs a[aria-current="page"] { color: var(--hard); background: var(--gold); border: 2px solid var(--hard); border-bottom-color: var(--gold); margin-bottom: -2px; }
:where(.theme-pop) .g-row { border: 2px solid var(--hard); border-radius: 14px; background: #0f0920; box-shadow: 3px 3px 0 var(--hard); }
:where(.theme-pop) .g-ex { border: 2px solid var(--hard); border-left: 5px solid var(--mint); border-radius: 12px; background: #102429; box-shadow: 3px 3px 0 var(--hard); }
:where(.theme-pop) .cz-tile, :where(.theme-pop) .cz-ban, :where(.theme-pop) .cz-emo button { border: 2px solid var(--hard); border-radius: 14px; background: #0f0920; box-shadow: 3px 3px 0 var(--hard); }
:where(.theme-pop) .cz-tile.on, :where(.theme-pop) .cz-ban[aria-pressed="true"], :where(.theme-pop) .cz-emo button[aria-pressed="true"] { border-color: var(--gold); box-shadow: 3px 3px 0 var(--gold); }


/* ---------- Визуальная студия инвентаря и 3 вида сценария в Сюр-попе ---------- */
:where(.theme-pop) .editor-mode-bar,
:where(.theme-pop) .is-doll-pane,
:where(.theme-pop) .is-bag-pane,
:where(.theme-pop) .is-inspector,
:where(.theme-pop) .live-preview-shell {
  border: 2.5px solid var(--hard); border-radius: 20px; box-shadow: 5px 5px 0 var(--hard);
}
:where(.theme-pop) .lp-view-tabs { border: 2px solid var(--hard); border-radius: 14px; background: #0f0920; }
:where(.theme-pop) .lp-view-btn.on { box-shadow: 2px 2px 0 var(--hard); }
:where(.theme-pop) .doll.free-doll { border: 2px dashed var(--hard); border-radius: 18px; }
:where(.theme-pop) .ui-widget.customizing { border: 2px dashed var(--gold); border-radius: 16px; }

/* ---------- Парящие комикс-стикеры, неоновый блик карточек и глянец кнопок (Сюр-поп v2) ---------- */
.pop-decor, .pop-decor[hidden] { display: none !important; }
:where(.theme-pop) .pop-decor:not([hidden]) {
  display: block !important; position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  contain: strict;
}
:where(.theme-pop) .pd-item {
  position: absolute; opacity: .22;
  will-change: transform;
}
:where(.theme-pop) .pd-d20 {
  width: 84px; height: 84px; right: 5vw; top: 14vh;
  animation: pop-drift-1 11s ease-in-out infinite;
}
:where(.theme-pop) .pd-star.s1 {
  width: 34px; height: 34px; left: 4vw; top: 22vh; color: var(--gold); opacity: .28;
  animation: pop-twinkle 4.8s ease-in-out infinite;
}
:where(.theme-pop) .pd-star.s2 {
  width: 26px; height: 26px; right: 12vw; bottom: 18vh; color: var(--mint); opacity: .26;
  animation: pop-twinkle 6s ease-in-out infinite 1.4s;
}
:where(.theme-pop) .pd-star.s3 {
  width: 22px; height: 22px; left: 14vw; bottom: 12vh; color: var(--rose); opacity: .25;
  animation: pop-twinkle 5.2s ease-in-out infinite 2.3s;
}
:where(.theme-pop) .pd-zig {
  width: 96px; height: 26px; left: 3vw; top: 58vh; opacity: .2;
  animation: pop-drift-2 13s ease-in-out infinite;
}
:where(.theme-pop) .pd-ring {
  width: 68px; height: 68px; right: 4vw; top: 54vh; opacity: .18;
  animation: pop-spin-slow 28s linear infinite;
}
:where(.theme-pop) .pd-bolt {
  width: 38px; height: 48px; left: 7vw; top: 80vh; opacity: .2;
  animation: pop-drift-1 9.5s ease-in-out infinite 1s;
}
@keyframes pop-drift-1 {
  0%, 100% { transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -14px), 0) rotate(-6deg); }
  50% { transform: translate3d(calc(var(--px, 0) * -14px + 6px), calc(var(--py, 0) * -14px - 14px), 0) rotate(8deg); }
}
@keyframes pop-drift-2 {
  0%, 100% { transform: translate3d(calc(var(--px, 0) * 18px), calc(var(--py, 0) * 12px), 0) rotate(-12deg); }
  50% { transform: translate3d(calc(var(--px, 0) * 18px - 10px), calc(var(--py, 0) * 12px + 10px), 0) rotate(-4deg); }
}
@keyframes pop-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.26) rotate(22deg); }
}
@keyframes pop-spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (max-width: 920px) { :where(.theme-pop) .pop-decor { display: none !important; } }

/* Неоновый блик и плавный отклик на карточках в Сюр-попе */
:where(.theme-pop) .card {
  background-image: radial-gradient(360px circle at 80% 0%, rgba(255, 95, 168, .12), rgba(53, 240, 208, .05) 45%, transparent 72%);
}
:where(.theme-pop) .card:hover {
  transform: translate3d(-3px, -4px, 0) rotate(-.4deg);
}
:where(.theme-pop) .step {
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s, border-color .2s;
  background-image: radial-gradient(280px circle at 80% 0%, rgba(255, 228, 77, .1), transparent 70%);
}
:where(.theme-pop) .step:hover {
  transform: translate3d(-3px, -3px, 0) rotate(-.6deg);
  border-color: var(--gold);
  box-shadow: 8px 8px 0 var(--hard);
}

/* Переливающийся глянцевый блик на золотых кнопках (аппаратный transform вместо left) */
:where(.theme-pop) .btn.gold { position: relative; overflow: hidden; }
:where(.theme-pop) .btn.gold::after {
  content: ''; position: absolute; top: -40%; bottom: -40%; left: 0; width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translate3d(-170%, 0, 0) skewX(-22deg); pointer-events: none;
  will-change: transform, opacity;
  animation: pop-btn-sheen 5.5s ease-in-out infinite;
}
@keyframes pop-btn-sheen {
  0%, 72%, 100% { transform: translate3d(-170%, 0, 0) skewX(-22deg); opacity: 0; }
  76% { opacity: 1; }
  92% { transform: translate3d(300%, 0, 0) skewX(-22deg); opacity: 0; }
}

/* Стикер-плашка предсказания кубика на витрине */
:where(.theme-pop) .so-badge {
  background: var(--ink-2); color: var(--moon);
  border: 2px solid var(--hard); border-radius: 14px;
  box-shadow: 4px 4px 0 var(--hard); font-weight: 700;
}
:where(.theme-pop) .so-badge.crit { background: #0e2e2c; border-color: var(--mint); box-shadow: 4px 4px 0 var(--mint); }
:where(.theme-pop) .so-badge.good { background: #12292b; border-color: var(--mint); box-shadow: 4px 4px 0 var(--hard); }
:where(.theme-pop) .so-badge.fail { background: #361224; border-color: var(--ember); box-shadow: 4px 4px 0 var(--ember); }

/* Кнопка быстрой смены темы в шапке */
:where(.theme-pop) .theme-top-btn {
  border: 2px solid var(--hard); background: var(--ink-2); box-shadow: 2px 2px 0 var(--hard);
}
:where(.theme-pop) .theme-top-btn:hover {
  background: var(--gold); color: var(--hard); border-color: var(--hard);
  transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--hard);
}

/* Живое появление реплик в ленте игры */
:where(.theme-pop) .entry.narr, :where(.theme-pop) .entry.you {
  animation: pop-entry-in .28s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes pop-entry-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
:where(.theme-pop) .narr-tts-btn {
  border: 2px solid var(--hard); background: var(--ink-2); color: var(--moon);
  box-shadow: 2px 2px 0 var(--hard); font-weight: 800;
}
:where(.theme-pop) .narr-tts-btn:hover {
  border-color: var(--hard); background: var(--gold); color: var(--hard);
  transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--hard);
}
:where(.theme-pop) .narr-tts-btn.playing {
  background: var(--mint); color: var(--hard); border-color: var(--hard);
  box-shadow: 3px 3px 0 var(--hard);
}
:where(.theme-pop) .voice-opt {
  border: 2px solid var(--hard); border-radius: 12px; background: #0f0920;
  box-shadow: 2px 2px 0 var(--hard);
}
:where(.theme-pop) .voice-opt[aria-pressed="true"] {
  border-color: var(--gold); background: #211542;
  box-shadow: 3px 3px 0 var(--gold);
}
:where(.theme-pop) .create-checklist {
  border: 2.5px solid var(--hard); box-shadow: 4px 4px 0 var(--hard);
}
:where(.theme-pop) .cc-chip {
  border: 2px solid var(--hard); box-shadow: 2px 2px 0 var(--hard); font-weight: 700;
}
:where(.theme-pop) .cc-chip.done {
  border-color: var(--mint); box-shadow: 2px 2px 0 var(--hard);
}
:where(.theme-pop) .lp-story-card {
  border: 2px solid var(--hard); border-radius: 14px; background: var(--ink-2);
  box-shadow: 3px 3px 0 var(--hard);
}
:where(.theme-pop) .lpsc-chip {
  border: 1.5px solid var(--hard); border-radius: 10px; box-shadow: 2px 2px 0 var(--hard);
}
:where(.theme-pop) .lp-mob-tabs {
  border: 2px solid var(--hard); box-shadow: 3px 3px 0 var(--hard);
}
:where(.theme-pop) .lp-mob-tab.on {
  background: var(--gold); color: var(--hard); border-color: var(--hard);
  box-shadow: 2px 2px 0 var(--rose);
}

/* ---------- Кастомные выпадающие списки (.ui-select) в теме Сюр-поп ---------- */
:where(.theme-pop) .ui-select-btn {
  border: 2px solid var(--line-2);
  border-radius: 14px;
  background: #0f0920;
  color: var(--moon);
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--hard);
}
:where(.theme-pop) .ui-select-btn:hover:not(:disabled) {
  border-color: var(--mint);
  background: #170e2e;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--hard);
}
:where(.theme-pop) .ui-select.is-open .ui-select-btn,
:where(.theme-pop) .ui-select-btn:focus-visible {
  border-color: var(--mint);
  background: #1a1034;
  box-shadow: 4px 4px 0 var(--mint);
}
:where(.theme-pop) .ui-select-arr {
  border: 1.5px solid var(--hard);
  border-radius: 8px;
  background: var(--ink-3);
  color: var(--gold);
  box-shadow: 1px 1px 0 var(--hard);
}
:where(.theme-pop) .ui-select.is-open .ui-select-arr {
  background: var(--mint);
  color: var(--hard);
}
:where(.theme-pop) .ui-select-pop {
  border: 2.5px solid var(--hard);
  border-radius: 18px;
  background: #181030;
  box-shadow: 6px 6px 0 var(--violet), 0 18px 40px rgba(0, 0, 0, .65);
  padding: 7px;
  gap: 4px;
}
:where(.theme-pop) .ui-select-opt {
  border: 1.5px solid transparent;
  border-radius: 11px;
  font-weight: 700;
  color: var(--moon);
}
:where(.theme-pop) .ui-select-opt:hover:not(:disabled),
:where(.theme-pop) .ui-select-opt:focus-visible {
  background: var(--ink-3);
  border-color: var(--hard);
  box-shadow: 2px 2px 0 var(--hard);
  transform: translate(-1px, -1px);
}
:where(.theme-pop) .ui-select-opt.is-selected {
  background: var(--gold);
  color: var(--hard);
  border-color: var(--hard);
  box-shadow: 2px 2px 0 var(--rose);
  font-weight: 800;
}
:where(.theme-pop) .ui-select-opt.is-selected .ui-select-opt-chk {
  color: var(--hard);
}