/* TYPING-LANDING-SHOWDOWN (direction C "Hero Showdown", proposed 2026-10-02).
Restyles ONLY the class-select screen. Every rule is scoped to
#screen-title.land (landing.js adds .land; index.html now ships it too), or to
the shared top bar / page background only while that screen is active
(.app:has(> #screen-title.land.active) / body:has(#screen-title.land.active)),
so combat, loading, how-to, results and the museum dialogs are untouched.
No ids, hooks or JS behaviour change. The Music / Sound attention pulse
(attn-pulse, 1.2 s) is left alone: nothing here sets animation or an
!important box-shadow on .bgm-picker or #btn-mute.
Rollback: delete the to this file in index.html. */
/* ---------- tokens ---------- */
#screen-title.land,
.app:has(> #screen-title.land.active) > .topbar {
--sd-glass: rgba(12, 11, 14, .58);
--sd-hair: rgba(240, 200, 120, .42);
--sd-hair2: rgba(240, 200, 120, .18);
--sd-gold: #f5c542;
--sd-ink: #f0e6d0;
--sd-muted: #b8aa8c;
--sd-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f0c870' stroke-width='2'/%3E%3C/svg%3E");
}
/* ---------- page: full-bleed monster corridor (replaces hall_straight on the landing only) ---------- */
body:has(#screen-title.land.active) {
background:
linear-gradient(180deg, rgba(6,5,4,.80) 0%, rgba(6,5,4,.30) 26%, rgba(6,5,4,0) 44%, rgba(6,5,4,.12) 70%, rgba(10,8,7,.94) 96%, #0a0807 100%) center top / max(100%, calc(max(100vh, 760px) * 16 / 9)) auto no-repeat,
radial-gradient(ellipse 85% 75% at 50% 50%, transparent 55%, rgba(0,0,0,.6) 100%) center top / max(100%, calc(max(100vh, 760px) * 16 / 9)) auto no-repeat,
url("../assets/landing/hero-showdown-corridor-1280.webp?v=memfix3") center top / max(100%, calc(max(100vh, 760px) * 16 / 9)) auto no-repeat,
#0a0807;
}
/* ---------- top bar -> slim dark-glass HUD strip (landing only) ---------- */
.app:has(> #screen-title.land.active) > .topbar {
gap: 10px; padding: 8px 10px 8px 14px; margin-bottom: 6px;
background: var(--sd-glass);
-webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
border: 1px solid var(--sd-hair); border-radius: 12px;
box-shadow: inset 0 1px 0 rgba(255,235,190,.12), 0 10px 30px rgba(0,0,0,.45);
}
.app:has(> #screen-title.land.active) > .topbar::before,
.app:has(> #screen-title.land.active) > .topbar::after { content: none; }
.app:has(> #screen-title.land.active) > .topbar .brand { white-space: nowrap; flex-shrink: 0; }
.app:has(> #screen-title.land.active) > .topbar .brand-mark { width: 32px; height: 32px; flex-basis: 32px; }
.app:has(> #screen-title.land.active) > .topbar .brand strong { font: 600 15px/1.1 "Cinzel Lore", Georgia, serif; letter-spacing: .06em; color: #f0d58a; }
.app:has(> #screen-title.land.active) > .topbar .brand em { font-size: 12px; color: var(--sd-muted); }
.app:has(> #screen-title.land.active) > .topbar .app-version { flex-shrink: 0; padding: 3px 7px; border: 1px solid var(--sd-hair2); border-radius: 99px; color: var(--sd-muted); }
/* daily challenge: a compact glass pill inside the strip */
.app:has(> #screen-title.land.active) > .topbar .daily-entry {
flex: 0 1 auto; min-width: 0; gap: 10px; padding: 4px 5px 4px 12px;
border: 1px solid var(--sd-hair2); border-radius: 99px; background: rgba(255,250,240,.04);
}
.app:has(> #screen-title.land.active) > .topbar .daily-copy strong { font: 700 10.5px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #e8c37a; }
.app:has(> #screen-title.land.active) > .topbar .daily-copy { display: grid; grid-template-columns: minmax(0, auto) minmax(0, auto); column-gap: 10px; min-width: 0; overflow: hidden; }
.app:has(> #screen-title.land.active) > .topbar .daily-copy strong { grid-column: 1 / -1; }
.app:has(> #screen-title.land.active) > .topbar .daily-copy span { min-width: 0; font-size: 11.5px; line-height: 1.3; color: var(--sd-muted); }
/* only the daily pill gives way when the strip gets tight; the audio controls never get squeezed */
.app:has(> #screen-title.land.active) > .topbar .topbar-actions { flex-shrink: 0; }
.app:has(> #screen-title.land.active) > .topbar .daily-actions { flex-direction: row; gap: 5px; }
.app:has(> #screen-title.land.active) > .topbar .daily-actions .btn { min-height: 30px; padding: 0 12px; border-radius: 99px; font-size: 12px; }
/* glass buttons + selects in the strip */
.app:has(> #screen-title.land.active) > .topbar .btn-ghost {
--btn-top: rgba(255,240,210,.12); --btn-face: rgba(255,250,240,.07); --btn-bot: rgba(255,250,240,.03); --btn-ink: var(--sd-ink);
border-color: var(--sd-hair) !important; border-radius: 9px; min-height: 36px;
}
.app:has(> #screen-title.land.active) > .topbar .bgm-picker {
min-height: 36px; padding: 2px 3px 2px 11px; border-radius: 9px;
border-color: rgba(245,197,66,.6); background: rgba(245,197,66,.10);
font: 700 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .06em; text-transform: uppercase;
}
.app:has(> #screen-title.land.active) > .topbar .bgm-picker select,
#screen-title.land .theme-row select {
-webkit-appearance: none; appearance: none; cursor: pointer;
color: var(--sd-ink); background: rgba(8,8,10,.55) var(--sd-chev) no-repeat right 11px center / 12px 8px;
border: 1px solid var(--sd-hair); border-radius: 7px; padding: 0 32px 0 10px;
font: 600 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; text-transform: none;
}
.app:has(> #screen-title.land.active) > .topbar .bgm-picker select { min-height: 30px; }
.app:has(> #screen-title.land.active) > .topbar .bgm-picker option,
#screen-title.land .theme-row option { background: #16130f; color: var(--sd-ink); }
/* ---------- the screen itself: no panel, the scene is the backdrop ---------- */
#screen-title.land > .card.hero {
display: grid;
grid-template-columns: minmax(0, 360px) minmax(0, 1fr) minmax(0, 360px);
grid-template-areas:
"title title title"
"warr intro mage"
"warr theme mage"
"warr . mage"
"bard bard bard"
"board board board"
"museum museum museum"
"howto howto howto"
"foot foot foot";
grid-template-rows: auto auto auto 1fr;
column-gap: 24px; align-items: start;
max-width: 1320px; margin: 0 auto; padding: 10px 16px 40px;
background: none !important; border: 0 !important; border-radius: 0 !important;
box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none;
--sd-art-h: clamp(220px, calc(100vh - 470px), 470px);
--pp-drop: calc(var(--sd-art-h) * .03);
}
#screen-title.land > .card.hero::before,
#screen-title.land > .card.hero::after { content: none; }
#screen-title.land .class-grid { display: contents; }
/* sprite canvases are wider than the figures: never let them widen the page */
#screen-title.land { overflow-x: clip; }
/* title logo: "Dungeon Crawl" + "Type to Fight!" (the hidden " - " keeps the old heading text for screen readers) */
#screen-title.land .hero > h1 {
grid-area: title; justify-self: center; display: grid; justify-items: center; gap: 4px;
margin: 14px 0 10px; text-align: center;
background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; filter: none; animation: none;
}
#screen-title.land .land-title-main {
font: 600 clamp(2.5rem, 6vw, 5.4rem)/1 "Cinzel Lore", Georgia, serif; letter-spacing: .08em; text-transform: uppercase;
background: linear-gradient(180deg, #fff8dc 0%, #ffd56a 35%, #d08a24 62%, #ffe3a0 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 3px 0 #1a0c04) drop-shadow(0 0 22px rgba(255,120,40,.55)) drop-shadow(0 0 60px rgba(255,90,20,.25));
animation: land-sd-ember 3.2s ease-in-out infinite;
}
@keyframes land-sd-ember {
0%, 100% { filter: drop-shadow(0 3px 0 #1a0c04) drop-shadow(0 0 18px rgba(255,120,40,.45)) drop-shadow(0 0 56px rgba(255,90,20,.2)); }
40% { filter: drop-shadow(0 3px 0 #1a0c04) drop-shadow(0 0 26px rgba(255,130,50,.65)) drop-shadow(0 0 70px rgba(255,90,20,.3)); }
70% { filter: drop-shadow(0 3px 0 #1a0c04) drop-shadow(0 0 20px rgba(255,120,40,.5)) drop-shadow(0 0 60px rgba(255,90,20,.25)); }
}
#screen-title.land .land-title-sub {
font: 600 clamp(1rem, 1.9vw, 1.55rem)/1 "Cinzel Lore", Georgia, serif; letter-spacing: .36em; padding-left: .36em; text-transform: uppercase;
color: #d8ecff; text-shadow: 0 0 2px #050a1a, 0 2px 0 #050a1a, 0 0 14px rgba(70,150,255,.9), 0 0 30px rgba(54,150,242,.55);
}
#screen-title.land .land-title-sub::before,
#screen-title.land .land-title-sub::after {
content: ""; display: inline-block; vertical-align: middle; width: 60px; height: 1px; margin: 0 16px;
background: linear-gradient(90deg, transparent, rgba(150,200,255,.8));
}
#screen-title.land .land-title-sub::after { background: linear-gradient(90deg, rgba(150,200,255,.8), transparent); }
#screen-title.land .hero > p:not(.foot-note) {
grid-area: intro; justify-self: center; max-width: 560px; margin: 0; text-align: center;
font: italic 17px/1.4 "Fell Lore", Georgia, serif; color: #eadcbc;
text-shadow: 0 1px 2px #000, 0 0 14px #000, 0 0 24px rgba(0,0,0,.9);
}
/* word theme: a centred glass pill under the intro */
#screen-title.land .theme-row {
grid-area: theme; justify-self: center; flex-wrap: nowrap; gap: 10px; margin: 14px 0 0; padding: 5px 5px 5px 16px;
border: 1px solid var(--sd-hair) !important; border-radius: 99px !important;
background: var(--sd-glass) !important; box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#screen-title.land .theme-row::before,
#screen-title.land .theme-row::after { content: none; }
#screen-title.land .theme-row label strong { font: 700 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #e8c37a; white-space: nowrap; }
#screen-title.land .theme-row select { flex: 0 0 auto; width: 210px; min-height: 34px; border-radius: 99px; font-size: 14px; }
/* ---------- heroes: free-standing sprites on floor glows, plate below ---------- */
#screen-title.land .class-card {
position: relative; isolation: isolate; align-self: end;
display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0;
padding: 0 16px 16px; text-align: center;
background: none !important; border: 0 !important; border-radius: 14px !important; box-shadow: none !important;
}
#screen-title.land .class-card:first-child { grid-area: warr; }
#screen-title.land .class-card:nth-child(2) { grid-area: mage; }
/* the plate (h2 + blurb + Play button) is drawn behind the text, below the art */
#screen-title.land .class-card::after {
content: ""; position: absolute; z-index: -1; inset: calc(var(--sd-art-h) + 4px + var(--pp-drop, 0px)) 0 0 0; pointer-events: none;
border-radius: 14px; border: 1px solid var(--sd-hair); opacity: 1;
background: linear-gradient(180deg, rgba(20,17,14,.62), rgba(10,9,8,.84));
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
box-shadow: inset 0 1px 0 rgba(255,235,190,.1), 0 12px 30px rgba(0,0,0,.5);
}
#screen-title.land .class-card::before { content: none; }
#screen-title.land .class-card > .land-alcove,
#screen-title.land .class-card > .art { order: 0; }
#screen-title.land .class-card > h2 { order: 1; }
#screen-title.land .class-card > p { order: 2; }
#screen-title.land .class-card > .btn { order: 3; }
#screen-title.land .land-alcove {
width: calc(var(--sd-art-h) * 5 / 6); max-width: 100%; height: var(--sd-art-h); margin: 0 auto 4px; flex: 0 0 auto;
}
#screen-title.land .class-card > .btn + .land-alcove { margin-top: 0; }
#screen-title.land .land-stage {
height: 100%; aspect-ratio: auto; overflow: visible; border-radius: 0; box-shadow: none;
background: radial-gradient(ellipse 58% 11% at 50% 95%, rgba(255,150,60,.62) 0%, rgba(255,110,30,.26) 45%, transparent 72%);
}
#screen-title.land .land-stage-mage {
background: radial-gradient(ellipse 58% 11% at 50% 95%, rgba(80,160,255,.62) 0%, rgba(54,120,242,.26) 45%, transparent 72%);
}
/* floor-glow ring (replaces the old arch frame) */
#screen-title.land .land-stage::after {
inset: auto 14% 1.5% 14%; height: 7%; z-index: 0; border-radius: 50%;
border: 1px solid rgba(255,200,130,.55); box-shadow: 0 0 16px rgba(255,150,60,.5);
}
#screen-title.land .land-stage-mage::after { border-color: rgba(160,205,255,.6); box-shadow: 0 0 16px rgba(80,160,255,.55); }
#screen-title.land .land-hero { filter: drop-shadow(0 10px 10px rgba(0,0,0,.75)) brightness(.96); }
#screen-title.land .land-stage-mage .land-hero { transform: translateX(-50%) scaleX(-1); } /* mage faces down the corridor */
#screen-title.land .land-stage-mage .land-hero.land-hero-wide { transform: translateX(-69.53%) scaleX(-1); } /* mirror of -30.47% */
/* J-1002-LANDING-CLICK task 2: each hero stands ON its ring. The ring (::after above) is centred
at 50% / 95% of the stage. One anchor per hero = its IDLE stance (midpoint of the two foot
centres, from the art's bottom-8% opaque pixels), so frame-to-frame registration is unchanged:
strike / chop / zap / fireball keep their own steps relative to idle. Offsets are % of the
hero's own box (x) and of the stage height (y), so they scale at every size.
- warrior idle 526x696: feet at x 194.75 (37.02%), soles 57px above the canvas bottom.
- warrior strike/chop 864x765, same px scale: soles 81px up, so they sit 4% of the stage lower
than before to stop the 0.04-art-h hop on every idle -> strike / chop switch.
- mage idle 526x696 (flipped): feet at x 172.5; fireball 864 wide keeps the idle origin.
Soles land 1% of the stage below the ring centre. */
#screen-title.land .land-stage-warrior .land-hero { bottom: -5.5%; transform: translateX(-37.02%); }
#screen-title.land .land-stage-warrior .land-hero.land-hero-chop { bottom: -9.5%; transform: translateX(-45.43%); }
/* J-1010-KNIGHT-SCALE-FIX: knight-tall 1500x1648 (320 px headroom over the old 1328 box, same
147 px under the soles) at the old box's pixel scale: 127.5% x 1648/1328. Same width, feet and x. */
/* J-1018-6: knight centred on the ring */
#screen-title.land .land-stage-warrior .land-hero.land-hero-knight { height: 158.22%; bottom: -12%; transform: translateX(-50.75%); }
/* J-1011-KNIGHT-UNLOCKS: Holy Meteor smite layers (landing.js landSmite). #86819: padded frames
(1500x1648 + 300 px per side = 2100x2248; small set to scale) in a page-level overlay that
landing.js lays on the knight's live box each frame (inner canvas = knight canvas). z 40: over
the panels and the landing top bar (computed z 30), under menus (80) and the loading overlay (1000).
The pad's light fades to 0 at its border, so nothing ends on a hard edge. */
.land-smite { display: block; visibility: hidden; position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 40;
max-width: none; max-height: none; pointer-events: none; filter: none; }
.land-smite.on { visibility: visible; } /* visibility, not display: landing.js measures the placed box */
.land-smite-light { z-index: 41; mix-blend-mode: plus-lighter; }
#screen-title.land .land-stage-mage .land-hero { bottom: .5%; transform: translateX(-67.21%) scaleX(-1); }
#screen-title.land .land-stage-mage .land-hero.land-hero-wide { transform: translateX(-80.03%) scaleX(-1); }
#screen-title.land .land-call { top: 14%; }
/* reduced-motion fallback: landing.js leaves the static ![]()
in place */
#screen-title.land .class-card > .art {
width: calc(var(--sd-art-h) * 5 / 6); height: var(--sd-art-h); max-width: 100%; aspect-ratio: auto; margin: 0 auto 4px;
object-fit: contain; object-position: center bottom; border: 0; border-radius: 0;
background: radial-gradient(ellipse 58% 11% at 50% 95%, rgba(255,150,60,.55), transparent 72%);
}
#screen-title.land #class-art-mage { transform: scaleX(-1); object-position: center; background: none;
/* hero-mage.webp is an opaque square portrait: feather its edges into the corridor */
-webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
#screen-title.land .class-card > h2 {
margin: calc(14px + var(--pp-drop, 0px)) 0 4px; font: 600 22px/1 "Cinzel Lore", Georgia, serif; letter-spacing: .16em; text-transform: uppercase;
color: #ffd98a; text-shadow: 0 0 14px rgba(255,140,50,.45);
}
#screen-title.land .class-card:nth-child(2) > h2 { color: #cfe4ff; text-shadow: 0 0 14px rgba(54,150,242,.55); }
#screen-title.land .class-card > p { flex: 0 0 auto; margin: 0 0 10px; min-height: 4.05em; font-size: 13.5px; line-height: 1.35; color: #d8cbb0; }
#screen-title.land .class-card > p strong { color: #ffe3a3; }
/* Play as Warrior / Play as Mage: the real start buttons. Their ::after stretches over
the hero art, so clicking a hero IS clicking the button (same game.js handler, no JS).
The button must not be a containing block: no position, transform or filter on it. */
#screen-title.land .class-card > .btn[data-class] {
position: static; transform: none; filter: none; width: 100%; min-height: 46px; border-radius: 9px;
font: 600 16px/1 "Cinzel Lore", Georgia, serif; letter-spacing: .08em;
}
#screen-title.land .class-card > .btn[data-class]:not(:disabled):hover,
#screen-title.land .class-card > .btn[data-class]:not(:disabled):active { transform: none; filter: none; }
#screen-title.land .class-card > .btn[data-class]::after {
content: ""; position: absolute; z-index: 6; left: 0; right: 0; top: 0; height: var(--sd-art-h); cursor: pointer;
}
/* J-1002-TYPING-LANDING-CLICK: the hero art is decoration only, so no frame of it (idle, strike,
chop, fireball) or its glow / callout / flares can ever take a click meant for Play.
Hit-testing only: paint order is unchanged (a z-index lift on the button moved its glow
over the hero's drop shadow on phones, so it was left out). Clicks on the art still reach
the button through its ::after above. */
#screen-title.land .class-card > .land-alcove,
#screen-title.land .class-card > .land-alcove *,
#screen-title.land .class-card > .art { pointer-events: none; }
#screen-title.land .class-card > .btn-warrior { --btn-top: rgba(255,235,200,.5); --btn-face: #e9803c; --btn-bot: #8a2c0a; --btn-ink: #fff;
border-color: rgba(255,210,150,.75) !important; box-shadow: inset 0 0 14px rgba(255,170,80,.45), 0 4px 16px rgba(255,100,30,.25), 0 2px 6px rgba(0,0,0,.5); }
#screen-title.land .class-card > .btn-mage { --btn-top: rgba(220,230,255,.5); --btn-face: #5a78f0; --btn-bot: #1d2585; --btn-ink: #fff;
border-color: rgba(190,210,255,.75) !important; box-shadow: inset 0 0 14px rgba(100,160,255,.45), 0 4px 16px rgba(60,120,255,.25), 0 2px 6px rgba(0,0,0,.5); }
#screen-title.land .class-card > .btn-warrior:not(:disabled):hover { box-shadow: inset 0 0 18px rgba(255,190,100,.6), 0 6px 22px rgba(255,110,30,.45), 0 2px 6px rgba(0,0,0,.5); }
#screen-title.land .class-card > .btn-mage:not(:disabled):hover { box-shadow: inset 0 0 18px rgba(130,180,255,.6), 0 6px 22px rgba(60,120,255,.45), 0 2px 6px rgba(0,0,0,.5); }
#screen-title.land .class-card:has(> .btn:hover) .land-hero,
#screen-title.land .class-card:has(> .btn:hover) > .art { filter: drop-shadow(0 10px 10px rgba(0,0,0,.75)) drop-shadow(0 0 18px rgba(255,200,120,.55)) brightness(1.06); }
#screen-title.land .class-card:has(> .btn:focus-visible)::after { border-color: var(--sd-gold); }
/* daily buttons share the hero colours on the landing */
.app:has(> #screen-title.land.active) > .topbar .btn-warrior { --btn-top: rgba(255,235,200,.45); --btn-face: #e9803c; --btn-bot: #8a2c0a; }
.app:has(> #screen-title.land.active) > .topbar .btn-mage { --btn-top: rgba(220,230,255,.45); --btn-face: #5a78f0; --btn-bot: #1d2585; }
/* ---------- lower panels: soft gradient + gold hairline ---------- */
#screen-title.land .scoreboard-shell { grid-area: board; width: min(1200px, 100%); justify-self: center; margin: 34px 0 0; }
/* Top 100 on the left, the two dailies stacked on the right */
@media (min-width: 1101px) {
#screen-title.land .scoreboard-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
#screen-title.land .scoreboard-split > .scoreboard-card:first-child { grid-row: span 2; align-self: stretch; }
}
#screen-title.land .tt-museum { grid-area: museum; width: min(1200px, 100%); justify-self: center; }
#screen-title.land #btn-howto { grid-area: howto; display: block; width: fit-content; justify-self: center; margin: 28px auto 8px; }
#screen-title.land .foot-note { grid-area: foot; justify-self: center; text-align: center; margin-top: 10px; color: #a8987a; }
#screen-title.land .scoreboard-card,
#screen-title.land .tt-museum {
border: 1px solid var(--sd-hair) !important; border-radius: 14px !important;
background: linear-gradient(160deg, rgba(42,34,28,.92), rgba(16,14,12,.95) 60%) !important;
box-shadow: inset 0 0 0 1px rgba(255,235,190,.05), inset 0 1px 0 rgba(255,235,190,.1), 0 14px 34px rgba(0,0,0,.45) !important;
}
#screen-title.land .scoreboard-card::before, #screen-title.land .scoreboard-card::after,
#screen-title.land .tt-museum::before, #screen-title.land .tt-museum::after { content: none; }
#screen-title.land .tt-museum { margin: 22px 0 0; padding: 22px 26px 24px; }
#screen-title.land .scoreboard-heading h2,
#screen-title.land .tt-museum > h2 { font: 600 17px/1.2 "Cinzel Lore", Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: #f0d58a; text-shadow: none; }
#screen-title.land .tt-museum-lead { color: #d8cbb0; max-width: 760px; }
#screen-title.land .tt-code-row input { background: rgba(8,8,10,.55); border-color: var(--sd-hair); }
/* ---------- wide screens: bigger heroes ---------- */
@media (min-width: 1700px) {
#screen-title.land > .card.hero { max-width: 1560px; grid-template-columns: minmax(0, 390px) minmax(0, 1fr) minmax(0, 390px); }
}
/* ---------- narrower desktops: dailies stay one line ---------- */
@media (min-width: 701px) and (max-width: 1279px) {
.app:has(> #screen-title.land.active) > .topbar .brand em { display: none; }
}
@media (min-width: 701px) and (max-width: 1023px) {
.app:has(> #screen-title.land.active) > .topbar .daily-copy { display: none; }
}
@media (min-width: 701px) and (max-width: 1100px) {
#screen-title.land > .card.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "title title" "intro intro" "theme theme" "warr mage" "bard bard" "board board" "museum museum" "howto howto" "foot foot"; grid-template-rows: auto; }
#screen-title.land > .card.hero { --sd-art-h: clamp(200px, calc(100vh - 520px), 360px); }
#screen-title.land .class-card { margin-top: 18px; }
}
/* ---------- phones (after "Play anyway"): compact 3-row strip, heroes side by side ---------- */
@media (max-width: 700px) {
body:has(#screen-title.land.active) {
background:
linear-gradient(180deg, rgba(6,5,4,.80) 0%, rgba(6,5,4,.30) 26%, rgba(6,5,4,0) 44%, rgba(6,5,4,.12) 70%, rgba(10,8,7,.94) 96%, #0a0807 100%) center top / auto 680px no-repeat,
url("../assets/landing/hero-showdown-corridor-960.webp?v=showdown1") center top / auto 680px no-repeat,
#0a0807;
}
.app:has(> #screen-title.land.active) > .topbar {
display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-areas: "brand player mute" "music music ver" "daily daily daily";
gap: 6px; padding: 7px; align-items: center;
}
.app:has(> #screen-title.land.active) > .topbar .topbar-actions { display: contents; }
.app:has(> #screen-title.land.active) > .topbar .brand { grid-area: brand; min-width: 0; }
.app:has(> #screen-title.land.active) > .topbar .brand-mark { width: 28px; height: 28px; flex-basis: 28px; }
.app:has(> #screen-title.land.active) > .topbar .brand strong { font-size: 13px; }
.app:has(> #screen-title.land.active) > .topbar .brand em { display: none; }
.app:has(> #screen-title.land.active) > .topbar .app-version { grid-area: ver; justify-self: end; font-size: 9px; }
.app:has(> #screen-title.land.active) > .topbar .player-menu { grid-area: player; }
.app:has(> #screen-title.land.active) > .topbar #btn-mute { grid-area: mute; width: auto; flex: none; }
.app:has(> #screen-title.land.active) > .topbar #btn-developer { grid-column: 1 / -1; }
.app:has(> #screen-title.land.active) > .topbar .developer-panel { grid-column: 1 / -1; }
.app:has(> #screen-title.land.active) > .topbar .btn-ghost { min-height: 34px; padding: 0 10px; font-size: 12px; }
.app:has(> #screen-title.land.active) > .topbar .bgm-picker { grid-area: music; min-width: 0; min-height: 34px; }
.app:has(> #screen-title.land.active) > .topbar .bgm-picker select { flex: 1; min-width: 0; width: 100%; max-width: none; padding-right: 26px; background-position: right 8px center; font-size: 12.5px; }
.app:has(> #screen-title.land.active) > .topbar .daily-entry { grid-area: daily; display: flex; padding: 4px; border-radius: 12px; gap: 6px; }
.app:has(> #screen-title.land.active) > .topbar .daily-copy { display: none; }
.app:has(> #screen-title.land.active) > .topbar .daily-actions { flex: 1; flex-wrap: nowrap; }
.app:has(> #screen-title.land.active) > .topbar .daily-actions .btn { flex: 1; min-height: 32px; }
#screen-title.land > .card.hero {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px;
grid-template-areas: "title title" "intro intro" "theme theme" "warr mage" "bard bard" "board board" "museum museum" "howto howto" "foot foot";
grid-template-rows: auto; padding: 4px 0 30px; --sd-art-h: 168px;
}
#screen-title.land .hero > h1 { margin: 10px 0 8px; }
#screen-title.land .land-title-main { font-size: 36px; }
#screen-title.land .land-title-sub { font-size: 13px; letter-spacing: .26em; }
#screen-title.land .land-title-sub::before, #screen-title.land .land-title-sub::after { width: 26px; margin: 0 8px; }
#screen-title.land .hero > p:not(.foot-note) { font-size: 14.5px; }
#screen-title.land .theme-row { width: 100%; margin-top: 10px; padding-left: 12px; border-radius: 12px !important; }
#screen-title.land .theme-row select { flex: 1; min-width: 0; width: auto; }
#screen-title.land .class-card { margin-top: 10px; padding: 0 8px 10px; align-self: start; }
#screen-title.land .class-card::after { border-radius: 12px; }
#screen-title.land .class-card > h2 { margin: 12px 0 7px; font-size: 16px; }
#screen-title.land .class-card > .btn[data-class] { order: 2; min-height: 40px; font-size: 11.5px; letter-spacing: .02em; padding: 0 4px; white-space: nowrap; }
/* J-1005-36: center each hero on its own card, over its own Play As button. */
#screen-title.land .class-card:first-child > .land-alcove,
#screen-title.land .class-card:nth-child(2) > .land-alcove {
align-self: center; margin-left: auto; margin-right: auto;
}
#screen-title.land .class-card > p { order: 3; min-height: 0; margin: 8px 0 0; font-size: 12px; }
#screen-title.land .land-call { font-size: 1.1rem; }
#screen-title.land .land-call.big { font-size: 1.25rem; }
#screen-title.land .scoreboard-shell { margin-top: 22px; }
#screen-title.land .tt-museum { padding: 18px 14px; }
}
/* Ambient bats (landing.js) fly UNDER the landing top bar, not across the daily / Music /
Sound buttons: on phones a passing bat read as a dark smudge over "Mage daily".
19 is the value the desktop top bar already uses (under every modal: score detail 20+). */
.app:has(> #screen-title.land.active) > .topbar { z-index: 19; }
body:has(#screen-title.land.active) > .land-bat { z-index: 18; }
/* J-1005-TYPING-MUSIC-PICKER: the closed name and every song row stay fully visible. */
.app:has(> #screen-title.land.active) > .topbar .bgm-picker-toggle,
.app:has(> #screen-title.land.active) > .topbar .bgm-picker-value,
.app:has(> #screen-title.land.active) > .topbar .bgm-menu,
.app:has(> #screen-title.land.active) > .topbar .bgm-random,
.app:has(> #screen-title.land.active) > .topbar .bgm-song,
.app:has(> #screen-title.land.active) > .topbar .bgm-song span {
text-transform: none; letter-spacing: 0; white-space: normal;
}
.app:has(> #screen-title.land.active) > .topbar .bgm-picker-value { white-space: nowrap; }
.app:has(> #screen-title.land.active) > .topbar .bgm-picker-toggle {
flex: 1 1 auto; min-width: min-content; width: auto; max-width: none;
color: var(--sd-ink); background: rgba(8,8,10,.55);
border: 1px solid var(--sd-hair); border-radius: 7px;
font: 600 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (max-width: 700px) {
.app:has(> #screen-title.land.active) > .topbar {
/* J-1006-127: version (with Dev under it) shares the brand row. */
grid-template-columns: minmax(0, 1fr) auto auto auto;
grid-template-areas: "brand ver player mute" "music music music music" "daily daily daily daily";
}
.app:has(> #screen-title.land.active) > .topbar .app-version { grid-area: ver; justify-self: end; padding: 3px 5px; }
.app:has(> #screen-title.land.active) > .topbar .brand strong { white-space: normal; line-height: 1.1; }
}
@media (max-width: 380px) {
.app:has(> #screen-title.land.active) > .topbar { column-gap: 4px; }
.app:has(> #screen-title.land.active) > .topbar .app-version { padding: 3px 4px; font-size: 8px; }
.app:has(> #screen-title.land.active) > .topbar .btn-ghost { padding: 0 7px; }
.app:has(> #screen-title.land.active) > .topbar .bgm-picker {
grid-area: music; width: 100%; min-width: 0; display: flex;
}
.app:has(> #screen-title.land.active) > .topbar .bgm-picker-toggle {
flex: 1 1 auto; min-width: 0; width: 100%; max-width: 100%; font-size: 14px;
}
}
/* J-1005-1: "Now playing" hangs under the Music control. Absolute so the
Play as Warrior / Play as Mage buttons do not move when it shows or hides. */
#landing-now-playing { display: none; margin: 0; }
.app:has(> #screen-title.land.active) #landing-now-playing:not([hidden]) {
display: block;
position: absolute;
left: 11px;
top: calc(100% + 3px);
z-index: 3;
width: max-content;
max-width: calc(100vw - 20px);
margin: 0;
padding: 1px 7px 2px;
border-radius: 6px;
background: rgba(8, 8, 10, 0.78);
color: #f0e6d0;
font: 600 12px/1.25 system-ui, -apple-system, "Segoe UI", sans-serif;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
}
#landing-now-playing[hidden] { display: none !important; }
@media (max-width: 700px) {
.app:has(> #screen-title.land.active) #landing-now-playing:not([hidden]) {
left: 0;
top: calc(100% + 4px);
max-width: calc(100% - 6.75rem);
padding: 0 4px 1px;
font-size: 10px;
}
}
/* J-1005-TYPING-LAYOUT-FIX-LIVE
The corridor light layer is wider than the window (about 1209px, hanging
off both sides). Clip it so the landing never grows a sideways scrollbar.
Vertical scrolling stays on the viewport. */
html:has(#screen-title.land.active),
body:has(#screen-title.land.active) {
overflow-x: clip;
}
/* J-1005-12: At tablet / narrow-laptop widths the original three-column
scene let the Bard occupy the same grid row as the two hero cards. Keep
the compact two-up heroes from the phone layout, then give the Bard and
parchment their own row underneath. The !important flags deliberately
win over bard-tale.css, which is loaded after this sheet and owns only the
Bard's art / fairy behaviour. Fairies still use that code's right-of-
scroll placement and may overlap the Mage rather than squeeze the heroes. */
@media (min-width: 701px) and (max-width: 1100px) {
#screen-title.land > .card.hero {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"title title"
"intro intro"
"theme theme"
"warr mage"
"bard bard"
"board board"
"museum museum"
"howto howto"
"foot foot";
grid-template-rows: auto;
column-gap: 12px;
--sd-art-h: clamp(168px, 28vw, 250px);
}
#screen-title.land .class-card { margin-top: 10px; padding: 0 8px 10px; align-self: start; }
#screen-title.land .class-card > h2 { margin: 12px 0 7px; font-size: 16px; }
#screen-title.land .class-card > .btn[data-class] { min-height: 40px; font-size: 11.5px; letter-spacing: .02em; padding: 0 4px; white-space: nowrap; }
#screen-title.land .class-card > p { min-height: 0; margin: 8px 0 0; font-size: 12px; }
/* J-1005-36: center each hero on its own card, over its own Play As button. */
#screen-title.land .class-card:first-child > .land-alcove,
#screen-title.land .class-card:nth-child(2) > .land-alcove {
align-self: center; margin-left: auto; margin-right: auto;
}
#screen-title.land .bard-stage {
grid-area: bard !important;
grid-column: 1 / -1 !important;
grid-row: auto !important;
align-self: start !important;
justify-self: center !important;
width: min(500px, 94%) !important;
/* Match bard-tale.css: the row is as tall as the parchment, so the
scroll cannot climb onto the Play As plates. */
height: auto !important;
min-height: 0 !important;
margin: 18px auto 0 !important;
z-index: 1;
}
}
/* Below 1400px the daily chips, Player 1 and the music control cannot share
one nowrap row. The chips were painting on top of Player 1 and Music.
Give the chips their own full-width row. 1440 stays the single row. */
@media (min-width: 701px) and (max-width: 1399px) {
.app:has(> #screen-title.land.active) > .topbar {
display: grid;
grid-template-columns: auto auto auto minmax(0, 1fr) auto;
grid-template-areas: "brand ver player music mute" "daily daily daily daily daily";
align-items: center;
column-gap: 8px;
row-gap: 6px;
}
.app:has(> #screen-title.land.active) > .topbar .topbar-actions { display: contents; }
.app:has(> #screen-title.land.active) > .topbar .brand { grid-area: brand; min-width: 0; }
.app:has(> #screen-title.land.active) > .topbar .app-version { grid-area: ver; justify-self: start; }
.app:has(> #screen-title.land.active) > .topbar .player-menu { grid-area: player; }
.app:has(> #screen-title.land.active) > .topbar .bgm-picker {
grid-area: music; min-width: 0; max-width: 100%;
}
.app:has(> #screen-title.land.active) > .topbar .bgm-picker-toggle,
.app:has(> #screen-title.land.active) > .topbar .bgm-picker select {
min-width: 0; max-width: 100%;
}
.app:has(> #screen-title.land.active) > .topbar .bgm-picker-value {
overflow: hidden; text-overflow: ellipsis;
}
.app:has(> #screen-title.land.active) > .topbar #btn-mute {
grid-area: mute; width: auto; flex: 0 0 auto;
}
.app:has(> #screen-title.land.active) > .topbar #btn-developer,
.app:has(> #screen-title.land.active) > .topbar .developer-panel { grid-column: 1 / -1; }
.app:has(> #screen-title.land.active) > .topbar .daily-entry {
grid-area: daily; flex: none; min-width: 0; max-width: 100%; width: max-content;
}
.app:has(> #screen-title.land.active) > .topbar .daily-actions .btn {
position: relative; z-index: 1;
}
/* The extra daily row is about one control tall. Shorten the heroes by
that much so Play as Warrior / Play as Mage stay on a 900px screen. */
#screen-title.land > .card.hero {
--sd-art-h: clamp(168px, calc(100vh - 590px), 300px);
}
/* Now playing hangs from the music control. On this two-row bar that
control sits above the daily chips, so drop the line under the bar. */
.app:has(> #screen-title.land.active) > .topbar #landing-now-playing:not([hidden]) {
top: calc(100% + 58px);
z-index: 5;
max-width: min(26rem, 46vw);
}
}