/* Approved Constructor of Discoveries: presentation only, existing state/API retained. */
:root,:root[data-skin],:root[data-theme="light"][data-skin],:root[data-theme="light"]{--paper:#fbf7ef;--paper-2:#f2e9dc;--card:#fffdf8;--grid:#e7dac5;--rule:#d8cbb7;--ink:#173451;--ink-soft:#526376;--ink-faint:#66717b;--accent:#aa3c20;--accent-dim:#f7e3d6;--on-accent:#fff;--shadow:0 2px 3px #56432306,0 8px 24px #5643230a;--r:18px;--pattern:none}
:root[data-theme="dark"],:root[data-theme="dark"][data-skin]{--paper:#19232b;--paper-2:#25323b;--card:#23313b;--grid:#3b4b55;--rule:#52616b;--ink:#f5f0e7;--ink-soft:#c0cad1;--ink-faint:#aab7c0;--accent:#ffae8d;--accent-dim:#48342b;--on-accent:#312018;--shadow:0 6px 24px #0002}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]),:root[data-skin]:not([data-theme="light"]){--paper:#19232b;--paper-2:#25323b;--card:#23313b;--grid:#3b4b55;--rule:#52616b;--ink:#f5f0e7;--ink-soft:#c0cad1;--ink-faint:#aab7c0;--accent:#ffae8d;--accent-dim:#48342b;--on-accent:#312018;--shadow:0 6px 24px #0002}}
body:not(.lesson-open){background-image:none;background-color:var(--paper)}
.home .banner{background:var(--card);border-radius:24px;padding:24px;gap:20px}
:root .home .home-art{width:clamp(220px,28vw,360px);height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:20px;mask-image:none;-webkit-mask-image:none}
.home-heading{letter-spacing:-.025em}.tabs-row{gap:10px}.tabs-row button{border-radius:14px;box-shadow:none}
#viewHome .tile{border-radius:20px;background:var(--card);box-shadow:var(--shadow);min-height:112px}
#viewHome .tile em,.album-ico.illustrated-icon,.illustrated-icon{background:var(--paper-2);border:1px solid var(--rule);border-radius:16px}
.card,.modal,.voice-pop{border-color:var(--rule)}.album-link{background:var(--card);border-radius:18px}
#skinChips .skin-card img{object-fit:contain;background:#f5e7d1;border-radius:12px}
.profile-identity{background:var(--card);border-radius:20px}
.voice-chat-feed{background:var(--paper)}.voice-chat-tools button{border-radius:16px}.voice-chat-input{border-radius:20px}
@media(max-width:600px){.home .banner{padding:16px;grid-template-columns:minmax(0,1fr);gap:12px}.home .banner-text{display:block}.home .home-heading{font-size:clamp(21px,6vw,28px)}.home #bannerTitle,.home #bannerNote{grid-column:auto;grid-row:auto}:root .home .home-art{grid-column:1;grid-row:auto;width:100%;max-height:210px;height:auto;margin:0 auto}.home .banner .ring{display:none}#viewHome .tile{min-height:100px}}
@media(prefers-reduced-motion:reduce){.tile,.card{transition:none}}
/* Equal 4×3 sprite cells; IDs and family permissions are unchanged. */
.has-portrait{background-image:url('/img/constructor/avatars.webp');background-size:400% 300%;background-color:var(--paper-2)}
[data-portrait="boy-1"],[data-portrait="boy-2"],[data-portrait="girl-1"],[data-portrait="girl-2"]{background-position-y:0%}
[data-portrait="dad-1"],[data-portrait="dad-2"],[data-portrait="mom-1"],[data-portrait="mom-2"]{background-position-y:50%}
[data-portrait="grandma-1"],[data-portrait="grandma-2"],[data-portrait="grandpa-1"],[data-portrait="grandpa-2"]{background-position-y:100%}

.skin-save-note{font-size:.85rem;line-height:1.5;color:var(--ink-soft)}.skin-save-note,#skinDone{grid-column:1/-1;width:100%}#skinDone{min-height:48px}

/* Each story owns its background and accents, independently of brightness. */
:root[data-skin="boy"]:not([data-theme="dark"]){--paper:#edf5f1;--paper-2:#dcebe3;--card:#fbfefa;--grid:#cadfd5;--rule:#abc6b9;--ink:#193d3c;--ink-soft:#466762;--ink-faint:#526e68;--accent:#176b65;--accent-dim:#cfe8df;--on-accent:#ffffff}
:root[data-skin="boy"][data-theme="dark"]{--paper:#142b29;--paper-2:#1c3935;--card:#21423d;--grid:#355a52;--rule:#52786f;--ink:#eef8ed;--ink-soft:#c0d8cc;--ink-faint:#afc9bc;--accent:#8bd8ba;--accent-dim:#2c5547;--on-accent:#102d25}
@media(prefers-color-scheme:dark){:root[data-skin="boy"]:not([data-theme="light"]){--paper:#142b29;--paper-2:#1c3935;--card:#21423d;--grid:#355a52;--rule:#52786f;--ink:#eef8ed;--ink-soft:#c0d8cc;--ink-faint:#afc9bc;--accent:#8bd8ba;--accent-dim:#2c5547;--on-accent:#102d25}}
:root[data-skin="girl"]:not([data-theme="dark"]){--paper:#f7eff6;--paper-2:#ecdeed;--card:#fffafe;--grid:#e4cfe2;--rule:#cbb1cb;--ink:#422f4d;--ink-soft:#68536e;--ink-faint:#735e78;--accent:#854479;--accent-dim:#eed7e8;--on-accent:#ffffff}
:root[data-skin="girl"][data-theme="dark"]{--paper:#2b2032;--paper-2:#392b43;--card:#413149;--grid:#5a4662;--rule:#7e6487;--ink:#fff0f9;--ink-soft:#ddc7df;--ink-faint:#ccb6cf;--accent:#e8abd7;--accent-dim:#64435e;--on-accent:#352238}
@media(prefers-color-scheme:dark){:root[data-skin="girl"]:not([data-theme="light"]){--paper:#2b2032;--paper-2:#392b43;--card:#413149;--grid:#5a4662;--rule:#7e6487;--ink:#fff0f9;--ink-soft:#ddc7df;--ink-faint:#ccb6cf;--accent:#e8abd7;--accent-dim:#64435e;--on-accent:#352238}}

/* Story scenery stays behind opaque content and never captures touches. */
:root{--world-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221440%22%20height%3D%22900%22%20viewBox%3D%220%200%201440%20900%22%3E%3Cg%20opacity%3D%22.25%22%3E%3Cg%20fill%3D%22%23c99559%22%20stroke%3D%22%239f6b3f%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%2228%22%20y%3D%22130%22%20width%3D%2272%22%20height%3D%2272%22%20rx%3D%2212%22%20transform%3D%22rotate%28-12%2064%20166%29%22%2F%3E%3Cpath%20d%3D%22M55%20340h100v75h-26v-25a24%2024%200%200%200-48%200v25H55z%22%2F%3E%3Cpath%20d%3D%22M1270%20160l64-95%2064%2095z%22%2F%3E%3Crect%20x%3D%221310%22%20y%3D%22520%22%20width%3D%2278%22%20height%3D%2278%22%20rx%3D%2212%22%20transform%3D%22rotate%2815%201349%20559%29%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22730%22%20r%3D%2240%22%2F%3E%3Cpath%20d%3D%22M1240%20780h112v-78h-112z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23af8050%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M42%20149l40-9m-35%2029l40-9M1324%20546l41%2011m-46%2012l42%2011%22%2F%3E%3Cpath%20d%3D%22M0%20245Q90%20210%20178%20264M1250%20360q90-50%20190-20%22%20stroke-dasharray%3D%223%2012%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
:root[data-skin="boy"]{--world-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221440%22%20height%3D%22900%22%20viewBox%3D%220%200%201440%20900%22%3E%3Cg%20opacity%3D%22.25%22%3E%3Cpath%20d%3D%22M-30%2060C235%20180-65%20305%2096%20455S230%20660%2020%20880M1460%205c-240%20190%2060%20290-88%20460s-210%20275%2080%20430%22%20fill%3D%22none%22%20stroke%3D%22%2379a397%22%20stroke-width%3D%2232%22%2F%3E%3Cpath%20d%3D%22M-30%2060C235%20180-65%20305%2096%20455S230%20660%2020%20880M1460%205c-240%20190%2060%20290-88%20460s-210%20275%2080%20430%22%20fill%3D%22none%22%20stroke%3D%22%23f2e2bf%22%20stroke-width%3D%2218%22%20stroke-dasharray%3D%222%2019%22%20stroke-linecap%3D%22round%22%2F%3E%3Cg%20fill%3D%22%2354927b%22%20stroke%3D%22%23376b5a%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M50%20350l50-100%2050%20100h-38v34H88v-34zM1290%20180l45-90%2045%2090h-34v28h-22v-28zM1260%20680l65-118%2065%20118h-50v38h-30v-38z%22%2F%3E%3Cellipse%20cx%3D%22146%22%20cy%3D%22610%22%20rx%3D%2224%22%20ry%3D%2244%22%20transform%3D%22rotate%2832%20146%20610%29%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23b39a64%22%3E%3Cellipse%20cx%3D%2265%22%20cy%3D%22590%22%20rx%3D%2225%22%20ry%3D%2213%22%2F%3E%3Cellipse%20cx%3D%221380%22%20cy%3D%22425%22%20rx%3D%2228%22%20ry%3D%2216%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
:root[data-skin="girl"]{--world-art:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221440%22%20height%3D%22900%22%20viewBox%3D%220%200%201440%20900%22%3E%3Cg%20opacity%3D%22.25%22%3E%3Cpath%20d%3D%22M-20%20180q110-150%20210-15M1250%20460q90-190%20210-80%22%20fill%3D%22none%22%20stroke%3D%22%23bc97b5%22%20stroke-width%3D%223%22%20stroke-dasharray%3D%223%2014%22%2F%3E%3Cg%20fill%3D%22%23bb88ae%22%20stroke%3D%22%23865d8b%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M70%20290q38-18%2076%200v88q-38-18-76%200-38-18-76%200v-88q38-18%2076%200z%22%2F%3E%3Cpath%20d%3D%22M70%20290v88%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M1285%20620q40-20%2080%200v86q-40-20-80%200-40-20-80%200v-86q40-20%2080%200z%22%2F%3E%3Cpath%20d%3D%22M1285%20620v86%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23cba562%22%3E%3Cpath%20d%3D%22M1300%20125l9%2024%2026%201-21%2016%207%2025-21-15-22%2015%208-25-22-16%2027-1zM105%20670l8%2022%2024%201-19%2014%206%2023-19-13-20%2013%207-23-20-14%2025-1z%22%2F%3E%3Ccircle%20cx%3D%221360%22%20cy%3D%22310%22%20r%3D%227%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%22510%22%20r%3D%225%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M1350%20800a48%2048%200%201%201-42-72%2039%2039%200%200%200%2042%2072z%22%20fill%3D%22%23b89aca%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
body:not(.lesson-open){background-image:var(--world-art);background-size:1440px 900px;background-position:center top;background-repeat:repeat-y}
@media(max-width:700px){body:not(.lesson-open){background-size:100% 700px}}


/* Pet adoption: contained cards, a clear choice, and gentle movement. */
#petPop .pet-box{max-width:520px;box-sizing:border-box;padding:24px;border-radius:28px;box-shadow:0 18px 70px #0003}
#petPop .pet-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}
#petPop .pet-pick button{position:relative;min-width:0;width:100%;box-sizing:border-box;padding:14px 10px 12px;border-radius:22px;background:radial-gradient(ellipse at 50% 48%,var(--card) 20%,var(--paper-2) 75%);transition:border-color .18s,box-shadow .18s}
#petPop .pet-pick .pet-art{width:100%;max-width:180px;min-width:0;margin:0 auto 10px}
#petPop .pet-pick .pet-photo{width:100%;height:auto;aspect-ratio:1;object-fit:contain;transform-origin:50% 95%}
#petPop .pet-pick button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
#petPop .pet-pick button[aria-pressed="true"]::after{content:'✓';position:absolute;right:8px;top:8px;width:26px;height:26px;line-height:26px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
#petPop .pet-pick button[aria-pressed="true"] .pet-photo{animation:pet-welcome .7s ease-out both}
#petPop .pet-names button{min-height:44px;padding:10px 16px;border-radius:14px}
#petPop .pet-names button[aria-pressed="true"]{background:var(--accent-dim)}
#petPop .pet-acts button{min-height:48px}
#petPop .pet-acts button:first-child:not(:disabled){background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
#petPop .pet-scene{border:1px solid var(--rule);border-radius:22px;overflow:hidden;background:var(--paper-2)}
#petPop .pet-say{padding:12px;background:var(--paper-2);border-radius:16px;line-height:1.45}
#petPop .pet-grid button{min-height:58px;border-radius:16px}
/* One transform animation avoids competing breathe/sway tracks. Clothes follow the body. */
#petPop .pet-scene .pet-live.pet-glad .pet-photo,#petPop .pet-scene .pet-live.pet-glad .pet-wear-layer{animation:pet-contented 4.8s ease-in-out infinite;transform-origin:50% 100%}
#petPop .pet-scene .pet-live.pet-react-play{animation:none}
#petPop .pet-scene .pet-live.pet-react-pat .pet-photo,#petPop .pet-scene .pet-live.pet-react-pat .pet-wear-layer{animation:pet-photo-tilt 1.5s ease-in-out 1}
#petPop .pet-scene .pet-live.pet-react-eat .pet-photo,#petPop .pet-scene .pet-live.pet-react-eat .pet-wear-layer{animation:pet-photo-chew .3s ease-in-out 4}
#petPop .pet-scene .pet-live.pet-react-play .pet-photo,#petPop .pet-scene .pet-live.pet-react-play .pet-wear-layer{animation:pet-photo-hop .6s ease-in-out 2}
#petPop .pet-scene .pet-live.pet-react-hiss .pet-photo,#petPop .pet-scene .pet-live.pet-react-hiss .pet-wear-layer{animation:pet-photo-lean .9s ease-in-out 1}
@keyframes pet-contented{0%,100%{transform:rotate(0) scale(1)}35%{transform:rotate(-.8deg) scale(1,1.012)}70%{transform:rotate(.8deg) scale(1,1.008)}}
@keyframes pet-welcome{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-6px) rotate(-3deg)}70%{transform:translateY(0) rotate(2deg)}}
@media(max-width:480px){#petPop .pet-box{padding:16px;border-radius:22px}#petPop .pet-pick{gap:10px}#petPop .pet-pick button{padding:10px 6px}#petPop .pet-pick .pet-art{max-width:150px}}
@media(prefers-reduced-motion:reduce){#petPop .pet-photo,#petPop .pet-wear-layer{animation:none!important}#petPop .pet-pick button{transition:none}}

/* Illustrated primary navigation: consistent readable symbols in every world. */
.top-actions .app-icon.nav-art{width:36px;height:36px;flex-shrink:0;filter:drop-shadow(0 2px 1px #17345112)}
.top-actions .icon-btn{background:var(--card);color:var(--ink);border-color:var(--rule);border-radius:18px}
.top-actions .icon-btn[aria-pressed="true"]{background:var(--accent-dim);border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.top-actions .icon-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Настольные занятия — те же материалы и контур, что у значков приложения.
   Светлая сторона всегда слоновая кость, тёмная — синий графит во всех темах. */
:root{--board-light:#f4ead7;--board-dark:#b19377;--board-edge:#715d4c;--board-mark:#155f59;--board-mark-ink:#fff8e8}
:root[data-skin="boy"]{--board-light:#e5f0df;--board-dark:#80a69a;--board-edge:#416d65}
:root[data-skin="girl"]{--board-light:#f3e6ef;--board-dark:#b29ab9;--board-edge:#776083;--board-mark:#71376b}
:root[data-theme="dark"]{--board-light:#b9c5bc;--board-dark:#617a77;--board-edge:#9bb7ac;--board-mark:#ffe0a1;--board-mark-ink:#173451}
:root[data-theme="dark"][data-skin="girl"]{--board-light:#cbbdce;--board-dark:#826b8e;--board-edge:#bf9bc5}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--board-light:#b9c5bc;--board-dark:#617a77;--board-edge:#9bb7ac;--board-mark:#ffe0a1;--board-mark-ink:#173451}
  :root:not([data-theme="light"])[data-skin="girl"]{--board-light:#cbbdce;--board-dark:#826b8e;--board-edge:#bf9bc5}
}
:is(#viewChess,#viewCheckers,#viewBackgammon) .fun-card{background:var(--card);border-radius:24px;gap:14px}
:is(#viewChess,#viewCheckers,#viewBackgammon) .fun-card h2{width:100%;text-align:left;line-height:1.4;font-size:1.08rem}
:is(#viewChess,#viewCheckers,#viewBackgammon) :is(.board-meta,.checker-meta){align-items:center;flex-wrap:wrap;gap:8px;font-size:.8rem}
:is(.board-meta,.checker-meta)>span{padding:6px 10px;border-radius:10px;background:var(--paper-2);color:var(--ink-soft)}
:is(.board-meta,.checker-meta)>span:first-child{display:inline-flex;align-items:center;gap:7px}
:is(.board-meta,.checker-meta)>span:first-child::before{content:"";width:13px;height:13px;border:2px solid #526678;border-radius:50%;background:#fff8e8;flex:none}
.chess-board,.checker-board{border-color:var(--board-edge);background:var(--board-edge);border-radius:14px;box-shadow:0 4px 0 color-mix(in srgb,var(--board-edge) 70%,#152f38),0 10px 20px #17345114}
.chess-cell.light,.checker-cell.light{background:var(--board-light)}
.chess-cell.dark,.checker-cell.dark{background:var(--board-dark)}
.chess-piece{display:grid;place-items:center;width:88%;height:88%;filter:drop-shadow(0 2px 1px #17345135)}
.chess-piece svg{display:block;width:100%;height:100%;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.chess-piece.white svg{fill:#fff8e8;stroke:#345267}
.chess-piece.black svg{fill:#344a62;stroke:#f4e7cf}
.chess-piece.white,.chess-piece.black{text-shadow:none}
.chess-cell.can-select::before,.checker-cell.can-select::before{inset:6%;border:2px dashed var(--board-mark);background:transparent}
.chess-cell.target::before,.checker-cell.target::before{inset:33%;border:2px solid #fff8e8;background:var(--board-mark);box-shadow:0 0 0 2px var(--board-mark);z-index:2}
.chess-cell.target:has(.chess-piece)::before,.checker-cell.target:has(.checker-man)::before{inset:5%;background:transparent;border:3px solid var(--board-mark);box-shadow:inset 0 0 0 2px #fff8e8}
.chess-cell.selected,.checker-cell.selected{box-shadow:inset 0 0 0 3px var(--board-mark),inset 0 0 0 5px #fff8e8}
.chess-cell:focus-visible,.checker-cell:focus-visible{outline:3px solid #fff8e8;outline-offset:-6px;z-index:3;box-shadow:inset 0 0 0 3px #345267}
.checker-man{border:2px solid #345267;box-shadow:inset 0 0 0 3px #fff8e8,inset 0 0 0 5px #a4b4b8,0 3px 0 #345267,0 4px 4px #17345135}
.checker-man.white,.bg-stack i.white{background:#fff8e8}
.checker-man.black{background:#344a62;border-color:#f4e7cf;box-shadow:inset 0 0 0 3px #344a62,inset 0 0 0 5px #97afbe,0 3px 0 #1b3046,0 4px 4px #17345135}
.checker-man.king::after{color:#aa621c;text-shadow:0 1px #fff8e8;font-size:1.35rem}
.checker-man.black.king::after{color:#ffe0a1;text-shadow:0 1px #173451}
.board-hint-row{background:var(--paper-2);border:1px solid var(--rule);border-radius:16px;padding:12px;gap:6px;box-sizing:border-box;align-items:center}
.board-hint-row .board-hint{margin:0;color:var(--ink);font-size:.87rem;line-height:1.5;text-align:left}
.board-hint-row .board-say{margin-top:0;background:var(--card);border-radius:13px;color:var(--accent)}
.board-ranks i,.board-files i{color:var(--ink);font-weight:800}
.backgammon-board{border-color:var(--board-edge);background:color-mix(in srgb,var(--board-dark) 35%,var(--board-light));border-radius:18px;box-shadow:0 4px 0 color-mix(in srgb,var(--board-edge) 70%,#152f38),0 10px 20px #17345114}
.bg-point::before{background:var(--board-light);filter:none}
.bg-point.dark::before{background:var(--board-dark)}
.bg-point-number,.bg-point.dark .bg-point-number{color:#193d3c;text-shadow:none;opacity:1;font-size:.7rem}
.bg-stack i{border:1.5px solid #345267;box-shadow:inset 0 0 0 2px #fff8e8,inset 0 0 0 3px #a4b4b8,0 2px 1px #17345155}
.bg-stack i.black{background:#344a62;border-color:#f4e7cf;box-shadow:inset 0 0 0 2px #344a62,inset 0 0 0 3px #97afbe,0 2px 1px #17345155}
.bg-middle button,.bg-tray{background:var(--card);color:var(--ink);border:1px solid var(--board-edge);border-radius:12px;font-size:.84rem}
.bg-point.can-select{outline:2px dashed var(--board-mark);outline-offset:-2px}
.bg-point.selected{box-shadow:inset 0 0 0 3px var(--board-mark);outline:none;background:#fff8e830}
.bg-point.target{box-shadow:inset 0 0 0 3px var(--board-mark);background:#fff8e850}
.bg-target-die{background:var(--board-mark);color:var(--board-mark-ink);box-shadow:0 0 0 1px #fff8e8}
.bg-die{border-color:#345267;border-radius:15px;background:#fff8e8;box-shadow:0 3px 0 #345267,inset 0 0 0 3px #fffdf5}
.bg-guide{font-size:.8rem;line-height:1.45;font-weight:600}
/* Браузер оставляет прокрутку на пустых клетках, перенос — на своих фигурах. */
:is(.chess-cell,.checker-cell,.bg-point)[data-can-drag="true"]{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.board-drag.bg-man{border-radius:50%;border:1.5px solid #345267;background:#fff8e8;box-shadow:inset 0 0 0 2px #fff8e8,inset 0 0 0 3px #a4b4b8}
.board-drag.bg-man.black{background:#344a62;border-color:#f4e7cf}
@media(max-width:560px){
 :is(#viewChess,#viewCheckers,#viewBackgammon) .fun-card{border-radius:18px;gap:10px}
 :is(#viewChess,#viewCheckers,#viewBackgammon) .fun-card h2{padding:0 9px;font-size:1rem}
 :is(.board-meta,.checker-meta){padding:0 6px}
 .board-hint-row{padding:10px 8px}
 .chess-board,.checker-board{border-radius:10px}
 .bg-point-number,.bg-point.dark .bg-point-number{font-size:.65rem}
}

/* A deliberate lesson start lives on the field rather than below it. */
.board-stage{position:relative;width:100%;min-width:0}
.board-stage>.chess-board,.board-stage>.checker-board,.board-stage>.backgammon-board{width:100%;box-sizing:border-box}
.board-start-gate{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:10px;background:color-mix(in srgb,var(--paper) 25%,transparent);border-radius:14px}
.board-start-gate[hidden]{display:none}
body:has(#viewChess.on,#viewCheckers.on,#viewBackgammon.on) .top-more{display:none}
.board-start-card{display:flex;flex-direction:column;gap:10px;align-items:stretch;width:min(100%,290px);padding:18px;border:1px solid var(--rule);border-radius:20px;background:var(--card);box-shadow:var(--shadow);text-align:center}
.board-start-card p{margin:0;line-height:1.4;color:var(--ink-soft);font-size:.85rem}
.board-start-card button{white-space:normal;min-height:48px;padding:10px 12px;font-size:.92rem}
.board-start-card .board-start-intro{font-size:.8rem}
.board-awaiting>.chess-board,.board-awaiting>.checker-board,.board-awaiting>.backgammon-board{opacity:.55}
@media(max-width:380px){.board-start-card{padding:12px;gap:7px}.board-start-card button{font-size:.85rem;min-height:44px}}
/* Toy tank arena: one readable board, two independent thumb controls. */
body.game-full:has(#viewSnake.on){overflow:auto}
#viewSnake .fun-wrap{max-width:620px;padding:8px 10px 22px}
#viewSnake .fun-card{background:var(--card);border:1px solid var(--rule);border-radius:24px;padding:16px;gap:10px}
#viewSnake h2{font-size:1rem;color:var(--ink);margin:0}
.snake-hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:7px}
.snake-hud span{display:grid;gap:3px;padding:9px 4px;text-align:center;border-radius:13px;background:var(--paper-2);font-size:.72rem;color:var(--ink-soft)}
.snake-hud b{font-size:1rem;color:var(--ink)}
.snake-mission{width:100%;margin:0;font-weight:700;font-size:.9rem;line-height:1.4}
#snakeProgress{width:100%;height:8px;accent-color:var(--accent);border:0}
#snakeProgress::-webkit-progress-bar{background:var(--rule);border-radius:8px}#snakeProgress::-webkit-progress-value{background:var(--accent);border-radius:8px}
#snakeProgress::-moz-progress-bar{background:var(--accent);border-radius:8px}
.snake-status{display:grid;gap:4px;width:100%;padding:9px 10px;background:var(--paper-2);border-radius:12px;font-size:.8rem}
#snakeEffects{min-height:1.4em}#snakePickup{min-height:1.4em;font-size:.8rem;margin:0;width:100%;color:var(--accent)}
.snake-guide{width:100%;font-size:.85rem;border-bottom:1px solid var(--rule)}
.snake-guide summary{padding:10px 2px;min-height:42px;font-weight:700;color:var(--accent);cursor:pointer}
.snake-guide p{line-height:1.5}.snake-route,.snake-bonuses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-bottom:10px}
.snake-route button,.snake-bonuses p{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:10px;margin:0;white-space:normal;text-align:left;color:var(--ink);font-size:.8rem}
.snake-route button{display:grid;gap:5px;min-height:62px}.snake-route button[aria-pressed="true"]{outline:2px solid var(--accent)}.snake-route button:disabled{opacity:.6}.snake-route small{color:var(--ink-soft)}.snake-bonuses b{display:block}
.snake-arena{position:relative;max-width:100%;line-height:0}#snakeCv{max-width:100%;border:2px solid var(--board-edge);border-radius:18px;box-shadow:0 4px 0 var(--board-edge);touch-action:none}
.snake-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:12px;background:#17345130;border-radius:18px;line-height:1.4;pointer-events:none}
.snake-overlay[hidden]{display:none}.snake-overlay-card{width:min(100%,300px);background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:16px;display:grid;gap:10px;text-align:center;box-shadow:var(--shadow);pointer-events:auto}
.snake-overlay-card strong{font-size:1.05rem}.snake-overlay-card p{font-size:.8rem;margin:0}.snake-overlay-card button{min-height:48px;white-space:normal;font-size:.9rem;padding:10px}
#snakeInfo{line-height:1.4;font-size:.8rem;text-align:center;min-height:2.8em;width:100%}
#snakePads{width:100%;max-width:330px;justify-content:space-between}#snakePads .dkey{min-width:72px;min-height:54px;background:var(--paper-2);border:1px solid var(--rule);border-radius:15px;box-shadow:0 3px 0 var(--rule);color:var(--ink)}
#viewSnake .done-actions{width:100%;flex-wrap:wrap;justify-content:center;gap:7px}#viewSnake .done-actions button{min-height:44px;font-size:.8rem;padding:9px 12px}
@media(max-width:380px){#viewSnake .fun-card{padding:9px;gap:7px}.snake-overlay-card{padding:10px;gap:7px}.snake-overlay-card strong{font-size:.9rem}.snake-overlay-card p{font-size:.72rem}.snake-bonuses{grid-template-columns:1fr}}

#snakePads{position:static;inset:auto;display:flex;justify-content:center;width:100%;margin:2px auto 6px;padding:0}
#snakePads .dpad{position:relative;touch-action:none;display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,50px);gap:5px;width:172px;height:160px}
#snakePads .dkey,#snakePads .dkey-mid{position:static;width:54px;height:50px;min-width:54px;min-height:50px;padding:0}
#snakePads .up{grid-area:1/2}#snakePads .left{grid-area:2/1}#snakePads .dkey-mid{grid-area:2/2}#snakePads .right{grid-area:2/3}#snakePads .down{grid-area:3/2}
#snakePads .dkey.on{background:var(--accent);color:var(--on-accent);transform:translateY(2px);box-shadow:none}
#snakePickup{min-height:0}#snakePickup:empty{display:none}
#snakeInfo{min-height:0;margin:0}
.snake-bonuses b{display:block}
body.game-full:has(#viewRace.on){overflow:auto}
#viewRace .fun-wrap{max-width:620px;padding:8px 10px 22px}
#viewRace .fun-card{background:var(--card);border:1px solid var(--rule);border-radius:24px;padding:16px;gap:10px}
#viewRace h2{font-size:1rem;color:var(--ink);margin:0}
.race-hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:7px}
.race-hud span{display:grid;gap:3px;padding:9px 4px;text-align:center;border-radius:13px;background:var(--paper-2);font-size:.72rem;color:var(--ink-soft)}
.race-hud b{font-size:1rem;color:var(--ink)}
.race-mission{width:100%;margin:0;font-weight:700;font-size:.9rem;line-height:1.4}
#raceProgress{width:100%;height:8px;accent-color:var(--accent);border:0}
#raceProgress::-webkit-progress-bar{background:var(--rule);border-radius:8px}#raceProgress::-webkit-progress-value{background:var(--accent);border-radius:8px}
#raceProgress::-moz-progress-bar{background:var(--accent);border-radius:8px}
.race-status{display:grid;gap:4px;width:100%;padding:9px 10px;background:var(--paper-2);border-radius:12px;font-size:.8rem}
#raceEffects{min-height:1.4em}#racePickup{min-height:1.4em;font-size:.8rem;margin:0;width:100%;color:var(--accent)}
.race-guide{width:100%;font-size:.85rem;border-bottom:1px solid var(--rule)}
.race-guide summary{padding:10px 2px;min-height:42px;font-weight:700;color:var(--accent);cursor:pointer}
.race-guide p{line-height:1.5}.race-route,.race-bonuses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-bottom:10px}
.race-route button,.race-bonuses p{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:10px;margin:0;white-space:normal;text-align:left;color:var(--ink);font-size:.8rem}
.race-route button{display:grid;gap:5px;min-height:62px}.race-route button[aria-pressed="true"]{outline:2px solid var(--accent)}.race-route button:disabled{opacity:.6}.race-route small{color:var(--ink-soft)}.race-bonuses b{display:block}
.race-arena{position:relative;max-width:100%;line-height:0}#raceCv{max-width:100%;border:2px solid var(--board-edge);border-radius:18px;box-shadow:0 4px 0 var(--board-edge);touch-action:none}
.race-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:12px;background:#17345130;border-radius:18px;line-height:1.4;pointer-events:none}
.race-overlay[hidden]{display:none}.race-overlay-card{width:min(100%,300px);background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:16px;display:grid;gap:10px;text-align:center;box-shadow:var(--shadow);pointer-events:auto}
.race-overlay-card strong{font-size:1.05rem}.race-overlay-card p{font-size:.8rem;margin:0}.race-overlay-card button{min-height:48px;white-space:normal;font-size:.9rem;padding:10px}
#raceInfo{line-height:1.4;font-size:.8rem;text-align:center;min-height:2.8em;width:100%}
#racePads{width:100%;max-width:330px;justify-content:space-between}#racePads .dkey{min-width:72px;min-height:54px;background:var(--paper-2);border:1px solid var(--rule);border-radius:15px;box-shadow:0 3px 0 var(--rule);color:var(--ink)}
#viewRace .done-actions{width:100%;flex-wrap:wrap;justify-content:center;gap:7px}#viewRace .done-actions button{min-height:44px;font-size:.8rem;padding:9px 12px}
@media(max-width:380px){#viewRace .fun-card{padding:9px;gap:7px}.race-overlay-card{padding:10px;gap:7px}.race-overlay-card strong{font-size:.9rem}.race-overlay-card p{font-size:.72rem}.race-bonuses{grid-template-columns:1fr}}
body.game-full:has(#viewTank.on){overflow:auto}
#viewTank .fun-wrap{max-width:650px;padding:8px 10px 22px}
#viewTank .fun-card{background:var(--card);border:1px solid var(--rule);border-radius:24px;padding:14px;gap:10px}
#viewTank .fun-card h2{font-size:1.05rem;color:var(--ink)}
.tank-hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:8px}
.tank-hud>span{display:grid;gap:3px;text-align:center;padding:8px 4px;background:var(--paper-2);border-radius:12px;color:var(--ink-soft);font-size:.72rem}
.tank-hud b{font-size:1rem;color:var(--ink)}
.tank-guide{width:100%;font-size:.82rem;color:var(--ink-soft);border-bottom:1px solid var(--rule)}
.tank-guide summary{padding:8px 2px;min-height:36px;cursor:pointer;font-weight:700;color:var(--accent)}
.tank-guide p{line-height:1.5;margin:8px 0 12px}
#tankInfo{width:100%;min-height:2.8em;text-align:center;line-height:1.4;color:var(--ink-soft)}
#tankCv{max-width:100%;border-radius:15px;border:2px solid var(--board-edge);box-shadow:0 4px 0 var(--board-edge);background:var(--paper-2)}
#tankPads{max-width:380px;padding:6px 8px;touch-action:none;user-select:none}
#tankPads .dpad{touch-action:none}
#tankPads .dkey{background:var(--paper-2);border:1px solid var(--rule);color:var(--ink);border-radius:13px;box-shadow:0 3px 0 var(--rule)}
#tankPads .dkey.on,#tankFire.on{background:var(--accent);color:var(--on-accent);box-shadow:none;transform:translateY(2px)}
#tankFire{background:#176b65;color:#fff;border:2px solid #345267;box-shadow:0 5px 0 #345267;border-radius:25px;min-width:88px;min-height:88px;font-size:.9rem;touch-action:none;user-select:none}
#viewTank .done-actions{width:100%;justify-content:center;flex-wrap:wrap;gap:7px}
#viewTank .done-actions button{min-height:44px;padding:9px 12px;font-size:.8rem}
#tankPause{min-width:105px}
.tank-arena{position:relative;max-width:100%;line-height:0}
.tank-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:10px;background:#17345130;border-radius:15px;line-height:1.4}
.tank-overlay[hidden]{display:none}
.tank-overlay-card{width:min(100%,310px);padding:18px;background:var(--card);border:1px solid var(--rule);border-radius:20px;box-shadow:var(--shadow);text-align:center;display:grid;gap:10px}
.tank-overlay-card strong{font-size:1.05rem}.tank-overlay-card p{margin:0;font-size:.8rem;line-height:1.4}
.tank-overlay-card button{min-height:48px;padding:10px;white-space:normal;font-size:.9rem}
.tank-mission{margin:0;width:100%;font-weight:700;line-height:1.4}
.tank-status{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;width:100%;padding:8px 10px;border-radius:12px;background:var(--paper-2);font-size:.8rem}
#tankPickup{min-height:1.5em;margin:0;width:100%;font-size:.8rem;color:var(--accent)}
.tank-route{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding-bottom:12px}
.tank-route button{display:grid;gap:4px;text-align:left;white-space:normal;padding:10px;min-height:62px;font-size:.8rem;background:var(--card);border:1px solid var(--rule);border-radius:12px;color:var(--ink)}
.tank-route button[aria-pressed="true"]{outline:2px solid var(--accent)}.tank-route button:disabled{opacity:.6}
.tank-route small{font-size:.72rem;color:var(--ink-soft)}
.tank-bonuses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tank-bonuses p{padding:10px;border:1px solid var(--rule);border-radius:12px;font-size:.8rem}
.tank-bonuses b{display:block}
@media(max-width:380px){.tank-overlay-card{padding:10px;gap:6px}.tank-overlay-card strong{font-size:.9rem}.tank-overlay-card p{font-size:.72rem}.tank-overlay-card button{font-size:.8rem;min-height:44px}.tank-bonuses{grid-template-columns:1fr}}
@media(max-width:400px){#viewTank .fun-card{padding:9px;gap:7px}.tank-hud{gap:5px}.tank-hud>span{padding:5px 2px}#tankPads{padding:4px 0}#tankFire{min-width:76px;min-height:76px}}
/* Interactive introductions share the materials and colours of the main boards. */
.board-primer{width:100%;background:var(--paper-2);border:1px solid var(--rule);border-radius:16px;color:var(--ink)}
.board-primer>summary{padding:14px 12px;font-weight:800;line-height:1.45;cursor:pointer;min-height:48px}
.primer-body{padding:0 12px 14px;display:flex;flex-direction:column;gap:12px}
.primer-body h3,.primer-body p{margin:0;line-height:1.5}
.primer-body h3{font-size:1rem}.primer-body p{font-size:.9rem}.primer-body small{font-size:.78rem;line-height:1.5;color:var(--ink-soft)}
.primer-grid{display:grid;grid-template-columns:1rem repeat(8,minmax(0,1fr));width:100%;max-width:400px;align-self:center}
.primer-cell{border:0;border-radius:0;padding:0;min-width:0;min-height:0;aspect-ratio:1;color:var(--ink);font-size:1.3rem}
.primer-cell.light{background:var(--board-light)}.primer-cell.dark{background:var(--board-dark)}
.primer-coordinate{display:grid;place-items:center;font-size:.8rem;font-weight:800;min-height:22px}
.primer-axis{background:var(--accent);color:var(--on-accent);border-radius:5px}
.primer-guide{box-shadow:inset 0 0 0 2px var(--board-mark)}
.primer-correct{box-shadow:inset 0 0 0 4px var(--board-mark),inset 0 0 0 6px #fff8e8}
.primer-cell:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.primer-feedback{padding:10px;border-radius:12px;background:var(--card)}
.primer-actions{display:flex;flex-wrap:wrap;gap:8px}.primer-actions button{min-height:44px;padding:9px 12px;flex:1}
.primer-skip{align-self:start;font-size:.85rem;min-height:44px}
.primer-story{border-top:1px solid var(--rule);padding-top:10px}.primer-story summary{font-weight:700;cursor:pointer;min-height:36px}.primer-story p{padding:10px 0}.primer-story a{display:block;margin-top:10px;font-size:.8rem;color:var(--accent)}
.primer-nards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px;padding:5px;background:var(--board-light);border:2px solid var(--board-edge);border-radius:12px}
.primer-point{position:relative;isolation:isolate;border:0;border-radius:3px;min-width:0;padding:4px 0;min-height:70px;font-size:.75rem;color:#193d3c;background:transparent;display:flex;align-items:start;justify-content:center}
.primer-point::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--board-dark);clip-path:polygon(0 0,100% 0,50% 100%)}
.primer-point.bottom{align-items:end}.primer-point.bottom::before{clip-path:polygon(50% 0,100% 100%,0 100%)}
.primer-zone{grid-column:span 6;min-width:0;min-height:44px;padding:8px 2px;border:1px solid var(--rule);border-radius:8px;font-size:.8rem;color:var(--ink);background:var(--card)}
@media(max-width:400px){.primer-body{padding-left:7px;padding-right:7px}.primer-actions{gap:5px}.primer-actions button{font-size:.85rem;padding:8px}.primer-point{font-size:.68rem}}
/* Compact, explicit catalogue disclosure on phones; desktop retains all filters. */
.catalog-toggle{display:none}
@media(max-width:600px){
  .catalog-toggle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:64px;padding:12px 16px;text-align:left;border:1px solid var(--rule);border-radius:16px;background:var(--card);color:var(--ink)}
  .catalog-toggle>span:first-child{display:grid;gap:3px;min-width:0;flex:1 1 7rem}
  .catalog-toggle small{font-size:.8rem;color:var(--ink-soft)}
  .catalog-toggle b{font-size:1rem;overflow-wrap:anywhere}
  .catalog-toggle-action{font-size:.82rem;color:var(--accent);flex-shrink:0;margin-left:auto}
  #catalogPicker:not(.is-open) #tileTabs{display:none}
  #catalogPicker.is-open #tileTabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr));gap:8px;margin-top:8px;overflow:visible}
  #catalogPicker #tileTabs .tab-btn{width:100%;min-width:0;min-height:48px;white-space:normal;overflow-wrap:break-word;padding:10px 8px}
  .catalog-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
}

/* Крупный предмет в языковых заданиях; служебные значки не увеличиваются. */
.equation.bigpic{width:100%;min-width:0;gap:0;padding:8px 0}
.vocab-art-button{display:flex;flex-direction:column;align-items:center;gap:3px;width:min(100%,300px);padding:10px;border:1px solid var(--rule);border-radius:24px;background:#fffdf5;box-shadow:0 4px 0 var(--rule);color:var(--ink);cursor:zoom-in;line-height:1}
.vocab-art-button .vocab-art{display:block;width:clamp(180px,32vw,260px);max-width:100%;height:auto;aspect-ratio:1}
.vocab-enlarge{font-family:inherit;font-size:.72rem;line-height:1.5;color:#45616a;font-weight:600}
.vocab-art-button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
#vocabZoom{width:min(92vw,650px);max-width:92vw;max-height:92dvh;padding:18px;border:1px solid var(--rule);border-radius:24px;background:var(--card);color:var(--ink);box-shadow:var(--shadow);overflow:auto}
#vocabZoom::backdrop{background:#153438aa}
.vocab-zoom-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.vocab-zoom-head h2{font-size:1rem;margin:0}.vocab-zoom-head button{min-height:44px;padding:8px 12px;font-size:.85rem;flex-shrink:0}
#vocabZoomArt{background:#fffdf5;border-radius:20px;display:grid;place-items:center;line-height:0}
#vocabZoomArt .vocab-art{display:block;width:min(100%,520px);max-height:65dvh;aspect-ratio:1}
@media(max-width:380px){.vocab-art-button{padding:6px;border-radius:18px}#vocabZoom{padding:10px}.vocab-zoom-head{gap:6px}.vocab-zoom-head h2{font-size:.85rem}}

/* Наглядный календарь в задании и в обучении. */
.board.has-months{justify-content:flex-start;gap:14px;padding-top:54px;min-height:0}
.board.has-months .equation{width:100%;font-size:1.12rem;line-height:1.45;letter-spacing:normal}
#monthSupport{width:100%}.month-visual{width:100%;max-width:680px;margin:0 auto;text-align:left;font-family:var(--font-body);font-size:.85rem;line-height:1.45;color:var(--ink)}
.month-guide{margin:0 0 12px;color:var(--ink-soft)}.month-visual h3{font-size:1rem;margin:12px 0 8px;text-transform:capitalize;line-height:1.3}
.month-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.month-tile{min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 5px;border:1px solid var(--rule);border-radius:14px;background:var(--card);text-align:center}
.month-tile b{font-size:.86rem;text-transform:capitalize;overflow-wrap:anywhere}.month-tile>span{font-size:.72rem;color:var(--ink-soft)}
.month-tile.marked{outline:3px solid var(--accent);outline-offset:-2px;background:var(--paper-2)}
.month-scene{display:block;width:100%;height:auto;max-width:130px;aspect-ratio:1.6;flex-shrink:0;border-radius:10px}
.month-feature{max-width:240px;margin:8px auto 14px}
.month-day-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;max-width:420px;margin:0 auto}
.month-day-grid span{display:grid;place-items:center;min-height:36px;border:1px solid var(--rule);border-radius:8px;background:var(--card);font-weight:700;font-size:.95rem}
.month-loop{padding:10px;border-radius:12px;background:var(--paper-2);font-weight:600;margin:12px 0}
.month-example{border:1px solid var(--rule);border-radius:12px;background:var(--card);padding:10px 12px}
.month-disclosure{border:1px solid var(--rule);border-radius:12px;background:var(--card);padding:0 12px;text-align:left}
.month-disclosure>summary{cursor:pointer;font-weight:700;color:var(--accent);padding:12px 0;min-height:44px;box-sizing:border-box;font-size:.85rem;line-height:1.6}
.month-disclosure[open]>.month-visual{padding:8px 0 12px}.month-example p{margin:8px 0;line-height:1.55}
.month-weather{font-size:.72rem;color:var(--ink-soft);margin:12px 0 0}
#lessonPic:has(.month-visual){width:100%;max-width:680px}#lessonPic .month-scene{height:auto;max-height:none}
@media(max-width:560px){.month-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.month-tile b{font-size:.8rem}}
@media(max-width:380px){.month-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.month-visual{font-size:.8rem}.month-tile b{font-size:.85rem}.month-day-grid{gap:3px}}

/* Home composition: a compact welcome leaves room for the next activity. */
#viewHome .banner { gap:18px; padding:20px 24px; }
#viewHome .banner-text { display:flex; flex-direction:column; gap:8px; }
#viewHome .banner-text b,#viewHome .banner-text small { display:block; }
#viewHome #bannerTitle { align-self:flex-start; text-align:left; }
:root #viewHome .home-art { width:220px; max-height:146px; }
#viewHome .home-start { gap:14px; }
#viewHome details.home-start { display:block; padding:14px 18px; border:1px solid var(--rule); border-radius:16px; background:var(--card); }
#homeStart > summary { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; list-style:none; }
#homeStart > summary::-webkit-details-marker { display:none; }
#homeStart > summary::before { content:'▸'; }
#homeStart[open] > summary::before { content:'▾'; }
#homeStart > summary h2 { font-family:var(--font-body); font-size:1rem; font-weight:600; line-height:1.4; }
#homeStart > summary:focus-visible { outline:3px solid var(--accent); outline-offset:4px; border-radius:6px; }
#homeStart[open] .home-suggestions { margin-top:14px; }
#viewHome .home-suggestion { background:var(--card); box-shadow:var(--shadow); border-radius:18px; }
#viewHome .home-suggestion:first-child { background:var(--accent-dim); }
#viewHome .home-suggestion .start-label { display:flex; align-items:center; gap:10px; }
#viewHome .home-suggestion .start-icon { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border-radius:10px; background:var(--card); border:1px solid var(--rule); }
#viewHome .home-suggestion .start-icon svg { width:28px; height:28px; }
#viewHome .home-suggestion:hover { border-color:var(--accent); }
#viewHome .home-suggestion:focus-visible,#parentHome summary:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
#viewHome .parent-home { background:var(--paper-2); }
#viewHome .sec-label { margin:6px 0 10px; color:var(--ink); }
#viewHome .tile small.fun-progress { color:var(--ink-soft); }
@media(max-width:600px){
  #viewHome .banner { grid-template-columns:minmax(0,1fr) 76px; padding:16px; gap:12px; align-items:start; }
  #viewHome .banner-text { grid-column:1; grid-row:1; }
  #viewHome .home-heading { margin:0; font-size:1.25rem; line-height:1.25; }
  :root #viewHome .home-art { grid-column:2; grid-row:1; width:76px; height:88px; aspect-ratio:auto; object-fit:contain; object-position:50% 50%; border-radius:14px; margin:0; }
  #viewHome .banner-text b { font-size:.9rem; line-height:1.4; }
  #viewHome .banner-text small { font-size:.8rem; line-height:1.5; }
  #viewHome .tile { gap:8px; padding:16px; min-height:0; }
  #viewHome .tile em { width:34px; height:34px; border-radius:10px; }
  #viewHome .tile em svg { width:28px; height:28px; }
  #viewHome .tile i:empty { display:none; }
}
@media(max-width:360px){
  #viewHome .banner { grid-template-columns:minmax(0,1fr); }
  :root #viewHome .home-art { display:none; }
}

/* Compact closed controls leave the catalogue visible on small phones. */
@media(max-width:600px){
  #viewHome .home { gap:8px; }
  #viewHome .banner { min-height:0; }
  #viewHome #homeStart:not([open]),
  #viewHome .parent-home:not([open]),
  #viewHome .parent-home.needs-class:not([open]) { padding:6px 16px; }
  #viewHome .cards-left { margin:0; }
  #viewHome .field { gap:8px; }
  #viewHome .sec-label { margin:2px 0 4px; }
  #viewHome #catalogPicker { padding-block:0; }
  /* Enough room at the current text size: title beside the illustration.
     Large text falls back to the full-width title above the description. */
  #viewHome .tile { container-name:home-activity; }
  @container home-activity (min-width:16rem){
    #viewHome .tile b { grid-column:2 / -1; grid-row:1; }
  }
}

/* First visit: choose a class before secondary parent actions. Those remain
   available in the profile and return here once the class is selected. */
#viewHome .parent-home.needs-class { padding:12px 16px; }
#viewHome .parent-home.needs-class .age-ask { margin:8px 0 0; padding:0; border:0; background:transparent; }
#viewHome .parent-home.needs-class .parent-settings,
#viewHome .parent-home.needs-class .parent-vk { display:none; }

/* Explanation: a readable paragraph, a visible step count and one primary
   action. Keep normal page scrolling when large text makes a step taller. */
#viewLesson .card.ages { gap:14px; background:var(--card); }
#viewLesson #lessonTitle { font-family:var(--font-body); font-size:1rem; font-weight:700; line-height:1.4; color:var(--ink); text-transform:none; letter-spacing:0; }
#viewLesson .lesson-pic { background:var(--paper-2); border:1px solid var(--rule); border-radius:18px; margin:0; min-width:0; }
#viewLesson .lesson-pic:empty { display:none; }
#viewLesson .lesson-pic svg { max-width:420px; }
#viewLesson .lesson-text { text-align:left; font-weight:500; line-height:1.55; margin:0; }
#viewLesson .lesson-progress { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; color:var(--ink-soft); font-size:.85rem; line-height:1.4; }
#viewLesson .lesson-dots { flex-wrap:wrap; margin:0; gap:6px; }
#viewLesson .lesson-nav { margin:0; }
#viewLesson #btnLessonPrev:disabled { opacity:.45; }
#viewLesson #btnLessonBack { align-self:flex-start; min-height:44px; padding:8px 16px; font-size:.9rem; }
#viewLesson button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
/* Feedback is read at the child's pace; its next action is an actual button. */
#verdict .tip { text-align:left; line-height:1.55; margin-top:10px; }
#verdict button.cont { display:block; width:100%; min-height:48px; margin-top:16px; padding:12px 16px; border:1px solid var(--accent); border-radius:14px; background:var(--accent); color:var(--on-accent); font-size:1rem; font-weight:700; line-height:1.35; text-align:center; }
#verdict button.cont:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
/* The revealed number choice starts in view, including at large text sizes. */
#modeActName { margin:0; font-family:var(--font-body); font-size:1.2rem; line-height:1.35; overflow-wrap:anywhere; }
#modeDigitsLabel { margin:0; font-size:1rem; line-height:1.4; scroll-margin-top:16px; }
#modeDigits { padding:16px; border:1px solid var(--rule); border-radius:16px; background:var(--paper-2); }
#modeLearn[aria-expanded="true"] { border-color:var(--accent); background:var(--accent-dim); }
#viewDone .done { min-width:0; }
#doneTitle { max-width:100%; min-width:0; overflow-wrap:anywhere; line-height:1.3; }
#doneNote { text-align:left; }
#viewDone .done-actions { width:100%; align-items:stretch; }
#viewDone .done-actions button { flex:1 1 10rem; min-width:0; min-height:48px; white-space:normal; overflow-wrap:anywhere; }
/* Repetition tables follow the available width at the actual text size.
   Keep complete equations together; add a second column only with room. */
#viewTable .card.ages { container:table-guide / inline-size; gap:14px; background:var(--card); }
#viewTable #tableTitle { margin:0; font-family:var(--font-body); font-size:1.15rem; line-height:1.4; text-transform:none; letter-spacing:0; }
#viewTable .tbl { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin:0; }
#viewTable .tbl-row { min-width:0; min-height:48px; padding:12px 8px; font-size:1.08rem; line-height:1.4; border-radius:14px; }
#viewTable .tbl-note { margin:0; font-size:.9rem; line-height:1.5; text-align:left; }
#viewTable #tableRule { padding:12px 16px; border:1px solid var(--rule); border-radius:14px; background:var(--paper-2); color:var(--ink); }
#viewTable #btnTableBack { align-self:flex-start; min-height:48px; }
#viewTable button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@container table-guide (min-width:28rem){
  #viewTable .tbl { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Diary and report: read the complete answer, status and value at large text
   sizes. Date choices stay folded until a day is requested. */
#viewStats .rep-card, #viewReport .rep-card { container:progress-card / inline-size; background:var(--card); }
#viewStats .rep-card h2, #viewReport .rep-card h2 { line-height:1.4; overflow-wrap:anywhere; }
#viewStats .stat-head { flex-wrap:wrap; }
#viewStats .stat-head button { min-height:48px; }
#viewStats .diary-sum { grid-template-columns:minmax(0,1fr); }
#viewStats .diary-cell { padding:12px; }
#viewStats .diary-cell b { line-height:1.35; }
#viewStats .diary-cell small { line-height:1.5; }
#viewStats .weak-row, #viewReport .weak-row { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
#viewStats .weak-row > *, #viewReport .weak-row > * { min-width:0; overflow-wrap:anywhere; }
#viewReport .weak-row b { font-family:var(--font-body); }
#viewStats .weak-bar, #viewReport .weak-bar { width:100%; max-width:none; }
#statDatePicker { border:1px solid var(--rule); border-radius:14px; background:var(--paper); }
#statDateLabel { padding:12px; min-height:48px; font-family:var(--font-body); font-size:1rem; font-weight:700; line-height:1.5; color:var(--ink); cursor:pointer; scroll-margin-top:16px; }
#statDates { padding:0 12px 12px; }
#statDates button { min-height:48px; max-width:100%; white-space:normal; }
#viewStats .day-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; min-height:48px; font-family:var(--font-body); }
#viewStats .day-head b { grid-column:1; }
#viewStats .day-head .day-sum { grid-column:1; grid-row:2; margin:0; font-size:.85rem; line-height:1.5; }
#viewStats .day-head .chev { grid-column:2; grid-row:1 / 3; }
#viewStats .topic-chip { white-space:normal; overflow-wrap:anywhere; line-height:1.5; }
#viewStats .ans { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:12px; align-items:start; }
#viewStats .ans b { min-width:0; overflow-wrap:anywhere; line-height:1.5; }
#viewStats .ans small { display:flex; flex-wrap:wrap; gap:6px 12px; white-space:normal; font-size:.82rem; line-height:1.5; color:var(--ink-soft); }
#viewStats .ans-status { font-weight:700; overflow-wrap:anywhere; min-width:0; }
#viewStats .ans.ok b, #viewStats .ans.bad b,
#viewStats .ans.ok .ans-status, #viewStats .ans.bad .ans-status { color:var(--ink); }
#viewStats .ans time { white-space:nowrap; }
/* Расписание: доступная ширина строки важнее числа колонок на экране. */
#viewSchedule .settings { width:100%; max-width:1120px; }
#viewSchedule .set-card { container-type:inline-size; container-name:schedule-card; }
#viewSchedule .sch-nav { flex-wrap:wrap; }
#viewSchedule .sch-nav b { order:-1; flex-basis:100%; font-size:1rem; line-height:1.4; }
#viewSchedule .sch-nav .ghost { min-width:48px; min-height:48px; }
#viewSchedule .sch-strip { grid-template-columns:repeat(4,minmax(0,1fr)); }
#viewSchedule .sch-strip button { min-width:0; min-height:64px; }
#viewSchedule .sch-row { grid-template-columns:40px minmax(0,1fr) 48px; gap:4px 8px; padding:10px; }
#viewSchedule .sch-row .sch-num { grid-column:1; grid-row:1; width:auto; min-height:1.8rem; height:auto; font-size:.85rem; }
#viewSchedule .sch-row .sch-time { grid-column:2; grid-row:1; font-size:.9rem; white-space:normal; overflow-wrap:normal; line-height:1.4; }
#viewSchedule .sch-row .sch-mark { grid-column:3; grid-row:1; width:100%; min-height:48px; height:auto; }
#viewSchedule .sch-row .sch-subj { grid-column:1 / -1; grid-row:2; font-size:1rem; min-height:48px; line-height:1.4; }
#viewSchedule .sch-row .sch-hw-status { grid-column:1 / -1; grid-row:3; font-size:.85rem; line-height:1.4; color:var(--ink); }
#viewSchedule .sch-day-hint { margin:4px 0 8px; }
#viewSchedule .sch-complete { display:flex; align-items:center; gap:12px; min-height:48px; padding:12px; border:1px solid var(--rule); border-radius:12px; font-size:1rem; color:var(--ink); line-height:1.4; cursor:pointer; }
#viewSchedule .sch-complete span { font-size:inherit; }
#viewSchedule .sch-complete input { width:24px; height:24px; min-width:24px; min-height:24px; padding:0; margin:0; flex:none; accent-color:var(--accent); }
#viewSchedule .sch-complete input:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
#viewSchedule .sch-complete-hint { margin:0; }
#viewSchedule .sch-head { display:none; }
#viewSchedule .sch-hw, #viewSchedule .sch-time-edit { font-size:1rem; line-height:1.5; min-height:48px; }
#viewSchedule .sch-edit { padding:12px; }
#viewSchedule .sch-edit-time { grid-template-columns:minmax(0,1fr); }
#viewSchedule .sch-edit-time label, #viewSchedule .sch-edit h4 { font-size:.9rem; }
#viewSchedule button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
#viewSchedule .sch-month-hint { margin:8px 0 12px; }
#viewSchedule .sch-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#viewSchedule .sch-cell { min-width:0; min-height:96px; padding:12px 6px; justify-content:flex-start; gap:4px; line-height:1.4; overflow-wrap:normal; }
#viewSchedule .sch-cell.other { opacity:1; border-style:dashed; }
#viewSchedule .sch-cell b { font-size:1.15rem; line-height:1.3; white-space:nowrap; }
#viewSchedule .sch-weekday, #viewSchedule .sch-month-label, #viewSchedule .sch-today-label { font-size:.85rem; }
#viewSchedule .sch-brief { display:grid; gap:4px; font-size:.85rem; color:var(--ink); }
#viewSchedule .sch-cell.picked .sch-brief { color:var(--on-accent); }
#viewSchedule .sch-first-bell { white-space:nowrap; }
#viewSchedule .sch-lines { display:none; }
@container schedule-card (min-width:24rem) {
  #viewSchedule .sch-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@container schedule-card (min-width:42rem) {
  #viewSchedule .sch-grid { grid-template-columns:repeat(7,minmax(0,1fr)); }
  #viewSchedule .sch-lines { display:grid; width:100%; }
  #viewSchedule .sch-lines i { white-space:normal; overflow-wrap:break-word; font-size:.8rem; color:var(--ink); }
  #viewSchedule .sch-cell.picked .sch-lines i { color:var(--on-accent); }
}
@container schedule-card (min-width:30rem) {
  #viewSchedule .sch-nav { flex-wrap:nowrap; }
  #viewSchedule .sch-nav b { order:0; flex-basis:auto; }
  #viewSchedule .sch-strip { grid-template-columns:repeat(7,minmax(0,1fr)); }
  #viewSchedule .sch-row, #viewSchedule .sch-head { grid-template-columns:2rem 7rem minmax(0,1fr) 3rem; gap:8px; }
  #viewSchedule .sch-head { display:grid; font-size:.8rem; }
  #viewSchedule .sch-row .sch-subj { grid-column:3; grid-row:1; }
  #viewSchedule .sch-row .sch-mark { grid-column:4; }
  #viewSchedule .sch-row .sch-hw-status { grid-column:3; grid-row:2; }
  #viewSchedule .sch-edit-time { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
#viewReport .kv { grid-template-columns:minmax(0,1fr); gap:4px; line-height:1.5; }
#viewReport .kv dd { text-align:left; margin-bottom:12px; }
#viewReport .ex-row { display:grid; grid-template-columns:minmax(0,1fr); line-height:1.5; }
#viewReport .ex-row i { overflow-wrap:anywhere; }
#repDays { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
#repDays .day { width:auto; height:auto; min-height:2.7rem; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:10px; font-size:.9rem; font-weight:700; line-height:1.3; color:var(--ink); }
#repDays .day.on { background:var(--accent-dim); border-color:var(--accent); }
#repDays .day-tick { font-size:.7rem; color:var(--accent); }
#viewStats button:focus-visible, #statDateLabel:focus-visible, #viewReport button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@container progress-card (min-width:18rem){
  #viewStats .diary-sum { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container progress-card (min-width:24rem){
  #viewReport .kv { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 16px; }
  #viewReport .kv dd { text-align:right; margin:0; }
  #repDays { grid-template-columns:repeat(7,minmax(0,1fr)); }
}
@container progress-card (min-width:34rem){
  #viewStats .diary-sum { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:760px){
  #viewHome .home-suggestion:not(:first-child) { display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:12px; row-gap:4px; }
  #viewHome .home-suggestion:not(:first-child) .start-label { display:contents; font-size:0; }
  #viewHome .home-suggestion:not(:first-child) .start-icon { grid-column:1; grid-row:1 / 3; align-self:center; }
  #viewHome .home-suggestion:not(:first-child) b,
  #viewHome .home-suggestion:not(:first-child) > small:last-child { grid-column:2; }
  #viewHome .home-suggestion:not(:first-child) b { font-size:1rem; }
}