@layer pages{.games-page-grid{grid-template-columns:repeat(auto-fill, minmax(min(var(--game-card-min,280px), 100%), 1fr));gap:var(--bento-gap,24px);display:grid;container:gameGrid/inline-size}.game-card--featured{grid-area:1/1/auto/-1}@container gameGrid (width>=780px){.game-card--featured{grid-column:1/3}}@container gameGrid (width<=640px){.games-page-grid{grid-template-columns:1fr}.game-card--featured{grid-column:1}}.main-content>.section--pad-top:first-child{padding-top:calc(var(--nav-height,64px) + 32px)}#games-header-subtitle{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.games-toolbar{align-items:center;gap:var(--spacing-md,16px);margin-bottom:var(--spacing-md,16px);display:flex}.games-search-wrap{flex:1;min-width:0;position:relative}.games-search-icon{width:16px;height:16px;color:var(--text-muted,#6b6b80);pointer-events:none;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.games-search-input{width:100%;height:var(--touch-relaxed,48px);border:1px solid var(--glass-border,#ffffff14);border-radius:var(--radius-full,9999px);background:var(--glass-bg,#ffffff0a);color:var(--text-primary,#e8e6e3);font-size:.875rem;font-family:var(--font-body);-webkit-appearance:none;appearance:none;padding:0 70px 0 40px;transition:border-color .2s,box-shadow .2s}.games-search-input:focus{border-color:var(--game-accent,var(--accent-red,#c12));box-shadow:0 0 0 3px oklch(from var(--game-accent,var(--accent-red)) 55% .12 hue / .25);outline:none}.games-search-input::placeholder{color:var(--text-muted,#6b6b80)}.games-search-input::-webkit-search-cancel-button,.games-search-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.games-search-hint{border:1px solid var(--glass-border,#ffffff14);background:var(--glass-bg,#ffffff0a);color:var(--text-muted,#6b6b80);font-size:.6875rem;font-family:var(--font-mono);pointer-events:none;border-radius:4px;padding:2px 8px;line-height:1.4;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.sort-indicator{border:1px solid var(--glass-border,#ffffff14);border-radius:var(--radius-full,9999px);background:var(--glass-bg,#ffffff0a);color:var(--text-secondary,#8a8a9a);white-space:nowrap;flex-shrink:0;align-items:center;gap:6px;padding:8px 16px;font-size:.8125rem;display:inline-flex}.games-skeleton-grid{grid-template-columns:repeat(auto-fill, minmax(min(var(--game-card-min,280px), 100%), 1fr));gap:var(--bento-gap,24px);display:grid}.games-skeleton-grid[hidden]{display:none}.games-skeleton-card{border:1px solid var(--glass-border,#ffffff0f);contain:layout paint;background:oklch(15% .012 20);border-radius:1.5rem;overflow:hidden}.games-skeleton-img{background:linear-gradient(90deg,oklch(18% .01 20) 0%,oklch(25% .01 20/.4) 40%,oklch(18% .01 20) 80%) 0 0/200% 100%;height:200px;animation:2s ease-in-out infinite games-skeleton-shimmer}.games-skeleton-body{flex-direction:column;gap:10px;padding:14px 20px 20px;display:flex}.games-skeleton-line{background:linear-gradient(90deg,oklch(18% .01 20) 0%,oklch(25% .01 20/.4) 40%,oklch(18% .01 20) 80%) 0 0/200% 100%;border-radius:4px;height:14px;animation:2s ease-in-out infinite games-skeleton-shimmer}.games-skeleton-line--short{width:50%;animation-delay:.15s}.games-skeleton-line--medium{width:75%;animation-delay:.3s}@keyframes games-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.upgrade-modal-backdrop{z-index:var(--z-modal,1000);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;background:#000000b8;justify-content:center;align-items:center;transition:opacity .25s;display:flex;position:fixed;inset:0}.upgrade-modal-backdrop.visible{opacity:1;pointer-events:all}.upgrade-modal{border:1px solid var(--glass-border,#ffffff0d);text-align:center;background:oklch(15% .012 20);border-radius:20px;width:min(90vw,420px);padding:40px 36px;position:relative}.upgrade-modal-close{width:30px;height:30px;color:var(--text-primary);cursor:pointer;background:#0000004d;border:1px solid #ffffff1a;border-radius:50%;position:absolute;top:14px;right:16px}.upgrade-modal-title{margin:16px 0 8px;font-size:1.5rem}.upgrade-modal-desc{margin:0 0 20px;font-size:.9rem}.upgrade-modal-icon{font-size:3rem}.upgrade-modal-btn{color:#fff;border-radius:8px;padding:12px 28px;font-weight:700;text-decoration:none;transition:transform .1s;display:inline-block}.upgrade-modal-btn:active{transform:scale(.96)}#keyboard-controls-guide{content-visibility:auto;contain-intrinsic-size:auto 900px}#games-grid>.game-card:nth-child(n+2),.games-page-grid>.game-card:nth-child(n+2){content-visibility:auto;contain-intrinsic-size:auto 460px}.games-filter-bar{contain:layout paint style;margin:0 0 var(--spacing-xl,2rem);padding:var(--spacing-md,1rem) 0;overscroll-behavior-inline:contain;flex-wrap:wrap;align-items:center;gap:clamp(.5rem,1.4vw,.85rem);display:flex}@media (width<=720px){.games-filter-bar{scroll-snap-type:x proximity;flex-wrap:nowrap;padding-inline-end:1.25rem;overflow-x:auto}.games-filter-bar .filter-btn{scroll-snap-align:start;flex:none}.games-toolbar{flex-wrap:wrap}.games-search-wrap{flex-basis:100%}}.games-filter-bar .filter-btn{min-height:var(--touch-min,44px);border:1px solid color-mix(in oklch, var(--accent-red) 28%, var(--glass-border,#ffffff1f));border-radius:var(--radius-full,9999px);background:linear-gradient(180deg, color-mix(in oklch, var(--bg-deep,#060608) 64%, transparent), color-mix(in oklch, var(--bg-deep,#060608) 86%, transparent));color:color-mix(in oklch, var(--text-primary,#e8e6e3) 80%, var(--text-secondary,#8a8a9a));cursor:pointer;font:inherit;font-size:var(--text-sm,.875rem);letter-spacing:.01em;white-space:nowrap;box-shadow:var(--glass-inner-highlight,inset 0 1px 0 #ffffff0f);align-items:center;gap:.5rem;padding:.55rem 1.1rem;font-weight:650;line-height:1;transition:background .22s cubic-bezier(.22,1,.36,1),border-color .22s cubic-bezier(.22,1,.36,1),color .22s cubic-bezier(.22,1,.36,1),transform .18s cubic-bezier(.22,1,.36,1),box-shadow .28s cubic-bezier(.22,1,.36,1);display:inline-flex}.games-filter-bar .filter-btn .sgai-icon{width:1.1em;height:1.1em;color:color-mix(in oklch, var(--accent-red) 92%, var(--text-primary,#e8e6e3));filter:drop-shadow(0 0 4px color-mix(in oklch, var(--accent-red) 40%, transparent));transition:color .22s,transform .22s cubic-bezier(.22,1,.36,1),filter .22s}.games-filter-bar .filter-btn:hover{background:linear-gradient(180deg, color-mix(in oklch, var(--bg-deep,#060608) 52%, var(--accent-red) 16%), color-mix(in oklch, var(--bg-deep,#060608) 80%, transparent));border-color:color-mix(in oklch, var(--accent-red) 58%, var(--glass-border,#ffffff1f));color:var(--text-primary,#e8e6e3);box-shadow:0 0 0 1px color-mix(in oklch, var(--accent-red) 26%, transparent), 0 8px 24px -10px color-mix(in oklch, var(--accent-red) 60%, transparent), var(--glass-inner-highlight,inset 0 1px 0 #ffffff0f);transform:translateY(-1px)}.games-filter-bar .filter-btn:hover .sgai-icon{color:var(--accent-red);filter:drop-shadow(0 0 7px color-mix(in oklch, var(--accent-red) 65%, transparent));transform:scale(1.08)}.games-filter-bar .filter-btn:active{transform:translateY(0)scale(.97)}.games-filter-bar .filter-btn:focus-visible{outline:2px solid var(--accent-red);outline-offset:3px}.games-filter-bar .filter-count{border-radius:var(--radius-full,9999px);background:color-mix(in oklch, var(--accent-red) 20%, #ffffff0d);border:1px solid color-mix(in oklch, var(--accent-red) 26%, transparent);min-width:1.85em;height:1.85em;color:color-mix(in oklch, var(--text-primary,#e8e6e3) 90%, var(--accent-red));font-size:var(--text-xs,.75rem);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;padding:0 .5em;font-weight:800;display:inline-flex}.games-filter-bar .filter-btn.active,.games-filter-bar .filter-btn.is-active{background:linear-gradient(180deg, color-mix(in oklch, var(--accent-red) 86%, white 14%), var(--accent-red));border-color:color-mix(in oklch, var(--accent-red) 60%, white 12%);color:oklch(98% 0 0);box-shadow:0 0 18px -2px color-mix(in oklch, var(--accent-red) 55%, transparent), 0 10px 28px -8px color-mix(in oklch, var(--accent-red) 68%, transparent), inset 0 1px 0 oklch(100% 5.96046e-8 none/.24)}.games-filter-bar .filter-btn.active .sgai-icon,.games-filter-bar .filter-btn.is-active .sgai-icon{color:oklch(98% 0 0);filter:drop-shadow(0 0 6px oklch(100% 5.96046e-8 none/.55))}.games-filter-bar .filter-btn.active .filter-count,.games-filter-bar .filter-btn.is-active .filter-count{color:oklch(98% 0 0);background:#ffffff42;border-color:#ffffff57}@media (prefers-reduced-motion:reduce){.games-filter-bar .filter-btn,.games-filter-bar .filter-btn .sgai-icon{transition:none}.games-filter-bar .filter-btn:hover,.games-filter-bar .filter-btn:hover .sgai-icon,.games-filter-bar .filter-btn:active{transform:none}}.controls-accordion{flex-direction:column;gap:4px;display:flex}.controls-group{border:1px solid var(--glass-border,#ffffff14);border-radius:var(--radius-lg,12px);background:var(--glass-bg,#ffffff05);transition:border-color .2s;overflow:hidden}.controls-group[open]{border-color:oklch(100% 0 0/.12)}.controls-group summary{cursor:pointer;align-items:center;gap:8px;padding:12px 16px;font-size:.875rem;font-weight:600;list-style:none;display:flex}.controls-group summary::-webkit-details-marker{display:none}.controls-group summary:before{content:"▸";transition:transform .2s;display:inline-block}.controls-group[open] summary:before{transform:rotate(90deg)}.controls-group .controls-table{border-collapse:collapse;width:100%;font-size:.8rem}.controls-group .controls-table td{border-top:1px solid oklch(100% 0 0/.04);padding:4px 12px}.controls-group .controls-table kbd{font-family:var(--font-mono,monospace);background:oklch(25% .01 285);border:1px solid oklch(100% 0 0/.08);border-radius:4px;padding:1px 6px;font-size:.75rem;display:inline-block}@container gameGrid (width<=380px){.games-skeleton-img{height:150px}}@container gameGrid (width<=280px){.games-skeleton-img{height:120px}}@media (width<=1024px){.games-page-grid,.games-skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-card--featured{grid-column:1/-1}}@media (width<=640px){.games-page-grid,.games-skeleton-grid{grid-template-columns:1fr}.game-card--featured{grid-column:1}}@media (prefers-reduced-motion:reduce){@keyframes games-skeleton-shimmer{0%,to{background-position:0 0}}}}