/* TAPsignal · TIER 0 CALIBRATION · INLINE tutorial styles (v95.44). * Replaces the v82 windowed-overlay system (~1k lines of polar-grid + * sweep + 3-dot progress chrome) with a lean inline surface that lives * IN the gameplay stage instead of above it. * * Two elements only: * .tut-caption · top-center text strip · plain mono · tier-hued * .tut-skip · top-right "skip" link · single-tap dismiss * * Plus: * .tut-halo · pulsing ring rendered as a child of the target * blob's · marks the call-to-action ON the blob * so the player's eye doesn't have to leave the field * * No backdrop. No modal. No animations beyond the caption fade-in, * the skip button hover, and the halo pulse. Reduced-motion users get * static halos + instant captions. */ /* v95.47 · NO-BOX, BIG, GLOWING + FLICKERING caption per Antoine * 2026-04-30: "make explanation text way bigger x1.5 · add glowing * flickering · remove the box window feeling · make the glowing and * flicker effect apparent and dominant." Was a bordered chip; now * it's pure floating text with a multi-layer neon glow + irregular * flicker baked into the always-on animation. */ .tut-caption { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 13; padding: 0; font-family: var(--mono); font-size: 20px; /* was 13px · 1.5x bump */ font-weight: 800; letter-spacing: 0.20em; text-transform: uppercase; color: var(--hue, #FFBF47); background: transparent; /* no box */ border: 0; /* no box */ border-radius: 0; box-shadow: none; pointer-events: none; white-space: normal; text-align: center; max-width: calc(100vw - 80px); text-overflow: clip; overflow: visible; opacity: 0; line-height: 1.15; /* Multi-layer neon glow · readable on any blob-painted background */ text-shadow: 0 0 6px var(--hue, #FFBF47), 0 0 14px var(--hue, #FFBF47), 0 0 28px var(--hue, #FFBF47), 0 0 48px rgba(var(--hrgb, 255, 191, 71), 0.55), 0 2px 4px rgba(0, 0, 0, 0.85); will-change: opacity, text-shadow; } .tut-caption.tut-caption-in { animation: tut-caption-in 320ms cubic-bezier(.16,.84,.24,1) forwards, tut-caption-flicker 2.4s steps(1) 320ms infinite; } @keyframes tut-caption-in { 0% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.94); } 60% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.04); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.00); } } /* Irregular flicker · steps(1) timing gives the staccato neon-sign feel * (no smooth fades between keyframes · text snaps between intensities). */ @keyframes tut-caption-flicker { 0% { opacity: 1.00; text-shadow: 0 0 6px var(--hue, #FFBF47), 0 0 14px var(--hue, #FFBF47), 0 0 28px var(--hue, #FFBF47), 0 0 48px rgba(var(--hrgb, 255, 191, 71), 0.55), 0 2px 4px rgba(0,0,0,0.85); } 6% { opacity: 0.55; text-shadow: 0 0 2px var(--hue, #FFBF47), 0 0 6px var(--hue, #FFBF47), 0 2px 4px rgba(0,0,0,0.85); } 9% { opacity: 1.00; text-shadow: 0 0 8px var(--hue, #FFBF47), 0 0 18px var(--hue, #FFBF47), 0 0 34px var(--hue, #FFBF47), 0 0 56px rgba(var(--hrgb, 255, 191, 71), 0.65), 0 2px 4px rgba(0,0,0,0.85); } 18% { opacity: 0.85; } 22% { opacity: 1.00; text-shadow: 0 0 12px var(--hue, #FFBF47), 0 0 26px var(--hue, #FFBF47), 0 0 44px var(--hue, #FFBF47), 0 0 64px rgba(var(--hrgb, 255, 191, 71), 0.75), 0 2px 4px rgba(0,0,0,0.85); } 35% { opacity: 1.00; text-shadow: 0 0 6px var(--hue, #FFBF47), 0 0 14px var(--hue, #FFBF47), 0 0 28px var(--hue, #FFBF47), 0 0 48px rgba(var(--hrgb, 255, 191, 71), 0.55), 0 2px 4px rgba(0,0,0,0.85); } 46% { opacity: 0.65; text-shadow: 0 0 3px var(--hue, #FFBF47), 0 0 8px var(--hue, #FFBF47), 0 2px 4px rgba(0,0,0,0.85); } 50% { opacity: 1.00; text-shadow: 0 0 14px var(--hue, #FFBF47), 0 0 30px var(--hue, #FFBF47), 0 0 50px var(--hue, #FFBF47), 0 0 72px rgba(var(--hrgb, 255, 191, 71), 0.85), 0 2px 4px rgba(0,0,0,0.85); } 62% { opacity: 0.92; } 74% { opacity: 1.00; text-shadow: 0 0 8px var(--hue, #FFBF47), 0 0 18px var(--hue, #FFBF47), 0 0 34px var(--hue, #FFBF47), 0 0 56px rgba(var(--hrgb, 255, 191, 71), 0.65), 0 2px 4px rgba(0,0,0,0.85); } 85% { opacity: 0.75; text-shadow: 0 0 4px var(--hue, #FFBF47), 0 0 10px var(--hue, #FFBF47), 0 2px 4px rgba(0,0,0,0.85); } 92% { opacity: 1.00; text-shadow: 0 0 12px var(--hue, #FFBF47), 0 0 26px var(--hue, #FFBF47), 0 0 44px var(--hue, #FFBF47), 0 0 64px rgba(var(--hrgb, 255, 191, 71), 0.75), 0 2px 4px rgba(0,0,0,0.85); } 100% { opacity: 1.00; text-shadow: 0 0 6px var(--hue, #FFBF47), 0 0 14px var(--hue, #FFBF47), 0 0 28px var(--hue, #FFBF47), 0 0 48px rgba(var(--hrgb, 255, 191, 71), 0.55), 0 2px 4px rgba(0,0,0,0.85); } } .tut-skip { /* v95.47.1 · WAY BIGGER · BOTTOM-RIGHT per Antoine 2026-04-30. * Out of the centered glowing caption's way and easy to thumb-tap * on mobile. Sits above the tier rail (z-index 14) and is opt-out * for the player who's seen the tutorial before. */ position: absolute; bottom: 18px; right: 14px; top: auto; left: auto; z-index: 14; padding: 12px 18px; font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2, #aab); background: rgba(2, 5, 7, 0.72); border: 1px solid rgba(170, 170, 187, 0.45); border-radius: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 160ms, border-color 160ms, background 160ms; box-shadow: 0 0 12px rgba(0, 0, 0, 0.6); } .tut-skip:hover, .tut-skip:focus-visible { color: var(--hue, #FFBF47); border-color: var(--hue, #FFBF47); outline: none; } /* Halo · rendered inline as a child of the target blob's . * v95.47.2 · Antoine 2026-04-30: "whatever NEXT move the player has * to tap that element needs to glow in a turquoise extra bright slow * flicker glow animation." Was tier-hued (currentColor); now a fixed * bright turquoise that reads as a unified "TAP HERE NEXT" signal * shared with .tut-slot-spotlight and .tut-pickup-glow. * * The slow-flicker is intentional · slower than the caption flicker * (3.6s vs 2.4s) so the two elements pulse out of sync, drawing the * eye between caption and target rather than locking together. */ .tut-halo { transform-origin: center; transform-box: fill-box; stroke: #1AE5C5 !important; fill: none; stroke-width: 4 !important; opacity: 1; filter: drop-shadow(0 0 6px #1AE5C5) drop-shadow(0 0 14px #1AE5C5) drop-shadow(0 0 24px rgba(26, 229, 197, 0.7)); animation: tut-next-flicker 3.6s steps(1) infinite; } /* Universal "TAP HERE NEXT" flicker · slow + dramatic + extra bright. * Used by .tut-halo, .tut-slot-spotlight, .tut-pickup-glow. steps(1) * timing snaps between intensity stops for the neon-sign feel. */ @keyframes tut-next-flicker { 0% { opacity: 1.00; filter: drop-shadow(0 0 6px #1AE5C5) drop-shadow(0 0 14px #1AE5C5) drop-shadow(0 0 24px rgba(26, 229, 197, 0.7)); } 8% { opacity: 0.55; filter: drop-shadow(0 0 3px #1AE5C5) drop-shadow(0 0 6px #1AE5C5); } 12% { opacity: 1.00; filter: drop-shadow(0 0 10px #1AE5C5) drop-shadow(0 0 20px #1AE5C5) drop-shadow(0 0 36px rgba(26, 229, 197, 0.85)); } 22% { opacity: 0.85; filter: drop-shadow(0 0 6px #1AE5C5) drop-shadow(0 0 14px #1AE5C5) drop-shadow(0 0 24px rgba(26, 229, 197, 0.7)); } 35% { opacity: 1.00; filter: drop-shadow(0 0 14px #1AE5C5) drop-shadow(0 0 28px #1AE5C5) drop-shadow(0 0 50px rgba(26, 229, 197, 0.95)); } 44% { opacity: 0.62; filter: drop-shadow(0 0 4px #1AE5C5) drop-shadow(0 0 8px #1AE5C5); } 50% { opacity: 1.00; filter: drop-shadow(0 0 18px #1AE5C5) drop-shadow(0 0 36px #1AE5C5) drop-shadow(0 0 64px rgba(26, 229, 197, 1.00)); } 62% { opacity: 0.92; filter: drop-shadow(0 0 8px #1AE5C5) drop-shadow(0 0 18px #1AE5C5) drop-shadow(0 0 32px rgba(26, 229, 197, 0.8)); } 78% { opacity: 1.00; filter: drop-shadow(0 0 12px #1AE5C5) drop-shadow(0 0 26px #1AE5C5) drop-shadow(0 0 44px rgba(26, 229, 197, 0.85)); } 88% { opacity: 0.70; filter: drop-shadow(0 0 4px #1AE5C5) drop-shadow(0 0 10px #1AE5C5); } 92% { opacity: 1.00; filter: drop-shadow(0 0 10px #1AE5C5) drop-shadow(0 0 22px #1AE5C5) drop-shadow(0 0 38px rgba(26, 229, 197, 0.9)); } 100% { opacity: 1.00; filter: drop-shadow(0 0 6px #1AE5C5) drop-shadow(0 0 14px #1AE5C5) drop-shadow(0 0 24px rgba(26, 229, 197, 0.7)); } } /* v95.47.2 · pickup grow-glow · lit on weapon-pickup elements that * the tutorial wants the player to grab. Uses the same turquoise + * flicker as halos so all "tap here next" prompts read identically. */ .weapon-pickup.tut-pickup-glow { filter: drop-shadow(0 0 8px #1AE5C5) drop-shadow(0 0 18px #1AE5C5) drop-shadow(0 0 32px rgba(26, 229, 197, 0.75)) !important; animation: tut-next-flicker 3.6s steps(1) infinite !important; outline: 2px solid #1AE5C5 !important; outline-offset: 4px; border-radius: 6px; } /* Reduced-motion: caption appears instantly, halo holds at mid-pulse but doesn't loop. Information is preserved (tier-hued ring still marks the target) without the implied motion. */ @media (prefers-reduced-motion: reduce) { .tut-caption.tut-caption-in { /* Static glow · no flicker · still big and dominant */ animation: tut-caption-in 80ms cubic-bezier(.16,.84,.24,1) forwards; } .tut-halo { animation: none; transform: scale(1.10); opacity: 0.65; } .tut-slot-spotlight { animation: none; box-shadow: 0 0 0 3px var(--hue, #FFBF47); } .tut-clock { animation: none; } } /* ─── v95.46 · TUTORIAL COUNTDOWN CHIP ───────────────────────────── * Sits below the caption strip · ticks from N seconds to 0 during * boss_warning + boss_kill so the 10-second urgency reads as a real * mechanic, not just words. Color escalates: hue → orange (warn) → * red (danger) → red-flash (expired). */ .tut-clock { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 13; padding: 4px 12px; font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 0.18em; color: var(--hue, #FFBF47); background: rgba(2, 5, 7, 0.72); border: 1px solid rgba(var(--hrgb, 255, 191, 71), 0.55); border-radius: 4px; box-shadow: 0 0 14px rgba(var(--hrgb, 255, 191, 71), 0.35); pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums; } .tut-clock.tut-clock-warn { color: #FF9E2A; border-color: rgba(255, 158, 42, 0.7); box-shadow: 0 0 16px rgba(255, 158, 42, 0.45); } .tut-clock.tut-clock-danger { color: #FF4040; border-color: rgba(255, 64, 64, 0.85); box-shadow: 0 0 22px rgba(255, 64, 64, 0.65); animation: tut-clock-pulse 360ms ease-in-out infinite; } .tut-clock.tut-clock-expired { color: #FF1010; border-color: rgba(255, 16, 16, 1); background: rgba(80, 6, 6, 0.85); animation: none; } @keyframes tut-clock-pulse { 0%, 100% { transform: translateX(-50%) scale(1.00); opacity: 1; } 50% { transform: translateX(-50%) scale(1.08); opacity: 0.75; } } /* ─── v95.47.2 · WEAPON SLOT SPOTLIGHT (turquoise unified) ───────── * Was tier-hued gold; now bright turquoise to match the halo + * pickup-glow "TAP HERE NEXT" signal. Uses the same shared flicker. */ .tut-slot-spotlight { position: relative; z-index: 12; outline: 3px solid #1AE5C5 !important; outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 5px rgba(26, 229, 197, 0.35), 0 0 26px rgba(26, 229, 197, 0.7) !important; animation: tut-slot-glow 3.6s steps(1) infinite; } @keyframes tut-slot-glow { 0% { box-shadow: 0 0 0 5px rgba(26, 229, 197, 0.35), 0 0 26px rgba(26, 229, 197, 0.7); transform: scale(1.00); } 8% { box-shadow: 0 0 0 3px rgba(26, 229, 197, 0.20), 0 0 10px rgba(26, 229, 197, 0.40); transform: scale(0.98); } 12% { box-shadow: 0 0 0 6px rgba(26, 229, 197, 0.55), 0 0 36px rgba(26, 229, 197, 0.85); transform: scale(1.04); } 35% { box-shadow: 0 0 0 8px rgba(26, 229, 197, 0.65), 0 0 50px rgba(26, 229, 197, 1.00); transform: scale(1.06); } 44% { box-shadow: 0 0 0 3px rgba(26, 229, 197, 0.25), 0 0 12px rgba(26, 229, 197, 0.45); transform: scale(0.98); } 50% { box-shadow: 0 0 0 9px rgba(26, 229, 197, 0.75), 0 0 60px rgba(26, 229, 197, 1.00); transform: scale(1.08); } 78% { box-shadow: 0 0 0 6px rgba(26, 229, 197, 0.55), 0 0 38px rgba(26, 229, 197, 0.85); transform: scale(1.04); } 88% { box-shadow: 0 0 0 3px rgba(26, 229, 197, 0.25), 0 0 14px rgba(26, 229, 197, 0.50); transform: scale(0.98); } 100% { box-shadow: 0 0 0 5px rgba(26, 229, 197, 0.35), 0 0 26px rgba(26, 229, 197, 0.7); transform: scale(1.00); } } /* ─── v95.47.1 · TUTORIAL FAILURE FLASH ──────────────────────────── * Antoine 2026-04-30: "when [the timer] executed make it apparent · * turn all glowing effect red across all UI · shake · show message * TRY AGAIN · make that tutorial section start again NOT from * beginning." * * Body class added by the JS for ~1.4s on beat-fail. Overrides --hue * + --hrgb at the document root scope, which retints every glowing * element themed off the tier hue (caption, halos, slot pulses, * tier rail, HUD chips). Pulses opacity for the duration so the * flash reads as "alarm" not "permanent state change". */ body.tut-fail-flash { --hue: #FF2A2A; --hrgb: 255, 42, 42; animation: tut-fail-pulse 200ms steps(1) 7; } body.tut-fail-flash .tut-caption { color: #FF2A2A !important; text-shadow: 0 0 8px #FF2A2A, 0 0 18px #FF2A2A, 0 0 36px #FF2A2A, 0 0 60px rgba(255, 42, 42, 0.85), 0 2px 4px rgba(0, 0, 0, 0.85); /* Disable the gentle flicker · the hard pulse below is louder */ animation: tut-fail-caption-pulse 160ms steps(1) 8 !important; } body.tut-fail-flash .tut-halo { stroke: #FF2A2A !important; /* Override the turquoise flicker filter + animation · keep the halo * solidly red while the fail flash is active. */ filter: drop-shadow(0 0 10px #FF2A2A) drop-shadow(0 0 22px #FF2A2A) !important; animation: tut-fail-halo-pulse 200ms steps(1) 7 !important; } body.tut-fail-flash .weapon-pickup.tut-pickup-glow { outline-color: #FF2A2A !important; filter: drop-shadow(0 0 8px #FF2A2A) drop-shadow(0 0 18px #FF2A2A) !important; animation: tut-fail-halo-pulse 200ms steps(1) 7 !important; } body.tut-fail-flash .tut-slot-spotlight { outline-color: #FF2A2A !important; box-shadow: 0 0 0 5px rgba(255, 42, 42, 0.45), 0 0 30px rgba(255, 42, 42, 0.85) !important; animation: tut-fail-halo-pulse 200ms steps(1) 7 !important; } @keyframes tut-fail-halo-pulse { 0%, 100% { opacity: 1.00; } 50% { opacity: 0.50; } } body.tut-fail-flash .tut-clock { color: #FF2A2A !important; border-color: #FF2A2A !important; background: rgba(80, 6, 6, 0.95) !important; box-shadow: 0 0 28px rgba(255, 42, 42, 0.85) !important; } @keyframes tut-fail-pulse { 0%, 100% { background-color: transparent; } 50% { background-color: rgba(120, 0, 0, 0.18); } } @keyframes tut-fail-caption-pulse { 0%, 100% { opacity: 1.00; transform: translateX(-50%) scale(1.00); } 50% { opacity: 0.55; transform: translateX(-50%) scale(1.08); } }