diff --git a/index.html b/index.html index 62c74a0..86263d8 100644 --- a/index.html +++ b/index.html @@ -140,11 +140,13 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') { /* ONE overlay, four panels, swapped by #intro[data-stage]. Keeping the backdrop and the card frame alive across every screen is the point — a screen that unmounts the whole overlay flashes the court through between menus. */ - #splash, #setup, #stats, #ranks, #newbest, #secret, #bosses { display: none; } + #splash, #setup, #stats, #ranks, #newbest, #secret, #bosses, #stmode, #stsub { display: none; } #intro[data-stage="splash"] #splash { display: flex; flex-direction: column; flex: 1; } /* flex COLUMN, not block: it is what lets the footer's margin-top:auto reach the bottom of a screen whose content does not fill it */ #intro[data-stage="setup"] #setup, + #intro[data-stage="mode"] #stmode, + #intro[data-stage="modesub"] #stsub, #intro[data-stage="stats"] #stats, #intro[data-stage="ranks"] #ranks, #intro[data-stage="secret"] #secret, @@ -235,16 +237,15 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') { at cream-on-crowd was the report from the first live look */ #modeList i, #modeSub i { color: #fff; font-size: 10px; margin-bottom: 0; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 0 0 7px #000; } - /* THE SECOND STEP (config.MENU): the picked poster's own choices, inset so they read as its - children. Sub-mode cards are the same poster at ~2/3 height, centred on their scene rather - than bottom-anchored (a 64px window off the bottom of these scenes is all court and shins); - the difficulty chips are plain acid-outline buttons — art for EASY/MEDIUM/HARD would be - forced, and the chip row reads faster anyway. */ - #modeSub { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 14px; margin: 0 0 8px; } - #modeSub:empty { display: none; } - #modeSub button.mode.sm { flex: 1 1 100%; min-height: 64px; margin: 0; background-position: center; } - #modeSub button.chip { flex: 1; padding: 12px 0; background: var(--panel); border: 2px solid var(--line); - color: var(--cream); font: 400 11px Silkscreen, monospace; letter-spacing: 1px; + /* THE SECOND STEP (config.MENU) has its own SCREEN in the wizard: sub-mode cards are + full-height posters centred on their scene, and the difficulty chips are plain acid-outline + buttons stacked tall — art for EASY/MEDIUM/HARD would be forced, and the chip reads faster. */ + /* alone on their own screens, the posters get room to be posters */ + #stmode button.mode, #modeSub button.mode { min-height: 148px; } + #modeSub { display: flex; flex-wrap: wrap; gap: 8px; } + #modeSub button.mode { background-position: center; } + #modeSub button.chip { flex: 1 1 100%; padding: 22px 0; background: var(--panel); border: 2px solid var(--line); + color: var(--cream); font: 400 13px Silkscreen, monospace; letter-spacing: 2px; cursor: pointer; -webkit-tap-highlight-color: transparent; } #modeSub button.chip.on { border-color: var(--acid); color: var(--acid); background: rgba(188,212,85,0.09); } #courtList button.court { display: flex; align-items: center; gap: 11px; width: 100%; @@ -378,14 +379,24 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') { + +