/* 🧱 Кубики-тема: Roblox × Minecraft — всё на CSS, ноль картинок */
/* Эмодзи-фолбэк для систем без эмодзи-шрифта (Win7): цветной Noto Color Emoji (COLRv1),
   активируется классом html.emoji-fb из canvas-детектора в base.html.
   На новых системах класс не ставится — остаются нативные эмодзи ОС. */
@font-face{font-family:'EmojiFallback';src:url('NotoColorEmoji-COLRv1-subset.woff2') format('woff2');
font-weight:100 900;font-style:normal;font-display:swap}
html.emoji-fb body{font-family:'EmojiFallback',-apple-system,system-ui,"Segoe UI",Roboto,sans-serif}
html.emoji-fb .btn,html.emoji-fb .opt,html.emoji-fb input{font-family:inherit}
:root{--ink:#1f2937;--grass:#5ebb2b;--grass-d:#3d8b1a;--dirt:#8b5a2b;--sky:#7ec8f7;
--stone:#9aa5b1;--gold:#f59e0b;--ok:#16a34a;--bad:#dc2626;--paper:#fffdf5;
--cobalt:#1d4ed8;--ice:#dbeafe}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;color:var(--ink);
background-color:#e8f7ff;
background-image:linear-gradient(#ffffff55 2px,transparent 2px),linear-gradient(90deg,#ffffff55 2px,transparent 2px);
background-size:32px 32px}
.wrap{max-width:960px;margin:0 auto;padding:16px}
h2{margin:16px 0 10px;font-size:clamp(24px,4vw,34px)}
h3{margin:28px 0 12px;font-size:clamp(19px,3vw,24px)}
h4{margin:18px 0 8px}
p{margin:8px 0}
.top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;background:var(--grass);
border:3px solid #274d12;border-radius:12px;box-shadow:0 5px 0 #274d12;margin-top:10px;flex-wrap:wrap}
.top nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
nav a{margin-left:0;text-decoration:none;color:#fff;font-weight:700;text-shadow:1px 1px 0 #274d12;white-space:nowrap}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{width:44px;height:44px;border-radius:10px;transition:transform .5s}
.logo img:hover{transform:rotate(360deg) scale(1.1)}
@media(hover:hover){.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.kid:hover{transform:translateY(-3px) rotate(-.3deg)}
.opt:hover{background:var(--ice)}
.node .pin:hover{animation:bounce .5s}}
@keyframes bounce{30%{transform:translateY(-8px)}60%{transform:translateY(2px)}}
.kid{transition:transform .15s}
.card.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
#splash{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
font-size:120px;z-index:99;pointer-events:none;animation:pop .6s}
#splash.show{display:flex}
/* pointer-events:none ОБЯЗАТЕЛЕН: тост висит внизу по центру (bottom:26px) поверх
   карточки задания, а в покое у него opacity:0 — то есть он невидим, но продолжает
   ловить нажатия. На телефоне это «съедало» тапы по кнопке «💡 Подсказка», по полю
   ввода и по кнопкам мини-игр: кнопка видна и активна, а клик уходит в пустоту.
   Внутри тоста нет ничего кликабельного, поэтому отдаём нажатия странице всегда. */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
background:#1f2937;color:#fff;font-weight:700;padding:14px 22px;border-radius:14px;
border:3px solid #000;z-index:99;opacity:0;pointer-events:none;transition:all .25s;
max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.floatxp{position:fixed;left:50%;top:38%;font-size:34px;font-weight:900;color:var(--grass-d);
text-shadow:2px 2px 0 #fff;z-index:99;pointer-events:none;animation:floatup 1.3s forwards}
@keyframes floatup{to{transform:translateY(-90px);opacity:0}}
.card.scene{border-color:#1d4ed8;background:#eff6ff}
#h-hero{display:inline-block}#h-mood{display:inline-block;min-width:30px}
.av img{border-radius:12px;max-width:100%;height:auto}
.logo svg{vertical-align:middle}
/* прогресс-бары квестов/календаря: одинаково во всех браузерах, а не дефолт системы */
progress{width:110px;height:14px;border:2px solid #475569;border-radius:8px;background:#fff;overflow:hidden;-webkit-appearance:none;appearance:none}
progress::-webkit-progress-bar{background:#fff}
progress::-webkit-progress-value{background:linear-gradient(90deg,var(--grass),var(--cobalt))}
progress::-moz-progress-bar{background:linear-gradient(90deg,var(--grass),var(--cobalt))}
/* доступность: видно, что в фокусе (таб/клавиатура) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,.opt:focus-visible,.pcard:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
/* уважаем «меньше анимаций» из настроек ОС */
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(max-width:600px){.top nav{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.top nav .btn,.top nav a{flex-shrink:0}
.btn{width:100%;text-align:center;margin:4px 0}.form.row{grid-template-columns:1fr 1fr}
.btn.sm{width:auto}.qrow .btn{width:auto}
.kids{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.hud>span{font-size:14px;padding:5px 8px}}
/* кубик-кнопки с гранью */
.btn{display:inline-block;background:var(--grass);color:#fff;padding:14px 20px;border-radius:10px;
text-decoration:none;border:3px solid #274d12;font-size:17px;font-weight:800;min-height:52px;cursor:pointer;
box-shadow:0 5px 0 #274d12;text-shadow:1px 1px 0 #274d12;margin:4px 6px 4px 0;vertical-align:middle}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #274d12}
.btn:focus-visible,.opt:focus-visible,.pcard:focus-visible,input:focus-visible,select:focus-visible{outline:4px solid #f59e0b;outline-offset:2px}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #274d12}
.btn.ghost{background:#fff;color:var(--ink);border-color:#475569;box-shadow:0 5px 0 #475569;text-shadow:none}
.btn.ghost:active{box-shadow:0 1px 0 #475569}
.btn.big{font-size:19px}
.btn.sm{padding:8px 12px;min-height:40px;font-size:14px}
.hero h1{font-size:clamp(30px,6vw,54px);line-height:1.05;margin:8px 0;letter-spacing:1px;
text-shadow:3px 3px 0 #fde68a}
.feat{display:grid;gap:8px;padding:0;list-style:none}
.form{display:grid;gap:12px;max-width:420px}.form.row{grid-template-columns:1fr auto 1fr auto;align-items:center;max-width:560px}
.form input,.form select{padding:14px;font-size:18px;border-radius:10px;border:3px solid #475569;width:100%;background:#fff}
.err{background:#fee2e2;padding:10px;border-radius:10px;border:3px solid var(--bad)}
.kids{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;align-items:stretch}
/* плитка мини-игр. ВАЖНО: цвет задаём явно (не color:inherit) — сцена ночная и
   тёмная, а карточка светлая; с inherit название игры становилось светлым на светлом
   (жалоба владельца «не видны названия мини-игр»). */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
.tiles .kid,.tiles a.kid{text-decoration:none;color:var(--v2-ink)}
.tiles .kid b{font-size:17px}
html.light .tiles .kid,html.light .tiles a.kid{color:var(--ink)}
.tile-map{grid-column:span 2;grid-row:span 2;background:linear-gradient(#ffffffd9,#ffffffd9),url(/static/img/biome-1-meadow.jpg) center/cover;border-color:#274d12}
.tile-map .av{font-size:72px}
.tile-map b{font-size:22px}
@media(max-width:700px){.tiles{grid-template-columns:repeat(2,1fr);gap:10px}}
.kid{background:var(--paper);border-radius:12px;padding:16px;border:3px solid #475569;box-shadow:6px 6px 0 #cbd5e1;
display:flex;flex-direction:column;gap:8px}
.kid p{margin:0}
.kid .av{font-size:52px;text-align:center;line-height:1.1}
.kid h3,.kid h4{margin:0;text-align:center}
.kid .btn:last-child,.kid p:last-child{margin-top:auto}
.kid .av img{margin:0 auto}
.kid .av{font-size:52px}.kid.lock{opacity:.65}.kid.worn{outline:3px solid var(--ok)}
.hero-top{display:flex;gap:20px;align-items:center;background:var(--paper);border-radius:12px;
padding:20px;margin:16px 0;border:3px solid #475569;box-shadow:6px 6px 0 #cbd5e1}
/* куб-герой из блоков */
.blocks{display:flex;gap:6px;align-items:flex-end;animation:hover 2.4s ease-in-out infinite}
.blocks.sm .block{width:44px;height:44px;font-size:24px;border-radius:8px}
.block{width:64px;height:64px;border:3px solid #333;border-radius:10px;display:flex;align-items:center;
justify-content:center;font-size:36px;box-shadow:inset -6px -6px 0 #0002}
.block.head{background:#fde68a}.block.body{background:#93c5fd}.block.hand{background:#fca5a5}
@keyframes hover{50%{transform:translateY(-8px)}}
.card{background:var(--paper);border-radius:12px;padding:clamp(14px,3vw,22px);margin:16px 0;
border:3px solid #475569;box-shadow:6px 6px 0 #cbd5e1;min-height:180px}
.card.boss{border-color:var(--bad);background:#fef2f2}
.hud{display:flex;gap:8px;margin:10px 0;font-weight:800;flex-wrap:wrap;align-items:center}
.hud>span{background:#fff;border:2px solid #475569;border-radius:10px;padding:6px 10px;box-shadow:0 3px 0 #cbd5e1}
.hud>span[hidden]{display:none}  /* пустых плашек в HUD быть не должно */
.hud>span.warn{background:#7c2d12;border-color:#fb923c;color:#ffedd5;animation:pop .5s}
/* 📱 Тап-поведение: убираем двойной тап-зум и подсветку на кнопках — тапы
   регистрируются мгновенно (жалоба «кнопка не жмётся» на телефоне) */
.btn,.opt,.pcard{touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
.btn:disabled,.opt:disabled,.pcard:disabled,.btn.wait{opacity:.55;transform:none!important;pointer-events:none}
.fb{min-height:52px;font-size:18px;margin:10px 0;font-weight:700}
.fb.ok{color:var(--ok);animation:pop .3s}.fb.bad{color:var(--bad)}
@keyframes pop{50%{transform:scale(1.06)}}
.opt{display:block;width:100%;margin:8px 0;padding:16px;font-size:22px;font-weight:800;border-radius:10px;
border:3px solid #475569;background:#fff;cursor:pointer;min-height:60px;box-shadow:0 4px 0 #475569}
.opt:active{transform:translateY(3px);box-shadow:0 1px 0 #475569}
/* 🔢 Номер варианта: подсказка, что ответ можно нажать клавишей 1–4. На телефоне
   клавиатуры нет, поэтому там номер прячем — иначе он только шумит. */
.optkey{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
margin-right:10px;border-radius:6px;background:#334155;color:#e2e8f0;font-size:14px;
font-weight:800;vertical-align:middle;text-shadow:none}
html.light .optkey{background:#e8edf5;color:#334155}
@media(hover:none),(max-width:820px){.optkey{display:none}}
.big-in{font-size:26px;padding:14px;border-radius:10px;border:3px solid #475569;width:160px}
.items{font-size:30px;line-height:1.4;word-break:break-all}
.ten{display:grid;grid-template-columns:repeat(5,26px);gap:5px;margin:10px 0}
.dot{width:22px;height:22px;border-radius:6px;background:var(--grass);border:2px solid #274d12}
.dot.off{background:#e2e8f0;border:2px solid #cbd5e1}
/* таблица Пифагора */
.py{border-collapse:collapse;margin:10px auto;font-size:13px}
.py th,.py td{border:2px solid #475569;min-width:30px;height:28px;text-align:center;padding:2px;background:#fff}
.py th{background:#f1f5f9}
.py .hl{background:#dbeafe}
.py .tgt{background:#fef08a;font-weight:800;font-size:18px;animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.15)}}
/* лист героя в стиле RPG */
.hero-sheet{border-color:#274d12}
.hero-cols{display:flex;gap:18px;margin-top:10px}
.hero-main-col{flex:3;min-width:0}
.hero-pet-col{flex:2;min-width:200px;background:#fdf2f8;border:3px solid #f9a8d4;border-radius:12px;padding:12px}
.hero-big{width:170px;border-radius:14px}
.hero-big-emoji{font-size:110px;line-height:1}
.xpbar{background:#e2e8f0;border:2px solid #475569;border-radius:8px;height:16px;overflow:hidden;max-width:420px}
.xpbar>div{background:linear-gradient(90deg,var(--grass),#86efac);height:100%}
.foodbar>div{background:linear-gradient(90deg,#f59e0b,#fde68a)}
.wornchips{display:flex;gap:8px;flex-wrap:wrap}
.wornchips span{background:#f1f5f9;border:2px solid #cbd5e1;border-radius:10px;padding:4px 8px;font-size:15px}
@media(max-width:600px){.hero-cols{flex-direction:column}.hero-big{width:130px}}
/* главная-гейм: компактно, без пустот */
.hero-main{display:flex;gap:16px;align-items:center}
.hero-pic img{width:130px;border-radius:14px}
.hero-info{flex:1;min-width:0}
.hero-info h3{font-size:24px}
.wornrow span{font-size:26px;margin-right:4px}
.chests-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.chest-inline{white-space:nowrap}
.qrow{display:flex;gap:10px;align-items:center;padding:8px 4px;border-bottom:2px dashed #e2e8f0;font-size:15px;flex-wrap:wrap}
.qrow progress{width:110px;flex-shrink:0}
.qrow .btn{margin:0}
details.card summary{cursor:pointer;font-size:18px}
@media(max-width:600px){.hero-main{flex-direction:column;text-align:center}.hero-pic img{width:110px}}
/* облака над картой */
.skyclouds{position:relative;height:44px;overflow:hidden}
.cloud{position:absolute;font-size:34px;animation:drift 14s linear infinite;opacity:.9}
.cloud.c1{left:-60px;top:0}.cloud.c2{left:-120px;top:8px;font-size:26px;animation-duration:20s;animation-delay:-6s}
.cloud.c3{left:-90px;top:4px;font-size:30px;animation-duration:17s;animation-delay:-11s}
@keyframes drift{to{transform:translateX(110vw)}}
/* светлячки */
.fireflies{position:relative;height:26px}
.fireflies span{position:absolute;font-size:18px;animation:fly 5s ease-in-out infinite}
.fireflies span:nth-child(1){left:12%}.fireflies span:nth-child(2){left:34%;animation-delay:-1.5s}
.fireflies span:nth-child(3){left:58%;animation-delay:-3s}.fireflies span:nth-child(4){left:76%;animation-delay:-2s}
.fireflies span:nth-child(5){left:90%;animation-delay:-4s}
@keyframes fly{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-12px);opacity:1}}
@media(min-width:700px){.hero-main-col{max-width:560px}}
table{border-collapse:collapse;width:100%}td,th{border:2px solid #cbd5e1;padding:8px;text-align:left;background:#fff}
@media(max-width:600px){table{font-size:13px}td,th{padding:5px 6px}}
th{background:#f1f5f9}
.muted{color:#64748b}footer{margin:30px 0;color:#475569;font-weight:600}
@media(max-width:600px){.btn{width:100%;text-align:center}.form.row{grid-template-columns:1fr 1fr}}
/* ---------- 📱 мобильная компактность игровых экранов ----------
   Задача: поле игры + ввод ответа на первом экране, без скролла.
   Используется на страницах play/fish/scales/snake/pairs/typing/ghost. */
.game-compact .top{padding:6px 10px;margin-top:6px;gap:4px}
.game-compact .top nav{gap:6px}
.game-compact .wrap, body.game-compact .wrap{padding:8px}
.game-compact main{display:flex;flex-direction:column;gap:8px}
.game-compact h2{margin:2px 0 2px;font-size:19px}
.game-compact .card{margin:0;padding:10px;min-height:0}
.game-compact .card .hud{margin:0 0 4px}
.game-compact .m-hide{display:none!important}       /* инфо-карточки: спрятать на мобиле */
.game-compact footer{margin:8px 0}
.game-compact .fb{min-height:40px;font-size:16px;margin:4px 0}
.game-compact #tower{font-size:18px;min-height:20px}
/* шапка-бар: всё в одну компактную строку */
.game-compact #hud{margin:2px 0;gap:4px}
.game-compact #hud>span{font-size:12px;padding:4px 7px}
/* варианты ответа: компактная сетка 2×2 */
.game-compact .opt{margin:5px 0;padding:12px;font-size:19px;min-height:48px}
@media(max-width:600px){
  .game-compact main{gap:6px}
  .game-compact .kids{grid-template-columns:repeat(2,1fr);gap:8px}
  /* input ответа + кнопка в один ряд */
  .game-compact .big-in{width:min(46vw,180px);font-size:22px;padding:10px}
  .game-compact .card .btn{margin:2px 4px 2px 0;padding:10px 14px;font-size:16px;min-height:46px}
  .game-compact .py{font-size:11px}
  .game-compact .py th,.game-compact .py td{min-width:24px;height:22px}
  .game-compact .items{font-size:24px}
  .game-compact .ten{grid-template-columns:repeat(5,22px)}
  .game-compact .dot{width:19px;height:19px}
}
/* длинные вопросы в карточке — не растягивают экран */
.game-compact #card{overflow-wrap:anywhere}
.game-compact #card h3{font-size:clamp(17px,4.6vw,22px);margin:2px 0}
/* пруд рыбалки: компактнее на мобиле */
.game-compact #pond{font-size:32px;line-height:1.4}
.game-compact #pond span{margin:0 3px}
.game-compact #f-target{font-size:18px;margin:2px 0}
/* весы: гирьки и чаши меньше */
.game-compact #beam{font-size:36px}
.game-compact .chip{min-width:40px;padding:7px 8px;margin:3px;font-size:17px}
/* пары: карточки ниже */
.game-compact .pcard{min-height:62px;font-size:19px}
/* печать: крупный текст задачи меньше */
.game-compact #card .card>div:first-child{font-size:40px!important}
/* гонка с призраком: полосы тоньше */
.game-compact .bar,.game-compact [id^=bar-]{height:18px}
@media(max-width:600px){
  /* кнопка ответа рядом с инпутом, а не на всю ширину */
  .game-compact .card .btn{width:auto}
  /* варианты ответа: 2 в ряд — вдвое ниже блок */
  .game-compact .opt{display:inline-block;width:calc(50% - 6px);margin:4px 3px;vertical-align:top}
  .game-compact #card{text-align:center}
}
/* ---------- 📱 ВСЕ экраны: мобильный комфорт ---------- */
html{-webkit-text-size-adjust:100%}
.chips a{display:inline-block;padding:5px 10px;margin:2px 4px 2px 0;background:#fff;border:2px solid #cbd5e1;
border-radius:10px;font-size:14px;font-weight:700;text-decoration:none;color:var(--ink);white-space:nowrap}
.cal-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.cal-grid .kid{padding:6px;font-size:13px}
.islot:active{background:#fffffff0!important}
@media(max-width:600px){
  .wrap{padding:10px}
  h2{font-size:21px;margin:10px 0 6px}
  h3{font-size:18px;margin:16px 0 8px}
  .top{position:sticky;top:0;z-index:50;margin-top:0;padding:8px 10px}
  .top .btn.sm{padding:6px 8px;font-size:12px;min-height:34px}
  footer{margin:14px 0;font-size:12px}
  input,select,textarea{font-size:16px}   /* ≥16px — iOS не зумит при фокусе */
  table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .hero-info h3{font-size:20px}
  .qrow{font-size:13px}
  .qrow progress{width:70px}
  /* остров: клетки поменьше, всё видно без скролла */
  #isl-grid{font-size:34px!important;gap:6px}
  #isl-grid .islot{min-height:60px!important}
}
/* ============================================================
   🌌 V2 ДИЗАЙН-СИСТЕМА (см. DESIGN-V2.md) — слой поверх легаси.
   Ночная сцена + стеклянные карточки + золотые CTA-кнопки.
   Перекрывает тему для ВСЕХ страниц без правки разметки.
   Селекторы те же, что выше, — этот блок просто последний.
   ============================================================ */
:root{--v2-ink:#0f172a;--v2-mut:#64748b;--v2-ok:#4ade80;--v2-bad:#f87171;
--v2-glass:rgba(255,255,255,.94);--v2-shadow:0 12px 30px rgba(2,6,23,.4)}
body{color:#e7edf7;
background:radial-gradient(1200px 800px at 80% -10%,#2b3f9e 0%,transparent 60%),
radial-gradient(900px 700px at 10% 10%,#6d28d9 0%,transparent 55%),
linear-gradient(180deg,#0b1026 0%,#141b45 55%,#1b2a6b 100%);
background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.75;z-index:0;
background-image:radial-gradient(2px 2px at 12% 22%,#fff,transparent),radial-gradient(1.5px 1.5px at 32% 8%,#fff,transparent),
radial-gradient(2px 2px at 55% 18%,#fff,transparent),radial-gradient(1.5px 1.5px at 74% 30%,#fff,transparent),
radial-gradient(2px 2px at 88% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 44% 36%,#fff,transparent),
radial-gradient(2px 2px at 6% 48%,#fff,transparent),radial-gradient(1.5px 1.5px at 68% 52%,#fff,transparent),
radial-gradient(2px 2px at 92% 60%,#fff,transparent),radial-gradient(1.5px 1.5px at 24% 66%,#fff,transparent),
radial-gradient(2px 2px at 48% 76%,#fff,transparent),radial-gradient(1.5px 1.5px at 78% 84%,#fff,transparent)}
.wrap{position:relative;z-index:1;max-width:1040px;padding:16px 16px 40px}
h2{color:#fff}
h3{color:#fff}
/* шапка: тёмное стекло */
.top{background:rgba(10,16,44,.72);border:1px solid rgba(255,255,255,.14);border-radius:18px;
box-shadow:0 10px 26px rgba(2,6,23,.45);backdrop-filter:blur(8px)}
nav a{color:#e7edf7;text-shadow:none}
.top .btn.ghost{background:rgba(255,255,255,.08);color:#e7edf7;border-color:rgba(255,255,255,.16);
box-shadow:0 4px 0 rgba(0,0,0,.35)}
.top .btn.ghost:active{box-shadow:0 1px 0 rgba(0,0,0,.35)}
.logo img{border-radius:12px}
/* кнопки: главный призыв — золото с прессом */
.btn{background:linear-gradient(180deg,#ffe37a,#ffb020);color:#0b1026;border:none;border-radius:16px;
box-shadow:0 5px 0 #9a5b00;text-shadow:none;font-weight:900}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #9a5b00}
.btn.ghost{background:#eef2ff;color:var(--v2-ink);box-shadow:0 5px 0 #94a3b8}
.btn.ghost:active{box-shadow:0 2px 0 #94a3b8}
/* карточки: стекло */
.card,.kid,.hero-top,.tiles .kid{background:var(--v2-glass);color:var(--v2-ink);border:none;border-radius:22px;
box-shadow:var(--v2-shadow)}
.card.boss{background:linear-gradient(180deg,#fff5f5,#ffe9e9);border:2px solid #fecaca}
.card.scene{background:linear-gradient(180deg,#f0f9ff,#e0f2fe)}
.hero-pet-col{background:#fdf2f8;border-radius:18px;border:1px solid #f9a8d4}
.kid.lock{opacity:.7}
.kid.worn{outline:3px solid var(--v2-ok)}
.tile-map{background:linear-gradient(rgba(15,23,42,.18),rgba(15,23,42,.45)),url(/static/img/biome-1-meadow.jpg) center/cover;color:#fff}
.tile-map .muted{color:#f1f5f9!important}
.tile-map b{color:#fff}
/* мелкий текст внутри светлых карточек */
.muted{color:#94a3b8}
.card .muted,.kid .muted,.hero-top .muted,.tiles .muted,.hero-main .muted{color:var(--v2-mut)}
footer{color:#94a3b8}
/* HUD: тёмные чипы */
.hud>span{background:rgba(10,16,44,.7);color:#fff;border:1px solid rgba(255,255,255,.16);
box-shadow:0 4px 0 rgba(0,0,0,.35);border-radius:12px}
/* ввод и варианты: светлые на тёмном */
input,select,textarea{color:var(--v2-ink)}
.big-in{border-radius:14px;border:2px solid #94a3b8}
.opt,.pcard{color:var(--v2-ink);border:none;border-radius:16px;box-shadow:0 4px 0 #94a3b8}
.opt:active,.pcard:active{box-shadow:0 1px 0 #94a3b8}
@media(hover:hover){.opt:hover{background:#eef2ff}}
.form input,.form select{border-radius:14px;border:none}
.err{border:none;border-radius:14px;color:var(--v2-ink)}
/* фидбек и очки */
.fb.ok{color:var(--v2-ok)}.fb.bad{color:var(--v2-bad)}
.floatxp{color:#ffe37a;text-shadow:2px 2px 0 rgba(0,0,0,.5)}
/* таблицы (отчёты, рекорды, миры): светлые ячейки-«панель».
   Раньше фон ячеек не задавался вообще → тёмный текст (--v2-ink) ложился на тёмную
   сцену и таблица «не читалась» (жалоба владельца). Зебра была полупрозрачной
   (rgba(15,23,42,.035)) — то есть тоже тёмной. Теперь ячейки светлые, зебра светлая.
   overflow НЕ трогаем: на мобиле таблица становится display:block + overflow-x:auto. */
main table{border-collapse:separate;border-spacing:0;background:#fff;box-shadow:var(--v2-shadow)}
td,th{border:none;border-bottom:1px solid #e2e8f0;color:var(--v2-ink);background:#fff}
th{background:#eef2ff;font-weight:800}
main table tr:last-child td{border-bottom:none}
/* таблица Пифагора — отдельная, у неё своя сетка */
.py{border-collapse:collapse;background:transparent;box-shadow:none}
.py th,.py td{border:1px solid #cbd5e1;color:var(--v2-ink)}
/* чипы ссылок (карта) и квесты */
.chips a{background:rgba(10,16,44,.7);color:#fff;border:1px solid rgba(255,255,255,.16)}
.qrow{border-bottom:1px dashed rgba(148,163,184,.4)}
.card .qrow,.kid .qrow{border-bottom:1px dashed #e2e8f0}
/* точки рамки-10 и блоки героя — контраст на тёмном */
.dot.off{background:#334155;border-color:#475569}
.block.head{background:#fde68a}.block.body{background:#93c5fd}.block.hand{background:#fca5a5}
.wornchips span{background:#f1f5f9;border-color:#cbd5e1;color:var(--v2-ink)}
/* остров: клетки читаемы */
.islot{color:var(--v2-ink)}
/* веха-баннер челленджа в v2.html остаётся как есть; остальное — то же стекло */
#toast{background:rgba(10,16,44,.92);border:1px solid rgba(255,255,255,.2)}
@media(max-width:600px){
  .card,.kid,.hero-top{border-radius:18px}
  .btn{width:auto}
  .top{backdrop-filter:none}  /* блюр дорого на слабых телефонах */
}
@media(prefers-reduced-motion:reduce){body::before{display:none}}
/* 🖼 иконки-картинки (эмодзи→PNG): та же строка, что и текст */
.ic{display:inline-block;vertical-align:-.18em;object-fit:contain}
.tile-map .ic,.hud .ic{vertical-align:middle}


/* акцентная рамка (blocked, бонусы): карточки без рамок — вернуть точечно */
.card[style*="border-color"]{border:2px solid currentColor}
/* светлые блоки внутри стекла остаются тёмным текстом */
.card .py,.card .items,.card .ten,.card .blocks{color:var(--v2-ink)}
/* печать: отчёты родителя и «Тетрадь» — тёмная тема в печать не идёт */
@media print{
  body{background:#fff!important;color:#000}
  body::before{display:none!important}
  .top,footer,.noprint,#toast{display:none!important}
  .card,.kid,.hero-top{background:#fff!important;color:#000;box-shadow:none;border:1px solid #94a3b8}
  td,th{color:#000;background:#fff!important}
  a{color:#000;text-decoration:none}
}
/* заголовки ВНУТРИ белых карточек/рядов — тёмные (глобально белые только снаружи).
   Лечит белое-на-белом в guide, parent-отчётах, hero-sheet, blocked, worksheet. */
.card h2,.card h3,.card h4,.kid h3,.kid h4,.hero-top h4,.tiles .kid h3,
.hero-sheet h2,.hero-sheet h3,.hero-sheet h4{color:var(--v2-ink)}
/* страница Героя: витрина + питомец рядом, всё по сетке */
.hero-top .blocks{animation:none}
.hero-title{flex:1;min-width:0}
.hero-title h2{margin:0 0 6px;font-size:clamp(24px,4vw,32px)}
.hero-meta{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.chipmeta{background:#0f172a;color:#fff;font-weight:800;font-size:13px;padding:6px 10px;border-radius:999px}
.hero-title .xpbar{max-width:420px}
.xp-left{margin:4px 0}
.hero-cta{margin:8px 0 0}
.hero-cta .btn{margin-right:8px}
.hero-sheet{margin-top:16px}
.hero-fig{margin:6px 0 2px}
.setbonus{background:#fef9c3;border:2px solid #f59e0b;border-radius:12px;padding:8px 12px;font-weight:800}
.card.inner{margin:10px 0;padding:12px;min-height:0}
.pet-row{display:flex;gap:12px;align-items:flex-start}
.pet-row img{border-radius:14px;flex-shrink:0}
.pet-meta{min-width:0}
.pet-pick img{vertical-align:middle;border-radius:10px}
/* лендинг: герой-блок на той же сцене читаемо */
.hero h1{color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.hero>p,.hero>.feat{color:#e7edf7}
.feat li::before{content:"\2713  "}
/* светлые игры с собственными градиентами (.game-sky): текст тёмный по построению —
   фиксируем здесь, чтобы не зависело от каскада и не повторялось в шаблонах */
.game-sky,.game-sky h3,.game-sky h4,.game-sky p,.game-sky b,.game-sky .muted{color:var(--v2-ink)}
.game-lvl{color:var(--v2-ink);font-weight:900}
/* карта приключений: светлая карточка-подложка под SVG + светлые подписи */
.mapcard{background:linear-gradient(180deg,#7ec8f7 0 34%,#bfe3fd 34% 70%,#d9f99d 70%);border-radius:22px;padding:10px 6px;box-shadow:var(--v2-shadow);margin:10px 0 4px}
/* 🌗 СВЕТЛАЯ ТЕМА (переключаемая, выбор — в шапке, хранится локально).
   Возврат к «бумажной» классике: светлый фон, тёмный текст, зелёные кнопки. */
html.light body{background-color:#e8f7ff;
background-image:linear-gradient(#ffffff55 2px,transparent 2px),linear-gradient(90deg,#ffffff55 2px,transparent 2px);
background-size:32px 32px;color:var(--ink)}
html.light body::before{display:none}
html.light h2,html.light h3{color:var(--ink)}
html.light .top{background:#2f6b12;border:3px solid #274d12;border-radius:12px;box-shadow:0 5px 0 #274d12}
html.light nav a{color:#fff;text-shadow:1px 1px 0 #274d12}
html.light .top .btn.ghost{background:#fff;color:var(--ink);border-color:#475569;box-shadow:0 5px 0 #475569}
html.light .top .btn.ghost:active{box-shadow:0 1px 0 #475569}
html.light .card,html.light .kid,html.light .hero-top,html.light .tiles .kid{background:var(--paper);color:var(--ink);border:3px solid #475569;border-radius:12px;box-shadow:6px 6px 0 #cbd5e1}
html.light .card h2,html.light .card h3,html.light .card h4,html.light .kid h3,html.light .kid h4,html.light .hero-top h4,html.light .hero-sheet h2,html.light .hero-sheet h3,html.light .hero-sheet h4{color:var(--ink)}
html.light .btn{background:#2f6b12;color:#fff;border:3px solid #274d12;border-radius:10px;box-shadow:0 5px 0 #274d12;text-shadow:1px 1px 0 #274d12}
html.light .btn.ghost{background:#fff;color:var(--ink);border-color:#475569;box-shadow:0 5px 0 #475569;text-shadow:none}
html.light .hud>span{background:#fff;color:var(--ink);border:2px solid #475569;border-radius:10px;box-shadow:0 3px 0 #cbd5e1}
html.light td,html.light th{background:#fff;color:var(--ink);border:2px solid #cbd5e1}
html.light th{background:#f1f5f9}
html.light .muted{color:#64748b}
html.light .card .muted,html.light .kid .muted,html.light .hero-top .muted,html.light .tiles .muted,html.light .hero-main .muted{color:#64748b}
html.light footer{color:#475569}
html.light .opt{color:var(--ink);background:#fff;border:3px solid #475569;box-shadow:0 4px 0 #475569}
html.light .chips a{background:#fff;color:var(--ink);border:2px solid #cbd5e1}
html.light input,html.light select,html.light textarea{color:var(--ink)}
html.light .chipmeta{background:#f1f5f9;color:var(--ink)}
html.light .tile-map .muted{color:#334155!important}
html.light .tour-reveal{border-color:var(--gold)}
/* 📊 Полировка таблиц — идея из UI-базлайна raytrading (§6.10): читать отчёты
   и рекорды проще, когда строки не сливаются, шапка не уезжает, а скролл тонкий. */
main table th{position:sticky;top:0;z-index:2}
main table tbody tr:nth-child(even) td,main table tr:nth-child(even) td{background:#f5f7fb}
html.light main table tr:nth-child(even) td{background:#f8fafc}
main table{font-variant-numeric:tabular-nums}   /* цифры в столбик, а не пляшут */
@media(max-width:600px){
  main table::-webkit-scrollbar{height:6px}
  main table::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:6px}
  main table::-webkit-scrollbar-track{background:transparent}
}

/* 📱 Печать/число-инпут: инпут и «Ответить» в одну строку, кнопка не растягивается
   на всю ширину и не прячется за краем (жалоба: на телефоне не нажать «Ответить»). */
.answer-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.answer-row .big-in{flex:0 1 190px;width:auto}
.answer-row .btn{width:auto;min-height:52px;padding:12px 22px;margin:0}
@media(max-width:600px){.answer-row .btn{width:auto}.answer-row .btn.ghost{padding:12px 14px}}
/* ============ 🎴 КАРТОЧКА ВОПРОСА v2 (задание, предметы, ответы) ============
   Один ритм: заголовок → предметы/схема → разделитель → ответы. Отступы заданы
   здесь, а не инлайном, чтобы ничего не «приклеивалось» и не заезжало. */
.q{margin:6px 0 18px;text-align:center}
.q-text{font-size:clamp(20px,4.6vw,27px);font-weight:800;line-height:1.35;
overflow-wrap:anywhere;letter-spacing:.01em}
.card .items{margin:16px auto;font-size:34px;line-height:1.5;word-break:keep-all;
text-align:center;max-width:100%}
.card .items.cols{display:grid;gap:10px 12px;justify-content:center;padding:8px 4px}
.card .items .it{display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;font-size:34px;background:#f1f5f9;border-radius:12px}
html.light .card .items .it{background:#eef2f7}
.answers{margin-top:22px;padding-top:18px;border-top:2px dashed rgba(148,163,184,.45);
display:flex;flex-direction:column;gap:12px}
html.light .answers{border-top-color:#cbd5e1}
.card .answers .opt{margin:0;padding:16px 18px;font-size:21px;min-height:60px;border-radius:16px;
overflow-wrap:anywhere;text-align:center}
.card .answers .opt:hover{transform:translateY(-1px)}
.card .answers .opt:active{transform:translateY(2px)}
.answer-row{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin:0}
.answer-row .big-in{flex:1 1 200px;max-width:280px;width:auto;font-size:24px;padding:14px 16px;
text-align:center;border-radius:14px;border:2px solid #94a3b8;background:#fff;min-height:52px}
.answer-row .btn{width:auto;min-height:54px;padding:12px 24px;margin:0;white-space:nowrap}
.answer-row .btn.ghost{padding:12px 16px}
/* Спринт/челлендж: сетка вариантов компактнее, но не тесно */
.game-compact .q{margin:4px 0 12px}
.game-compact .q-text{font-size:clamp(18px,4.4vw,24px)}
.game-compact .card .items{margin:10px auto;font-size:30px}
.game-compact .answers{margin-top:14px;padding-top:12px;gap:9px}
.game-compact .card .answers .opt{padding:13px 14px;font-size:19px;min-height:54px}
.game-compact .answer-row .big-in{flex:1 1 150px;min-height:50px;font-size:22px}
.game-compact .answer-row .btn{min-height:50px;padding:10px 18px}
/* Планшеты и десктоп: choice-варианты в 2 колонки, если их много и они короткие */
@media(min-width:701px){
 .card .answers.choice2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
}

/* печать: крупный символ читается на любом экране */
.card.ty{text-align:center}
.ty-text{font-size:clamp(48px,12vw,72px);font-weight:900;line-height:1.15;
overflow-wrap:anywhere;margin:6px 0 4px}

/* ==================== 🌌 ЛЕНДИНГ (lp-*) — ночная v2-тема ==================== */
.lp-hero{display:grid;grid-template-columns:1.25fr .75fr;gap:26px;align-items:center;margin:18px 0 10px}
.lp-kicker{display:inline-block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
border-radius:999px;padding:8px 14px;font-weight:800;font-size:14px;margin:0 0 14px}
.lp-hero h1{font-size:clamp(30px,5.4vw,52px);line-height:1.08;margin:6px 0 16px;letter-spacing:-.01em}
.lp-hl{color:var(--gold)}
.lp-lead{font-size:clamp(16px,2vw,19px);line-height:1.6;color:#dbe4f3;max-width:640px}
.lp-cta{margin:18px 0 12px}
.lp-cta .btn{margin-right:10px}
.lp-trust{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none;margin:12px 0 0}
.lp-trust li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;color:#cfd9ec}
.lp-hero-art{text-align:center;position:relative}
.lp-hero-art img{filter:drop-shadow(0 18px 30px rgba(2,6,23,.5))}
.lp-orbit{display:grid;gap:8px;max-width:210px;margin:6px auto 0}
.lp-orbit span{background:rgba(10,16,44,.6);border:1px solid rgba(255,255,255,.14);
border-radius:12px;padding:8px 12px;font-weight:800;font-size:14px;color:#fff}
.lp-h2{font-size:clamp(24px,3.6vw,34px);margin:44px 0 18px;text-align:center}
.lp-note{color:#c3cfe3;max-width:760px;margin:0 auto 16px;font-weight:600}
.lp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.lp-grid.lp-4{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.lp-card{background:var(--v2-glass);color:var(--v2-ink);border-radius:20px;padding:16px 16px 14px;
box-shadow:var(--v2-shadow);transition:transform .15s}
.lp-card:hover{transform:translateY(-3px)}
.lp-card b{font-size:17px;display:block;margin:6px 0 4px}
.lp-card p{margin:0;font-size:14.5px;line-height:1.5;color:var(--v2-mut);font-weight:600}
.lp-ic{font-size:30px;line-height:1;width:54px;height:54px;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#fde68a,#f9a8d4);border-radius:16px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.08)}
.lp-steps .lp-ic{background:linear-gradient(135deg,#a5f3fc,#93c5fd)}
.lp-worlds{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.lp-w{display:flex;gap:12px;align-items:flex-start;background:var(--v2-glass);color:var(--v2-ink);
border-radius:16px;padding:12px 14px;box-shadow:var(--v2-shadow)}
.lp-w>span{font-size:30px;line-height:1;flex-shrink:0}
.lp-w b{display:block;font-size:15.5px;margin-bottom:2px}
.lp-w p{margin:0;font-size:13.5px;color:var(--v2-mut);font-weight:600}
.lp-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.lp-chips span{background:rgba(10,16,44,.6);border:1px solid rgba(255,255,255,.14);color:#fff;
border-radius:999px;padding:9px 14px;font-weight:700;font-size:14px}
.lp-faq{max-width:780px;margin:0 auto;display:grid;gap:10px}
.lp-faq details{background:var(--v2-glass);color:var(--v2-ink);border-radius:16px;padding:14px 18px;
box-shadow:var(--v2-shadow)}
.lp-faq summary{cursor:pointer;font-weight:800;font-size:16.5px}
.lp-faq details[open] summary{margin-bottom:6px}
.lp-faq p{margin:6px 0 2px;font-size:15px;line-height:1.55;color:var(--v2-mut);font-weight:600}
.lp-final{margin:44px 0 18px;text-align:center;background:linear-gradient(120deg,#f472b6,#8b5cf6 55%,#38bdf8);
border-radius:24px;padding:26px 22px;color:#fff;box-shadow:0 16px 40px rgba(2,6,23,.45)}
.lp-final h2{margin:0 0 8px;color:#fff;font-size:clamp(22px,3.4vw,30px)}
.lp-final p{margin:0 0 14px;font-weight:700;color:#f8fafc}
.lp-final .btn{margin:0 8px}
.lp-foot{text-align:center;margin:6px 0 30px}
.lp-foot a{color:#ffd23f}
/* 🌗 светлая тема лендинга */
html.light .lp-kicker{background:#fff;border-color:#cbd5e1;color:var(--ink)}
html.light .lp-trust li,html.light .lp-chips span{background:#fff;color:var(--ink);border-color:#cbd5e1}
html.light .lp-hero h1{color:var(--ink)}
html.light .lp-lead,html.light .lp-note{color:#475569}
@media(max-width:820px){.lp-hero{grid-template-columns:1fr;text-align:center}
.lp-hero-txt{order:2}.lp-lead{margin:0 auto}.lp-cta .btn{width:auto}
.lp-trust{justify-content:center}.lp-hero-art img{width:140px;height:140px}
.lp-orbit{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.lp-card,.lp-card:hover{transform:none;transition:none}}
/* 👤 чип активного аккаунта в шапке: сразу видно, ЧЕЙ аккаунт открыт
   (жалоба «пропал опыт» = вход не в тот аккаунт/старый кэш) */
.top .acc{font-size:12.5px;font-weight:800;color:#cbd5e1;background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 10px;white-space:nowrap;
max-width:38vw;overflow:hidden;text-overflow:ellipsis}
html.light .top .acc{color:#e7edf7;background:rgba(0,0,0,.18);border-color:rgba(255,255,255,.25)}
@media(max-width:600px){.top .acc{max-width:30vw;font-size:11.5px}}

/* ============ 🛡 RPG-шапка кабинета: герой + питомец ============
   Владелец: «Дима — это твоя игра» надо сверстать красиво, как в RPG-играх,
   и вывести сюда же окошко питомца с его статами. Плашка тёмного стекла с золотой
   рамкой; фигура героя — те же блоки, что на странице героя. */
.rpg-bar{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
background:linear-gradient(180deg,rgba(16,24,60,.86),rgba(10,16,44,.93));
border:2px solid rgba(255,210,63,.38);border-radius:22px;padding:16px 18px;margin:10px 0 6px;
box-shadow:0 14px 34px rgba(2,6,23,.5)}
.rpg-id{min-width:0}
.rpg-kicker{margin:0 0 2px;font-size:13px;font-weight:800;letter-spacing:.07em;
text-transform:uppercase;color:#ffd23f}
.rpg-name{margin:0 0 6px;font-size:clamp(26px,5vw,38px);line-height:1.05;color:#fff}
.rpg-meta{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.rpg-meta .chipmeta{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18)}
.rpg-bar .xpbar{max-width:420px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.rpg-left,.rpg-res{color:#c3cfe3!important}
.rpg-left{margin:6px 0 0}
.rpg-cta{margin:10px 0 0}
.rpg-cta .btn{margin-right:8px}
.rpg-res{margin:8px 0 0}
.rpg-res a{color:#ffd23f}
.rpg-pet{width:210px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
border-radius:18px;padding:12px;text-align:center}
.rpg-pet h4{margin:0 0 8px;color:#fff;font-size:15px}
.rpg-pet img{border-radius:14px}
.rpg-pet .muted,.rpg-petmood{color:#c3cfe3!important}
.rpg-petmood{margin:2px 0 8px;font-size:13px}
.rpg-petname{margin:6px 0 0;color:#fff;font-size:16px}
.rpg-pet .xpbar{max-width:none;margin:0 0 6px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
@media(max-width:820px){.rpg-bar{grid-template-columns:1fr;text-align:center;gap:12px}
.rpg-bar .blocks{justify-content:center}.rpg-meta{justify-content:center}
.rpg-pet{width:auto;max-width:320px;margin:0 auto}}
html.light .rpg-bar{background:linear-gradient(180deg,#fffdf5,#f4f7ff);border:3px solid #475569;
box-shadow:6px 6px 0 #cbd5e1}
html.light .rpg-kicker{color:#b45309}
html.light .rpg-name{color:var(--ink)}
html.light .rpg-meta .chipmeta{background:#0f172a;color:#fff;border:none}
html.light .rpg-left,html.light .rpg-res,html.light .rpg-pet .muted,html.light .rpg-petmood{color:#475569!important}
html.light .rpg-pet{background:#fdf2f8;border:3px solid #f9a8d4}
html.light .rpg-pet h4,html.light .rpg-petname{color:var(--ink)}
html.light .rpg-bar .xpbar{background:#e2e8f0;border-color:#475569}
html.light .rpg-res a{color:#1d4ed8}

/* ================= Страница героя: образ, бонусы, награды =================
   Карточка героя и карточка питомца теперь ОДИН блок (.hero-top): раньше это
   были две отдельные карточки, между ними зияла пустота, а на телефоне они
   вообще разъезжались в длинную ленту. */
.hero-fig-col{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}
.hero-mini{margin:0;text-align:center}
.hero-fig-col .hero-big{width:140px}
.hero-fig-col .hero-big-emoji{font-size:92px;line-height:1}
.hero-top .hero-pet-col{flex:0 0 auto;max-width:320px}
.hero-sheet{margin-top:12px}
.gear-cols{display:flex;gap:14px;flex-wrap:wrap}
.gear-col{flex:1 1 300px;min-width:260px;background:#f8fafc;border:2px solid #cbd5e1;border-radius:14px;padding:12px}
.gr-badge{background:#0f172a;color:#fff;font-weight:800;font-size:12px;padding:3px 9px;border-radius:999px;white-space:nowrap}
.fx-list{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.fx-chip{background:#fef3c7;border:2px solid #f59e0b;border-radius:999px;padding:4px 10px;font-weight:800;font-size:14px;color:#78350f}
.fxline{margin:2px 0;font-weight:800;color:#b45309}
.tierline{margin:2px 0;font-size:12px}
.kid.tier-good{border:2px solid #93c5fd}
.kid.tier-epic{border:2px solid #c4b5fd}
.kid.tier-legend{border:2px solid #fdba74;box-shadow:0 0 0 3px rgba(251,146,60,.25)}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.ach-card{display:flex;gap:10px;align-items:flex-start;background:#fff;border:2px solid #cbd5e1;border-radius:14px;padding:10px}
.ach-card.done{background:#f0fdf4;border-color:#86efac}
.ach-card .av{font-size:30px;line-height:1;flex-shrink:0}
.ach-body{min-width:0;flex:1}
.ach-body .xpbar{max-width:none;height:12px}
.stepline{display:flex;gap:6px;margin:6px 0 0}
.stepline span{font-size:11px;font-weight:800;padding:1px 7px;border-radius:999px}
.step-done{background:#16a34a;color:#fff}
.step-todo{background:#e2e8f0;color:#475569}
.pet-pickrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.rpg-kicker-solo{text-align:center;font-size:20px;margin:10px 0 0}
@media(max-width:820px){
  .hero-top{flex-direction:column;align-items:stretch}
  .hero-fig-col,.hero-top .hero-pet-col{max-width:none;width:auto;margin:0 auto}
  .gear-col{min-width:0}
}
html.light .gear-col{background:#f8fafc;border-color:#cbd5e1}
html.light .ach-card{background:#fff}
html.light .ach-card.done{background:#f0fdf4}
html.light .fx-chip{color:#78350f}
html.light .ach-body .muted,html.light .tierline,html.light .stepline span{color:#475569}
html.light .fxline{color:#b45309}

/* ⏳ приглашение на «Испытание Хранителя Времени» (в календаре кабинета) */
.trial-offer{background:#fff7ed;border:3px solid #fb923c;border-radius:16px;padding:12px;margin:10px 0}
.trial-offer p{margin:6px 0}
html.light .trial-offer{background:#fff7ed;border-color:#fb923c}

/* 🏘 экономика деревни: жители, дневной урожай, постройки */
.village-eco{border:3px solid #86efac!important;background:linear-gradient(180deg,#f0fdf4,#dcfce7)}
.eco-row{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0}
.eco-cell{background:#fff;border:2px solid #86efac;border-radius:14px;padding:6px 12px;display:flex;flex-direction:column;align-items:center;min-width:96px}
.eco-cell b{font-size:19px;color:#166534}
.eco-cell .muted{font-size:12px}
html.light .village-eco{background:linear-gradient(180deg,#f0fdf4,#dcfce7)}
html.light .eco-cell{background:#fff;border-color:#86efac}
html.light .eco-cell b{color:#166534}

/* ============ 🎭 «Кто играет»: аккаунт + герой + смена игрока ============
   Владелец 5 раз возвращался к жалобе «на компьютере сына показывается чужой герой».
   Причина всегда одна: на общем компьютере остался вход ПОД ДРУГИМ аккаунтом
   (в логах — запросы /kid/5 и /hero/5 «Дима» с домашнего ПК, т.е. сессия родителя).
   Данные при этом целы. Поэтому имя героя и аккаунт показываются прямо на экране,
   а «выйти» названо своим именем — «сменить игрока», чтобы это было очевидно. */
.rpg-who{margin:8px 0 0;font-size:13.5px;color:#c3cfe3}
.rpg-who b{color:#fff}
.rpg-who a,.who-line a{color:#ffd23f;font-weight:800;text-decoration:none;white-space:nowrap}
.rpg-who a:hover,.who-line a:hover{text-decoration:underline}
.rpg-who-solo{margin:2px 0 12px}
.who-line{margin:2px 0 10px;font-size:13.5px;color:#cbd5e1}
.who-line b{color:#fff}
html.light .rpg-who{color:#334155}
html.light .rpg-who b{color:var(--ink)}
html.light .rpg-who a,html.light .who-line a{color:#b45309}
html.light .who-line{color:#334155}
html.light .who-line b{color:var(--ink)}

/* ============ 📱 Экранная клавиатура: вопрос должен быть НАД клавишами ============
   Жалоба владельца: при вводе ответа снизу выезжает цифровая клавиатура, и карточка
   с вопросом уезжает под неё («съезжает на меню») — ребёнок не видит, на что отвечает.
   Когда клавиатура открыта (html.kb-open, высоты считает static/kb.js), строка фидбека
   и карточка задания прилипают к низу ВИДИМОЙ области: фидбек — самый низ, карточка
   ровно над ним, то есть прямо над клавиатурой. Только узкие экраны (<=820px),
   на десктопе ничего не меняется. */
@media(max-width:820px){
html.kb-open #fb{position:fixed;left:8px;right:8px;bottom:calc(var(--kb,0px) + 6px);
z-index:70;margin:0;min-height:0;padding:8px 12px;font-size:16px;border-radius:14px;
background:#fff;color:var(--v2-ink);box-shadow:var(--v2-shadow)}
html.kb-open #fb:empty{display:none}
html.kb-open #fb.ok{color:#15803d}
html.kb-open #fb.bad{color:#b91c1c}
html.kb-open #card{position:fixed;left:8px;right:8px;margin:0;z-index:69;
/* Фиксированная карточка перекрывает HUD и квесты: стекло здесь нечитаемо. */
background:#fff;
bottom:calc(var(--kb,0px) + var(--fbh,0px) + 12px);
max-height:calc(var(--vvh,100vh) - var(--fbh,0px) - 24px);
overflow-y:auto;-webkit-overflow-scrolling:touch}
}

/* ============ 🎁 Метка «NEW» на вещах, которые дали в награду ============
   Запрос владельца: «добавь метку на новые вещи одежду когда их дают в награду».
   Вещь, выпавшая из сундука / заезда / квеста / календаря / вехи, помечается
   лентой NEW, подсвечивается золотой рамкой и встаёт первой в своём слоте.
   Метку снимают: кнопка «Надеть» (api_equip) либо просмотр гардероба
   (api_gear_seen — через 3 секунды после показа страницы героя, чтобы метка
   успела попасться на глаза, но не висела вечно). */
.kid.new-item{position:relative;border-color:#f59e0b;
box-shadow:0 0 0 3px rgba(245,158,11,.35),6px 6px 0 #cbd5e1}
.newflag{position:absolute;top:-11px;right:-9px;z-index:2;
background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;
font-size:12px;font-weight:900;letter-spacing:.08em;
padding:3px 10px;border-radius:999px;box-shadow:0 3px 10px rgba(2,6,23,.35);
animation:newpulse 1.6s ease-in-out infinite}
@keyframes newpulse{50%{transform:scale(1.14)}}
@media(prefers-reduced-motion:reduce){.newflag,.newflag-inline{animation:none}}
.newhint{margin:8px 0 0;padding:10px 14px;border-radius:12px;
background:rgba(245,158,11,.16);border:2px solid rgba(245,158,11,.55);
color:#fde68a;font-weight:700}
.newhint b{color:#fff}
html.light .newhint{background:#fef3c7;border-color:#f59e0b;color:#92400e}
html.light .newhint b{color:#78350f}
.hero-meta .chipmeta.newmeta,.rpg-meta .chipmeta.newmeta{
background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border:none;
animation:newpulse 1.6s ease-in-out infinite}
.newflag-inline{display:inline-block;margin-left:8px;padding:3px 10px;border-radius:999px;
background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;font-size:12.5px;font-weight:800;
white-space:nowrap;vertical-align:middle;animation:newpulse 1.6s ease-in-out infinite}

/* ============ 📖 Разбор задания: верный ответ + как решать, В САМОЙ карточке ====
   Запрос владельца: «в каждом вопросе после неправильного ответа давай ответ и
   подробное объяснение-подсказку» и «давай сразу в той же форме или выше, чтоб
   сразу было видно». Раньше подсказка была мелкой строкой ПОД карточкой — её не
   замечали. Теперь блок стоит ПЕРВЫМ внутри #card (выше вопроса): на телефоне
   карточка прижата над клавиатурой, поэтому разбор виден сразу.
   .hint — вариант «взял подсказку» (ответ ещё можно вписать, опыт −50%). */
.review{margin:0 0 12px;padding:12px 14px;border-radius:14px;font-size:16px;line-height:1.35;
background:#fff4dc;
border:3px solid #a64b00;color:#542600}
.review b{display:block;color:inherit;font-size:18px;margin:0 0 6px}
.review ol{margin:6px 0 0 18px;padding:0}
.review li{margin:5px 0}
.review .rv-note{margin:9px 0 0;font-size:14px;opacity:1}
.review .btn{margin-top:9px}
.review .cost{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;
background:#7f1d1d;color:#fff;font-size:14px;font-weight:800;vertical-align:middle}
.review.hint{border-color:#075985;background:#e0f2fe;color:#0c3553}
.hintrow{margin:10px 0 0;text-align:center}
html.light .review{background:#fff4dc;color:#542600}
html.light .review b{color:inherit}
html.light .review.hint{background:#e0f2fe;color:#0c3553}
html.light .review.hint b{color:inherit}
/* ❔ «Как играть» в мини-играх: раньше подсказка была помечена m-hide и
   пропадала на игровых экранах совсем — ребёнок открывал «Весы» и не знал,
   что делать. Теперь это одна строка, которая разворачивается по тапу. */
.howto{margin:6px 0 10px}
.howto>summary{display:inline-block;cursor:pointer;font-weight:800;font-size:14px;
padding:6px 12px;border:2px solid #475569;border-radius:10px;background:#1f2937;color:#e2e8f0;
list-style:none}
.howto>summary::-webkit-details-marker{display:none}
.howto>summary::marker{content:""}
.howto[open]>summary{margin-bottom:6px}
.howto p{margin:6px 0 0}
html.light .howto>summary{background:#fff;color:#0f172a;border-color:#94a3b8}
/* 🚩 «Дальше» на карте: ребёнок не должен вспоминать, где остановился. */
.nextup{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 4px;
padding:9px 12px;border-radius:14px;background:rgba(245,158,11,.14);border:2px solid var(--gold)}
.nextup span:first-child{font-weight:900}
html.light .nextup{background:#fffbeb}
/* 🧭 Быстрый переход по кабинету: одна строка, скроллится вбок на телефоне,
   липнет к верху — до сундуков и рекордов не надо крутить страницу. */
.qnav{position:sticky;top:6px;z-index:40;display:flex;gap:6px;overflow-x:auto;
margin:10px 0 14px;padding:7px 8px;border-radius:14px;background:rgba(11,16,38,.92);
border:2px solid #334155;box-shadow:0 3px 0 rgba(0,0,0,.3);scrollbar-width:none}
.qnav::-webkit-scrollbar{display:none}
.qnav a{flex:0 0 auto;padding:7px 12px;border-radius:10px;background:#1f2937;color:#e2e8f0;
font-weight:800;font-size:14px;text-decoration:none;border:2px solid #475569;white-space:nowrap}
.qnav a:active{transform:translateY(2px)}
html.light .qnav{background:#f1f5f9;border-color:#cbd5e1}
html.light .qnav a{background:#fff;color:#0f172a;border-color:#94a3b8}
@media print{.qnav{display:none!important}}
/* ↑ Наверх: длинные страницы (кабинет, карта, герой) — один тап вместо
   долгой прокрутки. На игровых экранах скрыта, чтобы не мешать. */
.totop{position:fixed;right:14px;bottom:18px;z-index:60;display:none;
width:48px;height:48px;border-radius:50%;font-size:22px;font-weight:900;line-height:1;
background:#1f2937;color:#fff;border:3px solid #000;box-shadow:0 4px 0 rgba(0,0,0,.35);
cursor:pointer;padding:0}
.totop.on{display:block}
.totop:active{transform:translateY(2px);box-shadow:none}
body.game-compact .totop{display:none!important}
html.light .totop{background:#fff;color:#0f172a;border-color:#475569}
@media print{.totop{display:none!important}}
/* 🔊 «послушать» рядом с вопросом: у задач с вариантами ответа кнопки озвучки
   раньше не было, а читать длинный вопрос семилетке бывает тяжело. */
.q-say{display:inline-block;margin-top:10px;font-size:14px}
.rv-say{font-size:13px}
.rv-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 0}
/* ⬤ Полоса заезда: 8 точек — верно / ошибка / сейчас / осталось. */
.dots{display:flex;gap:7px;justify-content:center;margin:2px 0 10px}
.dotp{width:15px;height:15px;border-radius:50%;background:#475569;
border:2px solid #94a3b8;box-shadow:0 2px 0 rgba(0,0,0,.25);transition:transform .15s}
.dotp.ok{background:var(--ok);border-color:#86efac}
.dotp.bad{background:var(--bad);border-color:#fca5a5}
.dotp.cur{background:var(--gold);border-color:#fde68a;transform:scale(1.25)}
html.light .dotp{background:#e2e8f0;border-color:#94a3b8}
html.light .dotp.ok{background:#22c55e;border-color:#16a34a}
html.light .dotp.bad{background:#ef4444;border-color:#dc2626}
html.light .dotp.cur{background:#f59e0b;border-color:#d97706}