/* Loading geometry is shared by all appearances and follows real request state. */
/* The current administrator review page shares surfaces with its host. */
html:has(#adminView.active) { height:100%; overflow:hidden; }
body.feika-ui.feika-platform:has(#adminView.active) { height:100dvh; overflow:hidden; }
body.feika-ui.feika-platform:has(#adminView.active) :is(.topbar,.mobile-page-title,.platform-user-actions) { display:none; }
body.feika-ui.feika-platform:has(#adminView.active) > .shell { width:100%; height:100dvh; min-height:0; margin:0; padding:0; }
body.feika-ui.feika-platform:has(#adminView.active) > .shell > main { width:100%; max-width:none; height:100%; min-height:0; margin:0; padding:0; overflow:hidden; }
body.feika-ui.feika-platform:has(#adminView.active) #adminView { height:100%; min-height:0; max-width:none; padding:16px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
body.feika-ui #adminView :is(.review-status,.submission,.announcement) { background:var(--panel); border:1px solid var(--line); color:var(--text); }
body.feika-ui #adminView :is(h2,h3,p,.fine,.feature-meta,.pill) { overflow-wrap:anywhere; }
body.feika-ui #adminView :is(.fine,.muted,label,.admin-review-read) { color:var(--ink-2,var(--muted)); }
body.feika-ui #adminView :is(.admin-grid,.admin-grid>.panel,.panel-head,.panel-body,.submission,.card-row,.card-row>h3,.review-status>.toolbar>div) { min-width:0; }
body.feika-ui #adminView .admin-grid { grid-template-columns:minmax(0,1fr) minmax(300px,380px); }
body.feika-ui #adminView .panel-head { flex-wrap:wrap; gap:8px; }
body.feika-ui #adminView .submission .card-row { align-items:flex-start; flex-wrap:wrap; }
body.feika-ui #adminView #submissionList { max-height:clamp(160px,55dvh,560px); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:4px; }
body.feika-ui #adminView .submission :is(h3,.fine,.muted) { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; -webkit-line-clamp:2; }
body.feika-ui #adminView .submission h3 { -webkit-line-clamp:3; }
body.feika-ui #adminView .submission.active { background-color:var(--brand-soft)!important; color:var(--text)!important; border-color:var(--brand); box-shadow:inset 3px 0 0 var(--brand); }
body.feika-ui #adminView .submission.active .card-row { color:inherit; }
body.feika-ui #adminView .submission.active :is(h3,p,.pill) { color:inherit; }
body.feika-ui #adminView :is(button,input) { min-height:44px; }
body.feika-ui #adminView .posting-input { min-height:130px; max-width:100%; }
body.feika-ui #adminView .admin-review-read { color:var(--ink-2,var(--muted)); font-size:13px; margin:8px 0; overflow-wrap:anywhere; }
body.feika-ui #adminView .admin-review-read:has(>p:empty) { display:none; }
body.feika-ui #adminView .admin-review-read p { margin:0 0 8px; }
body.feika-ui #adminView :is(.admin-review-read pre,.admin-review-result,.admin-review-recent p) { max-height:200px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; padding:12px; border:1px solid var(--line); border-radius:var(--radius-control,8px); color:var(--text); background:var(--panel-2); }
body.feika-ui #adminView :is(.admin-review-result[data-state=error],.admin-review-result[data-state=uncertain],.admin-review-recent [data-state=error],.admin-review-recent [data-state=uncertain]) { border-color:var(--danger); }
body.feika-ui #adminView .admin-review-recent { margin-top:16px; }
body.feika-ui #adminView #reviewPreservedDrafts section { min-width:0; margin-top:12px; }
body.feika-ui #adminView #reviewPreservedDrafts pre { max-height:220px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; padding:12px; border:1px solid var(--line); border-radius:var(--radius-control); color:var(--text); background:var(--panel-2); }
body.feika-ui #adminView :is(summary,.submission) { min-height:44px; }
body.feika-ui .admin-review-dialog { box-sizing:border-box; width:min(560px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); margin:auto; padding:0; border:1px solid var(--line); border-radius:var(--radius-card,16px); background:var(--panel); color:var(--text); overflow:hidden; }
body.feika-ui .admin-review-dialog::backdrop { background:#0009; }
body.feika-ui .admin-review-dialog form { display:flex; flex-direction:column; max-height:calc(100dvh - 34px); min-height:0; }
body.feika-ui .admin-review-dialog :is(header,footer) { display:flex; align-items:center; gap:12px; flex:0 0 auto; padding:12px 16px; background:var(--panel-2); }
body.feika-ui .admin-review-dialog header { align-items:flex-start; justify-content:space-between; border-bottom:1px solid var(--line); }
body.feika-ui .admin-review-dialog .admin-review-dialog-heading { min-width:0; flex:1; }
body.feika-ui .admin-review-dialog footer { justify-content:flex-end; flex-wrap:wrap; border-top:1px solid var(--line); }
body.feika-ui .admin-review-dialog header h2 { min-width:0; margin:0; font-size:18px; }
body.feika-ui .admin-review-dialog #adminReviewDialogClose { width:44px; height:44px; flex:0 0 44px; padding:0; font-size:24px; background:transparent; color:var(--ink-2,var(--muted)); }
body.feika-ui .admin-review-dialog :is(button,summary) { min-height:44px; }
body.feika-ui .admin-review-dialog .admin-review-dialog-body { min-height:0; overflow:auto; padding:16px; overscroll-behavior:contain; }
body.feika-ui .admin-review-dialog :is(p,label,h2) { color:var(--text); overflow-wrap:anywhere; }
body.feika-ui .admin-review-dialog #adminReviewDialogTarget { margin:8px 0 0; max-height:72px; overflow:auto; white-space:pre-wrap; font-weight:600; font-size:13px; }
body.feika-ui .admin-review-dialog textarea { width:100%; min-height:104px; resize:vertical; }
body.feika-ui :is(#adminView,.admin-review-dialog) .review-note-field { min-width:0; }
body.feika-ui :is(#adminView,.admin-review-dialog) .review-note-field textarea { box-sizing:border-box; width:100%; min-height:104px; max-height:240px; overflow:auto; resize:vertical; font:inherit; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
body.feika-ui :is(#adminView,.admin-review-dialog) .review-note-feedback { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin-top:6px; }
body.feika-ui :is(#adminView,.admin-review-dialog) .review-note-feedback .fine { min-width:0; margin:0; color:var(--ink-2,var(--muted)); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
body.feika-ui :is(#adminView,.admin-review-dialog) .review-note-feedback .fine:first-child { flex:0 0 auto; font-variant-numeric:tabular-nums; }
body.feika-ui :is(#adminView,.admin-review-dialog) .review-note-field.has-error textarea { border-color:var(--danger); }
body.feika-ui :is(#adminView,.admin-review-dialog) :is(.review-note-field.has-error,.review-note-feedback.has-error) .fine { color:color-mix(in srgb,var(--danger) 60%,var(--text)); }
body.feika-ui .admin-review-dialog .review-dialog-note-feedback { flex:0 0 auto; margin:0; padding:8px 16px; border-top:1px solid var(--line); background:var(--panel-2); }
body.feika-ui .admin-review-dialog #adminReviewDialogWarning { box-sizing:border-box; flex:0 0 auto; max-height:88px; overflow:auto; margin:8px 16px; padding:10px 12px; font-size:13px; line-height:1.5; border:1px solid var(--danger); border-left-width:4px; border-radius:var(--radius-control); color:var(--text); background:var(--panel-2); }
@media(max-height:420px) {
  body.feika-ui .admin-review-dialog :is(header,footer) { padding:8px 12px; gap:8px; }
  body.feika-ui .admin-review-dialog #adminReviewDialogTarget { max-height:48px; margin-top:4px; }
  body.feika-ui .admin-review-dialog .admin-review-dialog-body { padding:8px 12px; }
  body.feika-ui .admin-review-dialog .review-dialog-note-feedback { padding:6px 12px; }
  body.feika-ui .admin-review-dialog #adminReviewDialogWarning { max-height:60px; margin:4px 12px; padding:6px 10px; }
}
html[data-platform-theme^=painted] body.feika-ui :is(#adminView .review-status,#adminView .submission,#adminView .announcement,.admin-review-dialog) { background-image:linear-gradient(var(--material-panel-wash),var(--material-panel-wash)),var(--material-canvas); background-size:auto,560px auto; background-blend-mode:var(--material-blend); }
html[data-platform-theme^=painted] body.feika-ui #adminView .submission.active { background-image:linear-gradient(var(--material-active-wash),var(--material-active-wash)),var(--material-canvas)!important; background-blend-mode:var(--material-blend)!important; }
@media(max-width:980px) { body.feika-ui #adminView .admin-grid { grid-template-columns:minmax(0,1fr); } }
.store-skeleton { width:100%; }
body.feika-ui #storeLoadingState { --ui-state-padding:12px 0; }
#storeLoadingState.hide { display:none; }
#storeLoadingState.waiting-context :is(.store-skeleton,.ui-progress) { display:none; }
#storeView.is-searching #storeLoadingState .skeleton-hero{ display:none; }
.store-search-context { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:8px 0 24px; }
.store-search-context > div { display:flex; flex-direction:column; gap:8px; min-width:0; }
.store-search-context span { color:var(--muted); font-size:12px; }
.store-search-context strong { font-size:24px; font-weight:600; overflow-wrap:anywhere; }
.store-search-context button { flex:none; }
#storeView.is-searching .store-section-head > div:first-child { display:none; }
#storeView.is-searching .store-section-head:has(> div:only-child) { display:none; }
body.feika-ui.feika-account #loadingView { display:block; width:100%; min-height:440px; padding:20px 0; }
body.feika-ui.feika-account #loadingView.hidden { display:none; }
body.feika-ui.feika-account .loading-panel { width:100%; padding:16px 0 28px; border:0; background:transparent; box-shadow:none; }
body.feika-ui.feika-account .loading-copy h2 { font-size:18px; }
.account-skeleton { width:100%; margin-top:24px; }
.account-skeleton > .skeleton-title { width:180px; }
.account-skeleton .skeleton-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }

@media(max-width:760px) { .store-search-context strong {font-size:20px} }
    & #storeView .home-discover-grid { display:grid; grid-template-columns:minmax(0,1fr); margin-bottom:26px; }
    & #storeView #homeCategorySection { min-width:0; margin:0; }

/* Store types share one selection style across desktop navigation and the phone drawer. */

body.feika-ui.feika-platform .platform-user-actions .ui-control { position:relative; }
body.feika-ui.feika-platform .platform-user-actions { display:flex; align-items:center; justify-self:end; flex:none; gap:6px; min-width:0; }
body.feika-ui.feika-platform .platform-user-actions .ui-control.icon svg { display:block; width:20px; height:20px; flex:none; }
body.feika-ui.feika-platform .platform-user-actions .nav-badge { position:absolute; top:-1px; right:-3px; margin:0; }
body.feika-ui.feika-platform .platform-user-actions [data-view=accountView] { max-width:160px; margin-left:4px; }
body.feika-ui.feika-platform #platformAccountName { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(max-width:760px) {
  body.feika-ui.feika-platform:has(.platform-user-actions) .topbar-inner { grid-template-columns:44px minmax(0,1fr) auto; gap:4px; }
  body.feika-ui.feika-platform .platform-user-actions { grid-column:3; grid-row:1; gap:0; }
  body.feika-ui.feika-platform .platform-user-actions [data-view=accountView] { max-width:72px; margin-left:1px; --ui-control-padding:8px 5px; }
  body.feika-ui.feika-platform:has(.platform-user-actions) .topbar .status-stack { grid-column:1 / -1; grid-row:2; justify-self:end; width:auto; padding-bottom:5px; }
  body.feika-ui.feika-platform:has(.platform-user-actions) .mobile-page-title { font-size:14px; text-align:left; }
}




.platform-theme-intro { display: none; }
html.account-under-client-chrome body.feika-ui.feika-account { padding-top:var(--platform-client-top); }
body.feika-ui .platform-appearance-switch { width:220px; max-width:100%; min-width:0; flex:none; }
body.feika-ui .platform-appearance-panel { margin-bottom: 24px; }
.platform-theme-swatch { display: block; position: relative; width: 43px; height: 35px; flex: none; border: 1px solid #d4d4d8; border-radius: 4px; background: #fafafa; }
.platform-theme-swatch::before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; height: 5px; background: #e4e4e7; }
.platform-theme-swatch::after { content: ""; position: absolute; bottom: 6px; right: 5px; width: 12px; height: 5px; background: #27272a; border-radius: 1px; }
.platform-theme-swatch.feika { border-color: #2a2e2c; background: #0f1110; }
.platform-theme-swatch.feika::before { height: auto; top: 0; left: 0; bottom: 0; width: 10px; background: #202321; }
.platform-theme-swatch.feika::after { background: #3ddc97; }
.platform-theme-swatch.painted-light { background:#f9f9f9 url('/static/media/ui/canvas-light-v2.webp') center/90px; border-color:#dddddd; }
.platform-theme-swatch.painted-light::after { background:#386974; }
.platform-theme-swatch.painted-dark { background:#202020 url('/static/media/ui/canvas-dark-v2.webp') center/90px; background-blend-mode:luminosity; border-color:#404040; }
.platform-theme-swatch.painted-dark::after { background:#e6d39b; }

/* One component system for both appearances. The embedded publisher owns its palette. */
html:is([data-platform-theme=light],[data-platform-theme=feika],[data-platform-theme=painted-light],[data-platform-theme=painted-dark],[data-platform-theme=paper-adventure]):not(.publication-embedded) {
  --obsidian-sidebar:200px; --obsidian-inset:28px; --app-toolbar-height:54px;
  --radius-control:10px; --radius-card:16px; --radius-dialog:20px;
  --collection-shadow:var(--shadow-card); --collection-hover-shadow:var(--shadow-hover);
  --app-chrome:var(--bg); --glass-panel:var(--surface); --glass-edge:var(--line);
  --app-chrome-light:linear-gradient(180deg,var(--surface),var(--bg));
  --glass-toolbar:var(--panel); --app-canvas-light:none;
  --user-illustration-opacity:.56; --decor-opacity:.8; --decor-blend:normal; --decor-filter:none;
  --nav-active:linear-gradient(110deg,#334f7b,#3b5d91); --nav-on-active:#fff;
  --button-primary:linear-gradient(115deg,#2878f5,#0860f5);
  --promo-bg:#293f66; --promo-bg-2:#456ca7; --promo-ink:#f7faff; --promo-muted:#d7e6ff;
  --button-face:linear-gradient(180deg,var(--surface),var(--panel-2));
  color-scheme:var(--platform-color-scheme,light);
  body.feika-ui { background:var(--app-canvas-light),var(--bg); color:var(--text); font-size:14px; line-height:1.6; }
  body.feika-ui::before { display:none; }
  body.feika-ui :is(h1,h2,h3) { color:var(--text); font-weight:650; }
  body.feika-ui :is(button,input,select,textarea) { font:inherit; font-size:13px; border-radius:var(--radius-control); }
  body.feika-ui :is(input,select,textarea) { color:var(--text); background:var(--surface); border-color:var(--line); color-scheme:var(--platform-color-scheme,light); }
  body.feika-ui :is(input,textarea)::placeholder { color:var(--muted); }
  body.feika-ui :is(input,select,textarea):focus { border-color:var(--brand); box-shadow:var(--focus-ring); }
  body.feika-ui button { font-weight:550; box-shadow:none; transition:background-color .18s,border-color .18s,box-shadow .18s,transform .18s; }
  body.feika-ui :is(button.primary,button:not([class]):not(.tabs button):not([data-platform-theme-choice])):not([data-ui-control]):not(.ui-control) { color:var(--on-brand); background:var(--button-primary); border:1px solid transparent; box-shadow:0 3px 10px color-mix(in srgb,var(--brand) 15%,transparent); }
  body.feika-ui :is(button.primary,button.secondary):active:not(:disabled) { transform:translateY(1px); }
  body.feika-ui :is(button,a,[tabindex]):focus-visible { outline:2px solid var(--brand); outline-offset:3px; box-shadow:var(--focus-ring); }
  body.feika-ui :is(.panel,.card,.intro-panel,.config-card,.user-shell) { border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); color:var(--text); box-shadow:var(--shadow-card); }
  body.feika-ui :is(.panel-head,.section-head,.section-banner) { border-color:var(--line-soft); }
  body.feika-ui :is(.panel-head,.panel-body) { padding:18px 20px; }
  body.feika-ui .pill:not(.ui-control) { background:var(--soft); color:var(--muted); border:0; border-radius:7px; padding:3px 8px; font-size:11px; font-weight:500; }
  body.feika-ui .pill-jump { color:var(--brand); background:var(--brand-soft); }
  body.feika-ui .modal-backdrop { background:var(--scrim); backdrop-filter:blur(7px); }
  body.feika-ui .modal-dialog { max-height:calc(var(--platform-viewport-height) - 32px); overflow:auto; }
  body.feika-ui :is(.empty,.gp-empty-state) { border-radius:var(--radius-card); background:var(--panel-2); }
  body.feika-ui :is(.muted,.fine,.hint,.meta,.desc,.field label):not(.ui-muted):not(:where(.ui-form .ui-field-label)) { color:var(--muted); }
  body.feika-ui :is(.empty,.gp-empty-state,.loading-state) { min-width:0; overflow-wrap:anywhere; }
  body.feika-ui :is(.cover,.cover.sm) { border-color:var(--line); background-color:var(--soft); }
  body.feika-ui :is(.cover,.cover.sm) img { transition:transform .32s ease; }
  @media(hover:hover) { body.feika-ui :is(.game-card,.mini-feature):hover .cover img { transform:scale(1.035); } }

  body.feika-ui.feika-platform {
    & .shell { max-width:none; }
    & :is(#developerView,#settingsView,#userView,#friendsView) :is(.panel,.dev-sidebar,.dev-workspace,.tweet-composer,.friends-shell) { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow-card); }
    & :is(#developerView,#settingsView,#userView,#friendsView) :is(.panel-head,.dev-workspace-head,.social-sticky-head,.timeline-head) { background:transparent; border-color:var(--line-soft); }
    & #developerView .dev-workspace-head { background:var(--panel-2); }
    & #developerView .dev-pane { background:var(--surface); }
    & #settingsView .panel-head { padding:18px 22px 0; border:0; }
    & #userView .user-space-profile { position:relative; isolation:isolate; padding:20px 22px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(120deg,var(--surface),var(--brand-soft)); overflow:hidden; box-shadow:var(--shadow-card); }
    & #userView .user-space-profile::before { content:""; position:absolute; right:0; bottom:0; width:55%; height:100%; z-index:-1; background:url('/static/media/ui/creator-world.webp') right bottom / auto 75% no-repeat; opacity:var(--user-illustration-opacity); pointer-events:none; }
    & #userView .user-home-head { margin-bottom:18px; padding:0; border:0; }
    & #userView .user-space-profile-main { padding:0; }
    & #userView .user-space-content { margin-top:20px; gap:20px; grid-template-columns:minmax(0,1fr); }
    & #userView :is(.user-social-page,.view-back-row) { width:100%; max-width:none; }
    & #friendsView .friends-list-panel,& #friendsView .friends-chat-panel { border:0; background:var(--surface); }
    & #friendsView .friends-list-panel { border-right:1px solid var(--line); }

    & .platform-theme-intro { display:none; }
    & .view > .section-head h1 { font-size:26px; letter-spacing:-.035em; }
    & .view > .section-head p { margin-top:6px; font-size:13px; }
    & .section-head h2,& .home-row-head h2 { font-size:19px; letter-spacing:-.025em; }












    & #libraryCount { color:var(--muted); font-size:13px; }

    & #librarySyncStatus { margin:0 0 12px; color:var(--text); overflow-wrap:anywhere; }
& #librarySyncStatus.hide { display:none!important; }






















    & #storeView .feature-eyebrow { color:#e6eeeaf0; font-size:12px; font-weight:600; order:0; }

    & #storeView #homeCategorySection .home-row-head { margin:0 0 12px; }
    & #storeView #categoryTabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; padding:0; border:0; }
    & #storeView #categoryTabs .rank-tab { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; }
    & #storeView #categoryTabs .rank-tab::before { content:""; width:38px; height:38px; flex:none; background-image:url('/static/media/ui/category-icons.webp'); background-size:264px 44px; background-position:100% 0; background-repeat:no-repeat; }
    & #storeView #categoryTabs [data-category-icon=gamepad]::before { background-position:0 0; }
    & #storeView #categoryTabs [data-category-icon=leaf]::before { background-position:20% 0; }
    & #storeView #categoryTabs [data-category-icon=tools]::before { background-position:40% 0; }
    & #storeView #categoryTabs [data-category-icon=cube]::before { background-position:60% 0; }
    & #storeView #categoryTabs [data-category-icon=people]::before { background-position:80% 0; }
    & #storeView.is-searching #homeCategorySection { display:none; }
    & #storeView .home-row { margin:24px 0; }
    & #storeView .rank-board { padding:6px; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-card); }
    & #storeView .rank-board-head { gap:14px; }
    & #storeView .rank-row { position:relative; border:0; border-radius:11px; background:transparent; color:var(--text); min-height:76px; padding:10px 12px; }
    & #storeView .rank-row.active { background:color-mix(in srgb,var(--brand) 9%,var(--brand-soft)); }
    /* The previewed row carries an accent bar so it never reads as a plain hover. */
    & #storeView .rank-row::before { content:""; position:absolute; inset-block:16px; inset-inline-start:0; width:3px; border-radius:0 3px 3px 0; background:var(--brand); opacity:0; scale:1 .3; pointer-events:none; }
    & #storeView .rank-row.active::before { opacity:1; scale:1 1; }
    & #storeView .rank-row:hover:not(.active) { background:var(--hover-bg); }
    & #storeView .rank-row .rank-no { font-weight:650; font-variant-numeric:tabular-nums; }
    & #storeView .rank-row.active .rank-no { color:var(--brand); }
    & #storeView .rank-row.active .rank-row-title { color:var(--brand); }
    & #storeView .rank-row .cover.sm { border:0; border-radius:8px; }
    & #storeView .rank-row-sub { display:flex; align-items:baseline; gap:10px; min-width:0; }
    & #storeView .rank-row-author { max-width:32%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
    & #storeView .rank-row-line { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
    & #storeView .rank-preview { padding:16px; border:0; border-left:1px solid var(--line-soft); border-radius:0; background:transparent; }
    & #storeView .rank-preview .toolbar button { flex:1; width:100%; }
    & #storeView .store-catalog-section { margin-top:28px; padding-top:0; border-top:0; min-width:0; }
    & #storeView .store-section-head { margin:0 0 14px; padding:0; border:0; }
    & #storeView #homeTagSection { margin:0 0 18px; padding:0; border:0; }
    & #storeView #storeTagBar { margin:0; gap:8px; }
    & #storeView .store-filters { gap:10px; }
    & #storeView .store-tagbar { margin:16px 0; }
    & #storeView .catalog-grid { gap:16px; }
    & #storeView .game-card { border:1px solid var(--line); border-radius:15px; background:var(--surface); box-shadow:var(--shadow-card); }
    & #storeView .game-card > .cover { aspect-ratio:16 / 9; min-height:0; margin:4px 4px 0; border:0; border-radius:11px; }
    & #storeView .game-card > .cover.has-image::after { display:none; }
    & #storeView .game-card > .cover.media-placeholder { display:grid; place-items:center; background:linear-gradient(120deg,var(--panel-2),var(--brand-soft)); }
    & #storeView .game-card > .cover.media-placeholder::before { content:""; width:30px; aspect-ratio:1.25; background:var(--dim); opacity:.5; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Crect x='1' y='1' width='28' height='22' rx='3' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='10' cy='7' r='2'/%3E%3Cpath d='m3 21 8-9 5 5 4-4 7 8Z'/%3E%3C/svg%3E") center/contain no-repeat; }
    & #storeView .game-card-body { flex:1 1 auto; min-height:0; padding:14px; gap:9px; }
    /* Metadata sits at the card bottom, so tag rows still align when a card has no capability badges. */
    & #storeView .game-card .card-metadata:has(> .card-capabilities:empty) { grid-template-rows:22px; min-height:22px; }
    & #storeView .game-card .card-metadata:has(> .card-capabilities:empty) > .card-capabilities { display:none; }
    & #storeView .game-card .card-metadata:has(> .card-capabilities:empty) > .card-tags { grid-row:1; }
    & #storeView .card-title { min-height:0; color:var(--text); font-size:16px; font-weight:650; line-height:1.45; }
    & #storeView .card-row { color:var(--muted); font-size:12px; }
    & #storeView .mini-feature { background:var(--surface); border-color:var(--line); border-radius:14px; box-shadow:var(--shadow-card); }

    /* Creator, community and conversation surfaces reuse the same materials. */
    & :is(.developer-page-toolbar,.user-hero) { position:relative; isolation:isolate; }
    & #developerView .developer-page-toolbar::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url('/static/media/ui/creator-world.webp') right center / auto 100% no-repeat; opacity:var(--decor-opacity); }
    & :is(.dev-sidebar,.dev-workspace,.dev-workspace-head,.dev-pane,.tweet-composer,.tweet-item,.tweet-reply-item,.friends-shell,.friends-list-panel,.friends-chat-panel) { background:var(--surface); color:var(--text); border-color:var(--line); }
    & #developerView .dev-shell { gap:18px; }
    & #developerView .dev-sidebar { border-radius:16px; overflow:hidden; box-shadow:var(--shadow-card); }
    & #developerView .dev-workspace { border-radius:16px; overflow:hidden; box-shadow:var(--shadow-card); }
    & #developerView .dev-workspace-head { padding:20px; background:var(--panel-2); border-bottom:1px solid var(--line); }
    & #developerView .dev-workspace-title strong { font-size:18px; }
    & #developerView .dev-pane { padding:22px; }
    & :is(.dev-media-status,.upload-drop,.dev-readiness-card,.readiness-item) { border-color:var(--line); border-radius:12px; background:var(--panel-2); color:var(--muted); }
    & #developerView .upload-drop { border-style:dashed; }
    & #developerView .upload-drop:hover { border-color:var(--brand); background:var(--brand-soft); }
    & :is(.tweet-body,.tweet-reply-body,.tweet-author) { color:var(--text); }
    & :is(.tweet-meta,.tweet-handle,.tweet-reply-meta) { color:var(--muted); }
    & :is(.tweet-item,.tweet-composer) { border-radius:14px; box-shadow:var(--shadow-card); }
    & #userView .twitter-profile-cover { background-color:var(--brand-soft); }
    & :is(.social-sticky-head,.timeline-head) { background:var(--surface); border-color:var(--line); }
    & #friendsView .friends-shell { gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-card); }
    & #friendsView .friends-list-panel { border:0; border-right:1px solid var(--line); }
    & #friendsView .friends-chat-panel { border:0; }
    & #userView :is(.tweet-item,.tweet-reply-item) { background:transparent; box-shadow:none; border-radius:0; border-width:0 0 1px; }
    & #friendsView .friends-page > .panel { background:transparent; box-shadow:none; border-radius:0; }
    & #settingsView > .panel { margin-bottom:18px; }
    & #settingsView > .section-head { padding:8px 0 16px; }
    & #settingsView > .panel .panel-body { padding:22px; }
  }

  body.feika-ui.feika-account {
    --account-page-inset:28px;
    & .app-shell { width:min(1560px,100%); margin:0 auto; padding:24px var(--account-page-inset) 28px; }
    & :is(.brand,.account-hero) { position:relative; isolation:isolate; }
    & .brand > div:last-child { position:relative; min-width:0; }
    & .brand { display:flex; align-items:center; gap:12px; }
    & .brand h1 { margin:0; font-size:26px; line-height:1.3; font-weight:750; }
    & #pageSubtitle { margin-top:5px; font-size:12px; line-height:1.6; color:var(--muted); }
    & .brand-badge { display:grid; place-items:center; flex:none; width:36px; height:36px; border:0; border-radius:12px; background:var(--brand-soft); color:var(--brand); box-shadow:none; }
    & .side-nav { gap:4px; padding:6px; margin:0 0 16px; min-height:46px; border:1px solid var(--line-soft); border-radius:13px; background:var(--surface); box-shadow:var(--shadow-card); }
    & .side-nav .nav-item { position:relative; gap:7px; padding:9px 13px; font-size:12px; font-weight:500; border:0; border-radius:8px; color:var(--muted); background:transparent; box-shadow:none; text-decoration:none; }
    & .side-nav .nav-item.active { color:var(--ink-1); background:var(--brand-soft); font-weight:650; }
    & .side-nav .nav-item.active::after { display:block; width:auto; margin:0; content:""; position:absolute; left:13px; right:13px; bottom:1px; height:2px; border-radius:2px; background:var(--brand); }
    & .side-nav .nav-item:hover { color:var(--brand); background:var(--hover-bg); }
    & .side-nav .nav-item svg { width:15px; height:15px; }
    & #accountTitle { font-size:19px; line-height:1.4; font-weight:700; color:var(--text); }
    & :is(#accountConnectionHint,#loadingText,.stat .label,.stat .meta,.modal-panel label,.recharge-summary) { color:var(--ink-2); }
    & :is(.message,.payment-result,.modal-message).err { color:color-mix(in srgb,var(--danger) 60%,var(--text)); overflow-wrap:anywhere; }
    & #accountChips { gap:7px; margin-top:2px; }
    & #accountChips .chip.id { display:inline-flex; align-items:center; gap:10px; max-width:100%; padding:5px 10px; background:var(--soft); border:0; border-radius:7px; color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
    & .dashboard { display:block; }
    & .stat .label { color:var(--muted); font-size:12px; }
    & .stat .metric-number { display:flex; align-items:baseline; gap:7px; margin:5px 0 4px; flex-wrap:wrap; }
    & .stat .value { margin:0; font-size:25px; font-weight:650; line-height:1.3; letter-spacing:-.025em; color:var(--text); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
    & .stat .meta { margin:4px 0 0; font-size:11px; line-height:1.65; color:var(--muted); }
    & :is(.transaction-list,.ledger-list) { padding:0; }
    & :is(.txn-amount,.delta.pos) { color:var(--ok); }
    & :is(.playtime-card .label,.playtime-card .meta,.sub2api-group-option span,.sub2api-group-option em,.inventory-tab) { color:var(--ink-2); overflow-wrap:anywhere; }
    & :is(.playtime-card,.cf-card,.cf-project-card,.sub2api-group-card) { border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--text); box-shadow:var(--shadow-card); }
    & :is(.inventory-tab,.playtime-tab) { color:var(--muted); border-radius:9px; }
    & :is(.inventory-tab,.playtime-tab).active { color:var(--text); background:var(--brand-soft); border-color:transparent; }
    & #playtimeView > .panel.section { padding:20px; min-width:0; }
    & #playtimeView .playtime-card { padding:18px; min-width:0; }
    & #playtimeView :is(.playtime-card .meta) { min-width:0; overflow-wrap:anywhere; }
    & #gameSystemView .play-progress-panel { background:transparent; border:0; box-shadow:none; }
    & :is(.playtime-game,.cf-task,.cf-proposal,.cf-message,.sub2api-group-detail) { color:var(--text); background:var(--panel-2); border-color:var(--line); border-radius:11px; }
    & .sidebar .help-card { padding:18px 0; border:0; border-radius:0; }
    & .footer { color:var(--muted); font-size:11px; }
  }

  @media(min-width:761px) {
    &:has(body.feika-platform) { height:100%; overflow:hidden; }
    body.feika-ui.feika-platform #storeView .rank-board { grid-template-columns:minmax(0,1fr) minmax(240px,25%); }
    body.feika-ui.feika-platform {
      height:var(--platform-viewport-height); overflow:hidden;
      & .shell { display:block; width:auto; height:var(--platform-viewport-height); min-height:0; padding:0; margin:0 0 0 var(--obsidian-sidebar); overflow:hidden; }
      & .shell > main { width:100%; max-width:none; height:calc(var(--platform-viewport-height) - var(--app-toolbar-height)); min-height:0; margin:var(--app-toolbar-height) 0 0; padding:0; overflow:hidden; }
      & .shell > main > .view { height:100%; min-height:0; max-width:none; padding:24px var(--obsidian-inset) 36px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-gutter:stable; scroll-padding-top:16px; }
      & .shell > main > #accountView { padding:0; overflow:hidden; scrollbar-gutter:auto; }
      & #accountCenterFrame { display:block; width:100%; height:100%; min-height:0; border:0; background:var(--bg); }
      & .shell > main > #storeView { padding-top:12px; }
      & .mobile-page-title { position:fixed; inset:0 0 auto var(--obsidian-sidebar); display:flex; align-items:center; height:var(--app-toolbar-height); padding:0 var(--obsidian-inset); border-bottom:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:13px; font-weight:600; }
      &:has(.platform-user-actions) .mobile-page-title { padding-right:285px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      & .platform-user-actions { position:fixed; top:0; right:var(--obsidian-inset); z-index:1; height:var(--app-toolbar-height); max-width:270px; }
      & > .shell > .topbar { position:fixed; inset:0 auto 0 0; width:var(--obsidian-sidebar); height:var(--platform-viewport-height); margin:0; padding:0 10px 16px; border:0; border-right:1px solid var(--line-soft); background:var(--app-chrome-light); box-shadow:none; z-index:30; }
      & .topbar-inner { display:flex; flex-direction:column; align-items:stretch; height:100%; min-height:0; max-width:none; gap:0; }
      & .topbar .brand { display:flex; align-items:center; min-height:var(--app-toolbar-height); padding:0 8px; border-bottom:1px solid var(--line-soft); gap:10px; font-size:13px; color:var(--ink-2); }
      & .topbar .brand-mark { background:transparent; color:var(--ink-2); font-size:22px; box-shadow:none; }
      & .topbar .tabs { flex:1; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:8px; min-height:0; padding:15px 0 0; overflow-y:auto; }
      & .topbar .tabs .ui-nav::before { content:""; width:17px; height:17px; flex:none; background:currentColor; -webkit-mask:var(--nav-icon) center/contain no-repeat; mask:var(--nav-icon) center/contain no-repeat; }
      & .topbar .tabs > .ui-nav[data-view=developerView] { margin-top:14px; }
      & .topbar .tabs > .ui-nav[data-view=settingsView] { margin-top:0; }





      & .topbar .status-stack { display:none; }
      & .platform-menu-toggle,& .mobile-drawer-head { display:none; }


      & .dev-sidebar { position:sticky; top:0; max-height:calc(var(--platform-viewport-height) - 110px); overflow-y:auto; }
      & #settingsView > .panel { max-width:1100px; }
      & #categoryTabs { gap:8px; }
    }
    body.feika-ui.feika-account {
      & .sidebar { display:contents; }
      & .sidebar-card,& .sidebar-footer,& .sidebar .brand,& #languageSwitch { display:none; }
      & .page { display:contents; }
      & .app-shell { display:flex; flex-direction:column; width:min(1560px,100%); padding:24px var(--account-page-inset) 28px; margin:0 auto; min-height:var(--platform-viewport-height); }
      & .page > .topbar { order:-3; }
      & .page { display:contents; }
      & .sidebar .help-card { order:20; margin-top:24px; }
      & .side-nav { order:-2; display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; }
      & .side-nav .nav-item:nth-child(n) { flex:0 0 auto; width:auto; min-width:0; margin-top:0; min-height:34px; }
      & .side-nav .nav-item[data-i18n-title=securitySettings] { margin-left:auto; }
      & .side-nav .nav-item[data-view=crowdfunding] { display:none; }
      & .brand { display:flex; align-items:center; gap:12px; min-width:0; }
    }
  }
  @media(max-width:1200px) {
    --obsidian-sidebar:184px; --obsidian-inset:22px;
    body.feika-ui.feika-platform {





    }
    body.feika-ui.feika-account :is(.stats,.stats.creator-revenue-hidden) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  }
  @media(max-width:960px) {
    body.feika-ui.feika-platform {
      & #storeView .rank-board { grid-template-columns:minmax(0,1fr); }
      & #storeView .rank-preview { border-left:0; border-top:1px solid var(--line-soft); }

      & #storeView #categoryTabs { grid-template-columns:repeat(3,minmax(0,1fr)); }





    }
  }
  @media(max-width:760px) {
    body.feika-ui.feika-platform {
      & #storeCatalogSection { order:1; }
      & .topbar-inner { grid-template-columns:44px minmax(0,1fr) auto; }
      & .topbar .status-stack { flex-wrap:nowrap; }
      & #storeView .home-discover-grid { order:-1; }
      & :is(#libraryView,#storeView,#developerView,#friendsView,#settingsView,#userView) { padding:18px 16px 28px; box-sizing:border-box; }
      & .app-shell { padding-inline:14px; }















      & #storeView #categoryTabs { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
      & .catalog-grid { gap:12px; }
      & .game-card-body { padding:12px; }
      & .card-title { font-size:14px; }
      & .rank-row-sub { flex-direction:column; gap:2px; }
      & .rank-row-author { max-width:100%; }
      & .rank-preview { border:0; border-top:1px solid var(--line); }
      & .dev-pane { padding:16px; }
      & .friends-shell { border-radius:14px; }
      & .view > .section-head h1 { font-size:24px; }
    }
    body.feika-ui.feika-account {
      --account-page-inset:16px;
      & #playtimeView > .panel.section { padding:16px; }
      & .page > .topbar { display:flex; flex-wrap:wrap; }
      & .page > .topbar .brand { flex:1 0 100%; }
      & .page > .topbar .top-actions { max-width:100%; margin-left:0; }
      & #sessionState { overflow-wrap:anywhere; }
      & .sidebar { border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; }
      & :is(.stats,.stats.creator-revenue-hidden) > .stat:first-child .stat-actions,& .account-identity-status .stat-actions { position:static; margin-top:10px; }
      & :is(.stats,.stats.creator-revenue-hidden) > .stat:first-child .meta,& .account-identity-status .meta { max-width:none; }

      & .app-shell { padding:16px; }
      & #accountTitle { font-size:17px; }
      & .stat .value { font-size:21px; }
    }
  }
  @media(max-width:430px) {
    body.feika-ui.feika-platform {



    }
    body.feika-ui.feika-account {
      & :is(.stats,.stats.creator-revenue-hidden) { grid-template-columns:1fr; }
    }
  }
}

@media(min-width:761px){html:is([data-platform-theme=light],[data-platform-theme=feika],[data-platform-theme=painted-light],[data-platform-theme=painted-dark],[data-platform-theme=paper-adventure]):not(.publication-embedded) body.feika-ui.feika-platform {
    & .ui-nav:is([data-view="storeView"],[data-store-channel="platform"]) { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10a3 3 0 0 1 3 2.4l1.2 6.7a2.1 2.1 0 0 1-3.5 1.9L15 16H9l-2.7 2a2.1 2.1 0 0 1-3.5-1.9L4 9.4A3 3 0 0 1 7 7Z'/%3E%3Cpath d='M7.5 10v5M5 12.5h5'/%3E%3Ccircle cx='16' cy='11' r='.6'/%3E%3Ccircle cx='18' cy='14' r='.6'/%3E%3C/svg%3E"); }
    & .ui-nav[data-store-channel="ugc"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 8 4.5v9L12 21l-8-4.5v-9L12 3Zm0 18v-9M4 7.5l8 4.5 8-4.5M8 5.2l8 4.6v4.4'/%3E%3C/svg%3E"); }
    & .ui-nav[data-view="libraryView"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M3 4h5v16H3zM10 4h5v16h-5zM18 4l3 16'/%3E%3C/svg%3E"); }
    & .ui-nav[data-view="userView"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M4 21v-3a8 8 0 0 1 16 0v3'/%3E%3C/svg%3E"); }
    & .ui-nav[data-view="friendsView"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Cpath d='M2 21v-3a6 6 0 0 1 12 0v3M16 5a3 3 0 0 1 0 6M18 14a5 5 0 0 1 4 5'/%3E%3C/svg%3E"); }
    & .ui-nav[data-view="accountView"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='15' rx='2'/%3E%3Cpath d='M3 10h18M15 15h3'/%3E%3C/svg%3E"); }
    & .ui-nav[data-view="developerView"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='m12 2 9 5v10l-9 5-9-5V7zm0 20V12M3 7l9 5 9-5'/%3E%3C/svg%3E"); }
    & .ui-nav[data-view="settingsView"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='m9 3-1 3-3 1-2 5 2 5 3 1 1 3h6l1-3 3-1 2-5-2-5-3-1-1-3z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
    & .ui-nav:is([data-view="packageView"],[data-view="currentPackagesView"]) { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M3 7h18v14H3zM2 3h20v4H2zM9 12h6'/%3E%3C/svg%3E"); }
}}
/* Theme differences are tokens only, not a second implementation of each page. */
html[data-platform-theme=light]:not(.publication-embedded) {
  --platform-color-scheme:light;
  --brand:#0860f5; --brand-hover:#0754d9; --brand-soft:#edf4ff;
  --line:#dfe9f7; --line-soft:#eaf0f8; --hover-bg:#f0f5fd;
  --app-canvas-light:radial-gradient(ellipse at 83% 0%,#e8f1ff80,transparent 42%),radial-gradient(ellipse at 0% 60%,#eef1ff55,transparent 45%);
}
/* Original dark: neutral graphite surfaces (no blue cast) with a single mint accent. */
html:root[data-platform-theme=feika]:not(.publication-embedded) {
  color-scheme:dark; --platform-color-scheme:dark;
  --fui-background:150 6% 6%;
  --fui-foreground:140 7% 93%;
  --fui-card:150 4% 10%;
  --fui-card-foreground:140 7% 93%;
  --fui-popover:140 4% 13%;
  --fui-popover-foreground:140 7% 93%;
  --fui-primary:154 69% 55%;
  --fui-primary-foreground:150 54% 5%;
  --fui-secondary:140 4% 13%;
  --fui-secondary-foreground:150 5% 80%;
  --fui-muted:140 4% 13%;
  --fui-muted-foreground:154 4% 63%;
  --fui-accent:152 28% 12%;
  --fui-accent-foreground:154 69% 55%;
  --fui-border:150 5% 17%;
  --fui-input:150 5% 25%;
  --fui-ring:154 69% 55%;
  --bg:#0f1110; --bg-2:#131514; --surface:#181a19; --panel:#181a19; --panel-2:#202321; --soft:#272a28;
  --text:#ecefed; --muted:#9ca3a0; --dim:#727a76; --ink-2:#c9cfcc;
  --line:#2a2e2c; --line-soft:#212423; --line-strong:#3d4340;
  --brand:#3ddc97; --brand-dark:#2fbf80; --brand-hover:#5ce6a9; --brand-soft:#ffffff0f; --on-brand:#06140d;
  --hover-bg:#222624; --teal:#2dd4bf; --sky:#7dd3fc; --blue:#7dd3fc;
  --ok:#3ddc97; --green:#3ddc97; --warn:#f5c15b; --amber:#f5c15b; --danger:#ff7a6e; --red:#ff7a6e;
  --success-soft:#12261c; --warning-soft:#2b2412; --danger-soft:#2e1714;
  --shadow-card:inset 0 1px 0 #ffffff08,0 8px 24px #0006;
  --shadow-hover:inset 0 1px 0 #ffffff0d,0 14px 32px #0007;
  --shadow-button:inset 0 1px 0 #ffffff26,0 3px 10px #0005;
  --shadow-dialog:inset 0 1px 0 #ffffff0d,0 28px 90px #000a; --shadow:#0009;
  --scrim:#060807db; --focus-ring:0 0 0 3px #3ddc9740;
  --nav-active:none; --nav-on-active:var(--text);
  --button-primary:linear-gradient(115deg,#4be3a2,#2fcf88);
  --button-face:linear-gradient(180deg,#242826,#1d201f);
  --promo-bg:#15281f; --promo-bg-2:#101a15; --promo-ink:#e3fbef; --promo-muted:#a3c4b4;
  --user-illustration-opacity:.08; --decor-opacity:.07; --decor-blend:screen; --decor-filter:grayscale(1);
  --app-chrome-light:linear-gradient(180deg,#151716,#121413);
  --app-canvas-light:none;
}
/* Light belongs to edges and active controls; content and layout keep their roles. */
html:root[data-platform-theme=feika]:not(.publication-embedded) body.feika-ui {
  & :is(.panel,.card,.config-card,.modal-dialog) { background-image:linear-gradient(145deg,#ffffff05,transparent 55%); }
  & button.primary:not(:disabled) { box-shadow:inset 0 1px 0 #fff5,0 3px 12px #3ddc971f; }
  & button.primary:hover:not(:disabled) { box-shadow:inset 0 1px 0 #fff7,0 0 24px #3ddc9733; }
  &.feika-platform {
    & #storeView :is(.game-card,.mini-feature):hover { border-color:var(--line-strong); }

  }
}
/* Neutral graphite and ivory, shared with the native dark palette. */
html:root[data-platform-theme=painted-dark]:not(.publication-embedded) {
  color-scheme:dark; --platform-color-scheme:dark;
  --fui-background:0 0% 7%; --fui-foreground:43 16% 92%;
  --fui-card:0 0% 11%; --fui-card-foreground:43 16% 92%;
  --fui-popover:0 0% 16%; --fui-popover-foreground:43 16% 92%;
  --fui-primary:43 20% 88%; --fui-primary-foreground:40 9% 13%;
  --fui-secondary:0 0% 16%; --fui-secondary-foreground:40 6% 80%;
  --fui-muted:0 0% 16%; --fui-muted-foreground:0 0% 68%;
  --fui-accent:0 0% 19%; --fui-accent-foreground:43 20% 88%;
  --fui-border:0 0% 23%; --fui-input:0 0% 38%; --fui-ring:43 20% 88%;
  --bg:#121212; --bg-2:#181818; --surface:#1c1c1c; --panel:#1c1c1c; --panel-2:#282828; --soft:#303030;
  --text:#efede8; --muted:#adadad; --dim:#818181; --ink-2:#d0cbc0;
  --line:#3b3b3b; --line-soft:#2b2b2b; --line-strong:#606060;
  --brand:#e7e3d9; --brand-dark:#d9d4c9; --brand-hover:#eeebe3; --brand-soft:#303030; --on-brand:#24221e;
  --hover-bg:#2d2d2d; --teal:var(--brand); --sky:var(--brand); --blue:var(--brand);
  --ok:#afcfb2; --green:#afcfb2; --warn:#e8c58d; --amber:#e8c58d; --danger:#f2aa9c; --red:#f2aa9c;
  --success-soft:#233027; --warning-soft:#403822; --danger-soft:#432b29;
  --shadow-card:0 4px 16px #0003; --shadow-hover:0 7px 20px #0004;
  --shadow-button:inset 0 1px 0 #ffffff10,0 2px 5px #0003;
  --shadow-dialog:0 24px 80px #000a; --shadow:#0008;
  --scrim:#0b0b0bdb; --focus-ring:0 0 0 3px #e7e3d928;
  --nav-active:#303030; --nav-on-active:var(--brand);
  --button-primary:linear-gradient(180deg,#eeebe3,#d9d4c9);
  --button-face:linear-gradient(180deg,#303030,#242424);
  --promo-bg:#262626; --promo-bg-2:#1c1c1c; --promo-ink:var(--text); --promo-muted:var(--muted);
  --user-illustration-opacity:.10; --decor-opacity:.09; --decor-blend:normal; --decor-filter:grayscale(1);
  --app-chrome-light:linear-gradient(180deg,#262626,#1c1c1c); --app-canvas-light:none;
}
.publication-embedded :is(.platform-appearance-panel,.platform-theme-intro) { display:none; }
@media(prefers-reduced-motion:reduce) {
  html body.feika-ui *,html body.feika-ui *::before,html body.feika-ui *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
/* Game introduction fills the platform content area and inherits its theme. */
html body.feika-ui.feika-platform #gameView {
  position:relative; width:100%; max-width:none; margin:0; padding:0;
  background:var(--bg); color:var(--text); border:0; border-radius:0;
  box-shadow:none; scrollbar-gutter:auto; scroll-padding-top:64px;
}
html body.feika-ui.feika-platform #gameView .game-detail-back {
  position:absolute; top:24px; left:max(20px,env(safe-area-inset-left)); z-index:3; margin:0; padding:0;
}
html body.feika-ui.feika-platform #gameView .game-media-stage {
  position:relative; width:100%; height:clamp(240px,50dvh,620px); background:var(--surface); overflow:hidden;
}
html body.feika-ui.feika-platform #gameView :is(#gameTrailer,#gameTrailerEmbed,#gameHeroCover) {
  display:block; width:100%; height:100%; min-height:0; margin:0; padding:0;
  border:0; border-radius:0; box-shadow:none; background:transparent; aspect-ratio:auto;
}
html body.feika-ui.feika-platform #gameView #gameTrailer { object-fit:cover; }
html body.feika-ui.feika-platform #gameView #gameTrailer:fullscreen { object-fit:contain; background:#000; }
html body.feika-ui.feika-platform #gameView #gameHeroCover img { width:100%; height:100%; object-fit:cover; }
html body.feika-ui.feika-platform #gameView #gameHeroCover.media-placeholder:has(> img)::before { display:none; }
html body.feika-ui.feika-platform #gameView #gameHeroCover .cover-label { display:none; }
html body.feika-ui.feika-platform #gameTrailerError {
  position:absolute; inset:auto 0 0; margin:0; padding:14px 24px; background:var(--surface); color:var(--muted); font-size:13px;
}
html body.feika-ui.feika-platform #gameView .game-detail-summary {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,320px); align-items:center;
  gap:32px; padding:24px clamp(20px,3.2vw,56px) 12px;
}
html body.feika-ui.feika-platform #gameView .game-title-band { margin:0; padding:0; border:0; }
html body.feika-ui.feika-platform #gameView #gameTags { margin:0 0 8px; color:var(--muted); font-size:12px; gap:12px; }
html body.feika-ui.feika-platform #gameView #gameTags :is(.pill:not(.ui-control)) { border:0; background:none; color:inherit; padding:0; }
html body.feika-ui.feika-platform #gameView #gameTitle { margin:0; font-size:clamp(26px,3vw,42px); line-height:1.2; font-weight:600; letter-spacing:-.03em; color:var(--text); }
html body.feika-ui.feika-platform #gameView #gameOneLine { margin:10px 0 0; font-size:14px; color:var(--muted); }
html body.feika-ui.feika-platform #gameView .game-detail-tabs { padding:0 clamp(20px,3.2vw,56px); border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:2; }
html body.feika-ui.feika-platform #gameView [role="tabpanel"]:focus-visible { outline:none; box-shadow:none; text-decoration:underline; text-underline-offset:4px; }
html body.feika-ui.feika-platform #gameView .game-detail-content { padding:0 clamp(20px,3.2vw,56px) 48px; }
html body.feika-ui.feika-platform #gameView .copy-block { padding:28px 0; border:0; margin:0; }
html body.feika-ui.feika-platform #gameView [role="tabpanel"][hidden] { display:none; }
html body.feika-ui.feika-platform #gameView #gameDescription { margin:0; max-width:80ch; white-space:pre-line; color:var(--ink-3); font-size:15px; line-height:1.9; }
html body.feika-ui.feika-platform #gameView .game-detail-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:24px; }
html body.feika-ui.feika-platform #gameView .game-detail-gallery:has(> .hide):not(:has(> :not(.hide))) { display:none; }
html body.feika-ui.feika-platform #gameView .game-detail-gallery .cover { border-radius:0; aspect-ratio:16/9; min-height:0; }
html body.feika-ui.feika-platform #gameView[aria-busy="true"] .game-detail-content > .copy-block { display:none; }
@media(max-width:760px) {
  html body.feika-ui.feika-platform #gameView .game-media-stage { height:auto; aspect-ratio:16/9; min-height:0; }
  html body.feika-ui.feika-platform #gameView .game-detail-summary { grid-template-columns:minmax(0,1fr); gap:20px; padding-top:20px; }
  html body.feika-ui.feika-platform #gameView .game-detail-gallery { grid-template-columns:minmax(0,1fr); }
}

/* Keep the introduction's first screen above the detailed tab content. */
html body.feika-ui.feika-platform #gameView .game-detail-lead {
  display:flex; flex-direction:column; height:auto; min-height:max(440px,calc(100% - 77px));
}
html body.feika-ui.feika-platform #gameView .game-detail-lead > .game-detail-back,
html body.feika-ui.feika-platform #gameView .game-detail-lead > .game-detail-summary { flex:none; }
html body.feika-ui.feika-platform #gameView .game-detail-lead > .game-media-stage { flex:1 1 0; min-height:180px; height:auto; }
html body.feika-ui.feika-platform #gameView .game-detail-lead:has(> .game-media-stage.hide) { height:auto; min-height:0; }
@media(max-width:760px) {
  html body.feika-ui.feika-platform #gameView .game-detail-lead { height:auto; min-height:calc(var(--platform-viewport-small-height) - 134px); }
  html body.feika-ui.feika-platform #gameView .game-detail-lead > .game-media-stage { flex:1 0 auto; }
}

html body.feika-ui.feika-platform #gameView .game-detail-lead { position:relative; }
html body.feika-ui.feika-platform #gameView .game-detail-tabs { margin-bottom:24px; }
html body.feika-ui.feika-platform #gameView .game-detail-lead:has(> .game-media-stage.hide) .game-detail-back { position:static; padding:12px 20px 0; }









html body.feika-ui.feika-platform #gameView #gameTrailerPlay { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:60px; min-height:60px; border-radius:50%; border:1px solid #ffffff80; background:#ffffff30; color:#fff; backdrop-filter:blur(10px); font-size:24px; }

/* The tab strip is the persistent top edge of the detail content. */
/* Missing and failed covers share neutral artwork, never another game's media. */
html body.feika-ui.feika-platform .cover.media-placeholder { position:relative; display:block; min-height:56px; }
html body.feika-ui.feika-platform .cover.media-placeholder::before { content:""; position:absolute; inset:0; background:var(--panel-2) url('/static/media/ui/cover-placeholder.webp') center / cover no-repeat; opacity:.7; }
html body.feika-ui.feika-platform .cover.media-placeholder .cover-label { position:relative; }
html body.feika-ui.feika-platform #userView > .view-back-row[hidden] { display:none; }

/* Conversation structure stays readable without nested empty cards. */
html body.feika-ui.feika-platform #friendsView { container:friends-layout / inline-size; }
html body.feika-ui.feika-platform #friendsView .friends-page { grid-template-columns:minmax(220px,300px) minmax(0,1fr); gap:24px; align-items:stretch; }
html body.feika-ui.feika-platform #friendsView .friends-page > .panel { min-width:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
html body.feika-ui.feika-platform #friendsView .friends-list-panel { border-right:1px solid var(--line); padding-right:20px; }
html body.feika-ui.feika-platform #friendsView .friends-list-panel>.panel-head { padding:0 0 16px; min-height:48px; align-items:center; flex-wrap:wrap; gap:8px; }
html body.feika-ui.feika-platform #friendsView .panel-body { padding:0; }
@container friends-layout (max-width:700px) {
  html body.feika-ui.feika-platform #friendsView .friends-page { grid-template-columns:minmax(0,1fr); gap:20px; }
  html body.feika-ui.feika-platform #friendsView .friends-list-panel { padding:0 0 16px; border-right:0; border-bottom:1px solid var(--line); }
  html body.feika-ui.feika-platform #friendsView .friends-chat-panel { padding-left:0; }
}
html body.feika-ui.feika-platform #gameReviewsPanel :is(.twitter-main,.tweet-composer,.tweet-item,.tweet-reply-item) { background:transparent; box-shadow:none; border-radius:0; }
html body.feika-ui.feika-platform #gameReviewsPanel .discussion-composer { padding:20px 0; border:0; border-bottom:1px solid var(--line); gap:14px; }
html body.feika-ui.feika-platform #gameReviewsPanel #reviewText { --ui-composer-min-height:100px; }
html body.feika-ui.feika-platform #gameReviewsPanel .discussion-composer-actions { margin-top:10px; gap:10px; flex-wrap:wrap; }
html body.feika-ui.feika-platform #gameReviewsPanel .review-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:16px 0; border-bottom:1px solid var(--line); }
html body.feika-ui.feika-platform #gameReviewsPanel #reviewSort { width:auto; max-width:100%; min-width:160px; }
html body.feika-ui.feika-platform #gameReviewsPanel .review-pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; padding:16px 0; }
html body.feika-ui.feika-platform #gameReviewsPanel .tweet-item { padding:20px 0; border:0; border-bottom:1px solid var(--line); }
@media(max-width:760px) {
  html body.feika-ui.feika-platform #friendsView .friends-page { grid-template-columns:minmax(0,1fr); gap:20px; }
  html body.feika-ui.feika-platform #friendsView .friends-list-panel { padding:0 0 16px; border-right:0; border-bottom:1px solid var(--line); }
  html body.feika-ui.feika-platform #friendsView .friends-list { max-height:none; }
  html body.feika-ui.feika-platform #gameReviewsPanel .discussion-composer { grid-template-columns:minmax(0,1fr); }
  html body.feika-ui.feika-platform #gameReviewsPanel #reviewComposerAvatar { display:none; }
}

html body.feika-ui.feika-platform #gameView .game-detail-tabs { position:sticky; top:0; z-index:20; box-shadow:0 1px 0 var(--line); scroll-margin-top:0; }
html body.feika-ui.feika-platform #gameView .game-detail-content { min-height:calc(100% - 76px); }
html body.feika-ui.feika-platform #gameView #gameReviewsPanel .game-discussion-page { width:100%; max-width:900px; margin:0; }
html body.feika-ui.feika-platform #gameView #gameReviewsPanel .social-sticky-head { position:static; background:transparent; }
@media(max-width:760px) {
  html body.feika-ui.feika-platform #gameView { height:calc(var(--platform-viewport-height) - 64px); min-height:0; overflow-y:auto; overflow-x:hidden; }
  html body.feika-ui.feika-platform #gameView .game-detail-lead { min-height:calc(var(--platform-viewport-height) - 141px); }
}


html:is([data-platform-theme=feika],[data-platform-theme=painted-dark]) body.feika-account .sidebar { background:var(--surface); border-color:var(--line); }

/* Homepage creation stays above the current page and uses the existing form. */
body.feika-ui.feika-platform #developerCreatePanelMount { display:contents; }
body.feika-ui.feika-platform:has(#homeCreateDialog[open]) { overflow:hidden; }






body.feika-ui.feika-platform #homeCreateDialog :is([data-create-draft],.dev-pane-hint,.content-language-control) { display:none; }
body.feika-ui.feika-platform #homeCreateDialog #newGameSummaryField { order:1; }
body.feika-ui.feika-platform #homeCreateDialog #newGameTemplateField { order:2; }

/* Package platform: task-oriented layout, scoped to its existing mode only. */
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #currentPackagesView { width:100%; max-width:1560px; margin-inline:auto; padding:28px clamp(16px,3vw,40px); }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #currentPackagesView .section-head { align-items:center; margin:0 0 24px; gap:20px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #currentPackagesView h1 { margin:0 0 6px; font-size:26px; letter-spacing:-.4px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #currentPackagesView > .section-head { flex-wrap:wrap; gap:12px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #currentPackagesView > .section-head > div { flex:1 1 220px; min-width:0; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #ppRescanBtn { flex:0 0 auto; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #ppHostSummary { margin:0; color:var(--ink-2); font-size:13px; overflow-wrap:anywhere; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #currentPackagesTable > .home-row > .fine { color:var(--ink-2); }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-installed-list { display:grid; gap:10px; width:100%; min-width:0; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-installed-row { display:grid; grid-template-columns:minmax(200px,1.7fr) minmax(170px,1.2fr) minmax(130px,.85fr) minmax(180px,auto); align-items:center; gap:6px 24px; min-width:0; padding:12px 20px 8px; border:1px solid var(--line); border-radius:var(--radius-card,12px); background:var(--surface); }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-identity { display:flex; align-items:center; gap:14px; min-width:0; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-identity > div { min-width:0; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-symbol { display:grid; place-items:center; flex:none; width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:var(--brand-soft); color:var(--brand); font-size:26px; line-height:1; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-identity strong { font-size:16px; line-height:1.3; overflow-wrap:anywhere; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-id { margin:4px 0 0; color:var(--muted); font:10.5px/1.5 ui-monospace,Consolas,monospace; overflow-wrap:anywhere; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform :is(.package-version,.package-status) { display:grid; justify-items:start; min-width:0; gap:4px; overflow-wrap:anywhere; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-version > span:last-child { color:var(--text); font-size:12px; font-variant-numeric:tabular-nums; line-height:1.5; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-column-label { color:var(--muted); font-size:11px; line-height:1.35; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-row-actions { display:flex; min-width:0; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-install-location { grid-column:1/-1; min-width:0; padding-top:0; color:var(--muted); font-size:11px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-install-location p { margin:7px 0; font:12px/1.65 ui-monospace,Consolas,monospace; overflow-wrap:anywhere; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-operation-feedback { grid-column:1/-1; margin:2px 0 4px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-feedback-heading { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform :is(.package-error-details,.package-feedback-history) { color:var(--muted); font-size:11px; min-width:0; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-feedback-history { grid-column:1/-1; padding:8px 0; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-orphan-feedback { min-width:0; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-diagnostics { margin-top:22px; padding:14px 18px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--surface); font-size:12px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-diagnostics summary { cursor:pointer; font-weight:550; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-diagnostics pre { max-height:320px; overflow:auto; margin:12px 0 0; padding:12px; border-radius:6px; background:var(--panel-2); color:var(--text); font:11px/1.85 ui-monospace,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
/* Keep real recommendations, categories and ranking actions; reduce uninformative height. */
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #storeView .package-store-toolbar { display:flex; align-items:center; min-width:0; margin:8px 0 22px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #storeView .package-store-toolbar .store-filters { display:flex; flex:1; gap:10px; min-width:0; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #storeView .package-store-toolbar .search-field { flex:1; min-width:0; max-width:620px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #storeView .package-store-toolbar select { width:150px; flex:none; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #storeView #homeCategorySection { margin-bottom:4px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #storeView .category-tabs { gap:8px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #storeView .category-tab { min-height:54px; padding:10px 14px; border-radius:9px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #storeView .category-tabs > button { min-height:54px; max-height:none; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #storeView #categoryTabs { display:flex; flex-wrap:wrap; gap:8px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #storeView #categoryTabs .rank-tab { flex:0 1 auto; flex-direction:row; gap:8px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #storeView #categoryTabs .rank-tab::before { width:22px; height:22px; background-size:132px 22px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #storeView .home-row { margin-block:20px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #storeView .game-card .cover.media-placeholder { aspect-ratio:auto; min-height:74px; height:74px; background:var(--panel-2); color:var(--text); }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #storeView .game-card .cover.media-placeholder .cover-label { inset:auto 16px 14px; font-size:16px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #storeView .game-card-body { padding:16px; gap:9px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #storeView .game-card-body > p { margin:6px 0; line-height:1.7; color:var(--muted); }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #storeView .card-byline { display:block; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:11px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-account-author { cursor:help; text-decoration:underline dotted var(--line); text-underline-offset:3px; }
/* Package upload sidebar: reuse store materials without changing store or IAP surfaces. */
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-sidebar { min-width:0; padding:0; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); box-shadow:none; overflow:hidden; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-sidebar .panel-head { display:flex; align-items:center; gap:12px; margin:0; padding:16px; border:0; border-bottom:1px solid var(--line); background:transparent; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-sidebar .panel-head h2 { margin:0; color:var(--text); font-size:15px; font-weight:650; line-height:1.4; letter-spacing:0; text-transform:none; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-sidebar #developerGameCount { color:var(--muted); font-size:11px; white-space:nowrap; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-sidebar .panel-body { padding:8px; max-height:max(180px,calc(var(--platform-viewport-height) - 280px)); overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-sidebar #developerGameList { grid-template-columns:minmax(0,1fr); gap:6px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-sidebar .dev-game-item:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-sidebar .card-row { align-items:center; flex-wrap:wrap; gap:8px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-sidebar .dev-game-item h3 { flex:1 1 120px; min-width:0; margin:0; color:var(--text); font-size:14px; font-weight:650; line-height:1.45; overflow-wrap:anywhere; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-sidebar .dev-game-item > .fine { margin:0; color:var(--muted); font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-sidebar .dev-game-tags,
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-sidebar .dev-game-item > .muted { display:none; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-game-item > .muted { font-size:11px; line-height:1.5; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
/* The selected package stays explicit; forms remain readable without hiding fields. */
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView { max-width:1560px; margin-inline:auto; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-shell { grid-template-columns:minmax(220px,280px) minmax(0,1fr); gap:28px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-game-item > p { margin:0; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-game-item h3 { font-size:14px; line-height:1.35; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-workspace-head { padding:20px 24px 0; border-bottom:1px solid var(--line); }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .package-editor-context { padding-bottom:18px; min-width:0; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .package-editor-context h2 { margin:4px 0; color:var(--text); font-size:24px; line-height:1.35; overflow-wrap:anywhere; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .package-editor-context p { margin:0; color:var(--muted); overflow-wrap:anywhere; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-workspace-body { max-width:960px; padding:24px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .publication-release-layout { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:20px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .publication-release-layout > .publication-section { padding:18px; border:1px solid var(--line); border-radius:12px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .publication-section-head h3 { margin:0 0 6px; font-size:15px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .publication-section-head p { margin:0 0 14px; font-size:12px; line-height:1.8; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-publish-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:24px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView #publishGameBtn { background:var(--button-primary,var(--brand)); color:var(--on-brand); border:1px solid transparent; min-height:40px; padding-inline:18px; }
@media(max-width:1100px) {
 html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-installed-row { grid-template-columns:minmax(180px,1.4fr) minmax(130px,1fr); gap:18px; padding:18px; }
 html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-status { grid-column:1; }
 html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-row-actions { grid-column:2; justify-content:flex-start; }
 html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .publication-release-layout { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:760px) {
 html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #currentPackagesView { padding:20px 16px; }
 html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #currentPackagesView .section-head { align-items:flex-start; }
 html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #currentPackagesView h1 { font-size:22px; }
 html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-installed-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
 html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-identity { grid-column:1/-1; }
 html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-status { grid-column:2; grid-row:2; }
 html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-row-actions { grid-column:1/-1; }
 html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-shell { grid-template-columns:minmax(0,1fr); }
 html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-sidebar { max-height:none; overflow:hidden; }
 html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView .dev-sidebar .panel-body { max-height:220px; }
 html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #developerView :is(.dev-workspace-head,.dev-workspace-body) { padding:18px 16px; }
}

/* Exact published package roots confirmation; task/Host guards remain authoritative. */
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-plan-head { display: flex; align-items: flex-start; gap: 12px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-plan-head > div { min-width:0; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-plan-table th:first-child { width: 24%; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-plan-table th:nth-child(2) { width: 39%; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-plan-id { display:block; font-size:11px; }
html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-plan-arrow { display: inline-block; margin: 0 7px; }
@media (max-width: 600px) {
  html.package-platform[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform .package-plan-arrow { display: block; margin: 1px 0; }
}

/* Publishing diagnostics keep the original text behind one explicit disclosure. */
body.feika-ui.feika-platform #uploadOverlayElapsed { font-variant-numeric:tabular-nums; }

/* Native content malls use the shared client toolbar. */
/* Empty UGC uses the existing single catalog message; no decorative recommendation or duplicate rankings. */

/* Flat painted materials: theme canvas, one hero brush asset, theme tint tokens.
   Paint backgrounds only; covers, text and hit targets stay above the material. */
html:is([data-platform-theme=painted-light],[data-platform-theme=painted-dark],[data-platform-theme=paper-adventure]):not(.publication-embedded):has(body.feika-ui) {
  --material-canvas:url('/static/media/ui/canvas-light-v2.webp');
  --material-page-wash:#f2f2f28c; --material-sidebar-wash:#f9f9f98c;
  --material-panel-wash:#f9f9f9a6; --material-row-wash:#eeeeee73; --material-active-wash:#e0e9e78c;
  --material-primary-wash:#386974d6;
  --material-oil:url('/static/media/ui/home-oil-material-v1.webp');
  --material-hero-opacity:.22;
  --material-hero-blend:multiply;
  --material-hero-base:#ebebeb;
  --material-blend:normal,luminosity; --material-oil-filter:grayscale(1);
  --bg:#f2f2f2; --bg-2:#eeeeee;
  --surface:#f9f9f9; --panel:#f9f9f9; --panel-2:#eeeeee; --soft:#e9e9e9;
  --text:#252d31; --muted:#667072; --dim:#858d8d; --ink-2:#485659;
  --line:#dddddd; --line-soft:#e4e4e4; --line-strong:#b8b8b8;
  --brand:#386974; --brand-hover:#2a5762; --brand-soft:#e0e9e7; --on-brand:#fff;
  --brand-dark:var(--brand-hover); --teal:var(--brand); --sky:var(--brand); --blue:var(--brand);
  --fui-primary:191 35% 34%; --fui-primary-foreground:0 0% 100%; --fui-accent:167 17% 89%; --fui-accent-foreground:191 35% 34%;
  --hover-bg:#ebebeb;
  --nav-active:#e0e8e2; --nav-on-active:#386974;
  --button-primary:#386974; --button-face:var(--surface);
  --promo-bg:#e6eae3; --promo-bg-2:#e1e7df; --promo-ink:var(--text); --promo-muted:var(--muted);
  --app-canvas-light:var(--material-canvas);
  --app-chrome-light:var(--material-canvas),var(--surface);
  --shadow-card:inset 0 1px 0 #fff8,0 4px 14px #26392f06;
  --shadow-hover:inset 0 1px 0 #fff8,0 6px 18px #26392f0d;
  --shadow-button:inset 0 1px 0 #fff2,0 2px 5px #26392f0b;
  --focus-ring:0 0 0 3px #38697430;
}
html:root[data-platform-theme=painted-dark]:not(.publication-embedded):has(body.feika-ui) {
  --material-canvas:url('/static/media/ui/canvas-dark-v2.webp');
  --material-page-wash:#1414148c; --material-sidebar-wash:#2020208c;
  --material-panel-wash:#202020a6; --material-row-wash:#2b2b2b73; --material-active-wash:#51452f99;
  --material-hero-opacity:.94; --material-hero-blend:soft-light;
  --material-hero-base:#2b2b2b;
  --material-blend:normal,luminosity; --material-oil-filter:grayscale(1);
  --bg:#141414; --bg-2:#1a1a1a; --surface:#202020; --panel:#202020;
  --panel-2:#2b2b2b; --soft:#333333;
  --text:#f0ede7; --muted:#aaa8a4; --dim:#807e7a; --ink-2:#d2cec7;
  --line:#404040; --line-soft:#323232; --line-strong:#66605a;
  --brand:#f3dd9f; --brand-hover:#eee4d2; --brand-soft:#37332e; --on-brand:#27231d;
  --fui-primary:44 60% 75%; --fui-primary-foreground:36 15% 13%; --fui-accent:33 9% 20%; --fui-accent-foreground:44 60% 75%;
  --hover-bg:#343434;
  --nav-active:#f3dd9f; --nav-on-active:var(--on-brand);
  --button-primary:#f3dd9f; --button-face:var(--panel-2);
  --promo-bg:#2c2c2c; --promo-bg-2:#252525; --promo-ink:var(--text); --promo-muted:var(--muted);
  --shadow-card:inset 0 1px 0 #f0f1d406,0 5px 16px #0002;
  --shadow-hover:inset 0 1px 0 #f0f1d409,0 7px 20px #0003;
  --shadow-button:inset 0 1px 0 #fff2,0 2px 5px #0002;
  --focus-ring:0 0 0 3px #e6d39b30;
}





#storeView.is-searching :is(#storeContent > .ui-feature-layout,#homeDiscoverGrid,#homeUpdatesSection,#homeRankSection,#homeTagSection) { display:none; }

/* Library: square artwork, readable state, and the existing game actions. */
body.feika-ui.feika-platform #libraryView {
  position:relative; isolation:isolate;
  &::before { content:""; position:absolute; z-index:-1; top:-28px; right:0; width:min(70%,620px); height:220px; pointer-events:none; background:url('/static/media/ui/library-canopy.svg') top right / contain no-repeat; opacity:.18; filter:blur(2px); }
  & .library-topbar { display:flex; align-items:center; gap:28px; margin-bottom:28px; }
  & .library-eyebrow { color:var(--muted); font-size:11px; letter-spacing:.26em; }
  & .library-search-field { width:min(100%,410px); min-width:0; }
  & .library-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; margin-bottom:32px; }
  & .library-toolbar h1 { margin:0; color:var(--text); font-size:clamp(28px,3vw,38px); font-weight:750; line-height:1.25; letter-spacing:-.035em; }
  & .library-filter-group { display:flex; align-items:center; gap:24px; }
  /* The shared selected-control skin is important; these tabs use an underline. */
  & #libraryFilters .library-filter-button { position:relative; min-height:44px; padding:8px 0; border:0; border-radius:0; color:var(--muted)!important; background:transparent!important; box-shadow:none; font-size:14px; font-weight:500; }
  & #libraryFilters .library-filter-button.active { color:var(--brand)!important; font-weight:650; }
  & .library-filter-button::after { content:""; position:absolute; bottom:0; left:0; right:0; height:3px; border-radius:3px; background:var(--brand); opacity:0; transform:scaleX(0); }
  & .library-filter-button.active::after { opacity:1; transform:none; }
  & .library-filter-button span[id] { margin-left:4px; font-size:11px; opacity:.7; }
  & .library-section-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
  & .library-section-title { display:flex; align-items:baseline; flex-wrap:wrap; gap:14px; }
  & .library-section-title h2 { margin:0; font-size:21px; font-weight:650; }
  & #libraryCount { color:var(--muted); font-size:12px; }
  & .library-head-actions { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:12px; }
  & #librarySort { position:relative; min-width:0; font-size:12px; }
  & #librarySort summary { display:flex; align-items:center; gap:12px; min-height:36px; padding:6px 2px; border:0; background:transparent; color:var(--text); cursor:pointer; list-style:none; }
  & #librarySort summary::-webkit-details-marker { display:none; }
  & #librarySort summary > span[aria-hidden] { color:var(--brand); }
  & .library-sort-options { position:absolute; top:calc(100% + 6px); right:0; z-index:40; width:190px; max-width:calc(100vw - 32px); padding:6px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:0 12px 28px #0003; }
  & .library-sort-option { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:40px; padding:8px 10px; border:0; border-radius:6px; color:var(--text); background:transparent; box-shadow:none; text-align:start; font-size:12px; }
  & .library-sort-option[aria-pressed=true] { color:var(--brand); background:var(--brand-soft); }
  & .library-sort-option[aria-pressed=true]::after { content:"✓"; }
  & .library-list { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:calc(clamp(164px,12vw,206px) + var(--library-row-extra,0px)); gap:18px; align-items:stretch; }
  & .library-card { position:relative; isolation:isolate; display:flex; flex-direction:column; grid-column:span 2; width:100%; height:100%; box-sizing:border-box; min-height:0; min-width:0; padding:14px; border:0; border-radius:12px; background:#111b22; box-shadow:0 3px 12px #00000014; overflow:visible; cursor:pointer; }
  & .library-card-featured { grid-column:span 6; grid-row:span 2; }
  & .library-card-prominent { grid-column:span 3; }
  & .library-card-featured .library-game-copy h3 { height:auto; max-height:2.7em; font-size:clamp(20px,2vw,30px); }
  & .library-card-prominent .library-game-copy h3 { font-size:16px; }
  & .library-card::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:linear-gradient(180deg,#050e1600 40%,#050e161a 62%,#050e1638); pointer-events:none; }
  & .library-card:has(.ui-action-menu[open]),& .library-card:focus-within { z-index:61; }
  & .library-card-art { position:absolute; inset:0; z-index:-2; border-radius:inherit; overflow:hidden; background:#182d3b; pointer-events:none; }
  & .library-card:hover .library-card-art { filter:brightness(1.08); }
  & .library-card.is-launch-locked { opacity:.45; cursor:not-allowed; }
  & .library-card.is-launch-active .library-card-art { filter:brightness(1.08); }
  & .library-card .cover { width:100%; height:100%; min-height:0; border:0; border-radius:0; aspect-ratio:1; background-position:center; background-size:cover; }
  & .library-card .cover img { display:block; width:100%; height:100%; object-fit:cover; }
  & .library-card .media-placeholder { background:url('/static/media/ui/cover-placeholder.webp') center / cover; }
  & .library-card .cover-label { display:none; }
  & .library-card-content { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:6px 10px; flex:none; min-width:0; margin-top:auto; }
  /* Eased scrim: ramps in over 48px so light covers never show a hard band above the copy. */
  & .library-card-content::before { content:""; position:absolute; inset:-48px -14px -14px; z-index:-1; border-radius:0 0 12px 12px; background:linear-gradient(180deg,#050e1600 0,#050e1612 10px,#050e1640 21px,#050e1680 33px,#050e16b0 45px,#050e16c9 58px,#050e16d1); pointer-events:none; }
  & .library-game-copy { grid-column:1/-1; min-width:0; margin:0; }
  & .library-game-copy h3 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; width:100%; height:2.7em; min-width:0; margin:0; color:#f8fafc; text-shadow:0 1px 3px #0009; font-size:14px; font-weight:650; line-height:1.35; overflow-wrap:anywhere; }
  & .library-status { display:flex; align-items:flex-end; gap:5px; min-width:0; min-height:2.8em; margin:0; color:#e0e7ec; font-size:11px; line-height:1.4; }
  & .library-status::before { content:""; flex:none; width:6px; height:6px; margin-bottom:4px; border-radius:50%; background:#b9c3cc; }
  & .library-status.installed::before { background:var(--ok,var(--green)); }
  & .library-status.pending::before { background:var(--warn,var(--amber)); }
  & .library-status-label { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; max-height:2.8em; min-width:0; overflow:hidden; overflow-wrap:anywhere; }
  & #librarySyncStatus.hide { display:none; }
  & .library-list > .ui-state { grid-column:1 / -1; }
  & .library-actions { justify-self:end; display:flex; align-items:stretch; gap:6px; min-height:32px; margin:0; border:0; background:transparent; box-shadow:none; }
  & .library-actions > button { min-width:0; min-height:32px; padding:4px 10px; border:0; border-radius:7px; font-size:11px; line-height:1.3; box-shadow:none; overflow-wrap:anywhere; white-space:normal; }
  & .library-primary-action { flex:none; display:inline-flex; align-items:center; justify-content:center; gap:5px; color:var(--on-brand); background:var(--button-primary,var(--brand)); }
  & .library-primary-action:disabled { color:var(--ink-2); background:var(--panel-2)!important; opacity:1; }
  & .library-primary-action[aria-busy=true] svg { animation:library-action-spin 1s linear infinite; }
  & .library-primary-action svg { flex:none; width:14px; height:14px; }
  & :focus-visible { outline:2px solid var(--brand); outline-offset:4px; }
  & #librarySyncStatus { color:var(--text); margin:0 0 16px; }
  & :is(.empty,.workspace-loading) { grid-column:1 / -1; min-width:0; }
  & .empty { padding:64px 16px; border:0; background:transparent; text-align:center; }
  & .skeleton-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
  & .skeleton-grid .skeleton-cover { aspect-ratio:1; border-radius:12px; }
}
@media(max-width:1200px) and (min-width:761px) {
  body.feika-ui.feika-platform #libraryView .library-list { grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:calc(180px + var(--library-row-extra,0px)); }
  body.feika-ui.feika-platform #libraryView .library-card-featured { grid-column:span 4; }
  body.feika-ui.feika-platform #libraryView .library-card-prominent { grid-column:span 2; }
}
@media(max-width:960px) and (min-width:761px) {
  body.feika-ui.feika-platform #libraryView .library-list { grid-template-columns:repeat(4,minmax(0,1fr)); }
  body.feika-ui.feika-platform #libraryView .library-card { grid-column:span 1; }
  body.feika-ui.feika-platform #libraryView .library-card-featured { grid-column:span 4; }
  body.feika-ui.feika-platform #libraryView .library-card-prominent { grid-column:span 2; }
  body.feika-ui.feika-platform #libraryView .library-card-content { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:760px) {
  body.feika-ui.feika-platform #libraryView {
    &::before { width:80%; height:170px; opacity:.12; }
    & .library-topbar { gap:12px; margin-bottom:22px; }
    & .library-eyebrow { display:none; }
    & .library-search-field { width:100%; }
    & .library-toolbar { margin-bottom:24px; gap:12px; }
    & .library-filter-group { gap:22px; }
    & .library-list { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:calc(200px + var(--library-row-extra,0px)); gap:14px; }
    & .skeleton-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
    & .library-card { grid-column:span 1; padding:12px; border-radius:10px; }
    & .library-card-featured { grid-column:span 2; grid-row:span 2; }
    & .library-card-content { grid-template-columns:minmax(0,1fr); gap:6px; }
    & .library-card-content::before { inset:-48px -12px -12px; border-radius:0 0 10px 10px; }
    & .library-game-copy h3 { height:2.8em; font-size:13px; line-height:1.4; }
  & #librarySyncStatus.hide { display:none; }
  & .library-list > .ui-state { grid-column:1 / -1; }
    & .library-actions > button { min-height:44px; padding-inline:10px; }
    & .library-section-title { gap:8px; }
    & .library-section-title h2 { font-size:19px; }
  }
}
@media(max-width:360px) {
  body.feika-ui.feika-platform #libraryView :is(.library-list,.skeleton-grid) { grid-template-columns:minmax(0,1fr); }
  body.feika-ui.feika-platform #libraryView .library-card-featured { grid-column:span 1; }
}
/* Narrow cards stack the status above the actions so the label never collapses into one glyph per line. */
body.feika-ui.feika-platform #libraryView .library-card { container:library-card / inline-size; }
@container library-card (max-width:210px) {
  body.feika-ui.feika-platform #libraryView {
    & .library-card-content { grid-template-columns:minmax(0,1fr) auto; row-gap:4px; }
    & .library-status { grid-column:1 / -1; min-height:0; align-items:center; }
    & .library-status::before { margin-bottom:0; }
    & .library-status-label { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    & .library-actions { grid-column:1 / -1; }
  }
}
/* Wider cards keep status and actions on one row even where the breakpoints stack the content column. */
@container library-card (min-width:211px) {
  body.feika-ui.feika-platform #libraryView .library-card-content { grid-template-columns:minmax(0,1fr) auto; }
}
/* Light appearances show library games as light cards: artwork on top, copy on the page surface. */
html:is([data-platform-theme=light],[data-platform-theme=painted-light]):not(.publication-embedded) body.feika-ui.feika-platform #libraryView {
  --library-row-extra:46px;
  & .library-card { padding:0; background:transparent; }
  & .library-card::before {
    z-index:-3; background:var(--surface);
    box-shadow:0 0 0 1px var(--line),0 1px 2px rgb(15 23 42 / 5%),0 6px 18px rgb(15 23 42 / 5%);
  }
  & .library-card-art { position:relative; inset:auto; z-index:auto; flex:1 1 0; min-height:0; margin:6px 6px 0; border-radius:9px; }
  & .library-card-content { margin-top:0; padding:10px 12px 12px; }
  & .library-card-content::before { display:none; }
  & .library-game-copy h3 { height:auto; -webkit-line-clamp:1; color:var(--text); text-shadow:none; }
  & .library-card-featured .library-game-copy h3 { -webkit-line-clamp:2; }
  & .library-status { align-self:center; min-height:0; align-items:center; color:var(--muted); }
  & .library-status::before { margin-bottom:0; }
  & .library-status-label { -webkit-line-clamp:1; }
  & .library-card .media-placeholder { background-color:var(--panel-2); }
  & .library-actions > .ui-action-menu > summary.ui-control { color:var(--ink-2)!important; }
  & .library-actions > .ui-action-menu > summary.ui-control:is(:hover,:focus-visible),
  & .library-actions > .ui-action-menu[open] > summary.ui-control { background:var(--hover-bg)!important; color:var(--text)!important; }
}
@media(max-width:760px) {
  html:is([data-platform-theme=light],[data-platform-theme=painted-light]):not(.publication-embedded) body.feika-ui.feika-platform #libraryView {
    --library-row-extra:56px;
    & .library-card { padding:0; }
    & .library-card-content { padding:8px 10px 10px; }
  }
}
/* Counts read as numbers: tabular figures everywhere, and the library filter counts become small pills. */
body.feika-ui.feika-platform :is(.ui-counter,.rank-no,.rating,.rank-row-side,.friends-row-time,#libraryCount,#storeCount,.library-filter-button span[id]) { font-variant-numeric:tabular-nums; }
body.feika-ui.feika-platform #libraryView #libraryFilters .library-filter-button span[id] {
  display:inline-grid; place-items:center; min-width:20px; height:18px; margin-left:6px; padding:0 6px; box-sizing:border-box;
  border-radius:9px; background:color-mix(in srgb,currentColor 12%,transparent); font-size:11px; font-weight:600; line-height:1; opacity:1; vertical-align:1px;
}


/* Keep the current shared action stack while separating the game actions. */
body.feika-ui.feika-platform #gamePrimaryActions { gap:12px; }

/* Highlighted game controls share a rounded, lightly woven face.
   Keep this local to the game platform; publishing and content malls own their controls. */
html:root[data-platform-theme]:not(.publication-embedded,.package-platform,.content-platform) body.feika-ui.feika-platform {
  --platform-highlight-grain:repeating-linear-gradient(8deg,#fff0 0 3px,#ffffff0a 3px 4px),repeating-linear-gradient(98deg,#0000 0 4px,#00000006 4px 5px),linear-gradient(180deg,#ffffff12,transparent 60%,#00000008);
  --platform-highlight-edge:none;


  & :is(button,a.button,[role=button],[role=tab]):is(
    .primary,.library-primary-action,
    #featuredOpenBtn,#primaryGameActionBtn,#homeRankPreview .toolbar>button,
    :where(button:not([class]):not(.tabs button):not([data-platform-theme-choice]))
  ):not(:where(#homeCreateBtn,.platform-appearance-option,.library-filter-button,[data-ui-control=tab],[data-ui-control=navigation])) {
    border-radius:10px;

    /* Painted palettes already supply their solid accent beneath the grain. */
    :is([data-platform-theme=feika],[data-platform-theme=painted-light],[data-platform-theme=painted-dark]) & {
      background-image:var(--platform-highlight-grain)!important;
      background-size:auto!important;
      background-blend-mode:normal!important;
      box-shadow:var(--platform-highlight-edge);
      @media(forced-colors:active) { background-image:none!important; box-shadow:none; }
    }
    &:hover:not(:disabled,[aria-disabled=true]) {
      box-shadow:none;
    }
    &:active:not(:disabled,[aria-disabled=true]) {
      box-shadow:none;
    }
    &:focus-visible {
      outline:none; box-shadow:none;
    }
    &:disabled,&[aria-disabled=true] { box-shadow:none; }
  }
}

/* Recommendation copy remains on the page surface. */
html body.feika-ui.feika-platform #recommendationGrid :is(.fine,.card-byline,.pill,.ui-badge,.ui-label,.card-tags-more) { color:var(--ink-2); }
html body.feika-ui.feika-platform #recommendationGrid .pill-tag:hover { color:var(--text); }

/* Game platform selections stay quieter than primary actions. */
html:root[data-platform-theme]:not(.publication-embedded,.package-platform,.content-platform) body.feika-ui.feika-platform {
  --platform-selection-face:color-mix(in srgb,var(--brand) 10%,var(--surface));
  --platform-selection-hover:color-mix(in srgb,var(--brand) 15%,var(--surface));
  --platform-selection-grain:repeating-linear-gradient(8deg,transparent 0 3px,#ffffff05 3px 4px),linear-gradient(180deg,#ffffff04,#00000004);

  & :is(#platformNavigation,#storeView,#libraryView,#gameView,#settingsView,#userView,#friendsView,#developerView,.platform-user-actions,.platform-appearance-switch)
    :is(button,a,[role=button],[role=tab]):is(.active,.is-selected,[aria-selected=true],[aria-pressed=true],[aria-current=page]):not(:where(
      .primary,.library-primary-action,.carousel-dot,#featuredDots *,#featuredOpenBtn,#primaryGameActionBtn,#homeRankPreview .toolbar>button,#homeCreateBtn,.platform-appearance-option,.library-filter-button,[data-ui-control=tab]
    )) {
    border-radius:10px;
    background-color:var(--platform-selection-face)!important;
    background-image:var(--platform-selection-grain)!important;
    background-size:auto!important; background-blend-mode:normal!important;
    color:var(--text)!important; --control-metadata-ink:var(--text);
    border-color:transparent!important; box-shadow:none;
    &:hover:not(:disabled,[aria-disabled=true]) { background-color:var(--platform-selection-hover)!important; }
    &:active:not(:disabled,[aria-disabled=true]) { box-shadow:none; }
    &:focus-visible { outline:none; box-shadow:none; }
    &:is(:disabled,[aria-disabled=true]) { color:var(--ink-2)!important; --control-metadata-ink:var(--ink-2); background-color:var(--panel-2)!important; background-image:none!important; border-color:var(--line-strong)!important; border-style:dashed; box-shadow:none; cursor:not-allowed; }
    @media(forced-colors:active) { background-image:none!important; border-color:transparent!important; box-shadow:none; }
  }

  /* Underline tabs keep their existing semantics instead of becoming filled actions. */
  & :is(#storeView,#libraryView,#gameView,#settingsView,#userView,#friendsView,#developerView) [data-ui-control=tab][aria-selected=true] {
    background-color:transparent!important; background-image:none!important;
    color:var(--text)!important; --control-metadata-ink:var(--text);
    box-shadow:none!important; font-weight:650; text-decoration:underline; text-underline-offset:6px;
    &:focus-visible { outline:none; }
  }
}

/* Original appearances retain the October 10 blue hierarchy on the current components. */
html:root[data-platform-theme=light]:not(.publication-embedded) body.feika-ui.feika-platform {
  --platform-selection-face:var(--brand-soft);
  --platform-selection-hover:#e5eeff;
}
html:root[data-platform-theme=light]:not(.publication-embedded) body.feika-ui.feika-platform #platformNavigation [data-ui-control=navigation][aria-current=page] {
  background-color:#334f7b!important; background-image:var(--nav-active)!important;
  color:#fff!important; --control-metadata-ink:#fff; border-color:transparent!important; box-shadow:none;
}
html:root[data-platform-theme=light]:not(.publication-embedded) body.feika-ui.feika-platform #storeView #heroPicks .hero-picks-item:not(.active) { background-color:#f8faff; }
/* Original dark: every primary action is the mint face with dark ink. */
html:root[data-platform-theme=feika]:not(.publication-embedded) body.feika-ui.feika-platform :is(#storeView,#libraryView,#gameView,#settingsView,#developerView) button.ui-control.primary:not(:disabled,[aria-disabled=true]) {
  background-color:var(--brand)!important; background-image:var(--button-primary)!important;
  color:var(--on-brand)!important; --control-metadata-ink:var(--on-brand); border:1px solid transparent!important; box-shadow:none;
  &:hover { filter:brightness(1.06); }
}
/* Light pages are mostly white panels, so the primary action carries the blue accent instead of a white face. */
html:root[data-platform-theme=light]:not(.publication-embedded) body.feika-ui.feika-platform :is(#storeView,#libraryView,#gameView,#settingsView,#developerView) button.ui-control.primary:not(:disabled,[aria-disabled=true]) {
  background-color:var(--brand)!important; background-image:var(--button-primary)!important;
  color:#fff!important; --control-metadata-ink:#fff; border:1px solid transparent!important; box-shadow:none;
  &:hover { filter:brightness(1.06); }
}
/* Original dark keeps library art and its scrim neutral instead of the navy base. */
html:root[data-platform-theme=feika]:not(.publication-embedded) body.feika-ui.feika-platform #libraryView {
  & .library-card { background:var(--surface); }
  & .library-card-art { background:var(--panel-2); }
  & .library-card::before { background:linear-gradient(180deg,#07090800 40%,#0709081a 62%,#07090838); }
  & .library-card-content::before { background:linear-gradient(180deg,#07090800 0,#07090812 10px,#07090840 21px,#07090880 33px,#070908b0 45px,#070908c9 58px,#070908d1); }
}
/* The creator card follows the graphite and mint palette. */
html:root[data-platform-theme=feika]:not(.publication-embedded) body.feika-ui.feika-platform #platformNavigation {
  & .home-creator-card { border-color:#3ddc971f; background:radial-gradient(ellipse at 96% 32%,#3ddc972e,transparent 66%),linear-gradient(135deg,#222624,#151816); color:var(--text); }
  & .home-creator-card::after { background:linear-gradient(90deg,#1a1d1beb,#1a1d1b8c 42%,transparent 72%); }
  & .home-creator-card h2 { color:var(--text); }
  & .home-creator-card p { color:var(--muted); }
  & #homeCreateBtn { border-color:transparent; background:var(--brand); color:var(--on-brand); }
  & #homeCreateBtn:is(:hover,:focus-visible):not(:disabled) { background:var(--brand-hover); color:var(--on-brand); }
}
html:root[data-platform-theme=feika]:not(.publication-embedded) body.feika-ui.feika-platform #libraryView button.library-primary-action:not([data-library-action=play]):not(:disabled,[aria-disabled=true]) {
  background-color:#ffffff1f!important; background-image:none!important; color:var(--brand)!important; --control-metadata-ink:var(--brand);
  backdrop-filter:blur(6px);
}
/* Original dark polish: selections stay neutral, mint only marks the focal point, chips stay quiet. */
html:root[data-platform-theme=feika]:not(.publication-embedded,.package-platform,.content-platform) body.feika-ui.feika-platform {
  --platform-selection-face:#ffffff0f;
  --platform-selection-hover:#ffffff17;
  --platform-selection-grain:none;
}
html:root[data-platform-theme=feika]:not(.publication-embedded) body.feika-ui.feika-platform {
  /* Chrome: sidebar and top bar separate from content by a hairline, not by a tinted slab. */
  & #platformNavigation .ui-nav[aria-current=page]::before { background-color:var(--brand); }
  & #platformNavigation [data-ui-control=navigation]:not([aria-current=page]) { color:var(--muted); }
  & #platformNavigation [data-ui-control=navigation]:not([aria-current=page]):hover { color:var(--text); }

  /* Metadata badges and tag filters share one quiet chip face. */
  & .ui-counter[data-ui-counter=metadata] {
    --control-metadata-ink:var(--ink-2);
    border-color:transparent; border-radius:6px; background:#ffffff0f; font-weight:550; font-size:12px;
  }
  /* Capability badges (they carry a hint title) stay noticeable in a soft amber; categories stay neutral. */
  & .ui-counter[data-ui-counter=metadata][title] { background:#f5c15b14; --control-metadata-ink:#f2d08c; }
  & [data-store-tag].ui-control:not(.card-tag) { --ui-target-size:26px; --ui-control-padding:3px 10px; --ui-control-font-size:12px; border-radius:6px; font-weight:500; }
  & [data-store-tag].ui-control { border-color:transparent!important; }
  & .ui-counter.wrap:not([data-ui-counter],.notification) { border-color:transparent; background:#ffffff0f; color:var(--ink-2); border-radius:6px; }
  & [data-store-tag].ui-control:not([aria-pressed=true]) { background-color:#ffffff0a!important; background-image:none!important; color:var(--muted)!important; }
  & [data-store-tag].ui-control:not([aria-pressed=true]):hover { background-color:#ffffff17!important; color:var(--text)!important; }
  & [data-store-tag].ui-control[aria-pressed=true] { background-color:#3ddc9724!important; color:var(--brand)!important; }

  /* Featured carousel: a mint eyebrow and a neutral active pick with a mint title. */
  & .ui-feature-eyebrow { color:var(--brand); letter-spacing:.08em; }
  & .ui-feature-pick.active .ui-feature-pick-title { color:var(--brand); }

  /* Ranking: neutral active row, the accent bar and title carry the mint. */
  & #storeView .rank-row.active { background:#ffffff0d; }
  & #storeView .rank-row:hover:not(.active) { background:#ffffff08; }
}
/* Detail stats read as label + value pairs instead of running together. */
html body.feika-ui.feika-platform #gameView .ui-meta.ui-badges > span:has(> [id]) {
  display:inline-flex; align-items:baseline; gap:6px; margin-inline-end:14px;
  & > span:not([id]) { color:var(--muted); }
  & > span[id] { color:var(--text); font-size:inherit; font-weight:600; font-variant-numeric:tabular-nums; }
}
html body.feika-ui.feika-platform #gameView #gameAuthorLine {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  & > span { color:var(--muted); }
  & > .ui-control { --ui-target-size:auto; min-height:0; padding:0; font-weight:600; }
}

/* Cover captions and ratings remain readable in the current recommendation list. */
html body.feika-ui.feika-platform #heroPicks .rating { color:var(--control-metadata-ink,var(--ink-2)); }
html body.feika-ui.feika-platform #heroPicks .cover.has-image .cover-label { display:none; }

/* Quiet icon actions sit at the lower right; touch surfaces retain a full target. */
html:root[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #libraryView .library-actions > button.library-primary-action.ui-control.primary {
  width:36px; min-width:36px; height:36px; min-height:36px; padding:0; border:0!important; border-radius:50%!important; box-shadow:none!important;
}
body.feika-ui.feika-platform #libraryView .library-actions > .ui-action-menu > summary.ui-control {
  width:28px; min-width:28px; height:36px; min-height:36px; padding:0; color:#edf2f6!important; background:transparent!important; border:0; border-radius:50%; box-shadow:none;
}
body.feika-ui.feika-platform #libraryView .library-actions > .ui-action-menu > summary.ui-control:focus-visible { background:#ffffff24!important; color:#fff!important; filter:none; }
html:root[data-platform-theme] body.feika-ui.feika-platform #libraryView button.library-primary-action:focus-visible { filter:brightness(1.25); }
html:root:is([data-platform-theme=light],[data-platform-theme=feika]):not(.publication-embedded,.package-platform,.content-platform) body.feika-ui.feika-platform {
  --platform-highlight-grain:none;
  --platform-selection-grain:none;
}
@keyframes library-action-spin { to { transform:rotate(1turn); } }
@media(prefers-reduced-motion:reduce) {
  body.feika-ui.feika-platform #libraryView .library-primary-action[aria-busy=true] svg { animation:none; }
}
/* Library motion: card lift and press, staggered entry, filter underline, popovers. */
@keyframes library-card-enter { from { opacity:0; transform:translateY(14px) scale(.97); } }
@keyframes library-pop { from { opacity:0; transform:translateY(-6px) scale(.96); } }
@keyframes library-pop-up { from { opacity:0; transform:translateY(6px) scale(.96); } }
@keyframes library-launch-glow {
  0%,100% { box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 75%,transparent),0 10px 28px #0000004d; }
  50% { box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 30%,transparent),0 14px 34px #00000059; }
}
@keyframes library-dot-pulse { 50% { opacity:.35; transform:scale(.7); } }
@media(prefers-reduced-motion:no-preference) {
  body.feika-ui.feika-platform #libraryView {
    --library-ease:var(--ease,cubic-bezier(.2,.7,.3,1));
    --library-spring:cubic-bezier(.34,1.4,.64,1);
    & .library-card { transition:transform .26s var(--library-ease),opacity .2s; }
    & .library-card-art { transition:filter .26s var(--library-ease),box-shadow .26s var(--library-ease); }
    & .library-card-art > * { transition:transform .5s var(--library-ease); }
    & .library-card::before { transition:opacity .26s; }
    @media(hover:hover) {
      & .library-card:not(.is-launch-locked):hover { transform:translateY(-4px); }
      & .library-card:not(.is-launch-locked):hover .library-card-art { box-shadow:0 14px 32px #00000047,0 4px 10px #00000024; }
      & .library-card:not(.is-launch-locked):hover .library-card-art > * { transform:scale(1.05); }
      & .library-card:not(.is-launch-locked):hover::before { opacity:.6; }
    }
    & .library-card:not(.is-launch-locked):active:not(:has(:is(button,summary,.ui-menu-actions):active)) { transform:translateY(-1px) scale(.975); transition-duration:.1s; }
    & .library-card.is-launch-active .library-card-art { animation:library-launch-glow 1.8s ease-in-out infinite; }
    & .library-status.pending::before { animation:library-dot-pulse 1.4s ease-in-out infinite; }

    & .library-list[data-entering] > .library-card { animation:library-card-enter .46s var(--library-ease) backwards; }    & .library-list[data-entering] > .library-card:nth-child(2) { animation-delay:.04s; }
    & .library-list[data-entering] > .library-card:nth-child(3) { animation-delay:.08s; }
    & .library-list[data-entering] > .library-card:nth-child(4) { animation-delay:.12s; }
    & .library-list[data-entering] > .library-card:nth-child(5) { animation-delay:.16s; }
    & .library-list[data-entering] > .library-card:nth-child(6) { animation-delay:.2s; }
    & .library-list[data-entering] > .library-card:nth-child(7) { animation-delay:.24s; }
    & .library-list[data-entering] > .library-card:nth-child(8) { animation-delay:.28s; }
    & .library-list[data-entering] > .library-card:nth-child(n+9) { animation-delay:.32s; }

    & .library-primary-action { transition:transform .18s var(--library-spring),filter .18s,background-color .18s,color .18s; }
    & .library-primary-action svg { transition:transform .18s var(--library-ease); }
    & .library-primary-action:not(:disabled):hover { transform:scale(1.08); filter:brightness(1.08); }
    & .library-primary-action:not(:disabled):hover:not([aria-busy=true]) svg { transform:scale(1.08); }
    & .library-primary-action:not(:disabled):active { transform:scale(.9); transition-duration:.08s; }
    & .library-actions > .ui-action-menu > summary.ui-control { transition:background-color .16s,transform .16s var(--library-spring); }
    & .library-actions > .ui-action-menu > summary.ui-control:hover { background:#ffffff24!important; }
    & .library-actions > .ui-action-menu > summary.ui-control:active { transform:scale(.88); }
    & .library-actions > .ui-action-menu[open] > summary.ui-control { background:#ffffff2e!important; }

    & .library-filter-button { transition:color .18s; }
    & .library-filter-button::after { transition:transform .28s var(--library-ease),opacity .2s; }
    & .library-filter-button:not(.active):hover::after { opacity:.35; transform:scaleX(.5); }
    & .library-filter-button:active { transform:translateY(1px); }

    & #librarySort summary > span[aria-hidden] { display:inline-block; transition:transform .22s var(--library-ease); }
    & #librarySort[open] summary > span[aria-hidden] { transform:rotate(180deg); }
    & #librarySort[open] .library-sort-options { transform-origin:top right; animation:library-pop .18s var(--library-ease); }
    & .library-sort-option { transition:background-color .14s,color .14s,padding-inline-start .18s var(--library-ease); }
    & .library-sort-option:hover:not([aria-pressed=true]) { padding-inline-start:14px; background:var(--hover-bg,var(--panel-2)); }
  }
  /* Light cards lift as a whole surface: the shadow belongs to the card, not the inset artwork. */
  html:is([data-platform-theme=light],[data-platform-theme=painted-light]):not(.publication-embedded) body.feika-ui.feika-platform #libraryView {
    & .library-card::before { transition:box-shadow .26s var(--library-ease); }
    @media(hover:hover) {
      & .library-card:not(.is-launch-locked):hover::before { opacity:1; box-shadow:0 0 0 1px var(--line),0 2px 6px rgb(15 23 42 / 6%),0 14px 30px rgb(15 23 42 / 11%); }
      & .library-card:not(.is-launch-locked):hover .library-card-art { box-shadow:none; }
    }
  }
}
@media(max-width:760px),(pointer:coarse) {
  html:root[data-platform-theme]:not(.publication-embedded) body.feika-ui.feika-platform #libraryView .library-actions > button.library-primary-action.ui-control.primary { width:44px; min-width:44px; height:44px; min-height:44px; }
  body.feika-ui.feika-platform #libraryView .library-actions > .ui-action-menu > summary.ui-control { width:44px; min-width:44px; height:44px; min-height:44px; }
}
/* Platform motion. Movement uses the individual scale/translate properties so it composes with
   layout transforms; everything here is skipped when the system asks for reduced motion. */
@keyframes motion-rise { from { opacity:0; translate:0 12px; } }
@keyframes motion-fade { from { opacity:0; } }
@keyframes motion-view-in { from { opacity:0; translate:0 10px; } }
@keyframes motion-menu { from { opacity:0; translate:0 -6px; scale:.96; } }
@keyframes motion-menu-up { from { opacity:0; translate:0 6px; scale:.96; } }
@keyframes motion-dialog-in { from { opacity:0; translate:0 12px; scale:.97; } }
@keyframes motion-drawer-in { from { opacity:0; translate:28px 0; } }
@keyframes motion-toast-in { from { opacity:0; translate:28px 0; scale:.96; } }
@keyframes motion-toast-out { to { opacity:0; translate:28px 0; scale:.96; } }
@keyframes motion-pop { 0% { opacity:0; scale:.4; } 60% { opacity:1; scale:1.18; } }
@keyframes motion-nav-icon { 35% { scale:.78; } 70% { scale:1.16; } }
@keyframes motion-preview-art { from { opacity:0; scale:1.04; } }
@keyframes motion-preview-copy { from { opacity:0; translate:14px 0; } }
@media(prefers-reduced-motion:no-preference) {
  html:root body.feika-ui.feika-platform {
    --motion-ease:cubic-bezier(.2,.7,.3,1);
    --motion-spring:cubic-bezier(.34,1.45,.64,1);

    /* Page and section reveals. */
    & main > .view.active { animation:motion-view-in .34s var(--motion-ease); }
    & #storeContent:not(.hide) { animation:motion-fade .4s var(--motion-ease); }
    & #storeSearchContext:not(.hide) { animation:motion-rise .3s var(--motion-ease); }

    /* Shared controls: a soft spring on press, colour changes ease instead of snapping. */
    & :is(button,summary,div[role=button]).ui-control {
      transition:background-color .18s,border-color .18s,box-shadow .18s,color .18s,filter .18s,opacity .18s,transform .18s,
        scale .16s var(--motion-spring),translate .22s var(--motion-ease);
    }
    & :is(button,summary).ui-control:not(:disabled,[aria-disabled=true],.ui-list-choice):active { scale:.95; transition-duration:.08s; }
    & :is(.ui-list-choice,.ui-feature-pick):not(:disabled,[aria-disabled=true]):active { scale:.985; transition-duration:.08s; }
    & button.ui-control.primary:not(:disabled,[aria-disabled=true]):hover { translate:0 -1px; }
    & .search-clear:not(.hide) { animation:motion-pop .26s var(--motion-ease); }
    & :is(input,textarea,select).ui-control { transition:border-color .18s,box-shadow .18s,background-color .18s; }

    /* Navigation icons bounce when their page becomes current; badges pop in. */
    & .topbar .tabs .ui-nav::before { transition:scale .24s var(--motion-spring); }
    @media(hover:hover) { & .topbar .tabs .ui-nav:hover::before { scale:1.14; } }
    & .topbar .tabs .ui-nav[aria-current=page]::before { animation:motion-nav-icon .5s var(--motion-ease); }
    & .platform-user-actions .ui-control svg { transition:scale .24s var(--motion-spring); }
    @media(hover:hover) { & .platform-user-actions .ui-control:hover svg { scale:1.12; } }
    & :is(.nav-badge,.ui-counter.notification):not(.hide) { animation:motion-pop .42s var(--motion-ease); }

    /* Popovers, disclosures, dialogs and toasts. */
    & .ui-action-menu[open] > .ui-menu-actions { transform-origin:top right; animation:motion-menu .18s var(--motion-ease); }
    & .ui-action-menu[data-ui-menu-placement=above][open] > .ui-menu-actions { transform-origin:bottom right; animation-name:motion-menu-up; }
    & details:not(.ui-action-menu,.library-sort)[open] > :not(summary) { animation:motion-rise .28s var(--motion-ease); }
    & :is(dialog.ui-dialog,dialog.admin-review-dialog)[open] { animation:motion-dialog-in .3s var(--motion-ease); }
    & dialog.ui-dialog[data-ui-dialog-placement=end][open] { animation-name:motion-drawer-in; }
    & :is(dialog.ui-dialog,dialog.admin-review-dialog)[open]::backdrop { animation:motion-fade .3s ease; }
    & .toast-item { animation:motion-toast-in .36s var(--motion-ease); }
    & .toast-item.is-leaving { animation:motion-toast-out .24s ease-in forwards; }

    /* Staggered entry for grids whose content just changed (app.js sets data-entering). */
    & :is(#catalogGrid,#homeRankList,#homeUpdatesGrid,#recommendationGrid,#reviewList,#userFeedList)[data-entering] > :is([data-game-id],[data-rank-preview],[data-social-target-id]) { animation:motion-rise .46s var(--motion-ease) backwards; }
    & :is(#catalogGrid,#homeRankList,#homeUpdatesGrid,#recommendationGrid,#reviewList,#userFeedList)[data-entering] > :nth-child(2) { animation-delay:.035s; }
    & :is(#catalogGrid,#homeRankList,#homeUpdatesGrid,#recommendationGrid,#reviewList,#userFeedList)[data-entering] > :nth-child(3) { animation-delay:.07s; }
    & :is(#catalogGrid,#homeRankList,#homeUpdatesGrid,#recommendationGrid,#reviewList,#userFeedList)[data-entering] > :nth-child(4) { animation-delay:.105s; }
    & :is(#catalogGrid,#homeRankList,#homeUpdatesGrid,#recommendationGrid,#reviewList,#userFeedList)[data-entering] > :nth-child(5) { animation-delay:.14s; }
    & :is(#catalogGrid,#homeRankList,#homeUpdatesGrid,#recommendationGrid,#reviewList,#userFeedList)[data-entering] > :nth-child(6) { animation-delay:.175s; }
    & :is(#catalogGrid,#homeRankList,#homeUpdatesGrid,#recommendationGrid,#reviewList,#userFeedList)[data-entering] > :nth-child(7) { animation-delay:.21s; }
    & :is(#catalogGrid,#homeRankList,#homeUpdatesGrid,#recommendationGrid,#reviewList,#userFeedList)[data-entering] > :nth-child(8) { animation-delay:.245s; }
    & :is(#catalogGrid,#homeRankList,#homeUpdatesGrid,#recommendationGrid,#reviewList,#userFeedList)[data-entering] > :nth-child(9) { animation-delay:.28s; }
    & :is(#catalogGrid,#homeRankList,#homeUpdatesGrid,#recommendationGrid,#reviewList,#userFeedList)[data-entering] > :nth-child(n+10) { animation-delay:.315s; }

    /* Store cards: lift, cover zoom, title ink. */
    & :is(.game-card,.mini-feature,.owned-tile) { transition:translate .28s var(--motion-ease),scale .16s var(--motion-spring),border-color .2s,background-color .2s; }
    & :is(.game-card,.mini-feature,.owned-tile,.ui-feature-pick,.rank-row) .cover img { transition:transform .6s var(--motion-ease); }
    & :is(.game-card .card-title,.owned-tile h3) { transition:color .2s; }
    @media(hover:hover) {
      & :is(.game-card,.mini-feature):hover { translate:0 -4px; }
      & .owned-tile:hover { translate:0 -2px; }
      & :is(.game-card,.mini-feature,.owned-tile):hover .cover img { transform:scale(1.06); }
      & :is(#storeView,#gameView,#recommendationsView) :is(.game-card:hover .card-title,.owned-tile:hover h3) { color:var(--brand); }
      & [data-store-tag]:hover { translate:0 -1px; }
    }
    & :is(.game-card,.mini-feature,.owned-tile):active:not(:has(button:active)) { scale:.985; transition-duration:.08s; }

    /* Featured carousel: arrows, dots, picks and the call to action. */
    @media(hover:hover) {
      & #featuredCarousel .ui-feature-arrow { opacity:.72; }
      & #featuredCarousel:hover .ui-feature-arrow { opacity:1; }
      & .ui-feature-controls > .ui-feature-arrow:not(:disabled):hover { scale:1.1; }
      & .ui-feature-pick:not(.active):hover { translate:3px 0; }
      & .ui-feature-pick:hover .cover img { transform:scale(1.08); }
    }
    & .ui-feature-controls > .ui-feature-arrow:not(:disabled):active { scale:.9; }
    & .ui-feature-dot::before { transition:width .4s var(--motion-ease),background-color .2s,opacity .2s; }
    & .ui-feature-dot:not([aria-current=true]):hover::before { opacity:.75; width:10px; }
    & #featuredOpenBtn > span[aria-hidden] { display:inline-block; transition:translate .22s var(--motion-spring); }
    & #featuredOpenBtn:hover > span[aria-hidden] { translate:4px 0; }

    /* Ranking board: row emphasis, category icon spring, preview swap. */
    & .rank-row { transition:background-color .18s,color .18s; }
    & .rank-row::before { transition:opacity .2s,scale .3s var(--motion-spring); }
    & .rank-row .rank-no { transition:color .2s,scale .26s var(--motion-spring); }
    & .rank-row .rank-row-copy { transition:translate .24s var(--motion-ease); }
    & .rank-row.active .rank-no { color:var(--brand); scale:1.12; }
    @media(hover:hover) {
      & .rank-row:hover .rank-no { scale:1.12; }
      & .rank-row:hover .rank-row-copy { translate:3px 0; }
      & .rank-row:hover .cover img { transform:scale(1.08); }
    }
    & #homeRankPreview[data-entering] > .cover { animation:motion-preview-art .5s var(--motion-ease); }
    & #homeRankPreview[data-entering] > .rank-preview-copy { animation:motion-preview-copy .4s var(--motion-ease) .04s backwards; }
    & #homeRankPreview[data-entering] > .rank-preview-stats { animation:motion-preview-copy .4s var(--motion-ease) .1s backwards; }
    & #categoryTabs .rank-tab::before { transition:scale .3s var(--motion-spring),rotate .3s var(--motion-spring); }
    @media(hover:hover) { & #categoryTabs .rank-tab:hover::before { scale:1.12; rotate:-5deg; } }
    & #categoryTabs .rank-tab.active::before { animation:motion-nav-icon .5s var(--motion-ease); }

    /* Game introduction: staged reveal, tab panels fade up, media hover. */
    & #gameView.active :is(.game-media-stage:not(.hide),.game-detail-summary,.game-detail-tabs) { animation:motion-rise .5s var(--motion-ease) backwards; }
    & #gameView.active .game-media-stage:not(.hide) { animation-name:motion-fade; animation-duration:.6s; }
    & #gameView.active .game-detail-summary { animation-delay:.07s; }
    & #gameView.active .game-detail-tabs { animation-delay:.13s; }
    & #gameView .game-detail-content > .copy-block:not([hidden]) { animation:motion-rise .34s var(--motion-ease); }
    & #gameView #gameTrailerPlay { transition:scale .24s var(--motion-spring),background-color .2s,opacity .2s; }
    & #gameView #gameTrailerPlay:hover { scale:1.1; }
    & #gameView #gameTrailerPlay:active { scale:.94; }
    & #gameView .game-detail-gallery .cover img { transition:transform .6s var(--motion-ease); }
    @media(hover:hover) { & #gameView .game-detail-gallery .cover:hover img { transform:scale(1.05); } }
    & .tweet-item { transition:background-color .2s; }
    @media(hover:hover) { & .tweet-item:hover { background-color:color-mix(in srgb,var(--text) 3%,transparent); } }

    /* Friends, developer and settings surfaces. */
    & .friends-row .ui-avatar { transition:scale .24s var(--motion-spring); }
    @media(hover:hover) { & .friends-row:hover .ui-avatar { scale:1.08; } }
    & :is(.dev-game-item,.submission) { transition:translate .24s var(--motion-ease),background-color .2s,border-color .2s; }
    @media(hover:hover) { & :is(.dev-game-item,.submission):hover { translate:0 -2px; } }
    & .upload-drop { transition:scale .24s var(--motion-spring),border-color .2s,background-color .2s; }
    @media(hover:hover) { & .upload-drop:hover { scale:1.01; } }
    & .platform-theme-swatch { transition:translate .22s var(--motion-ease),scale .16s var(--motion-spring),border-color .2s,background-color .2s; }
    @media(hover:hover) { & .platform-theme-swatch:hover { translate:0 -2px; } }

    /* Tabs: the selected marker grows from the centre instead of a static underline. */
    & :is(#storeView,#libraryView,#gameView,#settingsView,#userView,#friendsView,#developerView) [data-ui-control=tab] {
      &::after { content:""; position:absolute; inset-inline:8px; bottom:6px; height:2px; border-radius:2px; background:currentColor; scale:0 1; opacity:0; transition:scale .3s var(--motion-ease),opacity .2s; pointer-events:none; }
      &[aria-selected=true]:not(:focus-visible) { text-decoration:none!important; }
      &[aria-selected=true]::after { scale:1 1; opacity:1; }
    }
    @media(hover:hover) { & :is(#storeView,#libraryView,#gameView,#settingsView,#userView,#friendsView,#developerView) [data-ui-control=tab]:not([aria-selected=true]):hover::after { scale:.4 1; opacity:.35; } }
    & #developerView .dev-pane.active { animation:motion-rise .32s var(--motion-ease); }
    & .ui-control.ui-back::before { display:inline-block; transition:translate .22s var(--motion-spring); }
    @media(hover:hover) { & .ui-control.ui-back:hover::before { translate:-3px 0; } }

    /* Loading: skeletons shimmer in a cascade, determinate progress carries a moving sheen. */
    & .skeleton-block { position:relative; overflow:hidden; }
    & .skeleton-block::after {
      content:""; position:absolute; inset:0; translate:-100% 0; pointer-events:none;
      background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--surface,#fff) 60%,transparent) 50%,transparent 80%);
      animation:motion-shimmer 1.5s ease-in-out infinite;
    }
    & :is(.skeleton-grid,.store-skeleton) > :nth-child(2) .skeleton-block::after { animation-delay:.08s; }
    & :is(.skeleton-grid,.store-skeleton) > :nth-child(3) .skeleton-block::after { animation-delay:.16s; }
    & :is(.skeleton-grid,.store-skeleton) > :nth-child(4) .skeleton-block::after { animation-delay:.24s; }
    & :is(.skeleton-grid,.store-skeleton) > :nth-child(5) .skeleton-block::after { animation-delay:.32s; }
    & :is(.skeleton-grid,.store-skeleton) > :nth-child(6) .skeleton-block::after { animation-delay:.4s; }
    & .ui-progress > div:not(.is-indeterminate) { position:relative; overflow:hidden; transition:width .45s var(--motion-ease); }
    & .ui-progress > div:not(.is-indeterminate)::after {
      content:""; position:absolute; inset:0; translate:-100% 0; pointer-events:none;
      background:linear-gradient(90deg,transparent,#ffffff59,transparent);
      animation:motion-shimmer 1.6s ease-in-out infinite;
    }

    /* Social: posts and new chat messages arrive with direction, composers wake on input. */
    & #friendsMessages > .friends-message.is-new { animation:motion-message-in .34s var(--motion-ease); transform-origin:bottom left; }
    & #friendsMessages > .friends-message.own.is-new { animation-name:motion-message-own-in; transform-origin:bottom right; }
    & :is(.social-composer,.friends-composer):has(:is(.ui-composer-input,textarea):not(:placeholder-shown)) button.ui-control.primary:not(:disabled) { animation:motion-wake .4s var(--motion-ease); }
    & .tweet-action { transition:color .2s,background-color .2s,scale .16s var(--motion-spring); }
    & .tweet-action .ui-counter { display:inline-block; }
    & .user-profile-avatar { transition:scale .3s var(--motion-spring),box-shadow .3s; }
    @media(hover:hover) { & .user-profile-avatar:hover { scale:1.04; } }
    & .friends-relation-tab .ui-counter { transition:scale .24s var(--motion-spring); }

    /* Sections further down the page rise in as they scroll into view. */
    @supports (animation-timeline:view()) {
      & :is(#storeView .home-row,#storeCatalogSection,#gameView .game-detail-gallery > .cover,#userView .user-space-content) {
        animation:motion-scroll-reveal linear both; animation-timeline:view(); animation-range:entry 0px entry 240px;
      }
    }
  }
}
@keyframes motion-scroll-reveal { from { opacity:.001; translate:0 28px; } }
@keyframes motion-shimmer { 60%,100% { translate:100% 0; } }
@keyframes motion-message-in { from { opacity:0; translate:-12px 6px; scale:.96; } }
@keyframes motion-message-own-in { from { opacity:0; translate:12px 6px; scale:.96; } }
@keyframes motion-wake { 40% { scale:1.06; } }