/* Sayonara_Alice.exe — Starfall 4072 campaign v90 */ .starfall-intro-v90 { --star-x: 0px; --star-y: 0px; position: relative; width: min(1160px, 100%); /* `svh` e non `dvh`: la seconda cresce e cala mentre la barra del browser si ritrae, e il pannello si ridimensionerebbe sotto le dita. E' la stessa scelta gia' fatta per la Home. */ height: clamp(500px, calc(100svh - 150px), 700px); min-height: 0; margin: auto; overflow: hidden; isolation: isolate; border: 1px solid rgba(84, 215, 255, .3); background: #01040d; box-shadow: 0 40px 120px rgba(0, 0, 0, .72), inset 0 0 80px rgba(27, 133, 255, .1); } .starfall-intro-v90::before, .starfall-intro-v90::after { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none; } .starfall-intro-v90::before { background: linear-gradient(90deg, transparent 0 48%, rgba(0, 5, 16, .08) 62%, rgba(0, 5, 16, .74) 100%), linear-gradient(0deg, rgba(0, 4, 13, .7), transparent 48%); } .starfall-intro-v90::after { inset: 15px; border: 1px solid rgba(117, 227, 255, .16); background: linear-gradient(90deg, #8cefff, transparent) 0 0 / 110px 1px no-repeat, linear-gradient(#8cefff, transparent) 0 0 / 1px 110px no-repeat, linear-gradient(270deg, rgba(144, 104, 255, .7), transparent) 100% 100% / 110px 1px no-repeat, linear-gradient(0deg, rgba(144, 104, 255, .7), transparent) 100% 100% / 1px 110px no-repeat; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .starfall-parallax-v90 { position: absolute; z-index: 0; inset: -12px; transform: translate3d(var(--star-x), var(--star-y), 0) scale(1.035); transition: transform .9s cubic-bezier(.16, 1, .3, 1); } .starfall-portrait-v90 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: saturate(.94) contrast(1.05) brightness(.96); transform: scale(1.025); transition: opacity .65s ease, transform 5s ease; } .starfall-portrait-v90.is-current { opacity: 1; transform: scale(1.045); } .starfall-space-dust-v90 { position: absolute; z-index: 2; inset: -25%; opacity: .48; pointer-events: none; background: radial-gradient(circle at 22% 34%, rgba(116, 227, 255, .8) 0 1px, transparent 1.5px), radial-gradient(circle at 68% 18%, rgba(151, 126, 255, .72) 0 1px, transparent 1.6px), radial-gradient(circle at 80% 74%, rgba(99, 207, 255, .7) 0 1px, transparent 1.4px); background-size: 89px 97px, 131px 113px, 157px 149px; animation: v90-star-drift 24s linear infinite; mix-blend-mode: screen; } .starfall-sync-reticle-v90 { position: absolute; z-index: 5; top: 32px; right: 32px; width: 74px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(110, 227, 255, .35); border-radius: 50%; color: rgba(163, 237, 255, .72); font: 700 7px/1 "Courier New", monospace; letter-spacing: .16em; box-shadow: inset 0 0 24px rgba(65, 201, 255, .08); animation: v90-reticle-turn 12s linear infinite; } .starfall-sync-reticle-v90 i { position: absolute; inset: 8px; border: 1px dashed rgba(143, 104, 255, .42); border-radius: 50%; } .starfall-dialogue-v90 { box-sizing: border-box; right: clamp(16px, 2.5vw, 34px); bottom: clamp(18px, 3vh, 34px); /* Il pannello e' ancorato al fondo e cresce verso l'alto. Finche' il contenuto era corto andava bene; da quando ne contiene sei blocchi il suo bordo superiore esce dalla cornice e `overflow: hidden` lo ritaglia -- misurato a 1365x768, `top` calcolato -36px contro un intro che comincia a 0: 35px di pannello fisicamente fuori, e la prima voce mozzata. Il tetto glielo impedisce: al massimo arriva a filo della cornice meno lo stesso respiro che ha sotto, e da li' scorre al suo interno. `overflow-anchor: none` perche' quando il contenuto cambia il browser sposta lo scroll da solo per "tenere fermo" cio' che si guarda. */ max-height: calc(100% - 2 * clamp(18px, 3vh, 34px)); overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; width: min(34%, 390px); padding: clamp(16px, 2vw, 23px); background: linear-gradient(135deg, rgba(8, 34, 63, .78), rgba(0, 7, 17, .86) 74%); backdrop-filter: blur(9px); } .starfall-dialogue-v90 p { min-height: 3.8em; margin: 17px 0; font-size: clamp(14px, 1.28vw, 19px); } .starfall-difficulty-v90 { display: grid; grid-template-columns: 1fr; gap: 7px; margin: 0 0 13px; } .starfall-difficulty-v90[hidden] { display: none; } .starfall-difficulty-v90 button { min-height: 42px; padding: 7px 10px; border: 1px solid rgba(91, 203, 255, .18); color: rgba(157, 204, 222, .62); background: rgba(3, 13, 27, .74); font: 700 9px/1.25 "Courier New", monospace; letter-spacing: .07em; text-align: left; cursor: pointer; } .starfall-difficulty-v90 button span, .starfall-difficulty-v90 button small { display: block; } .starfall-difficulty-v90 button small { margin-top: 4px; color: rgba(138, 216, 240, .72); font-size: 8px; letter-spacing: .12em; } .starfall-difficulty-v90 button:hover, .starfall-difficulty-v90 button.is-active { color: #e4fbff; border-color: rgba(98, 225, 255, .68); background: rgba(13, 75, 111, .5); box-shadow: inset 0 0 18px rgba(68, 211, 255, .12), 0 0 14px rgba(68, 211, 255, .08); } .starfall-intro-v90.is-configuring .starfall-dialogue-v90 { width: min(44%, 540px); max-height: calc(100% - 36px); overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(87, 215, 255, .46) rgba(0, 8, 19, .35); } .starfall-mode-v93 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0 0 12px; } .starfall-mode-v93[hidden], .starfall-boss-picker-v93[hidden] { display: none; } .starfall-mode-v93 button, .starfall-boss-picker-v93 button { border: 1px solid rgba(91, 203, 255, .2); color: rgba(216, 246, 255, .88); background: linear-gradient(145deg, rgba(8, 35, 62, .82), rgba(2, 9, 22, .9)); font-family: "Courier New", monospace; text-align: left; cursor: pointer; transition: border-color .2s ease, transform .2s ease, background .2s ease, box-shadow .2s ease; } .starfall-mode-v93 button { min-height: 58px; padding: 9px; } .starfall-mode-v93 b { display: block; color: #e4fbff; font-size: 9px; letter-spacing: .11em; } .starfall-mode-v93 small { display: block; margin-top: 6px; color: rgba(150, 218, 239, .72); font-size: 8px; line-height: 1.4; } .starfall-mode-v93 button:hover, .starfall-boss-picker-v93 button:hover { border-color: rgba(111, 225, 255, .72); transform: translateY(-1px); background: rgba(17, 67, 105, .72); box-shadow: 0 0 18px rgba(67, 209, 255, .11); } .starfall-boss-picker-v93 { margin: 0 0 12px; padding: 9px; border: 1px solid rgba(111, 92, 255, .2); background: rgba(1, 5, 17, .8); } .starfall-boss-picker-v93 > span { display: block; margin-bottom: 8px; color: rgba(179, 215, 255, .76); font: 700 8px/1.25 "Courier New", monospace; letter-spacing: .16em; } .starfall-boss-picker-v93 > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; max-height: 210px; overflow: auto; padding-right: 3px; scrollbar-width: thin; } .starfall-boss-picker-v93 button { position: relative; min-height: 43px; padding: 7px 7px 7px 30px; } .starfall-boss-picker-v93 button i { position: absolute; left: 8px; top: 9px; color: #9884ff; font-size: 8px; font-style: normal; } .starfall-boss-picker-v93 button b { display: block; overflow: hidden; color: #dff9ff; font-size: 8px; letter-spacing: .065em; text-overflow: ellipsis; white-space: nowrap; } .starfall-boss-picker-v93 button small { display: block; margin-top: 4px; color: rgba(173, 151, 255, .82); font-size: 7px; letter-spacing: .1em; } .starfall-intro-actions-v90 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .starfall-intro-actions-v90 .game-btn { min-width: 0; padding-inline: 7px; overflow: hidden; font-size: clamp(8px, .72vw, 10px); line-height: 1.3; white-space: normal; text-overflow: ellipsis; } .starfall-audio-v90 { min-width: 112px; } .starfall-cycle-picker-v99 { display: grid; gap: 8px; margin-bottom: 10px; } .starfall-cycle-picker-v99[hidden] { display: none; } .starfall-cycle-picker-v99 > span, .starfall-pilot-v99 > span { color: #75dcff; font: 700 8px/1.25 "Courier New", monospace; letter-spacing: .16em; } .starfall-cycle-picker-v99 > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .starfall-cycle-picker-v99 button { min-height: 42px; padding: 7px; border: 1px solid rgba(100, 220, 255, .23); border-radius: 2px 9px 2px 9px; color: #e4fbff; background: rgba(1, 19, 36, .77); font-family: "Courier New", monospace; cursor: pointer; } .starfall-cycle-picker-v99 button:hover, .starfall-cycle-picker-v99 button:focus-visible { border-color: #72e2ff; box-shadow: inset 0 0 18px rgba(81, 210, 255, .1), 0 0 14px rgba(85, 194, 255, .1); } .starfall-cycle-picker-v99 button b { display: block; font-size: 10px; letter-spacing: .14em; } .starfall-cycle-picker-v99 button small { display: block; margin-top: 4px; color: rgba(172, 202, 224, .62); font-size: 6px; letter-spacing: .06em; } .starfall-pilot-v99 { display: grid; grid-template-columns: auto minmax(120px, 1fr); align-items: center; gap: 10px; margin: 0 0 8px; } .starfall-pilot-v99 input { min-width: 0; height: 34px; padding: 0 10px; border: 1px solid rgba(96, 219, 255, .3); border-radius: 2px 10px 2px 10px; outline: none; color: #e7fcff; background: rgba(0, 10, 25, .82); font: 700 10px/1 "Courier New", monospace; letter-spacing: .12em; } .starfall-pilot-v99 input:focus { border-color: #7ee8ff; box-shadow: 0 0 18px rgba(76, 213, 255, .13); } .starfall-intro-mixer-v99 { margin: 0 0 8px; } .starfall-score-overlay-v99 { position: fixed; z-index: 2147483600; inset: 0; display: none; place-items: center; padding: 18px; } .starfall-score-overlay-v99.is-open { display: grid; } .starfall-score-backdrop-v99 { position: absolute; inset: 0; border: 0; background: rgba(0, 3, 12, .88); backdrop-filter: blur(13px); cursor: default; } /* UN SOLO proprietario dello scroll. Prima erano due numeri indipendenti: il panel `max-height: min(780px, 92dvh)` con `overflow: hidden`, e la lista record `max-height: min(500px, 56dvh)` con `overflow: auto`. Header + filtri + ranking non entrano in cio' che avanza, e la differenza veniva semplicemente tagliata: misurato 397px persi a 390x844 e 182px a 1280x650, con la lista che sforava di 181px oltre il fondo del panel. Nessun elemento possedeva quell'eccedenza, quindi il gesto finiva al documento -- misurato: doc 1002 -> 1502 mentre la modal restava a 0. Adesso scorre il panel, e la lista cresce quanto le serve. `dvh` -> `svh` perche' `dvh` cambia mentre la barra del browser si ritrae, cioe' proprio durante lo scroll. */ .starfall-score-v99 { position: relative; width: min(880px, 96vw); max-height: min(780px, 92svh); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-color: #58d5ff rgba(0, 12, 29, .8); border: 1px solid rgba(91, 218, 255, .38); border-radius: 3px 28px 3px 28px; color: #ddf9ff; background: linear-gradient(145deg, rgba(1, 22, 42, .98), rgba(3, 5, 22, .99) 58%, rgba(20, 9, 55, .98)); box-shadow: 0 0 90px rgba(37, 174, 255, .2), inset 0 0 44px rgba(88, 79, 255, .06); } /* `inset: 0` si fermava all'altezza visibile: da quando il panel scorre, la trama deve coprire anche cio' che sta sotto. */ .starfall-score-v99::before { content: ""; position: absolute; inset: 0 0 auto; width: 100%; height: 100%; min-height: 100%; pointer-events: none; opacity: .15; background-image: linear-gradient(rgba(98,215,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(98,215,255,.12) 1px,transparent 1px); background-size: 32px 32px; } /* Il contenuto ora scorre sotto l'intestazione, quindi le serve un fondo suo: senza, i record si vedrebbero passare sotto il titolo. Il colore e' l'inizio del gradiente del panel, cosi' da fermo non si distingue. */ .starfall-score-v99 header { position: sticky; top: 0; z-index: 4; background: #01152a; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; padding: 24px 28px 18px; border-bottom: 1px solid rgba(99, 220, 255, .18); } .starfall-score-v99 header span, .starfall-score-v99 header p { margin: 0; color: #79ddff; font: 700 8px/1.35 "Courier New", monospace; letter-spacing: .14em; } .starfall-score-v99 h2 { margin: 5px 0 8px; font: 800 clamp(28px, 5vw, 48px)/1 Inter, system-ui, sans-serif; letter-spacing: -.045em; } .starfall-score-v99 header > button { width: 39px; height: 39px; border: 1px solid rgba(107,221,255,.3); border-radius: 50%; color: #bdf4ff; background: rgba(3,31,54,.82); font-size: 24px; cursor: pointer; } .starfall-score-v99 nav { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 12px 28px; } .starfall-score-v99 nav button { min-height: 34px; border: 1px solid rgba(98, 214, 255, .2); color: rgba(178,227,241,.7); background: rgba(0,12,28,.65); font: 700 8px/1 "Courier New", monospace; letter-spacing: .12em; cursor: pointer; } .starfall-score-v99 nav button.is-active { border-color: #72ddff; color: #effdff; background: rgba(23,91,132,.32); box-shadow: inset 0 0 18px rgba(78,210,255,.08); } .starfall-score-legend-v99 { position: relative; display: flex; justify-content: space-between; padding: 2px 30px 8px; color: rgba(132,215,238,.55); font: 700 7px/1.2 "Courier New", monospace; letter-spacing: .13em; } .starfall-score-rows-v99 { position: relative; padding: 0 28px 24px; } .starfall-score-rows-v99 article { display: grid; grid-template-columns: 38px minmax(130px,1fr) minmax(78px,auto) minmax(100px,auto); gap: 12px; align-items: center; min-height: 44px; border-top: 1px solid rgba(91,211,246,.13); font-family: "Courier New", monospace; } .starfall-score-rows-v99 article b { color: #6edfff; font-size: 9px; } .starfall-score-rows-v99 article strong { overflow: hidden; color: #e7fcff; font-size: 11px; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; } .starfall-score-rows-v99 article span { color: #c898ff; font-size: 12px; font-weight: 700; letter-spacing: .08em; } .starfall-score-rows-v99 article small { color: rgba(151,218,237,.64); font-size: 8px; text-align: right; } .starfall-score-loading-v99 { padding: 34px 4px; color: #78dfff; font: 700 9px/1.5 "Courier New", monospace; letter-spacing: .13em; text-align: center; } .starfall-intro-v90[data-sync-stage="2"] { animation: v90-memory-unstable 3.8s steps(1) infinite; } .starfall-intro-v90.is-launching { animation: v90-launch .72s cubic-bezier(.7, 0, 1, .5) forwards; } .starfall-v90 { width: min(1180px, 100%); } .starfall-hud-v90 { grid-template-columns: repeat(6, minmax(80px, 1fr)); } .starfall-stage-v90 { width: min(1050px, 100%); min-height: 550px; } .starfall-stage-v90 canvas { cursor: crosshair; touch-action: none; min-height: 550px; } .game-shell.is-starfall-intro { min-height: 0; } .game-shell.is-starfall-intro .alt-game-area { box-sizing: border-box; width: min(1160px, 100%); min-height: 0; padding: 10px; } .game-shell.is-starfall-flight { width: min(1220px, 100%); height: 100dvh; min-height: 0; padding: 7px 12px 8px; overflow: hidden; } .giglio-game.is-starfall-flight { padding: 0; overflow: hidden; } .game-shell.is-starfall-flight .game-header { min-height: 38px; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 10px; padding: 0 3px 6px; } .game-shell.is-starfall-flight .game-kicker, .game-shell.is-starfall-flight .game-subtitle { display: none; } .game-shell.is-starfall-flight .game-header h1 { overflow: hidden; font-size: clamp(15px, 2vw, 22px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; } .game-shell.is-starfall-flight .return-site { min-height: 30px; padding: 6px 11px; font-size: 9px; } .game-shell.is-starfall-flight .game-toolbar, .game-shell.is-starfall-flight .game-help { display: none !important; } .game-shell.is-starfall-flight .alt-game-area { box-sizing: border-box; width: min(1120px, 100%); height: calc(100dvh - 59px); min-height: 0; margin: 5px auto 0; padding: 7px; overflow: hidden; } .game-shell.is-starfall-flight .starfall-v90 { grid-template-rows: auto 4px minmax(0, 1fr) auto; gap: 5px; width: 100%; height: 100%; min-height: 0; } .game-shell.is-starfall-flight .starfall-hud-v90 { gap: 4px; } .game-shell.is-starfall-flight .protocol-chip { min-height: 0; padding: 5px 8px; font-size: 8px; letter-spacing: .1em; } .game-shell.is-starfall-flight .protocol-chip b { margin-top: 3px; font-size: 12px; } .game-shell.is-starfall-flight .starfall-stage-v90, .game-shell.is-starfall-flight .starfall-stage-v90 canvas { width: 100%; height: 100%; min-height: 0; } .game-shell.is-starfall-flight .protocol-objective { min-height: 11px; margin: 0; overflow: hidden; font-size: 8px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; } .game-shell.is-starfall-flight .canvas-stage-label { color: rgba(176, 231, 248, .68); font-size: 8px; } .starfall-codex-overlay-v95 { position: fixed; z-index: 2147483645; inset: 0; display: none; box-sizing: border-box; padding: clamp(10px, 3vw, 32px); overflow-x: hidden; overflow-y: auto; } .starfall-codex-overlay-v95.is-open { display: grid; place-items: center; animation: v95-codex-enter .32s ease both; } .starfall-codex-backdrop-v95 { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(0, 2, 9, .86); backdrop-filter: blur(12px) saturate(.72); cursor: zoom-out; } .starfall-codex-v95 { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); box-sizing: border-box; width: min(1180px, 100%); height: 100%; max-height: 900px; min-height: 0; padding: clamp(16px, 2.5vw, 30px); overflow: hidden; border: 1px solid rgba(100, 224, 255, .3); border-radius: 3px 28px 3px 28px; background: linear-gradient(rgba(74, 210, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 210, 255, .035) 1px, transparent 1px), radial-gradient(circle at 82% 4%, rgba(93, 64, 255, .2), transparent 36%), rgba(0, 7, 17, .98); background-size: 27px 27px, 27px 27px, auto, auto; box-shadow: inset 0 0 90px rgba(49, 186, 255, .06), 0 30px 100px #000; } .starfall-codex-v95 > header { position: relative; display: grid; grid-template-columns: minmax(250px, .9fr) minmax(280px, 1.1fr); align-items: end; gap: 28px; padding: 0 48px 18px 0; border-bottom: 1px solid rgba(110, 221, 255, .14); } .starfall-codex-v95 > header span { color: #82e5ff; font: 700 9px/1.15 "Courier New", monospace; letter-spacing: .18em; } .starfall-codex-v95 h2 { margin: 9px 0 0; color: #ecfcff; font-size: clamp(27px, 4vw, 49px); line-height: .94; letter-spacing: -.045em; } .starfall-codex-v95 > header p { margin: 0; color: rgba(179, 215, 228, .7); font-size: 12px; line-height: 1.65; } .starfall-codex-v95 > header > button { position: absolute; top: 0; right: 0; width: 38px; height: 38px; border: 1px solid rgba(109, 222, 255, .32); border-radius: 50%; color: #c9f8ff; background: rgba(4, 28, 45, .72); font-size: 23px; cursor: pointer; } .starfall-codex-v95 > nav { display: flex; flex-wrap: wrap; gap: 7px; padding: 15px 0; } .starfall-codex-v95 > nav button { min-height: 36px; padding: 8px 13px; border: 1px solid rgba(100, 217, 255, .2); border-radius: 2px 10px 2px 10px; color: rgba(174, 222, 239, .78); background: rgba(3, 20, 34, .64); font: 700 8px/1.15 "Courier New", monospace; letter-spacing: .11em; cursor: pointer; } .starfall-codex-v95 > nav button:hover, .starfall-codex-v95 > nav button.is-active { color: #edfdff; border-color: rgba(114, 229, 255, .65); background: rgba(30, 155, 213, .16); box-shadow: inset 0 0 17px rgba(75, 216, 255, .08), 0 0 15px rgba(59, 194, 255, .1); } .starfall-codex-grid-v95 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; min-height: 0; gap: 9px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 2px 36px; scroll-snap-type: y proximity; padding: 2px 8px 36px 2px; scrollbar-color: rgba(84, 217, 255, .5) rgba(2, 14, 26, .8); } .starfall-dossier-v95 { display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: stretch; align-self: start; box-sizing: border-box; width: 100%; height: max-content; min-width: 0; min-height: 178px; overflow: hidden; scroll-snap-align: start; scroll-margin-block: 2px 10px; border: 1px solid rgba(98, 210, 245, .16); border-radius: 2px 16px 2px 16px; background: linear-gradient(120deg, rgba(12, 51, 72, .27), rgba(1, 8, 18, .9)); transition: border-color 180ms ease, transform 180ms ease; } .starfall-dossier-v95[hidden] { display: none; } .starfall-dossier-v95:hover { border-color: rgba(104, 224, 255, .48); transform: translateY(-1px); } .starfall-dossier-v95.is-boss { grid-column: 1 / -1; grid-template-columns: 210px minmax(0, 1fr); min-height: 220px; border-color: rgba(151, 105, 255, .25); } .starfall-dossier-v95.is-system { border-color: rgba(82, 229, 201, .24); } .starfall-dossier-image-v95 { position: relative; align-self: center; width: 100%; aspect-ratio: 1; overflow: hidden; border-right: 1px solid rgba(99, 216, 255, .16); background: rgba(0, 5, 14, .88); image-rendering: pixelated; box-shadow: inset 0 0 24px rgba(49, 186, 255, .1); } .starfall-dossier-image-v95 > img { position: absolute; z-index: 0; inset: 4%; display: block; width: 92%; height: 92%; object-fit: contain; pointer-events: none; user-select: none; } .starfall-dossier-image-v95::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(0, 9, 20, .08), transparent); box-shadow: inset 0 0 24px rgba(49, 186, 255, .1); } .starfall-dossier-image-v95::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .18) 3px 4px); mix-blend-mode: multiply; } .starfall-dossier-copy-v95 { min-width: 0; padding: 13px 14px 17px; overflow-wrap: anywhere; } .starfall-dossier-copy-v95 > span { color: rgba(123, 222, 250, .7); font: 700 8px/1.25 "Courier New", monospace; letter-spacing: .12em; } .starfall-dossier-copy-v95 h3 { margin: 7px 0; color: #e5faff; font: 700 13px/1.25 "Courier New", monospace; letter-spacing: .06em; } .starfall-dossier-copy-v95 h3 i { float: right; color: rgba(174, 151, 255, .88); font-size: 8px; font-style: normal; } .starfall-dossier-copy-v95 p { margin: 0 0 10px; color: rgba(194, 225, 236, .82); font-size: 11px; line-height: 1.55; } .starfall-dossier-copy-v95 dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 0 9px; border: 1px solid rgba(99, 212, 245, .09); background: rgba(73, 198, 237, .09); } .starfall-dossier-copy-v95 dl div { min-width: 0; padding: 6px; background: rgba(0, 8, 18, .94); } .starfall-dossier-copy-v95 dl div.is-wide { grid-column: 1 / -1; } .starfall-dossier-copy-v95 dt { color: rgba(135, 218, 242, .64); font: 700 7px/1.1 "Courier New", monospace; letter-spacing: .1em; } .starfall-dossier-copy-v95 dd { margin: 4px 0 0; overflow: hidden; color: rgba(224, 249, 255, .9); font: 700 9px/1.25 "Courier New", monospace; text-overflow: ellipsis; white-space: nowrap; } .starfall-dossier-copy-v95 small { display: block; padding-bottom: 2px; color: rgba(153, 211, 231, .72); font: 700 8px/1.5 "Courier New", monospace; letter-spacing: .045em; overflow-wrap: anywhere; } .starfall-boss-phases-v96 { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 4px; margin: 9px 0; } .starfall-boss-phases-v96 span { min-width: 0; padding: 7px; border: 1px solid rgba(151, 110, 255, .18); background: linear-gradient(145deg, rgba(88, 50, 176, .12), rgba(0, 8, 18, .84)); } .starfall-boss-phases-v96 i, .starfall-boss-phases-v96 b, .starfall-boss-phases-v96 em { display: block; overflow: hidden; font-family: "Courier New", monospace; font-style: normal; text-overflow: ellipsis; white-space: nowrap; } .starfall-boss-phases-v96 i { color: #ad99ff; font-size: 7px; } .starfall-boss-phases-v96 b { margin-top: 4px; color: #e8faff; font-size: 8px; letter-spacing: .035em; } .starfall-boss-phases-v96 em { margin-top: 4px; color: rgba(146, 216, 238, .7); font-size: 7px; } .starfall-codex-button-v95 { position: absolute; z-index: 8; top: 9px; right: 61px; height: 32px; padding: 0 9px; border: 1px solid rgba(116, 226, 255, .25); border-radius: 10px 2px 10px 2px; color: rgba(202, 243, 253, .82); background: rgba(1, 13, 27, .76); font: 700 7px/1 "Courier New", monospace; letter-spacing: .08em; cursor: pointer; } .starfall-codex-button-v95 i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border: 1px solid currentColor; transform: rotate(45deg); box-shadow: 0 0 8px currentColor; } .starfall-codex-launch-v95 { min-width: 132px; } @keyframes v95-codex-enter { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } } .starfall-pause-button-v91 { position: absolute; z-index: 8; top: 9px; right: 10px; width: 42px; height: 32px; display: flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid rgba(116, 226, 255, .34); border-radius: 2px 11px 2px 11px; color: rgba(202, 246, 255, .72); background: rgba(1, 13, 27, .76); box-shadow: inset 0 0 14px rgba(65, 210, 255, .07); cursor: pointer; } .starfall-pause-button-v91 i { width: 2px; height: 10px; background: currentColor; box-shadow: 0 0 7px currentColor; } .starfall-pause-button-v91 span { position: absolute; top: 100%; margin-top: 3px; font: 700 7px/1 "Courier New", monospace; letter-spacing: .1em; } .starfall-pause-button-v91:hover { color: #effdff; border-color: rgba(116, 226, 255, .75); } .starfall-pause-v91 { box-sizing: border-box; position: fixed; z-index: 52000; inset: 0; display: none; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 18px; overflow-x: hidden; overflow-y: auto; background: radial-gradient(circle at 50% 42%, rgba(51, 160, 255, .18), transparent 37%), rgba(0, 4, 12, .82); backdrop-filter: blur(12px) saturate(.72); } .starfall-pause-v91.is-active { display: grid; } .starfall-pause-signal-v91 { position: absolute; width: min(62vmin, 460px); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(107, 224, 255, .16); border-radius: 50%; color: rgba(145, 234, 255, .16); font: 700 clamp(28px, 7vmin, 68px)/1 "Courier New", monospace; animation: v91-pause-orbit 18s linear infinite; } .starfall-pause-signal-v91 i { position: absolute; inset: 12%; border: 1px dashed rgba(119, 101, 255, .25); border-radius: 50%; } .starfall-pause-card-v91 { box-sizing: border-box; position: relative; z-index: 2; width: 100%; max-width: 540px; min-width: 0; padding: clamp(22px, 4vw, 38px); border: 1px solid rgba(102, 221, 255, .4); border-radius: 3px 28px 3px 28px; color: #e8fbff; background: linear-gradient(145deg, rgba(7, 36, 65, .96), rgba(0, 7, 17, .97)); box-shadow: 0 0 70px rgba(45, 164, 255, .18), inset 0 0 35px rgba(73, 210, 255, .05); text-align: center; overflow-wrap: anywhere; } .starfall-pause-card-v91 > p:first-child { margin: 0 0 12px; color: #80e3ff; font: 700 8px/1.2 "Courier New", monospace; letter-spacing: .18em; } .starfall-pause-card-v91 h2 { margin: 0; font: 750 clamp(24px, 5vw, 42px)/1.02 Inter, system-ui, sans-serif; letter-spacing: -.04em; } .starfall-pause-card-v91 h2 + p { margin: 14px auto 22px; color: rgba(209, 239, 248, .7); } .sayonara-audio-mixer-v99 { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; text-align: left; } .sayonara-audio-channel-v99 { box-sizing: border-box; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 10px; padding: 10px; border: 1px solid rgba(92, 215, 255, .22); border-radius: 2px 12px 2px 12px; background: rgba(0, 8, 22, .7); color: #8fe7ff; font: 700 8px/1.2 "Courier New", monospace; letter-spacing: .13em; } .sayonara-audio-channel-v99 output { color: #e4fbff; letter-spacing: .06em; } .sayonara-audio-channel-v99 input[type="range"] { min-width: 0; width: 100%; height: 18px; margin: 0; accent-color: #65ddff; cursor: ew-resize; } .sayonara-audio-channel-v99 button { min-width: 58px; min-height: 27px; padding: 5px 7px; border: 1px solid rgba(114, 222, 255, .28); border-radius: 2px 8px 2px 8px; color: rgba(217, 249, 255, .9); background: rgba(9, 40, 63, .72); font: inherit; cursor: pointer; } .sayonara-audio-channel-v99 button.is-muted { border-color: rgba(255, 120, 171, .32); color: #ffb7d0; } .starfall-pause-mixer-v99 { margin-bottom: 18px; } .starfall-pause-actions-v91 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .starfall-pause-actions-v91 .game-btn { width: 100%; justify-content: center; text-align: center; } .starfall-pause-actions-v91 .is-danger { grid-column: 1 / -1; border-color: rgba(255, 108, 153, .27); color: rgba(255, 210, 226, .78); } body.game-is-paused .starfall-stage-v90 canvas { filter: blur(3px) brightness(.55) saturate(.6); } .starfall-ability-rack-v90 { box-sizing: border-box; position: absolute; z-index: 5; top: 46px; left: 12px; width: min(184px, 27%); padding: 9px; border: 1px solid rgba(97, 214, 255, .2); border-radius: 2px 13px 2px 13px; color: rgba(142, 226, 249, .65); background: linear-gradient(135deg, rgba(1, 14, 28, .82), rgba(1, 8, 18, .55)); box-shadow: inset 0 0 22px rgba(61, 205, 255, .04); font: 700 8px/1.3 "Courier New", monospace; letter-spacing: .12em; pointer-events: none; } .starfall-ability-rack-v90 > span { display: block; padding-bottom: 6px; border-bottom: 1px solid rgba(85, 205, 244, .12); } .starfall-ability-rack-v90 div { display: grid; gap: 4px; margin-top: 6px; } .starfall-ability-rack-v90 b { display: flex; justify-content: space-between; gap: 6px; color: rgba(224, 250, 255, .9); font-size: 9px; font-weight: 700; } .starfall-ability-rack-v90 b i { color: #8be9ff; font-style: normal; } .starfall-ability-rack-v90 em { color: rgba(142, 191, 208, .48); font-style: normal; } .starfall-boss-label-v90 { position: absolute; z-index: 4; top: 28px; left: 50%; transform: translateX(-50%); color: rgba(255, 144, 193, .88); font: 700 9px/1 "Courier New", monospace; letter-spacing: .16em; text-shadow: 0 0 15px rgba(255, 60, 143, .6); pointer-events: none; } .starfall-progress-v92 { overflow: visible; } .starfall-progress-v92 > span { position: absolute; z-index: 2; left: 50%; top: 50%; max-width: 82%; overflow: hidden; transform: translate(-50%, -50%); color: rgba(230, 251, 255, .92); font: 700 8px/1 "Courier New", monospace; letter-spacing: .15em; text-overflow: ellipsis; text-shadow: 0 0 8px #00111f, 0 0 8px #00111f; white-space: nowrap; pointer-events: none; } .starfall-boss-arrival-v92 { --arrival-color: 112, 224, 255; position: absolute; z-index: 12; inset: 0; display: grid; place-content: center; gap: 9px; overflow: hidden; color: rgb(var(--arrival-color)); opacity: 0; background: linear-gradient(90deg, transparent, rgba(var(--arrival-color), .13), transparent), radial-gradient(circle, rgba(var(--arrival-color), .16), rgba(0, 3, 12, .72) 46%, rgba(0, 2, 9, .94)); text-align: center; pointer-events: none; } .starfall-boss-arrival-v92.is-active { animation: v92-boss-veil 2.85s cubic-bezier(.16, 1, .3, 1) both; } .starfall-boss-arrival-v92 > i { position: absolute; top: 50%; left: 50%; width: min(56vmin, 430px); aspect-ratio: 1; border: 1px solid rgba(var(--arrival-color), .35); transform: translate(-50%, -50%) rotate(0); } .starfall-boss-arrival-v92 > i:nth-child(1) { border-radius: 50%; animation: v92-boss-ring 5.4s linear infinite; } .starfall-boss-arrival-v92 > i:nth-child(2) { width: min(40vmin, 310px); border-style: dashed; transform: translate(-50%, -50%) rotate(45deg); animation: v92-boss-ring-reverse 4.2s linear infinite; } .starfall-boss-arrival-v92 > i:nth-child(3) { width: min(23vmin, 180px); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 35px rgba(var(--arrival-color), .2); } .starfall-boss-arrival-v92 span, .starfall-boss-arrival-v92 strong, .starfall-boss-arrival-v92 small { position: relative; z-index: 2; display: block; } .starfall-boss-arrival-v92 span { font: 700 7px/1 "Courier New", monospace; letter-spacing: .4em; } .starfall-boss-arrival-v92 strong { max-width: 88vw; font: 800 clamp(20px, 5vw, 58px)/.92 Arial, sans-serif; letter-spacing: -.035em; text-shadow: 0 0 28px rgba(var(--arrival-color), .75); } .starfall-boss-arrival-v92 small { color: rgba(225, 249, 255, .74); font: 700 7px/1.3 "Courier New", monospace; letter-spacing: .2em; } .starfall-boss-arrival-v92.is-fracture { --arrival-color: 255, 99, 167; background-image: repeating-linear-gradient(112deg, transparent 0 15%, rgba(255, 52, 128, .14) 15.4% 15.8%, transparent 16.2% 27%), radial-gradient(circle, rgba(255, 71, 143, .17), rgba(0, 3, 12, .76) 52%); } .starfall-boss-arrival-v92.is-lily { --arrival-color: 88, 224, 255; background-image: radial-gradient(ellipse at 50% 100%, rgba(28, 153, 255, .35), transparent 48%), radial-gradient(circle, rgba(91, 220, 255, .15), rgba(0, 3, 12, .9)); } .starfall-boss-arrival-v92.is-mirror { --arrival-color: 213, 247, 255; backdrop-filter: contrast(1.35) hue-rotate(16deg); } .starfall-boss-arrival-v92.is-choir { --arrival-color: 126, 145, 255; background-size: 100% 13px, auto; } .starfall-boss-arrival-v92.is-eater { --arrival-color: 196, 91, 255; background: radial-gradient(circle, #000 0 12%, rgba(68, 0, 105, .36) 13%, rgba(0, 2, 9, .96) 54%); } .starfall-boss-arrival-v92.is-terminus { --arrival-color: 237, 248, 255; background-image: linear-gradient(90deg, rgba(24, 185, 255, .15), rgba(255, 255, 255, .08), rgba(97, 89, 255, .18)), radial-gradient(circle, rgba(255, 255, 255, .14), rgba(0, 2, 9, .93)); } .starfall-boss-arrival-v92.is-eclipse { --arrival-color: 91, 185, 255; background: radial-gradient(circle at 50% 47%, #000 0 14%, rgba(50, 151, 255, .62) 14.5% 16%, rgba(0, 3, 12, .92) 30%); } .starfall-boss-arrival-v92.is-unwritten { --arrival-color: 214, 122, 255; animation-timing-function: steps(12); mix-blend-mode: screen; } .starfall-boss-arrival-v92.is-glass { --arrival-color: 192, 244, 255; background-image: repeating-linear-gradient(128deg, transparent 0 12%, rgba(207, 250, 255, .15) 12.2% 12.6%, transparent 13% 24%), radial-gradient(circle, rgba(102, 219, 255, .15), rgba(0, 3, 12, .92)); } .starfall-boss-arrival-v92.is-velvet { --arrival-color: 171, 76, 255; background: radial-gradient(circle, #000 0 10%, rgba(79, 15, 119, .54) 11% 22%, rgba(0, 2, 9, .95) 48%); } .starfall-boss-arrival-v92.is-cathedral { --arrival-color: 255, 91, 145; background-image: repeating-linear-gradient(90deg, transparent 0 8%, rgba(255, 80, 136, .1) 8.5% 9%, transparent 9.5% 16%), radial-gradient(ellipse, rgba(117, 18, 69, .26), rgba(0, 2, 9, .94)); } .starfall-boss-arrival-v92.is-moon { --arrival-color: 135, 162, 255; background: radial-gradient(circle at 50% 50%, rgba(178, 201, 255, .28) 0 12%, rgba(12, 21, 64, .4) 12.5% 25%, rgba(0, 2, 9, .94) 48%); } .starfall-boss-arrival-v92.is-lacrima { --arrival-color: 78, 219, 255; background-image: repeating-linear-gradient(101deg, transparent 0 7%, rgba(73, 205, 255, .11) 7.2% 7.5%, transparent 7.8% 13%), linear-gradient(rgba(0, 25, 52, .25), rgba(0, 2, 9, .95)); } .starfall-boss-arrival-v92.is-witness { --arrival-color: 225, 239, 255; background: radial-gradient(ellipse at center, rgba(218, 244, 255, .19) 0 7%, rgba(80, 36, 139, .23) 8% 21%, rgba(0, 2, 9, .96) 42%); } .starfall-boss-arrival-v92.is-empress { --arrival-color: 126, 74, 255; background: radial-gradient(ellipse at 50% 100%, rgba(73, 33, 149, .56), transparent 52%), radial-gradient(circle, rgba(91, 53, 176, .14), rgba(0, 2, 9, .94)); } .starfall-boss-arrival-v92.is-null-star { --arrival-color: 95, 104, 255; background-image: radial-gradient(circle at 31% 28%, #91a8ff 0 1px, transparent 2px), radial-gradient(circle at 72% 62%, #734dff 0 1px, transparent 2px), radial-gradient(circle, rgba(59, 47, 139, .22), rgba(0, 2, 9, .96)); background-size: 41px 37px, 53px 47px, auto; } .starfall-boss-arrival-v92.is-last-memory { --arrival-color: 255, 255, 255; background-image: repeating-linear-gradient(117deg, transparent 0 11%, rgba(109, 91, 255, .13) 11.2% 11.6%, transparent 12% 20%), radial-gradient(circle, rgba(255, 255, 255, .2), rgba(59, 10, 103, .32) 21%, rgba(0, 1, 7, .98) 62%); } .starfall-power-toast-v90 { position: absolute; z-index: 5; left: 50%; bottom: 74px; min-width: 220px; padding: 9px 14px; border: 1px solid rgba(106, 222, 255, .4); color: #dbfaff; background: rgba(1, 10, 24, .88); opacity: 0; transform: translate(-50%, 10px); text-align: center; font: 700 8px/1.2 "Courier New", monospace; letter-spacing: .14em; pointer-events: none; } .starfall-power-toast-v90.is-visible { animation: v90-power-toast 2.2s ease both; } .game-modal .modal-actions .game-btn, #modal-retry { justify-content: center; text-align: center; } @keyframes v90-star-drift { to { transform: translate3d(5%, 12%, 0); } } @keyframes v90-reticle-turn { to { transform: rotate(360deg); } } @keyframes v91-pause-orbit { to { transform: rotate(360deg); } } @keyframes v90-memory-unstable { 0%, 88%, 100% { filter: none; } 89% { filter: hue-rotate(15deg) contrast(1.15); transform: translateX(1px); } 90% { filter: hue-rotate(-18deg) contrast(1.2); transform: translateX(-2px); } 91% { filter: none; transform: none; } } @keyframes v90-launch { 0% { filter: brightness(1); transform: scale(1); opacity: 1; } 45% { filter: brightness(2.2) saturate(.6); transform: scale(1.018); } 100% { filter: brightness(4) blur(9px); transform: scale(1.15); opacity: 0; } } @keyframes v90-power-toast { 0% { opacity: 0; transform: translate(-50%, 12px); } 12%, 76% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -8px); } } @keyframes v92-boss-veil { 0% { opacity: 0; filter: brightness(3); transform: scale(1.08); } 9%, 68% { opacity: 1; filter: brightness(1); transform: scale(1); } 83% { opacity: .82; } 100% { opacity: 0; filter: blur(4px); transform: scale(1.035); } } @keyframes v92-boss-ring { to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes v92-boss-ring-reverse { to { transform: translate(-50%, -50%) rotate(-315deg); } } @media (max-width: 900px) { .starfall-hud-v90 { grid-template-columns: repeat(3, 1fr); } .starfall-stage-v90, .starfall-stage-v90 canvas { min-height: 520px; } .starfall-dialogue-v90 { width: min(39%, 350px); } .game-shell.is-starfall-flight .starfall-hud-v90 { grid-template-columns: repeat(6, 1fr); } .starfall-codex-grid-v95 { grid-template-columns: 1fr; } } @media (max-width: 620px) { .starfall-pause-v91 { padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); } .starfall-pause-card-v91 { width: 100%; max-width: 100%; padding: clamp(18px, 6vw, 24px); } .starfall-pause-mixer-v99, .starfall-pause-actions-v91, .sayonara-audio-channel-v99 { width: 100%; } .starfall-cycle-picker-v99 > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } .starfall-pilot-v99 { grid-template-columns: 1fr; gap: 5px; } .starfall-score-overlay-v99 { padding: 6px; } .starfall-score-v99 { width: 100%; max-height: 96dvh; border-radius: 2px 18px 2px 18px; } .starfall-score-v99 header { padding: 16px 14px 12px; } .starfall-score-v99 h2 { font-size: 27px; } .starfall-score-v99 nav { padding: 9px 12px; } .starfall-score-legend-v99 { padding-inline: 14px; } .starfall-score-rows-v99 { padding: 0 12px 16px; } .starfall-score-rows-v99 article { grid-template-columns: 28px minmax(80px,1fr) auto; gap: 7px; } .starfall-score-rows-v99 article small { grid-column: 2 / -1; padding-bottom: 7px; } .starfall-intro-v90 { display: flex; flex-direction: column; height: auto; min-height: 0; overflow: hidden; } .starfall-parallax-v90 { position: relative; inset: auto; width: 100%; height: clamp(290px, 50vh, 420px); flex: 0 0 auto; transform: none; } .starfall-portrait-v90 { object-position: 38% center; } .starfall-intro-v90::before { background: linear-gradient(0deg, rgba(0, 4, 13, .5), transparent 40%); } .starfall-intro-v90::after { inset: 8px; } .starfall-dialogue-v90 { position: relative; right: auto; bottom: auto; left: auto; width: 100%; max-height: none; padding: 17px 15px 15px; overflow: visible; border-width: 1px 0 0; border-radius: 0; background: linear-gradient(145deg, rgba(5, 25, 48, .98), rgba(0, 5, 14, .99)); backdrop-filter: none; } .starfall-dialogue-v90 p { min-height: 0; margin: 13px 0; font-size: clamp(14px, 4.3vw, 17px); line-height: 1.42; } .starfall-difficulty-v90 { gap: 6px; } .starfall-difficulty-v90 button { min-height: 40px; font-size: 8px; } .starfall-intro-v90.is-configuring .starfall-dialogue-v90 { width: 100%; max-height: none; overflow: visible; } .starfall-mode-v93 { grid-template-columns: 1fr; } .starfall-mode-v93 button { min-height: 48px; } .starfall-mode-v93 b { font-size: 8px; } .starfall-boss-picker-v93 > div { grid-template-columns: 1fr; max-height: 250px; } .starfall-boss-picker-v93 button { min-height: 46px; } .starfall-boss-picker-v93 button b { font-size: 7px; } .starfall-sync-reticle-v90 { top: 22px; right: 22px; width: 58px; } .starfall-intro-actions-v90 { grid-template-columns: 1fr; } .starfall-hud-v90 { grid-template-columns: repeat(2, 1fr); } .starfall-stage-v90, .starfall-stage-v90 canvas { min-height: 500px; } .starfall-ability-rack-v90 { top: 42px; left: 7px; width: calc(100% - 14px); padding: 7px; background: rgba(1, 12, 25, .62); } .starfall-ability-rack-v90 > span { display: none; } .starfall-ability-rack-v90 div { display: flex; gap: 6px; margin: 0; overflow: hidden; } .starfall-ability-rack-v90 b { flex: 0 0 auto; padding-right: 6px; border-right: 1px solid rgba(99, 214, 247, .15); font-size: 7px; } .starfall-power-toast-v90 { bottom: 54px; min-width: 0; max-width: calc(100% - 30px); } .starfall-boss-arrival-v92 { gap: 6px; padding: 12px; } .starfall-boss-arrival-v92 strong { font-size: clamp(18px, 7vw, 32px); } .starfall-boss-arrival-v92 span, .starfall-boss-arrival-v92 small { font-size: 7px; } .game-modal .modal-actions .game-btn { display: flex; width: 100%; justify-content: center; text-align: center; } .starfall-pause-actions-v91 { grid-template-columns: 1fr; } .sayonara-audio-mixer-v99 { grid-template-columns: 1fr; } .game-shell.is-starfall-flight { height: 100dvh; min-height: 0; padding: 5px; } .game-shell.is-starfall-flight .game-header { min-height: 34px; } .game-shell.is-starfall-flight .game-header h1 { font-size: 13px; } .game-shell.is-starfall-flight .return-site { width: auto; min-height: 28px; padding-inline: 8px; } .game-shell.is-starfall-flight .alt-game-area { height: calc(100dvh - 48px); margin-top: 3px; padding: 4px; } .game-shell.is-starfall-flight .starfall-hud-v90 { grid-template-columns: repeat(3, 1fr); gap: 2px; } .game-shell.is-starfall-flight .protocol-chip { padding: 3px 5px; font-size: 7px; } .game-shell.is-starfall-flight .protocol-chip b { margin-top: 2px; font-size: 10px; } .game-shell.is-starfall-flight .protocol-objective { display: none; } .game-shell.is-starfall-flight .starfall-v90 { grid-template-rows: auto 3px minmax(0, 1fr); gap: 3px; height: 100%; min-height: 0; } .starfall-codex-overlay-v95 { padding: 6px; } .starfall-codex-v95 { height: 100%; padding: 13px 9px; border-radius: 2px 17px 2px 17px; } .starfall-codex-v95 > header { grid-template-columns: 1fr; gap: 8px; padding: 0 39px 12px 0; } .starfall-codex-v95 > header p { font-size: 9px; } .starfall-codex-v95 > nav { display: grid; grid-template-columns: repeat(2, 1fr); padding: 9px 0; } .starfall-codex-v95 > nav button { padding-inline: 5px; } .starfall-dossier-v95, .starfall-dossier-v95.is-boss { grid-column: auto; grid-template-columns: 100px minmax(0, 1fr); min-height: 160px; } .starfall-dossier-copy-v95 { padding: 10px; } .starfall-dossier-copy-v95 dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .starfall-codex-button-v95 { right: 56px; width: 31px; padding: 0; } .starfall-codex-button-v95 span { display: none; } .starfall-codex-button-v95 i { margin: 0; } } @media (prefers-reduced-motion: reduce) { .starfall-space-dust-v90, .starfall-sync-reticle-v90, .starfall-intro-v90 { animation: none !important; } .starfall-parallax-v90 { transform: none; } } html.visual-soft .starfall-space-dust-v90 { display: none; } html.visual-soft .starfall-parallax-v90 { transform: none; } /* ========================================================================== STARFALL 4072 · ORIENTATION NOTICE (mobile hardening, 19 ago 2026) Starfall is the one protocol a phone held sideways does not serve well. The notice is a recommendation, never a gate: the player can dismiss it and keep flying, and nothing about the canvas, the controls or the score is touched by anything in this block. Who sees it is decided by the same classification the navbar already uses — real touch capability plus a viewport too short to be a tablet — so there is one system here, not two. A tablet in landscape is 744px tall at its smallest and never matches. No user agent is read and no device is named. ========================================================================== */ .sf-orient { display: none; } @media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-height: 500px) { /* Shown only while Starfall is the active protocol. `data-active-game` is written by game_v88.js already, so nothing in the game had to change. */ #giglio-game[data-active-game="starfall"] .sf-orient:not([data-dismissed]) { position: fixed; inset: 0; z-index: 52500; display: grid; place-items: center; /* La versione originale leggeva --content-safe-l/r e --safe-optical-buffer, token del sistema safe-area poi rimosso dal rollback. Senza fallback, un var() non definito invalida l'intera dichiarazione a computed-value time: il padding sarebbe caduto a zero e la card si sarebbe appoggiata al bordo. Resta il pavimento che quei max() gia' garantivano. Senza viewport-fit=cover il layout viewport e' gia' dentro la safe area -- la protezione dal notch la fa Safari, non questo foglio. */ padding: 12px; box-sizing: border-box; } } .sf-orient-backdrop { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 90% at 50% 45%, rgba(0, 60, 92, .5), transparent 70%), rgba(1, 5, 12, .88); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .sf-orient-card { position: relative; z-index: 1; display: grid; justify-items: center; gap: .5rem; box-sizing: border-box; width: min(420px, 100%); /* Safari changes height as its toolbars come and go, so the ceiling follows the dynamic viewport rather than a fixed 100vh. */ max-height: 100%; max-height: 100dvh; overflow-y: auto; padding: clamp(.7rem, 2.6vh, 1.1rem) clamp(1rem, 4vw, 1.6rem); border: 1px solid rgba(0, 210, 255, .34); border-radius: 4px 18px 4px 18px; background: linear-gradient(150deg, rgba(4, 18, 30, .96), rgba(2, 9, 18, .97)); box-shadow: 0 0 26px rgba(0, 190, 255, .12), 0 18px 44px rgba(0, 0, 0, .5); text-align: center; } .sf-orient-eyebrow { margin: 0; color: rgba(120, 235, 255, .8); font: 700 .56rem/1.3 "Courier New", Consolas, monospace; letter-spacing: .2em; text-transform: uppercase; } .sf-orient-figure { margin: 0; } .sf-orient-svg { display: block; /* Sized against the short side so it survives a low landscape viewport. It shrinks; it does not disappear. */ width: clamp(104px, 30vh, 168px); height: auto; overflow: visible; } .sf-orient-title { margin: 0; color: #eaffff; font: 800 clamp(.86rem, 2.4vh, 1.02rem)/1.25 "Courier New", Consolas, monospace; letter-spacing: .09em; text-shadow: 0 0 12px rgba(0, 220, 255, .34); overflow-wrap: break-word; } .sf-orient-desc { margin: 0; max-width: 34ch; color: rgba(206, 238, 250, .84); font: 400 clamp(.72rem, 2vh, .84rem)/1.5 var(--page-serif, Georgia, serif); } .sf-orient-continue { margin-top: .2rem; padding: .58rem 1.1rem; min-height: 44px; box-sizing: border-box; border: 1px solid rgba(0, 225, 255, .6); border-radius: 999px; background: linear-gradient(180deg, rgba(0, 58, 86, .7), rgba(0, 24, 40, .8)); color: #dffcff; font: 700 .68rem/1 "Courier New", Consolas, monospace; letter-spacing: .12em; cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; } .sf-orient-continue:hover, .sf-orient-continue:focus-visible { border-color: #b9f7ff; background: linear-gradient(180deg, rgba(0, 86, 122, .82), rgba(0, 34, 56, .9)); box-shadow: 0 0 16px rgba(0, 225, 255, .3); } .sf-orient-continue:focus-visible { outline: 2px solid #7ff0ff; outline-offset: 3px; } /* --- the illustration --------------------------------------------------- Two rules govern everything below, both learned from the real device. First: the drawn state is the RESTING state. The previous version existed only while its animation ran — `stroke-dashoffset` sat at 1 and the keyframes brought it to 0 — so anything that stopped the animation left an empty card. Here every stroke is drawn at rest and the animation re-reveals it; if it never runs, the illustration is still there, complete. Second: no `pathLength` on anything but a . On a it is SVG 2, WebKit does not honour it, and the dash pattern collapsed to one literal pixel on a 200px perimeter — which is why Safari showed a card with no handset in it at all. ----------------------------------------------------------------------- */ .sf-phone-glass { fill: rgba(0, 48, 76, .34); stroke: none; } .sf-phone-body { fill: none; stroke: #8ff6ff; stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; /* drawn at rest */ filter: drop-shadow(0 0 5px rgba(0, 225, 255, .55)); } /* the depth face: one offset edge is enough to read as a solid */ .sf-phone-depth { fill: none; stroke: rgba(0, 170, 235, .5); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; } .sf-phone-notch, .sf-phone-home { stroke: rgba(160, 244, 255, .72); stroke-width: 2.2; stroke-linecap: round; } .sf-lily ellipse { fill: rgba(150, 240, 255, .3); stroke: rgba(190, 250, 255, .8); stroke-width: 1; } .sf-lily-core { fill: #eaffff; stroke: none; filter: drop-shadow(0 0 4px rgba(140, 240, 255, .9)); } .sf-glitch { stroke: rgba(0, 220, 255, .5); stroke-width: 1.7; stroke-linecap: round; opacity: .55; /* present at rest, not conjured by motion */ } .sf-phone-code { fill: rgba(170, 246, 255, .92); font: 700 9px "Courier New", monospace; letter-spacing: .1em; opacity: 1; } .sf-arc path { fill: none; stroke: #4fd8ff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; /* arcs are visible without motion too */ filter: drop-shadow(0 0 5px rgba(0, 220, 255, .6)); } .sf-scan { fill: rgba(200, 252, 255, .95); opacity: 0; /* the only element that is motion-only */ filter: drop-shadow(0 0 7px rgba(0, 235, 255, .9)); } .sf-orient-signal { margin: .18rem 0 0; color: rgba(120, 232, 255, .72); font: 700 .5rem/1 "Courier New", Consolas, monospace; letter-spacing: .22em; text-transform: uppercase; } /* --- one cycle, 2.8s ---------------------------------------------------- Scan sweeps down and re-draws the outline behind it, the handset turns about 24 degrees, the arcs brighten in turn, one glitch, then back. Only opacity, stroke-dashoffset and a rotate are touched, so nothing reflows and the card never changes size. */ #giglio-game[data-active-game="starfall"] .sf-orient:not([data-dismissed]) .sf-phone-body, #giglio-game[data-active-game="starfall"] .sf-orient:not([data-dismissed]) .sf-phone-depth { animation: sfDraw 2.8s cubic-bezier(.4, 0, .3, 1) infinite; } #giglio-game[data-active-game="starfall"] .sf-orient:not([data-dismissed]) .sf-scan { animation: sfScan 2.8s cubic-bezier(.4, 0, .3, 1) infinite; } #giglio-game[data-active-game="starfall"] .sf-orient:not([data-dismissed]) .sf-phone { transform-origin: 98px 83px; animation: sfTilt 2.8s cubic-bezier(.4, 0, .3, 1) infinite; } #giglio-game[data-active-game="starfall"] .sf-orient:not([data-dismissed]) .sf-arc-l, #giglio-game[data-active-game="starfall"] .sf-orient:not([data-dismissed]) .sf-arc-l-head { animation: sfArc 2.8s ease-out infinite; } #giglio-game[data-active-game="starfall"] .sf-orient:not([data-dismissed]) .sf-arc-r, #giglio-game[data-active-game="starfall"] .sf-orient:not([data-dismissed]) .sf-arc-r-head { animation: sfArc 2.8s ease-out .22s infinite; } #giglio-game[data-active-game="starfall"] .sf-orient:not([data-dismissed]) .sf-glitch-1 { animation: sfGlitch 2.8s steps(1, end) 1.5s infinite; } #giglio-game[data-active-game="starfall"] .sf-orient:not([data-dismissed]) .sf-glitch-2 { animation: sfGlitch 2.8s steps(1, end) 1.58s infinite; } #giglio-game[data-active-game="starfall"] .sf-orient:not([data-dismissed]) .sf-glitch-3 { animation: sfGlitch 2.8s steps(1, end) 1.66s infinite; } #giglio-game[data-active-game="starfall"] .sf-orient:not([data-dismissed]) .sf-lily { transform-origin: 98px 66px; animation: sfLily 2.8s ease-in-out infinite; } @keyframes sfDraw { 0% { stroke-dashoffset: 1; } 20% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } @keyframes sfScan { 0% { opacity: 0; transform: translateY(0); } 4% { opacity: .95; } 22% { opacity: .95; transform: translateY(82px); } 28% { opacity: 0; transform: translateY(82px); } 100% { opacity: 0; transform: translateY(82px); } } /* The notice appears while the phone is ALREADY sideways and asks for portrait, so the sequence has to run landscape -> portrait. The previous version started upright and tilted away, which showed the opposite of the recommendation. The handset now starts lying down, turns upright, and the cycle rests there: the last thing on screen is the state we are asking for. */ @keyframes sfTilt { 0%, 26% { transform: rotate(-90deg); } /* landscape: where the player is */ 58% { transform: rotate(0deg); } /* portrait: where we are pointing */ 100% { transform: rotate(0deg); } /* and it stays there */ } /* The arcs draw while the handset is turning, so they read as the cause of the movement rather than decoration beside it, and stay lit on the portrait frame. */ @keyframes sfArc { 0%, 24% { stroke-dashoffset: 1; opacity: .28; } 56% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } @keyframes sfGlitch { 0%, 100% { opacity: .55; transform: translateX(0); } 50% { opacity: 1; transform: translateX(2.5px); } 56% { opacity: .2; transform: translateX(-1.5px); } 62% { opacity: .55; transform: translateX(0); } } @keyframes sfLily { 0%, 40%, 100% { opacity: .85; } 60% { opacity: 1; } } /* Reduced motion removes the movement, never the illustration. Everything is already drawn at rest, so the only thing to do is stop the animations and park the handset at its turned angle, which is the frame that carries the message. */ @media (prefers-reduced-motion: reduce) { .sf-orient *, .sf-orient *::before, .sf-orient *::after { animation: none !important; } /* Reduced motion shows the destination, not the journey: the handset upright, with both arcs lit so the recommendation still reads without a single frame of movement. */ .sf-phone { transform: rotate(0deg); transform-origin: 98px 83px; } .sf-scan { opacity: 0; } .sf-arc path { opacity: 1; stroke-dashoffset: 0; } } /* --- low landscape ------------------------------------------------------ An iPhone in landscape leaves roughly 330px once Safari has taken its share. Spacing and type give way; the illustration stays. The previous version did the opposite — it hid the figure below 360px — which is exactly why the real device showed a card with nothing in it. */ @media (orientation: landscape) and (max-height: 380px) { .sf-orient-card { gap: .28rem; padding: .5rem clamp(.8rem, 3.4vw, 1.2rem); } .sf-orient-svg { width: clamp(96px, 34vh, 132px); } .sf-orient-desc { font-size: .7rem; line-height: 1.42; } .sf-orient-eyebrow { font-size: .5rem; letter-spacing: .16em; } .sf-orient-signal { font-size: .46rem; letter-spacing: .18em; } } /* --- much wider than tall ---------------------------------------------- Put the visual beside the words rather than above them: on a phone held sideways the room is horizontal, and stacking wasted all of it. */ @media (orientation: landscape) and (min-width: 620px) and (max-height: 440px) { .sf-orient-card { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "figure eyebrow" "figure title" "figure desc" "figure action"; align-items: center; justify-items: start; column-gap: clamp(.9rem, 3vw, 1.5rem); row-gap: .26rem; width: min(560px, 100%); text-align: left; } .sf-orient-figure { grid-area: figure; justify-self: center; } /* the column exists precisely to give the visual room; the card was reading as text with a stamp next to it */ .sf-orient-card .sf-orient-svg { width: clamp(112px, 42vh, 156px); } .sf-orient-eyebrow { grid-area: eyebrow; } .sf-orient-title { grid-area: title; } .sf-orient-desc { grid-area: desc; max-width: 40ch; } .sf-orient-continue { grid-area: action; } } /* BUILD FINGERPRINT — solo source di test */ :root { --sf-test-build: "20260819-IPHONE-VERIFY-01"; } /* =========================================================== STARFALL // RECORD LINK · i selettori di classifica (v100) La gerarchia diventa navigabile: prima il pannello ereditava passivamente la rotta che stavi per giocare e non permetteva di sfogliare le altre. MEMORY ROUTE -> difficolta' BOSS MEMORY -> autorita' -> difficolta' -> ciclo 4072 TOURNAMENT -> difficolta' Diciotto autorita' non stanno in diciotto pulsanti su un telefono, e domani saranno di piu': quelle vanno in un select. I sei cicli restano chip, perche' sei sono sei e si vedono tutti insieme. Al massimo sedici controlli visibili, mai settanta. Stesso vocabolario del resto del pannello: Courier, maiuscole spaziate, bordo ciano tenue, riempimento a stato attivo. Niente di nuovo da imparare. =========================================================== */ .starfall-score-filters-v100 { position: relative; display: grid; gap: 8px; padding: 14px 28px 4px; border-bottom: 1px solid rgba(99, 220, 255, .12); } .starfall-score-filters-v100 .sf-qrow { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: center; } .starfall-score-filters-v100 .sf-qrow[hidden] { display: none; } .starfall-score-filters-v100 .sf-qlabel { color: rgba(132, 215, 238, .62); font: 700 7px/1.2 "Courier New", monospace; letter-spacing: .13em; } .starfall-score-filters-v100 .sf-qchips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } /* Sei cicli: due file da tre sotto i 520px, una fila da sei sopra. */ .starfall-score-filters-v100 .sf-qchips--cycle { grid-template-columns: repeat(6, 1fr); } .starfall-score-filters-v100 .sf-qchips button { min-height: 34px; padding: 4px 6px; overflow: hidden; border: 1px solid rgba(98, 214, 255, .2); color: rgba(178, 227, 241, .7); background: rgba(0, 12, 28, .65); font: 700 8px/1.15 "Courier New", monospace; letter-spacing: .1em; text-overflow: ellipsis; cursor: pointer; } .starfall-score-filters-v100 .sf-qchips button.is-active { border-color: #72ddff; color: #effdff; background: rgba(23, 91, 132, .32); box-shadow: inset 0 0 18px rgba(78, 210, 255, .08); } .starfall-score-filters-v100 .sf-qchips button:focus-visible, .starfall-score-filters-v100 .sf-qselect select:focus-visible { outline: 2px solid #72ddff; outline-offset: 2px; } /* Il select porta la stessa targa dei chip. `appearance: none` perche' il controllo nativo non parla questa lingua; la freccia e' disegnata dal contenitore, che resta cliccabile insieme al campo. */ .starfall-score-filters-v100 .sf-qselect { position: relative; display: block; } .starfall-score-filters-v100 .sf-qselect::after { content: ""; position: absolute; top: 50%; right: 11px; width: 6px; height: 6px; border-right: 1px solid rgba(114, 221, 255, .8); border-bottom: 1px solid rgba(114, 221, 255, .8); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .starfall-score-filters-v100 .sf-qselect select { width: 100%; min-height: 34px; padding: 4px 26px 4px 9px; appearance: none; -webkit-appearance: none; border: 1px solid rgba(98, 214, 255, .28); border-radius: 0; color: #effdff; background: rgba(0, 12, 28, .65); font: 700 8px/1.15 "Courier New", monospace; letter-spacing: .1em; cursor: pointer; } /* Il menu a tendina lo disegna il sistema: qui si puo' solo evitare che nasca bianco su bianco. */ .starfall-score-filters-v100 .sf-qselect option { color: #e7fcff; background: #03101f; } /* La riga che dice da dove arrivano questi record. E' sempre presente e non mente mai: l'archivio locale non deve poter passare per la classifica globale. */ .starfall-score-scope-v100 { position: relative; margin: 0; padding: 0 30px 8px; color: rgba(132, 215, 238, .55); font: 700 7px/1.3 "Courier New", monospace; letter-spacing: .13em; } .starfall-score-scope-v100[data-scope="global"] { color: #72ddff; } .starfall-score-scope-v100[data-scope="local"] { color: #c898ff; } .starfall-score-scope-v100[data-scope]:not([data-scope=""])::before { content: "// "; opacity: .6; } /* Dove si tocca, i controlli nuovi crescono. I 34px del pannello sono la misura del mouse: con un dito, su un telefono in verticale, sono stretti. Riguarda solo questi selettori -- le tre schede del pannello restano come sono state approvate -- e non vale coricati, dove a mancare e' l'altezza. */ @media (hover: none) and (pointer: coarse) { .starfall-score-filters-v100 .sf-qchips button, .starfall-score-filters-v100 .sf-qselect select { min-height: 42px; } } @media (max-width: 520px) { .starfall-score-filters-v100 { padding: 12px 18px 4px; gap: 7px; } .starfall-score-filters-v100 .sf-qrow { grid-template-columns: 1fr; gap: 4px; } .starfall-score-filters-v100 .sf-qchips--cycle { grid-template-columns: repeat(3, 1fr); } .starfall-score-scope-v100 { padding: 0 20px 8px; } } /* Telefono coricato: lo spazio verticale e' quello che manca, non quello orizzontale. Le righe tornano affiancate e il pannello si stringe in altezza invece di allungarsi. */ @media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-height: 500px) { .starfall-score-filters-v100 { padding: 8px 18px 2px; gap: 5px; } .starfall-score-filters-v100 .sf-qrow { grid-template-columns: 66px 1fr; gap: 8px; } .starfall-score-filters-v100 .sf-qchips--cycle { grid-template-columns: repeat(6, 1fr); } .starfall-score-filters-v100 .sf-qchips button, .starfall-score-filters-v100 .sf-qselect select { min-height: 30px; } } @media (prefers-reduced-motion: reduce) { .starfall-score-filters-v100 .sf-qchips button, .starfall-score-filters-v100 .sf-qselect select { transition: none !important; } } /* =========================================================== RECORD LINK · due gruppi, due pesi (v100b) Il difetto era di gerarchia, non di etichette. Due file di tre pulsanti quasi identici, con HARD sopra HARDCORE: a colpo d'occhio sembravano due sistemi di difficolta'. Sono due cose diverse. RUN DIFFICULTY sceglie quanto e' difficile giocare. Tre moduli, nome narrativo in alto e la parola comprensibile sotto. Selezionato ben visibile. SCORE RANKING sceglie quale colonna ordina l'archivio. Non e' una difficolta' e non deve pesare come tale: tab basse, tenui, larghezza identica. Stessa famiglia -- Courier, maiuscole spaziate, ciano -- gerarchia diversa. E i corpi crescono di 1-2px dove erano al limite del leggibile, senza toccare l'altezza del pannello. =========================================================== */ /* --- le micro-etichette respirano ------------------------- */ .starfall-score-filters-v100 .sf-qlabel { font-size: 9px; } .starfall-score-filters-v100 .sf-qchips button, .starfall-score-filters-v100 .sf-qselect select { font-size: 9px; } .starfall-score-legend-v99 { font-size: 9px; } .starfall-score-scope-v100 { font-size: 9px; } .starfall-score-v99 header span, .starfall-score-v99 header p { font-size: 9px; } .starfall-score-rows-v99 article b { font-size: 10px; } .starfall-score-rows-v99 article strong { font-size: 12px; } .starfall-score-rows-v99 article span { font-size: 13px; } .starfall-score-rows-v99 article small { font-size: 9px; } .starfall-score-loading-v99 { font-size: 10px; } /* --- RUN DIFFICULTY: tre moduli di missione --------------- */ .starfall-score-filters-v100 .sf-qmods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .starfall-score-filters-v100 .sf-qmods button { display: grid; align-content: center; gap: 2px; min-height: 46px; padding: 6px 7px; border: 1px solid rgba(98, 214, 255, .22); color: rgba(178, 227, 241, .72); background: rgba(0, 12, 28, .65); text-align: left; cursor: pointer; } /* Il nome narrativo e' l'identita' della rotta: va per esteso, e se serve va a capo. Meglio due righe che un nome tagliato. */ .starfall-score-filters-v100 .sf-qmods button b { display: block; color: inherit; font: 700 9px/1.2 "Courier New", monospace; letter-spacing: .07em; overflow-wrap: anywhere; } /* La parola comprensibile resta sempre visibile, sotto, piu' tenue. */ .starfall-score-filters-v100 .sf-qmods button i { display: block; color: rgba(132, 215, 238, .58); font: 700 8px/1 "Courier New", monospace; font-style: normal; letter-spacing: .16em; } .starfall-score-filters-v100 .sf-qmods button.is-active { border-color: #72ddff; color: #effdff; background: rgba(23, 91, 132, .34); box-shadow: inset 0 0 20px rgba(78, 210, 255, .1), 0 0 0 1px rgba(114, 221, 255, .28); } .starfall-score-filters-v100 .sf-qmods button.is-active i { color: #9fe9ff; } .starfall-score-filters-v100 .sf-qmods button:focus-visible { outline: 2px solid #72ddff; outline-offset: 2px; } /* --- SCORE RANKING: un controllo di vista, non una scelta -- */ .starfall-score-rank-v100 { position: relative; display: grid; gap: 4px; padding: 10px 28px 2px; } .starfall-score-rank-v100 .sf-ranklabel { color: rgba(132, 215, 238, .62); font: 700 9px/1.25 "Courier New", monospace; letter-spacing: .13em; } /* La microcopy spiega in una riga cosa cambia davvero. */ .starfall-score-rank-v100 .sf-ranklabel em { color: rgba(132, 215, 238, .4); font-style: normal; font-weight: 700; letter-spacing: .1em; } /* Le tre schede vivevano in un