:root{--navy:#183f51;--mint:#13afab;--teal:#087f87;--muted:#728d95;--pale:#effaf7;--line:#deeceb;--gold:#ffce62;--cream:#fffaf0;--white:#fff;--shadow:0 16px 45px #1b5e6612;}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Nunito,'Trebuchet MS',system-ui,sans-serif;color:var(--navy);background:radial-gradient(ellipse at 0 0,#fff6df 0%,transparent 50%),radial-gradient(ellipse at 100% 15%,#ddf9f1 0%,transparent 48%),#f8fcfa;min-height:100vh}button{font-family:inherit;cursor:pointer}button:focus-visible{outline:3px solid #feae3b;outline-offset:3px}button:disabled{cursor:default;opacity:.5}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.cover{height:100svh;min-height:400px;display:grid;place-items:center;background:linear-gradient(135deg,#d8f4f0,#fff4d7);position:relative;overflow:hidden}.cover:before{content:"";position:absolute;inset:-30px;background:url("assets/covers/desktop.webp") center/cover no-repeat;filter:blur(26px);opacity:.55}.cover-button{z-index:1;display:block;border:0;padding:0;background:transparent;max-width:100%;width:min(100%,177.8svh);max-height:100%;line-height:0;box-shadow:0 10px 50px #104a6140;position:relative;transition:filter .12s}.cover-button:hover{filter:saturate(1.05)}.cover-button picture,.cover-button img{display:block;width:100%;height:auto;max-height:100svh;object-fit:contain}.cover-hint{z-index:2;position:absolute;bottom:10px;right:10px;background:#163c5acc;color:#fff;border-radius:100px;padding:5px 13px;font-weight:800;font-size:11px;pointer-events:none}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;max-width:1190px;margin:auto;padding:15px 22px 6px}.brand{display:flex;align-items:center;gap:10px}.brand-mark{display:grid;place-items:center;width:41px;height:41px;border-radius:13px;background:linear-gradient(135deg,#fff0bb,#fbd882);color:#e79b25;font-size:26px;box-shadow:0 3px 10px #dcad4b27}.brand strong{font-size:16px;display:block}.brand small{font-size:11px;color:#83989c;font-weight:800;display:block}.topbar-actions{display:flex;align-items:center;gap:7px}.tool-button{min-height:39px;min-width:41px;background:#ffffffec;border:1px solid #d9e9e7;border-radius:13px;color:#416c70;font-size:18px;font-weight:900;box-shadow:0 2px 10px #44756d0c}.tool-button:hover{background:#eafbf5}.tool-button.off{opacity:.55}.badge-trigger{font-size:15px;padding:0 12px}.badge-trigger span{font-size:12px}
.main{max-width:1190px;padding:9px 22px 15px;margin:0 auto}.headline-row{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:3px 0 12px}.eyebrow{font-weight:900;color:#22968d;font-size:10px;letter-spacing:2px}.headline-text h1{font-weight:900;font-size:clamp(25px,3vw,33px);line-height:1.16;margin:3px 0}.headline-text p{color:#779195;font-size:13px;font-weight:700;margin:4px 0 0}.completion-pill{background:#e8f9f0;padding:10px 17px;border-radius:20px;min-width:83px;text-align:center;color:#158f7a}.completion-pill strong{font-weight:900;display:block;font-size:25px;line-height:1}.completion-pill span{display:block;font-size:10px;font-weight:800;margin-top:3px}
.workspace{background:#fffdfcf5;border:1px solid #e5edeb;border-radius:27px;padding:18px 22px 19px;box-shadow:var(--shadow)}.workspace-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:12px}.task-heading{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:900;color:#245968}.soft-dot{width:9px;height:9px;border-radius:50%;background:#56c8ab}.reset-button{border:1px solid #d2e9e0;background:#f5fdf9;color:#207e78;padding:9px 15px;border-radius:12px;font-size:12px;font-weight:900;white-space:nowrap}.reset-button:hover{background:#dcf6e9}.mode-bar{display:flex;gap:8px;background:#f3f9f8;padding:5px;border:1px solid #e3f0ec;border-radius:15px;width:max-content;max-width:100%;margin:0 auto 13px}.mode-button{border:1px solid transparent;background:transparent;padding:9px 17px;color:#6c8c90;border-radius:11px;font-size:13px;font-weight:900;transition:background .18s,border .18s,box-shadow .18s;display:flex;align-items:center;gap:6px}.mode-button.active{background:white;border-color:#d2e8e4;color:#127e88;box-shadow:0 3px 9px #346c681a}
.boards-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;align-items:start;max-width:940px;margin:0 auto}.board-panel{background:#fbfefe;border:1px solid #e2f0ee;border-radius:22px;min-width:0;overflow:hidden;position:relative}.reference-panel{background:linear-gradient(180deg,#f8fdfd,#f5f9ff)}.draw-panel{background:linear-gradient(180deg,#fffefa,#fffaf4)}.panel-header{display:flex;gap:8px;align-items:center;padding:10px 14px 0;font-size:13px}.panel-number{font-size:10px;background:#def6ef;color:#138f85;border-radius:8px;padding:4px 6px;font-weight:900}.reference-panel .panel-number{background:#e4f5ff;color:#1b88b0}.panel-header strong{font-weight:900}.panel-note{font-size:10px;font-weight:800;color:#8ca6ac;margin-left:auto}.reference-slot,.draw-holder{position:relative;display:flex;align-items:center;justify-content:center;padding:0 8px 6px;min-height:0}.pattern-svg{display:block;max-width:100%;aspect-ratio:1 / 1;overflow:visible}.reference-slot .pattern-svg{width:min(100%,300px);max-height:300px}.draw-holder .pattern-svg{width:min(100%,340px);max-height:340px}.reference-slot{min-height:310px}.draw-holder{min-height:350px}.draw-svg{touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;overflow:visible}
.pattern-dot{fill:#16495f;stroke:#effff8;stroke-width:3.7}.pattern-dot-glow{fill:#0fbdbb;opacity:.11}.draw-dot{fill:#087f9b;stroke:#fffefa;stroke-width:4}.draw-dot.active-dot{fill:#ffbd4c;stroke:#fff0aa;stroke-width:5;filter:drop-shadow(0px 0px 6px #ffc863)}.draw-dot.reached{fill:#25c88b}.dot-ring{fill:none;stroke:#c6e9e4;stroke-width:2.6;opacity:.85}.trace-under{fill:none;stroke:#08c5b9;stroke-width:18;opacity:.14;stroke-linecap:round;stroke-linejoin:round}.trace-main{fill:none;stroke:#11b9c1;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 1px #12759455)}.ink-glow{stroke:#06b8bd;opacity:.17;stroke-width:17;stroke-linecap:round}.ink-path{stroke:url(#paintGradient);stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0px 2px 1px #30666c22);animation:strokeAppear .34s ease-out both}.board-complete .ink-path{stroke:url(#celebrateGradient);stroke-width:7;filter:drop-shadow(0 0 5px #ed78d35e);transition:stroke .35s,filter .3s}.board-complete .draw-dot{fill:#f49ad5;stroke:#fff}.board-complete .dot-ring{stroke:#ffd570;opacity:1}.wrong-stroke{fill:none;stroke:#ee7164;stroke-width:6;stroke-linecap:round;opacity:.85;animation:wrongFade .55s ease-out forwards}
.memory-controls{padding:0 14px 13px;text-align:center}.primary-mini{background:linear-gradient(100deg,#08a8a9,#17c4a1);border:0;border-radius:12px;color:white;font-size:13px;font-weight:900;padding:11px 19px;box-shadow:0 4px 12px #11a7a338}.primary-mini span{padding-left:5px}.memory-instruction{color:#748e95;font-size:10px;font-weight:700;margin:7px auto 1px}.memory-hidden-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:290px;text-align:center;padding:10px}.memory-hidden-card .memory-art{display:grid;place-items:center;width:84px;height:84px;border-radius:26px;font-size:40px;background:#e1f5f0}.memory-hidden-card strong{font-size:17px}.memory-hidden-card p{font-size:12px;color:#75919a;margin:0}.memory-hidden-card button{border:1px solid #9fdacb;border-radius:12px;background:white;color:#0b8985;padding:10px 14px;font-size:13px;font-weight:900}.draw-locked{position:absolute;inset:0;background:#fffcf6ea;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:15px;text-align:center;z-index:2;pointer-events:auto}.draw-locked span{font-size:43px}.draw-locked strong{font-size:15px}.draw-locked small{font-size:12px;color:#799399}.sparkles-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.particle{position:absolute;left:50%;top:50%;display:block;font-size:20px;animation:particleFloat .85s cubic-bezier(.13,.76,.28,1) both;transform:translate(-50%,-50%);opacity:0}
.feedback-row{display:flex;justify-content:center;align-items:center;gap:10px;max-width:680px;margin:10px auto 9px;min-height:92px}.feedback-character{width:88px;height:95px;object-fit:contain;object-position:center bottom;flex:none;filter:drop-shadow(0 2px 2px #cba54d28)}.bubble-wrap{flex:1;min-width:0}.speech-bubble{position:relative;background:#fff8ec;border:1.5px solid #f0cf8e;color:#93662d;padding:10px 15px;border-radius:15px;font-size:13px;font-weight:900;line-height:1.3;min-height:45px;display:flex;align-items:center;justify-content:center;text-align:center}.speech-bubble:before{content:'';position:absolute;left:-9px;top:18px;width:15px;height:15px;background:#fff8ec;border-left:1.5px solid #f0cf8e;border-bottom:1.5px solid #f0cf8e;transform:rotate(45deg)}.task-message{text-align:center;font-size:11px;color:#779195;font-weight:800;margin:6px auto 0;min-height:15px}.speech-bubble.good{background:#e9fbef;border-color:#96dcc1;color:#12866a}.speech-bubble.good:before{background:#e9fbef;border-color:#96dcc1}.speech-bubble.warn{background:#fff5ec;border-color:#f7c5a3;color:#bd6a3d}.speech-bubble.warn:before{background:#fff5ec;border-color:#f7c5a3}.bottom-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 auto;max-width:940px}.nav-button{border:1px solid #bcdfd7;color:#19867d;background:#f2fdf7;padding:11px 15px;border-radius:12px;font-size:12px;font-weight:900;white-space:nowrap;min-height:43px}.nav-button:hover:not(:disabled){background:#e5f9ef}.next-button{background:#ecfaf6;border-color:#84d1be}.next-button.congratulations{background:#16b890;color:white;border-color:#12b78e;animation:pulseButton 1.35s infinite}.task-dots{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.task-jump{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;border:1.5px solid #d2e4e2;color:#86a0a2;background:#f8fbfb;font-weight:900;font-size:11px}.task-jump.current{background:#19aca4;border-color:#19aca4;color:white}.task-jump.finished:not(.current){background:#dff7e9;color:#149b74;border-color:#91dabd}.footer{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:17px 4px;color:#87a3a0;font-size:11px;font-weight:800}.footer button{border:0;background:transparent;color:#a4aeaf;text-decoration:underline;font-size:11px;font-weight:800}
.award-overlay,.album-overlay{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#08283ebd;backdrop-filter:blur(5px);padding:16px}.award-overlay{cursor:pointer;overflow:hidden}.award-modal{width:min(450px,96vw);background:linear-gradient(160deg,#ffffff,#fff1cd);border:5px solid #ffd56f;box-shadow:0 0 0 5px #ffffff60,0 24px 55px #102a3f70,0 0 90px #ffe08e99;border-radius:34px;text-align:center;position:relative;padding:16px 21px 20px;animation:awardPop .7s cubic-bezier(.16,1.4,.33,1) both}.award-kicker{display:block;color:#b47618;letter-spacing:1.1px;font-weight:1000;font-size:12px}.award-modal img{display:block;width:min(270px,60vw);height:255px;object-fit:contain;margin:1px auto -5px;filter:drop-shadow(0 10px 12px #f8cd6d61)}.award-modal h2{font-size:26px;font-weight:1000;color:#154d6e;margin:5px 0}.award-modal p{font-size:14px;font-weight:800;color:#846735;margin:0 0 12px}.award-footer{font-size:13px;display:block;background:#ffe2a2;border-radius:30px;padding:8px 10px;font-weight:900;color:#a26d1f}.award-dismiss{color:white;font-size:11px;font-weight:800;margin-top:14px;opacity:.85}.award-burst{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center,#ffe4ac63,transparent 65%);animation:burstGlow 1.2s ease-out both}.award-overlay:before,.award-overlay:after{position:absolute;content:'✦  ✦  ★  ✦  ✨  ✦  ★  ✦';font-size:35px;left:2%;right:2%;text-align:center;color:#ffda7b;top:11%;letter-spacing:30px;animation:awardSpark 1.4s both}.award-overlay:after{top:auto;bottom:12%;animation-delay:.3s;color:#ff9ddb}
.album-modal{background:#fffcf6;border-radius:25px;padding:23px;box-shadow:0 25px 65px #13334572;width:min(860px,100%);max-height:90svh;overflow-y:auto}.album-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.album-head h2{font-size:26px;margin:2px 0}.album-head h2 span{font-size:18px;color:#128f79}.album-lead{font-size:12px;color:#759194;font-weight:800;margin:6px 0 14px}.close-button{background:#e8f4ef;border:0;color:#41685e;border-radius:13px;width:40px;height:40px;font-size:27px}.album-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:12px}.album-item{text-align:center;background:#fff;border:1px solid #e1ece7;border-radius:17px;padding:10px}.album-item img{width:100%;height:154px;object-fit:contain}.album-item.locked img{filter:grayscale(1);opacity:.25}.album-item h3{font-size:13px;margin:4px 0;font-weight:1000}.album-item p{font-size:11px;color:#7e9495;margin:0 0 5px;min-height:31px}.album-item .badge-status{color:#18a078;font-size:10px;font-weight:1000}.album-item.locked .badge-status{color:#a2adb0}
@keyframes strokeAppear{from{opacity:.3;stroke-dasharray:350;stroke-dashoffset:350}to{opacity:1;stroke-dasharray:350;stroke-dashoffset:0}}@keyframes wrongFade{0%{opacity:1;stroke-width:7}70%{opacity:.8}100%{opacity:0;stroke-width:3}}@keyframes particleFloat{0%{transform:translate(-50%,-50%) scale(.25);opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(170deg) scale(1.2);opacity:0}}@keyframes awardPop{0%{opacity:0;transform:scale(.32) rotate(-7deg)}65%{opacity:1;transform:scale(1.08) rotate(1.5deg)}100%{transform:scale(1) rotate(0)}}@keyframes awardSpark{0%{opacity:0;transform:scale(.4) translateY(30px)}40%{opacity:1}100%{opacity:0;transform:scale(1.15) translateY(-17px)}}@keyframes pulseButton{50%{box-shadow:0 0 0 6px #13b88928}}@keyframes burstGlow{0%{opacity:0;transform:scale(.3)}60%{opacity:1}100%{opacity:.7;transform:scale(1.5)}}
@media(max-width:699px){.cover:before{background-image:url("assets/covers/mobile.webp")}.cover{height:100svh;min-height:350px}.cover-button{width:min(100%,66.67svh);max-height:100svh}.cover-button img{max-height:100svh}.topbar{padding:10px 12px 4px}.brand strong{font-size:13px}.brand small{font-size:9px}.brand-mark{width:34px;height:34px;font-size:21px}.topbar-actions{gap:4px}.tool-button{min-width:34px;min-height:34px;border-radius:11px;font-size:15px}.badge-trigger{padding:0 6px;font-size:12px}.badge-trigger span{font-size:10px}.main{padding:4px 12px 10px}.headline-row{margin:6px 0 9px}.headline-text h1{font-size:clamp(21px,5.4vw,30px)}.headline-text p{font-size:11px}.completion-pill{padding:8px;min-width:60px;border-radius:14px}.completion-pill strong{font-size:20px}.completion-pill span{font-size:9px}.eyebrow{font-size:9px;letter-spacing:1.4px}.workspace{padding:11px 10px 14px;border-radius:20px}.workspace-top{margin-bottom:9px}.mode-bar{width:100%;margin-bottom:9px;gap:5px}.mode-button{flex:1;justify-content:center;padding:8px 5px;font-size:11px;line-height:1.2;gap:3px}.boards-grid{display:flex;flex-direction:column;gap:9px;align-items:stretch}.board-panel{border-radius:16px}.panel-header{padding:7px 10px 0;font-size:12px}.panel-note{font-size:10px}.reference-slot{min-height:0;padding:0 7px 1px}.reference-slot .pattern-svg{width:100%;height:min(23svh,185px);max-height:185px}.draw-holder{min-height:0;padding:0 5px 6px}.draw-holder .pattern-svg{width:100%;height:min(43svh,335px);max-height:335px}.memory-hidden-card{min-height:145px;gap:7px}.memory-hidden-card .memory-art{width:48px;height:48px;font-size:25px;border-radius:15px}.memory-hidden-card strong{font-size:13px}.memory-hidden-card p{font-size:11px}.memory-controls{padding:0 8px 9px}.memory-instruction{margin-top:4px}.feedback-row{min-height:62px;margin:8px 2px}.feedback-character{width:57px;height:64px}.speech-bubble{font-size:11px;min-height:38px;padding:7px 9px}.speech-bubble:before{top:12px}.task-message{font-size:10px;margin:4px 0 0}.bottom-row{gap:6px}.nav-button{font-size:10px;padding:9px 8px;min-height:38px}.task-dots{gap:4px}.task-jump{width:24px;height:24px;font-size:10px}.footer{font-size:10px;padding:13px 2px;align-items:flex-start}.footer button{font-size:10px}.award-modal img{height:220px}.award-modal h2{font-size:23px}}
@media(max-width:359px){.brand small{display:none}.brand-mark{width:30px;height:30px}.mode-button{font-size:10px}.completion-pill{min-width:49px}.headline-text p{font-size:10px}.feedback-character{width:45px;height:56px}.task-jump{width:21px;height:21px}.nav-button{font-size:9px;padding:8px 5px}.reset-button{padding:8px 10px;font-size:11px}}
@media(min-width:700px) and (max-height:820px){.reference-slot{min-height:260px}.reference-slot .pattern-svg{max-height:260px}.draw-holder{min-height:275px}.draw-holder .pattern-svg{max-height:275px}.feedback-row{min-height:68px;margin:5px auto}.feedback-character{height:68px;width:60px}.workspace{padding-top:12px}.main{padding-top:3px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
/* v1.0: повна гра — меню серій, великі ігрові кнопки, завершені яскраві лінії */
.series-menu{min-height:100svh;padding:16px 18px 48px;background:radial-gradient(ellipse at 2% 0%,#fff2cb,transparent 50%),radial-gradient(ellipse at 100% 7%,#ccf5ee,transparent 58%),#f6fcfb}
.menu-shell{max-width:1130px;margin:0 auto}.menu-topline{display:flex;justify-content:space-between;align-items:center;color:#258f8d;gap:10px;font-weight:1000;letter-spacing:.5px;font-size:12px}.menu-album{border:1px solid #b5e0d2;border-radius:15px;background:#fff;color:#178e82;font-weight:1000;padding:11px 16px;font-size:13px}
.menu-hero{display:flex;align-items:center;position:relative;margin:18px 0 22px;padding:25px 30px 20px;background:linear-gradient(125deg,#fffdf5,#ebfffb);border:1px solid #d2ece5;border-radius:28px;min-height:225px;overflow:hidden;box-shadow:var(--shadow)}
.menu-hero-text{max-width:820px;position:relative;z-index:1;padding-right:165px}.menu-hero h1{font-size:clamp(26px,3.4vw,40px);margin:6px 0;color:#174758;line-height:1.12}.menu-hero p{font-weight:700;font-size:14px;line-height:1.55;color:#577c81;margin:0 0 12px}.menu-mascot{position:absolute;right:20px;bottom:-14px;width:195px;max-height:235px;object-fit:contain;filter:drop-shadow(0 4px 5px #53a2a225)}
.menu-progress-total{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:#547b7f;font-size:12px;font-weight:900;margin:7px 0 13px}.menu-progress-total strong{color:#0c9a8b;font-size:20px}
.menu-continue{display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;background:linear-gradient(#30d2a5,#0c9d7c);border:2px solid #159979;box-shadow:0 5px 0 #07816d,0 8px 19px #1cba9754;padding:13px 21px;font-size:15px;font-weight:1000;border-radius:18px;min-height:52px}.menu-continue:active{transform:translateY(3px);box-shadow:0 2px 0 #07816d}
.menu-section-heading{display:flex;align-items:end;justify-content:space-between;gap:10px;margin:14px 2px 13px}.menu-section-heading h2{font-size:21px;margin:0}.menu-section-heading span{color:#91a3a2;font-size:12px;font-weight:800}.series-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.series-card{display:flex;gap:13px;align-items:center;border-radius:21px;text-align:left;border:2px solid #d5e9e8;background:#fff;padding:12px;min-width:0;color:#193f50;box-shadow:0 7px 18px #31636d0d;transition:transform .18s,border-color .18s,box-shadow .18s}
.series-card:hover{transform:translateY(-3px);border-color:#47b6ad;box-shadow:0 12px 20px #3b9d9e25}
.series-left{display:grid;place-items:center;background:linear-gradient(140deg,#f6fcff,#fffdf5);border:1px solid #dfeae6;width:106px;height:106px;border-radius:16px;flex-shrink:0}.series-left svg{width:100%;height:100%}.series-details{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}.series-details strong{font-size:17px;font-weight:1000;line-height:1.2}.series-desc{font-size:11px;color:#829b9d;font-weight:800;line-height:1.3;min-height:28px}.series-meta{display:flex;align-items:center;justify-content:space-between;gap:4px}.difficulty-tag{font-size:11px;border-radius:999px;padding:5px 9px;font-weight:1000;white-space:nowrap}.series-number{font-size:13px;font-weight:1000;color:#28657a}.series-bar{height:8px;display:block;background:#e8f0ed;border-radius:99px;overflow:hidden}.series-bar>span{display:block;height:100%;background:linear-gradient(90deg,#50c9af,#0aa178);transition:width .25s;border-radius:99px}
.tier-easy .difficulty-tag{background:#e7f9e6;color:#2c9251}.tier-medium .difficulty-tag{background:#fff4cd;color:#ac7b18}.tier-hard .difficulty-tag{background:#ffe8d5;color:#c56c22}.tier-expert .difficulty-tag{background:#fce0ed;color:#bc417e}.tier-easy{border-left:6px solid #66c883}.tier-medium{border-left:6px solid #e6bf56}.tier-hard{border-left:6px solid #f39b52}.tier-expert{border-left:6px solid #d76dad}
.menu-legend{display:flex;flex-wrap:wrap;gap:12px;margin:20px 2px;justify-content:center;font-size:12px;font-weight:900}.legend-easy{color:#2c9251}.legend-medium{color:#ac7b18}.legend-hard{color:#c56c22}.legend-expert{color:#bc417e}
.back-to-menu{border:0;background:#f1fbf7;color:#188b81;font-weight:1000;padding:9px 14px;border-radius:11px;margin:-3px 0 12px;min-height:42px;font-size:13px}.back-to-menu:hover{background:#dff8eb}
.reset-button{display:flex;align-items:center;justify-content:center;gap:9px;font-size:15px;min-height:59px;border-radius:16px;padding:6px 18px;border:2px solid #f3bfcd;background:linear-gradient(#fff6f9,#ffe5ed);color:#aa4672;box-shadow:0 4px 0 #f4c4d1}.reset-button svg{display:block;width:57px;height:40px;flex-shrink:0;filter:drop-shadow(0 2px 1px #9b537023)}.reset-button:hover{background:#ffedf5}.reset-button:active{transform:translateY(2px);box-shadow:0 2px 0 #f4c4d1}
.nav-button{min-height:49px;font-size:14px;padding:11px 17px}.next-button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:60px;border-radius:17px;color:#fff;background:linear-gradient(#2fcea9,#069882);border:2px solid #12a38b;box-shadow:0 4px 0 #117565,0 8px 14px #37c5a644;font-weight:1000;font-size:15px;transition:transform .15s}.next-button:hover{background:linear-gradient(#44d6af,#07a58b)}.next-button:active{transform:translateY(3px);box-shadow:0 2px 0 #117565}.next-button svg{width:34px;height:34px;display:block;filter:drop-shadow(0 1px 2px #207a6a88)}.next-button.congratulations{background:linear-gradient(#38d9a2,#08a077);color:white;border-color:#1a9c75}
/* Every edge is fully visible at all times: no stroke-dash animation that could hide individual sides. */
.ink-path{stroke:url(#paintGradient);stroke-width:7.2;stroke-linecap:round;stroke-linejoin:round;animation:none!important;opacity:1;stroke-dasharray:none!important;stroke-dashoffset:0!important;filter:drop-shadow(0 1px 1px #11809b22)}
.board-complete .ink-path{stroke:url(#celebrateGradient);stroke-width:8.1;opacity:1;filter:drop-shadow(0 0 5px #ed78d362);animation:none!important}.board-complete .ink-glow{opacity:.25}
.award-overlay{opacity:1;transition:opacity .55s ease,backdrop-filter .55s ease;animation:awardOverlayEnter .55s ease both}.award-overlay.is-leaving{opacity:0;pointer-events:none}.award-modal{animation:awardAppear 1s cubic-bezier(.17,.9,.18,1.06) both}.award-overlay.is-leaving .award-modal{transform:translateY(-12px) scale(.96);transition:transform .55s ease}.award-overlay:before,.award-overlay:after{animation-duration:2.1s}
@keyframes awardOverlayEnter{from{opacity:0}to{opacity:1}}@keyframes awardAppear{0%{opacity:0;transform:translateY(42px) scale(.7)}65%{opacity:1;transform:translateY(-5px) scale(1.03)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:699px){.series-menu{padding:10px 12px 32px}.menu-topline{font-size:10px}.menu-album{font-size:11px;padding:9px 11px}.menu-hero{margin:11px 0 18px;min-height:210px;padding:15px;border-radius:20px}.menu-hero-text{padding-right:92px}.menu-hero h1{font-size:25px}.menu-hero p{font-size:11px;line-height:1.4}.menu-mascot{width:108px;right:-5px;bottom:4px;max-height:200px}.menu-progress-total{gap:5px;font-size:10px}.menu-progress-total strong{font-size:16px}.menu-continue{font-size:12px;min-height:45px;padding:9px 12px}.menu-section-heading{display:block}.menu-section-heading h2{font-size:17px}.menu-section-heading span{font-size:10px}.series-grid{grid-template-columns:1fr;gap:9px}.series-card{padding:9px;gap:10px;border-radius:16px}.series-left{width:91px;height:91px}.series-details strong{font-size:14px}.series-desc{font-size:10px;min-height:0}.difficulty-tag{font-size:10px}.series-number{font-size:12px}.series-details{gap:6px}.back-to-menu{font-size:12px;min-height:40px;margin:0 0 8px}.reset-button{min-height:52px;padding:5px 9px;font-size:12px;gap:3px}.reset-button svg{width:42px;height:35px}.next-button{font-size:12px;min-height:53px;padding:8px 9px;gap:4px;max-width:170px;white-space:normal}.next-button svg{width:29px;height:29px;flex-shrink:0}.nav-button{font-size:11px;min-height:42px}.bottom-row{flex-wrap:wrap;justify-content:space-between}.task-dots{order:3;flex:1 0 100%;margin:3px auto 0}.task-jump{width:32px;height:32px}.workspace-top{align-items:center}}
@media(max-width:359px){.menu-hero-text{padding-right:70px}.menu-mascot{width:84px}.menu-hero h1{font-size:21px}.menu-continue{font-size:11px}.series-left{width:80px;height:80px}.next-button{font-size:11px}.reset-button span{font-size:11px}}


/* v1.2: one shared global user-space colour gradient for EVERY stroke. */
.ink-path,.ink-path.axis-horizontal,.ink-path.axis-vertical{stroke:url(#paintGradient)!important}
.board-complete .ink-path,.board-complete .ink-path.axis-horizontal,.board-complete .ink-path.axis-vertical{
  stroke:url(#celebrateGradient)!important;
}
/* Slow, gentle floating award instead of a sudden bouncing pop. */
.award-overlay{animation:none;opacity:0;background:#08283e00;backdrop-filter:blur(0px);transition:background .75s ease,backdrop-filter .75s ease,opacity .78s ease}
.award-overlay.is-active:not(.is-leaving){background:#08283eb8;backdrop-filter:blur(5px);opacity:1}
.award-overlay.is-leaving{background:#08283e00;backdrop-filter:blur(0px);opacity:0}
.award-overlay .award-modal{animation:awardFloatIn .85s cubic-bezier(.21,.78,.32,1) both}
.award-overlay.is-leaving .award-modal{animation:awardFloatOut .78s ease-in both;transition:none}
.award-overlay .award-dismiss{animation:awardFloatIn .85s ease both}
.award-overlay.is-leaving .award-dismiss{opacity:0;transition:opacity .5s ease}
@keyframes awardFloatIn{
  from{opacity:0;transform:translateY(min(38vh,240px)) scale(.94)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes awardFloatOut{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(min(30vh,190px)) scale(.95)}
}
.final-overlay{position:fixed;inset:0;z-index:24;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at 50% 25%,#ffedbd,#e0fbf7 65%,#cceeee)}
.final-card{width:min(650px,96vw);text-align:center;border:3px solid #ffc65c;border-radius:30px;padding:18px 22px 30px;background:linear-gradient(145deg,#fffefd,#fff5da);box-shadow:0 20px 70px #267e8640}
.final-card img{width:min(205px,43vw);height:205px;object-fit:contain}
.final-kicker{display:block;color:#a66e17;font-weight:1000;letter-spacing:2px;font-size:13px}
.final-card h2{font-size:clamp(24px,5vw,36px);color:#155975;margin:10px 0}
.final-card p{color:#688386;font-weight:800}.final-card strong{display:block;color:#0caa8c;font-size:30px;margin:13px}
.final-buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.final-buttons button{border:0;border-radius:14px;background:#14b39a;color:white;font-weight:1000;font-size:16px;padding:15px 20px;min-height:52px}
.final-buttons button+button{background:#ffc54c;color:#755017}
@media(prefers-reduced-motion:reduce){.award-overlay,.award-overlay .award-modal,.award-overlay.is-leaving .award-modal{animation:none!important;transition:none!important}}

/* ===== v1.3: guided drawing modes and a clear journey between series ===== */
.mode-controls-heading{display:flex;justify-content:center;align-items:center;gap:20px;margin:2px auto 7px;color:#2b6270;font-size:13px;font-weight:1000}
.mode-help-button{border:1.5px solid #83d1bd;background:#ebfff7;color:#128c79;border-radius:999px;padding:7px 14px;font-size:12px;font-weight:1000;min-height:36px}
.mode-help-button:hover{background:#dcfaed}
.mode-bar{width:min(700px,100%);display:flex;gap:9px;justify-content:stretch;border-radius:19px;margin-bottom:12px}
.mode-button{position:relative;flex:1;justify-content:center;min-height:72px;padding:10px 15px;border-radius:15px;border:2px solid transparent;line-height:1.2;font-size:14px;text-align:left;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.mode-button .mode-emoji{font-size:27px;line-height:1.2;margin-right:5px}
.mode-button span:last-child{display:flex;flex-direction:column;gap:4px}
.mode-button strong{font-size:14px;font-weight:1000;color:#365e69}
.mode-button small{font-size:11px;font-weight:800;color:#829a9e}
.mode-button.active{background:linear-gradient(#fff,#eefff9);border-color:#30b8a4;box-shadow:0 4px 0 #d0f1e5,0 7px 12px #126c6b14}
.mode-button.active strong{color:#0a8c81}
.mode-button:hover{transform:translateY(-1px);border-color:#a6dacd}
.mode-button.coach-highlight{z-index:5;outline:3px solid #ffca55;outline-offset:4px;box-shadow:0 0 0 9px #ffdb7a3b,0 8px 24px #f3bd4d55;animation:modeHighlight 1.25s ease-in-out infinite}
.mode-button.coach-highlight:after{content:'⬇';font-size:27px;position:absolute;top:-44px;left:calc(50% - 11px);color:#e69c2c;filter:drop-shadow(0 2px 2px #fff);animation:coachPointer 1s ease-in-out infinite}
.mode-coach{display:flex;align-items:center;gap:15px;margin:0 auto 18px;padding:14px 16px;max-width:750px;background:linear-gradient(120deg,#fff7da,#fffef8 55%,#e9fbfa);border:2px solid #f0cd79;border-radius:22px;box-shadow:0 12px 30px #6d846320;position:relative;z-index:4}
.coach-illustration{position:relative;display:grid;place-items:center;flex:0 0 67px;height:67px;background:#fff;border:2px solid #ffe5a4;border-radius:21px;box-shadow:0 3px 0 #f4d587}
.coach-icon{font-size:35px}.coach-arrow{position:absolute;color:#e7a431;font-size:19px;top:-12px;right:-9px;transform:rotate(-25deg);animation:coachPointer 1s ease-in-out infinite}
.coach-copy{flex:1;min-width:0}.coach-step{display:block;font-size:10px;letter-spacing:1.3px;font-weight:1000;color:#a17b31;margin-bottom:4px}.coach-copy strong{display:block;font-size:19px;line-height:1.2;color:#15546c}.coach-copy p{margin:5px 0 0;font-weight:850;font-size:13px;line-height:1.45;color:#58777b}
.coach-actions{display:flex;flex-direction:column;gap:7px;align-items:stretch;min-width:160px}.coach-actions button{border-radius:13px;min-height:42px;font-weight:1000;font-size:13px}.coach-next{background:#14b698;color:#fff;border:2px solid #129e87}.coach-skip{background:#fff;border:1px solid #ead6ac;color:#92816c}
@keyframes coachPointer{0%,100%{transform:translateY(-1px)}55%{transform:translateY(6px)}}
@keyframes modeHighlight{50%{box-shadow:0 0 0 13px #ffd76b60,0 8px 24px #e8aa3e46}}

.series-complete-overlay{position:fixed;inset:0;z-index:23;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 20%,#fff8dc 0,#e6fff7 65%,#d4f4ee 100%);overflow:auto}
.series-complete-overlay:before{content:'✦　✧　✦　★　✦　✧　✦';position:fixed;top:8%;left:0;right:0;text-align:center;letter-spacing:16px;color:#e5b850;font-size:28px;opacity:.75;pointer-events:none;animation:seriesSpark 3s ease-in-out infinite}
.series-complete-card{position:relative;width:min(690px,96vw);max-height:96svh;overflow:auto;text-align:center;border:3px solid #ffd478;border-radius:32px;background:linear-gradient(165deg,#ffffff,#fff9e9 70%,#f2fdf8);padding:22px clamp(16px,4vw,35px) 24px;box-shadow:0 24px 66px #2a6d7070,0 0 0 7px #ffffff80;animation:seriesRise .75s cubic-bezier(.17,.85,.28,1) both}
.series-celebrate-kicker{display:block;font-size:12px;letter-spacing:1.6px;color:#b98729;font-weight:1000}
.series-celebrate-iskryk{display:block;width:min(180px,43vw);height:180px;margin:3px auto -9px;object-fit:contain;filter:drop-shadow(0 8px 9px #d3aa5244);animation:seriesMascot 2.1s ease-in-out infinite}
.series-complete-card h2{font-size:clamp(24px,5.5vw,36px);color:#145471;line-height:1.1;margin:10px 0 6px}
.series-six-stars{font-size:clamp(21px,5vw,31px);letter-spacing:7px;line-height:1.4;color:#f3b936;text-shadow:0 2px 0 #e68c2a,0 0 16px #ffda83}
.series-complete-card p{font-size:15px;font-weight:850;color:#567b7c;line-height:1.35;margin:7px auto 16px}
.series-next-panel{display:flex;flex-direction:column;align-items:center;gap:5px;background:#ecfbf6;border:1.5px solid #b4e7d5;border-radius:20px;padding:12px;margin:5px auto 17px}
.series-next-panel>span{font-size:10px;color:#699491;font-weight:1000;letter-spacing:1.5px}
.series-next-panel strong{font-size:19px;color:#0e7777}
.series-difficulty{color:#a46d1f;background:#fff0bc;padding:5px 14px;border-radius:22px;font-weight:1000;font-size:12px}
.series-complete-overlay[data-tier="easy"] .series-difficulty{background:#daf6da;color:#238750}
.series-complete-overlay[data-tier="medium"] .series-difficulty{background:#fff0bc;color:#a46d1f}
.series-complete-overlay[data-tier="hard"] .series-difficulty{background:#ffe6d2;color:#bd662f}
.series-complete-overlay[data-tier="expert"] .series-difficulty{background:#fbdce9;color:#ac4377}
.series-complete-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.series-complete-actions button{padding:12px 19px;border-radius:15px;font-size:14px;font-weight:1000;min-height:51px}
.series-back-button{border:2px solid #a4dcd3;background:#fff;color:#288c84}
.series-forward-button{border:2px solid #13977a;background:linear-gradient(#25d0a0,#0b9b7c);color:white;box-shadow:0 4px 0 #0b7562}
.series-forward-button span{font-size:18px;margin-left:8px}
.series-auto-label{display:block;color:#809b9d;font-size:11px;font-weight:750;margin-top:15px}
@keyframes seriesRise{from{transform:translateY(70px) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes seriesSpark{50%{transform:translateY(9px);opacity:.4}}
@keyframes seriesMascot{50%{transform:translateY(-7px)}}

/* A medal is an occasion, not an ordinary toast. */
.award-modal{width:min(500px,96vw);border-width:6px;box-shadow:0 0 0 6px #ffffff70,0 24px 60px #102a3f75,0 0 100px #ffe08e99}
.award-modal img{width:min(310px,66vw);height:280px}
.award-kicker{font-size:clamp(13px,2.7vw,17px);letter-spacing:1.5px}
.award-modal h2{font-size:clamp(26px,5vw,35px)}
.award-modal p{font-size:16px;line-height:1.35}
@media(max-width:699px){
 .mode-controls-heading{gap:10px;font-size:11px}.mode-help-button{font-size:11px;padding:6px 11px}
 .mode-bar{gap:5px}.mode-button{min-height:65px;padding:7px 5px;gap:4px}.mode-button .mode-emoji{font-size:21px;margin-right:1px}.mode-button strong{font-size:11px}.mode-button small{font-size:9px}
 .mode-button.coach-highlight:after{top:-31px;font-size:20px}
 .mode-coach{flex-wrap:wrap;gap:8px;padding:11px;margin-bottom:12px;border-radius:17px}
 .coach-illustration{flex-basis:51px;height:51px;border-radius:16px}.coach-icon{font-size:27px}
 .coach-copy strong{font-size:16px}.coach-copy p{font-size:11px}.coach-step{font-size:9px}
 .coach-actions{flex:1 0 100%;flex-direction:row;min-width:0}.coach-actions button{flex:1;min-height:43px;font-size:12px}
 .series-complete-overlay{padding:10px}.series-complete-card{padding:12px 13px 17px;border-radius:22px;max-height:96svh}.series-celebrate-kicker{font-size:9px}.series-celebrate-iskryk{height:min(24svh,155px);width:min(165px,45vw)}
 .series-complete-card h2{font-size:clamp(21px,6vw,27px)}.series-complete-card p{font-size:12px;margin:5px auto 10px}.series-next-panel{padding:9px;margin-bottom:12px}.series-next-panel strong{font-size:15px}.series-complete-actions button{font-size:12px;min-height:47px;padding:8px 11px}.series-auto-label{font-size:10px;margin-top:9px}
 .award-modal img{height:min(37svh,235px)}.award-modal p{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.mode-button.coach-highlight,.mode-button.coach-highlight:after,.coach-arrow,.series-complete-overlay:before,.series-complete-card,.series-celebrate-iskryk{animation:none!important}}


/* ============================================================
   v1.4 — expressive, accessible typography for the whole game
   Display: Shantell Sans. Interface: Rubik. Both include Cyrillic.
   CSS font stacks remain usable when web fonts are unavailable.
   ============================================================ */
:root{
  --font-ui:'Rubik','Trebuchet MS',Arial,sans-serif;
  --font-display:'Shantell Sans','Rubik','Trebuchet MS',sans-serif;
  --ink-strong:#123f55;
  --ink-readable:#406876;
}
html{font-synthesis:none}
body,button{font-family:var(--font-ui)}
body{font-size:16px;line-height:1.45;color:var(--ink-strong);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{letter-spacing:-.012em}
button:focus-visible{outline:3px solid #f4b742;outline-offset:4px}

/* Characterful display faces — these are deliberately selective. */
.headline-text h1,.menu-hero h1,.menu-section-heading h2,.album-head h2,
.award-modal h2,.series-complete-card h2,.final-card h2{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;text-wrap:balance;
}
.headline-text h1{font-size:clamp(29px,3.4vw,40px);line-height:1.17;color:#124a61;margin:4px 0 6px}
.headline-text p{font-size:15px;font-weight:500;line-height:1.45;color:#557b84}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.3px;color:#158b84}
.completion-pill{padding:11px 17px;border:1px solid #c9eadd}
.completion-pill strong{font-family:var(--font-display);font-size:27px;font-weight:800}
.completion-pill span{font-size:12px;font-weight:700}
.brand strong{font-family:var(--font-display);font-size:17px;font-weight:800;letter-spacing:-.025em}
.brand small{font-size:12px;font-weight:500;color:#597e84}
.badge-trigger span{font-size:13px}

/* Series screen: larger, calmer, more confident hierarchy. */
.menu-topline{font-size:14px;font-weight:700;letter-spacing:.01em}
.menu-album{font-size:15px;font-weight:700;min-height:47px;border-radius:15px}
.menu-hero h1{font-size:clamp(29px,3.7vw,45px);line-height:1.13}
.menu-hero p{font-size:16px;font-weight:500;line-height:1.6;color:var(--ink-readable)}
.menu-progress-total{font-size:15px;font-weight:600;gap:9px}
.menu-progress-total strong{font-family:var(--font-display);font-size:23px;font-weight:800}
.menu-continue{font-family:var(--font-ui);font-size:17px;font-weight:800;letter-spacing:-.025em;min-height:56px}
.menu-section-heading h2{font-size:clamp(22px,2.3vw,27px);line-height:1.24}
.menu-section-heading span{font-size:14px;font-weight:500;color:#577d83}
.series-card{border-color:#d3e9e2;padding:14px;border-radius:22px}
.series-details strong{font-family:var(--font-display);font-size:19px;font-weight:800;letter-spacing:-.025em;line-height:1.18}
.series-desc{font-size:14px;font-weight:500;line-height:1.38;color:#527882;min-height:0}
.difficulty-tag{font-size:13px;font-weight:700;padding:6px 11px}
.series-number{font-size:15px;font-weight:800}
.menu-legend{font-size:14px;font-weight:700;gap:17px}

/* Work area: important instructions must not be tiny metadata. */
.back-to-menu{font-size:15px;font-weight:700;min-height:44px;padding:10px 16px}
.task-heading{font-size:16px;font-weight:700;color:#164b60}
.reset-button{font-size:17px;font-weight:800;min-height:62px;border-radius:17px;padding:9px 19px;gap:10px;letter-spacing:-.025em}
.reset-button svg{width:57px;height:40px}

/* Modes are the primary interaction: bigger type, proper contrast. */
.mode-controls-heading{font-family:var(--font-display);font-size:18px;font-weight:700;color:#175169;gap:14px;margin:9px auto 13px}
.mode-help-button{font-family:var(--font-ui);font-size:15px;font-weight:700;min-height:43px;padding:9px 17px;color:#116c69;background:#f1fdf7;border:2px solid #9cdbc9}
.mode-bar{width:min(790px,100%);background:transparent;border:0;padding:2px;gap:13px;margin:0 auto 17px}
.mode-button{
  min-width:0;min-height:93px;padding:14px 20px;gap:11px;
  background:#f7fcfb;border:2px solid #d2e7e4;border-radius:21px;
  text-align:left;box-shadow:0 5px 12px #184a5209;
  transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.mode-button .mode-emoji{font-size:35px;margin:0;line-height:1.08;flex-shrink:0}
.mode-button span:last-child{gap:6px;min-width:0;align-items:flex-start}
.mode-button strong{font-size:19px;font-weight:800;line-height:1.2;letter-spacing:-.028em;color:#204e5c}
.mode-button small{font-size:14px;font-weight:500;line-height:1.35;color:#4c7882}
.mode-button.active{background:linear-gradient(155deg,#ffffff 10%,#eafff5);border-color:#28b8a1;box-shadow:0 4px 0 #c0ece0,0 8px 20px #107b6d1d}
.mode-button.active strong{color:#087e71}
.mode-button.coach-highlight{outline-offset:3px}

/* Two-stage, readable onboarding without paragraphs of small print. */
.mode-coach{max-width:830px;gap:18px;padding:17px 21px;border-radius:23px;margin:0 auto 22px}
.coach-illustration{flex-basis:72px;height:72px;border-radius:23px}
.coach-icon{font-size:39px}
.coach-step{font-size:12px;font-weight:800;letter-spacing:1.2px;color:#93692a;margin-bottom:5px}
.coach-copy strong{font-family:var(--font-display);font-size:25px;font-weight:800;letter-spacing:-.025em;line-height:1.2}
.coach-copy p{font-size:16px;line-height:1.48;font-weight:500;color:#456a73;margin-top:5px}
.coach-actions{min-width:172px;gap:10px}
.coach-actions button{font-size:15px;font-weight:800;min-height:50px;border-radius:14px;padding:10px 15px}
.coach-skip{color:#716452}

/* Draw labels and feedback: readable even at arm's length. */
.panel-header{font-size:16px;font-weight:700;padding:12px 16px 2px;gap:9px;color:#1d5162}
.panel-header strong{font-weight:800}
.panel-number{font-size:12px;font-weight:800;padding:4px 7px}
.panel-note{font-size:13px;font-weight:500;color:#527b83}
.primary-mini{font-size:17px;font-weight:800;min-height:47px;border-radius:14px;padding:12px 20px}
.memory-instruction{font-size:14px;font-weight:500;line-height:1.45}
.memory-hidden-card strong{font-family:var(--font-display);font-size:21px;font-weight:700}
.memory-hidden-card p{font-size:15px;font-weight:500}
.memory-hidden-card button{font-size:15px;font-weight:700;min-height:45px}
.draw-locked strong{font-size:18px;font-weight:800;line-height:1.3;padding:0 12px}
.draw-locked small{font-size:14px;font-weight:500}
.speech-bubble{font-size:16px;font-weight:700;line-height:1.45;min-height:51px;padding:11px 16px}
.task-message{font-size:14px;line-height:1.4;font-weight:500;min-height:20px;color:#577984}
.nav-button{font-size:15px;font-weight:700;min-height:50px}
.next-button{font-size:17px;font-weight:800;min-height:63px;letter-spacing:-.02em}
.task-jump{font-size:13px;font-weight:700}
.footer{font-size:14px;font-weight:500}
.footer button{font-size:14px;font-weight:600}

/* Achievement album and special ceremony typography. */
.album-head h2{font-size:31px;line-height:1.2}
.album-head h2 span{font-size:20px}
.album-lead{font-size:15px;line-height:1.45;font-weight:500;color:#557b83}
.album-item h3{font-family:var(--font-display);font-size:18px;line-height:1.18;font-weight:800}
.album-item p{font-size:13px;line-height:1.36;font-weight:500;min-height:0}
.album-item .badge-status{font-size:12px;font-weight:700}
.award-kicker{font-size:clamp(15px,2.4vw,19px);font-weight:800;letter-spacing:.065em}
.award-modal h2{font-size:clamp(28px,5vw,39px);line-height:1.2}
.award-modal p{font-size:18px;font-weight:600;line-height:1.4}
.award-footer{font-size:15px;font-weight:700;padding:10px 14px}
.award-dismiss{font-size:13px;font-weight:600}
.series-celebrate-kicker,.final-kicker{font-size:13px;font-weight:800;letter-spacing:1.4px}
.series-complete-card h2{font-size:clamp(27px,4.5vw,39px);line-height:1.2}
.series-complete-card p{font-size:17px;line-height:1.45;font-weight:600}
.series-next-panel>span{font-size:12px;font-weight:700}
.series-next-panel strong{font-family:var(--font-display);font-size:23px;font-weight:800}
.series-difficulty{font-size:14px;font-weight:700}
.series-complete-actions button{font-size:16px;font-weight:800;min-height:54px}
.series-auto-label{font-size:13px;font-weight:500}
.final-card h2{font-size:clamp(27px,4.3vw,40px)}
.final-card p{font-size:17px;font-weight:600}
.final-card strong{font-family:var(--font-display);font-size:32px;font-weight:800}
.final-buttons button{font-size:17px;font-weight:800}

@media(max-width:699px){
  .menu-topline{font-size:12px;letter-spacing:0}
  .menu-album{font-size:13px;min-height:44px;padding:9px 11px}
  .menu-hero{min-height:210px}
  .menu-hero-text{padding-right:92px}
  .menu-hero h1{font-size:clamp(24px,6.4vw,31px)}
  .menu-hero p{font-size:13px;line-height:1.46}
  .menu-progress-total{font-size:12px;gap:5px}
  .menu-progress-total strong{font-size:19px}
  .menu-continue{font-size:14px;min-height:49px;padding:10px 12px}
  .menu-section-heading h2{font-size:21px}
  .menu-section-heading span{font-size:13px}
  .series-card{padding:11px;gap:12px}
  .series-details strong{font-size:17px}
  .series-desc{font-size:13px}
  .difficulty-tag{font-size:12px}
  .series-number{font-size:13px}
  .menu-legend{font-size:12px}
  .brand strong{font-size:14px}
  .brand small{font-size:10px}
  .badge-trigger span{font-size:11px}
  .headline-text h1{font-size:clamp(24px,6.25vw,32px)}
  .headline-text p{font-size:13px}
  .eyebrow{font-size:10px}
  .completion-pill strong{font-size:21px}
  .completion-pill span{font-size:10px}
  .task-heading{font-size:14px;line-height:1.3}
  .back-to-menu{font-size:14px}
  .reset-button{font-size:14px;min-height:56px;padding:6px 11px;gap:5px}
  .reset-button svg{width:43px;height:36px}
  .mode-controls-heading{font-size:16px;gap:9px;line-height:1.3;margin:11px auto 11px}
  .mode-help-button{font-size:13px;min-height:40px;padding:7px 12px}
  .mode-bar{gap:8px;margin:0 auto 14px;padding:0;width:100%}
  .mode-button{min-height:113px;padding:10px 6px;gap:6px;flex-direction:column;text-align:center;border-radius:18px}
  .mode-button .mode-emoji{font-size:27px;margin:0}
  .mode-button span:last-child{align-items:center;gap:4px;width:100%}
  .mode-button strong{font-size:clamp(14px,3.8vw,17px);line-height:1.19;text-wrap:balance}
  .mode-button small{font-size:clamp(11.5px,3.1vw,13px);line-height:1.2;text-wrap:balance}
  .mode-button.coach-highlight:after{top:-31px;font-size:23px}
  .mode-coach{gap:11px;padding:13px 13px;margin-bottom:15px}
  .coach-illustration{flex-basis:52px;height:52px;border-radius:15px}
  .coach-icon{font-size:28px}
  .coach-step{font-size:10.5px;margin-bottom:4px}
  .coach-copy strong{font-size:20px}
  .coach-copy p{font-size:14px;line-height:1.37}
  .coach-actions{flex:1 0 100%;flex-direction:row;gap:9px;min-width:0}
  .coach-actions button{flex:1;font-size:14px;min-height:46px}
  .panel-header{font-size:14px;padding:9px 11px 1px;gap:7px}
  .panel-number{font-size:11px;padding:3px 6px}
  .panel-note{font-size:11px}
  .primary-mini{font-size:15px;min-height:43px}
  .memory-instruction{font-size:12px}
  .memory-hidden-card strong{font-size:17px}
  .memory-hidden-card p{font-size:13px}
  .memory-hidden-card button{font-size:13px}
  .draw-locked strong{font-size:15px}
  .draw-locked small{font-size:12.5px}
  .speech-bubble{font-size:14px;min-height:45px;padding:8px 11px}
  .task-message{font-size:12.5px}
  .nav-button{font-size:12.5px;min-height:45px}
  .next-button{font-size:14px;min-height:56px}
  .task-jump{font-size:12px}
  .footer{font-size:12px}
  .footer button{font-size:12px}
  .album-head h2{font-size:25px}
  .album-head h2 span{font-size:17px}
  .album-lead{font-size:13px}
  .album-item h3{font-size:16px}
  .album-item p{font-size:12px}
  .award-modal h2{font-size:clamp(25px,6.2vw,33px)}
  .award-modal p{font-size:15px}
  .award-footer{font-size:13px}
  .series-celebrate-kicker,.final-kicker{font-size:11px}
  .series-complete-card h2{font-size:clamp(23px,5.7vw,29px)}
  .series-complete-card p{font-size:14px}
  .series-next-panel>span{font-size:11px}
  .series-next-panel strong{font-size:18px}
  .series-difficulty{font-size:12px}
  .series-complete-actions button{font-size:13px;min-height:47px}
  .series-auto-label{font-size:12px}
  .final-card h2{font-size:25px}
  .final-card p{font-size:14px}
  .final-buttons button{font-size:14px}
}
@media(max-width:359px){
  .mode-button{padding:9px 3px;min-height:116px}
  .mode-button strong{font-size:14px}
  .mode-button small{font-size:11.5px}
  .mode-controls-heading{font-size:14px}
  .mode-help-button{font-size:12px}
  .reset-button span{font-size:13px}
  .menu-hero-text{padding-right:75px}
  .menu-hero h1{font-size:23px}
  .menu-hero p{font-size:12px}
  .series-details strong{font-size:16px}
  .series-desc{font-size:12px}
  .coach-copy strong{font-size:18px}
  .coach-copy p{font-size:13px}
  .task-heading{font-size:13px}
}

/* ================================================================
   v1.5 — full-viewport, height-aware responsive GAME layout.
   Keep each drawing in its own independent SVG coordinate system.
   All layout changes are CSS only; no game data or pointer code changed.
   ================================================================ */
:root{--game-gap:clamp(7px,1.05vmin,16px)}
/* The art IS the cover: no artificial max-width or letterboxing. */
.cover{width:100%;width:100vw;height:100vh;height:100dvh;min-height:0;overflow:hidden}
.cover:before{display:none}
.cover-button{display:block;width:100%;height:100%;max-width:none;max-height:none;box-shadow:none;overflow:hidden;line-height:0}
.cover-button picture,.cover-button img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center center}
.cover-hint{right:12px;bottom:12px;font-size:clamp(11px,1.4vmin,14px);background:#173a56dc}
html:has(#app:not(.hidden)),body:has(#app:not(.hidden)){height:100%;overflow:hidden}
#app:not(.hidden){height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
#app .topbar{width:100%;max-width:none;flex:0 0 auto;height:54px;padding:7px clamp(12px,1.65vw,28px)}
#app .main{width:100%;max-width:none;min-height:0;flex:1;display:flex;flex-direction:column;padding:0 clamp(10px,1.45vw,26px) 8px;overflow:hidden}
#app .headline-row{flex:0 0 auto;min-height:51px;margin:0 0 6px;gap:10px}
#app .headline-text .eyebrow,#app .headline-text p{display:none}
#app .headline-text h1{font-size:clamp(22px,2.15vw,32px);line-height:1.08;margin:0}
#app .completion-pill{padding:6px 12px;min-width:88px;border-radius:15px}
#app .completion-pill strong{font-size:clamp(19px,1.75vw,26px)}
#app .completion-pill span{font-size:11px}
#app .workspace{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:0;width:100%;padding:9px clamp(10px,1.5vw,22px) 9px;border-radius:21px;overflow:hidden}
#app .back-to-menu{flex:0 0 auto;align-self:flex-start;min-height:31px;padding:4px 12px;margin:0 0 3px;font-size:13px;line-height:1.2}
#app .workspace-top{flex:0 0 auto;margin:0 0 2px;min-height:44px}
#app .task-heading{font-size:clamp(13px,1.1vw,17px)}
#app .reset-button{min-height:43px;padding:3px 12px;font-size:clamp(13px,1.02vw,16px);gap:5px;border-radius:13px}
#app .reset-button svg{width:43px;height:32px}
#app .mode-controls-heading{flex:0 0 auto;margin:0 0 4px;font-size:clamp(13px,1.15vw,16px);gap:11px}
#app .mode-help-button{min-height:29px;padding:3px 11px;font-size:13px}
#app .mode-bar{flex:0 0 auto;width:min(840px,100%);min-height:0;margin:0 auto 7px;gap:9px;padding:0}
#app .mode-button{min-height:53px;border-radius:15px;padding:5px 13px;flex-direction:row;gap:8px}
#app .mode-button .mode-emoji{font-size:25px}
#app .mode-button span:last-child{gap:1px;align-items:flex-start}
#app .mode-button strong{font-size:clamp(14px,1.15vw,17px);line-height:1.1}
#app .mode-button small{font-size:clamp(11px,.85vw,13px);line-height:1.1}
/* Coach is a non-layout, closeable panel: never pushes drawing offscreen. */
#app .mode-coach{position:absolute;z-index:10;left:50%;top:clamp(128px,22vh,185px);transform:translateX(-50%);width:min(830px,calc(100% - 30px));max-height:min(46dvh,380px);overflow:auto;margin:0;box-shadow:0 14px 65px #18495e62}
#app .play-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(180px,.53fr);gap:var(--game-gap);min-height:0;flex:1 1 auto;align-items:stretch;width:100%;margin:0 auto}
#app .boards-grid{display:contents}
#app .board-panel{height:100%;min-height:0;display:flex;flex-direction:column;border-radius:19px;overflow:hidden}
#app .panel-header{flex:0 0 auto;min-height:35px;padding:7px clamp(8px,.9vw,13px) 2px;font-size:clamp(12px,1vw,16px)}
#app .panel-note{font-size:clamp(10px,.8vw,12px)}
#app .reference-slot,#app .draw-holder{flex:1 1 auto;min-height:0;height:100%;width:100%;padding:2px 8px 5px;overflow:hidden}
#app .pattern-svg,#app .reference-slot .pattern-svg,#app .draw-holder .pattern-svg{width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;aspect-ratio:auto;flex:1 1 auto}
#app .memory-controls{flex:0 0 auto;padding:0 8px 5px}
#app .memory-controls .memory-instruction{display:none}
#app .memory-controls .primary-mini{min-height:34px;padding:5px 12px;font-size:clamp(12px,1vw,15px)}
#app .memory-hidden-card{height:100%;min-height:0;width:100%;gap:6px;padding:4px}
#app .memory-hidden-card .memory-art{width:55px;height:55px;font-size:27px}
#app .memory-hidden-card p{font-size:clamp(11px,1vw,14px)}
#app .feedback-row{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:5px;width:100%;max-width:none;min-width:0;height:100%;margin:0;padding:10px 7px;border:1px solid #e3eee9;border-radius:19px;background:linear-gradient(165deg,#fffef7,#eefaf3);overflow:hidden}
#app .feedback-character{display:block;align-self:center;width:100%;max-width:210px;min-height:0;height:min(55%,300px);object-fit:contain;object-position:center bottom}
#app .bubble-wrap{flex:0 1 auto;width:100%;min-width:0;min-height:0}
#app .speech-bubble{font-size:clamp(13px,1.05vw,17px);line-height:1.3;min-height:46px;padding:9px 8px;overflow-wrap:anywhere}
#app .speech-bubble:before{display:none}
#app .task-message{font-size:clamp(11px,.8vw,13px);line-height:1.25;min-height:0;margin-top:4px}
#app .bottom-row{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:56px;width:100%;max-width:none;margin:7px 0 0}
#app .nav-button{min-height:44px;font-size:clamp(12px,1vw,15px);padding:8px 14px}
#app .next-button{min-height:51px;padding:5px 13px;font-size:clamp(13px,1.1vw,17px)}
#app .next-button svg{width:30px;height:30px}
#app .task-dots{gap:clamp(4px,.65vw,10px);flex-wrap:nowrap}
#app .task-jump{width:clamp(28px,2.35vw,36px);height:clamp(28px,2.35vw,36px);font-size:12px;flex-shrink:0}
#app .footer{display:none}
/* Collapsed desktop heights: preserve the play area. */
@media(min-width:700px) and (max-height:810px){
 #app .topbar{height:44px;padding-top:3px;padding-bottom:3px}
 #app .brand-mark{height:35px;width:35px}
 #app .headline-row{min-height:43px;margin-bottom:3px}
 #app .headline-text h1{font-size:clamp(21px,2vw,27px)}
 #app .back-to-menu{min-height:27px;padding:3px 10px;margin:0}
 #app .workspace-top{min-height:39px}
 #app .reset-button{min-height:38px}
 #app .mode-controls-heading{font-size:14px}
 #app .mode-bar{margin-bottom:5px}
 #app .mode-button{min-height:46px;padding:3px 10px}
 #app .mode-button .mode-emoji{font-size:21px}
 #app .bottom-row{min-height:47px;margin-top:4px}
 #app .next-button{min-height:44px}
 #app .nav-button{min-height:38px}
 #app .panel-header{min-height:31px;padding-top:4px}
 #app .feedback-row{padding:5px}
 #app .feedback-character{height:min(51%,220px)}
}
@media (min-width:700px) and (max-width:970px){
 #app .play-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(145px,.45fr)}
 #app .feedback-character{height:min(52%,180px)}
}
/* Portrait mobile: sample above a larger finger-drawing canvas. */
@media(max-width:699px){
 .cover-button img{object-position:center center}
 .cover-hint{font-size:11px;bottom:8px;right:8px}
 #app .topbar{height:43px;padding:4px 9px}
 #app .brand-mark{width:30px;height:30px;font-size:19px}
 #app .brand strong{font-size:12px}
 #app .brand small{display:none}
 #app .topbar-actions{gap:5px}
 #app .tool-button{min-height:34px;min-width:35px;padding:2px 6px}
 #app .badge-trigger{font-size:12px}
 #app .main{padding:0 5px 4px}
 #app .headline-row{min-height:36px;margin:0 4px 3px}
 #app .headline-text h1{font-size:clamp(18px,5.1vw,24px);margin:0}
 #app .completion-pill{padding:3px 6px;min-width:65px;border-radius:12px}
 #app .completion-pill strong{font-size:16px}
 #app .completion-pill span{font-size:9px;margin:0}
 #app .workspace{border-radius:14px;padding:4px 6px 5px}
 #app .back-to-menu{min-height:26px;padding:2px 8px;font-size:12px;margin:0}
 #app .workspace-top{min-height:33px;margin:0}
 #app .task-heading{font-size:clamp(11px,3vw,13px)}
 #app .reset-button{min-height:32px;font-size:clamp(11px,2.8vw,13px);padding:0 7px;gap:2px;border-radius:9px}
 #app .reset-button svg{width:31px;height:26px}
 #app .mode-controls-heading{min-height:22px;margin:0 0 2px;font-size:13px;gap:7px}
 #app .mode-help-button{min-height:22px;padding:2px 8px;font-size:11px;border-width:1px}
 #app .mode-bar{min-height:0;width:100%;gap:5px;margin:0 0 5px}
 #app .mode-button{flex-direction:row;text-align:left;min-height:46px;padding:4px 6px;gap:5px;border-radius:11px;border-width:1.5px}
 #app .mode-button span:last-child{align-items:flex-start;gap:1px}
 #app .mode-button .mode-emoji{font-size:20px}
 #app .mode-button strong{font-size:clamp(10.5px,3.15vw,14px);line-height:1.1}
 #app .mode-button small{font-size:clamp(9px,2.45vw,11px);line-height:1.13}
 #app .play-stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(100px, 0.52fr) minmax(155px, 1fr) minmax(40px,auto);gap:5px;min-height:0;flex:1 1 auto}
 #app .boards-grid{display:contents}
 #app .board-panel{border-radius:12px}
 #app .panel-header{min-height:24px;padding:3px 7px 1px;font-size:12px;gap:4px}
 #app .panel-number{font-size:10px;padding:2px 4px}
 #app .panel-note{font-size:10px}
 #app .reference-slot,#app .draw-holder{min-height:0;height:100%;padding:0 3px 2px;overflow:hidden}
 #app .reference-slot .pattern-svg,#app .draw-holder .pattern-svg{height:100%;width:100%;max-height:100%;max-width:100%}
 #app .reference-panel .memory-controls{position:absolute;bottom:3px;right:5px;padding:0;z-index:2}
 #app .memory-controls .primary-mini{font-size:10px;padding:2px 7px;min-height:27px}
 #app .memory-hidden-card{gap:2px;padding:3px}
 #app .memory-hidden-card .memory-art{width:27px;height:27px;font-size:16px;border-radius:9px}
 #app .memory-hidden-card strong{font-size:12px;line-height:1.1}
 #app .memory-hidden-card p{display:none}
 #app .memory-hidden-card button{font-size:11px;padding:4px 8px;min-height:25px}
 #app .draw-locked{gap:4px}
 #app .draw-locked span{font-size:24px}
 #app .draw-locked strong{font-size:12px}
 #app .draw-locked small{font-size:10px}
 #app .feedback-row{width:100%;height:auto;min-height:40px;padding:1px 7px;margin:0;display:flex;flex-direction:row;gap:7px;align-items:center;justify-content:center;border-radius:10px}
 #app .feedback-character{height:40px;width:37px;max-width:none;align-self:center;object-fit:contain}
 #app .bubble-wrap{flex:1;min-width:0}
 #app .speech-bubble{font-size:clamp(11px,2.8vw,13px);min-height:31px;padding:3px 6px;border-radius:8px;line-height:1.15}
 #app .task-message{display:none}
 #app .bottom-row{min-height:41px;margin:4px 0 0;gap:3px;flex-wrap:nowrap}
 #app .bottom-row .nav-button{min-height:37px;padding:4px 5px;font-size:11px;white-space:normal;line-height:1.05}
 #app .bottom-row .next-button{min-height:39px;font-size:11px;max-width:124px;gap:2px;padding:3px 6px;white-space:normal}
 #app .next-button svg{width:22px;height:22px}
 #app .task-dots{order:unset;flex:0 1 auto;gap:3px;flex-wrap:nowrap;min-width:0;margin:0}
 #app .task-jump{width:clamp(20px,5.2vw,28px);height:clamp(20px,5.2vw,28px);font-size:10px}
 #app .mode-coach{position:absolute;left:50%;top:clamp(107px,19dvh,145px);width:calc(100% - 12px);max-height:55dvh;padding:9px;border-radius:13px;gap:8px}
 #app .mode-coach .coach-copy p{font-size:13px}
 #app .mode-coach .coach-copy strong{font-size:17px}
 #app .mode-coach .coach-actions button{min-height:38px}
}
@media(max-width:699px) and (max-height:690px){
 #app .topbar{height:34px}
 #app .brand-mark{width:27px;height:27px}
 #app .headline-row{min-height:28px}
 #app .headline-text h1{font-size:18px}
 #app .workspace-top{min-height:29px}
 #app .mode-controls-heading{min-height:19px;font-size:11px}
 #app .mode-bar{margin-bottom:3px}
 #app .mode-button{min-height:38px;padding:2px 5px}
 #app .mode-button .mode-emoji{font-size:17px}
 #app .mode-button strong{font-size:11px}
 #app .mode-button small{font-size:9px}
 #app .play-stage{grid-template-rows:minmax(70px,.46fr) minmax(125px,1fr) minmax(34px,auto);gap:3px}
 #app .panel-header{min-height:20px;font-size:11px}
 #app .feedback-row{min-height:34px}
 #app .feedback-character{height:33px;width:30px}
 #app .bottom-row{min-height:35px;margin-top:2px}
 #app .bottom-row .nav-button{min-height:33px}
 #app .bottom-row .next-button{min-height:33px}
}
@media(max-width:699px) and (max-height:520px){
 #app .headline-row{display:none}
 #app .mode-controls-heading{display:none}
 #app .back-to-menu{min-height:22px}
 #app .workspace-top{min-height:27px}
 #app .reset-button{min-height:27px}
 #app .mode-button{min-height:35px}
 #app .feedback-character{display:none}
 #app .play-stage{grid-template-rows:minmax(60px,.29fr) minmax(102px,1fr) minmax(28px,auto)}
}
@media(min-width:700px) and (max-height:550px){
 #app .headline-row{display:none}
 #app .topbar{height:38px}
 #app .mode-controls-heading{display:none}
 #app .mode-button{min-height:39px}
 #app .back-to-menu{display:none}
 #app .play-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(130px,.42fr)}
}
/* For unusual screen proportions, preserve the complete cover artwork while
   filling the remaining viewport with its own softly extended colors. */
.cover:before{display:block;inset:-28px;filter:blur(24px) saturate(1.12);opacity:.8;background:url("assets/covers/desktop.webp") center/cover no-repeat}
.cover-button picture,.cover-button img{object-fit:contain}
@media(max-width:699px){.cover:before{background-image:url("assets/covers/mobile.webp");filter:blur(22px) saturate(1.1);opacity:.88}}
/* A portrait tablet benefits from the same top-to-bottom drawing flow as a phone. */
@media(min-width:700px) and (max-width:900px) and (orientation:portrait){
 #app .main{padding:0 13px 7px}
 #app .workspace{padding:8px 13px 9px}
 #app .play-stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(170px,.44fr) minmax(260px,1fr) 65px;gap:7px}
 #app .boards-grid{display:contents}
 #app .reference-slot,#app .draw-holder{min-height:0;height:100%}
 #app .feedback-row{height:65px;min-height:65px;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:4px 15px;gap:13px;margin:0}
 #app .feedback-character{height:55px;width:62px;max-width:none;align-self:center}
 #app .bubble-wrap{flex:1}
 #app .speech-bubble{font-size:15px;min-height:42px}
 #app .task-message{display:none}
 #app .panel-header{min-height:26px;padding:4px 12px 1px}
 #app .mode-bar{margin-bottom:8px}
 #app .mode-button{min-height:49px}
 #app .mode-coach{top:15%;max-height:47dvh}
}


/* ================================================================
   v1.6 — desktop fullscreen cover + no-scroll desktop series menu.
   Keeps mobile behaviour intact while making ПК screens feel like a
   finished full-screen game instead of a centered poster.
   ================================================================ */

/* --- COVER --- */
.cover{width:100vw;height:100vh;height:100dvh;min-height:0;padding:0;background:#dff7f3;overflow:hidden}
.cover:before{display:none!important}
.cover-button{display:block;width:100%;height:100%;max-width:none;max-height:none;line-height:0;overflow:hidden;background:transparent;box-shadow:none}
.cover-button picture,.cover-button img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center center}
.cover-hint{display:none!important}

/* --- SERIES MENU: full desktop screen without scrolling on standard monitors --- */
html:has(#seriesMenu:not(.hidden)),body:has(#seriesMenu:not(.hidden)){height:100%;overflow:hidden}
#seriesMenu:not(.hidden){height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
.series-menu{padding:12px clamp(14px,1.8vw,28px) 14px;background:linear-gradient(135deg,#fff8de 0%,#eafcf8 46%,#d9f8f7 100%)}
.menu-shell{width:min(1340px,100%);height:100%;min-height:0;margin:0 auto;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:10px}
.menu-topline{font-size:13px}
.menu-album{padding:10px 16px;min-height:40px}
.menu-hero{margin:0;min-height:170px;padding:18px 24px 16px;border-radius:26px}
.menu-hero-text{max-width:none;padding-right:145px}
.menu-hero h1{font-size:clamp(26px,2.8vw,38px);margin:4px 0 8px}
.menu-hero p{font-size:15px;line-height:1.48;margin:0 0 8px}
.menu-progress-total{margin:4px 0 10px}
.menu-progress-total strong{font-size:clamp(20px,1.8vw,28px)}
.menu-continue{min-height:48px;padding:10px 18px;font-size:15px;border-radius:16px}
.menu-mascot{width:150px;max-height:180px;right:18px;bottom:-8px}
.menu-section-heading{margin:0 2px;align-items:center}
.menu-section-heading h2{font-size:20px}
.menu-section-heading span{font-size:12px}
.series-grid{min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-content:start}
.series-card{padding:10px;gap:10px;border-radius:18px;min-height:0}
.series-left{width:78px;height:78px;border-radius:14px}
.series-details{gap:6px}
.series-details strong{font-size:15px;line-height:1.15}
.series-desc{font-size:10px;line-height:1.22;min-height:0}
.series-meta{gap:6px}
.difficulty-tag{font-size:10px;padding:4px 8px}
.series-number{font-size:12px}
.series-bar{height:6px}
.menu-legend{margin:0;padding-top:2px;gap:10px;font-size:11px}

/* 1366x768 and similar laptop screens */
@media (min-width:700px) and (max-height:860px){
  .series-menu{padding:10px clamp(12px,1.5vw,20px) 10px}
  .menu-shell{gap:8px}
  .menu-topline{font-size:12px}
  .menu-hero{min-height:146px;padding:14px 20px 12px;border-radius:22px}
  .menu-hero-text{padding-right:124px}
  .menu-hero h1{font-size:clamp(24px,2.5vw,33px);margin:2px 0 5px}
  .menu-hero p{font-size:13px;line-height:1.38;margin:0 0 6px}
  .menu-progress-total{font-size:11px;gap:6px;margin:2px 0 8px}
  .menu-progress-total strong{font-size:18px}
  .menu-continue{min-height:42px;padding:8px 15px;font-size:14px}
  .menu-mascot{width:126px;max-height:150px;bottom:-6px;right:14px}
  .menu-section-heading h2{font-size:18px}
  .menu-section-heading span{font-size:11px}
  .series-grid{gap:8px}
  .series-card{padding:8px;gap:8px;border-radius:16px}
  .series-left{width:64px;height:64px;border-radius:12px}
  .series-details{gap:5px}
  .series-details strong{font-size:13px}
  .series-desc{font-size:9px}
  .difficulty-tag{font-size:9px;padding:3px 7px}
  .series-number{font-size:11px}
  .series-bar{height:5px}
  .menu-legend{font-size:10px;gap:8px}
}

/* Three columns for narrower landscape tablets / small laptops. */
@media (min-width:700px) and (max-width:1099px){
  .menu-shell{width:min(1080px,100%)}
  .series-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Keep phone/tablet menu as vertical-scrolling cards. */
@media (max-width:699px){
  .series-menu{height:auto;min-height:100vh;min-height:100dvh;overflow:visible;padding:10px 12px 32px}
  .menu-shell{display:block;height:auto}
  .series-grid{grid-template-columns:1fr;gap:9px}
  .cover-button picture,.cover-button img{object-fit:cover;object-position:center center}
}