/* ===== Киоск, портретная ориентация (1080×1920 и подобные) ===== */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=Rubik:wght@400;600;800&display=swap');

/* Локальный шрифт с полным набором казахской кириллицы. */
@font-face {
  font-family: "Noto Sans KZ";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/noto-sans-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Noto Sans KZ";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/noto-sans-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Noto Sans KZ";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/noto-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --bg1: #0a1030;
  --bg2: #1b1145;
  --accent: #ffcf3f;
  --accent2: #ff9838;
  --neon: #4ee1ff;
  --pink: #ff5fa2;
  --card: rgba(255, 255, 255, 0.07);
  --card-border: rgba(255, 255, 255, 0.16);
  --text: #f6f8ff;
  --text-dim: #9fb0d8;
  --ok: #2fd97b;
  --bad: #ff5757;
  --radius: 2.4vh;
  font-size: clamp(14px, 1.6vh, 26px);
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: "Rubik", "Segoe UI", system-ui, sans-serif;
  background: linear-gradient(160deg, var(--bg1), var(--bg2) 60%, #0e1b4d);
  color: var(--text);
  user-select: none;
}

h1, .name, .r-title, .f-title, .f-score { font-family: "Unbounded", "Rubik", sans-serif; }

/* В казахской версии не смешиваем декоративный и системный шрифты:
   Ә Ғ Қ Ң Ө Ұ Ү Һ І отображаются одной гарнитурой и с ровной метрикой. */
html[lang="kk"] body,
html[lang="kk"] button,
html[lang="kk"] input,
html[lang="kk"] textarea,
html[lang="kk"] select {
  font-family: "Noto Sans KZ", "Segoe UI", Arial, sans-serif;
}
html[lang="kk"] h1,
html[lang="kk"] .name,
html[lang="kk"] .r-title,
html[lang="kk"] .f-title,
html[lang="kk"] .f-score,
html[lang="kk"] .fs-title {
  font-family: "Noto Sans KZ", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

/* Живой фон: плавающие светящиеся пятна */
body::before, body::after {
  content: '';
  position: fixed;
  width: 70vh; height: 70vh;
  border-radius: 50%;
  filter: blur(9vh);
  opacity: 0.32;
  z-index: 0;
  pointer-events: none;
}
body::before {
  background: radial-gradient(circle, #3f6bff, transparent 65%);
  top: -18vh; left: -18vh;
  animation: blob1 14s ease-in-out infinite alternate;
}
body::after {
  background: radial-gradient(circle, #b53fff, transparent 65%);
  bottom: -20vh; right: -18vh;
  animation: blob2 17s ease-in-out infinite alternate;
}
@keyframes blob1 { to { transform: translate(14vh, 10vh) scale(1.25); } }
@keyframes blob2 { to { transform: translate(-12vh, -12vh) scale(1.15); } }

body { display: flex; flex-direction: column; position: relative; }
body > * { position: relative; z-index: 1; }

/* ===== Шапка ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2vh 2.5vh;
  gap: 1.5vh;
}

.logo-top {
  height: 7.5vh;
  max-width: 46vw;
  object-fit: contain;
  filter: drop-shadow(0 0.4vh 1.5vh rgba(0, 0, 0, 0.45));
}

.btn-back {
  display: flex;
  align-items: center;
  gap: 1vh;
  background: var(--card);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 1.4vh 2.4vh;
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform 0.1s;
}
.btn-back:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.2); }

.lang-switch {
  display: flex;
  background: var(--card);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
  overflow: hidden;
}
.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 1.1rem;
  font-weight: 700;
  padding: 1.4vh 2.6vh;
  cursor: pointer;
  transition: background 0.2s;
}
.lang-switch button.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #241303;
}

/* ===== Главная ===== */
.home-hero { text-align: center; padding: 1.5vh 3vh 0.5vh; }
.home-hero .logo {
  font-size: 6vh;
  display: inline-block;
  animation: bounce 2.4s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-1.6vh) rotate(6deg); }
}
.home-hero h1 {
  font-size: 3.6vh;
  line-height: 1.3;
  margin-top: 1vh;
  background: linear-gradient(90deg, var(--accent), var(--pink), var(--neon), var(--accent));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 6s linear infinite;
}
@keyframes shine { to { background-position: 300% 0; } }
.home-hero p { color: var(--text-dim); font-size: 1.9vh; margin-top: 1vh; }
.touch-hint {
  display: inline-block;
  margin-top: 0.6vh;
  font-size: 1.7vh;
  color: var(--neon);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; transform: scale(0.97); } }

.tools-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 2.2vh;
  padding: 2.2vh 2.5vh 3vh;
}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.6vh;
  background: var(--card);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  padding: 2.5vh 2vh;
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: transform 0.12s;
}
.tool-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 0%, rgba(255, 255, 255, 0.12), transparent);
  pointer-events: none;
}
.tool-card:active { transform: scale(0.95); }
.tool-card .icon {
  font-size: 6.2vh;
  width: 11vh; height: 11vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  border: 1px solid var(--card-border);
  box-shadow: 0 0 4vh rgba(78, 225, 255, 0.15);
  animation: bounce 3s ease-in-out infinite;
}
.tool-card:nth-child(2) .icon { animation-delay: 0.4s; box-shadow: 0 0 4vh rgba(255, 207, 63, 0.2); }
.tool-card:nth-child(3) .icon { animation-delay: 0.8s; box-shadow: 0 0 4vh rgba(255, 95, 162, 0.2); }
.tool-card:nth-child(4) .icon { animation-delay: 1.2s; box-shadow: 0 0 4vh rgba(47, 217, 123, 0.2); }
.tool-card .name { font-size: 2.5vh; font-weight: 700; }
.tool-card .desc { font-size: 1.65vh; color: var(--text-dim); line-height: 1.4; }

/* ===== Общее для страниц инструментов ===== */
.page-title { text-align: center; padding: 0 3vh; }
.page-title h1 { font-size: 2.9vh; }
.page-title p { color: var(--text-dim); font-size: 1.8vh; margin-top: 0.7vh; }

/* ===== Чат ===== */
.chat-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1.5vh 2.5vh 2vh;
  gap: 1.5vh;
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.4vh;
  padding-right: 0.5vh;
}

.msg {
  max-width: 85%;
  padding: 1.8vh 2.2vh;
  border-radius: var(--radius);
  font-size: 2vh;
  line-height: 1.45;
  white-space: pre-wrap;
  user-select: text;
  animation: msgin 0.25s ease;
}
@keyframes msgin { from { opacity: 0; transform: translateY(1.5vh) scale(0.97); } }
.msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #241303;
  font-weight: 600;
  border-bottom-right-radius: 0.5vh;
  box-shadow: 0 0.6vh 2.5vh rgba(255, 165, 56, 0.25);
}
.msg.bot {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(8px);
  border-bottom-left-radius: 0.5vh;
}
.msg.typing { color: var(--text-dim); font-style: italic; }
.msg.typing::after { content: '⋯'; animation: pulse 1s infinite; }

.chips { display: flex; flex-wrap: wrap; gap: 1.2vh; }
.chips button {
  border: 1px solid var(--card-border);
  background: var(--card);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 1.7vh;
  padding: 1.4vh 2vh;
  border-radius: 5vh;
  cursor: pointer;
  transition: transform 0.1s;
}
.chips button:active { transform: scale(0.93); background: rgba(78, 225, 255, 0.25); }

.chat-input-row { display: flex; gap: 1.2vh; }
.chat-input-row input {
  flex: 1;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 2.1vh;
  padding: 2vh 2.2vh;
  outline: none;
}
.chat-input-row input::placeholder { color: var(--text-dim); }
.btn-mic {
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text);
  font-size: 2.6vh;
  width: 8vh;
  flex-shrink: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.1s;
}
.btn-mic:active { transform: scale(0.92); }
.btn-mic.recording {
  background: var(--bad);
  border-color: var(--bad);
  box-shadow: 0 0 3vh rgba(255, 87, 87, 0.6);
  animation: pulse 1s infinite;
}

.btn-send {
  border: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #241303;
  font-size: 2.1vh;
  font-weight: 800;
  padding: 0 3.5vh;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 0.6vh 3vh rgba(255, 165, 56, 0.35);
  transition: transform 0.1s;
}
.btn-send:active { transform: scale(0.93); }
.btn-send:disabled { opacity: 0.5; }

/* ===== Экранная клавиатура ===== */
.kbd { display: flex; flex-direction: column; gap: 0.9vh; }
.kbd-row { display: flex; gap: 0.9vh; justify-content: center; }
.kbd button {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.09);
  color: var(--text);
  font-size: 2vh;
  padding: 1.7vh 0;
  border-radius: 1.2vh;
  cursor: pointer;
}
.kbd button:active { background: var(--accent); color: #241303; transform: scale(0.92); }
.kbd button.wide { flex: 2.2; }
.kbd button.space { flex: 6; }

/* ===== Сканер лица ===== */
.face-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vh;
  padding: 1.5vh 3vh 3vh;
  min-height: 0;
  overflow-y: auto;
}

.cam-frame {
  position: relative;
  width: min(80vw, 50vh);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  border: 0.4vh solid var(--accent);
  box-shadow: 0 0 6vh rgba(255, 207, 63, 0.35);
  background: #000;
  flex-shrink: 0;
  transition: width 0.5s ease;
}
.cam-frame.small { width: min(36vw, 22vh); }

/* при показе результата всё ужимается, чтобы влезть в экран без прокрутки */
body.result-on .face-wrap { gap: 1.2vh; }
body.result-on .big-btn { padding: 1.6vh 4vh; font-size: 2vh; }
body.result-on .scan-status { min-height: 0; }
.cam-frame video, .cam-frame canvas, .cam-frame img {
  width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1);
}
.cam-frame.scanning { border-color: var(--neon); box-shadow: 0 0 2.5vh rgba(78, 225, 255, 0.5); }
/* Луч сканера ездит через transform, а не через top: сдвиг готового слоя
   браузер делает на видеокарте, тогда как смена top заставляет его каждый кадр
   пересчитывать раскладку — на слабых панелях это и есть заметные рывки. */
.scan-line {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 100%;
  background: linear-gradient(to bottom,
    transparent calc(50% - 0.5vh),
    rgba(78, 225, 255, 0.35) calc(50% - 0.5vh),
    var(--neon) calc(50% - 0.25vh),
    var(--neon) calc(50% + 0.25vh),
    rgba(78, 225, 255, 0.35) calc(50% + 0.5vh),
    transparent calc(50% + 0.5vh));
  animation: scan 1.4s ease-in-out infinite alternate;
  will-change: transform;
  display: none;
}
.cam-frame.scanning .scan-line { display: block; }
@keyframes scan { from { transform: translateY(-47%); } to { transform: translateY(47%); } }

/* сетка-оверлей при сканировании */
.scan-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(78, 225, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78, 225, 255, 0.16) 1px, transparent 1px);
  background-size: 3.5vh 3.5vh;
  display: none;
}
.cam-frame.scanning .scan-grid { display: block; }

.scan-status {
  min-height: 3.2vh;
  font-size: 2.1vh;
  font-weight: 600;
  color: var(--neon);
  text-align: center;
  animation: pulse 1.4s infinite;
}
.scan-status:empty { animation: none; }

.big-btn {
  border: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #241303;
  font-size: 2.4vh;
  font-weight: 800;
  padding: 2.2vh 5vh;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 0.8vh 4vh rgba(255, 165, 56, 0.4);
  transition: transform 0.1s;
}
.big-btn:active { transform: scale(0.94); }
.big-btn:disabled { opacity: 0.6; }
.big-btn.secondary { background: var(--card); color: var(--text); border: 1px solid var(--card-border); box-shadow: none; }

.face-result {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  padding: 1.8vh 2.2vh;
  text-align: center;
  display: none;
  animation: msgin 0.4s ease;
}
.face-result.show { display: block; }
.face-result .r-emoji { font-size: 4.6vh; animation: bounce 2s infinite; display: inline-block; }
.face-result .r-title {
  font-size: 2.7vh;
  font-weight: 800;
  margin-top: 0.8vh;
  background: linear-gradient(90deg, var(--accent), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.face-result .r-desc { font-size: 1.8vh; margin-top: 0.8vh; line-height: 1.4; }

/* шкалы в 2 колонки — вдвое ниже */
#r-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.5vh;
}

.stat { margin-top: 1.2vh; text-align: left; }
.stat .stat-name { font-size: 1.6vh; color: var(--text-dim); display: flex; justify-content: space-between; }
.stat .bar { height: 1.4vh; background: rgba(255, 255, 255, 0.1); border-radius: 1vh; margin-top: 0.5vh; overflow: hidden; }
.stat .bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--neon), var(--accent), var(--pink));
  border-radius: 1vh;
  width: 0;
  transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ===== Викторина ===== */
.quiz-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2.2vh;
  padding: 1.5vh 3vh 3vh;
  min-height: 0;
  overflow-y: auto;
}

.quiz-progress { display: flex; align-items: center; gap: 1.5vh; }
.quiz-progress .track { flex: 1; height: 1.6vh; background: rgba(255, 255, 255, 0.1); border-radius: 1vh; overflow: hidden; }
.quiz-progress .track i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--neon), var(--accent));
  transition: width 0.3s;
}
.quiz-progress span { font-size: 1.9vh; color: var(--text-dim); white-space: nowrap; }

.quiz-q {
  background: var(--card);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  padding: 3vh 2.5vh;
  font-size: 2.4vh;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  animation: msgin 0.3s ease;
}

.quiz-answers { display: flex; flex-direction: column; gap: 1.6vh; }
.quiz-answers button {
  border: 1px solid var(--card-border);
  background: var(--card);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 2.2vh;
  font-weight: 600;
  padding: 2.4vh 2.5vh;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  line-height: 1.35;
  transition: transform 0.1s;
  animation: msgin 0.3s ease backwards;
}
.quiz-answers button:nth-child(2) { animation-delay: 0.06s; }
.quiz-answers button:nth-child(3) { animation-delay: 0.12s; }
.quiz-answers button:nth-child(4) { animation-delay: 0.18s; }
.quiz-answers button:active { transform: scale(0.97); }
.quiz-answers button.correct {
  background: var(--ok); border-color: var(--ok); color: #fff;
  box-shadow: 0 0 4vh rgba(47, 217, 123, 0.5);
}
.quiz-answers button.wrong {
  background: var(--bad); border-color: var(--bad); color: #fff;
  animation: shake 0.4s;
}
@keyframes shake {
  25% { transform: translateX(-1vh); }
  50% { transform: translateX(1vh); }
  75% { transform: translateX(-0.5vh); }
}
.quiz-answers button:disabled { cursor: default; }

.quiz-final { text-align: center; margin: auto 0; animation: msgin 0.4s ease; }
.quiz-final .f-emoji { font-size: 9vh; display: inline-block; animation: bounce 2s infinite; }
.quiz-final .f-score {
  font-size: 4.5vh; font-weight: 800; margin-top: 1.5vh;
  background: linear-gradient(90deg, var(--accent), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.quiz-final .f-title { font-size: 2.6vh; font-weight: 700; margin-top: 1vh; }
.quiz-final .f-sub { font-size: 1.9vh; color: var(--text-dim); margin-top: 1vh; }
.quiz-final .big-btn { margin-top: 3vh; }

/* ===== AR-режим викторины (ответ пальцем) ===== */

/* во время игры — на весь экран: заголовок уходит, вопрос под шапкой */
body.game-on .page-title { display: none; }
body.game-on .topbar { position: relative; z-index: 5; }
body.game-on .ar-stage {
  position: fixed;
  inset: 0;
  border-radius: 0;
  border: none;
  z-index: 1;
}
body.game-on .ar-ui { padding-top: 10vh; }

.ar-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
}
.ar-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.ar-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 16, 48, 0.75), rgba(10, 16, 48, 0.25) 35%, rgba(10, 16, 48, 0.65));
  pointer-events: none;
}
.ar-ui {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.6vh;
  padding: 2vh;
  min-height: 0;
}
.ar-top { display: flex; align-items: center; gap: 1.5vh; }
.ar-score {
  background: rgba(10, 16, 48, 0.7);
  border: 1px solid var(--card-border);
  border-radius: 5vh;
  padding: 1vh 2vh;
  font-size: 2vh;
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
}
.ar-q {
  background: rgba(10, 16, 48, 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 2.2vh;
  font-size: 2.3vh;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  animation: msgin 0.3s ease;
}
.ar-answers {
  /* центрируем в свободном месте под вопросом: до кнопок удобно дотянуться
     рукой, не нагибаясь к низу экрана киоска */
  margin-top: auto;
  margin-bottom: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6vh;
}
.ar-answers button {
  border: 0.35vh solid var(--card-border);
  background: rgba(10, 16, 48, 0.72);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-size: 2vh;
  font-weight: 700;
  padding: 2.6vh 1.8vh;
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 1.3;
  min-height: 11vh;
  animation: msgin 0.3s ease backwards;
}
.ar-answers button:nth-child(2) { animation-delay: 0.06s; }
.ar-answers button:nth-child(3) { animation-delay: 0.12s; }
.ar-answers button:nth-child(4) { animation-delay: 0.18s; }
.ar-answers button.aim {
  border-color: var(--neon);
  box-shadow: 0 0 4vh rgba(78, 225, 255, 0.55);
  transform: scale(1.03);
}
.ar-answers button.grabbing {
  border-color: #ffd166;
  box-shadow: 0 0 5vh rgba(255, 209, 102, 0.6);
  transform: scale(1.06);
}
.ar-answers button.correct {
  background: var(--ok); border-color: var(--ok); color: #fff;
  box-shadow: 0 0 5vh rgba(47, 217, 123, 0.7);
}
.ar-answers button.wrong {
  background: var(--bad); border-color: var(--bad); color: #fff;
  animation: shake 0.4s;
}

.ar-cursor {
  position: absolute;
  z-index: 5;
  width: 7vh;
  height: 7vh;
  margin: -3.5vh 0 0 -3.5vh;
  border-radius: 50%;
  pointer-events: none;
  display: none;
  background:
    radial-gradient(circle at center, rgba(78, 225, 255, 0.9) 0 18%, transparent 20%),
    conic-gradient(var(--neon) calc(var(--p, 0) * 1turn), rgba(255, 255, 255, 0.25) 0);
  -webkit-mask: radial-gradient(circle, #000 0 20%, transparent 21% 62%, #000 63%);
  mask: radial-gradient(circle, #000 0 20%, transparent 21% 62%, #000 63%);
  filter: drop-shadow(0 0 1.5vh rgba(78, 225, 255, 0.8));
}
.ar-cursor.show { display: block; }

/* кулак сжат — курсор сжимается и меняет цвет: видно, что идёт выбор */
.ar-cursor { transition: transform 0.12s ease; }
.ar-cursor.grab {
  transform: scale(0.72);
  background:
    radial-gradient(circle at center, rgba(255, 209, 102, 0.95) 0 22%, transparent 24%),
    conic-gradient(#ffd166 calc(var(--p, 0) * 1turn), rgba(255, 255, 255, 0.25) 0);
  filter: drop-shadow(0 0 2vh rgba(255, 209, 102, 0.9));
}

.ar-hint {
  position: absolute;
  z-index: 3;
  left: 0; right: 0;
  bottom: 5vh;
  text-align: center;
  font-size: 2vh;
  color: var(--neon);
  text-shadow: 0 0 1vh rgba(0, 0, 0, 0.8);
  animation: pulse 1.6s infinite;
  pointer-events: none;
}

.hidden { display: none !important; }

/* конфетти-канвас */
#confetti-canvas {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 99;
}

::-webkit-scrollbar { width: 0.8vh; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 1vh; }

/* ===== На широких экранах (ПК) — портретная колонка 9:16 по центру ===== */
@media (min-aspect-ratio: 9/14) {
  html { background: #04061a; }
  body {
    position: relative;
    width: calc(100vh * 9 / 16);
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 0 10vh rgba(0, 0, 0, 0.8);
  }
  /* fixed-элементы прижимаем к колонке, а не ко всему экрану */
  .avatar-bg, .live-controls { position: absolute !important; }
  body.game-on .ar-stage { position: absolute !important; }
  /* ширины от vw пересчитываем от колонки */
  .cam-frame { width: min(80%, 50vh); }
  .cam-frame.small { width: min(36%, 22vh); }
  .bookS { width: 96%; max-width: none; }
  .avatar-frame { max-width: 94%; }
  .home-hero h1 { font-size: 3.2vh; }
  .tool-card .desc { font-size: 1.55vh; }
}