/* Game centre content only. The shell is intentionally inherited from final.css. */
.site-shell { animation: shared-shell-enter .34s ease both; }
body.page-leaving .site-shell { transform: none; }
@keyframes shared-shell-enter { from { opacity: 0; } to { opacity: 1; } }
.game-center-page .hero { margin-top: 0; }
.game-center-page .hero-media { inset: 0 0 0 46%; }
.game-center-page .hero-wash { background: linear-gradient(90deg,#fbfcfd 0%,#fbfcfd 36%,rgba(251,252,253,.93) 48%,rgba(251,252,253,.42) 67%,rgba(16,30,42,.12) 100%),linear-gradient(0deg,rgba(13,28,42,.18),transparent 46%); }
.game-center-page .hero-content { width: 63%; }
.game-center-page .hero h1 { max-width: 590px; }
.game-center-page .feature-note strong { max-width: 190px; }

.game-center-library { padding-bottom: 24px; }
.game-center-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(260px,.85fr); gap: 12px; }
.game-center-card { position: relative; min-height: 300px; overflow: hidden; border: 1px solid #dbe4e7; border-radius: 10px; background: #172a3b; isolation: isolate; cursor: pointer; transition: transform .32s cubic-bezier(.16,1,.3,1),border-color .25s ease,box-shadow .32s ease; }
.game-center-card:hover,.game-center-card:focus-visible { border-color: #7dbda9; box-shadow: 0 16px 32px rgba(25,47,63,.15); outline: none; transform: translateY(-3px); }
.game-center-card-media,.game-center-card-wash { position: absolute; inset: 0; }
.game-center-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.16,1,.3,1); }
.game-center-card:hover .game-center-card-media img,.game-center-card:focus-visible .game-center-card-media img { transform: scale(1.035); }
.game-center-card-feature .game-center-card-media img { object-position: center 19%; filter: saturate(.88) contrast(1.03) brightness(.7); }
.game-center-card:not(.game-center-card-feature) .game-center-card-media img { object-position: 55% 52%; filter: saturate(.78) brightness(.68); }
.game-center-card-wash { background: linear-gradient(90deg,rgba(5,19,30,.87),rgba(5,19,30,.25) 68%,rgba(5,19,30,.04)),linear-gradient(0deg,rgba(5,19,30,.86),transparent 62%); }
.game-center-card-index { position: absolute; top: 19px; right: 21px; color: rgba(231,244,242,.78); font-size: 22px; font-weight: 800; }
.game-center-card-copy { position: absolute; right: 28px; bottom: 25px; left: 25px; color: #fff; }
.game-center-card-copy > span { color: #8de1c7; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.game-center-card-copy h3 { margin: 10px 0 6px; font-size: 26px; }
.game-center-card-copy p { max-width: 320px; margin: 0; color: rgba(238,246,246,.72); font-size: 11px; line-height: 1.7; }
.game-center-card-copy b { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 10px; }
.game-center-card-copy i { color: #8de1c7; font-size: 17px; font-style: normal; transition: transform .25s ease; }
.game-center-card-feature:hover .game-center-card-copy i,.game-center-card-feature:focus-visible .game-center-card-copy i { transform: translateX(4px); }
.game-center-note { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; margin: 0 34px; padding: 25px 0 52px; border-top: 1px solid var(--line); }
.game-center-note > span { color: var(--green); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.game-center-note p { margin: 0; color: #7b8797; font-size: 11px; line-height: 1.8; text-align: right; }

/* P3: stable archive affordance. The plus is legible and calm, without a rotating gimmick. */
#library .library-empty .empty-actions .add-game-action .add-game-icon { transform: none !important; }
#library .library-empty .empty-actions .add-game-action:hover .add-game-icon,#library .library-empty .empty-actions .add-game-action:focus-visible .add-game-icon { transform: none !important; background: rgba(255,255,255,.13); color: #91e2ca; }

body.detail-open { overflow: hidden; }
.game-detail[hidden] { display: none; }
.game-detail { position: fixed; inset: 0; z-index: 105; display: grid; place-items: center; padding: 22px; background: rgba(10,22,32,.58); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transition: opacity .25s ease,visibility .25s ease; }
.game-detail.is-visible { opacity: 1; visibility: visible; }
.game-detail-backdrop { position: absolute; inset: 0; }
.game-detail-panel { position: relative; z-index: 1; display: grid; grid-template-columns: 1.12fr .88fr; width: min(1060px,100%); min-height: 570px; overflow: hidden; border: 1px solid rgba(255,255,255,.55); border-radius: 12px; background: #fff; box-shadow: 0 30px 80px rgba(12,27,39,.32); transform: translateY(16px) scale(.985); transition: transform .4s cubic-bezier(.16,1,.3,1); }
.game-detail.is-visible .game-detail-panel { transform: none; }
.detail-video-wrap { position: relative; overflow: hidden; background: #0b1822; }
.detail-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; filter: saturate(.82) contrast(1.02) brightness(.76); }
.detail-video-wash { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(4,15,24,.04),rgba(4,15,24,.24)),linear-gradient(0deg,rgba(3,14,22,.7),transparent 52%); }
.detail-live { position: absolute; left: 25px; bottom: 23px; color: #a5e9d5; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.detail-copy { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 48px 44px 40px; background: #fff; }
.detail-close { position: absolute; top: 18px; right: 19px; width: 34px; height: 34px; border: 1px solid #dfe6e9; border-radius: 8px; background: #f8fafb; color: #758193; font-size: 22px; line-height: 1; cursor: pointer; }
.detail-close:hover,.detail-close:focus-visible { background: #eef4f2; color: var(--green); outline: none; }
.detail-kicker { color: var(--green); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.detail-copy h2 { margin: 15px 0 0; color: #132238; font-size: 38px; }
.detail-lead { margin: 16px 0 0; color: #445267; font-size: 13px; line-height: 1.75; }
.detail-specs { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; margin: 27px 0 0; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.detail-specs span { display: grid; gap: 6px; color: #3f4c60; font-size: 9px; }
.detail-specs b { color: #929dab; font-size: 7px; }
.detail-description { margin: 18px 0 0; color: #768294; font-size: 11px; line-height: 1.8; }
.detail-add { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-top: 24px; padding: 0 14px 0 18px; border-radius: 8px; background: #142239; color: #fff; box-shadow: 0 11px 22px rgba(20,34,57,.15); font-size: 12px; font-weight: 800; cursor: pointer; transition: transform .28s ease,background-color .25s ease,box-shadow .28s ease; }
.detail-add b { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 6px; background: rgba(255,255,255,.09); color: #75d8ba; font-size: 19px; font-weight: 400; }
.detail-add:hover,.detail-add:focus-visible { background: #1a2d48; box-shadow: 0 16px 28px rgba(20,34,57,.22); outline: none; transform: translateY(-2px); }
.detail-add.is-added,.detail-add.is-added:hover { background: #e9f6f1; color: #176f59; box-shadow: none; cursor: default; transform: none; }
.detail-add.is-added b { background: #d6eee5; color: var(--green); }
.detail-status { min-height: 17px; margin: 10px 0 0; color: var(--green); font-size: 10px; }

@media (max-width: 820px) {
  .game-center-page .hero { margin: 18px 20px 0; }
  .game-center-page .hero-content { width: 100%; }
  .game-center-grid { grid-template-columns: 1fr; }
  .game-center-card { min-height: 290px; }
  .game-center-note { margin-inline: 20px; }
  .game-detail { padding: 10px; overflow-y: auto; }
  .game-detail-panel { display: block; width: min(540px,100%); min-height: 0; }
  .detail-video-wrap { height: 260px; }
  .detail-copy { min-height: 420px; padding: 40px 26px 28px; }
}
@media (max-width: 760px) {
  .site-shell { display: block; width: 100%; margin: 0; padding: 0; }
  main { border: 0; border-radius: 0; box-shadow: none; }
  .sidebar { display: flex; position: fixed; top: 0; left: 0; bottom: 0; z-index: 30; width: min(300px,88vw); min-height: 100vh; border-radius: 0 15px 15px 0; transform: translateX(-102%); transition: transform .25s ease; }
  .sidebar.is-open { transform: translateX(0); }
  .mobile-menu { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 12px; background: transparent; color: var(--ink); font-size: 20px; }
  .mobile-brand { display: block; font-size: 16px; }
  .topbar { justify-content: flex-start; padding: 0 20px; border-bottom: 1px solid var(--line); }
  .breadcrumbs { display: none; }
  .login-button { margin-left: auto; }
  .hero { margin: 18px 20px 0; min-height: 420px; height: 420px; }
  .hero-media { inset: 0; }
  .hero-content { width: 100%; justify-content: flex-end; padding: 34px 26px 35px; }
  .hero-meta { top: 26px; left: 26px; }
  .feature-note { top: 26px; right: 26px; }
  .library { margin: 22px 20px; padding-inline: 15px; }
  .method,footer { margin-inline: 20px; }
  .game-center-page .hero { margin: 18px 20px 0; }
  .game-center-page .hero-content { width: 100%; }
  .game-center-grid { grid-template-columns: 1fr 1fr; }
  .game-center-card { min-height: 290px; }
  .game-center-note { margin-inline: 20px; }
}
@media (max-width: 560px) {
  .game-center-page .hero { margin-inline: 12px; }
  .game-center-page .hero-media { inset: 0; }
  .game-center-library { margin: 14px 12px; }
  .game-center-card { min-height: 280px; }
  .game-center-note { margin-inline: 12px; padding-bottom: 38px; }
  .detail-video-wrap { height: 210px; }
  .detail-copy { min-height: 430px; padding: 42px 22px 24px; }
  .detail-copy h2 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-shell { transition: none !important; animation: none !important; }
}

/* Signature motion pass: layered, tactile, and quiet enough for repeat use. */
.game-center-page {
  --motion-spring: cubic-bezier(.16,1,.3,1);
  --motion-soft: cubic-bezier(.22,1,.36,1);
}
.game-center-page .site-shell { animation: archive-arrive .72s var(--motion-soft) both; }
.game-center-page .hero-media img { animation: hero-breathe 14s ease-in-out infinite alternate; will-change: transform; }
.game-center-page .hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .18;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.08) 4px, transparent 5px);
  mix-blend-mode: soft-light; animation: scan-drift 9s linear infinite;
}
.game-center-page .hero-content > * { opacity: 0; animation: content-rise .7s var(--motion-spring) forwards; }
.game-center-page .hero-content .hero-meta { animation-delay: .12s; }
.game-center-page .hero-content .eyebrow { animation-delay: .2s; }
.game-center-page .hero-content h1 { animation-delay: .28s; }
.game-center-page .hero-content .hero-summary { animation-delay: .38s; }
.game-center-page .hero-content .hero-actions { animation-delay: .48s; }
.game-center-page .feature-note { animation: note-in .8s .44s var(--motion-spring) both; }
.game-center-page .archive-stamp { animation: stamp-in .7s .58s var(--motion-spring) both; }
.game-center-page .scroll-cue { animation: cue-in .6s .72s var(--motion-soft) both; }
.game-center-page .section-heading { position: relative; }
.game-center-page .section-heading::after { content: ""; position: absolute; left: 0; bottom: -12px; width: 78px; height: 1px; background: var(--green); transform-origin: left; animation: line-draw .8s .35s var(--motion-soft) both; }
.game-center-card { transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(0); }
.game-center-card:hover, .game-center-card:focus-visible { transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(-3px); }
.game-center-card::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(118deg, transparent 30%, rgba(170,244,222,.22) 47%, transparent 64%); transform: translateX(-120%); }
.game-center-card:hover::after, .game-center-card:focus-visible::after { opacity: 1; animation: card-sheen .8s var(--motion-soft) forwards; }
.game-center-card-copy { transition: transform .5s var(--motion-spring); }
.game-center-card:hover .game-center-card-copy, .game-center-card:focus-visible .game-center-card-copy { transform: translate3d(0,-4px,0); }
.game-center-card-index { transition: color .3s ease, transform .5s var(--motion-spring); }
.game-center-card:hover .game-center-card-index { color: #b8f4e0; transform: translateY(-3px); }
.detail-video-wrap::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(167,238,218,.22); pointer-events: none; opacity: 0; animation: frame-in .8s .4s ease forwards; }
.game-detail.is-visible .detail-copy > * { opacity: 1; transform: translateY(10px); animation: detail-shift .48s var(--motion-spring) both; }
.game-detail.is-visible .detail-copy .detail-close { animation-delay: .08s; }
.game-detail.is-visible .detail-copy .detail-kicker { animation-delay: .16s; }
.game-detail.is-visible .detail-copy h2 { animation-delay: .22s; }
.game-detail.is-visible .detail-copy .detail-lead { animation-delay: .28s; }
.game-detail.is-visible .detail-copy .detail-specs { animation-delay: .34s; }
.game-detail.is-visible .detail-copy .detail-description { animation-delay: .4s; }
.game-detail.is-visible .detail-copy .detail-add { animation-delay: .46s; }
.game-detail.is-visible .detail-copy .detail-status { animation-delay: .52s; }
.detail-add:active, .primary-action:active, .member-cta:active { transform: translateY(1px) scale(.98); transition-duration: .08s; }
.motion-ripple { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: rgba(154,238,214,.48); transform: translate(-50%,-50%) scale(0); pointer-events: none; animation: ripple-out .6s ease-out forwards; }
@keyframes ripple-out { to { transform: translate(-50%,-50%) scale(20); opacity: 0; } }
.auth-layer.is-visible .auth-panel { animation: auth-panel-in .62s var(--motion-spring) both; }
.auth-layer.is-visible .auth-visual-image { animation: auth-image-in 1.1s var(--motion-soft) both; }
.auth-layer.is-visible .auth-form-wrap > :not(.auth-close) { opacity: 1; transform: translateY(10px); animation: detail-shift .46s var(--motion-spring) both; }
.auth-layer.is-visible .auth-form-wrap > :not(.auth-close):nth-child(2) { animation-delay: .12s; }
.auth-layer.is-visible .auth-form-wrap > :not(.auth-close):nth-child(3) { animation-delay: .18s; }
.auth-layer.is-visible .auth-form-wrap > :not(.auth-close):nth-child(4) { animation-delay: .24s; }
.auth-layer.is-visible .auth-form-wrap > :not(.auth-close):nth-child(n+5) { animation-delay: .3s; }
@keyframes auth-panel-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes auth-image-in { from { transform: scale(1.08); filter: saturate(.5) brightness(.75); } to { transform: scale(1); filter: saturate(.72) brightness(.9); } }
@keyframes archive-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hero-breathe { from { transform: scale(1.015) translate3d(-.3%,0,0); } to { transform: scale(1.055) translate3d(.3%,-.4%,0); } }
@keyframes scan-drift { from { background-position: 0 0; } to { background-position: 0 38px; } }
@keyframes content-rise { from { opacity: 0; transform: translate3d(0,14px,0); } to { opacity: 1; transform: none; } }
@keyframes note-in { from { opacity: 0; transform: translate3d(10px,-6px,0); } to { opacity: 1; transform: none; } }
@keyframes stamp-in { from { opacity: 0; transform: scale(.84) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes cue-in { from { opacity: 0; transform: translateY(8px); } to { opacity: .72; transform: none; } }
@keyframes line-draw { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes card-sheen { to { transform: translateX(120%); } }
@keyframes frame-in { to { opacity: 1; } }
@keyframes detail-rise { to { opacity: 1; transform: none; } }
@keyframes detail-shift { from { transform: translateY(10px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .game-center-page .hero-media img, .game-center-page .hero::before, .game-center-page .hero-content > *, .game-center-page .feature-note, .game-center-page .archive-stamp, .game-center-page .scroll-cue, .game-center-page .section-heading::after, .detail-video-wrap::after, .game-detail.is-visible .detail-copy > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}