/* Стиль киоска Остановки: frontend/kiosk/components/zones/ostanovka/Ostanovka.module.scss
   (оранжевое свечение #ffc357, белые заголовки Fira Sans Extra Condensed Black, коралловая кнопка-пилюля,
   текст YS Text Medium). Шрифты скопированы из frontend/kiosk/public/fonts. */
@font-face { font-family:"YS Text"; src:url("fonts/YS-Text-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Fira Sans Extra Condensed"; src:url("fonts/FiraSansExtraCondensed-Black.ttf") format("truetype"); font-weight:900; font-style:normal; font-display:swap; }

:root {
  --bg:#ffc357; --glow:#fbcf80; --glow-btn:#fab942;
  --ink:#111; --paper:#fff; --muted:rgba(17,17,17,.55);
  --accent:#f48151; --ok:#1f8a46; --warn:#b3261e;
  --display:"YS Display Cond","Fira Sans Extra Condensed","Arial Narrow",sans-serif;
}
* { box-sizing:border-box; }
html { min-height:100%; background:var(--bg); }
body {
  margin:0; min-height:100vh; padding:32px 16px;
  background:radial-gradient(ellipse 900px 700px at 50% 38%, var(--glow) 0%, rgba(251,207,128,.55) 50%, rgba(255,195,87,0) 100%), var(--bg);
  background-attachment:fixed;
  color:var(--ink); font:500 18px/1.3 "YS Text", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.card { max-width:640px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; }

.state {
  font-family:var(--display); font-weight:900; color:#fff;
  font-size:clamp(56px, 15vw, 120px); line-height:.93; letter-spacing:-.01em;
  min-height:2em; display:flex; align-items:center; justify-content:center;
  margin:24px 0 32px; overflow-wrap:anywhere;
  text-shadow:0 4px 30px rgba(244,129,81,.35);
}

.buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; width:100%; }
button {
  font:inherit; border:0; border-radius:999px; cursor:pointer; letter-spacing:.02em;
  background:var(--paper); color:var(--ink); padding:18px 32px; font-size:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.12); transition:transform .12s;
}
button:active:not(:disabled) { transform:scale(.97); }
button.big {
  flex:1 1 260px; background:var(--accent); color:#fff; font-size:24px; padding:26px 32px;
  box-shadow:0 14px 40px var(--glow-btn);
}
button:disabled { opacity:.5; cursor:default; }
button:focus-visible { outline:3px solid #fff; outline-offset:3px; }

.rows {
  display:grid; grid-template-columns:auto 1fr; gap:10px 20px; width:100%; margin:32px 0 0;
  padding:24px; text-align:left; background:var(--paper); border-radius:32px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
dt { color:var(--muted); }
dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.mic.open { color:var(--accent); }
.mic.recognized { color:var(--ok); }
.heard .interim { color:var(--muted); }

.note {
  margin:16px 0 0; padding:14px 24px; font-size:16px; color:var(--muted);
  background:var(--paper); border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.note.warn { color:var(--warn); border-radius:24px; }
.note[hidden] { display:none; }

@media (max-width:480px) {
  body { padding:24px 16px; }
  .rows { padding:20px; border-radius:24px; gap:8px 14px; font-size:16px; }
  button.big { font-size:22px; padding:22px 24px; }
  .buttons { gap:12px; }
  .buttons button { flex:1 1 100%; }
}