@font-face {
  font-family: "BankGothic Md BT";
  src: url("assets/bankgothicmdbt_medium.otf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #060913;
  --panel: rgba(11, 17, 31, .83);
  --panel-2: rgba(16, 24, 42, .72);
  --line: rgba(255,255,255,.09);
  --text: #f4f7ff;
  --muted: #9ba6bd;
  --cyan: #65f6de;
  --violet: #8f7dff;
  --pink: #ff62c6;
  --green: #6dff9d;
  --shadow: 0 30px 100px rgba(0,0,0,.42);
  --font-display: "BankGothic Md BT", "Roboto", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; }
body { font-family:Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--bg); color:var(--text); overflow:hidden; }
button { font:inherit; color:inherit; }
.app-shell { position:relative; width:100%; height:100%; overflow:hidden; }
.screen { position:absolute; inset:0; display:flex; }
.hidden { display:none !important; }
.ambient-layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.bg-orb { position:absolute; border-radius:50%; filter:blur(75px); opacity:.22; pointer-events:none; mix-blend-mode:screen; will-change:transform; }
.orb-a { width:44vw; height:44vw; right:-12vw; top:-15vw; background:var(--violet); animation: driftA 13s ease-in-out infinite alternate; }
.orb-b { width:38vw; height:38vw; left:-14vw; bottom:-18vw; background:var(--cyan); animation: driftB 16s ease-in-out infinite alternate; }
.orb-c { width:28vw; height:28vw; left:32vw; top:18vh; background:var(--pink); opacity:.12; animation: driftC 18s ease-in-out infinite alternate; }
.orb-d { width:25vw; height:25vw; right:24vw; bottom:-8vw; background:#3d7dff; opacity:.10; animation: driftD 20s ease-in-out infinite alternate; }
@keyframes driftA { from { transform:translate3d(-2vw, 1vh, 0) scale(1); } to { transform:translate3d(-8vw, 8vh, 0) scale(1.12); } }
@keyframes driftB { from { transform:translate3d(0, 0, 0) scale(1); } to { transform:translate3d(9vw, -6vh, 0) scale(1.14); } }
@keyframes driftC { from { transform:translate3d(0, 0, 0); } to { transform:translate3d(8vw, -7vh, 0) scale(1.1); } }
@keyframes driftD { from { transform:translate3d(0, 0, 0); } to { transform:translate3d(-7vw, -4vh, 0) scale(1.15); } }
.grid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom, rgba(0,0,0,.72), transparent); pointer-events:none; }
.screen-start {
  align-items: center;
  justify-content: space-between;
  padding: 6vh 9vw;
  position: relative; /* важно для абсолютного позиционирования кнопки */
}
.start-card { width:min(720px, 75vw); position:relative; z-index:1; }
.start-hero-btn {
  position: absolute;
  top: 170%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  
  width: 100%;
  max-width: 500px;
  min-height: 100px;
  padding: 20px 30px;
  margin: 0; /* убираем старые отступы */
  
  font-size: 28px;
  letter-spacing: .02em;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--cyan), #8dfae9);
  color: #04100e;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 38px rgba(101,246,222,.18);
  transition: .2s ease;
  
  animation: buttonFloat 3.2s ease-in-out infinite, buttonGlow 2.4s ease-in-out infinite;
}
.start-hero-btn span {
  font-size: 32px;
  transition: transform .25s ease;
}

.start-hero-btn:hover span {
  transform: translateX(5px);
}
@keyframes buttonFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes buttonGlow { 0%,100% { box-shadow:0 18px 50px rgba(101,246,222,.10), inset 0 1px 0 rgba(255,255,255,.10); } 50% { box-shadow:0 22px 70px rgba(101,246,222,.20), 0 0 28px rgba(143,125,255,.14), inset 0 1px 0 rgba(255,255,255,.16); } }
.brand-row { display:flex; gap:18px; align-items:flex-start; }
.brand-mark {
  width: 120px;          /* было 82px */
  height: 120px;         /* было 82px */
  border-radius: 24px;   /* чуть больше скругление */
  border: 1px solid rgba(255,255,255,.16);
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(101,246,222,.16), rgba(143,125,255,.13));
  box-shadow: inset 0 0 30px rgba(101,246,222,.05);
}
/* Увеличиваем расстояние между логотипом и заголовком */
.brand-row {
  display: flex;
  gap: 24px;             /* было 18px */
  align-items: center;   /* выравниваем по центру для лучшего вида */
}
.brand-mark img { width:100%; height:100%; object-fit:contain; padding:10px; }
.logo-fallback { display:none; font-family:var(--font-display); font-size:8px; line-height:1.2; text-align:center; letter-spacing:.08em; color:var(--cyan); }
.logo-missing .logo-fallback { display:block; }
.eyebrow { letter-spacing:.2em; font-size:11px; font-weight:700; color:#79859e; }
h1, h2, h3, .modal-icon, .result-badge, .final-score strong { font-family: var(--font-display); }
h1 { margin:8px 0 0; font-size:clamp(56px, 7vw, 100px); line-height:.95; letter-spacing:-.06em; }
h1 span { color:var(--cyan); }
.hero-subtitle { margin:28px 0 18px; color:#c4ccda; font-size:16px; font-weight:600; }
.hero-divider { width:90px; height:2px; background:linear-gradient(90deg, var(--cyan), transparent); margin:24px 0; }
.hero-copy { width:min(520px, 100%); color:var(--muted); line-height:1.7; font-size:15px; }
.primary-btn { margin-top:24px; border:0; border-radius:15px; padding:15px 21px; min-width:170px; background:linear-gradient(135deg, var(--cyan), #8dfae9); color:#04100e; font-weight:800; cursor:pointer; box-shadow:0 12px 38px rgba(101,246,222,.18); transition:.2s ease; }
.primary-btn:hover { transform:translateY(-2px); filter:brightness(1.05); }
.primary-btn span { float:right; margin-left:28px; }
.meta-note { margin-top:16px; color:#707d94; font-size:12px; display:flex; align-items:center; gap:9px; }
.pulse-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 14px var(--green); }
.start-side { z-index:1; display:grid; gap:12px; min-width:190px; }
.mini-stat { border:1px solid var(--line); background:rgba(255,255,255,.035); backdrop-filter:blur(14px); padding:16px 18px; border-radius:16px; display:flex; flex-direction:column; gap:4px; }
.stat-num { font-size:25px; font-weight:800; }
.mini-stat span:last-child { color:#77839b; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.modal-layer { position:absolute; inset:0; z-index:50; display:grid; place-items:center; background:rgba(3,6,13,.72); backdrop-filter:blur(12px); padding:24px; }
.modal-card { width:min(610px, 100%); border:1px solid rgba(255,255,255,.12); border-radius:26px; background:linear-gradient(145deg, rgba(14,21,37,.96), rgba(8,12,24,.97)); box-shadow:var(--shadow); padding:34px; position:relative; }
.modal-close { position:absolute; right:18px; top:15px; width:34px; height:34px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.04); cursor:pointer; color:#98a3b8; }
.modal-icon { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; background:rgba(101,246,222,.10); color:var(--cyan); font-size:24px; margin-bottom:20px; }
.modal-card h2, .finish-card h2 { margin:8px 0; font-size:35px; letter-spacing:-.04em; }
.modal-lead { color:#aab5c9; line-height:1.6; }
.rules-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:24px 0; }
.rule-item { display:flex; gap:12px; border:1px solid var(--line); padding:15px; border-radius:15px; background:rgba(255,255,255,.025); color:#b4bfd1; line-height:1.45; font-size:13px; }
.rule-item strong { color:var(--cyan); }
.intro-tip { border-left:2px solid var(--violet); padding:12px 0 12px 13px; color:#8f9ab0; font-size:12px; line-height:1.55; }
.full { width:100%; }
.hud { position:absolute; z-index:5; left:28px; right:28px; top:22px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
.hud-left { display:flex; align-items:center; gap:13px; min-width:0; }
.quantum-logo {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.quantum-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.quantum-meta h2 { margin:6px 0 0; font-size:20px; font-family:var(--font-display); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hud-center { display:flex; justify-content:center; }
.timer-ring { position:relative; width:76px; height:76px; display:grid; place-items:center; }
.timer-ring svg { position:absolute; width:100%; height:100%; transform:rotate(-90deg); }
.ring-bg, .ring-progress { fill:none; stroke-width:3; }
.ring-bg { stroke:rgba(255,255,255,.08); }
.ring-progress { stroke:var(--cyan); stroke-linecap:round; transition:stroke-dashoffset .2s linear; }
#timerText { font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; }
.hud-right { display:flex; justify-content:flex-end; gap:10px; }
.score-box, .progress-box { border:1px solid var(--line); border-radius:14px; padding:10px 14px; background:rgba(255,255,255,.025); min-width:90px; }
.score-box span, .progress-box span { display:block; font-size:9px; letter-spacing:.15em; color:#6d7890; font-weight:700; }
.score-box strong, .progress-box strong { display:block; margin-top:4px; font-size:18px; }
.task-track { position:absolute; z-index:4; top:105px; left:28px; right:28px; height:3px; background:rgba(255,255,255,.06); border-radius:10px; }
#taskTrackFill { height:100%; width:0%; background:linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow:0 0 16px rgba(101,246,222,.22); transition:width .25s ease; }
.game-stage { position:absolute; inset:109px 28px 60px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.01)); overflow:hidden; }
.stage-topline { position:absolute; top:18px; left:21px; right:21px; display:flex; justify-content:space-between; align-items:center; color:#69758d; font-size:10px; letter-spacing:.17em; font-weight:700; }
.key-hint { color:#7e8aa2; }
.key-hint small { letter-spacing:0; font-size:10px; font-weight:500; margin-left:8px; }
.placeholder-area { position:absolute; inset:48px 0 0; display:grid; place-items:center; }
.placeholder-glow { position:absolute; width:380px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(101,246,222,.11), transparent 67%); filter:blur(8px); }
.placeholder-card { width:min(570px, 80%); text-align:center; position:relative; }
.placeholder-index { color:#5a667f; font-size:12px; font-weight:800; letter-spacing:.15em; }
.placeholder-icon { width:78px; height:78px; margin:16px auto 20px; border:1px solid rgba(101,246,222,.22); border-radius:22px; display:grid; place-items:center; color:var(--cyan); background:rgba(101,246,222,.06); font-size:30px; }
.placeholder-card h3 { margin:0; font-size:34px; font-family:var(--font-display); letter-spacing:-.04em; }
.placeholder-card p { max-width:470px; margin:14px auto 0; color:#8591a8; line-height:1.65; font-size:13px; }
.ghost-btn { margin-top:22px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); border-radius:13px; padding:12px 17px; cursor:pointer; font-weight:700; }
.ghost-btn span { color:var(--cyan); margin-left:7px; font-size:11px; letter-spacing:.12em; }
.game-footer { position:absolute; z-index:5; bottom:18px; left:28px; right:28px; display:flex; justify-content:space-between; align-items:center; color:#626e84; font-size:10px; letter-spacing:.13em; font-weight:700; }
.footer-dots { display:flex; gap:7px; }
.footer-dots span { width:7px; height:7px; border-radius:50%; border:1px solid #657188; }
.footer-dots span.done { background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 10px rgba(101,246,222,.28); }
.intermission, .finish { align-items:center; justify-content:center; text-align:center; padding:24px; background:radial-gradient(circle at 50% 30%, rgba(109,255,157,.08), transparent 26%); }
.intermission-content, .finish-card { width:min(620px, 100%); }
.result-badge { margin:20px auto; width:86px; height:86px; display:grid; place-items:center; border-radius:28px; font-size:39px; background:rgba(109,255,157,.10); border:1px solid rgba(109,255,157,.23); color:var(--green); box-shadow:0 0 50px rgba(109,255,157,.09); }
.intermission h2, .finish-card h2 { font-size:44px; font-family:var(--font-display); margin:0; letter-spacing:-.05em; }
.intermission p, .finish-card p { color:#8793aa; line-height:1.6; }
.round-score-card { width:190px; margin:22px auto; border:1px solid rgba(109,255,157,.18); border-radius:20px; padding:15px; background:rgba(109,255,157,.045); }
.round-score-card span, .round-score-card small { display:block; color:#708097; font-size:10px; letter-spacing:.14em; }
.round-score-card strong { font-size:39px; color:var(--green); display:block; margin:5px 0; }
.next-round { display:flex; justify-content:space-between; align-items:center; text-align:left; border:1px solid var(--line); border-radius:17px; padding:16px 18px; background:rgba(255,255,255,.025); }
.next-round span { display:block; color:#69758d; font-size:9px; letter-spacing:.15em; font-weight:800; }
.next-round strong { display:block; margin-top:5px; font-size:14px; }
#breakCountdown { font-size:29px; color:var(--cyan); }
.finish-card { border:1px solid var(--line); background:rgba(9,14,25,.78); backdrop-filter:blur(16px); box-shadow:var(--shadow); border-radius:28px; padding:40px; }
.finish-card .modal-icon { margin:0 auto 18px; }
.final-score { margin:22px 0; display:flex; justify-content:center; gap:10px; align-items:baseline; }
.final-score strong { font-size:64px; letter-spacing:-.06em; }
.final-score span { color:#79849a; }
.finish-stats { display:flex; justify-content:center; gap:50px; margin-bottom:10px; }
.finish-stats b { display:block; font-size:18px; }
.finish-stats span { display:block; font-size:11px; color:#717e96; margin-top:4px; text-transform:uppercase; letter-spacing:.1em; }
@media (max-width: 760px) {
  body { overflow:auto; }
  .screen-start { min-height:100%; padding:10vh 7vw; align-items:flex-start; }
  .start-side { display:none; }
  .start-card { width:100%; }
  h1 { font-size:58px; }
  .hud { grid-template-columns:1fr auto; left:14px; right:14px; top:14px; }
  .hud-center { grid-column:2; grid-row:1; }
  .hud-right { position:absolute; top:68px; right:0; }
  .task-track { top:130px; left:14px; right:14px; }
  .game-stage { inset:134px 14px 54px; border-radius:18px; }
  .game-footer { left:14px; right:14px; }
  .placeholder-card { width:88%; }
  .placeholder-card h3 { font-size:26px; }
  .rules-grid { grid-template-columns:1fr; }
}

/* Completed-round success modal */
.round-complete-card {
  width: min(560px, 100%);
  text-align: center;
  border-color: rgba(109,255,157,.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(109,255,157,.20), transparent 38%),
    linear-gradient(145deg, rgba(10,30,25,.97), rgba(8,18,20,.98));
  box-shadow: 0 26px 100px rgba(0,0,0,.42), 0 0 65px rgba(109,255,157,.12), inset 0 1px 0 rgba(255,255,255,.04);
}
.success-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  color: #06200f;
  background: linear-gradient(145deg, #8dffb0, #61ef91);
  font-size: 38px;
  font-weight: 900;
  box-shadow: 0 0 34px rgba(109,255,157,.28);
}
.success-eyebrow { color: rgba(141,255,176,.72); }
.round-complete-card h2 { margin-top: 8px; font-size: 38px; }
.completion-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 18px; }
.completion-stat {
  border: 1px solid rgba(109,255,157,.18);
  background: rgba(109,255,157,.055);
  border-radius: 18px;
  padding: 16px 12px;
}
.completion-stat span { display:block; color: rgba(195,222,202,.58); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.completion-stat strong { display:block; margin: 7px 0 4px; font-size: 34px; color: #8dffb0; font-variant-numeric: tabular-nums; }
.completion-stat small { color: rgba(170,194,181,.6); font-size: 11px; }
.completion-time strong { font-size: 31px; }
.completion-progress { margin-top: 8px; text-align: left; }
.completion-progress-bar { height: 7px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.08); }
.completion-progress-bar span { display:block; height:100%; width:100%; border-radius:inherit; background: linear-gradient(90deg, #72f49a, #b0ffbf); box-shadow: 0 0 18px rgba(109,255,157,.22); }
.completion-progress-meta { display:flex; justify-content:space-between; margin-top: 8px; color: rgba(170,194,181,.58); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.completion-progress-meta b { color: #91ffb0; }
@media (max-width: 620px) {
  .round-complete-card { padding: 26px 20px; }
  .completion-stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-orb, .start-hero-btn { animation:none !important; }
}


/* Mini games shell */
.mini-game-host { position:absolute; inset:0; overflow:hidden; border-radius:inherit; }
.mini-game { position:absolute; inset:0; padding:clamp(24px,4vw,46px); overflow:auto; }
.mini-game-inner { width:min(900px,100%); min-height:100%; margin:0 auto; display:flex; flex-direction:column; justify-content:center; }
.mini-game-kicker { color:#68748c; font-size:10px; letter-spacing:.18em; font-weight:800; text-transform:uppercase; text-align:center; }
.mini-game-title { margin:10px 0 10px; text-align:center; font-family:var(--font-display); font-size:clamp(28px,4vw,42px); letter-spacing:-.04em; }
.mini-game-desc { max-width:680px; margin:0 auto 24px; color:#8d98ad; text-align:center; line-height:1.6; font-size:13px; }
.it-choice-grid { width:min(820px,100%); margin:10px auto 20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.it-choice { position:relative; min-height:78px; border:1px solid rgba(111,143,180,.18); border-radius:16px; background:linear-gradient(180deg,rgba(18,33,56,.88),rgba(10,20,36,.92)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.015),0 10px 25px rgba(0,0,0,.18); cursor:pointer; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease; text-align:left; padding:15px 17px; overflow:hidden; }
.it-choice::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 0 45%,rgba(101,246,222,.08) 47%,transparent 50%); transform:translateX(-120%); transition:transform .5s ease; }
.it-choice:hover { transform:translateY(-2px); border-color:rgba(101,246,222,.4); box-shadow:0 12px 32px rgba(0,0,0,.24),0 0 22px rgba(101,246,222,.06); }
.it-choice:hover::before { transform:translateX(120%); }
.it-choice.selected { border-color:rgba(101,246,222,.62); background:linear-gradient(180deg,rgba(23,50,65,.96),rgba(10,28,37,.96)); box-shadow:inset 0 0 0 1px rgba(101,246,222,.11),0 0 22px rgba(101,246,222,.08); }
.it-choice-number { display:block; color:#687892; font-size:9px; letter-spacing:.14em; font-weight:800; }
.it-choice-label { display:block; margin-top:8px; font-family:var(--font-display); font-size:clamp(16px,2vw,21px); letter-spacing:-.02em; }
.it-choice-sub { display:block; margin-top:4px; color:#74829b; font-size:11px; }
.it-check-row { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.it-check-row button { min-width:148px; }
.it-message { min-height:20px; margin-top:12px; text-align:center; color:#7f8ba1; font-size:12px; }
.it-message.error { color:#ff9eae; }
.it-counter-card { width:min(520px,100%); margin:28px auto 0; padding:24px; border:1px solid rgba(255,255,255,.08); border-radius:22px; background:rgba(6,14,27,.62); box-shadow:inset 0 1px 0 rgba(255,255,255,.03); text-align:center; }
.it-counter { font-family:var(--font-display); font-size:clamp(44px,7vw,72px); letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.it-counter span { color:var(--cyan); }
.it-press-note { margin-top:8px; color:#808ca2; font-size:12px; }
.code-rain { position:absolute; inset:0; opacity:.17; filter:blur(1.2px); pointer-events:none; overflow:hidden; font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#86f6df; }
.code-column { position:absolute; top:-30%; white-space:pre; opacity:.8; animation:codeFall linear infinite; }
@keyframes codeFall { from { transform:translateY(0); } to { transform:translateY(160%); } }
.mini-game-code-content { position:relative; z-index:2; width:100%; min-height:100%; display:flex; align-items:center; justify-content:center; }
.mini-game-code-content .mini-game-inner { position:relative; z-index:2; }
.task-success-overlay { position:absolute; inset:0; z-index:10; display:grid; place-items:center; background:rgba(5,22,14,.70); backdrop-filter:blur(8px); }
.task-success-card { width:min(500px,86%); padding:30px; text-align:center; border:1px solid rgba(109,255,157,.3); border-radius:24px; background:radial-gradient(circle at 50% 0%,rgba(109,255,157,.17),transparent 42%),linear-gradient(145deg,rgba(10,31,23,.98),rgba(7,19,16,.98)); box-shadow:0 24px 80px rgba(0,0,0,.38),0 0 50px rgba(109,255,157,.08); animation:successPop .28s ease-out; }
@keyframes successPop { from { transform:translateY(8px) scale(.98); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }
.task-success-icon { width:64px; height:64px; margin:0 auto 16px; display:grid; place-items:center; border-radius:20px; background:linear-gradient(145deg,#8dffb0,#61ef91); color:#06200f; font-size:34px; font-weight:900; box-shadow:0 0 32px rgba(109,255,157,.22); }
.task-success-card h3 { margin:7px 0 8px; font-size:32px; font-family:var(--font-display); }
.task-success-card p { color:#8fa697; font-size:13px; line-height:1.6; margin:0 auto; }
.task-success-countdown { margin-top:18px; }
.task-success-countdown span { display:block; color:#8dffb0; font-family:var(--font-display); font-size:42px; font-variant-numeric:tabular-nums; }
.task-success-countdown small { display:block; margin-top:2px; color:#708577; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.placeholder-future { display:grid; place-items:center; min-height:100%; text-align:center; }
.placeholder-future h3 { margin:14px 0 10px; font-family:var(--font-display); font-size:32px; }
.placeholder-future p { max-width:540px; margin:0 auto; color:#8290a7; line-height:1.6; font-size:13px; }
@media (max-width:760px) { .it-choice-grid { grid-template-columns:1fr; } .mini-game { padding:20px 16px; } .it-choice { min-height:70px; } }

/* ===== Пиксельные кнопки для IT-игры 1 ===== */
.it-choice-grid.pixel-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-width: 100%;
  margin: 16px auto;
}

.it-choice-pixel {
  background: #1a2636;
  border: 2px solid #3a4a5a;
  border-radius: 0;
  padding: 8px 4px;
  min-height: 70px;
  text-align: center;
  color: #b0c4de;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 4px 4px 0 #0a0f1a;
  image-rendering: pixelated;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.2;
}

.it-choice-pixel:hover {
  background: #2a3a4a;
  border-color: #6a8aaa;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #0a0f1a;
}

.it-choice-pixel.selected {
  background: #2a4a3a;
  border-color: #6fdc4d;
  color: #d4ffd4;
  box-shadow: 4px 4px 0 #0a1a0a;
}

.it-choice-pixel .it-choice-number {
  display: block;
  font-size: 0.7rem;
  color: #6a7a8a;
  letter-spacing: 0.1em;
}

.it-choice-pixel .it-choice-label {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin-top: 2px;
}

.it-choice-pixel .it-choice-sub {
  display: block;
  font-size: 0.65rem;
  color: #7a8a9a;
  margin-top: 2px;
}

.pixel-btn {
  border-radius: 0 !important;
  border-width: 2px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ===== Тряска для IT-игры 2 ===== */
@keyframes shake {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, -2px); }
  60% { transform: translate(-1px, 1px); }
  80% { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}

.mini-game-code-content.shake {
  animation: shake 0.15s ease-in-out;
}

.it-counter-card.shake {
  animation: shake 0.15s ease-in-out;
}

/* Крупный текст описания */
.big-desc {
  font-size: 1.4rem !important;
  font-weight: 600;
  color: #d0e0f0;
}

/* ===== Энтропийная игра ===== */
.entropy-game .entropy-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 12px 0 20px;
  padding: 8px 16px;
  background: rgba(0,20,40,0.5);
  border: 1px solid #3a5a6a;
  border-radius: 0;
  box-shadow: 4px 4px 0 #0a0f1a;
}

.entropy-progress-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.entropy-progress-bar {
  flex: 1;
  height: 14px;
  background: #1a2636;
  border: 1px solid #3a5a6a;
  box-shadow: inset 2px 2px 0 #0a0f1a;
}

#entropyProgressFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #65f6de, #8f7dff);
  transition: width 0.2s;
}

#entropyScore {
  font-family: 'Courier New', monospace;
  font-size: 1.2rem;
  color: #b0c4de;
}

.entropy-timer {
  font-family: 'Courier New', monospace;
  font-size: 1.8rem;
  font-weight: 700;
  color: #65f6de;
  text-shadow: 0 0 8px rgba(101,246,222,0.3);
}

.entropy-field {
  position: relative;
  width: 100%;
  height: 280px;
  background: rgba(0,10,20,0.6);
  border: 2px solid #3a5a6a;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
  overflow: hidden;
}

.entropy-circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #8f7dff, #4a3a7a);
  border: 2px solid #a090ff;
  box-shadow: 0 0 20px rgba(143,125,255,0.3);
  cursor: pointer;
  transition: transform 0.1s;
  animation: entropyPop 0.3s ease-out;
}

@keyframes entropyPop {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.entropy-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(143,125,255,0.6);
}

.entropy-message {
  margin-top: 12px;
  text-align: center;
  font-size: 1.1rem;
  min-height: 1.6rem;
  color: #ffaa44;
}

/* ===== ИГРЫ МАТЕМАТИКИ ===== */

/* Арифметическая цепочка (полный аналог labyrinth из game.html) */
.math-chain-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 16px;
  gap: 14px;
  background: linear-gradient(145deg, #0a1f2a, #0e2a3a);
}

.math-chain-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: nowrap;
  background: rgba(0, 20, 40, 0.7);
  border: 2px solid #0ff;
  border-radius: 40px;
  padding: 12px 24px;
  box-shadow: 0 0 18px rgba(0,255,255,0.3);
  flex-shrink: 0;
}

.math-chain-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.math-chain-label {
  font-size: 1.2rem;
  color: #8ae2ff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.math-chain-current {
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 12px cyan;
  min-width: 52px;
  text-align: center;
}

.math-chain-arrow {
  position: relative;
  background: linear-gradient(90deg, #00d26a, #00b050);
  color: #00210f;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 12px 28px 12px 22px;
  display: flex;
  align-items: center;
  box-shadow: 0 0 18px rgba(0,210,106,0.6);
}

.math-chain-arrow::after {
  content: '';
  position: absolute;
  right: -26px;
  top: 0;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 26px solid #00b050;
  filter: drop-shadow(2px 0 6px rgba(0,210,106,0.5));
}

.math-chain-target {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #00ffcc, #008f7a);
  border: 3px solid #fff;
  box-shadow: 0 0 20px #00ffcc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  color: #002a22;
  margin-left: 14px;
}

.math-chain-reset {
  width: auto;
  padding: 10px 26px;
  font-size: 1.15rem;
  margin-left: 6px;
  background: transparent;
  border: 2px solid #0ff;
  color: #0ff;
  border-radius: 60px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 3px;
  transition: all 0.3s;
  box-shadow: 0 0 15px cyan;
}

.math-chain-reset:hover {
  background: cyan;
  color: #000;
  box-shadow: 0 0 40px cyan;
  transform: scale(1.05);
}

.math-chain-canvas-box {
  flex: 1;
  min-height: 0;
  border: 2px solid cyan;
  border-radius: 18px;
  overflow: hidden;
  background: #0d0d0d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.math-chain-canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  aspect-ratio: 1000 / 600;
  display: block;
  background: #0d0d0d;
}

/* 2048 */
/* Стили для 2048 с анимациями */
.math-2048-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
  gap: 10px;
}

.math-2048-container h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 0;
  text-shadow: 0 0 10px rgba(101, 246, 222, 0.3);
}

.math-2048-container p {
  color: #8fa697;
  font-size: 0.9rem;
  text-align: center;
  margin: 0 0 8px 0;
}

.math-2048-board {
  position: relative;
  width: 400px;
  height: 400px;
  background: #1a2636;
  border: 2px solid #3a5a6a;
  box-shadow: 4px 4px 0 #0a0f1a;
  flex-shrink: 0;
}

.math-2048-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 8px;
  padding: 8px;
  pointer-events: none;
}

.math-2048-grid > div {
  background: #2a3a4a;
  aspect-ratio: 1/1;
  border-radius: 0;
}

.math-2048-tiles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.math-2048-tile {
  position: absolute;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  transition: left 0.12s ease, top 0.12s ease, transform 0.15s ease, opacity 0.15s ease;
  will-change: transform, left, top;
  background: #eee4da;
  color: #776e65;
}

.math-2048-score {
  margin-top: 12px;
  font-size: 1.2rem;
  color: #b0c4de;
  font-family: 'Courier New', monospace;
}

.math-2048-gameover {
  margin-top: 12px;
  color: #ff9eae;
  font-size: 1.2rem;
}

.math-2048-container .primary-btn {
  margin-top: 10px;
}

@media (max-width: 600px) {
  .math-2048-board {
    width: 300px;
    height: 300px;
  }
  .math-2048-tile {
    font-size: 1.2rem !important;
  }
  .math-2048-container h2 {
    font-size: 1.5rem;
  }
}
/* ===== АРКАДЫ ДЛЯ ПРОМРОБО ===== */
.arcade-screen {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: linear-gradient(180deg, #87ceeb 0%, #4a90c2 100%);
  overflow: hidden;
  display: none; /* скрыты по умолчанию, показываются через JS */
}

.arcade-screen.rover-bg {
  background: linear-gradient(180deg, #4a6a3a 0%, #2d4a2a 100%);
}

.arcade-screen.glider-bg {
  background: linear-gradient(180deg, #6ec6ff 0%, #b0e0ff 50%, #d4f0ff 100%);
}

#roverCanvas,
#gliderCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

.arcade-score-big {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  background: rgba(15, 22, 32, 0.92);
  border: 3px solid var(--accent);
  box-shadow: 0 0 40px rgba(0, 229, 255, 0.5),
              inset 0 0 20px rgba(0, 229, 255, 0.15);
  padding: 18px 48px 16px;
  min-width: 360px;
  text-align: center;
  backdrop-filter: blur(4px);
}

.arcade-score-big.rover-score {
  border-color: var(--accent-warm);
  box-shadow: 0 0 40px rgba(255, 182, 39, 0.4),
              inset 0 0 20px rgba(255, 182, 39, 0.15);
}

.arcade-score-big.glider-score {
  border-color: #ff80ab;
  box-shadow: 0 0 40px rgba(255, 128, 171, 0.4),
              inset 0 0 20px rgba(255, 128, 171, 0.15);
}

.score-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1rem;
  color: var(--accent);
  letter-spacing: 6px;
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.arcade-score-big.rover-score .score-label { color: var(--accent-warm); }
.arcade-score-big.glider-score .score-label { color: #ff80ab; }

.score-values {
  font-family: 'Share Tech Mono', monospace;
  font-size: 3.6rem;
  font-weight: 700;
  color: var(--accent-warm);
  letter-spacing: 2px;
  line-height: 1;
  text-shadow: 0 0 20px rgba(255, 182, 39, 0.6);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

.score-values #roverScore,
.score-values #gliderScore {
  min-width: 90px;
  text-align: right;
  display: inline-block;
}

.score-divider {
  color: var(--muted);
  font-size: 2.4rem;
  font-weight: 400;
}

.score-target {
  color: var(--text);
  font-size: 2.4rem;
  opacity: 0.85;
}

.score-progress {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 229, 255, 0.4);
  overflow: hidden;
}

.arcade-score-big.rover-score .score-progress {
  border-color: rgba(255, 182, 39, 0.5);
}
.arcade-score-big.glider-score .score-progress {
  border-color: rgba(255, 128, 171, 0.5);
}

.score-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent), var(--accent-warm));
  box-shadow: 0 0 12px rgba(255, 182, 39, 0.6);
  transition: width 0.3s ease;
}

.arcade-controls-hint {
  position: absolute;
  bottom: 28px;
  right: 28px;
  z-index: 10;
  pointer-events: none;
  background: rgba(15, 22, 32, 0.88);
  border: 2px solid var(--accent);
  padding: 16px 22px;
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.3);
  backdrop-filter: blur(4px);
  min-width: 200px;
}

.controls-title {
  font-family: 'Share Tech Mono', monospace;
  color: var(--accent);
  font-size: 0.95rem;
  letter-spacing: 3px;
  font-weight: 700;
  text-align: center;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 229, 255, 0.3);
  text-transform: uppercase;
}

.control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 6px 0;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.control-row kbd {
  font-size: 1.2rem;
  padding: 4px 14px;
  min-width: 44px;
  text-align: center;
  display: inline-block;
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: 'Share Tech Mono', monospace;
  font-weight: 700;
  border-radius: 3px;
  box-shadow: 0 2px 0 rgba(0, 229, 255, 0.4);
}

@media (max-width: 760px) {
  .arcade-score-big {
    min-width: auto;
    width: calc(100% - 40px);
    padding: 12px 20px;
  }
  .score-values { font-size: 2.6rem; }
  .score-divider, .score-target { font-size: 1.8rem; }
  .arcade-controls-hint {
    bottom: 16px;
    right: 16px;
    padding: 12px 16px;
    min-width: 160px;
  }
}

/* ===== Стили для игр «Объективно» ===== */

/* Буквы в цифры */
.objective-letters-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
  gap: 12px;
}

.objective-phrase {
  font-family: 'Courier New', monospace;
  font-size: 1.4rem;
  letter-spacing: 3px;
  color: #d0e0f0;
  background: rgba(0,20,40,0.5);
  padding: 8px 20px;
  border: 2px solid #3a5a6a;
}

.objective-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: center;
}

.objective-word-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.letter-input-pixel {
  width: 44px;
  height: 50px;
  background: #1a2636;
  border: 2px solid #3a4a5a;
  border-radius: 0;
  color: #fff;
  font-size: 1.4rem;
  text-align: center;
  font-family: 'Courier New', monospace;
  box-shadow: inset 2px 2px 0 #0a0f1a;
  outline: none;
  transition: border-color 0.2s;
}

.letter-input-pixel:focus {
  border-color: #65f6de;
}

.letter-input-pixel.correct {
  border-color: #6fdc4d;
  background: #1a3a1a;
  color: #8dffb0;
  box-shadow: 0 0 10px rgba(109,255,157,0.3);
}

.objective-controls {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.objective-message {
  min-height: 1.5rem;
  font-size: 1.1rem;
  text-align: center;
}

/* Стихии */
.objective-elements-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
  gap: 12px;
}

.elements-slots {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.element-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(0,20,40,0.4);
  border: 2px solid #3a5a6a;
  padding: 8px;
  min-width: 80px;
}

.element-slot-num {
  background: #65f6de;
  color: #04100e;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0 8px;
  border-radius: 0;
}

.element-arrow {
  background: transparent;
  border: 1px solid #3a5a6a;
  color: #b0c4de;
  width: 100%;
  padding: 2px 0;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.15s;
}

.element-arrow:hover {
  background: rgba(101,246,222,0.15);
}

.element-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  width: 100%;
}

.element-icon .em {
  font-size: 2.2rem;
  line-height: 1.2;
}

.element-icon .nm {
  font-size: 0.7rem;
  color: #b0c4de;
}

/* ===== Стили для встроенных 3D-аркад ===== */
.arcade-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #1a1a2a;
}

.arcade-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.arcade-score-inline {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  background: rgba(15, 22, 32, 0.88);
  border: 2px solid #ffb627;
  padding: 6px 18px;
  border-radius: 8px;
  color: #fff;
  font-family: 'Share Tech Mono', monospace;
  font-size: 1rem;
  text-shadow: 0 0 10px rgba(255,182,39,0.5);
}

.arcade-controls-hint {
  display: none; /* скрываем старые подсказки, они не нужны внутри контейнера */
}
/* ===== Игры «Объективно» ===== */
.objective-letters-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
  gap: 12px;
}

.objective-phrase {
  font-family: 'Courier New', monospace;
  font-size: 1.4rem;
  letter-spacing: 3px;
  color: #d0e0f0;
  background: rgba(0,20,40,0.5);
  padding: 8px 20px;
  border: 2px solid #3a5a6a;
}

.objective-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: center;
}

.objective-word-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.letter-input-pixel {
  width: 44px;
  height: 50px;
  background: #1a2636;
  border: 2px solid #3a4a5a;
  border-radius: 0;
  color: #fff;
  font-size: 1.4rem;
  text-align: center;
  font-family: 'Courier New', monospace;
  box-shadow: inset 2px 2px 0 #0a0f1a;
  outline: none;
  transition: border-color 0.2s;
}

.letter-input-pixel:focus {
  border-color: #65f6de;
}

.letter-input-pixel.correct {
  border-color: #6fdc4d;
  background: #1a3a1a;
  color: #8dffb0;
  box-shadow: 0 0 10px rgba(109,255,157,0.3);
}

.objective-controls {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.objective-message {
  min-height: 1.5rem;
  font-size: 1.1rem;
  text-align: center;
}

/* Стихии */
.objective-elements-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
  gap: 12px;
}

.elements-slots {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.element-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(0,20,40,0.4);
  border: 2px solid #3a5a6a;
  padding: 8px;
  min-width: 80px;
}

.element-slot-num {
  background: #65f6de;
  color: #04100e;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0 8px;
  border-radius: 0;
}

.element-arrow {
  background: transparent;
  border: 1px solid #3a5a6a;
  color: #b0c4de;
  width: 100%;
  padding: 2px 0;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.15s;
}

.element-arrow:hover {
  background: rgba(101,246,222,0.15);
}

.element-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  width: 100%;
}

.element-icon .em {
  font-size: 2.2rem;
  line-height: 1.2;
}

.element-icon .nm {
  font-size: 0.7rem;
  color: #b0c4de;
}

/* ===== Встроенные 3D-аркады ===== */
.arcade-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.arcade-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.arcade-score-inline {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  background: rgba(15,22,32,0.88);
  border: 2px solid #ffb627;
  padding: 6px 18px;
  border-radius: 8px;
  color: #fff;
  font-family: 'Share Tech Mono', monospace;
  font-size: 1rem;
  text-shadow: 0 0 10px rgba(255,182,39,0.5);
}

/* Быстрый счёт */
.math-quick-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
  gap: 16px;
  max-width: 500px;
  margin: 0 auto;
}
.math-quick-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 1.1rem;
  color: #b0c4de;
  font-family: 'Courier New', monospace;
}
.math-quick-header b {
  color: #65f6de;
}
.math-quick-question {
  font-size: 2.8rem;
  font-weight: 700;
  color: #fff;
  font-family: 'Courier New', monospace;
  text-align: center;
  padding: 12px 20px;
  background: rgba(0,20,40,0.5);
  border: 2px solid #3a5a6a;
  box-shadow: 4px 4px 0 #0a0f1a;
  width: 100%;
}
.math-quick-input {
  display: flex;
  gap: 10px;
  width: 100%;
  align-items: center;
}
.math-quick-input input {
  flex: 1;
  padding: 10px 16px;
  background: #1a2636;
  border: 2px solid #3a5a6a;
  border-radius: 0;
  color: #fff;
  font-size: 1.5rem;
  font-family: 'Courier New', monospace;
  outline: none;
  box-shadow: inset 2px 2px 0 #0a0f1a;
}
.math-quick-input input:focus {
  border-color: #65f6de;
}
.math-quick-input button {
  min-width: 60px;
  height: 54px;
  padding: 0 16px;
}
.math-quick-message {
  min-height: 2rem;
  font-size: 1.1rem;
  color: #8fa697;
  text-align: center;
}

/* Пиксельные кнопки (общие) */
.pixel-btn {
  border-radius: 0 !important;
  border-width: 2px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Кнопка сброса в цепочке */
.cyber-button {
  background: transparent;
  border: 2px solid #0ff;
  color: #0ff;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 15px 40px;
  border-radius: 60px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 3px;
  transition: all 0.3s;
  box-shadow: 0 0 15px cyan;
}
.cyber-button:hover {
  background: cyan;
  color: #000;
  box-shadow: 0 0 40px cyan;
  transform: scale(1.05);
}

/* ====================== */
/* НОВЫЕ СТИЛИ ДЛЯ АНГЛИЙСКОГО (DUOLINGO) */
/* ====================== */

/* Персонаж (оставляем как есть, только меняем эмодзи на картинку) */
/* ====================== */
/* НОВЫЕ СТИЛИ ДЛЯ АНГЛИЙСКОГО (DUOLINGO) */
/* ====================== */

/* Персонаж (оставляем как есть, только меняем эмодзи на картинку) */
.duolingo-container {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
  transform: translateX(120%) translateY(120%);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.duolingo-container.duolingo-enter {
  transform: translateX(0) translateY(0);
}

.duolingo-container.duolingo-exit {
  transform: translateX(120%) translateY(120%);
  transition: transform 0.5s ease-in;
}

.duolingo-character {
  font-size: 70px;
  line-height: 1;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4));
  animation: duoBob 2s ease-in-out infinite;
}

.duolingo-character img {
  width: 140px;
  height: auto;
  display: block;
}

@keyframes duoBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.duolingo-bubble {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 20px 20px 4px 20px;
  font-size: 15px;
  font-weight: 600;
  max-width: 240px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  margin-bottom: 6px;
  position: relative;
  border: 2px solid #58cc02;
  font-family: 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.2px;
  text-align: left;
  transition: opacity 0.3s;
}

.duolingo-bubble::after {
  content: '';
  position: absolute;
  bottom: -12px;
  right: 18px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid rgba(255,255,255,0.12);
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1));
}

/* Общий контейнер для игр английского — стиль Duolingo */
.en-game {
  background: #ffffff;
  border-radius: 24px;
  padding: 30px 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  color: #1f2a3a;
  max-width: 800px;
  margin: 20px auto;
  width: 100%;
  border: 1px solid #e0e8e0;
}

.en-game .mini-game-kicker {
  color: #58cc02;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 4px;
  font-size: 12px;
  text-transform: uppercase;
}

.en-game .mini-game-title {
  color: #1f2a3a;
  margin-top: 4px;
  font-size: 28px;
  font-weight: 700;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.en-game .mini-game-desc {
  color: #3d4f5e;
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.5;
}

/* Match игра */
.en-match-grid {
  display: flex;
  gap: 30px;
  justify-content: space-between;
  margin: 20px 0;
  flex-wrap: wrap;
}

.en-match-column {
  flex: 1;
  min-width: 150px;
}

.en-match-column h4 {
  font-size: 14px;
  color: #3d5a5a;
  margin: 0 0 10px 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.8;
}

.en-word-list, .en-slot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.en-word {
  padding: 12px 14px;
  background: white;
  border: 2px solid #d0dcd0;
  border-radius: 40px;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  color: #1f2a3a;
}

.en-word:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.en-word.selected {
  border-color: #58cc02;
  background: #e8f5e0;
  box-shadow: 0 0 0 3px rgba(88, 204, 2, 0.25);
}

.en-word.placed {
  opacity: 0.3;
  pointer-events: none;
  transform: scale(0.95);
}

.en-slot {
  background: #f5faf0;
  border: 2px dashed #b0c8a0;
  border-radius: 40px;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  transition: all 0.15s;
}

.en-slot .en-slot-translation {
  font-size: 14px;
  color: #3d5a5a;
  font-weight: 600;
  margin-bottom: 4px;
}

.en-slot .en-slot-word {
  font-size: 18px;
  font-weight: 700;
  color: #1f2a3a;
  background: white;
  padding: 4px 12px;
  border-radius: 40px;
  border: 2px solid #58cc02;
  cursor: pointer;
}

.en-slot .en-slot-word:hover {
  background: #e8f5e0;
}

.en-slot.empty .en-slot-word {
  display: none;
}

.en-slot.filled {
  border-style: solid;
  border-color: #58cc02;
  background: #eaf6e0;
}

.en-slot.correct {
  border-color: #58cc02;
  background: #d4edc0;
}

.en-slot.wrong {
  border-color: #ff6b6b;
  background: #ffe0e0;
}

/* Кнопки в стиле Duolingo (зелёные) */
.en-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

.en-controls .primary-btn,
.en-controls .ghost-btn {
  margin: 0;
  min-width: 120px;
  border-radius: 40px;
  font-weight: 700;
  padding: 12px 28px;
  border: none;
  background: #58cc02;
  color: white;
  box-shadow: 0 4px 0 #46a302;
  transition: all 0.1s ease;
  cursor: pointer;
  font-family: 'Segoe UI', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.en-controls .primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #46a302;
}

.en-controls .primary-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #46a302;
}

.en-controls .ghost-btn {
  background: transparent;
  color: #3d5a5a;
  box-shadow: none;
  border: 2px solid #d0dcd0;
}

.en-controls .ghost-btn:hover {
  background: #f0f5f0;
  border-color: #b0c8b0;
}

.en-message {
  margin-top: 16px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}

/* Fill игра */
.en-fill-sentence {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  padding: 20px;
  background: #f9fbf9;
  border-radius: 20px;
  border: 2px solid #d0dcd0;
  margin: 16px 0 24px;
  line-height: 1.6;
  color: #1f2a3a;
}

.en-fill-sentence .en-blank {
  display: inline-block;
  min-width: 120px;
  border-bottom: 4px solid #58cc02;
  margin: 0 8px;
  color: #58cc02;
  font-weight: 800;
}

.en-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 20px;
}

.en-option {
  background: white;
  border: 2px solid #d0dcd0;
  border-radius: 40px;
  padding: 12px 28px;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  min-width: 80px;
  color: #1f2a3a;
}

.en-option:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

.en-option.selected {
  border-color: #58cc02;
  background: #e8f5e0;
  box-shadow: 0 0 0 3px rgba(88, 204, 2, 0.25);
}

.en-option.correct {
  border-color: #58cc02;
  background: #d4edc0;
}

.en-option.wrong {
  border-color: #ff6b6b;
  background: #ffe0e0;
}

/* Quiz игра */
.en-quiz-question {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  padding: 20px;
  background: #f9fbf9;
  border-radius: 20px;
  border: 2px solid #d0dcd0;
  margin: 16px 0 24px;
  color: #1f2a3a;
}

.en-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 500px;
  margin: 0 auto 20px;
}

.en-quiz-option {
  background: white;
  border: 2px solid #d0dcd0;
  border-radius: 40px;
  padding: 16px 28px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  color: #1f2a3a;
}

.en-quiz-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

.en-quiz-option.selected {
  border-color: #58cc02;
  background: #e8f5e0;
  box-shadow: 0 0 0 3px rgba(88, 204, 2, 0.25);
}

.en-quiz-option.correct {
  border-color: #58cc02;
  background: #d4edc0;
}

.en-quiz-option.wrong {
  border-color: #ff6b6b;
  background: #ffe0e0;
}

/* Адаптивность */
@media (max-width: 640px) {
  .en-match-grid {
    flex-direction: column;
    gap: 16px;
  }
  .en-match-column {
    min-width: unset;
  }
  .en-fill-sentence {
    font-size: 20px;
    padding: 16px;
  }
  .en-quiz-question {
    font-size: 22px;
    padding: 16px;
  }
  .en-option {
    font-size: 16px;
    padding: 10px 20px;
  }
  .en-quiz-option {
    font-size: 16px;
    padding: 12px 20px;
  }
  .duolingo-character img {
    width: 50px;
  }
  .duolingo-bubble {
    font-size: 13px;
    max-width: 180px;
    padding: 8px 14px;
  }
}

/* Duolingo Theme UI — всё внутри белое для контраста */
.duo-game-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 16px;
  font-family: 'Din Round', 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.duo-header {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
}

.duo-prompt {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.duo-avatar {
  width: 64px;
  height: 64px;
  background: #58cc02;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  font-weight: bold;
  box-shadow: 0 4px 0 #46a302;
  flex-shrink: 0;
}

.duo-bubble {
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 16px;
  padding: 12px 18px;
  font-size: 18px;
  font-weight: 700;
  position: relative;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 4px 0 rgba(255,255,255,0.15);
  color: #ffffff;
}

.duo-bubble::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 10px 8px 0;
  border-style: solid;
  border-color: transparent rgba(255,255,255,0.25) transparent transparent;
}

/* Match Grid */
.duo-match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.duo-card {
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.25);
  border-bottom: 4px solid rgba(255,255,255,0.25);
  border-radius: 16px;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  transition: all 0.1s ease;
  user-select: none;
}

.duo-card:hover:not(.disabled) {
  background: rgba(255,255,255,0.2);
}

.duo-card.selected {
  background: #ddf4ff;
  border-color: #84d8ff;
  border-bottom-color: #1cb0f6;
  color: #1cb0f6;
}

.duo-card.correct {
  background: #d7ffb8;
  border-color: #b8f28b;
  border-bottom-color: #58cc02;
  color: #58cc02;
}

.duo-card.wrong {
  background: #ffdfe0;
  border-color: #ffb8b8;
  border-bottom-color: #ff4b4b;
  color: #ff4b4b;
}

.duo-card.disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* Drag & Drop sentence slot & chips */
.duo-sentence-area {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 60px;
  padding: 12px;
  border-top: 2px solid rgba(255,255,255,0.2);
  border-bottom: 2px solid rgba(255,255,255,0.2);
  align-items: center;
  margin-bottom: 20px;
}

.duo-sentence-area span {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}

.duo-drop-slot {
  min-width: 80px;
  height: 46px;
  border-bottom: 2px dashed rgba(255,255,255,0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.duo-chip {
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.3);
  border-bottom: 4px solid rgba(255,255,255,0.3);
  border-radius: 14px;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.duo-chip:active {
  cursor: grabbing;
}

.duo-chip.dragging {
  opacity: 0.4;
}

.duo-pool-area {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  min-height: 60px;
}

/* Quiz list */
.duo-quiz-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Footer & Check button */
.duo-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.duo-btn-check {
  background: #58cc02;
  border: none;
  border-bottom: 4px solid #46a302;
  border-radius: 16px;
  color: white;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.1s;
}

.duo-btn-check:hover:not(:disabled) {
  filter: brightness(1.08);
}

.duo-btn-check:disabled {
  background: #e5e5e5;
  border-bottom-color: #afafaf;
  color: #afafaf;
  cursor: not-allowed;
}

/* ===== ПОДСКАЗКА ДЛЯ 3D-АРКАД ===== */
.arcade-hint {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 10px 16px;
  font-family: 'Share Tech Mono', monospace;
  color: #fff;
  text-align: right;
  line-height: 1.5;
  font-size: 0.85rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.arcade-hint-task {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  color: #ffb627;  /* для ровера оранжевый, для планера будет переопределён через JS или оставим общий */
}

.arcade-hint-controls {
  opacity: 0.8;
  font-size: 0.75rem;
  letter-spacing: 0.3px;
}

/* Можно добавить специфичные цвета для каждой игры, если нужно */
.arcade-container.rover-bg .arcade-hint-task {
  color: #ffb627;
}
.arcade-container.glider-bg .arcade-hint-task {
  color: #ff80ab;
}

/* ===== СТИЛИ ДЛЯ ШКОЛЫ АНИМАЦИИ ===== */

.anim-game-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: #fff;
}

/* --- Викторина --- */
.anim-quiz {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.anim-quiz-header {
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  color: #b0c4de;
  letter-spacing: 2px;
}

.anim-quiz-main {
  display: flex;
  align-items: stretch;
  gap: 20px;
  min-height: 300px;
}

/* Левая колонка – картинка */
.anim-quiz-image {
  flex: 0 0 35%;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.anim-quiz-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.anim-quiz-image span {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  padding: 10px;
}

/* Центр – таймер */
.anim-quiz-timer {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(#65f6de 0% 100%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 20px rgba(101, 246, 222, 0.5);
  transition: background 0.3s;
  align-self: center;
  margin: 0 auto;
}

/* Правая колонка – варианты и кнопка */
.anim-quiz-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
}

.anim-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.anim-option {
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 600;
  color: #d0d8e0;
  font-size: 1rem;
}

.anim-option:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #65f6de;
  transform: translateY(-2px);
}

.anim-option.selected {
  background: rgba(101, 246, 222, 0.2);
  border-color: #65f6de;
  color: #fff;
  box-shadow: 0 0 20px rgba(101, 246, 222, 0.2);
}

.anim-btn {
  background: linear-gradient(135deg, #8f7dff, #6c5ce7);
  border: none;
  border-radius: 40px;
  padding: 12px 28px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
  align-self: center;
  min-width: 180px;
  letter-spacing: 1px;
  margin-top: 4px;
}

.anim-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(108, 92, 231, 0.6);
}

.anim-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.anim-quiz-message {
  min-height: 2rem;
  font-size: 1.1rem;
  text-align: center;
  color: #b0c4de;
  margin-top: 8px;
}

/* --- Игра "Соотнеси" --- */
.anim-match {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

.anim-match-header {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
  color: #b0c4de;
  letter-spacing: 1px;
}

.anim-match-grid {
  display: flex;
  gap: 30px;
  justify-content: space-between;
  width: 100%;
}

.anim-match-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.anim-match-item {
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 600;
  color: #d0d8e0;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.anim-match-item:hover:not(.used) {
  background: rgba(255, 255, 255, 0.15);
  border-color: #65f6de;
}

.anim-match-item.selected {
  background: rgba(101, 246, 222, 0.2);
  border-color: #65f6de;
  color: #fff;
  box-shadow: 0 0 20px rgba(101, 246, 222, 0.2);
}

.anim-match-item.used {
  opacity: 0.4;
  cursor: default;
  border-color: #3a4a5a;
}

.anim-match-item.assigned {
  background: rgba(108, 92, 231, 0.2);
  border-color: #8f7dff;
  color: #fff;
}

.anim-match-message {
  min-height: 2rem;
  font-size: 1.1rem;
  text-align: center;
  margin-top: 12px;
  color: #b0c4de;
}

.anim-match-footer {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* Адаптивность */
@media (max-width: 768px) {
  .anim-quiz-main {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .anim-quiz-image {
    flex: 0 0 auto;
    width: 100%;
    max-height: 200px;
    min-height: 150px;
  }

  .anim-quiz-timer {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    font-size: 1.6rem;
  }

  .anim-quiz-right {
    width: 100%;
    flex: 0 0 auto;
  }

  .anim-quiz-options {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .anim-option {
    flex: 1 0 45%;
    font-size: 0.9rem;
    padding: 10px 12px;
  }

  .anim-match-grid {
    flex-direction: column;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .anim-option {
    flex: 1 0 100%;
  }

  .anim-quiz-timer {
    width: 60px;
    height: 60px;
    font-size: 1.4rem;
  }

  .anim-btn {
    min-width: 140px;
    padding: 10px 20px;
    font-size: 1rem;
  }
}

.anim-quiz-title {
  font-size: 1.6rem;
  font-weight: 800;
  text-align: center;
  color: #fff;
  letter-spacing: 1px;
  text-shadow: 0 0 30px rgba(101, 246, 222, 0.3);
  margin-bottom: 4px;
}

/* ===== КВАНТОШАХМАТЫ ===== */

.chess-game-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chess-place-layout {
  display: flex;
  gap: 30px;
  width: 100%;
  max-width: 950px;
  height: 100%;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}

.chess-pieces-pool {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255,255,255,0.05);
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
}

.chess-pool-label {
  font-size: 1rem;
  font-weight: 700;
  color: #b0c4de;
  text-align: center;
  letter-spacing: 1px;
}

.chess-pool-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.chess-piece {
  aspect-ratio: 1/1;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  cursor: grab;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  padding: 4px;
  min-height: 60px;
}

.chess-piece:hover {
  background: rgba(255,255,255,0.2);
  border-color: #65f6de;
  transform: scale(1.05);
}

.chess-piece.dragging {
  opacity: 0.4;
}

.chess-piece-letter {
  font-size: 2.2rem;
  line-height: 1;
}

.chess-board-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.chess-board-header {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 4px;
  text-shadow: 0 0 20px rgba(101,246,222,0.3);
}

.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  aspect-ratio: 1/1;
  width: 100%;
  max-width: 520px;
  border: 3px solid #2a3a4a;
  box-shadow: 0 0 30px rgba(0,0,0,0.6);
  background: #2a2a2a;
}

.chess-cell {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.chess-cell.dark {
  background: #6b4f3a;
}

.chess-cell.light {
  background: #c8a77b;
}

.chess-piece-on-board {
  width: 90%;
  height: 90%;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  transition: transform 0.15s;
  border-radius: 4px;
}

.chess-piece-on-board:hover {
  transform: scale(1.1);
}

.chess-piece-on-board.dragging {
  opacity: 0.4;
}

.chess-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.chess-message {
  min-height: 1.5rem;
  font-size: 1.1rem;
  text-align: center;
  color: #b0c4de;
}

/* Стили для викторины (все 7 карточек в ряд) */
.chess-quiz-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.chess-quiz-card {
  padding: 12px 6px !important;
  min-height: 70px !important;
  font-size: 0.9rem !important;
}

.chess-quiz-card .it-choice-label {
  font-size: 1rem !important;
}

/* Адаптивность для узких экранов */
@media (max-width: 700px) {
  .chess-quiz-grid {
    gap: 6px;
  }
  .chess-quiz-card {
    font-size: 0.7rem !important;
    padding: 8px 4px !important;
    min-height: 50px !important;
  }
  .chess-quiz-card .it-choice-label {
    font-size: 0.7rem !important;
  }
  .chess-quiz-card .it-choice-number {
    font-size: 0.6rem !important;
  }
}

/* ===== НАНОКВАНТУМ: ПЕРСОНАЖ ===== */
.nano-character-container {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
  transform: translateX(120%) translateY(120%);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nano-character-container.enter {
  transform: translateX(0) translateY(0);
}

.nano-character-container.exit {
  transform: translateX(120%) translateY(120%);
  transition: transform 0.5s ease-in;
}

.nano-character {
  font-size: 70px;
  line-height: 1;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4));
  animation: nanoBob 2s ease-in-out infinite;
}

.nano-character img {
  width: 200px;
  height: auto;
  display: block;
}

@keyframes nanoBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.nano-character-bubble {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 20px 20px 4px 20px;
  font-size: 15px;
  font-weight: 600;
  max-width: 240px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  margin-bottom: 6px;
  position: relative;
  border: 2px solid #65f6de;
  font-family: 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.2px;
  text-align: left;
}

.nano-character-bubble::after {
  content: '';
  position: absolute;
  bottom: -12px;
  right: 18px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid rgba(255,255,255,0.12);
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1));
}

/* ===== НАНОКВАНТУМ: Лаборатория наноматериалов ===== */
.nano-game {
  padding: 16px;
  background: rgba(0, 10, 20, 0.6);
  border-radius: 16px;
  height: 100%;
  overflow-y: auto;
}

.nano-game-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.nano-header {
  text-align: center;
  margin-bottom: 4px;
}

.nano-reagent-selector {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 12px;
}

.nano-reagent-card {
  background: #1a2636;
  border: 2px solid #3a4a5a;
  border-radius: 0;
  padding: 10px 16px;
  cursor: pointer;
  text-align: center;
  flex: 1 0 120px;
  box-shadow: 4px 4px 0 #0a0f1a;
  transition: all 0.15s;
  color: #b0c4de;
  font-family: 'Courier New', monospace;
}

.nano-reagent-card:hover {
  background: #2a3a4a;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #0a0f1a;
}

.nano-reagent-card.selected {
  border-color: #65f6de;
  background: #1a3a3a;
  color: #fff;
  box-shadow: 0 0 20px rgba(101, 246, 222, 0.2);
}

.nano-reagent-name {
  display: block;
  font-weight: 700;
  font-size: 1rem;
}

.nano-reagent-status {
  display: block;
  font-size: 0.7rem;
  color: #6a8a7a;
}

/* Основная рабочая область — три колонки */
.nano-lab-area {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  align-items: stretch;
  min-height: 400px;
}

/* Левая колонка: компоненты */
.nano-components-pool {
  flex: 0 0 220px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #3a4a5a;
  padding: 12px;
  box-shadow: 4px 4px 0 #0a0f1a;
  display: flex;
  flex-direction: column;
}

.nano-pool-title {
  font-weight: 700;
  color: #b0c4de;
  margin-bottom: 10px;
  font-size: 0.9rem;
  text-align: center;
  letter-spacing: 1px;
}

.nano-pool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1;
  align-content: start;
}

.nano-component {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #1a2636;
  border: 2px solid #3a4a5a;
  cursor: grab;
  transition: all 0.15s;
  box-shadow: 2px 2px 0 #0a0f1a;
  font-size: 0.8rem;
  color: #c0d0e0;
}

.nano-component:hover {
  background: #2a3a4a;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #0a0f1a;
}

.nano-component.in-flask {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.nano-component-color {
  width: 16px;
  height: 16px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.nano-component-name {
  font-weight: 600;
  font-size: 0.75rem;
}

/* Центральная колонка: колба + индикатор */
.nano-flask-area {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.nano-flask {
  width: 140px;
  height: 200px;
  background: linear-gradient(145deg, rgba(139, 69, 19, 0.2), rgba(93, 64, 55, 0.3));
  border: 3px solid #8b4513;
  border-radius: 10px 10px 0 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.nano-flask::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: rgba(139, 69, 19, 0.6);
  border-top: 2px solid #5d4037;
}

.nano-flask-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  display: flex;
  flex-direction: column-reverse;
  transition: height 0.4s ease;
}

/* Слои компонентов — без разделительных линий */
.nano-flask-layer {
  width: 100%;
  flex: 1;
  min-height: 4px;
  /* border-top удалён — слои сливаются */
}

.nano-indicator-container {
  width: 100%;
  max-width: 280px;
}

.nano-indicator-label {
  font-size: 0.8rem;
  color: #b0c4de;
  margin-bottom: 4px;
  text-align: center;
}

.nano-indicator {
  width: 100%;
  height: 14px;
  background: #1a2636;
  border: 1px solid #3a4a5a;
  box-shadow: inset 2px 2px 0 #0a0f1a;
  overflow: hidden;
}

.nano-indicator-fill {
  height: 100%;
  width: 0%;
  transition: width 0.2s, background 0.2s;
}

.nano-indicator-text {
  margin-top: 6px;
  font-size: 0.85rem;
  min-height: 1.4rem;
  text-align: center;
  font-weight: 600;
}

.nano-indicator-text.red { color: #f87171; }
.nano-indicator-text.orange { color: #fbbf24; }
.nano-indicator-text.green { color: #34d399; }

/* Правая колонка: рецептурная книжка */
.nano-recipe-book {
  flex: 0 0 300px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #3a4a5a;
  padding: 16px;
  box-shadow: 4px 4px 0 #0a0f1a;
  display: flex;
  flex-direction: column;
  max-height: 400px;
}

.nano-recipe-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.nano-recipe-title {
  font-weight: 700;
  color: #b0c4de;
  font-size: 1.1rem;
}

.nano-add-recipe-btn {
  background: #10b981;
  border: none;
  color: #04100e;
  font-size: 1.2rem;
  width: 30px;
  height: 30px;
  cursor: pointer;
  box-shadow: 2px 2px 0 #0a0f1a;
  font-weight: 700;
  transition: all 0.15s;
}

.nano-add-recipe-btn:hover:not(:disabled) {
  background: #34d399;
  transform: scale(1.05);
}

.nano-add-recipe-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

.nano-recipe-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.nano-recipe-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-left: 4px solid #10b981;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.nano-recipe-item-name {
  font-weight: 700;
  color: #f1f5f9;
  min-width: 90px;
  font-size: 0.8rem;
}

.nano-recipe-item-comps {
  color: #b0c4de;
  flex: 1;
  font-size: 0.7rem;
}

.nano-recipe-delete {
  background: #ef4444;
  border: none;
  color: #fff;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 2px 2px 0 #0a0f1a;
  transition: all 0.15s;
  flex-shrink: 0;
}

.nano-recipe-delete:hover {
  background: #dc2626;
  transform: scale(1.05);
}

.nano-recipe-footer {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

.nano-recipe-counter {
  color: #94a3b8;
  font-size: 0.8rem;
}

.nano-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.nano-actions .primary-btn {
  min-width: 140px;
}

/* Модалка сохранения рецепта */
.nano-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
}

.nano-modal-card {
  background: #1a2636;
  border: 2px solid #3a4a5a;
  padding: 24px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 8px 8px 0 #0a0f1a;
}

.nano-modal-close {
  float: right;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
}

.nano-modal-reagents,
.nano-modal-components {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.nano-modal-reagent,
.nano-modal-component {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid #3a4a5a;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.15s;
  color: #b0c4de;
}

.nano-modal-reagent:hover,
.nano-modal-component:hover {
  background: rgba(255, 255, 255, 0.1);
}

.nano-modal-reagent.selected,
.nano-modal-component.selected {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.2);
  color: #fff;
}

.nano-modal-selected {
  margin-top: 12px;
  color: #94a3b8;
  font-size: 0.9rem;
  text-align: center;
}

/* Адаптив */
@media (max-width: 900px) {
  .nano-lab-area {
    flex-wrap: wrap;
    justify-content: center;
  }
  .nano-components-pool {
    flex: 1 1 100%;
    max-width: 300px;
  }
  .nano-flask-area {
    flex: 1 1 100%;
    max-width: 300px;
  }
  .nano-recipe-book {
    flex: 1 1 100%;
    max-width: 400px;
  }
}

@media (max-width: 600px) {
  .nano-flask {
    width: 100px;
    height: 150px;
  }
  .nano-pool-grid {
    grid-template-columns: 1fr 1fr;
  }
  .nano-reagent-card {
    flex: 1 0 80px;
  }
  .nano-recipe-item {
    flex-wrap: wrap;
    gap: 4px;
  }
  .nano-recipe-item-name {
    min-width: 60px;
  }
}

/* ===== РОВЕР В ЛАБИРИНТЕ ===== */
.rover-maze-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 10, 20, 0.4);
}

.maze-layout {
  display: flex;
  gap: 30px;
  width: 100%;
  max-width: 900px;
  align-items: stretch;
}

.maze-grid-wrapper {
  flex: 0 0 360px;
  display: flex;
  align-items: center;
}

.maze-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  width: 100%;
  aspect-ratio: 1/1;
  background: #0a1a2a;
  border: 3px solid #3a5a6a;
  padding: 3px;
  box-shadow: 4px 4px 0 #0a0f1a;
}

.maze-cell {
  aspect-ratio: 1/1;
  background: #1a2a3a;
  border: 1px solid #2a4a5a;
  position: relative;
}

.maze-cell.wall {
  background: #4a3a2a;
  border-color: #5a4a3a;
}

.maze-cell.goal {
  background: #2a4a2a;
  border-color: #6fdc4d;
  box-shadow: inset 0 0 15px rgba(109, 255, 157, 0.2);
}
.maze-cell.goal::after {
  content: '★';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #ffd700;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.maze-cell.rover {
  background: #2a4a5a;
  border-color: #65f6de;
  box-shadow: 0 0 20px rgba(101, 246, 222, 0.3);
}
.maze-cell.rover::after {
  content: '🚀';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.maze-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 200px;
}

.maze-commands-area {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #3a5a6a;
  padding: 10px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
}

.maze-commands-label {
  color: #b0c4de;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.maze-commands-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
  overflow-y: auto;
  max-height: 120px;
}

.maze-command-chip {
  background: #1a2636;
  border: 1px solid #3a5a6a;
  padding: 4px 10px;
  font-size: 0.8rem;
  color: #b0c4de;
  font-family: 'Courier New', monospace;
  border-radius: 4px;
  box-shadow: 2px 2px 0 #0a0f1a;
}

.maze-buttons {
  display: flex;
  gap: 10px;
}

.maze-buttons .primary-btn {
  flex: 1;
  min-width: 80px;
  padding: 8px 12px;
  font-size: 0.9rem;
}

.maze-direction-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: 200px;
  margin: 0 auto;
}

.maze-dir-btn {
  background: #1a2636;
  border: 2px solid #3a5a6a;
  color: #b0c4de;
  font-size: 1.6rem;
  padding: 10px 0;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 2px 2px 0 #0a0f1a;
  font-weight: 700;
}

.maze-dir-btn:hover:not(:disabled) {
  background: #2a3a4a;
  border-color: #65f6de;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #0a0f1a;
}

.maze-dir-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.maze-dir-btn[data-dir="up"] { grid-column: 2; grid-row: 1; }
.maze-dir-btn[data-dir="left"] { grid-column: 1; grid-row: 2; }
.maze-dir-btn[data-dir="down"] { grid-column: 2; grid-row: 3; }
.maze-dir-btn[data-dir="right"] { grid-column: 3; grid-row: 2; }

.maze-status {
  min-height: 2.5rem;
  font-size: 1rem;
  color: #b0c4de;
  text-align: center;
  padding: 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #3a5a6a;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 760px) {
  .maze-layout {
    flex-direction: column;
    align-items: center;
  }
  .maze-grid-wrapper {
    flex: 0 0 240px;
    width: 100%;
    max-width: 240px;
  }
  .maze-controls {
    width: 100%;
  }
  .maze-direction-buttons {
    max-width: 160px;
  }
}

.maze-direction-buttons-horizontal {
  display: flex;
  gap: 8px;
  justify-content: center;
  max-width: 280px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.maze-direction-buttons-horizontal .maze-dir-btn {
  width: 60px;
  height: 60px;
  font-size: 1.6rem;
  padding: 0;
  flex: 0 0 60px;
  background: #1a2636;
  border: 2px solid #3a5a6a;
  color: #b0c4de;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 2px 2px 0 #0a0f1a;
  font-weight: 700;
  text-align: center;
  line-height: 60px;
}

.maze-direction-buttons-horizontal .maze-dir-btn:hover:not(:disabled) {
  background: #2a3a4a;
  border-color: #65f6de;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #0a0f1a;
}

.maze-direction-buttons-horizontal .maze-dir-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== МЕДИАКВАНТУМ: Сборка медиа-процессов ===== */
.media-process-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 10, 20, 0.4);
}

.media-process-game {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 20px 30px;
}

.media-process-header {
  text-align: center;
}

.media-process-header h2 {
  font-family: var(--font-display);
  font-size: 28px;
  color: #fff;
  margin-bottom: 6px;
  text-shadow: 0 0 20px rgba(101, 246, 222, 0.3);
}

.media-process-description {
  font-size: 1.4rem;
  color: #8ae2ff;
  background: rgba(0, 255, 255, 0.08);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 40px;
  padding: 8px 24px;
  display: inline-block;
  font-weight: 700;
}

.media-process-play-area {
  display: flex;
  gap: 24px;
  min-height: 320px;
}

.media-steps-pool,
.media-sequence-area {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(0, 255, 255, 0.2);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.media-steps-pool h3,
.media-sequence-area h3 {
  color: #b0c4de;
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.media-steps-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 4px;
}

.media-process-step {
  background: #1a2636;
  border: 2px solid #3a4a5a;
  border-radius: 8px;
  padding: 12px 16px;
  color: #d0d8e0;
  font-size: 1rem;
  cursor: grab;
  transition: all 0.15s;
  box-shadow: 2px 2px 0 #0a0f1a;
  text-align: center;
}

.media-process-step:hover {
  background: #2a3a4a;
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 #0a0f1a;
}

.media-process-step.dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.media-sequence-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  padding: 4px;
}

.media-seq-slot {
  display: flex;
  align-items: center;
  gap: 12px;
}

.media-seq-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #65f6de;
  color: #04100e;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(101, 246, 222, 0.3);
}

.media-seq-drop {
  flex: 1;
  min-height: 48px;
  border: 2px dashed rgba(0, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(0, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: all 0.2s;
}

.media-seq-drop.over {
  background: rgba(0, 255, 255, 0.15);
  border-color: #65f6de;
}

.media-seq-drop.filled {
  border-style: solid;
  border-color: #65f6de;
  background: rgba(101, 246, 222, 0.08);
}

.media-seq-drop.correct {
  border-color: #6dff9d;
  background: rgba(109, 255, 157, 0.1);
}

.media-seq-drop.wrong {
  border-color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
}

.media-seq-drop .media-process-step {
  width: 100%;
  cursor: pointer;
  background: #1a3a2a;
  border-color: #6dff9d;
  box-shadow: 0 0 10px rgba(109, 255, 157, 0.2);
}

.media-seq-arrow {
  text-align: center;
  color: #b0c4de;
  font-size: 1.2rem;
  line-height: 1;
  padding-left: 44px;
}

.media-process-controls {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.media-process-controls .primary-btn,
.media-process-controls .ghost-btn {
  min-width: 140px;
}

.media-process-message {
  text-align: center;
  font-size: 1.2rem;
  min-height: 2rem;
  color: #b0c4de;
}

@media (max-width: 768px) {
  .media-process-play-area {
    flex-direction: column;
  }
  .media-seq-arrow {
    padding-left: 0;
  }
  .media-process-controls {
    flex-wrap: wrap;
  }
}

/* ===== ХАЙТЕК: СТИЛЬ КОНСТРУКТОРСКОГО БЮРО ===== */

.hitech-bureau {
  width: 100%;
  height: 100%;
  padding: 12px 16px;
  background: rgba(10, 14, 20, 0.92);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hitech-panels {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 0;
  height: 100%;
  min-height: 0;
}

.hitech-panel {
  background: rgba(15, 22, 32, 0.95);
  border: 1px solid #2a3a4f;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.hitech-panel + .hitech-panel {
  border-left: none;
}

.hitech-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00e5ff, transparent);
  opacity: 0.6;
}

.hitech-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid #2a3a4f;
  flex-shrink: 0;
}

.hitech-panel-header h2 {
  color: #00e5ff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  font-family: 'Rajdhani', sans-serif;
}

.hitech-panel-badge {
  padding: 4px 12px;
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid rgba(0, 229, 255, 0.4);
  color: #00e5ff;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
}

.hitech-creation-buttons {
  margin-bottom: 12px;
  flex-shrink: 0;
}

.hitech-big-btn {
  border: 2px solid #00e5ff;
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.15), rgba(0, 229, 255, 0.05));
  color: #00e5ff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  width: 100%;
}

.hitech-big-btn i {
  font-size: 1.2rem;
}

.hitech-big-btn:hover:not(:disabled) {
  background: #00e5ff;
  color: #0a0e14;
}

.hitech-big-btn:active:not(:disabled) {
  transform: translateY(2px);
}

.hitech-big-btn::after {
  content: "";
  position: absolute;
  top: 4px; left: 4px;
  width: 6px; height: 6px;
  border-top: 2px solid #00e5ff;
  border-left: 2px solid #00e5ff;
}

.hitech-big-btn:hover:not(:disabled)::after {
  border-color: #0a0e14;
}

.hitech-reset-btn {
  border-color: #ef4444;
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
  color: #ef4444;
}

.hitech-reset-btn::after {
  border-color: #ef4444;
}

.hitech-reset-btn:hover:not(:disabled) {
  background: #ef4444;
  color: #fff;
}

.hitech-reset-btn:hover:not(:disabled)::after {
  border-color: #fff;
}

.hitech-check-btn {
  border-color: #22c55e;
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
  color: #22c55e;
}

.hitech-check-btn::after {
  border-color: #22c55e;
}

.hitech-check-btn:hover:not(:disabled) {
  background: #22c55e;
  color: #0a0e14;
}

.hitech-check-btn:hover:not(:disabled)::after {
  border-color: #0a0e14;
}

.hitech-inventory-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  flex: 1;
  min-height: 0;
  align-content: start;
  overflow-y: auto;
  padding-right: 4px;
}

.hitech-inv-slot {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #2a3a4f;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
  min-height: 70px;
}

.hitech-inv-slot .slot-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.hitech-inv-slot .slot-name {
  margin-top: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #8a99ad;
}

.hitech-inv-slot:hover {
  border-color: #00e5ff;
  background: rgba(0, 229, 255, 0.06);
}

.hitech-inv-slot.selected {
  border-color: #ffb627;
  background: rgba(255, 182, 39, 0.15);
  box-shadow: 0 0 12px rgba(255, 182, 39, 0.2);
}

.hitech-inv-slot.selected .slot-name {
  color: #ffb627;
}

.hitech-assembly-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.hitech-assembly-board {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: 28px 1fr;
  gap: 4px;
  width: min(100%, 360px);
  aspect-ratio: 1 / 1;
}

.hitech-board-corner {
  grid-column: 1;
  grid-row: 1;
}

.hitech-board-cols {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 0 4px;
}

.hitech-board-rows {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  padding: 4px 0;
}

.hitech-coord-label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00e5ff;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

.hitech-assembly-grid {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #2a3a4f;
  padding: 4px;
}

.hitech-asm-cell {
  background: rgba(0, 0, 0, 0.3);
  border: 1px dashed rgba(0, 229, 255, 0.25);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  min-height: 0;
}

.hitech-asm-cell::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-top: 1px solid #00e5ff;
  border-left: 1px solid #00e5ff;
  opacity: 0.5;
}

.hitech-asm-cell::after {
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  width: 8px; height: 8px;
  border-bottom: 1px solid #00e5ff;
  border-right: 1px solid #00e5ff;
  opacity: 0.5;
}

.hitech-asm-cell .cell-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.hitech-asm-cell .cell-name {
  font-size: 0.55rem;
  margin-top: 2px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.hitech-asm-cell.filled {
  border-style: solid;
  border-color: #00e5ff;
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.12), rgba(0, 229, 255, 0.04));
}

.hitech-asm-cell .hitech-cell-coord {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.5rem;
  color: #4a6a7a;
  font-weight: 700;
  font-family: 'Share Tech Mono', monospace;
}

.hitech-assembly-controls {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-shrink: 0;
  justify-content: center;
}

.hitech-assembly-controls .hitech-big-btn {
  flex: 1;
  min-width: 0;
}

.hitech-message {
  margin-top: 8px;
  min-height: 1.5rem;
  font-size: 0.9rem;
  text-align: center;
  color: #8a99ad;
  padding: 4px 8px;
  flex-shrink: 0;
}

.hitech-message.warning {
  color: #fbbf24;
}

.hitech-message.error {
  color: #f87171;
}

.hitech-message.success {
  color: #34d399;
}

.hitech-tech-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #2a3a4f;
  overflow: hidden;
}

.hitech-tech-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: rgba(0, 229, 255, 0.06);
  border: 1px solid rgba(0, 229, 255, 0.3);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: #00e5ff;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.hitech-tech-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 0;
  padding-right: 4px;
}

.hitech-tech-list::-webkit-scrollbar {
  width: 4px;
}

.hitech-tech-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
}

.hitech-tech-list::-webkit-scrollbar-thumb {
  background: #00b4d8;
}

.hitech-tech-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0, 229, 255, 0.04);
  border: 1px solid #2a3a4f;
  border-left: 3px solid #00e5ff;
  transition: background 0.2s, border-color 0.2s;
  font-size: 0.85rem;
}

.hitech-tech-row.done {
  background: rgba(34, 197, 94, 0.10);
  border-color: #22c55e;
  border-left: 3px solid #22c55e;
}

.hitech-tech-row .tech-icon-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #e6edf5;
}

.hitech-tech-row .tech-emoji {
  font-size: 1.4rem;
  line-height: 1;
  width: 30px;
  text-align: center;
}

.hitech-tech-row .tech-coord {
  text-align: right;
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffb627;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(255, 182, 39, 0.3);
}

.hitech-tech-row.done .tech-coord {
  color: #22c55e;
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.hitech-tech-row.done::after {
  content: "✓";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 20px;
  height: 20px;
  background: #22c55e;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.75rem;
}

.hitech-tech-row {
  position: relative;
}

/* Адаптивность */
@media (max-width: 1100px) {
  .hitech-panels {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    overflow-y: auto;
  }
  .hitech-panel {
    border-left: 1px solid #2a3a4f !important;
  }
  .hitech-assembly-board {
    width: min(100%, 280px);
  }
}

@media (max-width: 600px) {
  .hitech-bureau {
    padding: 8px;
  }
  .hitech-panel {
    padding: 10px;
  }
  .hitech-panel-header h2 {
    font-size: 1rem;
  }
  .hitech-big-btn {
    font-size: 0.9rem;
    padding: 10px;
  }
  .hitech-assembly-board {
    width: min(100%, 220px);
  }
  .hitech-inventory-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== ХАЙТЕК: ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ МОДАЛОК И ДРАГА ===== */

.hitech-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: 20px;
}

.hitech-modal .hitech-modal-card {
  max-width: 600px;
  width: 100%;
  background: #0d1a26;
  border: 1px solid #3a5a6a;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.hitech-modal .modal-close {
  float: right;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
}

.hitech-modal .option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.hitech-modal .option-card {
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  border: 2px solid #3a4a5a;
  background: rgba(255, 255, 255, 0.03);
  color: #b0c4de;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}

.hitech-modal .option-card:hover {
  border-color: #65f6de;
  background: rgba(101, 246, 222, 0.08);
}

.hitech-modal .option-card .option-emoji {
  font-size: 2rem;
  line-height: 1;
}

.hitech-modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.hitech-modal .ghost-btn {
  margin: 0;
}

/* Перетаскивание */
.hitech-inv-slot.dragging,
.hitech-asm-cell.dragging {
  opacity: 0.4;
}

.hitech-asm-cell.drag-over {
  border-color: #ffb627 !important;
  background: rgba(255, 182, 39, 0.15) !important;
}

.hitech-asm-cell.drag-over::before,
.hitech-asm-cell.drag-over::after {
  border-color: #ffb627 !important;
}

/* Адаптив */
@media (max-width: 600px) {
  .hitech-modal .option-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== ТУТОРИАЛ ДЛЯ ХАЙТЕК ===== */

.hitech-tutorial-modal .tutorial-card {
  max-width: 560px;
  background: #0d1a26;
  border: 1px solid #3a5a6a;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.7);
}

.hitech-tutorial-modal .tutorial-body {
  padding: 8px 0 16px;
}

.hitech-tutorial-modal .tutorial-text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #d0d8e0;
  margin-bottom: 18px;
}

.hitech-tutorial-modal .tutorial-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
}

.hitech-tutorial-modal .tutorial-list li {
  font-size: 1rem;
  line-height: 1.6;
  color: #b0c4de;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.hitech-tutorial-modal .tutorial-list li b {
  color: #65f6de;
}

.hitech-tutorial-modal .tutorial-note {
  background: rgba(101, 246, 222, 0.08);
  border-left: 3px solid #65f6de;
  padding: 12px 16px;
  border-radius: 4px;
  color: #b0c4de;
  font-size: 0.95rem;
  margin: 0;
}

.hitech-tutorial-modal .tutorial-note i {
  color: #65f6de;
  margin-right: 8px;
}

.hitech-tutorial-modal .tutorial-actions {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

.hitech-tutorial-modal .tutorial-start-btn {
  width: 100%;
  max-width: 260px;
  padding: 14px 20px;
  font-size: 1.2rem;
  letter-spacing: 1px;
}

/* ===== НОВЫЕ СТИЛИ ДЛЯ ВЫБОРА ЦВЕТА ИГРОКА ===== */

/* Блок выбора цвета на стартовом экране */
.player-color-selector {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(14px);
  padding: 14px 18px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 4px;
}
.player-color-selector:hover {
  background: rgba(255,255,255,.07);
}
.color-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #77839b;
}
.color-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.player-color-selector:hover .color-circle {
  transform: scale(1.05);
}
.color-hint {
  font-size: 10px;
  color: #5a6a7a;
  letter-spacing: .05em;
}

/* Индикатор цвета в HUD (игровой экран) */
.hud-color {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 14px 8px 10px;
  background: rgba(255,255,255,.025);
  cursor: pointer;
  transition: background 0.2s;
  margin-left: 4px;
}
.hud-color:hover {
  background: rgba(255,255,255,.06);
}
.hud-color-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.hud-color-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6d7890;
}

/* Модальное окно выбора цвета */
.color-picker-card {
  max-width: 540px;
  width: 100%;
}
.color-picker-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 20px 0 10px;
}
.color-option {
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.color-option:hover {
  transform: scale(1.08);
}
.color-option.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 20px rgba(255,255,255,0.3);
}

/* Адаптив для мобильных */
@media (max-width: 760px) {
  .hud-color {
    padding: 6px 10px;
  }
  .hud-color-circle {
    width: 22px;
    height: 22px;
  }
  .hud-color-label {
    display: none;
  }
  .color-picker-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===== Звёзды в лабиринте (Промробо, задание 3) ===== */
.maze-cell.star::after {
  content: '★';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255,215,0,0.7);
  animation: starPulse 1.6s ease-in-out infinite;
}
.maze-cell.star-collected::after {
  color: #4a5a3a;
  text-shadow: none;
  animation: none;
}
@keyframes starPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ===== IT-квантум: сопоставление терминов ===== */
.it-match-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto 20px;
}
.it-match-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.it-match-header {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: #6a7a8a;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(101,246,222,0.25);
  margin-bottom: 6px;
}
.it-match-card {
  background: #1a2636;
  border: 2px solid #3a4a5a;
  border-radius: 0;
  padding: 12px 14px;
  min-height: 62px;
  cursor: pointer;
  box-shadow: 4px 4px 0 #0a0f1a;
  color: #b0c4de;
  font-family: 'Courier New', monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.15s;
  font-size: 0.95rem;
  line-height: 1.3;
}
.it-match-card:hover:not(.assigned) {
  background: #2a3a4a;
  border-color: #6a8aaa;
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 #0a0f1a;
}
.it-match-card.selected {
  border-color: #65f6de;
  background: #1a3a3a;
  color: #fff;
  box-shadow: 0 0 20px rgba(101,246,222,0.35), 4px 4px 0 #0a0f1a;
}
.it-match-card.assigned {
  border-color: #6fdc4d;
  background: #1a3a2a;
  color: #d4ffd4;
}
.it-match-card.wrong {
  border-color: #ff6b6b;
  background: #3a1a1a;
  color: #ffb0b0;
}
@media (max-width: 640px) {
  .it-match-container { grid-template-columns: 1fr; }
}
/* ===== ДОРАБОТКИ ДЛЯ МЛАДШИХ УЧАСТНИКОВ ===== */
/* Школа анимации: кадр мультфильма крупнее и заметнее */
.anim-quiz-main {
  min-height: 360px;
}
.anim-quiz-image {
  flex: 0 0 46%;
  min-height: 290px;
}

/* Наноквантум: понятная кнопка сохранения и кнопка повторного обучения */
.nano-game-container {
  position: relative;
}
.nano-add-recipe-btn {
  width: auto;
  min-width: 210px;
  height: auto;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.15;
  text-align: center;
}
.nano-help-btn {
  position: fixed;
  left: 28px;
  bottom: 58px;
  z-index: 35;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  background: rgba(9, 18, 31, .96);
  color: var(--cyan);
  font-size: 27px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(101,246,222,.24), 0 10px 28px rgba(0,0,0,.35);
  transition: transform .18s ease, background .18s ease;
}
.nano-help-btn:hover {
  transform: translateY(-2px) scale(1.05);
  background: rgba(101,246,222,.13);
}
.nano-tutorial-card {
  width: min(720px, 100%);
}
.nano-tutorial-rules {
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .anim-quiz-image {
    width: 100%;
    max-height: 280px;
    min-height: 230px;
  }
  .nano-add-recipe-btn {
    min-width: 180px;
    font-size: 0.76rem;
  }
  .nano-help-btn {
    left: 16px;
    bottom: 48px;
    width: 48px;
    height: 48px;
  }
}

/* ========================================
   ЛОББИ ОНЛАЙН-ИГРЫ: префикс qb-
   ======================================== */
.qb-layer { position:absolute; inset:0; z-index:85; display:grid; place-items:center; padding:20px; background:rgba(5,9,20,.94); overflow:auto; backdrop-filter:blur(18px); }
.qb-layer.hidden,.qb-admin-screen.hidden {display:none!important}
.qb-panel {position:relative; width:min(840px,100%); padding:clamp(22px,4vw,48px); border:1px solid rgba(101,246,222,.22); border-radius:24px; color:#f4f7ff; background:linear-gradient(135deg,rgba(15,26,44,.98),rgba(11,15,31,.98)); box-shadow:0 30px 85px #0009; }
.qb-panel h2 {margin:10px 0;font-size:clamp(28px,4.5vw,44px);letter-spacing:-.04em}
.qb-panel .qb-sub {color:#aab5c9;font-size:15px;line-height:1.6;max-width:620px;margin:0 0 25px}
.qb-eyebrow {font-size:12px;font-weight:800;color:#65f6de;letter-spacing:.17em}
.qb-close {position:absolute;right:19px;top:13px;background:none;border:0;color:#afb8d0;font-size:30px;cursor:pointer}
.qb-choices {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qb-choice {min-width:0;background:#0b1427;border:1px solid #ffffff1c;border-radius:16px;padding:23px;display:flex;flex-direction:column;gap:12px}
.qb-choice-num{color:#65f6de;font-size:11px;font-weight:800;letter-spacing:.12em}
.qb-choice h3{font-size:21px;margin:0}
.qb-choice p{color:#aab5c9;font-size:13px;line-height:1.5;margin:0;flex:1}
.qb-action {border:0;border-radius:11px;cursor:pointer;padding:13px 17px;font-size:14px;font-weight:800;background:#65f6de;color:#082a27;white-space:normal;min-height:48px}
.qb-action:disabled {opacity:.55;cursor:wait}
.qb-action.qb-outline {border:1px solid #65f6de;background:#65f6de17;color:#65f6de}
.qb-choice input,.qb-admin-form input {width:100%;min-width:0;padding:12px 14px;min-height:48px;border:1px solid #53617c;border-radius:10px;background:#060b1a;color:#fff;font-size:17px;outline:0}
.qb-choice input {font-weight:900;letter-spacing:.19em;text-align:center;font-size:23px}
.qb-choice input:focus,.qb-admin-form input:focus {border-color:#65f6de}
.qb-quiet {color:#65f6de;background:#65f6de12;border:1px solid #65f6de40;border-radius:9px;cursor:pointer;padding:9px 14px;font-size:13px;font-weight:700}
.qb-quiet:hover{background:#65f6de27}
.qb-hub-footer,.qb-wait-actions{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:23px}
.qb-connection{font-size:12px;color:#65f6de}.qb-connection.qb-offline{color:#ff909b}
.qb-notice {color:#65f6de;min-height:19px;font-size:13px;margin:12px 0 0}
.qb-wait {max-width:760px}
.qb-code-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(95deg,#1c2941,#10182d);border:1px solid #65f6de44;padding:20px 24px;border-radius:14px}
.qb-code-panel span{color:#aab5c9;font-size:11px;font-weight:700;letter-spacing:.14em;display:block;margin-bottom:8px}
.qb-code-panel strong{font-size:clamp(31px,5vw,48px);font-variant-numeric:tabular-nums;color:#65f6de;letter-spacing:.16em}
.qb-participants{margin-top:22px;background:#090f20;border:1px solid #ffffff20;border-radius:12px;padding:18px}
.qb-participants-top{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.qb-participants-top span{color:#aab5c9}
.qb-player-list{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px;max-height:130px;overflow:auto}
.qb-player {display:inline-flex;align-items:center;gap:9px;color:#cdd6ec;background:#ffffff0b;border:1px solid #ffffff1b;padding:9px 12px;border-radius:7px;font-size:12px}
.qb-dot{width:8px;height:8px;border-radius:50%;background:#65f6de;display:inline-block}.qb-dot.qb-offline{background:#718099}
.qb-danger{color:#ff909b;border-color:#ff909b44;background:#ff909b10}
.qb-preparing{margin-top:18px;text-align:center;font-size:22px;color:#65f6de;font-weight:900}
.qb-admin-form{margin-top:20px;padding:18px;border:1px solid #ffffff25;border-radius:13px;background:#02091a}
.qb-admin-form label{display:block;font-size:13px;font-weight:700;margin-bottom:10px}
.qb-password-row{display:flex;gap:10px}.qb-password-row .qb-action{flex:none}
.qb-admin-form p{font-size:13px;color:#ff909b;margin:8px 0 0}
.qb-admin-screen{position:absolute;inset:0;z-index:95;display:flex;flex-direction:column;background:#060913}
.qb-admin-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;background:#0d1729;border-bottom:1px solid #65f6de33}
.qb-admin-bar strong{font-size:12px;letter-spacing:.12em;color:#65f6de}.qb-admin-bar>div{display:flex;flex-wrap:wrap;gap:8px}
.qb-admin-screen iframe{width:100%;height:100%;flex:1;min-height:0;border:0;background:#060913}
@media(max-width:700px){.qb-choices{grid-template-columns:1fr}.qb-layer{display:block;padding:12px}.qb-panel{margin:10px auto}.qb-admin-bar{flex-direction:column;align-items:stretch}.qb-admin-bar strong{font-size:11px}.qb-admin-form .qb-password-row{flex-direction:column}.qb-code-panel strong{font-size:30px}}
#introModal {z-index:130}