.game-tile { position:relative; min-width:0; }
.game-tile > .game-card { display:block; }
.game-card[data-draggable-game] { cursor:grab; user-select:none; }
.favorites-dragging .game-card[data-draggable-game] { cursor:grabbing; }
.featured-rail > .game-tile { flex:0 0 43%; min-width:0; scroll-snap-align:start; }
.game-favorite { position:absolute; z-index:2; display:grid; place-items:center; width:44px; height:44px; padding:11px; border:1px solid #ffffff24; border-radius:50%; background:#171b24e8; color:#f5f5f2; box-shadow:0 4px 14px #0003; transition:background .2s,color .2s,transform .2s; }
.game-favorite { top:7px; right:7px; }
.game-favorite svg { width:20px; height:20px; fill:transparent; transition:fill .2s,transform .2s; }
.game-favorite.is-saved { color:#f0d69a; background:#252319f5; }
.game-favorite.is-saved svg { fill:currentColor; }
.game-favorite:hover svg { transform:scale(1.1); }
.game-catalog-grid,.favorites-panel.is-dropzone { --game-app-size:76px; --game-app-column-gap:8px; --game-app-row-gap:22px; --game-app-inset:13px; }
.game-catalog-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--game-app-row-gap) var(--game-app-column-gap); padding-inline:var(--game-app-inset); }
.is-catalog-app .game-card { display:flex; flex-direction:column; align-items:center; text-align:center; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
.is-catalog-app .game-card > img,.is-catalog-app .live-art { width:min(100%,var(--game-app-size)); height:auto; aspect-ratio:1; border-radius:18px; object-fit:cover; box-shadow:0 5px 14px #0002; }
.is-catalog-app .game-card strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:10px; line-height:1.35; font-weight:500; margin-top:8px; min-height:27px; width:100%; }
.is-catalog-app .game-card > span { display:none; }
.is-catalog-app .live-art { gap:5px; }
.is-catalog-app .live-art svg { width:22px; height:22px; }
.is-catalog-app .live-art em { font-size:7px; letter-spacing:.3px; }
.catalog-hold-hint { margin:-10px 0 22px; color:var(--muted); font-size:10px; line-height:1.5; }
.favorites-dragging .is-catalog-app.is-dragging img { transform:scale(1.06) rotate(-3deg); }
.game-detail-media { position:relative; width:65%; margin:0 auto 28px; }
.game-detail-media .game-detail-art { width:100%; margin:0; }
.continue-game { position:relative; }
.continue-game .card { padding-right:62px; }
.continue-game > .game-favorite { top:50%; transform:translateY(-50%); right:12px; }
.playing-favorite { display:flex; align-items:center; gap:10px; margin:-20px 0 24px; font-size:12px; color:var(--muted); }
.playing-favorite > .game-favorite { position:static; flex:none; }
.favorites-panel { position:relative; isolation:isolate; border:1px solid var(--line); border-radius:18px; padding:10px 12px 12px; background:var(--surface); }
.favorites-panel.is-dropzone { margin-bottom:24px; border-style:dashed; }
.favorites-panel > header { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:26px; margin-bottom:8px; }
.favorites-panel > header > div { display:flex; align-items:center; gap:6px; }
.favorites-panel > header svg { width:14px; height:14px; color:var(--gold); }
.favorites-panel h3 { font-size:13px; letter-spacing:-.2px; }
.favorites-count { min-width:18px; padding:2px 4px; border-radius:6px; background:var(--gold-dark); color:var(--gold); font-size:9px; text-align:center; font-variant-numeric:tabular-nums; }
.favorites-caption { color:var(--muted); font-size:9px; }
.favorites-expand,.favorites-edit { display:flex; align-items:center; justify-content:center; gap:5px; min-width:44px; height:44px; margin:-9px -4px -9px 0; padding:8px; border:0; border-radius:12px; background:transparent; color:var(--muted); font-size:10px; }
.favorites-edit[hidden] { display:none; }
.favorites-panel > header > .favorites-folder-actions[hidden],.favorites-caption[hidden],[data-favorites-content][hidden] { display:none; }
.favorites-panel[data-empty="true"][data-expanded="false"] { padding-bottom:10px; }
.favorites-panel[data-empty="true"][data-expanded="false"] > header { margin-bottom:0; }
.favorites-expand:hover,.favorites-edit:hover { background:var(--gold-dark); color:var(--gold); }
.favorites-expand svg { transition:transform .25s ease; }
[data-expanded="true"] .favorites-expand svg { transform:rotate(180deg); }
.favorites-more:empty { display:none; }
.favorites-app-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--game-app-row-gap) var(--game-app-column-gap); margin:0; padding:0; list-style:none; }
.favorite-app { position:relative; min-width:0; text-align:center; }
.favorite-app-launch { position:relative; display:flex; flex-direction:column; align-items:center; width:100%; min-width:44px; min-height:44px; padding:0; border:0; border-radius:12px; background:none; color:var(--text); transition:transform .2s; }
.favorite-app-launch:hover { transform:translateY(-2px); }
.favorite-app-launch img,.favorite-placeholder { width:44px; height:44px; object-fit:cover; border-radius:12px; box-shadow:0 3px 8px #0002; }
.favorites-app-grid .favorite-app-launch > img,.favorites-app-grid .favorite-placeholder { width:100%; max-width:var(--game-app-size); height:auto; aspect-ratio:1; border-radius:18px; box-shadow:0 5px 14px #0002; }
.favorite-placeholder { display:grid; place-items:center; background:var(--gold-dark); color:var(--gold); font-size:8px; font-weight:600; letter-spacing:-.2px; }
.favorite-app-name { display:none; max-width:100%; }
[data-expanded="true"] .favorite-app-name,.is-horizontal .favorite-app-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:6px; font-size:9px; line-height:1.35; min-height:24px; }
.is-dropzone[data-expanded="true"] .favorite-app-name { margin-top:8px; font-size:10px; min-height:27px; }
.favorite-empty-slot { display:grid; place-items:center; min-height:44px; }
.favorite-empty-slot > span { display:grid; place-items:center; width:100%; max-width:var(--game-app-size); height:auto; aspect-ratio:1; border:1px dashed var(--line); border-radius:18px; color:var(--muted); font-size:20px; opacity:.5; }
.favorites-empty-copy { margin-top:8px; font-size:9px; line-height:1.5; color:var(--muted); }
.favorite-remove-mark { position:absolute; top:-4px; right:0; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; border:1px solid var(--line); background:var(--text); color:var(--bg); font-size:16px; line-height:1; }
[data-editing="true"] .favorite-app-launch { cursor:pointer; }
.favorites-rail { display:flex; gap:10px; margin:0; padding:2px 0 6px; list-style:none; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--gold-dark) transparent; }
.favorites-rail > .favorite-app { flex:0 0 66px; scroll-snap-align:start; }
.favorites-rail { cursor:grab; user-select:none; }
.favorites-rail.is-panning { cursor:grabbing; scroll-snap-type:none; }
.favorites-rail .favorite-app-launch img,.favorites-rail .favorite-placeholder { width:56px; height:56px; border-radius:14px; }
.favorites-rail:empty { display:none; }
.favorites-drop-message { display:none; position:absolute; inset:0; z-index:3; align-items:center; justify-content:center; gap:9px; border-radius:inherit; color:var(--gold); background:var(--surface); pointer-events:none; }
.favorites-drop-message strong { font-size:13px; font-weight:500; }
.favorites-dragging [data-favorites-drop] { position:sticky; top:108px; z-index:17; border-color:var(--gold); background:var(--bg); box-shadow:0 12px 32px #0003; }
.favorites-dragging [data-favorites-drop].is-drag-over { border-style:solid; outline:3px solid var(--gold-dark); }
.is-drag-over > .favorites-drop-message { display:flex; }
.favorites-dragging .is-dragging { opacity:.5; }
.favorite-drag-preview { position:fixed; z-index:80; pointer-events:none; width:60px; height:60px; padding:4px; border:1px solid var(--gold); border-radius:16px; color:var(--gold); background:var(--bg); box-shadow:0 12px 30px #0005; transform:rotate(-5deg); }
.favorite-drag-preview img { width:100%; height:100%; border-radius:12px; object-fit:cover; }
.favorite-drag-preview > svg { display:block; margin:12px auto; }
.favorite-drag-preview strong { display:none; }
.favorite-app.is-new { animation:favorite-icon-arrive .3s cubic-bezier(.16,1,.3,1) both; }
[data-expanded="true"] .favorite-app:nth-child(n+5) { animation:favorite-icon-arrive .25s ease-out both; }
@keyframes favorite-icon-arrive { from { opacity:0; transform:translateY(5px) scale(.75); } to { opacity:1; transform:translateY(0) scale(1); } }
.appearance-light .game-favorite { background:#ffffffed; color:#234963; border-color:#fff; }
.appearance-light .game-favorite.is-saved { background:#e4f1fa; color:#326281; }
@media(min-width:1100px) { .favorites-dragging [data-favorites-drop] { top:156px; } }
@media(max-width:360px) {
    .game-catalog-grid,.favorites-panel.is-dropzone { --game-app-inset:11px; }
    .game-favorite { top:4px; }
    .game-favorite { right:4px; }
    .favorites-panel { padding:10px; }
    .favorites-panel h3 { font-size:13px; }
    .favorites-caption { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) {
    .game-favorite,.game-favorite svg,.favorites-expand svg,.favorite-app-launch { transition:none; }
    .favorites-dragging .is-catalog-app.is-dragging img { transform:none; }
    .favorite-app.is-new,[data-expanded="true"] .favorite-app:nth-child(n+5) { animation:none; }
}
