/* Токены дизайна «Алиас» (см. android ui/Tokens.kt) — та же палитра и радиусы. */
@font-face {
  font-family:'Manrope';
  src:url('manrope.ttf') format('truetype-variations');
  font-weight:200 800;
  font-display:swap;
}
@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.03); } }
.pulse { animation:pulse 2.4s ease-in-out infinite; }
:root {
  --ink:#14120E; --paper:#F4F1EA; --card:#fff; --border:#E2DCD0; --track:#EDE7DB;
  --dashed:#C4BCAC; --accent:#FF5A3D; --success:#7BE3A8; --on-success:#0B2C1B;
  --muted:#8C8578; --muted2:#6E695E;
  --t1:#FF5A3D; --t2:#0E9F8E; --t3:#6B4EF3; --t4:#FFB020;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  background:var(--paper); color:var(--ink);
  font-family:'Manrope',-apple-system,'Segoe UI',Roboto,sans-serif;
  overscroll-behavior:none;
}
#app {
  max-width:480px; margin:0 auto; min-height:100dvh;
  display:flex; flex-direction:column;
  padding:20px 24px calc(16px + env(safe-area-inset-bottom));
}
#app.dark { background:var(--ink); color:#fff; }
#app.accent { background:var(--accent); color:#fff; }
body:has(#app.dark) { background:var(--ink); }
body:has(#app.accent) { background:var(--accent); }

.overline { font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.overline.inv { color:rgba(255,255,255,.7); }
h1 { font-size:42px; font-weight:800; letter-spacing:-.03em; line-height:1.02; margin:4px 0 10px; }
.hint { color:var(--muted2); font-size:14px; line-height:1.4; }
.hint.inv { color:rgba(255,255,255,.85); }
.grow { flex:1; }

.btn { display:flex; align-items:center; justify-content:center; width:100%; border:0;
  border-radius:20px; height:60px; font-size:18px; font-weight:800; font-family:inherit;
  cursor:pointer; user-select:none; }
.btn:active { transform:scale(.985); }
.btn-ink { background:var(--ink); color:var(--paper); }
.btn-accent { background:var(--accent); color:#fff; }
.btn-paper { background:var(--paper); color:var(--ink); }
.btn-success { background:var(--success); color:var(--on-success); font-size:21px; height:72px; }
.btn-ghost { background:transparent; border:1.5px solid var(--ink); height:52px; font-weight:700; font-size:16px; }
.btn-ghost.inv { border-color:rgba(255,255,255,.4); color:#fff; }
.btn-big { height:84px; border-radius:26px; font-size:28px; letter-spacing:-.02em; }
.row { display:flex; gap:12px; }
.row > .btn { flex:1; }

.card { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:16px 18px; }
.team-row { display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--card);
  border:1px solid var(--border); border-radius:18px; margin-bottom:9px; font-weight:700; font-size:17px;
  cursor:pointer; }
.team-row.lead { border:1.5px solid var(--ink); }
.bar { width:12px; height:36px; border-radius:6px; flex:none; }
.score-big { font-size:24px; font-weight:800; margin-left:auto; }
.add-team { border:1.5px dashed var(--dashed); border-radius:18px; height:58px; display:flex;
  align-items:center; justify-content:center; font-weight:700; font-size:15px; color:var(--muted2);
  cursor:pointer; margin-bottom:9px; }

.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { background:var(--card); border:1px solid var(--border); border-radius:13px;
  padding:10px 14px; font-size:14px; font-weight:600; cursor:pointer; }
.chip.sel { background:var(--ink); color:var(--paper); border-color:var(--ink); font-weight:700; }

.stepper { display:flex; align-items:center; gap:12px; }
.step-btn { width:34px; height:34px; border-radius:11px; display:flex; align-items:center;
  justify-content:center; font-size:17px; cursor:pointer; }
.step-btn.minus { border:1.5px solid var(--ink); }
.step-btn.plus { background:var(--ink); color:#fff; }
.step-val { font-size:22px; font-weight:800; min-width:36px; text-align:center; }

.slider { -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:4px;
  background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill,50%), var(--track) var(--fill,50%));
  outline:none; }
.slider::-webkit-slider-thumb { -webkit-appearance:none; width:28px; height:28px; border-radius:50%;
  background:var(--ink); border:4px solid #fff; box-shadow:0 3px 10px rgba(20,18,14,.25); cursor:pointer; }
.slider::-moz-range-thumb { width:20px; height:20px; border-radius:50%;
  background:var(--ink); border:4px solid #fff; box-shadow:0 3px 10px rgba(20,18,14,.25); cursor:pointer; }

.switch { width:52px; height:30px; border-radius:15px; background:var(--track); position:relative;
  cursor:pointer; flex:none; transition:background .15s; }
.switch.on { background:var(--accent); }
.switch::after { content:''; position:absolute; top:3px; left:3px; width:24px; height:24px;
  border-radius:12px; background:#fff; transition:left .15s; }
.switch.on::after { left:25px; }

.badge { display:inline-block; background:var(--accent); color:#fff; border-radius:11px;
  padding:8px 13px; font-weight:700; font-size:13px; letter-spacing:.06em; }
.pill { background:rgba(255,255,255,.2); border-radius:12px; padding:7px 13px; font-weight:700; font-size:14px; }

.title-mega { font-size:88px; font-weight:800; letter-spacing:-.05em; line-height:.88; }
.title-team { font-size:56px; font-weight:800; letter-spacing:-.04em; line-height:.95; }

/* Раунд */
.timer-wrap { position:relative; width:124px; height:124px; margin:6px auto; }
.timer-wrap svg { transform:rotate(-90deg); }
.timer-num { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; font-size:40px; font-weight:800; line-height:1; }
.timer-num small { font-size:11px; font-weight:600; letter-spacing:.1em; opacity:.6; margin-top:2px; }
.stack { position:relative; flex:1; display:flex; align-items:center; justify-content:center; min-height:0; }
.ghost { position:absolute; border-radius:26px; }
.word-card { position:relative; width:100%; height:86%; border-radius:26px; background:var(--paper);
  color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:22px; text-align:center; touch-action:none; }
.word { font-size:clamp(28px, 11vw, 48px); font-weight:800; letter-spacing:-.03em; line-height:1.05;
  word-break:break-word; }

.wrow { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:11px 14px; margin-bottom:8px; font-weight:700; font-size:16px; cursor:pointer; }
.wrow .mark { margin-left:auto; width:36px; height:36px; border-radius:12px; display:flex; flex:none;
  align-items:center; justify-content:center; font-size:16px; background:var(--track); color:var(--muted); }
.wrow .mark.ok { background:var(--success); color:var(--on-success); }
.wrow .skipped { text-decoration:line-through; color:var(--muted); }

.progress { height:9px; border-radius:5px; background:var(--track); overflow:hidden; margin-top:10px; }
.progress > div { height:100%; border-radius:5px; }

dialog { border:0; border-radius:22px; padding:22px; max-width:340px; width:88vw; background:var(--card); }
dialog::backdrop { background:rgba(20,18,14,.5); }
dialog h3 { font-size:19px; font-weight:800; margin-bottom:10px; }
dialog input { width:100%; background:var(--paper); border:1px solid var(--border); border-radius:14px;
  height:50px; padding:0 14px; font-size:17px; font-family:inherit; margin:8px 0 14px; }
.dlg-actions { display:flex; gap:10px; justify-content:flex-end; }
.dlg-btn { border:0; background:none; font-family:inherit; font-size:15px; font-weight:700;
  color:var(--accent); cursor:pointer; padding:8px 10px; }
.dlg-btn.mut { color:var(--muted); }