/* Cozy World — /play/ до загрузки плеера. Стиль: премиальный тёмный v3, нейтрально-тёплый графит (site-brand, 22.10.2026; было — web-build v0.2).
   Тот же вид, что у заставки плеера (TemplateData/cozy-player.css). Только CSS: классы и JS не менялись.
   Токены — копия site/src/styles/tokens.css (страница /play/ живёт вне Astro). Тема одна — тёмная. */
@font-face {
  font-family: "Unbounded";
  src: url("/fonts/unbounded-var.v1.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-var.v1.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg: #1e1b18;
  --card: rgb(45 42 39 / 0.76);
  --text: #f8f1e8;
  --soft: #e0d7cc;
  --muted: #bdb3a8;
  --line: rgb(255 232 208 / 0.14);
  --line-strong: rgb(255 232 208 / 0.24);
  --peach: #f2a65a;
  --apricot: #ffba75;
  --ink: #1b1209;
  --focus: #ffc788;
  --grad-accent: linear-gradient(135deg, #ffc98a 0%, #f2a65a 48%, #e0843f 100%);
  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-text: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='cw-amber' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFC788'/%3E%3Cstop offset='.55' stop-color='%23F2A65A'/%3E%3Cstop offset='1' stop-color='%23D9813C'/%3E%3C/linearGradient%3E%3CradialGradient id='cw-glass' cx='.5' cy='.42' r='.62'%3E%3Cstop offset='0' stop-color='%23FFF4DA'/%3E%3Cstop offset='1' stop-color='%23FFC46E'/%3E%3C/radialGradient%3E%3CradialGradient id='cw-halo' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23F2A65A' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23F2A65A' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M46.9 10.5H50.6Q52 10.5 52 11.9V23.1Q52 24.5 50.6 24.5H46.9Q45.5 24.5 45.5 23.1V11.9Q45.5 10.5 46.9 10.5Z' fill='url(%23cw-amber)'/%3E%3Cpath d='M28.23 12.11Q29.33 11.05 30.55 11.98L53.5 29.58Q54.4 30.27 54.4 31.4L54.4 51.47Q54.4 54.4 51.47 54.4L12.53 54.4Q9.6 54.4 9.6 51.47L9.6 31.09Q9.6 29.96 10.42 29.18Z' fill='%231F1915'/%3E%3Ccircle cx='32' cy='40' r='17.94' fill='url(%23cw-halo)'/%3E%3Cpath d='M26.4 7.49Q29 5 31.86 7.19L56.46 26.05Q59 28 59 31.2L59 54Q59 59 54 59L10 59Q5 59 5 54L5 31.2Q5 28 7.31 25.79ZM28.23 12.11Q29.33 11.05 30.55 11.98L53.5 29.58Q54.4 30.27 54.4 31.4L54.4 51.47Q54.4 54.4 51.47 54.4L12.53 54.4Q9.6 54.4 9.6 51.47L9.6 31.09Q9.6 29.96 10.42 29.18Z' fill='url(%23cw-amber)' fill-rule='evenodd'/%3E%3Cpath d='M22 28.5H29Q30.5 28.5 30.5 30V37Q30.5 38.5 29 38.5H22Q20.5 38.5 20.5 37V30Q20.5 28.5 22 28.5ZM35 28.5H42Q43.5 28.5 43.5 30V37Q43.5 38.5 42 38.5H35Q33.5 38.5 33.5 37V30Q33.5 28.5 35 28.5ZM22 41.5H29Q30.5 41.5 30.5 43V50Q30.5 51.5 29 51.5H22Q20.5 51.5 20.5 50V43Q20.5 41.5 22 41.5ZM35 41.5H42Q43.5 41.5 43.5 43V50Q43.5 51.5 42 51.5H35Q33.5 51.5 33.5 50V43Q33.5 41.5 35 41.5Z' fill='url(%23cw-glass)'/%3E%3Cpath d='M48.6 7.6c-1.7-1.3-.6-3 .9-3.6s2.3-2 1.3-3.4' fill='none' stroke='%23E8D9C8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  color-scheme: dark;
}
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); }
body {
  font: 450 17px/1.55 var(--font-text);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#cozy-root { position: fixed; inset: 0; }
.boot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    radial-gradient(40% 58% at 16% 0%, rgb(255 194 128 / 0.44) 0%, rgb(242 166 90 / 0.15) 34%, transparent 64%),
    radial-gradient(26% 40% at 86% 0%, rgb(255 186 117 / 0.24) 0%, rgb(242 166 90 / 0.06) 40%, transparent 66%),
    radial-gradient(34% 46% at 96% 100%, rgb(110 150 210 / 0.14) 0%, transparent 64%),
    var(--bg);
}
.boot-card {
  width: min(560px, 100%);
  box-sizing: border-box;
  padding: 40px 40px 32px;
  border-radius: 28px;
  background: var(--card);
  background-image: linear-gradient(180deg, rgb(255 236 214 / 0.05) 0%, rgb(255 236 214 / 0.01) 100%);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgb(255 240 222 / 0.06), 0 28px 72px -18px rgb(0 0 0 / 0.75), 0 0 80px -40px rgb(242 166 90 / 0.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}
/* логотип: знак (data-URI, без запроса) + надпись дисплейным шрифтом */
.boot-logo {
  display: flex;
  align-items: center;
  gap: 0.42em;
  margin: 0;
  font: 600 clamp(1.75rem, 6vw, 2.25rem)/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--text);
}
.boot-logo::before {
  content: "";
  flex: none;
  width: 1.45em;
  height: 1.45em;
  background: var(--mark) center / contain no-repeat;
  filter: drop-shadow(0 4px 18px rgb(242 166 90 / 0.45));
}
.boot-tagline { margin: 14px 0 28px; color: var(--soft); font-size: 1.0625rem; }
.boot-status { margin: 0 0 20px; font-size: 1.0625rem; font-weight: 600; }
.boot-reqs { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
.boot-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.boot-actions[hidden] { display: none; }
.boot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
  transition: background-color 0.15s var(--ease-out), box-shadow 0.24s var(--ease-out), color 0.15s var(--ease-out);
}
.boot-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.boot-primary {
  background: var(--peach);
  background-image: var(--grad-accent);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgb(255 240 222 / 0.25), 0 8px 28px -10px rgb(242 166 90 / 0.55);
}
.boot-primary:hover { box-shadow: 0 0 0 1px rgb(255 186 117 / 0.5), 0 18px 60px -10px rgb(242 166 90 / 0.65); }
.boot-ghost { color: var(--soft); padding: 0 14px; }
.boot-ghost:hover { color: var(--text); background: rgb(255 236 214 / 0.06); }
.boot-noscript { position: fixed; left: 16px; right: 16px; bottom: 16px; color: var(--text); z-index: 5; }
.boot-noscript a { color: #f5b06c; }
@media (max-width: 520px) {
  .boot-card { padding: 28px 20px 22px; border-radius: 22px; }
  .boot-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .boot-btn { transition: none; }
}