/* Illustrated garden + tactile postcards, shared by every menu. */
:root{--ui-ink:#283c43;--ui-muted:#485e62;--ui-paper:#fffbee;--ui-line:#cfbea0;--ui-purple:#176a68;--ui-night:#253e49;--ui-backdrop:linear-gradient(#fff9e522,#fff9e555),url('../assets/ui/storybook-garden.webp') center/cover}
#menu>.vista::after,#loading>.vista::after{display:none}
#menu h1{background:#a92e57;border:3px solid #ffedba;border-radius:12px 28px 12px 28px;padding:7px 30px;box-shadow:0 4px 0 #772b42,0 9px 18px #49392726;transform:rotate(-1deg)}
#menu h1.ck .lt{color:#fffbee;text-shadow:0 2px 0 #70213c}
#menu .paper{border-color:#c6ab7f;box-shadow:0 5px 0 #bfa77d,0 12px 24px #49392725}
#menu .pick.sel{border-color:#9c6611;background:#fff1b3;box-shadow:0 4px 0 #a66d21,0 0 0 3px #ffda64;transform:translateY(-3px) rotate(-1deg)}
#menu .menu-primary{background:#176a68;border-color:#176a68;box-shadow:0 4px 0 #114748}
#menu .menu-path,#menu .hint,#menu .chosen,#menu .start-badge{background:#fffbeeeb;border-radius:99px;padding:5px 14px}
#menu .modes.four{grid-template-columns:repeat(3,minmax(0,1fr));width:min(90vw,1120px);gap:clamp(10px,2vh,20px)}
#menu .modes.four .mode{padding:clamp(10px,2vh,22px);gap:6px 12px;border-top-width:5px}
#menu .modes.four .mode .icon{width:clamp(48px,10vh,90px);height:clamp(48px,10vh,90px);border-radius:50%}
#menu .modes.four .mode .title{font-size:clamp(15px,2.6vh,25px)}
#menu .modes.four .mode .blurb{font-size:clamp(11px,1.7vh,15px)}
#menu .mode:nth-child(5){--mode-accent:#176a68;--mode-tint:#d5eee2}
#menu .mode:nth-child(6){--mode-accent:#a92e57;--mode-tint:#ffe0e5}
#menu .course{padding:8px 8px 12px;gap:8px;border-radius:16px;position:relative}
#menu .course .thumb{aspect-ratio:16/9;height:auto;width:100%;border-radius:9px}
#menu .course.sel::after{content:'★';position:absolute;right:-10px;top:-12px;color:#ffd458;font-size:32px;filter:drop-shadow(0 2px 0 #885a15);transform:rotate(12deg)}
#menu.start-screen .game-title{color:#a92e57;text-shadow:0 3px #fffbee,0 6px #f3ce8c}
#menu.start-screen .game-title span{color:#174f55}
#menu .racer-hero{background:radial-gradient(ellipse,#fffbee 0 35%,#fffbee00 70%)}
@media(orientation:portrait){#menu .modes.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#menu .modes.four .mode{display:flex;text-align:center;align-items:center;padding:12px 8px}#menu .modes.four .mode .blurb{text-align:center}#menu h1{padding:7px 16px}}
@media(max-height:450px) and (orientation:landscape){#menu h1{padding:3px 20px}#menu .modes.four{gap:10px}#menu .modes.four .mode{padding:8px;gap:3px 8px}#menu .modes.four .mode .icon{width:44px;height:44px}#menu .modes.four .mode .title{font-size:14px}#menu .modes.four .mode .blurb{font-size:11px}#menu .course{padding:5px 5px 7px;gap:4px}}
#menu h1 .ck .lt{color:#fffbee;text-shadow:0 2px 0 #70213c}
#menu.start-screen h1{background:#fffbeeeb;border:0;box-shadow:0 6px 0 #d8bf8d;padding:12px 28px;border-radius:30px;transform:rotate(-2deg)}
@media(orientation:portrait){#menu:not(.start-screen) h1{font-size:clamp(18px,5.5vw,30px);max-width:88vw;box-sizing:border-box}#menu .courses{gap:10px;width:92vw}#menu .course{padding:6px;gap:4px}#menu .course .thumb{max-height:11vh;object-fit:cover}#menu .course .title{font-size:13px}}
/* Reference-led composition: four illustrated activity postcards + a racer hero.
   Secondary activities sit below them, rather than competing as dashboard tiles. */
#menu.mode-select{background-image:linear-gradient(#fff8df11,#fff8df33),url('../assets/ui/storybook-garden.webp');background-position:center;background-size:cover}
#menu.mode-select::before{content:'';position:absolute;inset:17% 28% 15% 1%;background:radial-gradient(ellipse,#fff6ddab,transparent 75%);pointer-events:none}
#menu.mode-select>.menu-path,#menu.course-select>.menu-path{display:none}
#menu.mode-select>h1{position:absolute;top:7%;left:10%;width:50%;margin:0;justify-content:center;box-sizing:border-box;font-size:clamp(24px,5vw,62px);padding:12px 18px;border-radius:35% 12% 28% 10% / 12% 30% 14% 30%;background:linear-gradient(165deg,#df496d,#af2350);border:3px solid #ffe9ad;box-shadow:0 6px 0 #852743,0 10px 18px #42332140;transform:rotate(-2deg)}
#menu.mode-select>h1 .flag,#menu.course-select>h1 .flag{display:block;width:clamp(25px,5vw,65px);height:auto;filter:drop-shadow(0 2px 0 #fff4)}
#menu.mode-select .modes.four{position:absolute;top:29%;left:4%;width:68%;height:46%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#menu.mode-select .modes.four .mode{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:8px 7px 15px;text-align:center;border:2px solid #c4a16d;border-radius:20px;background:linear-gradient(130deg,#fffef4,#ffefcf);box-shadow:inset 0 0 0 4px #fff9e6,0 6px 0 #bb9364,0 12px 12px #533f3428;transform:rotate(1deg)}
#menu.mode-select .modes.four .mode:nth-child(even){transform:rotate(-1deg)}
#menu.mode-select .modes.four .mode.sel{transform:translateY(-7px) rotate(-3deg);border-color:#d08b08;box-shadow:inset 0 0 0 3px #fffbe1,0 0 0 4px #ffd248,0 7px 0 #b68220,0 12px 18px #593f3b33}
#menu.mode-select .modes.four .mode.sel::after{content:'★';position:absolute;bottom:-24px;color:#ffdc47;font-size:46px;line-height:1;-webkit-text-stroke:2px #fff8cf;filter:drop-shadow(0 2px 1px #a87517)}
#menu.mode-select .modes.four .mode .icon{width:100%;height:auto;aspect-ratio:1;background:none;border-radius:0;max-height:none;flex:1;display:block;min-height:0}
.mode-art{width:100%;height:100%;aspect-ratio:1;background:url('../assets/ui/mode-illustrations.webp') var(--art-x) var(--art-y)/300% 200% no-repeat}
#menu.mode-select .modes.four .mode .title{align-self:center;font-size:clamp(14px,1.8vw,25px);line-height:1.1;color:#50301e;letter-spacing:-.03em;min-height:2.2em;display:flex;align-items:center;justify-content:center}
#menu.mode-select .modes.four .blurb{display:none}
#menu.mode-select .mode-hero{position:absolute;right:-2%;bottom:15%;width:36%;height:65%;pointer-events:none;display:flex;align-items:flex-end}
#menu.mode-select .mode-hero canvas{width:100%;height:auto;filter:drop-shadow(0 16px 6px #62482733)}
#menu.mode-select .mode-shortcuts{position:absolute;right:4%;bottom:7%;display:flex;gap:10px}
#menu.mode-select .mode-shortcuts .mode{display:flex;align-items:center;gap:8px;background:linear-gradient(#26a3a1,#137579);border:2px solid #0f6165;border-radius:99px;padding:6px 18px 6px 8px;color:#fff;box-shadow:inset 0 0 0 2px #a8e1d333,0 4px 0 #104a52;cursor:pointer}
#menu.mode-select .mode-shortcuts .icon{width:36px;height:36px;background:none;border:0;margin:0;box-shadow:none}.mode-shortcuts .blurb{display:none}#menu.mode-select .mode-shortcuts .title{font-size:16px;color:white;white-space:nowrap}#menu.mode-select .mode-shortcuts .sel{outline:3px solid #ffdb63;transform:translateY(-2px)}
#menu.mode-select>.hint{position:absolute;bottom:4%;left:20%;font-size:12px}#menu.mode-select>.back-button{left:3%;bottom:5%;background:#176a68;color:#fff;border:2px solid #0d565b;box-shadow:0 3px #10474e;padding:9px 18px;border-radius:99px}
#menu.mode-select>.cur1p{display:none}
#menu.course-select .courses{padding:14px;background:linear-gradient(100deg,#b7844e,#d7b47b 12%,#e7c99a 45%,#c79c65);border:5px solid #a57544;border-radius:24px;box-shadow:inset 0 0 0 3px #f3d39b,0 8px 0 #875d3d,0 15px 20px #53332440;box-sizing:border-box;width:min(92vw,1180px);gap:12px}
#menu.course-select .course{border:1px solid #bca17c;box-shadow:0 3px 3px #68482e44;border-radius:7px;background:#fff4db;padding:6px 6px 10px;gap:6px;transform:none}
#menu.course-select .course .title{text-align:center;font-size:clamp(12px,1.5vw,21px);color:#50301e;letter-spacing:-.02em}
#menu.course-select .course.sel{border-color:#bd7e12;box-shadow:0 0 0 3px #ffd34a,inset 0 0 0 2px white;transform:rotate(-1deg)}
#menu.course-select>h1{font-size:clamp(24px,3.6vw,46px);background:linear-gradient(165deg,#df496d,#af2350);margin:0;transform:rotate(-1deg);border-radius:20% 12% 25% 10% / 12% 30% 14% 30%;padding:9px 24px}
#menu.course-select .chosen{top:12px;font-size:11px}
@media(max-height:450px) and (orientation:landscape){#menu.mode-select .modes.four{top:28%;height:48%;gap:8px;left:3%;width:70%}#menu.mode-select .modes.four .mode{padding:4px 4px 9px;border-radius:12px}#menu.mode-select .modes.four .mode .title{font-size:13px}#menu.mode-select>h1{top:5%;font-size:30px;padding:6px}#menu.mode-select .modes.four .mode.sel::after{font-size:29px;bottom:-16px}#menu.mode-select .mode-shortcuts{bottom:6%;right:3%;gap:6px}#menu.mode-select .mode-shortcuts .mode{padding:4px 8px 4px 4px;gap:4px}#menu.mode-select .mode-shortcuts .icon{width:25px;height:25px}#menu.mode-select .mode-shortcuts .title{font-size:12px}#menu.mode-select>.hint{bottom:4%;left:20%;font-size:9px;padding:4px 6px}#menu.mode-select>.back-button{padding:6px 12px}#menu.course-select{padding-top:10px;gap:10px}#menu.course-select>h1{font-size:23px;padding:4px 12px}#menu.course-select>h1 .flag{width:26px}#menu.course-select .chosen{display:none}#menu.course-select .courses{padding:8px;gap:8px;width:92vw;border-width:3px}#menu.course-select .course{padding:4px;gap:4px}#menu.course-select .course .title{font-size:10px}#menu.course-select>.hint{font-size:10px;margin:0}}
@media(orientation:portrait){#menu.mode-select>h1{top:4%;left:6%;width:88%;font-size:32px;padding:10px}#menu.mode-select .mode-hero{right:15%;width:70%;height:27%;bottom:auto;top:11%}#menu.mode-select .modes.four{left:6%;top:37%;width:88%;height:43%;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#menu.mode-select .modes.four .mode{padding:4px 8px 9px;gap:0}#menu.mode-select .modes.four .mode .icon{width:75%;flex:1;min-height:0}#menu.mode-select .modes.four .mode .title{font-size:15px;min-height:1.1em}#menu.mode-select .modes.four .mode.sel::after{font-size:28px;bottom:-14px}#menu.mode-select .mode-shortcuts{bottom:10%;right:6%;left:6%;justify-content:center}#menu.mode-select .mode-shortcuts .mode{padding:5px 12px;gap:5px}#menu.mode-select .mode-shortcuts .title{font-size:14px}#menu.mode-select .mode-shortcuts .icon{width:28px;height:28px}#menu.mode-select>.hint{bottom:1%;left:25%;font-size:9px;padding:5px}#menu.mode-select>.back-button{bottom:1%;left:4%;font-size:12px}#menu.course-select .courses{padding:10px;gap:10px;border-width:3px}#menu.course-select>h1{font-size:21px;padding:8px 10px}#menu.course-select>h1 .flag{width:22px}#menu.course-select .chosen{position:relative!important;top:auto;right:auto}#menu.course-select .course .thumb{max-height:10vh}#menu.course-select .course .title{font-size:12px}}
#menu.mode-select .modes.four .mode .icon{flex:none;height:auto;max-width:min(100%,calc(46vh - 74px));aspect-ratio:1}
#menu.mode-select .mode-art{height:auto;aspect-ratio:1}
#menu.mode-select .modes.four .mode:last-child .mode-art{clip-path:inset(0 0 0 7%)}
#menu.mode-select .mode-hero{right:-12%;bottom:13%;width:60%;height:65%}
#menu.mode-select .mode-shortcuts .mode{flex-direction:row}
#menu.mode-select .mode-shortcuts .icon{image-rendering:auto;filter:none}
#menu.mode-select .mode-shortcuts .mode-art{image-rendering:auto;filter:none}
@media(orientation:portrait){#menu.mode-select .mode-hero{width:100%;right:0;top:9%;bottom:auto;height:29%}#menu.mode-select .modes.four .mode .icon{max-width:min(75%,calc(21vh - 37px))}}
#menu.mode-select>h1,#menu.course-select>h1{background-color:#af2350}
#menu.mode-select .modes.four .mode{background-color:#fff4db}
#menu.mode-select .mode-shortcuts .mode{background:linear-gradient(#187d7b,#116469);background-color:#116469}
#menu.mode-select .mode-hero{width:44%;right:-7%;bottom:13%}
#menu.mode-select .mode-hero canvas{max-width:100%;width:100%;height:auto}
#menu.mode-select .modes.four .mode:last-child .mode-art{clip-path:inset(0 0 0 12%)}
#menu.course-select .course .title{justify-content:center}
#menu.course-select .course .lbl{color:#50301e}
#menu.mode-select>h1 .flag,#menu.course-select>h1 .flag{display:none}
#menu.mode-select>h1::before,#menu.mode-select>h1::after,#menu.course-select>h1::before,#menu.course-select>h1::after{content:'★';color:#ffdc64;font-size:.55em;margin:0 .7em;text-shadow:0 3px #82312b}
@media(orientation:portrait){#menu.mode-select .mode-hero{width:90%;right:5%;bottom:auto;top:10%;height:27%;justify-content:center}#menu.mode-select .mode-hero canvas{width:auto;height:100%;max-width:100%}}
#menu.mode-select .mode-hero{width:28%;right:0;overflow:hidden}
#menu.mode-select .mode-hero canvas{position:absolute;left:-28%;bottom:0;width:155%;max-width:none;height:auto}
@media(orientation:portrait){#menu.mode-select .mode-hero{width:90%;right:5%;overflow:visible}#menu.mode-select .mode-hero canvas{position:static;width:auto;height:100%;max-width:100%}}
/* Material and composition polish: keep the scenery at the edges. */
:root{--ui-backdrop:radial-gradient(ellipse at 52% 48%,#fff7e7bb 0%,#fff7e766 42%,#fff7e700 78%),url('../assets/ui/storybook-garden.webp') center/cover}
#menu.mode-select{background-image:radial-gradient(ellipse at 53% 49%,#fff5e9c9 0%,#fff4e56b 40%,#fff5e900 75%),url('../assets/ui/storybook-garden.webp')}
#menu.mode-select .modes.four{height:43%;top:30%;gap:14px}
#menu.mode-select .modes.four .mode{justify-content:space-evenly;padding:5px 5px 12px;background-image:repeating-linear-gradient(8deg,#b7925320 0 .5px,transparent .5px 4px),radial-gradient(ellipse at 25% 15%,#fffef7,#ffedcb);border-color:#c4a16d;box-shadow:inset 0 0 0 3px #fff9e6,inset 0 -7px 12px #b8964220,0 6px 0 #bb9364,0 13px 16px #533f3440}
#menu.mode-select .modes.four .mode .icon{width:100%;max-width:min(100%,calc(43vh - 55px));transform:scale(1.1);transform-origin:50% 65%;margin-bottom:8px}
#menu.mode-select .modes.four .mode .title{min-height:1.3em;position:relative;z-index:1}
#menu.mode-select .mode-hero{right:1%;width:29%;height:57%;bottom:17%;overflow:visible;align-items:center;justify-content:center}
#menu.mode-select .mode-hero canvas{position:static;left:auto;bottom:auto;width:100%;height:auto;max-width:100%;filter:none;image-rendering:auto}
#menu.mode-select>h1,#menu.course-select>h1{isolation:isolate;overflow:visible;background-image:repeating-linear-gradient(90deg,#ffffff0b 0 1px,transparent 1px 4px),linear-gradient(165deg,#df496d,#af2350);box-shadow:inset 0 2px 2px #fff8, inset 0 -4px 5px #720c3344,0 6px 0 #852743,0 12px 18px #42332140}
.ribbon-tails{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ribbon-tails::before,.ribbon-tails::after{content:'';position:absolute;top:23%;bottom:-17%;width:9%;background:linear-gradient(145deg,#a82b50,#791f40);box-shadow:0 4px 4px #56312444}
.ribbon-tails::before{left:-6%;clip-path:polygon(0 0,100% 10%,100% 100%,0 92%,23% 47%)}
.ribbon-tails::after{right:-6%;clip-path:polygon(0 10%,100% 0,77% 47%,100% 92%,0 100%)}
#menu.course-select .courses{background-image:repeating-linear-gradient(2deg,#6d3c1622 0 1px,transparent 1px 6px),repeating-linear-gradient(0deg,transparent 0 61px,#784e2433 62px,#f7d5a94d 64px,transparent 66px),linear-gradient(100deg,#b7844e,#d7b47b 12%,#e7c99a 45%,#c79c65);border-radius:30px;box-shadow:inset 0 3px 4px #ffe4b6,inset 0 -5px 8px #71451d66,0 8px 0 #875d3d,0 17px 22px #53332444}
#menu.course-select .course{background-image:repeating-linear-gradient(8deg,#b7925316 0 .5px,transparent .5px 4px);box-shadow:inset 0 1px #fff,0 3px 4px #68482e55}
@media(max-height:450px) and (orientation:landscape){#menu.mode-select .modes.four{top:29%;height:46%;gap:9px}#menu.mode-select .modes.four .mode .icon{max-width:min(100%,calc(46vh - 43px));margin-bottom:3px;transform:scale(1.06)}#menu.mode-select .modes.four .mode .title{font-size:12px}#menu.mode-select .mode-hero{bottom:18%;height:58%}}
@media(orientation:portrait){#menu.mode-select .modes.four{top:37%;height:43%;gap:12px}#menu.mode-select .modes.four .mode .icon{max-width:min(84%,calc(21vh - 32px));margin-bottom:2px;transform:scale(1.06)}#menu.mode-select .mode-hero{top:11%;bottom:auto;right:12%;width:76%;height:25%}#menu.mode-select .mode-hero canvas{width:auto;height:100%;max-width:100%}}
/* Paper fibres stay subtle at handheld size. */
#menu.mode-select .modes.four .mode{background-image:repeating-linear-gradient(8deg,#b7925309 0 .5px,transparent .5px 4px),radial-gradient(ellipse at 25% 15%,#fffef7,#ffedcb)}
#menu.mode-select .mode-hero{align-items:flex-end;bottom:16%}