/** * YSkill Survivor — Stitch « Etheric Arcade » hub theme. * Source: Google Stitch project « YSkill Arcade Survivor UI » (5001127056621581603). * Applies when — no DOM/id changes required. */ @import url("https://fonts.googleapis.com/css2?family=Anybody:ital,wght@0,400;0,700;0,800;1,800&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@700&display=swap"); html.ys-stitch-ui { --ys-surface: #14121b; --ys-surface-container: #211e28; --ys-surface-container-high: #2b2933; --ys-surface-container-highest: #36333e; --ys-on-surface: #e6e0ee; --ys-on-surface-variant: #b9cacb; --ys-primary-container: #00f0ff; --ys-on-primary-container: #006970; --ys-primary-fixed-dim: #00dbe9; --ys-primary: #dbfcff; --ys-secondary-container: #feb700; --ys-outline-variant: #3b494b; --ys-glass: rgba(20, 18, 27, 0.72); --ys-glass-border: rgba(255, 255, 255, 0.1); --ys-cyan-glow: rgba(0, 219, 233, 0.35); --ys-font-display: "Anybody", system-ui, sans-serif; --ys-font-body: "Inter", system-ui, sans-serif; --ys-font-mono: "JetBrains Mono", ui-monospace, monospace; --ys-safe-margin: max(12px, env(safe-area-inset-left, 0px)); } html.ys-stitch-ui body { font-family: var(--ys-font-body); color: var(--ys-on-surface); } html.ys-stitch-ui .menu-video-scrim { background: linear-gradient( 180deg, rgba(15, 13, 22, 0.92) 0%, rgba(20, 18, 27, 0.78) 45%, rgba(15, 13, 22, 0.94) 100% ) !important; } html.ys-stitch-ui #mainMenu.menu-hub { padding: max(10px, env(safe-area-inset-top, 0px)) var(--ys-safe-margin) max(8px, env(safe-area-inset-bottom, 0px)); gap: 8px; } /* ── Top bar ── */ html.ys-stitch-ui .menu-hub-top { background: var(--ys-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--ys-glass-border); border-radius: 16px; box-shadow: 0 4px 20px var(--ys-cyan-glow); padding: 8px 12px; } html.ys-stitch-ui .menu-hub-logo { font-family: var(--ys-font-display); font-size: 1.05rem; font-weight: 800; font-style: italic; letter-spacing: -0.02em; color: var(--ys-primary-fixed-dim); text-shadow: 0 0 12px var(--ys-cyan-glow); text-transform: uppercase; } html.ys-stitch-ui .menu-hub-sub { font-family: var(--ys-font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; color: var(--ys-on-surface-variant); } html.ys-stitch-ui .menu-hub-version { font-family: var(--ys-font-mono); border-color: rgba(0, 219, 233, 0.35); background: rgba(0, 219, 233, 0.08); color: var(--ys-primary-fixed-dim); } html.ys-stitch-ui .menu-hub-gold, html.ys-stitch-ui .menu-gold { background: var(--ys-glass); border: 1px solid rgba(254, 183, 0, 0.35); border-radius: 999px; padding: 4px 12px 4px 8px; box-shadow: 0 0 12px rgba(254, 183, 0, 0.15); } html.ys-stitch-ui .menu-hub-gold #globalGoldDisplay, html.ys-stitch-ui .menu-gold span { font-family: var(--ys-font-mono); font-weight: 700; color: var(--ys-secondary-container); } /* ── Auth ── */ html.ys-stitch-ui .menu-hub-auth { margin: 0 2px; } html.ys-stitch-ui .menu-auth-bar { background: var(--ys-glass); backdrop-filter: blur(12px); border: 1px solid var(--ys-glass-border); border-radius: 14px; padding: 8px 10px; } html.ys-stitch-ui .menu-auth-btn--discord { background: #5865f2; border-radius: 10px; font-family: var(--ys-font-body); font-weight: 600; } html.ys-stitch-ui .menu-auth-btn--google { background: var(--ys-surface-container-high); border: 1px solid var(--ys-outline-variant); border-radius: 10px; color: var(--ys-on-surface); font-weight: 600; } /* ── Hero center ── */ html.ys-stitch-ui .menu-hero-card { background: var(--ys-glass); backdrop-filter: blur(16px); border: 1px solid rgba(0, 219, 233, 0.2); border-radius: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06); } html.ys-stitch-ui .menu-hero-name { font-family: var(--ys-font-display); font-weight: 800; font-style: italic; letter-spacing: 0.04em; color: var(--ys-primary); text-shadow: 0 0 10px var(--ys-cyan-glow); } html.ys-stitch-ui .menu-hero-power-badge { font-family: var(--ys-font-mono); background: rgba(0, 219, 233, 0.12); border: 1px solid rgba(0, 219, 233, 0.4); border-radius: 8px; color: var(--ys-primary-fixed-dim); } html.ys-stitch-ui .menu-hero-frame { border-radius: 16px; border: 2px solid var(--ys-primary-fixed-dim); box-shadow: 0 0 20px var(--ys-cyan-glow); } /* ── Side rails ── */ html.ys-stitch-ui .menu-hub-rail-btn { background: var(--ys-glass); backdrop-filter: blur(12px); border: 1px solid rgba(0, 219, 233, 0.15); border-radius: 14px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45); transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.15s; } html.ys-stitch-ui .menu-hub-rail-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); } html.ys-stitch-ui .menu-hub-rail-stack > span:last-child { font-family: var(--ys-font-mono); font-size: 0.52rem; letter-spacing: 0.1em; color: var(--ys-on-surface); } /* ── PLAY — wide arcade pill (not circular) ── */ html.ys-stitch-ui .menu-hub-cta { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 10px 4px; } html.ys-stitch-ui #playBtn.menu-hub-play, html.ys-stitch-ui .menu-hub-play { width: 100%; max-width: 300px; min-height: 56px; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 14px 22px 12px; border-radius: 14px; border: 2px solid rgba(0, 219, 233, 0.55); border-bottom: 5px solid rgba(0, 80, 90, 0.85); background: linear-gradient( 180deg, rgba(0, 240, 255, 0.95) 0%, rgba(0, 200, 215, 0.92) 48%, rgba(0, 160, 175, 0.95) 100% ); color: var(--ys-on-primary-container, #006970); box-shadow: 0 0 20px rgba(0, 219, 233, 0.28), 0 6px 0 rgba(0, 50, 60, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35); animation: none; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } html.ys-stitch-ui #playBtn.menu-hub-play:hover, html.ys-stitch-ui #playBtn.menu-hub-play:focus-visible, html.ys-stitch-ui .menu-hub-play:hover, html.ys-stitch-ui .menu-hub-play:focus-visible { border-color: rgba(0, 240, 255, 0.85); box-shadow: 0 0 28px rgba(0, 219, 233, 0.45), 0 6px 0 rgba(0, 50, 60, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4); } html.ys-stitch-ui #playBtn.menu-hub-play:active, html.ys-stitch-ui .menu-hub-play:active { transform: translateY(3px); border-bottom-width: 2px; box-shadow: 0 0 16px rgba(0, 219, 233, 0.3), 0 2px 0 rgba(0, 50, 60, 0.5); } html.ys-stitch-ui .menu-hub-play-label { font-family: var(--ys-font-display); font-size: 1.42rem; font-weight: 800; font-style: italic; letter-spacing: 0.12em; line-height: 1; color: rgba(0, 45, 52, 0.95); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); } html.ys-stitch-ui .menu-hub-play-sub { font-family: var(--ys-font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(0, 55, 62, 0.82); opacity: 1; } html.ys-stitch-ui .menu-hub-play.is-stage-locked { background: var(--ys-surface-container-high, #2b2933); border-color: rgba(255, 180, 171, 0.45); border-bottom-color: rgba(80, 30, 30, 0.7); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45); } html.ys-stitch-ui .menu-hub-play.is-stage-locked .menu-hub-play-label, html.ys-stitch-ui .menu-hub-play.is-stage-locked .menu-hub-play-sub { color: var(--ys-on-surface-variant, #b9cacb); } /* ── Bottom dock ── */ html.ys-stitch-ui .menu-hub-dock { background: rgba(20, 18, 27, 0.92); backdrop-filter: blur(20px); border-top: 4px solid var(--ys-surface-container-highest); border-radius: 16px 16px 0 0; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5); padding: 10px 8px max(10px, env(safe-area-inset-bottom, 0px)); } html.ys-stitch-ui .menu-hub-dock-btn { border-radius: 12px; min-height: 52px; } html.ys-stitch-ui .menu-hub-dock-btn.is-active { background: rgba(0, 240, 255, 0.12); border: 1px solid rgba(0, 219, 233, 0.45); border-bottom: 2px solid var(--ys-primary-fixed-dim); color: var(--ys-primary-fixed-dim); } html.ys-stitch-ui .menu-hub-dock-label { font-family: var(--ys-font-mono); font-size: 0.5rem; letter-spacing: 0.1em; } html.ys-stitch-ui .menu-hub-glyph { background: rgba(0, 219, 233, 0.08); border-color: rgba(0, 219, 233, 0.35); border-radius: 10px; } html.ys-stitch-ui .menu-hub-soon-badge { font-family: var(--ys-font-mono); background: var(--ys-secondary-container); color: #271900; } /* ── Guest warning ── */ html.ys-stitch-ui .menu-guest-save-warning { border-color: rgba(255, 180, 171, 0.45); background: rgba(147, 0, 10, 0.25); border-radius: 12px; } /* ── Ambient particles (injected by stitch-ui-boot.js) ── */ html.ys-stitch-ui .ys-stitch-particles { pointer-events: none; position: fixed; inset: 0; z-index: 45; overflow: hidden; } html.ys-stitch-ui .ys-stitch-particle { position: absolute; border-radius: 50%; background: rgba(0, 219, 233, 0.35); box-shadow: 0 0 8px rgba(0, 219, 233, 0.45); animation: ys-stitch-float-up linear forwards; } @keyframes ys-stitch-float-up { from { opacity: 0; transform: translateY(0); } 50% { opacity: 0.7; } to { opacity: 0; transform: translateY(-120px); } } /* ── Submenus: shared glass tokens ── */ html.ys-stitch-ui .lb-modern-shell, html.ys-stitch-ui .shop-shell, html.ys-stitch-ui .idle-shell, html.ys-stitch-ui .hero-build-shell { --lb-surface: var(--ys-surface-container); --lb-accent: var(--ys-primary-fixed-dim); } @media (max-width: 420px) { html.ys-stitch-ui #playBtn.menu-hub-play, html.ys-stitch-ui .menu-hub-play { max-width: min(92vw, 300px); min-height: 52px; padding: 12px 18px 10px; } html.ys-stitch-ui .menu-hub-play-label { font-size: 1.28rem; } }