/* ===== GAMES ===== */

/* ---- Системы тем ---- */
:root {
  --gt-bg1: #001233;
  --gt-bg2: #001F3F;
  --gt-bg3: #002855;
  --gt-tile1: #0a3060;
  --gt-tile2: #0d3d7a;
  --gt-border: rgba(255,215,0,0.6);
  --gt-text: #FFD700;
  --gt-shadow: rgba(255,215,0,0.3);
  --gt-slot-bg: rgba(255,215,0,0.06);
  --gt-slot-border: rgba(255,215,0,0.25);
  --gt-glow: rgba(255,215,0,0.15);
  --gt-star1: rgba(255,255,255,0.8);
  --gt-star2: rgba(255,215,0,0.6);
}

/* Тема: Ребёнок — радуга */
[data-game-theme="child"] {
  --gt-bg1: #1a0533;
  --gt-bg2: #2d0a5e;
  --gt-bg3: #1a0533;
  --gt-tile1: #6b21a8;
  --gt-tile2: #7c3aed;
  --gt-border: rgba(251,191,36,0.8);
  --gt-text: #fbbf24;
  --gt-shadow: rgba(251,191,36,0.4);
  --gt-slot-bg: rgba(251,191,36,0.08);
  --gt-slot-border: rgba(251,191,36,0.3);
  --gt-glow: rgba(167,139,250,0.2);
}

/* Тема: Бизнес — неон */
[data-game-theme="business"] {
  --gt-bg1: #050505;
  --gt-bg2: #0a0a0f;
  --gt-bg3: #050510;
  --gt-tile1: #0f1f2e;
  --gt-tile2: #162840;
  --gt-border: rgba(0,255,200,0.7);
  --gt-text: #00ffc8;
  --gt-shadow: rgba(0,255,200,0.4);
  --gt-slot-bg: rgba(0,255,200,0.05);
  --gt-slot-border: rgba(0,255,200,0.25);
  --gt-glow: rgba(0,255,200,0.1);
}

/* Тема: Природа (teacher/adult) */
[data-game-theme="nature"] {
  --gt-bg1: #0a1f0a;
  --gt-bg2: #0f2d0f;
  --gt-bg3: #0a1a0a;
  --gt-tile1: #1a4a1a;
  --gt-tile2: #1f5c1f;
  --gt-border: rgba(134,239,172,0.7);
  --gt-text: #86efac;
  --gt-shadow: rgba(134,239,172,0.35);
  --gt-slot-bg: rgba(134,239,172,0.06);
  --gt-slot-border: rgba(134,239,172,0.25);
  --gt-glow: rgba(134,239,172,0.12);
}

/* ---- Хаб ---- */
.games-header{padding:16px 20px 8px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.games-header-title{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:700}
.games-body{flex:1;overflow-y:visible;padding:16px;display:flex;flex-direction:column;gap:16px}
.games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:599px){.games-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(min-width:600px){.games-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.games-grid{grid-template-columns:repeat(4,1fr)}}
.game-tile{border-radius:16px;overflow:hidden;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;box-shadow:0 4px 20px rgba(0,0,0,0.4)}
.game-tile:active{transform:scale(0.95)}
.game-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.game-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,215,0,0.2);border-radius:20px;padding:20px;cursor:pointer;transition:all 0.25s;display:flex;align-items:center;gap:16px;box-shadow:0 4px 20px rgba(0,0,0,0.3)}
.game-card:hover,.game-card:active{background:rgba(255,215,0,0.07);border-color:rgba(255,215,0,0.5);transform:translateY(-3px);box-shadow:0 8px 30px rgba(255,215,0,0.15)}
.game-card-icon{font-size:44px;flex-shrink:0;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.4))}
.game-card-info{flex:1}
.game-card-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:700;color:var(--gold);margin-bottom:4px}
.game-card-desc{font-size:12px;color:rgba(255,255,255,0.45);line-height:1.5}
.game-card-badge{background:rgba(255,215,0,0.12);border:1px solid rgba(255,215,0,0.3);border-radius:20px;padding:4px 12px;font-size:11px;color:var(--gold);white-space:nowrap;font-weight:600}

/* ---- Игровой экран ---- */
.anagram-screen{
  display:none;flex-direction:column;height:100%;padding:16px 12px;gap:14px;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 50% 0%,var(--gt-bg3) 0%,var(--gt-bg2) 40%,var(--gt-bg1) 100%);
  transition:background 0.5s;
}
.anagram-screen::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 20%,var(--gt-glow) 0%,transparent 50%),
    radial-gradient(circle at 80% 80%,var(--gt-glow) 0%,transparent 50%);
  pointer-events:none;
}
/* Звёздочки */
.anagram-screen::after{
  content:'✦ ✧ ✦ ✧ ✦';
  position:absolute;top:8px;left:0;right:0;text-align:center;
  font-size:8px;letter-spacing:12px;
  color:var(--gt-star2);opacity:0.3;pointer-events:none;
}
.anagram-screen.active{display:flex}

/* ---- Прогресс ---- */
.anagram-progress{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:relative;z-index:1}
.anagram-back-btn{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.4);border-radius:10px;color:#fff;font-size:16px;cursor:pointer;padding:6px 12px;transition:all 0.2s;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,0.8)}
.anagram-back-btn:hover{background:rgba(255,255,255,0.25);color:#fff}
.anagram-progress-bar{flex:1;height:6px;background:rgba(255,255,255,0.07);border-radius:3px;margin:0 12px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,0.4)}
.anagram-progress-fill{height:100%;background:linear-gradient(90deg,var(--gt-text),var(--gt-shadow));border-radius:3px;transition:width 0.5s cubic-bezier(0.4,0,0.2,1);box-shadow:0 0 10px var(--gt-shadow)}
.anagram-counter{font-size:12px;color:#fff;font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:1px;min-width:32px;text-align:right;text-shadow:0 1px 4px rgba(0,0,0,0.9)}

/* ---- Перевод ---- */
.anagram-translation{text-align:center;flex-shrink:0;position:relative;z-index:1;padding:8px 0}
.anagram-translation-label{font-size:11px;color:rgba(255,255,255,0.85);font-family:'Montserrat',sans-serif;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;text-shadow:0 1px 4px rgba(0,0,0,0.9)}
.anagram-translation-word{font-family:'Cormorant Garamond',serif;font-size:48px;font-weight:700;color:#FFD700;text-transform:uppercase;letter-spacing:3px;line-height:1.1;text-shadow:0 0 30px rgba(255,215,0,0.8),0 0 60px rgba(255,215,0,0.4),0 2px 6px rgba(0,0,0,0.9);-webkit-text-stroke:1px rgba(255,200,0,0.5)}

/* ---- Слоты (верхняя строка) ---- */
.anagram-slots{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;flex-shrink:0;min-height:72px;align-items:center;padding:4px 0;position:relative;z-index:1}
.letter-slot{
  min-width:52px;height:64px;border-radius:14px;padding:0 12px;
  border:2px solid rgba(255,255,255,0.7);
  background:rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-family:'Cormorant Garamond',serif;font-weight:700;
  color:var(--gt-text);cursor:pointer;
  transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:inset 0 2px 8px rgba(0,0,0,0.3);
  position:relative;
}
.letter-slot::after{content:'';position:absolute;inset:0;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.03) 0%,transparent 100%);pointer-events:none}
.letter-slot.filled{
  border-style:solid;
  background:linear-gradient(135deg,#1a3a6e,#0d2d5e);
  border-color:rgba(100,180,255,0.6);
  box-shadow:
    0 0 20px rgba(100,160,255,0.3),
    0 6px 0 #051535,
    inset 0 1px 0 rgba(255,255,255,0.15);
  transform:translateY(-5px) scale(1.08);
  text-shadow:0 0 15px rgba(150,200,255,0.9);
}
.letter-slot.correct{
  border-style:solid;
  background:linear-gradient(135deg,rgba(74,222,128,0.3),rgba(34,197,94,0.15));
  border-color:#4ade80;color:#4ade80;
  box-shadow:0 0 30px rgba(74,222,128,0.5),0 6px 0 rgba(20,100,40,0.8),inset 0 1px 0 rgba(255,255,255,0.2);
  transform:translateY(-5px) scale(1.08);
  text-shadow:0 0 15px rgba(74,222,128,0.9);
  animation:correctPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes correctPop{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.15)}100%{transform:translateY(-5px) scale(1.08)}}
.letter-slot.wrong{
  border-style:solid;
  background:linear-gradient(135deg,rgba(239,68,68,0.3),rgba(220,38,38,0.15));
  border-color:#ef4444;color:#ef4444;
  box-shadow:0 0 25px rgba(239,68,68,0.5),inset 0 1px 0 rgba(255,255,255,0.1);
  animation:shake 0.4s cubic-bezier(0.36,0.07,0.19,0.97);
}
@keyframes shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-8px)}30%{transform:translateX(8px)}45%{transform:translateX(-6px)}60%{transform:translateX(6px)}75%{transform:translateX(-3px)}90%{transform:translateX(3px)}}

/* ---- Подсказка ---- */
.anagram-hint{text-align:center;font-size:11px;color:rgba(255,255,255,0.85);flex-shrink:0;letter-spacing:1px;position:relative;z-index:1;text-shadow:0 1px 4px rgba(0,0,0,0.9);font-weight:600}

/* ---- Буквы (нижний ряд) — главный вау-эффект ---- */
.anagram-letters{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;flex-shrink:0;min-height:80px;align-items:center;padding:4px 0;position:relative;z-index:1}
.letter-btn{
  min-width:70px;height:84px;border-radius:20px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:38px;font-family:'Cormorant Garamond',serif;font-weight:700;
  color:#ffffff;padding:0 20px;
  position:relative;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  transition:transform 0.13s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.13s;
  text-transform:uppercase;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.6);
  /* Нейтральный тёмно-графитовый — подходит под любой фон */
  background:linear-gradient(160deg,#2a2a3e 0%,#1a1a2e 40%,#0f0f1e 100%);
  /* Объёмная 3D тень */
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.25),
    inset 0 -2px 0 rgba(0,0,0,0.6),
    inset 2px 0 0 rgba(255,255,255,0.08),
    inset -2px 0 0 rgba(0,0,0,0.4),
    0 10px 0 #08080f,
    0 11px 2px rgba(0,0,0,0.5),
    0 14px 25px rgba(0,0,0,0.7),
    0 0 0 1.5px rgba(255,255,255,0.18);
  text-shadow:
    0 0 25px rgba(255,255,255,0.9),
    0 0 50px rgba(200,220,255,0.5),
    0 2px 6px rgba(0,0,0,0.9);
}
/* Голографический блик — пробегает каждые 4с */
.letter-btn::before{
  content:'';position:absolute;top:0;left:-120%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent 10%,rgba(255,255,255,0.2) 50%,transparent 90%);
  animation:shimmer 4s ease-in-out infinite;
  pointer-events:none;border-radius:20px;
}
@keyframes shimmer{0%{left:-120%}25%{left:160%}100%{left:160%}}
/* Внутренняя рамка + верхний глянец */
.letter-btn::after{
  content:'';position:absolute;inset:3px;border-radius:17px;
  border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(180deg,rgba(255,255,255,0.09) 0%,rgba(255,255,255,0.02) 40%,transparent 100%);
  pointer-events:none;
}
.letter-btn:active{
  transform:translateY(9px) scale(0.93);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 1px 0 #08080f,
    0 3px 10px rgba(0,0,0,0.6);
}
.letter-btn.used{
  opacity:0;pointer-events:none;
  transform:scale(0.4) translateY(-30px) rotate(15deg);
  transition:all 0.2s cubic-bezier(0.55,0,1,0.45);
}

/* ---- Анимация +очки ---- */
.score-popup{
  position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);
  font-family:'Cormorant Garamond',serif;font-size:80px;font-weight:700;
  color:#FFD700;text-shadow:0 0 30px rgba(255,215,0,0.8),0 4px 8px rgba(0,0,0,0.5);
  pointer-events:none;z-index:3000;
  animation:scorePopup 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes scorePopup{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0.3)}
  40%{opacity:1;transform:translate(-50%,-60%) scale(1.2)}
  70%{opacity:1;transform:translate(-50%,-70%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-90%) scale(0.8)}
}

/* ---- Карточка после правильного ответа ---- */
.word-reveal{display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;flex:1;text-align:center;padding:20px}
.word-reveal.active{display:flex;animation:revealIn 0.4s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes revealIn{0%{opacity:0;transform:scale(0.8)}100%{opacity:1;transform:scale(1)}}
.word-reveal-emoji{font-size:90px;filter:drop-shadow(0 8px 20px rgba(0,0,0,0.5));animation:bounce 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.1s both}
@keyframes bounce{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.word-reveal-kaz{font-family:'Cormorant Garamond',serif;font-size:52px;font-weight:700;color:var(--gt-text);text-shadow:0 0 40px var(--gt-shadow);line-height:1}
.word-reveal-rus{font-size:18px;color:rgba(255,255,255,0.6);font-family:'Montserrat',sans-serif}
.word-reveal-btn{background:linear-gradient(135deg,var(--gt-text),var(--gt-shadow));color:#001F3F;border:none;border-radius:14px;padding:14px 48px;font-size:16px;font-weight:700;font-family:'Montserrat',sans-serif;cursor:pointer;box-shadow:0 6px 20px var(--gt-shadow);transition:all 0.2s;letter-spacing:0.5px}
.word-reveal-btn:active{transform:scale(0.96)}

/* ---- Итоговый экран ---- */
.games-result{display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;flex:1;text-align:center;padding:20px}
.games-result.active{display:flex;animation:revealIn 0.4s cubic-bezier(0.34,1.56,0.64,1)}
.games-result-emoji{font-size:72px;filter:drop-shadow(0 8px 20px rgba(0,0,0,0.4))}
.games-result-title{font-family:'Cormorant Garamond',serif;font-size:42px;font-weight:700;color:var(--gt-text);text-shadow:0 0 30px var(--gt-shadow)}
.games-result-score{font-size:16px;color:rgba(255,255,255,0.5);font-family:'Montserrat',sans-serif}
.games-result-points{font-size:32px;font-weight:700;color:#4ade80;text-shadow:0 0 20px rgba(74,222,128,0.5);font-family:'Cormorant Garamond',serif}
.games-result-btn{background:linear-gradient(135deg,var(--gt-text),var(--gt-shadow));color:#001F3F;border:none;border-radius:14px;padding:14px 48px;font-size:16px;font-weight:700;font-family:'Montserrat',sans-serif;cursor:pointer;box-shadow:0 6px 20px var(--gt-shadow)}

/* ---- Заглушка для limited ---- */
.games-limited{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;flex:1;text-align:center;padding:20px}
.games-limited-icon{font-size:64px;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4))}
.games-limited-title{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:700;color:var(--gold)}
.games-limited-desc{font-size:14px;color:rgba(255,255,255,0.4);line-height:1.7}
/* ===== /GAMES ===== */


/* ---- Фоны ---- */
.anagram-screen {
  background-image: url('/images/games/bg-nature-day.jpg');
  background-size: cover;
  background-position: center;
}
/* Лёгкий оверлей — чуть затемняет но фото видно */
.anagram-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 10, 5, 0.35);
  z-index: 0;
  pointer-events: none;
}
/* Все дочерние элементы поверх оверлея */
.anagram-screen > * {
  position: relative;
  z-index: 1;
}
.game-tile{border:2px solid rgba(255,215,0,0.4);box-shadow:0 4px 20px rgba(0,0,0,0.4),0 0 15px rgba(255,215,0,0.1)}
.game-tile:hover{border-color:rgba(255,215,0,0.8);box-shadow:0 8px 30px rgba(0,0,0,0.5),0 0 25px rgba(255,215,0,0.2)}

/* ===== MATCH GAME ===== */
.match-screen{display:none;flex-direction:column;height:100%;padding:16px 12px;gap:14px;position:relative;overflow:hidden;background-image:url('/images/games/bg-nature-day.jpg');background-size:cover;background-position:center}
.match-screen::before{content:'';position:absolute;inset:0;background:rgba(0,10,5,0.45);z-index:0;pointer-events:none}
.match-screen>*{position:relative;z-index:1}
.match-screen.active{display:flex}
.match-progress{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.match-area{flex:1;display:flex;gap:8px;align-items:stretch;position:relative}
.match-col{display:flex;flex-direction:column;gap:10px;flex:1}
.match-word{
  padding:14px 10px;border-radius:16px;
  color:#fff;font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:700;
  text-align:center;cursor:pointer;
  transition:all 0.2s cubic-bezier(0.34,1.56,0.64,1);
  user-select:none;-webkit-tap-highlight-color:transparent;
  position:relative;overflow:hidden;
  /* Русские — фиолетово-розовые */
  background:linear-gradient(135deg,#3d1a6e 0%,#2d1050 100%);
  border:2px solid rgba(180,100,255,0.5);
  box-shadow:0 6px 0 rgba(0,0,0,0.4),0 8px 20px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.15);
  text-shadow:0 1px 4px rgba(0,0,0,0.8);
}
.match-word::before{
  content:'';position:absolute;top:0;left:0;right:0;height:45%;
  background:linear-gradient(180deg,rgba(255,255,255,0.1) 0%,transparent 100%);
  border-radius:16px 16px 0 0;pointer-events:none;
}
.match-word.kaz{
  background:linear-gradient(135deg,#0d3a7a 0%,#0a2550 100%);
  border-color:rgba(100,180,255,0.5);
  box-shadow:0 6px 0 rgba(0,0,10,0.5),0 8px 20px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.15);
}
.match-word.selected{
  border-color:#FFD700;
  background:linear-gradient(135deg,rgba(255,180,0,0.3),rgba(255,120,0,0.2));
  color:#FFD700;
  box-shadow:0 0 25px rgba(255,215,0,0.6),0 6px 0 rgba(100,60,0,0.5),inset 0 1px 0 rgba(255,255,255,0.2);
  transform:translateY(-4px) scale(1.05);
  text-shadow:0 0 15px rgba(255,215,0,0.8);
}
.match-word.kaz.selected{
  border-color:#60a5fa;
  background:linear-gradient(135deg,rgba(96,165,250,0.3),rgba(59,130,246,0.2));
  color:#60a5fa;
  box-shadow:0 0 25px rgba(96,165,250,0.6),0 6px 0 rgba(0,30,80,0.5),inset 0 1px 0 rgba(255,255,255,0.2);
  transform:translateY(-4px) scale(1.05);
  text-shadow:0 0 15px rgba(96,165,250,0.8);
}
.match-word.matched{
  border-color:#4ade80;
  background:linear-gradient(135deg,rgba(74,222,128,0.25),rgba(34,197,94,0.15));
  color:#4ade80;
  box-shadow:0 0 25px rgba(74,222,128,0.5),0 6px 0 rgba(0,60,20,0.5),inset 0 1px 0 rgba(255,255,255,0.2);
  pointer-events:none;
  text-shadow:0 0 15px rgba(74,222,128,0.8);
  animation:matchPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes matchPop{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
.match-word.wrong{
  border-color:#ef4444;
  background:linear-gradient(135deg,rgba(239,68,68,0.3),rgba(220,38,38,0.2));
  color:#ef4444;
  box-shadow:0 0 25px rgba(239,68,68,0.5);
  animation:shake 0.4s;
}
/* SVG линии соединений */
.match-lines{position:absolute;inset:0;pointer-events:none;z-index:2}
/* ===== /MATCH GAME ===== */

/* ===== CHOICE GAME ===== */
@keyframes choiceIn {
  to { opacity:1; transform:translateY(0); }
}
#choice-rus {
  font-size:36px;
  font-weight:800;
  color:#fff;
  text-shadow:0 0 30px var(--gt-shadow), 0 2px 4px rgba(0,0,0,0.5);
  letter-spacing:1px;
  animation:pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { text-shadow:0 0 20px var(--gt-shadow),0 2px 4px rgba(0,0,0,0.5); }
  50% { text-shadow:0 0 40px var(--gt-text),0 2px 4px rgba(0,0,0,0.5); }
}
#choice-options {
  padding: 0 16px;
}


/* ===== CHOICE GAME WOW ===== */
#choice-screen {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.choice-header {
  padding: 16px 20px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
}
.choice-progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
  overflow: hidden;
}
.choice-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gt-text), #fff);
  border-radius: 8px;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 8px var(--gt-text);
}
.choice-counter {
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--gt-text);
  min-width: 36px;
  text-align: right;
}
.choice-combo {
  font-size: 13px;
  font-weight: 800;
  color: #ff6b00;
  text-shadow: 0 0 10px #ff6b00;
  min-width: 48px;
  text-align: center;
  transition: all 0.2s;
}
.choice-question-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px 16px;
}
.choice-label {
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 16px;
}
.choice-word {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 40px var(--gt-shadow), 0 4px 8px rgba(0,0,0,0.5);
  letter-spacing: 1px;
  transition: all 0.3s;
}
.choice-word.shake {
  animation: choiceShake 0.4s ease;
}
.choice-word.correct-flash {
  animation: choiceCorrectFlash 0.4s ease;
}
@keyframes choiceShake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)}
  60%{transform:translateX(-6px)}
  80%{transform:translateX(6px)}
}
@keyframes choiceCorrectFlash {
  0%{transform:scale(1)}
  50%{transform:scale(1.12);color:#4ade80;text-shadow:0 0 30px #4ade80}
  100%{transform:scale(1)}
}
.choice-options-area {
  padding: 0 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.choice-btn {
  width: 100%;
  padding: 17px 20px;
  border-radius: 18px;
  border: none;
  border-bottom: 4px solid rgba(0,0,0,0.3);
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s, border-bottom 0.1s, filter 0.2s;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.3px;
  opacity: 0;
  transform: translateY(16px);
}
.choice-btn.visible {
  animation: choiceBtnIn 0.3s forwards;
}
.choice-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.choice-btn:active:not(:disabled) {
  transform: translateY(2px) !important;
  border-bottom-width: 2px !important;
}
.choice-btn.opt-a { background: #1cb0f6; color: #fff; border-color: #0e8bbf; }
.choice-btn.opt-b { background: #ff4b4b; color: #fff; border-color: #cc3232; }
.choice-btn.opt-c { background: #ffc800; color: #333; border-color: #d4a800; }
.choice-btn.opt-d { background: #ce82ff; color: #fff; border-color: #a855f7; }
.choice-btn.correct {
  background: #4ade80 !important;
  border-color: #16a34a !important;
  color: #fff !important;
  transform: scale(1.03) !important;
  filter: brightness(1.1);
}
.choice-btn.wrong {
  background: #444 !important;
  border-color: #222 !important;
  color: rgba(255,255,255,0.3) !important;
  filter: grayscale(1);
}
@keyframes choiceBtnIn {
  to { opacity:1; transform:translateY(0); }
}
.choice-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: ripple 0.5s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}
.choice-particle {
  position: fixed;
  pointer-events: none;
  font-size: 20px;
  animation: particleFly 0.8s ease-out forwards;
  z-index: 9999;
}
@keyframes particleFly {
  0% { opacity:1; transform:translate(0,0) scale(1); }
  100% { opacity:0; transform:translate(var(--px),var(--py)) scale(0.3); }
}