:root{color-scheme:dark;--bg: #07090f;--surface: #0d1120;--surface-hover: #121826;--border: #1c2539;--border-hover: #2c3f60;--text: #dde4f5;--text-muted: #6c7fa1;--text-dim: #36445c;--accent: #4d7cfe;--accent-glow: rgba(77, 124, 254, .18);--danger: #f56565;--card-accent: var(--accent);--ease: cubic-bezier(.22, 1, .36, 1);--dur-fast: .1s;--dur-mid: .18s;--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: "SF Mono", "Cascadia Code", "Consolas", ui-monospace, monospace}*,*:before,*:after{box-sizing:border-box}html{height:100%;background-color:var(--bg);background-image:radial-gradient(ellipse 140% 70% at 50% -8%,rgba(77,124,254,.11),transparent 55%),radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:100% 100%,24px 24px;background-attachment:fixed,fixed}body{margin:0;height:100%;color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{height:100%}[hidden]{display:none!important}.menu{display:flex;flex-direction:column;max-width:1024px;min-height:100%;margin:0 auto;padding:clamp(40px,10vh,100px) clamp(20px,5vw,40px) 48px}.menu__header{margin-bottom:40px}.menu__header:before{content:"";display:block;width:36px;height:3px;margin-bottom:20px;background:var(--accent);border-radius:2px;box-shadow:0 0 16px var(--accent-glow)}.menu__title{margin:0;font-size:clamp(30px,5vw,52px);font-weight:700;letter-spacing:-.03em;line-height:1.1;background:linear-gradient(130deg,var(--text) 30%,var(--accent) 110%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.menu__subtitle{margin:10px 0 0;color:var(--text-muted);font-size:15px;letter-spacing:.01em}.menu__error{margin:0 0 24px;padding:12px 16px;border:1px solid rgba(245,101,101,.3);border-radius:10px;background:#f5656512;color:var(--danger);font-size:14px;line-height:1.5}.menu__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.menu__footer{margin-top:auto;padding-top:44px}.menu__hint{margin:0;color:var(--text-dim);font-size:12px;letter-spacing:.04em;text-align:center}.menu__hint kbd{display:inline-block;padding:1px 6px;font:500 11px var(--font-mono);color:var(--text-muted);background:var(--surface);border:1px solid var(--border-hover);border-radius:4px;vertical-align:middle}.card[data-example-id=behind-player-3d]{--card-accent: #34d399}.card[data-example-id=isometric-3d]{--card-accent: #818cf8}.card[data-example-id=overhead-2d]{--card-accent: #fbbf24}.card[data-example-id=side-scroller-2d]{--card-accent: #fb7185}.card{--card-accent: var(--accent);position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 22px 18px;min-height:152px;text-align:left;font:inherit;color:inherit;cursor:pointer;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:14px;transition:background var(--dur-mid) var(--ease),border-color var(--dur-mid) var(--ease),transform var(--dur-mid) var(--ease),box-shadow var(--dur-mid) var(--ease)}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--card-accent);opacity:0;border-radius:14px 14px 0 0;transition:opacity var(--dur-mid) var(--ease)}.card:after{content:"";position:absolute;inset:0;border-radius:14px;background:radial-gradient(ellipse 90% 60% at 50% 0%,color-mix(in srgb,var(--card-accent) 12%,transparent),transparent 70%);opacity:0;pointer-events:none;transition:opacity var(--dur-mid) var(--ease)}.card:hover{background:var(--surface-hover);border-color:color-mix(in srgb,var(--card-accent) 45%,var(--border));transform:translateY(-3px);box-shadow:0 8px 24px #00000073,0 24px 48px #00000040}.card:hover:before{opacity:1}.card:hover:after{opacity:1}.card:active{transform:translateY(-1px);transition-duration:var(--dur-fast)}.card:focus-visible{outline:2px solid var(--card-accent);outline-offset:3px}.card__badge{display:inline-flex;align-items:center;width:fit-content;margin-bottom:4px;padding:2px 8px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--card-accent);background:color-mix(in srgb,var(--card-accent) 13%,transparent);border-radius:4px}.card__title{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3}.card__description{color:var(--text-muted);font-size:13.5px;line-height:1.5}.card__status{margin-top:auto;color:var(--card-accent);font-size:12.5px;font-weight:500;visibility:hidden}.card--loading{cursor:progress;pointer-events:none}.card--loading .card__status{visibility:visible;animation:status-pulse 1.4s ease-in-out infinite}@keyframes status-pulse{0%,to{opacity:.6}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.card,.card:before,.card:after{transition:none}.card:hover{transform:none}.card--loading .card__status{animation:none}.back-button{transition:none}}.game-shell{position:fixed;inset:0;background:#000;z-index:10}.game-root{position:absolute;inset:0;overflow:hidden}.back-button{position:absolute;top:16px;left:16px;z-index:20;display:inline-flex;align-items:center;gap:6px;padding:9px 18px 9px 14px;font:500 13px var(--font);letter-spacing:.01em;color:#ffffffe6;cursor:pointer;user-select:none;background:#04060e99;border:1px solid rgba(255,255,255,.14);border-radius:999px;backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);transition:background var(--dur-mid) var(--ease),border-color var(--dur-mid) var(--ease),color var(--dur-mid) var(--ease)}.back-button:hover{background:#0a0e1ecc;border-color:#ffffff47;color:#fff}.back-button:active{background:#0a0e1ef2;transition-duration:var(--dur-fast)}.back-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}