/* Медаксиум — токены (из дизайн-системы Medaxium) + локальные шрифты */
@import url('/vendor/montserrat/400.css');
@import url('/vendor/montserrat/500.css');
@import url('/vendor/montserrat/600.css');
@import url('/vendor/montserrat/700.css');
@import url('/vendor/montserrat/800.css');
@import url('/vendor/lora/400.css');
@import url('/vendor/lora/400-italic.css');
@import url('/vendor/lora/600.css');
@import url('/vendor/lora/700.css');

:root {
  /* Фирменная палитра Медаксиума: тёмно-зелёный + беж + золото */
  --green-900: #112E26; --green-800: #13352C; --green-700: #1C4C40; --green-600: #2D6A57;
  --gold: #B98A4E; --gold-light: #DFC98E; --gold-logo: #A8834C;
  --beige: #F8F4F0; --surface: #FCFAF7; --beige-2: #F3ECE3; --beige-3: #EDE4D8;
  --blush: #EDDDD4; --mint: #E4ECE7; --border: #D9C3A0;
  --ink: #1F2B27; --ink-2: #4E5A54; --muted: #8A8F88; --warn-text: #8C5A3C;
  --grad-dark: linear-gradient(155deg, #1E4E42 0%, #163B31 45%, #112E26 100%);
  --success: #2D6A57; --danger: #9E4A33;

  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
  --bg-app: var(--beige); --bg-base: var(--surface); --bg-subtle: var(--beige-2); --bg-sunken: var(--beige-3); --bg-hover: var(--beige-2);
  --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-tertiary: var(--muted); --text-on-brand: #FFFFFF; --text-link: var(--green-700);
  --border-subtle: var(--beige-3); --border-default: var(--border); --border-strong: #C8AD82;
  --accent: var(--green-800); --accent-hover: var(--green-700); --accent-press: var(--green-900); --accent-soft: var(--mint); --accent-soft-ink: var(--green-800);
  --field-bg: var(--beige-2); --field-border: var(--border); --field-focus: var(--green-700);
  --ok-soft: var(--mint); --ok-ink: var(--green-700); --bad-soft: #EBD3CA; --bad-ink: #84392A; --warn-soft: var(--blush); --warn-ink: var(--warn-text);
  --shadow-color: 160 30% 14%;
  --shadow-sm: 0 2px 6px hsl(var(--shadow-color) / 0.08);
  --shadow-md: 0 6px 18px hsl(var(--shadow-color) / 0.10);
  --shadow-lg: 0 16px 40px hsl(var(--shadow-color) / 0.16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]).themable {
    color-scheme: dark;
    --bg-app: #0E2620; --bg-base: #13352C; --bg-subtle: #183D33; --bg-sunken: #0B201B; --bg-hover: #1C4C40;
    --text-primary: #F3EEE6; --text-secondary: #C9C1B3; --text-tertiary: #9A9C92; --text-link: #DFC98E;
    --border-subtle: #1F463B; --border-default: rgba(223, 201, 142, .4); --border-strong: rgba(223, 201, 142, .6);
    --accent: #DFC98E; --accent-hover: #E8D7A6; --accent-press: #CDB577; --accent-soft: #1C4C40; --accent-soft-ink: #DFC98E;
    --field-bg: #183D33; --field-border: rgba(223, 201, 142, .35); --field-focus: #DFC98E;
    --ok-soft: #1C4C40; --ok-ink: #BFD9CC; --bad-soft: #3A2620; --bad-ink: #E8B9A6; --warn-soft: #3A2C20; --warn-ink: #E6C3A4;
    --shadow-color: 160 60% 3%;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-sans); color: var(--text-primary); background: var(--bg-app); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--field-focus); outline-offset: 2px; }

/* Таймер-кольцо */
.timer { position: relative; display: inline-grid; place-items: center; }
.timer svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.timer .t-track { fill: none; stroke: var(--border-subtle); stroke-width: 3; }
.timer .t-ring { fill: none; stroke: var(--green-700); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 0.25s linear; }
.timer .t-num { position: relative; font-weight: 700; font-variant-numeric: tabular-nums; }
.timer.low .t-ring { stroke: var(--gold); }
.timer.low .t-num { color: var(--warn-text); }
.timer.paused .t-ring { stroke: var(--muted); }
.timer.zero .t-num { color: var(--text-tertiary); }

/* Медиа */
.media-img { margin: 0; position: relative; display: grid; place-items: center; }
.media-img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; display: block; }
.media-img .missing-note { display: none; }
.media-img.missing img { display: none; }
.media-img.missing { background: repeating-linear-gradient(135deg, var(--bg-subtle) 0 14px, var(--bg-sunken) 14px 28px); border: 1.5px dashed var(--border-strong); border-radius: 16px; min-height: 8em; width: 100%; }
.media-img.missing .missing-note { display: block; color: var(--text-secondary); font-weight: 600; padding: 1em; text-align: center; }
.media-emoji { line-height: 1.1; letter-spacing: 0.08em; }

/* Тосты */
#toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 300; width: min(92vw, 420px); pointer-events: none; }
.toast { background: var(--text-primary); color: var(--bg-base); padding: 12px 16px; border-radius: 12px; font-size: 15px; font-weight: 500; box-shadow: var(--shadow-lg); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.toast.err { background: var(--danger); color: #fff; }
.toast.out { opacity: 0; transform: translateY(8px); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }

/* ===== Аватар игрока: градиентная капля с лицом и эмоциями ===== */
.ava { --s: 40px; width: var(--s); height: var(--s); flex: none; display: inline-grid; place-items: center; vertical-align: middle;
  background: var(--g); border-radius: 44% 52% 48% 50% / 48% 46% 52% 50%; position: relative; isolation: isolate;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.06); transition: filter .3s var(--ease); }
.ava::after { content: ''; position: absolute; inset: 8% 40% 52% 12%; border-radius: 50%; background: rgba(255,255,255,.28); filter: blur(calc(var(--s) * .06)); z-index: -1; }
.ava .ava-face { width: 100%; height: 100%; overflow: visible; }
.ava .ava-face * { transform-box: fill-box; transform-origin: center; }
.ava .ava-face path, .ava .ava-face .m-o { fill: none; stroke: #111; stroke-width: 8.5; stroke-linecap: round; stroke-linejoin: round; }
.ava .ava-face .eye { fill: #111; transition: opacity .15s; }
.ava .ava-face .m-grin { fill: #111; stroke-width: 4; }
.ava .ava-face .m-o { fill: #111; stroke-width: 0; }
.ava .m, .ava .wink { opacity: 0; transition: opacity .18s var(--ease); }
.ava .eyes { transition: transform .3s var(--ease); }

/* idle — улыбается и моргает */
.ava.mood-idle .m-smile, .ava.mood-ready .m-smile { opacity: 1; }
.ava.mood-idle .eye, .ava.mood-ready .eye, .ava.mood-think .eye, .ava.mood-done .eye-l { animation: ava-blink 4s infinite var(--bd, 0s); }
/* think — рот прямой, глаза бегают, голова покачивается */
.ava.mood-think .m-flat { opacity: 1; }
.ava.mood-think .eyes { animation: ava-look 3.2s infinite ease-in-out var(--bd, 0s); }
.ava.mood-think { animation: ava-tilt 3.2s infinite ease-in-out var(--bd, 0s); }
/* done — подмигивает и улыбается (ответ принят) */
.ava.mood-done .m-smile, .ava.mood-done .wink { opacity: 1; }
.ava.mood-done .eye-r { opacity: 0; }
.ava.mood-done { animation: ava-pop .5s var(--ease-out) both; }
/* happy — широкая улыбка, подпрыгивает */
.ava.mood-happy .m-grin { opacity: 1; }
.ava.mood-happy .eye { animation: ava-squint 1.8s infinite var(--bd, 0s); }
.ava.mood-happy { animation: ava-bounce .9s infinite var(--ease); }
/* answering — «О!», глаза шире, волнуется */
.ava.mood-answering .m-o { opacity: 1; }
.ava.mood-answering .eye { transform: scale(1.22); }
.ava.mood-answering { animation: ava-wiggle .5s infinite ease-in-out; }
/* ready — ждёт кнопку: улыбается и чуть подпрыгивает */
.ava.mood-ready { animation: ava-bob 1.4s infinite ease-in-out var(--bd, 0s); }
/* sad — промахнулся */
.ava.mood-sad .m-frown { opacity: 1; }
.ava.mood-sad .eyes { transform: translateY(5%); }
.ava.mood-sad { filter: saturate(.35) brightness(.97); }

.ava.still, .ava.still * { animation: none !important; }

@keyframes ava-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.12); } }
@keyframes ava-look { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-7%, -6%); } 55% { transform: translate(7%, -6%); } 75% { transform: translate(0, -3%); } }
@keyframes ava-tilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-5deg); } 65% { transform: rotate(5deg); } }
@keyframes ava-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes ava-bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(-12%) scale(.97, 1.03); } 70% { transform: translateY(0) scale(1.04, .96); } }
@keyframes ava-squint { 0%, 85%, 100% { transform: scaleY(1); } 92% { transform: scaleY(.35); } }
@keyframes ava-wiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes ava-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }