@property --gc-wave{syntax:"<number>";inherits:true;initial-value:0}.game-card{--gc-bleed-x:8%;--gc-bleed-y:5.7143%;--gc-parallax:22px;--gc-rise:10px;--gc-float:5px;--gc-float-period:2.8s;--gc-sheen:var(--fl-gray-0);--gc-sheen-strength:.55;--gc-morph-duration:.36s;--gc-info-shift:var(--fl-space-2);min-width:0;position:relative}:root[data-color-mode=light] .game-card{--gc-sheen-strength:.6}.game-grid{grid-template-columns:repeat(var(--gc-cols,2), minmax(0, 1fr));gap:var(--fl-space-12) var(--fl-space-6);padding-bottom:var(--fl-space-6);display:grid}@media (min-width:1100px){.game-grid{--gc-cols:3}}@media (min-width:1360px){.game-grid{--gc-cols:4}}@media (min-width:1700px){.game-grid{--gc-cols:5}}@media (max-width:767px),(orientation:landscape) and (max-height:520px){.game-grid{gap:var(--fl-space-8) var(--fl-space-4)}.gc-info{max-height:calc(100dvh - 68px - env(safe-area-inset-bottom) - var(--fl-space-8));overscroll-behavior:contain;overflow-y:auto}}@media (orientation:landscape) and (max-height:520px){.gc-info{max-height:calc(100dvh - 56px - env(safe-area-inset-bottom) - var(--fl-space-8))}.game-grid{--gc-cols:4}}.game-card[data-active=true]{z-index:2}.game-link{color:inherit;border-radius:var(--fl-radius-lg);outline:none;text-decoration:none;display:block}.gc-cover{--rx:0deg;--ry:0deg;--tilt-x:0;--tilt-y:0;--lift:0;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(calc(var(--lift) * 12px));display:block;position:relative}.game-card[data-active=true] .gc-cover,.game-card[data-active=true] .gc-plane,.game-card[data-active=true] .gc-plane>img,.game-card[data-active=true] .gc-sheen:before,.game-card[data-active=true] .gc-sheen:after{will-change:transform}.game-cover{aspect-ratio:5/7;border-radius:var(--fl-radius-lg);isolation:isolate;background:var(--fl-color-surface-alt);display:block;position:relative;overflow:hidden}.gc-flat{object-fit:cover;width:100%;height:100%;display:none;position:absolute;inset:0}.gc-pop{z-index:1;pointer-events:none;clip-path:inset(0 round var(--fl-radius-lg));transition:clip-path var(--fl-duration-enter) var(--fl-ease-out);position:absolute;inset:0}.game-card[data-active=true] .gc-pop{clip-path:inset(-16% -12% 0 -12% round var(--fl-radius-lg))}.gc-plane{--rise:0px;left:calc(var(--gc-bleed-x) * -1);top:calc(var(--gc-bleed-y) * -1);width:calc(100% + 2 * var(--gc-bleed-x));height:calc(100% + 2 * var(--gc-bleed-y));transform-origin:var(--ox,50%) var(--oy,50%);transform:translate3d(calc(var(--tilt-x) * var(--depth) * var(--gc-parallax)), calc(var(--tilt-y) * var(--depth) * var(--gc-parallax) - var(--lift) * var(--rise)), 0) rotate(calc(var(--tilt-x) * var(--sway,0) * 1deg)) scale(calc(1 + var(--lift) * (var(--pop,1) - 1)));position:absolute}.gc-pop .gc-plane{--rise:calc(var(--depth) * var(--gc-rise))}.gc-pop .gc-plane>img{filter:drop-shadow(0 2px 3px color-mix(in srgb, var(--fl-gray-950) 32%, transparent))}.gc-plane>img{width:100%;max-width:none;height:100%;translate:0 calc(var(--gc-wave) * var(--lift) * var(--gc-float) * -1);display:block}.game-card[data-active=true] .gc-plane[data-float]{animation:gc-wave var(--gc-float-period) ease-in-out infinite;animation-delay:calc(var(--float,0) * var(--gc-float-period) * -1)}@keyframes gc-wave{0%,to{--gc-wave:0}50%{--gc-wave:1}}.gc-contact{left:var(--sx);top:var(--sy);width:var(--sw);aspect-ratio:4;background:radial-gradient(closest-side, color-mix(in srgb, var(--fl-gray-950) 72%, transparent), transparent);opacity:calc(.35 + var(--lift) * .55);transform:translate(calc(-50% - var(--tilt-x) * 8px), calc(-50% + var(--lift) * var(--rise))) scale(calc(1 - var(--gc-wave) * var(--lift) * .16));pointer-events:none;border-radius:50%;position:absolute}.gc-sheen{z-index:2;border-radius:var(--fl-radius-lg);pointer-events:none;opacity:calc(var(--lift) * var(--gc-sheen-strength));position:absolute;inset:0;overflow:hidden}.gc-sheen:before,.gc-sheen:after{content:"";transform:translate(calc(var(--tilt-x) * 3%), calc(var(--tilt-y) * 2%));position:absolute;inset:0}.gc-sheen:before{background:linear-gradient(to bottom left, transparent 8%, color-mix(in srgb, var(--gc-sheen) 55%, transparent) 14%, color-mix(in srgb, var(--gc-sheen) 55%, transparent) 19%, transparent 26%)}.gc-sheen:after{background:linear-gradient(to bottom left, transparent 28%, color-mix(in srgb, var(--gc-sheen) 30%, transparent) 30%, transparent 32%)}.gc-shadow{z-index:-1;border-radius:var(--fl-radius-lg);background:var(--fl-color-inset-shadow);filter:blur(18px);opacity:var(--lift);transform:translate(calc(var(--tilt-x) * -10px), calc(var(--fl-space-4) - var(--tilt-y) * 6px));pointer-events:none;position:absolute;inset:10% 10% 0}.gc-cover:after{content:"";z-index:3;border-radius:var(--fl-radius-lg);pointer-events:none;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fl-color-ink) 6%, transparent);transition:box-shadow var(--fl-duration-control) ease-out;position:absolute;inset:0}.game-link:focus-visible .gc-cover:after{box-shadow:inset 0 0 0 2px var(--fl-color-ink)}.game-card[data-state=playing] .gc-cover:after{box-shadow:inset 0 0 0 2px var(--fl-color-success)}.game-card[data-state=soon] :is(.gc-clip,.gc-pop){filter:saturate(.7)brightness(.78)}.gc-skel-cover{z-index:4;border-radius:inherit;position:absolute;inset:0}.game-meta{position:relative}.gc-skel-title{left:var(--fl-space-2);width:6em;height:var(--fl-space-4);position:absolute;top:50%;translate:0 -50%}.gc-clip>:is(.gc-plane,.gc-flat),.gc-pop,.game-meta>:not(.gc-skel-title){transition:opacity var(--fl-duration-enter) var(--fl-ease-out)}.game-card[data-loading] :is(.gc-clip>.gc-plane,.gc-clip>.gc-flat,.gc-pop,.gc-badge),.game-card[data-loading] .game-meta>:not(.gc-skel-title){opacity:0}.gc-badge{top:var(--fl-space-2);right:var(--fl-space-2);z-index:25;min-height:20px;padding:0 var(--fl-space-2);border-radius:var(--fl-radius-pill);background:var(--fl-color-warning);color:var(--fl-color-inverse);font:var(--text-caption);letter-spacing:.04em;box-shadow:0 1px 4px var(--fl-color-inset-shadow);place-items:center;font-weight:700;display:inline-grid;position:absolute}.gc-badge--inline{box-shadow:none;position:static}.gc-info-toggle{display:none}@media (hover:none),(pointer:coarse){.gc-info-toggle{top:var(--fl-space-2);left:var(--fl-space-2);z-index:3;width:var(--fl-control-md);height:var(--fl-control-md);border-radius:var(--fl-radius-pill);background:color-mix(in srgb, var(--fl-color-bg) 72%, transparent);color:var(--fl-color-ink);-webkit-tap-highlight-color:transparent;border:0;place-items:center;padding:0;font-size:20px;display:grid;position:absolute}.gc-info-toggle:after{content:"";inset:calc(var(--fl-space-1) * -1.5);position:absolute}.gc-info-toggle[aria-expanded=true]{background:var(--fl-color-accent);color:var(--fl-color-accent-ink)}.gc-info-toggle:focus-visible{outline:2px solid var(--fl-color-focus);outline-offset:2px}}.game-meta{align-items:center;gap:var(--fl-space-2);min-height:var(--fl-control-sm);margin-top:var(--fl-space-4);padding:0 var(--fl-space-1) 0 var(--fl-space-2);grid-template-columns:minmax(0,1fr) auto;display:grid}.game-title{font:var(--text-body);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.gc-play{--gc-play-glyphs:2;--gc-play-stretch:.26s;--gc-play-stagger:50ms;width:var(--fl-control-sm);height:var(--fl-control-sm);border-radius:var(--fl-radius-pill);background:var(--fl-color-accent);color:var(--fl-color-accent-ink);font:var(--text-caption);transition:width .2s var(--fl-ease-in) calc(var(--gc-play-glyphs) * 40ms + 60ms);justify-self:end;align-items:center;font-weight:700;display:inline-flex;overflow:hidden}.gc-play-icon{width:var(--fl-control-sm);height:var(--fl-control-sm);flex:none;place-items:center;font-size:12px;display:grid}.gc-play-label{padding-right:var(--fl-space-3);flex:none;display:inline-flex}.gc-play-glyph{display:block;overflow:hidden}.gc-play-glyph>span{transition:transform .16s var(--fl-ease-in) calc((var(--gc-play-glyphs) - 1 - var(--i)) * 40ms);display:block;transform:translateY(100%)}.game-link:is(:hover,:focus-visible) .gc-play{width:calc(var(--fl-control-sm) + var(--gc-play-glyphs) * 1em + var(--fl-space-3));transition:width var(--gc-play-stretch) var(--fl-ease-out)}.game-link:is(:hover,:focus-visible) .gc-play-glyph>span{transition:transform .22s var(--fl-ease-out) calc(var(--gc-play-stretch) * .55 + var(--i) * var(--gc-play-stagger));transform:none}.gc-info{--gc-info-radius:12px;z-index:40;width:min(320px, calc(100vw - var(--fl-space-8)));border:1px solid color-mix(in srgb, var(--fl-color-ink) 10%, transparent);border-radius:var(--gc-info-radius);background:color-mix(in srgb, var(--fl-color-surface) 90%, transparent);-webkit-backdrop-filter:blur(16px)saturate(1.3);backdrop-filter:blur(16px)saturate(1.3);color:var(--fl-color-ink);box-shadow:var(--fl-shadow-overlay);pointer-events:none;visibility:hidden;opacity:0;transform:translateX(calc(var(--gc-info-shift) * -1));transition:opacity var(--fl-duration-exit) var(--fl-ease-in), transform var(--fl-duration-exit) var(--fl-ease-in), visibility 0s linear var(--fl-duration-exit);position:fixed;top:0;left:0;overflow:hidden}.gc-info[data-side=left]{transform:translateX(var(--gc-info-shift))}.gc-info[data-side=below]{transform:translateY(calc(var(--gc-info-shift) * -1))}.gc-info[data-open=true]{visibility:visible;opacity:1;transition:opacity var(--fl-duration-enter) var(--fl-ease-out), transform var(--fl-duration-enter) var(--fl-ease-out), visibility 0s;transform:none}.gc-info-media{aspect-ratio:16/9;background:var(--fl-color-surface-alt);position:relative}.gc-info-shot{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .6s ease-in-out;display:block;position:absolute;inset:0}.gc-info-shot[data-active=true]{opacity:1}.gc-skel-media{border-radius:0;position:absolute;inset:0}.gc-info-media:after{content:"";background:linear-gradient(to top, color-mix(in srgb, var(--fl-color-surface) 70%, transparent), transparent);pointer-events:none;height:40%;position:absolute;inset:auto 0 0}.gc-info-ticks{z-index:1;inset:auto var(--fl-space-3) var(--fl-space-2);gap:var(--fl-space-1);grid-auto-columns:1fr;grid-auto-flow:column;display:grid;position:absolute}.gc-info-ticks>span{border-radius:var(--fl-radius-pill);background:color-mix(in srgb, var(--fl-gray-0) 35%, transparent);height:2px;overflow:hidden}.gc-info-ticks>span:before{content:"";background:var(--fl-gray-0);transform-origin:0;height:100%;display:block;transform:scaleX(0)}.gc-info-ticks>span[data-state=done]:before{transform:none}.gc-info[data-open=true] .gc-info-ticks>span[data-state=active]:before{animation:gc-tick var(--gc-shot-ms) linear forwards}@keyframes gc-tick{to{transform:none}}.gc-info-body{gap:var(--fl-space-3);padding:var(--fl-space-3) var(--fl-space-4) var(--fl-space-4);display:grid}.gc-info-head{align-items:start;gap:var(--fl-space-2);grid-template-columns:minmax(0,1fr) auto;display:grid}.gc-info-names{min-width:0;display:grid}.gc-info-title{font:var(--text-h2)}.gc-info-en{font:var(--text-caption);color:var(--fl-color-muted);letter-spacing:.04em}.gc-info-meta{align-items:center;gap:var(--fl-space-2) var(--fl-space-4);color:var(--fl-color-subtle);font:var(--text-label);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.gc-info-meta>li{align-items:center;gap:var(--fl-space-1);display:inline-flex}.gc-info-meta i{font-size:16px}.gc-info-meta>li:first-child{color:var(--fl-color-ink)}.gc-info-meta>.gc-info-devices{gap:var(--fl-space-2);color:var(--fl-color-muted);margin-left:auto}.gc-info-device,.gc-info-device>span:first-child{place-items:center;display:inline-grid}.gc-info-device svg{width:16px;height:16px;display:block}.gc-info-tags{gap:var(--fl-space-1);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.gc-info-tags>li{min-height:20px;padding:0 var(--fl-space-2);border-radius:var(--fl-radius-sm);background:color-mix(in srgb, var(--fl-color-ink) 8%, transparent);color:var(--fl-color-subtle);font:var(--text-caption);align-items:center;display:inline-grid}.gc-info-blurb{font:var(--text-note);color:var(--fl-color-subtle)}.gc-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.gc-cover{transform:none}.gc-plane,.gc-pop,.gc-sheen,.gc-shadow{display:none}.gc-flat{display:block}.gc-info,.gc-info-shot{transition:none}.gc-play,.gc-play-glyph>span{transition:none!important}.gc-info-ticks{display:none}}
