/* Standalone design proposal: shared game data, no production theme changes. */
/* Recommendation motion: image depth, clear position, keyboard/touch parity. */
.feature-showcase { --recommend-ease: cubic-bezier(.22,1,.36,1); }
.feature-showcase .feature-stage { padding: 8px 2px 12px; animation: recommend-enter 380ms var(--recommend-ease) both; }
.feature-showcase .feature-stage .layout-grid-card {
  isolation: isolate; border-radius: 22px; opacity: .88; filter: none;
  transform: none; clip-path: inset(0 6% 0 0 round 22px); border: 1px solid #d4e3ef;
  transition: clip-path 380ms var(--recommend-ease), transform 280ms var(--recommend-ease), opacity 240ms ease, box-shadow 240ms ease;
}
.feature-showcase .feature-stage .layout-grid-card.is-current {
  transform: none; clip-path: inset(0 0 0 0 round 22px); opacity: 1; filter: none;
  box-shadow: 0 10px 28px #17395724;
}
.feature-showcase .feature-cover { transition: transform 360ms var(--recommend-ease); }
.feature-showcase .feature-copy, .feature-showcase .feature-mini > strong {
  transition: transform 280ms var(--recommend-ease);
}
.feature-showcase .feature-orbit { display: none; }
.feature-showcase .feature-status i { animation: none; }
.feature-showcase .feature-stage .layout-grid-card:focus-visible {
  outline: 3px solid #267fbe; outline-offset: -4px; opacity: 1; clip-path: inset(0 0 0 0 round 22px);
}
.feature-showcase .feature-stage .layout-grid-card:active { transform: scale(.97); }
.feature-showcase > .feature-controls {
  gap: 12px; padding: 6px 10px; background: #fff !important; border-color: #d6e5f2 !important;
}
.feature-showcase > .feature-controls button { width: 44px; height: 44px; color: #2455a4; transition: transform 180ms ease, background 180ms ease; }
.feature-showcase > .feature-controls button:hover:not(:disabled) { background: #eaf3fc !important; color: #174a7c; }
.recommend-position { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: #315373; }
.recommend-track { width: 72px; height: 4px; background: #e0eaf3; border-radius: 4px; overflow: hidden; }
.recommend-track > span { display: block; height: 100%; background: #267fbe; transform-origin: left; transition: transform 280ms var(--recommend-ease); }
@media (hover: hover) and (pointer: fine) {
  .feature-showcase .feature-stage .layout-grid-card:hover { opacity: 1; transform: translateY(-3px) scale(1); box-shadow: 0 12px 30px #17395730; }
  .feature-showcase .layout-grid-card:hover .feature-cover { transform: scale(1.055); }
  .feature-showcase .layout-grid-card:hover .feature-copy,
  .feature-showcase .feature-mini:hover > strong { transform: translateY(-5px); }
}
@keyframes recommend-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .feature-showcase .feature-stage, .feature-showcase .feature-stage * { animation: none !important; transition: none !important; }
  .feature-showcase .feature-stage .layout-grid-card, .feature-showcase .feature-stage .feature-cover,
  .feature-showcase .feature-stage .feature-copy, .feature-showcase .feature-stage strong { transform: none !important; }
  .feature-showcase .feature-stage .layout-grid-card { clip-path: none !important; }
  .feature-showcase .recommend-track > span { transition: none; }
}
body { background: #f6f9fd !important; }
.site-header { background: #fff !important; box-shadow: none !important; }
.header-inner { min-height: 92px; }
.brand h1 { -webkit-text-fill-color: #173957 !important; font-style: normal; }
.header-summary { background: #f1f7fd !important; border: 0 !important; }
main { padding-top: 32px; }
.feature-toolbar .eyebrow, .catalog-title .eyebrow { color: #287fc0 !important; letter-spacing: .16em; }
.feature-toolbar h2, .catalog-title h2 { font-size: 28px; }
.feature-stage { height: 334px !important; min-height: 0 !important; background: transparent !important; }
.feature-main, .feature-mini { height: 310px !important; min-height: 0 !important; }
.feature-copy strong { font-size: clamp(26px, 3vw, 42px) !important; }
.feature-copy { padding: 26px !important; }
.feature-showcase { margin-bottom: 28px; }
.feature-showcase > .feature-controls { box-shadow: none !important; }
.notice { padding: 12px 20px !important; background: #edf5ff !important; border-color: #d6e5f5 !important; }
.notice h2 { font-size: 18px; }
.notice .eyebrow { display: none; }
.notice-list li { font-size: 13px; }
.catalog { margin-top: 32px; }
.catalog-heading { padding: 24px !important; border: 1px solid #dce5ef; border-bottom: 0; border-radius: 18px 18px 0 0; background: white; }
.catalog-toolbar { padding: 0 24px 22px !important; margin: 0 !important; background: #fff; border: 1px solid #dce5ef !important; border-top: 0 !important; border-radius: 0 0 18px 18px; }
.search-field { background: #f8fafc !important; min-height: 46px; }
.filter-row .category-filters button { border-radius: 9px !important; min-height: 40px; padding: 8px 16px !important; }
.filter-row .category-filters button[aria-pressed="true"] { background: #267fbe !important; border-color: #267fbe !important; }
.version-section-heading { margin-top: 25px; border: 0 !important; }
.game-grid { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 16px !important; transform: none !important; }
.game-grid .game-card:not([hidden]) { display: flex !important; flex-direction: row !important; align-items: center; gap: 15px; min-height: 124px; padding: 18px !important; border-radius: 16px !important; box-shadow: 0 3px 12px #18395d05 !important; transform: none !important; overflow: hidden; }
.game-grid .cover-wrap { width: 78px !important; height: 78px !important; min-width: 78px; aspect-ratio: 1; border-radius: 15px; overflow: hidden; }
.game-grid .cover-wrap img { width: 100%; height: 100%; object-fit: cover; }
.game-grid .cover-wrap::after { display: none; }
.game-grid .card-body { flex: 1; min-width: 0; padding: 0 !important; }
.game-grid .card-title-line h4 { font-size: 16px; line-height: 1.5; padding-right: 0; }
.game-grid .card-arrow { width: 27px; height: 27px; min-width: 27px; color: #287fc0 !important; background: #edf5fc !important; border: none !important; }
.game-grid .card-genre { font-size: 12px; color: #287fc0 !important; }
.game-grid .card-subtitle { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; margin: 5px 0 0; }
.game-grid .game-card:hover { border-color: #7eaed3 !important; box-shadow: 0 8px 24px #18395d12 !important; }
.detail-hero { background: #fff !important; }
.event-plan-main .event-plan-card { background: #fff !important; border-left-color: #287fc0 !important; border-radius: 14px; padding: 22px; }
.event-plan-main .event-plan-card h5 { color: #173957 !important; }
.event-plan-main .event-plan-card li { border-bottom: 1px solid #edf1f6; padding-bottom: 8px; }
.event-plan-main .event-plan-card li:last-child { border-bottom: 0; }
.button-primary { background: #267fbe !important; border-color: #267fbe !important; }
@media(max-width:1100px) { .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media(max-width:760px) {
  .header-inner { min-height: 76px; }
  .feature-stage { height: 274px !important; }
  .feature-main, .feature-mini { height: 250px !important; }
  .feature-toolbar h2, .catalog-title h2 { font-size: 23px; }
  .catalog-heading { padding: 18px !important; }
  .catalog-toolbar { padding: 0 18px 18px !important; }
  .catalog-heading .search-field { margin-top: 15px; }
  .filter-row .category-filters button { padding: 7px 12px !important; }
  .game-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .game-grid .game-card { min-height: 110px; padding: 15px !important; }
  .game-grid .cover-wrap { width:72px !important; height:72px !important; min-width:72px; }
  .notice { padding: 12px 14px !important; }
  .notice-list li { min-height: 0; padding-top: 5px; padding-bottom: 5px; }
}
.feature-showcase > .feature-controls button { width: 44px !important; height: 44px !important; }
.feature-showcase .feature-stage .layout-grid-source-hidden { opacity: 0 !important; }