/* ========================================================================= wepayuncheeze.com — Apple-style landing surface Sits in front of the existing voxel game. When the user hits "Play", #apple-landing fades out, .game-active is added to , and the original game DOM (#gameContainer) takes over the viewport. ========================================================================= */ :root { /* ---- Surfaces (light) ---- */ --apple-fg: #1d1d1f; --apple-fg-soft: #515154; --apple-fg-mute: #86868b; --apple-bg: #ffffff; --apple-bg-alt: #f5f5f7; --apple-bg-dark: #000000; --apple-rule: rgba(0, 0, 0, 0.08); /* ---- Accents ---- */ --apple-accent: #0071e3; --apple-accent-hover: #0077ed; --apple-accent-brand: #7e9cd8; --apple-accent-purple: #957fb8; /* ---- Fonts ---- */ --apple-stack: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; --apple-mono: ui-monospace, "SF Mono", "Menlo", "Roboto Mono", Consolas, "Liberation Mono", monospace; --apple-max: 980px; --apple-wide: 1200px; /* ---- HUD tokens (LIGHT) ---- */ --hud-glass: rgba(255, 255, 255, 0.72); --hud-glass-strong: rgba(255, 255, 255, 0.86); --hud-glass-soft: rgba(255, 255, 255, 0.5); --hud-hairline: rgba(0, 0, 0, 0.08); --hud-hairline-soft: rgba(0, 0, 0, 0.04); --hud-ink: #1d1d1f; --hud-ink-soft: #515154; --hud-ink-mute: #86868b; --hud-accent: #0071e3; --hud-accent-soft: rgba(0, 113, 227, 0.12); --hud-overlay-scrim: rgba(245, 245, 247, 0.6); --hud-tile-bg: rgba(0, 0, 0, 0.03); --hud-tile-hover: rgba(0, 0, 0, 0.06); --hud-tile-selected: rgba(0, 113, 227, 0.12); --hud-shadow: 0 24px 80px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.08); --hud-shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.10); --hud-radius: 18px; --hud-radius-sm: 12px; --hud-radius-pill: 999px; --hud-ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ---- Apple landing tokens (DARK) - applied when html[data-theme=dark] OR html[data-hud=dark] (cross-fleet theme bridge), and as a fallback when prefers-color-scheme is dark and no explicit theme has been chosen ---- */ html[data-theme="dark"], html[data-hud="dark"] { --apple-fg: #f5f5f7; --apple-fg-soft: #c7c7cc; --apple-fg-mute: #86868b; --apple-bg: #000000; --apple-bg-alt: #0a0a0c; --apple-bg-dark: #050507; --apple-rule: rgba(255, 255, 255, 0.10); --apple-accent: #2997ff; --apple-accent-hover: #5ab0ff; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --apple-fg: #f5f5f7; --apple-fg-soft: #c7c7cc; --apple-fg-mute: #86868b; --apple-bg: #000000; --apple-bg-alt: #0a0a0c; --apple-bg-dark: #050507; --apple-rule: rgba(255, 255, 255, 0.10); --apple-accent: #2997ff; --apple-accent-hover: #5ab0ff; } } /* ---- HUD tokens (DARK) - applied when html[data-hud=dark] ---- */ html[data-hud="dark"] { --hud-glass: rgba(22, 22, 23, 0.72); --hud-glass-strong: rgba(28, 28, 30, 0.88); --hud-glass-soft: rgba(28, 28, 30, 0.55); --hud-hairline: rgba(255, 255, 255, 0.10); --hud-hairline-soft: rgba(255, 255, 255, 0.05); --hud-ink: #f5f5f7; --hud-ink-soft: #c7c7cc; --hud-ink-mute: #86868b; --hud-accent: #2997ff; --hud-accent-soft: rgba(41, 151, 255, 0.18); --hud-overlay-scrim: rgba(0, 0, 0, 0.45); --hud-tile-bg: rgba(255, 255, 255, 0.04); --hud-tile-hover: rgba(255, 255, 255, 0.08); --hud-tile-selected: rgba(41, 151, 255, 0.22); --hud-shadow: 0 28px 100px rgba(0, 0, 0, 0.55), 0 10px 32px rgba(0, 0, 0, 0.40); --hud-shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.35); } /* Auto dark mode (only when user hasn't picked a theme yet) */ @media (prefers-color-scheme: dark) { html:not([data-hud]) { --hud-glass: rgba(22, 22, 23, 0.72); --hud-glass-strong: rgba(28, 28, 30, 0.88); --hud-glass-soft: rgba(28, 28, 30, 0.55); --hud-hairline: rgba(255, 255, 255, 0.10); --hud-hairline-soft: rgba(255, 255, 255, 0.05); --hud-ink: #f5f5f7; --hud-ink-soft: #c7c7cc; --hud-ink-mute: #86868b; --hud-accent: #2997ff; --hud-accent-soft: rgba(41, 151, 255, 0.18); --hud-overlay-scrim: rgba(0, 0, 0, 0.45); --hud-tile-bg: rgba(255, 255, 255, 0.04); --hud-tile-hover: rgba(255, 255, 255, 0.08); --hud-tile-selected: rgba(41, 151, 255, 0.22); --hud-shadow: 0 28px 100px rgba(0, 0, 0, 0.55), 0 10px 32px rgba(0, 0, 0, 0.40); --hud-shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.35); } } /* ---------- Reset (scoped, doesn't fight the game's reset) ------------ */ #apple-landing, #apple-landing *, #apple-landing *::before, #apple-landing *::after { box-sizing: border-box; } #apple-landing { position: relative; z-index: 5; min-height: 100vh; background: var(--apple-bg); color: var(--apple-fg); font-family: var(--apple-stack); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern", "liga", "calt"; line-height: 1.47; letter-spacing: -0.003em; /* Override the game-mode body locks while landing is visible */ overflow: visible; touch-action: auto; image-rendering: auto; } /* While landing is showing, free the body so it can scroll naturally. */ html.landing-mode, html.landing-mode body { position: static !important; overflow: auto !important; height: auto !important; width: auto !important; touch-action: auto !important; overscroll-behavior: auto !important; background: var(--apple-bg) !important; color: var(--apple-fg) !important; font-family: var(--apple-stack) !important; image-rendering: auto !important; } /* Doc pages (no #apple-landing wrapper) — ensure heading colors flow */ html.landing-mode .doc-wrap h1, html.landing-mode .doc-wrap h2, html.landing-mode .doc-wrap h3 { color: var(--apple-fg); } /* Hide all of the game-mode chrome while the landing is up. The game loader + service-worker bar live there; they come back on play. */ html.landing-mode #wpu-bar, html.landing-mode #wpu-hud, html.landing-mode #wpu-settings-btn, html.landing-mode #wpu-settings, html.landing-mode #wpu-settings-fab, html.landing-mode #wpu-settings-sheet, html.landing-mode .wpu-sheet-scrim, html.landing-mode #wpu-ai-tip, html.landing-mode #wpu-aitip, html.landing-mode #wpu-pause, html.landing-mode #gameContainer { display: none !important; } /* Hot-replace the landing hero cube with the generated voxel image when it's available (graceful fallback to cube if image missing). */ .al-hero-photo { margin: 56px auto 0; width: min(1180px, 92%); border-radius: 28px; overflow: hidden; background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.05) 100%), url("assets/img/hero-voxel.png") center/cover no-repeat, linear-gradient(135deg, #e8eef9 0%, #f5f5f7 60%, #ece7f3 100%); aspect-ratio: 16 / 10; box-shadow: 0 30px 80px rgba(40, 60, 110, 0.15), inset 0 0 0 1px rgba(0,0,0,0.04); position: relative; } .al-hero-photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 22%; background: linear-gradient(to top, var(--apple-bg), transparent); pointer-events: none; } @media (prefers-color-scheme: dark) { .al-hero-photo { background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.2) 100%), url("assets/img/hero-voxel.png") center/cover no-repeat, linear-gradient(135deg, #14181f 0%, #1d1f25 60%, #181421 100%); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255,255,255,0.04); } } /* When game-active flips on we hide the landing entirely. */ html.game-active #apple-landing { display: none !important; } html.game-active .al-drawer, html.game-active .al-drawer-scrim { display: none !important; } /* ---------- Sticky nav (Liquid Glass) --------------------------------- */ .al-nav { position: sticky; top: 0; z-index: 1000; width: 100%; height: 48px; background: rgba(255, 255, 255, 0.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--apple-rule); } .al-nav-inner { max-width: var(--apple-wide); margin: 0 auto; padding: 0 22px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 12px; letter-spacing: -0.01em; } .al-nav-brand { font-weight: 600; color: var(--apple-fg); text-decoration: none; font-size: 14px; letter-spacing: -0.02em; } .al-nav-brand .al-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--apple-accent-brand); margin-right: 8px; vertical-align: 1px; } .al-nav-links { display: flex; gap: 26px; align-items: center; } .al-nav-links a { color: var(--apple-fg); text-decoration: none; opacity: 0.85; transition: opacity 0.2s ease; } .al-nav-links a:hover { opacity: 1; } .al-nav-cta { background: var(--apple-accent); color: #fff !important; padding: 6px 14px; border-radius: 980px; font-weight: 500; opacity: 1 !important; transition: background-color 0.2s ease; } .al-nav-cta:hover { background: var(--apple-accent-hover); } @media (max-width: 600px) { .al-nav-links a:not(.al-nav-cta) { display: none; } } /* ---------- Mobile hamburger + theme toggle -------------------------- */ .al-nav-mob{ display:none; align-items:center; gap:6px; margin-left:8px; } @media (max-width: 600px){ .al-nav-mob{ display:inline-flex } /* keep Play CTA on mobile — push the rest into the drawer */ .al-nav-links{ margin-right:0 } } .al-iconbtn{ width:36px;height:36px; display:inline-flex;align-items:center;justify-content:center; border-radius:999px; border:1px solid var(--apple-rule); background:transparent; color:var(--apple-fg); cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease; } .al-iconbtn:hover{ background:color-mix(in srgb, var(--apple-accent) 8%, transparent); border-color:color-mix(in srgb, var(--apple-accent) 30%, transparent); color:var(--apple-accent); } .al-iconbtn svg{ width:17px;height:17px;display:block } /* Icon swap: sun when the effective theme is LIGHT, moon when DARK. */ .al-iconbtn .glyph-sun{ display:none } .al-iconbtn .glyph-moon{ display:block } html[data-theme="light"] .al-iconbtn .glyph-sun, html[data-hud="light"] .al-iconbtn .glyph-sun{ display:block } html[data-theme="light"] .al-iconbtn .glyph-moon, html[data-hud="light"] .al-iconbtn .glyph-moon{ display:none } html[data-theme="dark"] .al-iconbtn .glyph-sun, html[data-hud="dark"] .al-iconbtn .glyph-sun{ display:none } html[data-theme="dark"] .al-iconbtn .glyph-moon, html[data-hud="dark"] .al-iconbtn .glyph-moon{ display:block } @media (prefers-color-scheme: light){ html:not([data-theme="dark"]):not([data-hud="dark"]) .al-iconbtn .glyph-sun{ display:block } html:not([data-theme="dark"]):not([data-hud="dark"]) .al-iconbtn .glyph-moon{ display:none } } /* Shared sprite glyph — outline SF-Symbol-style icons (tinyblue.dev/glyphs.svg) */ .glyph{ width:1em;height:1em;display:inline-block; vertical-align:-0.15em; fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round; flex-shrink:0; } .glyph--lg{ width:22px;height:22px } .glyph--xl{ width:32px;height:32px } .al-drawer-scrim{ position:fixed;inset:0;z-index:998; background:rgba(0,0,0,.45); opacity:0;pointer-events:none; transition:opacity .25s ease; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); } html[data-theme="light"] .al-drawer-scrim{ background:rgba(0,0,0,.28) } .al-drawer-scrim.is-open{ opacity:1; pointer-events:auto } .al-drawer{ position:fixed;top:0;right:0;bottom:0;z-index:999; width:min(320px, 84vw); background:var(--apple-bg); border-left:1px solid var(--apple-rule); backdrop-filter:saturate(180%) blur(28px); -webkit-backdrop-filter:saturate(180%) blur(28px); transform:translateX(100%); transition:transform .32s cubic-bezier(.2,.7,.15,1); display:flex;flex-direction:column; padding:calc(12px + env(safe-area-inset-top)) 18px 18px; box-shadow:-30px 0 60px -30px rgba(0,0,0,.6); font-family:var(--apple-stack); } .al-drawer.is-open{ transform:translateX(0) } .al-drawer-head{ display:flex;align-items:center;justify-content:space-between; padding-bottom:14px;border-bottom:1px solid var(--apple-rule); margin-bottom:14px; } .al-drawer-close{ width:34px;height:34px; display:inline-flex;align-items:center;justify-content:center; border-radius:999px; border:1px solid var(--apple-rule); color:var(--apple-fg-soft); background:transparent;cursor:pointer; transition:color .2s ease, border-color .2s ease; } .al-drawer-close:hover{ color:var(--apple-fg); border-color:var(--apple-fg-soft) } .al-drawer-close svg{ width:14px;height:14px } .al-drawer-links{ display:flex;flex-direction:column;gap:2px; margin-bottom:14px; } .al-drawer-links a{ display:flex;align-items:center;justify-content:space-between; padding:13px 14px;border-radius:12px; font-size:15px;color:var(--apple-fg); text-decoration:none; transition:background .2s ease; } .al-drawer-links a:hover{ background:var(--apple-bg-alt) } .al-drawer-links a .chev{ color:var(--apple-fg-mute); font-size:13px } .al-drawer-row{ display:flex;align-items:center;justify-content:space-between; padding:13px 14px;border-radius:12px; font-size:14px;color:var(--apple-fg-soft); border-top:1px solid var(--apple-rule);margin-top:6px; } .al-themeseg{ display:inline-flex; background:var(--apple-bg-alt); border:1px solid var(--apple-rule); border-radius:999px;padding:3px; } .al-themeseg button{ width:34px;height:28px;border-radius:999px; display:inline-flex;align-items:center;justify-content:center; color:var(--apple-fg-soft); background:transparent;border:0;cursor:pointer; transition:background .2s ease, color .2s ease; } .al-themeseg button.is-on{ background:var(--apple-bg); color:var(--apple-fg); box-shadow:0 1px 2px rgba(0,0,0,.15); } .al-themeseg button svg{ width:14px;height:14px } .al-drawer-cta{ display:inline-flex;align-items:center;justify-content:center;gap:8px; margin-top:auto; padding:13px 18px;border-radius:999px; background:var(--apple-accent); color:#fff !important; font-weight:500;font-size:14.5px; text-decoration:none; transition:background .2s ease; } .al-drawer-cta:hover{ background:var(--apple-accent-hover) } /* ---------- Section scaffolding --------------------------------------- */ .al-section { padding: 96px 22px; text-align: center; } .al-section--tight { padding: 64px 22px; } .al-section--alt { background: var(--apple-bg-alt); } .al-section--dark { background: var(--apple-bg-dark); color: #f5f5f7; } .al-section--dark .al-eyebrow { color: #86868b; } .al-section--dark h2, .al-section--dark h3 { color: #f5f5f7; } .al-section--dark p { color: #a1a1a6; } .al-container { max-width: var(--apple-max); margin: 0 auto; } .al-container--wide { max-width: var(--apple-wide); } /* ---------- Typography ------------------------------------------------ */ .al-eyebrow { font-size: 17px; font-weight: 600; color: var(--apple-fg-soft); letter-spacing: -0.01em; margin-bottom: 8px; } .al-hero h1 { font-size: clamp(2.75rem, 6.4vw, 6rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.04; margin: 0 0 18px; color: var(--apple-fg); } .al-hero h1 .al-hero-accent { background: linear-gradient(120deg, #0071e3 0%, #7e9cd8 60%, #957fb8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .al-hero-tagline { font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 500; letter-spacing: -0.015em; color: var(--apple-fg); max-width: 720px; margin: 0 auto 14px; line-height: 1.25; } .al-hero-sub { font-size: clamp(1rem, 1.4vw, 1.125rem); font-weight: 400; color: var(--apple-fg-soft); max-width: 620px; margin: 0 auto 36px; line-height: 1.5; } .al-h2 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; margin: 0 0 16px; } .al-h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 12px; } .al-lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--apple-fg-soft); max-width: 640px; margin: 0 auto 32px; line-height: 1.5; } /* ---------- Buttons --------------------------------------------------- */ .al-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; } .al-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 980px; font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.18s ease; -webkit-tap-highlight-color: transparent; } .al-btn-primary { background: var(--apple-accent); color: #fff; } .al-btn-primary:hover { background: var(--apple-accent-hover); } .al-btn-primary:active { transform: scale(0.97); } .al-btn-ghost { background: transparent; color: var(--apple-accent); border-color: var(--apple-accent); } .al-btn-ghost:hover { background: rgba(0, 113, 227, 0.06); } .al-btn-ghost.on-dark { color: #2997ff; border-color: #2997ff; } .al-btn-ghost.on-dark:hover { background: rgba(41, 151, 255, 0.08); } .al-link { display: inline-flex; align-items: center; gap: 4px; color: var(--apple-accent); text-decoration: none; font-size: 17px; letter-spacing: -0.01em; margin-top: 4px; } .al-link::after { content: "›"; font-size: 1.3em; line-height: 1; transform: translateY(-1px); transition: transform 0.2s ease; } .al-link:hover::after { transform: translate(3px, -1px); } .al-section--dark .al-link { color: #2997ff; } /* ---------- Hero visual: a CSS-only voxel cube ------------------------ */ .al-hero { position: relative; padding-top: 88px; padding-bottom: 0; overflow: hidden; } .al-hero-stage { margin: 56px auto 0; height: clamp(280px, 42vw, 460px); position: relative; perspective: 1400px; perspective-origin: 50% 55%; } .al-cube { position: absolute; top: 50%; left: 50%; width: clamp(180px, 22vw, 260px); height: clamp(180px, 22vw, 260px); transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(-22deg) rotateY(36deg); animation: al-cube-spin 22s linear infinite; filter: drop-shadow(0 40px 60px rgba(30, 38, 70, 0.18)); } .al-cube-face { position: absolute; inset: 0; border-radius: 6px; background-size: 4px 4px; background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), inset 0 -18px 32px rgba(0, 0, 0, 0.18); } .al-cube-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%); } .al-cube .al-face-top { background-color: #7bbf6a; transform: rotateX(90deg) translateZ(calc(clamp(180px, 22vw, 260px) / 2)); } .al-cube .al-face-bottom { background-color: #4a3a2a; transform: rotateX(-90deg) translateZ(calc(clamp(180px, 22vw, 260px) / 2)); } .al-cube .al-face-front { background-color: #8b6f47; transform: translateZ(calc(clamp(180px, 22vw, 260px) / 2)); } .al-cube .al-face-back { background-color: #6a5235; transform: rotateY(180deg) translateZ(calc(clamp(180px, 22vw, 260px) / 2)); } .al-cube .al-face-left { background-color: #7e9cd8; transform: rotateY(-90deg) translateZ(calc(clamp(180px, 22vw, 260px) / 2)); } .al-cube .al-face-right { background-color: #957fb8; transform: rotateY(90deg) translateZ(calc(clamp(180px, 22vw, 260px) / 2)); } @keyframes al-cube-spin { 0% { transform: translate(-50%, -50%) rotateX(-22deg) rotateY(0deg); } 100% { transform: translate(-50%, -50%) rotateX(-22deg) rotateY(360deg); } } @media (prefers-reduced-motion: reduce) { .al-cube { animation: none; } } /* Soft long shadow under the hero stage */ .al-hero-stage::after { content: ""; position: absolute; left: 50%; bottom: 4%; width: 60%; height: 18px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0,0,0,0.18), transparent); filter: blur(6px); } /* ---------- Feature grid (Apple-style 2x2 product tiles) ------------- */ .al-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; } @media (max-width: 740px) { .al-grid { grid-template-columns: 1fr; } } .al-card { position: relative; background: var(--apple-bg-alt); border-radius: 22px; padding: 48px 36px; text-align: left; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.04); min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; } .al-card--dark { background: #161617; color: #f5f5f7; border-color: rgba(255, 255, 255, 0.06); } .al-card--dark .al-card-eyebrow { color: #a1a1a6; } .al-card--dark .al-card-body { color: #c7c7cc; } .al-card-eyebrow { font-size: 15px; font-weight: 600; color: var(--apple-accent-brand); letter-spacing: -0.01em; margin-bottom: 10px; text-transform: uppercase; font-feature-settings: "tnum"; } .al-card-title { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 600; letter-spacing: -0.022em; line-height: 1.12; margin: 0 0 12px; } .al-card-body { font-size: 1rem; color: var(--apple-fg-soft); line-height: 1.5; margin: 0; max-width: 36ch; } .al-card-visual { position: absolute; top: 28px; right: 28px; width: 120px; height: 120px; border-radius: 18px; background: linear-gradient(135deg, #7e9cd8, #957fb8); box-shadow: 0 18px 40px rgba(126, 156, 216, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.2); opacity: 0.95; } .al-card-visual.v-forest { background: linear-gradient(135deg, #76946a, #2a3a25); } .al-card-visual.v-ore { background: linear-gradient(135deg, #e6a85c, #b06a25); } .al-card-visual.v-engine { background: linear-gradient(135deg, #0071e3, #1d1d1f); } .al-card-visual.v-mobile { background: linear-gradient(135deg, #f5f5f7, #c7c7cc); } .al-card-visual.v-water { background: linear-gradient(135deg, #5fb4ff, #003a7a); } /* ---------- Specs row ------------------------------------------------- */ .al-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; text-align: center; } @media (max-width: 740px) { .al-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } } .al-spec-num { font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 600; letter-spacing: -0.03em; background: linear-gradient(140deg, var(--apple-accent) 0%, var(--apple-accent-brand) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; margin-bottom: 8px; } .al-spec-label { font-size: 0.95rem; color: var(--apple-fg-soft); letter-spacing: -0.005em; } /* ---------- Controls (keycap row) ------------------------------------ */ .al-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; max-width: 780px; margin: 32px auto 0; } .al-keycap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; color: #d2d2d7; } .al-section--alt .al-keycap { background: #fff; border-color: var(--apple-rule); color: var(--apple-fg); } .al-keycap kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 4px 8px; border-radius: 6px; background: #fff; color: var(--apple-fg); font-family: var(--apple-stack); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); } .al-section--dark .al-keycap kbd { background: #2c2c2e; color: #f5f5f7; border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } .al-keycap-label { font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; } /* ---------- Final CTA band ------------------------------------------- */ .al-band { position: relative; padding: 96px 22px; text-align: center; background: radial-gradient(ellipse at 50% 0%, #1a2a4a 0%, #000 70%); color: #fff; overflow: hidden; } .al-band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(126, 156, 216, 0.18) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(149, 127, 184, 0.16) 0%, transparent 40%); pointer-events: none; } .al-band h2 { color: #fff; } .al-band p { color: #a1a1a6; } /* ---------- Footer ---------------------------------------------------- */ .al-footer { background: #f5f5f7; color: #6e6e73; font-size: 12px; padding: 24px 22px; border-top: 1px solid var(--apple-rule); } .al-footer-inner { max-width: var(--apple-wide); margin: 0 auto; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; } .al-footer a { color: #6e6e73; text-decoration: none; } .al-footer a:hover { text-decoration: underline; } /* ---------- Scroll-reveal hooks -------------------------------------- */ .al-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } .al-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .al-reveal { opacity: 1; transform: none; transition: none; } } /* ---------- Landing -> game transition ------------------------------- */ #apple-landing.is-leaving { opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } /* ---------- Responsive tightening ------------------------------------ */ @media (max-width: 480px) { .al-section { padding: 64px 18px; } .al-band { padding: 72px 18px; } .al-card { padding: 36px 24px; min-height: 280px; } .al-card-visual { width: 84px; height: 84px; top: 20px; right: 20px; border-radius: 14px; } .al-hero { padding-top: 56px; } } /* ===================================================================== IN-GAME UI — APPLE LIQUID GLASS PASS Everything below sits on top of the running voxel canvas. All surfaces share the same token system, light/dark mode, and motion language. ===================================================================== */ html.game-active body { font-family: var(--apple-stack) !important; color: var(--hud-ink); } /* Hide LEGACY chrome we are replacing — must outweigh the inline styles. */ html.game-active #wpu-bar, html.game-active #wpu-settings-btn, html.game-active #wpu-settings, html.game-active #wpu-ai-tip { display: none !important; } /* Show the new HUD chrome only when the game canvas is active. */ html:not(.game-active) #wpu-hud, html:not(.game-active) #wpu-settings-fab, html:not(.game-active) #wpu-settings-sheet, html:not(.game-active) .wpu-sheet-scrim, html:not(.game-active) #wpu-aitip { display: none !important; } html.game-active.is-loading #wpu-hud, html.game-active.is-loading #wpu-settings-fab, html.game-active.is-loading #wpu-aitip { display: none !important; } /* ---------------- Glyph SVGs ---------------- */ .hud-glyph { width: 1em; height: 1em; display: inline-block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; flex: 0 0 auto; } .hud-glyph--filled { fill: currentColor; stroke: none; } /* ---------------- Top status bar (HUD) ---------------- */ #wpu-hud { position: fixed; top: env(safe-area-inset-top, 0); left: 0; right: 0; z-index: 9990; display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 14px; background: var(--hud-glass); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-bottom: 1px solid var(--hud-hairline); color: var(--hud-ink); font-family: var(--apple-stack); font-size: 12px; letter-spacing: -0.005em; pointer-events: none; transition: opacity 0.3s var(--hud-ease), transform 0.3s var(--hud-ease); } #wpu-hud.is-hidden { opacity: 0; transform: translateY(-100%); pointer-events: none; } #wpu-hud > * { pointer-events: auto; } .hud-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -0.02em; font-size: 13px; color: var(--hud-ink); } .hud-brand .hud-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--apple-accent-brand), var(--apple-accent-purple)); box-shadow: 0 0 8px rgba(126, 156, 216, 0.6); } .hud-stats { display: inline-flex; align-items: center; gap: 18px; font-family: var(--apple-mono); font-feature-settings: "tnum" 1, "zero" 1; color: var(--hud-ink-soft); } .hud-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.01em; } .hud-stat-label { color: var(--hud-ink-mute); text-transform: uppercase; font-size: 9.5px; letter-spacing: 0.08em; font-family: var(--apple-stack); font-weight: 600; } .hud-stat-value { color: var(--hud-ink); font-weight: 500; transition: color 0.2s var(--hud-ease); min-width: 2ch; } .hud-stat-value.is-changed { color: var(--hud-accent); } .hud-actions { display: inline-flex; gap: 4px; align-items: center; } .hud-icon-btn { width: 30px; height: 30px; border-radius: var(--hud-radius-sm); background: transparent; border: 0; color: var(--hud-ink-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; transition: background-color 0.15s var(--hud-ease), color 0.15s var(--hud-ease); -webkit-tap-highlight-color: transparent; } .hud-icon-btn:hover { background: var(--hud-tile-hover); color: var(--hud-ink); } .hud-icon-btn:active { transform: scale(0.94); } .hud-icon-btn.is-on { color: var(--hud-accent); background: var(--hud-accent-soft); } @media (max-width: 600px) { #wpu-hud { font-size: 11px; padding: 0 10px; height: 36px; } .hud-stats { gap: 10px; } .hud-stat { font-size: 10px; } .hud-stat-label { display: none; } } /* ---------------- Crosshair (light/dark aware) ---------------- */ #crosshair { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); pointer-events: none; z-index: 80; mix-blend-mode: difference; } #crosshair::before, #crosshair::after { content: ""; position: absolute; background: #ffffff; border-radius: 1px; } #crosshair::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); } #crosshair::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); } /* ---------------- Hotbar (bottom-center 9 slot) ---------------- */ #inventory { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 8px; background: var(--hud-glass); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border: 1px solid var(--hud-hairline); border-radius: var(--hud-radius); box-shadow: var(--hud-shadow-soft); z-index: 100; pointer-events: auto; } .inventory-slot { width: 56px; height: 56px; background: var(--hud-tile-bg); border: 1px solid var(--hud-hairline-soft); border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; padding: 6px; transition: transform 0.18s var(--hud-ease), background-color 0.18s var(--hud-ease), border-color 0.18s var(--hud-ease), box-shadow 0.18s var(--hud-ease); -webkit-tap-highlight-color: transparent; } .inventory-slot::before { content: none !important; } .inventory-slot img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); transition: transform 0.2s var(--hud-ease); pointer-events: none; } .inventory-slot:hover { background: var(--hud-tile-hover); transform: translateY(-3px); } .inventory-slot:hover img { transform: scale(1.06); } .inventory-slot.selected { background: var(--hud-tile-selected); border-color: var(--hud-accent); box-shadow: 0 0 0 2px var(--hud-accent-soft), 0 10px 24px rgba(0, 113, 227, 0.25); transform: translateY(-2px); } .inventory-slot.selected::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--hud-accent); opacity: 0.5; pointer-events: none; } .inventory-slot.drag-over { background: var(--hud-accent-soft) !important; border-color: var(--hud-accent) !important; } @media (max-width: 600px) { #inventory { gap: 4px; padding: 6px; bottom: 16px; } .inventory-slot { width: 48px; height: 48px; border-radius: 10px; padding: 4px; } } /* ---------------- Creative inventory overlay ---------------- */ .creative-inventory-overlay { position: fixed; inset: 0; background: var(--hud-overlay-scrim); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); z-index: 249; opacity: 0; transition: opacity 0.3s var(--hud-ease); pointer-events: none; } .creative-inventory-overlay:not(.hidden) { opacity: 1; pointer-events: auto; } #creativeInventory { position: fixed; top: 50%; left: 50%; width: min(820px, 94vw); height: min(620px, 88vh); transform: translate(-50%, -50%) scale(0.96); background: var(--hud-glass-strong); -webkit-backdrop-filter: saturate(180%) blur(40px); backdrop-filter: saturate(180%) blur(40px); border: 1px solid var(--hud-hairline); border-radius: 22px; box-shadow: var(--hud-shadow); z-index: 250; display: flex !important; flex-direction: column; padding: 0; overflow: hidden; opacity: 0; transition: opacity 0.3s var(--hud-ease), transform 0.3s var(--hud-ease); pointer-events: auto; } #creativeInventory.hidden { opacity: 0; transform: translate(-50%, -50%) scale(0.96); pointer-events: none; } #creativeInventory:not(.hidden) { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* Header strip */ #creativeInventory::before { content: "Inventory"; display: block; padding: 16px 22px 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--hud-ink); } .creative-tabs { display: flex; gap: 0; padding: 12px 18px 0; border-bottom: 1px solid var(--hud-hairline-soft); position: relative; overflow-x: auto; scrollbar-width: none; } .creative-tabs::-webkit-scrollbar { display: none; } .inventory-tab { background: transparent !important; border: 0 !important; padding: 12px 14px 14px; font-family: var(--apple-stack) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--hud-ink-soft) !important; text-shadow: none !important; cursor: pointer; position: relative; transition: color 0.18s var(--hud-ease); white-space: nowrap; image-rendering: auto !important; } .inventory-tab:hover { color: var(--hud-ink) !important; filter: none !important; } .inventory-tab:active { transform: none !important; filter: none !important; } .inventory-tab.active { color: var(--hud-ink) !important; font-weight: 600 !important; } .inventory-tab.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--hud-accent); border-radius: 2px 2px 0 0; animation: hud-tab-underline 0.3s var(--hud-ease) both; } @keyframes hud-tab-underline { from { transform: scaleX(0.4); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } .close-inventory { position: absolute; top: 14px; right: 16px; color: var(--hud-ink-mute); font-size: 11px; font-weight: 500; font-family: var(--apple-stack); letter-spacing: -0.005em; text-transform: none; background: transparent; border: 0; padding: 4px 10px; border-radius: 6px; text-shadow: none; box-shadow: none; width: auto; margin: 0; } /* Scrollable block area */ .creative-inventory-content { flex: 1; background: transparent; border: 0; box-shadow: none; overflow-y: auto; overflow-x: hidden; padding: 18px 22px; margin: 0; scrollbar-width: thin; scrollbar-color: var(--hud-hairline) transparent; } .creative-inventory-content::-webkit-scrollbar { width: 10px; } .creative-inventory-content::-webkit-scrollbar-track { background: transparent; border: 0; } .creative-inventory-content::-webkit-scrollbar-thumb { background: var(--hud-hairline); border: 2px solid transparent; background-clip: padding-box; border-radius: 10px; } .creative-inventory-content::-webkit-scrollbar-thumb:hover { background: var(--hud-ink-mute); background-clip: padding-box; } .inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; padding: 0; } /* Empty-state placeholder shown when a category has no blocks */ .inventory-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; color: var(--hud-ink-mute); font-size: 13px; text-align: center; } .inventory-empty img { width: min(220px, 60%); height: auto; opacity: 0.85; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.08)); } html[data-hud="dark"] .inventory-empty img { opacity: 0.7; mix-blend-mode: screen; } .creative-block-slot { width: 58px; height: 58px; background: var(--hud-tile-bg) !important; border: 1px solid var(--hud-hairline-soft) !important; border-radius: 10px; box-shadow: none !important; cursor: grab; display: flex; align-items: center; justify-content: center; padding: 7px; box-sizing: border-box; position: relative; transition: transform 0.18s var(--hud-ease), background-color 0.18s var(--hud-ease), border-color 0.18s var(--hud-ease); -webkit-tap-highlight-color: transparent; } .creative-block-slot::before { content: none !important; } .creative-block-slot img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; pointer-events: none; } .creative-block-slot:hover { background: var(--hud-tile-hover) !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important; } .creative-block-slot:active { cursor: grabbing; transform: scale(0.96); } .creative-block-slot:active::before { opacity: 0 !important; } /* Hotbar mirrored at bottom of creative panel */ .creative-hotbar-section { display: flex; gap: 6px; justify-content: center; padding: 14px 22px 18px; background: var(--hud-glass-soft); border-top: 1px solid var(--hud-hairline-soft); box-shadow: none; } .creative-hotbar-slot { width: 52px; height: 52px; background: var(--hud-tile-bg) !important; border: 1px solid var(--hud-hairline-soft) !important; border-radius: 10px; box-shadow: none !important; display: flex; align-items: center; justify-content: center; padding: 6px; box-sizing: border-box; position: relative; cursor: pointer; transition: transform 0.18s var(--hud-ease), background-color 0.18s var(--hud-ease); } .creative-hotbar-slot::before { content: none !important; } .creative-hotbar-slot img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; pointer-events: none; } .creative-hotbar-slot:hover { background: var(--hud-tile-hover) !important; } .creative-hotbar-slot.drag-over { background: var(--hud-accent-soft) !important; border-color: var(--hud-accent) !important; } @media (max-width: 720px) { #creativeInventory { width: 96vw; height: 88vh; border-radius: 18px; } .inventory-grid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; } .creative-block-slot { width: 54px; height: 54px; padding: 6px; } .creative-hotbar-slot { width: 48px; height: 48px; padding: 5px; } .creative-tabs { padding: 8px 12px 0; } .inventory-tab { padding: 10px 10px 12px; font-size: 12px !important; } .creative-inventory-content { padding: 14px 16px; } .creative-hotbar-section { padding: 10px 14px 14px; } } /* ---------------- Floating settings & menu buttons ---------------- */ .hud-fab { position: fixed; top: calc(env(safe-area-inset-top, 0) + 48px); right: 16px; width: 40px; height: 40px; border-radius: 50%; background: var(--hud-glass-strong); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border: 1px solid var(--hud-hairline); color: var(--hud-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9800; box-shadow: var(--hud-shadow-soft); transition: transform 0.18s var(--hud-ease), background-color 0.18s var(--hud-ease), box-shadow 0.18s var(--hud-ease); -webkit-tap-highlight-color: transparent; } .hud-fab:hover { transform: scale(1.06); } .hud-fab:active { transform: scale(0.94); } .hud-fab .hud-glyph { font-size: 18px; } .hud-fab--settings { top: calc(env(safe-area-inset-top, 0) + 48px); right: 16px; } .hud-fab--menu { top: calc(env(safe-area-inset-top, 0) + 48px); right: 64px; } /* On mobile, the legacy mobile-menu-btn takes the corner; move settings left of it. */ @media screen and (max-width: 768px) { .hud-fab--settings { right: 64px; } } /* ---------------- Settings sheet (right-side slide-in) ---------------- */ #wpu-settings-sheet { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 96vw); background: var(--hud-glass-strong); -webkit-backdrop-filter: saturate(180%) blur(36px); backdrop-filter: saturate(180%) blur(36px); border-left: 1px solid var(--hud-hairline); box-shadow: -18px 0 60px rgba(0, 0, 0, 0.18); z-index: 9950; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.36s var(--hud-ease); font-family: var(--apple-stack); color: var(--hud-ink); } #wpu-settings-sheet.is-open { transform: translateX(0); } .wpu-sheet-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.22); z-index: 9940; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--hud-ease); } .wpu-sheet-scrim.is-open { opacity: 1; pointer-events: auto; } .wpu-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 14px; border-bottom: 1px solid var(--hud-hairline-soft); } .wpu-sheet-title { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; } .wpu-sheet-close { width: 30px; height: 30px; border: 0; background: var(--hud-tile-bg); color: var(--hud-ink-soft); border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.15s var(--hud-ease); } .wpu-sheet-close:hover { background: var(--hud-tile-hover); color: var(--hud-ink); } .wpu-sheet-body { flex: 1; overflow-y: auto; padding: 8px 0 32px; scrollbar-width: thin; scrollbar-color: var(--hud-hairline) transparent; } .wpu-section { padding: 0 20px; margin: 14px 0 6px; } .wpu-section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hud-ink-mute); } .wpu-group { margin: 6px 12px 14px; background: var(--hud-tile-bg); border-radius: 12px; overflow: hidden; border: 1px solid var(--hud-hairline-soft); } .wpu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--hud-hairline-soft); } .wpu-row:last-child { border-bottom: 0; } .wpu-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .wpu-row-label { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--hud-ink); } .wpu-row-desc { font-size: 12px; color: var(--hud-ink-mute); } /* Switch (real Apple-style) */ .wpu-switch { position: relative; width: 44px; height: 26px; background: var(--hud-hairline); border-radius: 999px; cursor: pointer; transition: background-color 0.22s var(--hud-ease); flex: 0 0 auto; border: 0; padding: 0; } .wpu-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.12); transition: transform 0.22s var(--hud-ease); } .wpu-switch.is-on { background: #34c759; } html[data-hud="dark"] .wpu-switch.is-on { background: #30d158; } .wpu-switch.is-on::after { transform: translateX(18px); } /* Segmented control */ .wpu-segmented { display: inline-flex; background: var(--hud-tile-bg); border: 1px solid var(--hud-hairline-soft); border-radius: 10px; padding: 2px; gap: 2px; } .wpu-seg-btn { border: 0; background: transparent; color: var(--hud-ink-soft); padding: 6px 12px; border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: -0.005em; cursor: pointer; transition: background-color 0.18s var(--hud-ease), color 0.18s var(--hud-ease); -webkit-tap-highlight-color: transparent; } .wpu-seg-btn:hover { color: var(--hud-ink); } .wpu-seg-btn.is-on { background: var(--hud-glass-strong); color: var(--hud-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } /* Slider */ .wpu-slider-row { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--hud-hairline-soft); } .wpu-slider-row:last-child { border-bottom: 0; } .wpu-slider-top { display: flex; align-items: center; justify-content: space-between; } .wpu-slider-val { font-family: var(--apple-mono); font-size: 12px; color: var(--hud-ink-soft); font-feature-settings: "tnum" 1; } .wpu-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; } .wpu-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--hud-accent) 0%, var(--hud-accent) var(--wpu-slider-fill, 50%), var(--hud-hairline) var(--wpu-slider-fill, 50%), var(--hud-hairline) 100%); } .wpu-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--hud-hairline); } .wpu-slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--hud-accent); } .wpu-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; background: #ffffff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.12); border: 0; cursor: pointer; } .wpu-slider::-moz-range-thumb { width: 18px; height: 18px; background: #ffffff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.12); border: 0; cursor: pointer; } /* Keybind chips */ .wpu-keybinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 12px 14px; } .wpu-key { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; background: var(--hud-glass-soft); border: 1px solid var(--hud-hairline-soft); border-radius: 8px; font-size: 11px; color: var(--hud-ink-soft); } .wpu-key kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; padding: 2px 6px; border-radius: 5px; background: var(--hud-glass-strong); border: 1px solid var(--hud-hairline); font-family: var(--apple-stack); font-size: 10px; font-weight: 600; color: var(--hud-ink); box-shadow: 0 1px 0 var(--hud-hairline-soft); } /* ---------------- AI tip floating widget ---------------- */ #wpu-aitip { position: fixed; top: calc(env(safe-area-inset-top, 0) + 48px); left: 16px; z-index: 9700; font-family: var(--apple-stack); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; } .wpu-aitip-btn { pointer-events: auto; height: 34px; padding: 0 14px; background: var(--hud-glass-strong); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border: 1px solid var(--hud-hairline); color: var(--hud-ink); border-radius: 999px; font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: -0.005em; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--hud-shadow-soft); transition: transform 0.18s var(--hud-ease), background-color 0.18s var(--hud-ease); -webkit-tap-highlight-color: transparent; } .wpu-aitip-btn:hover { transform: translateY(-1px); } .wpu-aitip-btn:active { transform: scale(0.97); } .wpu-aitip-bubble { pointer-events: auto; max-width: 320px; background: var(--hud-glass-strong); -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px); border: 1px solid var(--hud-hairline); color: var(--hud-ink); font-size: 13px; line-height: 1.45; letter-spacing: -0.005em; padding: 12px 14px; border-radius: 14px; box-shadow: var(--hud-shadow-soft); opacity: 0; transform: translateY(-4px); transition: opacity 0.22s var(--hud-ease), transform 0.22s var(--hud-ease); } .wpu-aitip-bubble.is-open { opacity: 1; transform: translateY(0); } /* ---------------- Start screen (Apple game launcher) ---------------- */ #startScreen { position: absolute; inset: 0; background: #0c0d10 !important; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; overflow: hidden; color: #f5f5f7; font-family: var(--apple-stack); animation: hud-screen-fade 0.6s var(--hud-ease) both; } @keyframes hud-screen-fade { from { opacity: 0; } to { opacity: 1; } } #startScreen::before, #startScreen::after { content: none !important; } .start-stage { position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 25%, rgba(126, 156, 216, 0.18) 0%, transparent 55%), radial-gradient(ellipse at 25% 80%, rgba(149, 127, 184, 0.16) 0%, transparent 55%), radial-gradient(ellipse at 50% 50%, rgba(0, 113, 227, 0.10) 0%, transparent 70%), #0c0d10; z-index: 0; } .start-stage::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; } @keyframes hud-ambient-drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-2%, -1%, 0) scale(1.05); } 100% { transform: translate3d(0,0,0) scale(1); } } .start-stage { animation: hud-ambient-drift 18s ease-in-out infinite; will-change: transform; } @media (prefers-reduced-motion: reduce) { .start-stage { animation: none; } } .start-content { position: relative; z-index: 2; width: 100%; max-width: 720px; padding: 0 24px; text-align: center; display: flex; flex-direction: column; align-items: center; } .start-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #a1a1a6; margin-bottom: 24px; } .start-eyebrow .start-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #30d158; box-shadow: 0 0 8px #30d158; } #startScreen h1 { color: #f5f5f7 !important; font-family: var(--apple-stack) !important; font-size: clamp(2.5rem, 7vw, 4.5rem) !important; font-weight: 700 !important; letter-spacing: -0.04em !important; line-height: 1.04 !important; text-shadow: none !important; text-transform: none !important; margin: 0 0 14px !important; z-index: 2; background: linear-gradient(120deg, #f5f5f7 0%, #c7c7cc 60%, #7e9cd8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #startScreen > p { color: #a1a1a6 !important; font-family: var(--apple-stack) !important; font-size: clamp(1rem, 1.6vw, 1.25rem) !important; font-weight: 400 !important; letter-spacing: -0.01em !important; text-shadow: none !important; margin: 0 0 28px !important; z-index: 2; } /* Feature pills row */ .start-features { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; justify-content: center !important; margin: 16px 0 28px !important; max-width: 720px !important; width: 100% !important; } .start-feature { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.10) !important; padding: 12px 18px !important; text-align: left !important; min-width: 200px !important; flex: 1 1 220px !important; border-radius: 14px !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .start-feature-title { color: #f5f5f7 !important; font-family: var(--apple-stack) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: -0.005em !important; margin-bottom: 4px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } .start-feature-title .start-feature-glyph { width: 14px; height: 14px; color: #7e9cd8; } .start-feature-desc { color: #86868b !important; font-family: var(--apple-stack) !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: -0.005em !important; } #startButton { background: #ffffff !important; color: #1d1d1f !important; border: 0 !important; border-radius: 999px !important; box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 2px 6px rgba(255,255,255,0.05) !important; padding: 14px 32px !important; font-family: var(--apple-stack) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; text-transform: none !important; cursor: pointer; transition: transform 0.18s var(--hud-ease), box-shadow 0.18s var(--hud-ease) !important; margin: 12px 0 22px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; } #startButton:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.55); } #startButton:active { transform: scale(0.97) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.4) !important; } .start-controls { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(140px, auto)) !important; gap: 8px 18px !important; justify-content: center !important; margin-top: 22px !important; font-family: var(--apple-stack) !important; } .start-control { color: #86868b !important; font-family: var(--apple-stack) !important; font-size: 12px !important; letter-spacing: -0.005em !important; text-align: center !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } .start-control kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; padding: 2px 8px; border-radius: 5px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: #f5f5f7; font-family: var(--apple-stack); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; } .start-footer { position: absolute !important; bottom: 24px !important; left: 50% !important; transform: translateX(-50%) !important; text-align: center !important; white-space: nowrap !important; z-index: 2 !important; } .start-footer p { color: rgba(255,255,255,0.35) !important; font-family: var(--apple-stack) !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: -0.005em !important; text-shadow: none !important; margin: 3px 0 !important; } .start-footer a { color: #7e9cd8 !important; text-decoration: none !important; } .start-footer a:hover { text-decoration: underline !important; } @media (max-width: 600px) { .start-content { padding: 0 16px; } #startScreen h1 { font-size: clamp(2rem, 9vw, 3rem) !important; } .start-feature { min-width: unset !important; flex-basis: 100% !important; } .start-controls { gap: 6px 12px !important; } .start-footer p { font-size: 10px !important; } } /* ---------------- Loading screen ---------------- */ #loadingScreen { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,13,16,0.92), rgba(12,13,16,0.98)), url("assets/img/loading-pattern.png") center/cover no-repeat, #0c0d10 !important; display: none; flex-direction: column; justify-content: center; align-items: center; z-index: 999; color: #f5f5f7; font-family: var(--apple-stack); gap: 20px; } #loadingScreen .loading-logo { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, #7e9cd8, #957fb8); box-shadow: 0 14px 40px rgba(126, 156, 216, 0.3), inset 0 0 0 1px rgba(255,255,255,0.18); margin-bottom: 8px; position: relative; } #loadingScreen .loading-logo::before { content: ""; position: absolute; inset: 12px; border-radius: 6px; background: rgba(255,255,255,0.85); mask: linear-gradient(135deg, #000 50%, transparent 50%); -webkit-mask: linear-gradient(135deg, #000 50%, transparent 50%); } #loadingText { color: #f5f5f7 !important; font-family: var(--apple-stack) !important; font-size: 18px !important; font-weight: 600 !important; letter-spacing: -0.015em !important; text-shadow: none !important; margin: 0 !important; } #loadingScreen .loading-sub { color: #86868b; font-size: 12px; letter-spacing: -0.005em; } #progressBar { width: min(440px, 86vw) !important; height: 4px !important; background: rgba(255,255,255,0.08) !important; border: 0 !important; border-radius: 999px !important; overflow: hidden !important; position: relative !important; box-shadow: none !important; } #progressFill { height: 100% !important; background: linear-gradient(90deg, #7e9cd8, #2997ff) !important; width: 0%; transition: width 0.3s var(--hud-ease) !important; box-shadow: none !important; position: relative !important; border-radius: 999px !important; } #progressFill::after { content: none !important; } /* ---------------- Pause overlay ---------------- */ #pauseMenu { position: absolute; inset: 0; background: var(--hud-overlay-scrim); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); display: flex; justify-content: center; align-items: center; z-index: 2000; opacity: 0; transition: opacity 0.3s var(--hud-ease); pointer-events: none; } #pauseMenu:not(.hidden) { opacity: 1; pointer-events: auto; } .pause-menu-container { position: relative; background: var(--hud-glass-strong); -webkit-backdrop-filter: saturate(180%) blur(36px); backdrop-filter: saturate(180%) blur(36px); border: 1px solid var(--hud-hairline); border-radius: 22px; padding: 36px 40px; text-align: center; max-width: 380px; min-width: 320px; width: calc(100% - 32px); box-shadow: var(--hud-shadow); color: var(--hud-ink); font-family: var(--apple-stack); transform: scale(0.96); opacity: 0; transition: opacity 0.3s var(--hud-ease), transform 0.3s var(--hud-ease); } #pauseMenu:not(.hidden) .pause-menu-container { opacity: 1; transform: scale(1); } .pause-menu-container::before { content: none !important; } .pause-menu-title { color: var(--hud-ink) !important; font-family: var(--apple-stack) !important; font-size: 24px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; text-shadow: none !important; text-transform: none !important; margin: 0 0 22px !important; } .pause-menu-subtitle { color: var(--hud-ink-mute) !important; font-family: var(--apple-stack) !important; font-size: 12px !important; letter-spacing: -0.005em !important; text-shadow: none !important; margin: 22px 0 0 !important; display: grid !important; grid-template-columns: repeat(2, auto) !important; gap: 4px 18px !important; justify-content: center !important; } .pause-menu-subtitle kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; padding: 1px 6px; border-radius: 4px; background: var(--hud-tile-bg); border: 1px solid var(--hud-hairline-soft); color: var(--hud-ink-soft); font-family: var(--apple-stack); font-size: 10px; font-weight: 600; margin-right: 6px; } .button-group { display: flex !important; flex-direction: column; gap: 10px !important; } .minecraft-button { background: var(--hud-tile-bg) !important; color: var(--hud-ink) !important; border: 1px solid var(--hud-hairline) !important; padding: 12px 22px !important; font-family: var(--apple-stack) !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: -0.01em !important; text-transform: none !important; text-shadow: none !important; border-radius: 12px !important; margin: 0 !important; width: 100% !important; cursor: pointer; transition: background-color 0.18s var(--hud-ease), transform 0.18s var(--hud-ease) !important; box-shadow: none !important; image-rendering: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } .minecraft-button:hover { background: var(--hud-tile-hover) !important; color: var(--hud-ink) !important; text-shadow: none !important; transform: none !important; box-shadow: none !important; filter: none !important; } .minecraft-button:active { background: var(--hud-tile-hover) !important; transform: scale(0.97) !important; box-shadow: none !important; filter: none !important; } .minecraft-button.is-primary { background: var(--hud-accent) !important; color: #ffffff !important; border-color: var(--hud-accent) !important; } .minecraft-button.is-primary:hover { background: var(--apple-accent-hover) !important; } .minecraft-button.is-danger { color: #ff453a !important; } .minecraft-button:disabled { background: var(--hud-tile-bg) !important; color: var(--hud-ink-mute) !important; cursor: not-allowed; filter: none !important; } /* ---------------- Death / Toast screens (general scaffold) ---------------- */ .wpu-toast { position: fixed; top: 60px; left: 50%; transform: translateX(-50%) translateY(-6px); background: var(--hud-glass-strong); -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px); border: 1px solid var(--hud-hairline); color: var(--hud-ink); padding: 10px 18px; font-family: var(--apple-stack); font-size: 13px; letter-spacing: -0.005em; border-radius: 999px; box-shadow: var(--hud-shadow-soft); z-index: 9999; opacity: 0; transition: opacity 0.2s var(--hud-ease), transform 0.2s var(--hud-ease); pointer-events: none; } .wpu-toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------------- Debug info — re-skin ---------------- */ #debugInfo { position: absolute; top: 56px; left: 12px; color: var(--hud-ink) !important; font-family: var(--apple-mono) !important; font-size: 11px !important; line-height: 1.5 !important; text-shadow: none !important; background: var(--hud-glass) !important; -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); padding: 8px 12px !important; border-radius: 12px !important; border: 1px solid var(--hud-hairline) !important; box-shadow: var(--hud-shadow-soft); z-index: 200; font-feature-settings: "tnum" 1; max-width: 220px; } #debugInfo div { margin: 1px 0; color: var(--hud-ink-soft); } /* ---------------- Mobile controls reskin ---------------- */ .mobile-joystick .joystick-base { background: var(--hud-glass) !important; -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border: 1px solid var(--hud-hairline) !important; box-shadow: var(--hud-shadow-soft) !important; } .mobile-joystick .joystick-stick { background: var(--hud-glass-strong) !important; border: 1px solid var(--hud-hairline) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important; width: 44px !important; height: 44px !important; } .mobile-btn { background: var(--hud-glass-strong) !important; -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border: 1px solid var(--hud-hairline) !important; border-radius: 50% !important; color: var(--hud-ink) !important; font-size: 0 !important; /* hide the legacy emoji glyph */ font-weight: 500 !important; box-shadow: var(--hud-shadow-soft) !important; opacity: 1 !important; transition: transform 0.15s var(--hud-ease), background-color 0.15s var(--hud-ease) !important; position: relative; width: 58px !important; height: 58px !important; } .mobile-btn:active { background: var(--hud-accent-soft) !important; border-color: var(--hud-accent) !important; color: var(--hud-accent) !important; transform: scale(0.93) !important; box-shadow: 0 0 0 4px var(--hud-accent-soft) !important; } .mobile-btn::before { content: ""; position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: 22px 22px; pointer-events: none; filter: var(--hud-icon-filter, none); } html[data-hud="dark"] .mobile-btn { --hud-icon-filter: invert(1) brightness(1.3); } @media (prefers-color-scheme: dark) { html:not([data-hud]) .mobile-btn { --hud-icon-filter: invert(1) brightness(1.3); } } .mobile-btn-break::before { background-image: url("data:image/svg+xml;utf8,"); } .mobile-btn-place::before { background-image: url("data:image/svg+xml;utf8,"); } .mobile-btn-jump::before { background-image: url("data:image/svg+xml;utf8,"); } .mobile-btn-inventory::before { background-image: url("data:image/svg+xml;utf8,"); } /* Mobile menu button (top-right hamburger) — completely re-skin */ .mobile-menu-btn { position: fixed; top: calc(env(safe-area-inset-top, 0) + 48px) !important; right: 16px !important; width: 40px !important; height: 40px !important; background: var(--hud-glass-strong) !important; -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border: 1px solid var(--hud-hairline) !important; border-radius: 50% !important; box-shadow: var(--hud-shadow-soft) !important; image-rendering: auto !important; transition: transform 0.15s var(--hud-ease) !important; } .mobile-menu-btn:hover { background: var(--hud-glass-strong) !important; transform: scale(1.06) !important; box-shadow: var(--hud-shadow-soft) !important; } .mobile-menu-btn:active { transform: scale(0.94) !important; filter: none !important; } .menu-icon { gap: 4px !important; } .menu-icon span { width: 14px !important; height: 2px !important; background: var(--hud-ink) !important; border-radius: 2px !important; box-shadow: none !important; } /* Touch indicator (visual feedback ring) — tone down */ .mobile-touch-indicator .touch-indicator-bg { stroke: var(--hud-hairline); } .mobile-touch-indicator .touch-indicator-progress { stroke: var(--hud-accent); } .mobile-touch-indicator .touch-indicator-center { fill: var(--hud-accent); } /* ---------------- Reduced motion ---------------- */ @media (prefers-reduced-motion: reduce) { #wpu-hud, .hud-fab, #wpu-settings-sheet, #creativeInventory, .inventory-slot, .creative-block-slot, .minecraft-button, #pauseMenu, .pause-menu-container, .wpu-toast, .wpu-aitip-bubble, .start-stage { transition: none !important; animation: none !important; } } /* ---------- Codex Apple pass: viewport law + landing polish ---------- */ html.landing-mode, html.landing-mode body, #apple-landing { width: 100%; max-width: 100%; overflow-x: clip !important; } #apple-landing .al-section, #apple-landing .al-container, #apple-landing .al-container--wide, #apple-landing .al-grid, #apple-landing .al-card, #apple-landing .al-controls, #apple-landing .al-specs { min-width: 0; } #apple-landing .al-btn, #apple-landing .al-nav a, #apple-landing button { min-height: 44px; } .al-drawer { inline-size: min(88vw, 420px); max-inline-size: calc(100vw - 24px); } @media (max-width: 600px) { .al-nav { height: 56px; } .al-nav-inner { padding-inline: 18px; gap: 12px; } .al-nav-brand { min-width: 0; max-width: 44vw; overflow: hidden; text-overflow: ellipsis; } .al-hero { padding-top: 64px; } .al-hero h1 { font-size: clamp(42px, 11.6vw, 54px); line-height: 1.05; letter-spacing: -0.045em; max-width: 11ch; margin-inline: auto; overflow-wrap: anywhere; } .al-hero h1 .al-hero-accent { overflow-wrap: anywhere; } .al-hero-tagline { font-size: clamp(22px, 7vw, 28px); } .al-hero-sub { font-size: 19px; line-height: 1.38; max-width: 31ch; } .al-cta-row { gap: 12px; } .al-btn { height: 50px; padding-inline: 24px; font-size: 17px; } .al-hero-photo { width: calc(100vw - 36px); margin-top: 42px; border-radius: 24px; aspect-ratio: 1 / 1.05; } }