/* ====== ФИРМЕННЫЕ ЦВЕТА (переопределяем токены theme.css) ====== */
:root{
  --brand:#ff5da2;      /* сочный розовый */
  --brand-2:#ffb03a;    /* солнечный оранжевый */
  --accent:#38d1c9;     /* мятно-бирюзовый */
  --grape:#7a5cff;      /* фиолетовый акцент */
  --lime:#8ee14a;       /* весёлый лаймовый */
  --sky:#4bc4ff;        /* небесно-голубой */
  --bg:#fff7fb;
  --surface:#ffffff;
  --text:#3a2b4d;
  --muted:#8a7e97;
  --border:#f0e2ec;
  --grad:linear-gradient(135deg,#ff5da2 0%,#ffb03a 60%,#38d1c9 120%);
  --radius-1:6px;--radius-2:10px;--radius-3:16px;
  --font-display:"Baloo 2","Segoe UI",system-ui,-apple-system,"Trebuchet MS",sans-serif;
  --font-sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
h1,h2{font-family:var(--font-display);line-height:1.02;margin:0}
.container{width:min(920px,92vw);margin-inline:auto}
.kicker{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grape);font-weight:700}

/* ===================== СТАРТОВЫЙ ЭКРАН ===================== */
.start-screen{position:relative;min-height:100vh;padding:clamp(24px,5vw,64px) 0 90px;overflow:hidden;background:
  radial-gradient(60% 45% at 15% 8%, color-mix(in srgb,var(--brand) 24%, transparent), transparent 70%),
  radial-gradient(55% 40% at 90% 12%, color-mix(in srgb,var(--accent) 26%, transparent), transparent 70%),
  radial-gradient(50% 45% at 80% 92%, color-mix(in srgb,var(--brand-2) 22%, transparent), transparent 70%),
  var(--bg);
}
.blob{position:absolute;border-radius:50%;filter:blur(6px);opacity:.55;z-index:0;pointer-events:none;animation:float 9s ease-in-out infinite}
.blob-1{width:150px;height:150px;background:var(--grape);top:12%;right:8%;animation-delay:.4s}
.blob-2{width:110px;height:110px;background:var(--lime);bottom:16%;left:6%;animation-delay:1.2s}
.blob-3{width:90px;height:90px;background:var(--sky);top:40%;left:14%;animation-delay:2s}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-22px) scale(1.06)}}

.start-inner{position:relative;z-index:1}
.start-head{display:flex;align-items:center;gap:18px;margin-bottom:clamp(20px,4vw,40px)}
.logo-badge{flex:none;width:74px;height:74px;display:grid;place-items:center;background:var(--grad);border-radius:22px;box-shadow:0 14px 34px -10px color-mix(in srgb,var(--brand) 65%, transparent);transform:rotate(-6deg)}
.logo-badge svg{transform:rotate(6deg)}
.start-head h1{font-size:clamp(2.6rem,9vw,4.4rem);font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em}
.lead{margin:.3rem 0 0;color:var(--muted);font-size:clamp(1rem,2.5vw,1.2rem);font-weight:600;max-width:34ch}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:clamp(18px,3vw,26px);margin-bottom:18px;box-shadow:0 22px 50px -30px color-mix(in srgb,var(--grape) 60%, transparent)}
.panel-head{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.panel-head h2,.voice-text h2{font-size:clamp(1.3rem,3.6vw,1.7rem);font-weight:800}

/* сетка выбора звука */
.sound-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.sound-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px 12px;border:2px solid var(--border);border-radius:18px;background:color-mix(in srgb,var(--bg) 60%, #fff);cursor:pointer;font:inherit;color:var(--text);transition:transform .16s var(--ease-out,ease),border-color .16s,box-shadow .16s}
.sound-card:hover{transform:translateY(-4px);box-shadow:0 16px 30px -16px color-mix(in srgb,var(--brand) 60%, transparent)}
.sound-card:active{transform:scale(.96)}
.sound-card .em{font-size:2.1rem;line-height:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.12))}
.sound-card .nm{font-weight:800;font-size:.92rem}
.sound-card[aria-checked="true"]{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 12%, #fff);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%, transparent)}
.sound-card .chk{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--brand);display:none;place-items:center}
.sound-card[aria-checked="true"] .chk{display:grid}
.sound-card .chk svg{stroke:#fff}

/* тумблер голоса */
.voice-panel{}
.voice-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.muted-note{margin:.25rem 0 0;color:var(--muted);font-size:.92rem;font-weight:600}
.switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch-track{position:relative;width:64px;height:36px;border-radius:999px;background:#d9d0e2;transition:background .2s}
.switch-thumb{position:absolute;top:4px;left:4px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.2);transition:transform .2s}
.switch input:checked + .switch-track{background:var(--accent)}
.switch input:checked + .switch-track .switch-thumb{transform:translateX(28px)}
.switch-label{font-weight:800;color:var(--muted);min-width:34px}
.switch input:checked ~ .switch-label{color:var(--accent)}

/* действия */
.start-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.btn-play{flex:1 1 240px;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:20px 28px;border:0;border-radius:20px;background:var(--grad);color:#fff;font-family:var(--font-display);font-size:1.5rem;font-weight:800;cursor:pointer;box-shadow:0 20px 40px -14px color-mix(in srgb,var(--brand) 75%, transparent);transition:transform .16s,box-shadow .16s}
.btn-play:hover{transform:translateY(-3px)}
.btn-play:active{transform:scale(.97)}
.btn-install{flex:1 1 200px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:20px 22px;border:2px solid var(--grape);border-radius:20px;background:#fff;color:var(--grape);font-family:var(--font-display);font-weight:800;font-size:1.1rem;cursor:pointer;transition:transform .16s,background .16s}
.btn-install:hover{transform:translateY(-3px);background:color-mix(in srgb,var(--grape) 8%, #fff)}
.btn-install:active{transform:scale(.97)}

.hint-line{display:flex;align-items:flex-start;gap:10px;margin-top:22px;color:var(--muted);font-weight:600;font-size:.95rem;line-height:1.4}
.hint-line svg{flex:none;color:var(--brand-2);margin-top:2px}

.mini-footer{position:relative;z-index:1;text-align:center;padding:16px;color:var(--muted);font-size:.85rem;font-weight:600;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.mini-footer .dot{opacity:.5}

/* reveal (не ломает контент без js) */
html.js .panel,html.js .start-head,html.js .start-actions{opacity:0;transform:translateY(16px);animation:rise .6s var(--ease-out,ease) forwards}
html.js .start-head{animation-delay:.02s}
html.js .panel:nth-of-type(1){animation-delay:.1s}
html.js .voice-panel{animation-delay:.18s}
html.js .start-actions{animation-delay:.26s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html.js .panel,html.js .start-head,html.js .start-actions{opacity:1;transform:none}}

/* ===================== ИГРОВОЙ ЭКРАН ===================== */
.game-screen{position:fixed;inset:0;z-index:50;overflow:hidden;background:
  radial-gradient(70% 60% at 20% 15%, #ffe0ef, transparent 70%),
  radial-gradient(70% 60% at 85% 20%, #dff8ff, transparent 70%),
  radial-gradient(70% 70% at 60% 95%, #fff2d6, transparent 70%),
  #fffafd;
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.game-screen[hidden]{display:none}

.bg-word{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1vh;pointer-events:none;z-index:1;text-align:center;padding:0 4vw}
.bg-ru{font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,16vw,13rem);line-height:.92;color:color-mix(in srgb,var(--grape) 16%, transparent);letter-spacing:-.02em;transition:color .25s}
.bg-en{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,8vw,6rem);line-height:1;color:color-mix(in srgb,var(--brand) 18%, transparent);text-transform:uppercase;letter-spacing:.02em}
.bg-word.flash .bg-ru{animation:wordpop .4s ease}
@keyframes wordpop{0%{transform:scale(.9)}50%{transform:scale(1.05)}100%{transform:scale(1)}}

.fx-canvas{position:absolute;inset:0;z-index:3;pointer-events:none}

/* сетка тап-зон */
.tap-grid{position:absolute;inset:0;z-index:2;display:grid;pointer-events:auto}
.tap-cell{border:1px dashed color-mix(in srgb,var(--grape) 14%, transparent);pointer-events:auto}
.tap-cell.hit{animation:cellhit .35s ease}
@keyframes cellhit{0%{background:color-mix(in srgb,var(--brand) 24%, transparent)}100%{background:transparent}}

/* HUD */
.hud{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;gap:14px;padding:10px 14px;background:color-mix(in srgb,#ffffff 72%, transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--grape) 12%, transparent);flex-wrap:wrap}
.hud-stats{display:flex;gap:8px;flex:1 1 auto;flex-wrap:wrap}
.stat{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:6px 12px;box-shadow:0 4px 12px -8px rgba(0,0,0,.3)}
.stat-ico{color:var(--brand);display:grid;place-items:center}
.stat-val{font-family:var(--font-display);font-weight:800;font-size:1.15rem;font-variant-numeric:tabular-nums;color:var(--text)}
.stat-cap{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

.speed-meter{flex:1 1 260px;min-width:200px}
.speed-scale{display:flex;justify-content:space-between;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.62rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.speed-bar{position:relative;height:16px;border-radius:999px;background:#efe6f0;overflow:hidden;border:1px solid var(--border)}
.speed-fill{position:absolute;top:0;left:0;bottom:0;width:0%;border-radius:999px;background:linear-gradient(90deg,#4bc4ff,#8ee14a,#ffb03a,#ff5da2);transition:width .35s var(--ease-out,ease)}

.hud-exit{flex:none;width:44px;height:44px;border-radius:14px;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 18px -8px color-mix(in srgb,var(--brand) 80%, transparent);transition:transform .15s}
.hud-exit:hover{transform:scale(1.06)}
.hud-exit:active{transform:scale(.9)}

/* всплывающий пузырь текущего эмодзи */
.pop-word{position:absolute;z-index:5;pointer-events:none;font-size:clamp(3rem,10vw,6rem);transform:translate(-50%,-50%) scale(0);opacity:0}
.pop-word.show{animation:popbig .55s var(--ease-out,ease) forwards}
@keyframes popbig{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}60%{transform:translate(-50%,-90%) scale(1.15);opacity:1}100%{transform:translate(-50%,-140%) scale(1);opacity:0}}

@media (max-width:640px){
  .hud{gap:8px;padding:8px 10px}
  .stat{padding:5px 9px}
  .stat-cap{display:none}
  .stat-val{font-size:1rem}
  .speed-meter{flex-basis:100%;order:3}
}