/* Home (the cards, the hero, the featured row) is the first section; the "who plays" page, the list pages, the Tournament and Boss fights pages and the level road's badges follow. app/homeModes.js builds the pages; index.html has the home. */ /* ========================================================================== HOME (OB8, 2026-11-03; planning/specs/2026-11-03-onboarding-redo.md section 11) One tall scrolling page of big cards. The top bar stays put; everything under it scrolls (#homeScroll): hero with the Play key, Featured (a swipeable row), Modes (big two-column picture cards), Solo and progress, With friends, and a footer. On a desktop the same sections stand side by side: Modes under the hero on the left, the rest on the right. Pictures are optional (app/cardArt.js): a card without one shows its icon on its own colour. The old fit-to-the-viewport home (lanes, rail, dock, per-size packing) is gone with this rewrite. Sizes checked by tests/home-modes-browser.js: 360x640, 390x844, 430x932, 844x390, 1280x720 -- nothing overlaps, nothing is cut off. ========================================================================== */ /* ---------- the page ---------- */ #menu .mx-screen[data-screen="home"]{gap:var(--sp-3)} #menu .appbar--home{padding-bottom:2px} #menu .home-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--sp-6);overflow-y:auto;overflow-x:hidden; -webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(179,197,232,.3) transparent; padding:2px 2px calc(var(--sp-5) + env(safe-area-inset-bottom))} #menu .home-col{display:flex;flex-direction:column;gap:var(--sp-6);min-width:0} #menu .home-sec{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0} #menu .sec-title{font:800 var(--fs-3)/1.1 var(--font-disp);letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);display:flex;align-items:center;gap:var(--sp-3)} #menu .sec-title::after{content:'';flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--line-hi),transparent)} /* ---------- the hero: the collision picture behind one huge key ---------- */ #menu .hero{position:relative;isolation:isolate;flex:0 0 auto;display:flex;align-items:flex-end;overflow:hidden;border-radius:var(--r-4); min-height:clamp(250px,40svh,400px);background:#0a1019; box-shadow:inset 0 0 0 1px rgba(179,197,232,.16),0 6px 0 var(--plate-edge),0 20px 40px rgba(0,0,0,.45)} #menu .hero-art{position:absolute;inset:0;z-index:-1;overflow:hidden} #menu .hero-art.no-art{background:radial-gradient(90% 80% at 30% 20%,rgba(255,103,65,.35),transparent 60%),radial-gradient(80% 80% at 80% 30%,rgba(73,203,234,.28),transparent 60%),linear-gradient(180deg,#16233a,#0a1019)} #menu .hero-art img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;animation:hero-drift 22s ease-in-out infinite alternate} #menu .hero-art::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,19,.2) 0,rgba(8,12,19,.05) 30%,rgba(8,12,19,.78) 78%,rgba(8,12,19,.94))} #menu .hero-flash{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;mix-blend-mode:screen; background:radial-gradient(circle at 50% 42%,rgba(255,226,170,.65),rgba(255,140,60,.25) 32%,transparent 58%);animation:hero-crash 9s ease-out 2s infinite} @keyframes hero-drift{from{transform:scale(1.04) translate3d(-1.2%,0,0)}to{transform:scale(1.12) translate3d(1.2%,-1%,0)}} @keyframes hero-crash{0%,86%{opacity:0;transform:scale(.8)}88%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}} #menu .hero-body{width:100%;display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-3);padding:var(--sp-5) var(--sp-4) var(--sp-4)} #menu .hero-title{font:800 italic clamp(26px,7vw,40px)/.95 var(--font-disp);text-transform:uppercase;text-shadow:0 3px 0 rgba(0,0,0,.5),0 0 22px rgba(0,0,0,.55)} #menu .hero-sub{color:var(--text);font-size:var(--fs-4);line-height:1.3;text-shadow:0 1px 6px rgba(0,0,0,.8);margin-top:-6px} #menu .hero-key{--depth:7px;width:100%;min-height:88px;justify-content:flex-start;gap:var(--sp-4);padding:0 var(--sp-5);border-radius:var(--r-3);font-size:clamp(28px,8vw,42px); animation:hero-key-pulse 2.6s ease-in-out infinite} #menu .hero-key .i-dice,#menu .hero-key .i{width:.95em;height:.95em;stroke-width:2.2} #menu .hero-key small{font-size:var(--fs-3);margin-top:5px} @keyframes hero-key-pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}} #menu .hero-row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3)} #menu .hero-row:has(#bAgain[hidden]){display:none} #menu .hero-again{min-height:56px;justify-content:flex-start;gap:var(--sp-3);font-size:var(--fs-4);padding:0 var(--sp-3)} #menu .hero-again .lbl2{min-width:0} #menu .hero-again small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none;font-style:normal} html.derby-reduced-motion #menu .hero-art img,html.derby-reduced-motion #menu .hero-flash,html.derby-reduced-motion #menu .hero-key{animation:none} @media (prefers-reduced-motion:reduce){#menu .hero-art img,#menu .hero-flash,#menu .hero-key{animation:none}} /* ---------- the cards (Modes, Solo and progress, With friends) ---------- */ #menu .hcard{--acc:var(--amber);position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:var(--r-3);text-align:left;color:var(--text); background:linear-gradient(180deg,#1d2b41,#101827); box-shadow:inset 0 0 0 1px rgba(179,197,232,.14),inset 0 3px 0 var(--acc),0 5px 0 var(--plate-edge),0 14px 26px rgba(0,0,0,.4); transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),filter var(--dur-2)} #menu .hcard:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 0 0 1px rgba(179,197,232,.14),inset 0 3px 0 var(--acc),0 2px 0 var(--plate-edge),0 4px 10px rgba(0,0,0,.4)} #menu .hcard:focus-visible{outline:3px solid var(--focus);outline-offset:3px} @media(hover:hover){#menu .hcard:hover:not(.is-wait){filter:brightness(1.08)}} #menu .hcard.hide{display:none!important} #menu .hcard--derby{--acc:var(--p1)} #menu .hcard--bowling{--acc:var(--amber)} #menu .hcard--boss{--acc:#ff5d5d} #menu .hcard--tower{--acc:#ffd166} #menu .hcard--coop{--acc:var(--live)} #menu .hcard--more{--acc:var(--cpu)} #menu .hcard--tour{--acc:var(--amber)} #menu .hcard--solo{--acc:var(--cpu)} #menu .hcard--road{--acc:var(--live)} #menu .hcard--garage{--acc:var(--p2)} #menu .hcard--tournament{--acc:var(--amber)} #menu .hcard--community{--acc:var(--p2)} #menu .hc-art{position:relative;display:grid;place-items:center;overflow:hidden;aspect-ratio:4/3;color:var(--acc); background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--acc) 38%,#1d2a40),#0d1522 78%)} #menu .hc-art .hc-ico{width:34%;height:34%;stroke-width:1.7;opacity:.95} #menu .hc-art .art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} #menu .hc-art.has-art .hc-ico{opacity:0} #menu .hc-art::after{content:'';position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,transparent,rgba(8,12,19,.55));pointer-events:none} #menu .hc-text{display:flex;flex-direction:column;gap:3px;min-width:0;padding:var(--sp-3)} #menu .hc-name{font:800 italic var(--fs-6)/1 var(--font-disp);text-transform:uppercase;letter-spacing:.01em;text-shadow:0 2px 0 rgba(0,0,0,.35)} #menu .hc-name .short{display:none} #menu .hc-blurb{font:600 var(--fs-3)/1.25 var(--font-body);color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #menu .hc-badge{position:absolute;top:8px;right:8px;padding:4px 8px 3px;border-radius:var(--r-pill);font:800 var(--fs-1)/1 var(--font-disp);letter-spacing:.06em; color:var(--acc);background:rgba(8,12,19,.78);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 45%,transparent)} #menu .hc-badge:empty{display:none} #menu .hcard--derby.is-teams .hc-blurb{color:var(--p2)} #menu .hcard--bowling .hc-art .art-img,#menu .hcard--derby .hc-art .art-img{object-position:50% 40%} /* the modes: big two-column picture cards */ #menu .modes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)} #menu .modes-grid:has(#bCoop.hide) #mMore{grid-column:1/-1} #menu .modes-grid:has(#bCoop.hide) #mMore .hc-art{aspect-ratio:16/5} /* medium row cards: Solo and progress, With friends */ #menu .row-grid,#menu .friends-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)} #menu .hcard--row{flex-direction:row;align-items:center;min-height:72px} #menu .hcard--row .hc-art{flex:0 0 auto;width:68px;align-self:stretch;aspect-ratio:auto;min-height:72px} #menu .hcard--row .hc-art::after{display:none} #menu .hcard--row .hc-art .hc-ico{width:42%;height:auto;aspect-ratio:1} #menu .hcard--row .hc-text{padding:var(--sp-2) var(--sp-3);flex:1} #menu .hcard--row .hc-name{font-size:var(--fs-5)} #menu .hcard--row .hc-blurb{font-size:var(--fs-2);-webkit-line-clamp:2} #menu .row-grid #goalsCard{grid-column:1/-1} #menu .solo #goalsCard{margin-top:var(--sp-1)} /* ---------- Featured: a row of big cards ---------- */ #menu .feat-row{display:flex;gap:var(--sp-3);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; scrollbar-width:none;padding:2px 2px calc(var(--sp-2) + 5px);margin:0 -2px} #menu .feat-row::-webkit-scrollbar{display:none} #menu .feat-card{--fc:var(--flame);position:relative;isolation:isolate;flex:0 0 calc((100% - var(--sp-3)) / 2.12);scroll-snap-align:start;min-width:0;display:flex;flex-direction:column;overflow:hidden; border-radius:var(--r-3);background:linear-gradient(180deg,#1d2b41,#101827); box-shadow:inset 0 0 0 1px rgba(179,197,232,.14),inset 0 3px 0 var(--fc),0 5px 0 var(--plate-edge),0 14px 26px rgba(0,0,0,.4)} #menu .feat-card.hide{display:none!important} #menu .feat-card:empty{display:none} #menu .feat-card--boss{--fc:#ff5d5d} #menu .feat-card--daily{--fc:var(--flame)} #menu .feat-card--tower{--fc:#ffd166} #menu .feat-card--month{--fc:var(--live)} #menu .feat-card .dcHead{position:absolute;top:8px;left:8px;right:8px;z-index:3;pointer-events:none;align-items:flex-start} #menu .feat-card .dcKick{padding:4px 8px 3px;border-radius:var(--r-pill);background:rgba(8,12,19,.78);color:var(--fc);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fc) 50%,transparent); font-size:var(--fs-1);line-height:1.15;letter-spacing:.1em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #menu .feat-card .dcStreak{padding:3px 7px;font-size:var(--fs-3)} #menu .feat-card .dcArt{position:relative;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;aspect-ratio:4/3;min-height:0;container-type:normal; background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--fc) 42%,#1d2a40),#0d1522 80%)} #menu .feat-card .dcArt::after{content:'';position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(8,12,19,.6));pointer-events:none} #menu .feat-card .dcArt .frame{position:absolute;inset:0;width:auto;height:auto;margin:0;border-radius:0;box-shadow:none} #menu .feat-card .dcArt img,#menu .feat-card .totmArt{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;border-radius:0} #menu .feat-card .fc-emoji{font-size:clamp(40px,12vw,64px);line-height:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))} #menu .feat-card .dcArt.has-art .fc-emoji{display:none} #menu .feat-card .fc-mode{position:absolute;left:8px;bottom:8px;z-index:2;padding:3px 8px 2px;border-radius:var(--r-pill);font:800 var(--fs-1)/1.1 var(--font-disp);letter-spacing:.08em; text-transform:uppercase;color:#fff;background:rgba(8,12,19,.78);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)} #menu .feat-card .dcBody{flex:1 1 auto;padding:var(--sp-3) var(--sp-3) 0;font-size:var(--fs-2);line-height:1.3;color:var(--text-2)} #menu .feat-card .dcBody b{font-size:var(--fs-5);margin-bottom:3px} #menu .feat-card .dcBody span{display:block} #menu .feat-card>.btn,#menu .feat-card .totmBtns{margin:var(--sp-3);flex:0 0 auto} #menu .feat-card>.btn{min-height:44px;font-size:var(--fs-4)} #menu .feat-card .totmBtns{grid-template-columns:minmax(0,1fr);gap:var(--sp-2)} #menu .feat-card .totmBtns .btn{width:100%;min-height:44px;font-size:var(--fs-4);white-space:normal;padding:0 var(--sp-2);line-height:1.05} #menu .feat-card .totmCosmetic{padding:0 var(--sp-3) var(--sp-3);white-space:normal;font-size:var(--fs-2);color:var(--text-3)} #menu .feat-card--daily:empty{display:none} /* ---------- With friends ---------- */ #menu .fcard{--acc:var(--cpu);position:relative;isolation:isolate;display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;padding:var(--sp-4);border-radius:var(--r-3); background:radial-gradient(130% 70% at 50% 0%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%),linear-gradient(180deg,#1d2b41,#101827); box-shadow:inset 0 0 0 1px rgba(179,197,232,.14),inset 0 3px 0 var(--acc),0 5px 0 var(--plate-edge),0 14px 26px rgba(0,0,0,.4)} #menu .fcard--online{--acc:var(--live)} #menu .fcard--duo{--acc:var(--p1)} #menu .fc-head{display:flex;align-items:center;gap:var(--sp-3);min-width:0} #menu .fc-title{font:800 italic var(--fs-7)/.95 var(--font-disp);text-transform:uppercase;text-shadow:0 2px 0 rgba(0,0,0,.35)} #menu .fc-sub{color:var(--text-2);font-size:var(--fs-3);line-height:1.3} #menu .fc-ico{flex:0 0 auto;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--live); background:radial-gradient(circle at 40% 35%,#1d4a3f,#0d2420 70%);box-shadow:inset 0 0 0 3px rgba(82,224,162,.5),0 0 22px rgba(82,224,162,.2)} #menu .fc-ico .i{width:28px;height:28px;stroke-width:1.7} #menu .fc-faces{flex:0 0 auto;display:flex;align-items:center} #menu .fc-faces .av{width:46px;height:46px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))} #menu .fc-faces .av + .vs + .av{margin-left:-4px} #menu .fc-faces .vs{position:relative;z-index:2;margin:0 -7px;transform:rotate(-8deg);font:800 italic var(--fs-3)/1 var(--font-disp);color:#fff;padding:4px 6px 3px;border-radius:8px; background:linear-gradient(180deg,#ff8a52,#e6452a);box-shadow:0 3px 0 #8e2410,0 6px 12px rgba(0,0,0,.45)} #menu .fc-actions{display:flex;flex-direction:column;gap:var(--sp-3);padding-bottom:var(--depth)} #menu .fcard .btn--pick{min-height:46px} #menu .friends-grid .fcard--online{grid-column:1/-1} #menu .friends-grid .fcard--duo{grid-column:1/-1} /* ---------- the first-session reveal (OB10): a card that has not opened yet is dimmed and says when ---------- */ #menu .is-wait{cursor:default;pointer-events:none} #menu .is-wait::before{content:'';position:absolute;inset:0;z-index:5;background:rgba(8,12,19,.6);border-radius:inherit} #menu .is-wait>*{filter:grayscale(.85)} #menu .is-wait::after{content:attr(data-wait);position:absolute;left:50%;top:30%;z-index:6;transform:translate(-50%,-50%);max-width:88%;padding:6px 10px 5px;border-radius:var(--r-pill); font:800 var(--fs-2)/1.15 var(--font-disp);letter-spacing:.08em;text-transform:uppercase;text-align:center;color:#fff;background:rgba(8,12,19,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)} #menu .fcard.is-wait::after{top:50%} #menu .hcard--row.is-wait::after{left:auto;right:8px;top:8px;transform:none;max-width:60%;padding:4px 8px 3px;font-size:var(--fs-1)} #menu .fc-pic{aspect-ratio:16/6;border-radius:var(--r-2);margin:calc(var(--sp-1) * -1) 0 0} #menu .fc-pic.no-art{display:none} #menu .page-body .bossPic{position:relative;overflow:hidden} #menu .page-body .bossPic .art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* ---------- the footer ---------- */ #menu .home-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3);padding:var(--sp-2) 0 var(--sp-4)} #menu .home-foot .btn{min-height:44px} /* ---------- Continue stays a banner under the hero ---------- */ #menu .continue{margin:0} /* ---------- the home tours and pointers (OB10, app/homeTour.js): the coach's ring and hand over a spotlight ---------- */ #menu .htour{position:fixed;inset:0;z-index:40;pointer-events:none} #menu .htour[hidden]{display:none!important} #menu .htour .ht-tap{display:none;position:absolute;inset:0;width:100%;height:100%;background:transparent} #menu .htour.ht-blocking .ht-tap{display:block;pointer-events:auto;cursor:pointer} #menu .htour .ht-spot{position:absolute;border-radius:var(--r-3);pointer-events:none;box-shadow:0 0 0 3px var(--amber),0 0 22px rgba(255,173,71,.55);transition:opacity var(--dur-2) var(--ease-out)} #menu .htour.ht-blocking .ht-spot{box-shadow:0 0 0 3px var(--amber),0 0 22px rgba(255,173,71,.55),0 0 0 100vmax rgba(5,8,14,.62)} #menu .htour .ht-ring,#menu .htour .ht-hand{position:absolute;left:var(--hx,50%);top:var(--hy,50%);pointer-events:none} #menu .htour .ht-ring{width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;box-shadow:0 0 0 3px var(--amber),0 0 18px rgba(255,173,71,.6);animation:ccPulse 1.4s ease-out infinite} #menu .htour .ht-hand{width:44px;height:44px;margin:-6px 0 0 -18px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));animation:ccTap 1.4s ease-in-out infinite} #menu .htour .ht-bubble{position:absolute;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);padding:10px 18px;border-radius:999px;pointer-events:none; color:var(--text);text-align:center;background:linear-gradient(180deg,rgba(29,42,63,.97),rgba(16,24,38,.97));box-shadow:inset 0 0 0 1.5px rgba(255,173,71,.6),0 4px 0 var(--plate-edge),0 10px 22px rgba(0,0,0,.5); font:800 italic var(--fs-5)/1.2 var(--font-disp);letter-spacing:.02em;text-transform:uppercase;transition:opacity var(--dur-2) var(--ease-out)} #menu .htour .ht-prog{margin-left:10px;font-size:var(--fs-2);letter-spacing:.08em;color:var(--amber)} #menu .htour .ht-skip{display:none;position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 16px);transform:translateX(-50%);min-height:44px;min-width:96px;padding:0 24px;border-radius:999px; color:var(--text);font:800 italic var(--fs-4)/1 var(--font-disp);letter-spacing:.06em;text-transform:uppercase;pointer-events:auto; background:linear-gradient(180deg,rgba(37,52,77,.97),rgba(22,32,48,.97));box-shadow:inset 0 0 0 1.5px rgba(214,226,250,.3),0 3px 0 var(--plate-edge)} #menu .htour.ht-blocking .ht-skip{display:block} html.derby-reduced-motion #menu .htour .ht-ring,html.derby-reduced-motion #menu .htour .ht-hand{animation:none} /* ---------- one column (a phone, a tablet, a phone on its side): the sections in the spec's order, Featured right under the hero ---------- */ @media (max-width:899px),(max-height:540px){ #menu .home-col{display:contents} #menu .hero{order:1} #menu .continue{order:2} #menu .feat{order:3} #menu .modes{order:4} #menu .solo{order:5} #menu .friends{order:6} #menu .home-foot{order:7} } /* ---------- tablets (600 and up): three columns of mode cards ---------- */ @media (min-width:600px){ #menu .modes-grid{grid-template-columns:repeat(3,minmax(0,1fr))} #menu .modes-grid:has(#bCoop.hide) #mMore{grid-column:auto} #menu .modes-grid:has(#bCoop.hide) #mMore .hc-art{aspect-ratio:4/3} #menu .row-grid,#menu .friends-grid{grid-template-columns:repeat(4,minmax(0,1fr))} #menu .friends-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #menu .friends-grid .fcard--duo,#menu .friends-grid .fcard--online{grid-column:auto} #menu .feat-card{flex-basis:calc((100% - 2 * var(--sp-3)) / 3.1)} } /* ---------- desktops: the same sections side by side ---------- */ @media (min-width:900px) and (min-height:541px){ #menu .home-scroll{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--sp-6) var(--sp-6);align-content:start;align-items:start} #menu .home-foot{grid-column:1/-1} #menu .hero{min-height:clamp(260px,38svh,380px)} #menu .modes-grid{grid-template-columns:repeat(3,minmax(0,1fr))} #menu .hc-art{aspect-ratio:16/10} #menu .feat-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;scroll-snap-type:none;gap:var(--sp-3)} #menu .feat-card{flex:none} #menu .feat-card .dcArt{aspect-ratio:16/10} #menu .row-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #menu .friends-grid{grid-template-columns:minmax(0,1fr)} } /* ---------- a phone on its side (844x390 and the like): a short hero, three columns ---------- */ @media (orientation:landscape) and (max-height:540px){ #menu .hero{min-height:200px} #menu .hero-body{padding:var(--sp-3) var(--sp-4);gap:var(--sp-2)} #menu .hero-title{font-size:26px} #menu .hero-key{min-height:64px} #menu .home-scroll{gap:var(--sp-5)} #menu .modes-grid{grid-template-columns:repeat(3,minmax(0,1fr))} #menu .hc-art{aspect-ratio:16/9} #menu .feat-card .dcArt{aspect-ratio:16/9} #menu .row-grid{grid-template-columns:repeat(4,minmax(0,1fr))} #menu .friends-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ---------- small phones ---------- */ @media (max-width:379px){ #menu .hero-key{padding:0 var(--sp-4)} #menu .hc-name{font-size:var(--fs-5)} #menu .hero-row{gap:var(--sp-2)} #menu .hero-again{font-size:var(--fs-3);padding:0 var(--sp-2)} } @media (max-width:599px){ #menu .hc-blurb{font-size:var(--fs-2)} #menu .hc-text{padding:var(--sp-2) var(--sp-3) var(--sp-3)} #menu .row-grid,#menu .friends-grid{grid-template-columns:minmax(0,1fr)} #menu .modes-grid{gap:var(--sp-3)} } /* ---------- Larger text (Settings): the pictures give way a little ---------- */ html.derby-large-text #menu .hc-art{aspect-ratio:16/9} html.derby-large-text #menu .feat-card .dcArt{aspect-ratio:16/9} /* ---------- the "who plays" sheet (a mode card opens it in the menu's sheet layer) ---------- */ :is(#menu,.ui) .mm-hero{display:flex;align-items:center;gap:var(--sp-3)} :is(#menu,.ui) .mm-hero .mm-art,:is(#menu,.ui) .mm-row .mm-art{flex:0 0 auto;width:96px;aspect-ratio:3/2;border-radius:10px;overflow:hidden;background:#05080d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)} :is(#menu,.ui) .mm-art img{width:100%;height:100%;object-fit:cover} :is(#menu,.ui) .mm-blurb{color:var(--text-2);font-size:var(--fs-3);line-height:1.35} :is(#menu,.ui) .mm-last{color:var(--text-3);font-size:var(--fs-2);line-height:1.35} :is(#menu,.ui) .mm-fmt{display:flex;flex-direction:column;gap:var(--sp-2)} :is(#menu,.ui) .mm-who{display:grid;gap:var(--sp-3);grid-template-columns:1fr} :is(#menu,.ui) .mm-w,:is(#menu,.ui) .mm-solo{justify-content:flex-start;min-height:56px;padding:0 var(--sp-4);text-align:left;white-space:normal} :is(#menu,.ui) .mm-w .i,:is(#menu,.ui) .mm-solo .i{width:24px;height:24px;color:var(--amber)} :is(#menu,.ui) .mm-w:disabled{opacity:.5} :is(#menu,.ui) .mm-list{display:flex;flex-direction:column;gap:var(--sp-2)} :is(#menu,.ui) .mm-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);border-radius:var(--r-3);text-align:left; background:linear-gradient(180deg,#223149,#152033);box-shadow:inset 0 0 0 1px rgba(179,197,232,.14),0 3px 0 var(--plate-edge);min-height:64px} :is(#menu,.ui) .mm-row:active{transform:translateY(2px);box-shadow:inset 0 0 0 1px rgba(179,197,232,.14),0 1px 0 var(--plate-edge)} :is(#menu,.ui) .mm-rowtext{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} :is(#menu,.ui) .mm-rowtext b{font:800 italic var(--fs-5)/1 var(--font-disp);text-transform:uppercase} :is(#menu,.ui) .mm-rowtext small{color:var(--text-3);font:600 var(--fs-2)/1.25 var(--font-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} :is(#menu,.ui) .mm-row>.i{width:20px;height:20px;color:var(--text-3)} @media (min-width:600px){ :is(#menu,.ui) .mm-who{grid-template-columns:repeat(3,minmax(0,1fr))} :is(#menu,.ui) .mm-w{flex-direction:column;align-items:flex-start;justify-content:center;padding:var(--sp-3)} } /* ---------- Derby's setup switch: it is a row of the rules panel like any other ---------- */ :is(#menu,.ui) #formatOpts button{white-space:nowrap} /* ---------- the pages (screens "who" and "page") ---------- */ :is(#menu,.ui) .page-body{flex:1 1 auto;min-height:0;width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:var(--sp-3); overflow-y:auto;overflow-x:hidden;padding:2px 2px var(--sp-4);overscroll-behavior:contain} :is(#menu,.ui) .page-body .kicker{margin:var(--sp-2) 0 0} :is(#menu,.ui) .page-body .mm-hero .mm-art{width:120px} :is(#menu,.ui) .page-body .mm-w{min-height:64px} :is(#menu,.ui) .page-body .cmSub{margin:var(--sp-2) 0 0;font:600 var(--fs-1)/1.2 var(--font-disp);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)} /* the level and scenario lists */ :is(#menu,.ui) .page-body .tvHead{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 4px;font:700 var(--fs-4)/1.2 var(--font-disp)} :is(#menu,.ui) .page-body .tvHead span{color:var(--amber)} :is(#menu,.ui) .page-body .tvGate{color:var(--text-2);font-size:var(--fs-3);line-height:1.35} :is(#menu,.ui) .page-body ol.tvLanes,:is(#menu,.ui) .page-body ol.coopList{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)} :is(#menu,.ui) .page-body .tvLanes li{display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-3);border-radius:var(--r-3); background:linear-gradient(180deg,#223149,#152033);box-shadow:inset 0 0 0 1px rgba(179,197,232,.14),0 3px 0 var(--plate-edge)} :is(#menu,.ui) .page-body .tvLanes li.locked{opacity:.5} :is(#menu,.ui) .page-body .tvInfo{flex:1;min-width:0} :is(#menu,.ui) .page-body .tvName{font:800 italic var(--fs-5)/1.1 var(--font-disp);text-transform:uppercase} :is(#menu,.ui) .page-body .tvVs{font-size:var(--fs-2);color:var(--text-3);margin-top:2px} :is(#menu,.ui) .page-body .tvGoal{font-size:var(--fs-1);color:var(--amber);margin-top:4px} :is(#menu,.ui) .page-body .tvRight{display:grid;gap:6px;justify-items:end} :is(#menu,.ui) .page-body .tvRight button{min-height:44px;min-width:84px} :is(#menu,.ui) .page-body .coopCard{display:grid;gap:4px;width:100%;text-align:left;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-3);color:var(--text); background:linear-gradient(180deg,#223149,#152033);box-shadow:inset 0 0 0 1px rgba(179,197,232,.14),0 3px 0 var(--plate-edge);min-height:64px} :is(#menu,.ui) .page-body .coopCard:active{transform:translateY(2px)} :is(#menu,.ui) .page-body .coopName{font:800 italic var(--fs-5)/1.1 var(--font-disp);text-transform:uppercase} :is(#menu,.ui) .page-body .coopBlurb{color:var(--text-2);font-size:var(--fs-3)} :is(#menu,.ui) .page-body .coopLines{color:var(--amber);font-size:var(--fs-1)} :is(#menu,.ui) .page-body .coopMaps{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-2)} :is(#menu,.ui) .page-body .coopMap{min-height:56px;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-3);color:var(--text);font-weight:700; background:linear-gradient(180deg,#223149,#152033);box-shadow:inset 0 0 0 1px rgba(179,197,232,.14),0 3px 0 var(--plate-edge)} :is(#menu,.ui) .page-body .coopOnline{display:grid;gap:var(--sp-3);justify-items:start} :is(#menu,.ui) .page-body .coopOnline p{margin:0} :is(#menu,.ui) .page-body .coopCode{font:800 34px/1 var(--font-disp);letter-spacing:.18em} :is(#menu,.ui) .page-body .coopHowTo{display:grid;gap:6px;margin:0;padding:0} :is(#menu,.ui) .page-body .coopHowRow{display:grid;gap:2px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.05)} :is(#menu,.ui) .page-body .coopHowRow dt{font:700 11px/1.2 var(--font-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin:0} :is(#menu,.ui) .page-body .coopHowRow dd{margin:0;font-size:var(--fs-3);line-height:1.35} :is(#menu,.ui) .page-body .coopHowRow.win dt{color:#7be08a} :is(#menu,.ui) .page-body .coopHowRow.lose dt{color:#ff8a80} :is(#menu,.ui) .page-body .coopHowRow.stars dd{font-size:var(--fs-1);color:var(--amber)} @media (max-width:599px){ :is(#menu,.ui) .page-body .mm-hero .mm-art{width:84px} :is(#menu,.ui) .page-body .coopHowRow.tip{display:none} } /* ---------- M2c: the Tournament card and its pages (app/tournamentPage.js) ---------- */ :is(#menu,.ui) .page-body .tp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)} :is(#menu,.ui) .page-body .tp-chip{min-height:48px;padding:0 var(--sp-3);justify-content:flex-start;text-align:left;white-space:normal;line-height:1.1} :is(#menu,.ui) .page-body .tp-chip.on{box-shadow:inset 0 0 0 2px var(--amber)} :is(#menu,.ui) .page-body ol.tp-slots,:is(#menu,.ui) .page-body ol.tp-rounds{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)} :is(#menu,.ui) .page-body .tp-slot{width:100%;justify-content:flex-start;gap:var(--sp-3);min-height:52px;padding:0 var(--sp-3);text-align:left;white-space:normal} :is(#menu,.ui) .page-body .tp-slot.is-filled{box-shadow:inset 0 0 0 1.5px rgba(255,173,71,.7)} :is(#menu,.ui) .page-body .tn{flex:0 0 auto;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.1);font:800 var(--fs-2)/1 var(--font-disp)} :is(#menu,.ui) .page-body .tp-row{display:flex;gap:var(--sp-2);flex-wrap:wrap} :is(#menu,.ui) .page-body .tp-row .btn{flex:1 1 140px;min-height:44px} :is(#menu,.ui) .page-body .tp-start{align-self:stretch;margin-top:var(--sp-2);flex:0 0 auto} :is(#menu,.ui) .page-body .tp-status{font:800 italic var(--fs-5)/1.1 var(--font-disp);text-transform:uppercase;color:var(--amber)} :is(#menu,.ui) .page-body .tp-table{width:100%;border-collapse:collapse;font-size:var(--fs-3)} :is(#menu,.ui) .page-body .tp-table th,:is(#menu,.ui) .page-body .tp-table td{padding:8px 10px;text-align:right;border-bottom:1px solid rgba(179,197,232,.14)} :is(#menu,.ui) .page-body .tp-table th:first-child{text-align:left} :is(#menu,.ui) .page-body .tp-table thead th{color:var(--text-3);font-weight:600;font-size:var(--fs-2)} :is(#menu,.ui) .page-body .tp-table tr.win th,:is(#menu,.ui) .page-body .tp-table tr.win td{color:var(--amber)} :is(#menu,.ui) .page-body .tp-rounds li{display:flex;align-items:center;gap:var(--sp-3);padding:8px var(--sp-3);border-radius:var(--r-2);background:#152033;color:var(--text-2);font-size:var(--fs-3)} :is(#menu,.ui) .page-body .tp-rounds li.next{box-shadow:inset 0 0 0 1.5px rgba(255,173,71,.7);color:var(--text)} :is(#menu,.ui) .page-body .tp-rounds li.done{color:var(--text)} @media (min-width:700px){:is(#menu,.ui) .page-body .tp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} /* Boss fights (src/app/bossFights.js): one tile per registry boss, in the boss's own colour (--bossc), its icon, name, blurb, stars */ :is(#menu,.ui) .page-body ol.bossList{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)} :is(#menu,.ui) .page-body .bossCard{display:flex;align-items:center;gap:var(--sp-3);width:100%;text-align:left;padding:var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);border-radius:var(--r-3);color:var(--text);min-height:72px; background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--bossc) 30%,transparent),transparent 65%),linear-gradient(180deg,#223149,#152033); box-shadow:inset 0 0 0 1px rgba(179,197,232,.14),inset 4px 0 0 var(--bossc),0 3px 0 var(--plate-edge)} :is(#menu,.ui) .page-body .bossCard:active{transform:translateY(2px)} :is(#menu,.ui) .page-body .bossCard.bossLocked{opacity:.75;filter:saturate(.4);cursor:not-allowed} :is(#menu,.ui) .page-body .bossCard.bossLocked:active{transform:none} :is(#menu,.ui) .page-body .bossPad{flex:0 0 auto;font-size:22px;line-height:1} :is(#menu,.ui) .page-body .bossPic{flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;border-radius:12px;font-size:30px;line-height:1;background:color-mix(in srgb,var(--bossc) 38%,#0b111b);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bossc) 70%,transparent)} :is(#menu,.ui) .page-body .bossText{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1} :is(#menu,.ui) .page-body .bossName{font:800 italic var(--fs-5)/1.1 var(--font-disp);text-transform:uppercase} :is(#menu,.ui) .page-body .bossBlurb{color:var(--text-2);font-size:var(--fs-2);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} :is(#menu,.ui) .page-body .bossStars{color:#ffcf6a;letter-spacing:.1em;white-space:nowrap;font-size:var(--fs-3)} /* the Badges section of the level road (app/levelRoad.js): one row per mastery track, the titles, the achievements */ :is(#menu,.ui) .page-body .badgesBox{margin-top:var(--sp-4,16px)} :is(#menu,.ui) .page-body .badgeHelp{margin:4px 0 8px;font-size:13px;color:var(--text-2,#aab4bd)} :is(#menu,.ui) .page-body .badgeList{list-style:none;margin:0;padding:0;display:grid;gap:6px} :is(#menu,.ui) .page-body .badgeTrack{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:8px 10px;border-radius:12px;background:#ffffff0a;opacity:.7} :is(#menu,.ui) .page-body .badgeTrack.got{opacity:1} :is(#menu,.ui) .page-body .badgeHead{display:flex;align-items:center;gap:8px;flex-wrap:wrap} :is(#menu,.ui) .page-body .badgeIcon{font-size:20px;width:26px;text-align:center} :is(#menu,.ui) .page-body .badgeTiers{display:inline-flex;gap:4px;margin-left:auto} :is(#menu,.ui) .page-body .badgeTier{font-style:normal;font-size:11px;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#ffffff14;color:#9aa5ae} :is(#menu,.ui) .page-body .badgeTier.done{color:#10161c;font-weight:800} :is(#menu,.ui) .page-body .badgeTier.done.t1{background:#b87333} :is(#menu,.ui) .page-body .badgeTier.done.t2{background:#c0c7cf} :is(#menu,.ui) .page-body .badgeTier.done.t3{background:#f2b632} :is(#menu,.ui) .page-body .badgeTier.done.t4{background:#7fd6d0} :is(#menu,.ui) .page-body .badgeTier.done.t5{background:#9fc8ff} :is(#menu,.ui) .page-body .badgeNext{grid-column:1;font-size:12px;color:var(--text-3,#8d98a1)} :is(#menu,.ui) .page-body .badgeUse{grid-column:2;grid-row:1 / span 2;min-height:36px;padding:0 12px;border-radius:10px;border:1px solid #ffffff30;background:transparent;color:inherit;font:inherit;font-size:13px} :is(#menu,.ui) .page-body .badgeUse.on,:is(#menu,.ui) .page-body .titleBtn.on{background:#ffb020;color:#10161c;border-color:#ffb020} :is(#menu,.ui) .page-body .titleRow{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} :is(#menu,.ui) .page-body .titleBtn{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid #ffffff30;background:transparent;color:inherit;font:inherit;font-size:13px} :is(#menu,.ui) .page-body .titleBtn.locked{opacity:.4} /* Tower > Landmarks (TW6, 2026-11-04): the cards under the 12 levels. A card is the levels' row with a picture box in front (the owner's assets/ui/landmarks/.webp; without it a colour from --lmHue and an icon). */ .lmHead{margin-top:var(--sp-4)} .lmArt{position:relative;flex:none;width:58px;height:58px;border-radius:var(--r-2,10px);overflow:hidden;display:grid;place-items:center; background:linear-gradient(160deg,hsl(var(--lmHue,30) 42% 36%),hsl(var(--lmHue,30) 40% 18%));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} .lmArt .lmIcon{font-size:28px;line-height:1} .lmArt img.art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .lmArt.has-art .lmIcon{visibility:hidden} .lmCard.locked .lmArt{filter:grayscale(.7)} .lmGoal.got{color:var(--amber-hi,#ffd98a)} #landmarkGoalResult{color:#ffcf6a;font:700 13px/1.3 var(--disp,inherit)} #landmarkGoalResult.got{color:#9be28f}