/* ==========================================================================
   InsertCoin / Retro Encyclopedia — VCL app look & feel.
   Values copied from the VCL CursistenApp (Android.net) resources:
   Resources/values/colors.xml, values/themes.xml, layout/activity_shell.xml, layout/item_card.xml, drawable/bg_input.xml.
   Keep in sync with Theme/VclTheme.cs (MudBlazor palette). Tweak colours/shape here.
   ========================================================================== */
:root{
  --vcl-primary:#009FE3;        /* vcl_primary */
  --vcl-primary-dark:#0077B3;   /* vcl_primary_dark — also small link/meta text (4.9:1 on white) */
  --vcl-accent:#62A329;         /* vcl_accent / vcl_success */
  --vcl-surface:#F5F7FA;        /* vcl_surface (window background) */
  --vcl-card:#FFFFFF;           /* vcl_card */
  --vcl-text:#292929;           /* vcl_text */
  --vcl-muted:#6B7280;          /* vcl_muted */
  --vcl-warning:#ED6C02;        /* vcl_warning */
  --vcl-danger:#C62828;         /* vcl_danger */
  --vcl-line:#D1D5DB;           /* vcl_timeline / input stroke */
  --vcl-neutral:#EEF0F3;        /* vcl_event_neutral_bg */
  /* Darker text-only variants (not in the VCL app) so small chip/label text passes WCAG AA 4.5:1 on white. */
  --vcl-accent-text:#467A1D;
  --vcl-warning-text:#B45309;
  /* Shapes: Shape.Vcl.Small 8dp, card 12dp (item_card.xml), button 10dp (Widget.Vcl.Button), large 16dp. */
  --vcl-radius-sm:8px; --vcl-radius-card:12px; --vcl-radius-btn:10px; --vcl-radius-lg:16px;
  /* Android elevation look: cardElevation 3dp, toolbar 4dp, bottom nav 8dp. */
  --vcl-shadow-card:0 1px 3px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.08);
  --vcl-shadow-card-hover:0 3px 8px rgba(0,0,0,.14),0 6px 16px rgba(0,0,0,.10);
  --vcl-font:'Roboto',system-ui,-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --vcl-bottom-nav-h:56px;
}

/* Fonts (self-hosted, SIL OFL): Roboto = Android default typeface used by the VCL app; Press Start 2P only for placeholders. */
@font-face{font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/Roboto-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/Roboto-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Press Start 2P';src:url('fonts/PressStart2P-Regular.ttf') format('truetype');font-display:swap}

html,body{background:var(--vcl-surface);color:var(--vcl-text);font-family:var(--vcl-font)}
a{color:var(--vcl-primary-dark);text-decoration:none} a:hover{text-decoration:underline}
.mud-link.mud-primary-text{color:var(--vcl-primary-dark)!important}
h1:focus,h1:focus-visible{outline:none}
.vcl-muted{color:var(--vcl-muted)!important}
.vcl-strong{color:var(--vcl-text)}

/* ---- App bar = VCL Toolbar (vcl_primary, white title, elevation 4dp) ---- */
.vcl-appbar{background:var(--vcl-primary)!important;color:#fff!important}
.logo{display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:20px;font-weight:500;letter-spacing:.0125em;white-space:nowrap}
.logo:hover{text-decoration:none;color:#fff}
.top-nav{display:flex;gap:4px}
.nav-btn{color:#fff!important;font-weight:500;text-transform:uppercase;letter-spacing:.0892em;border-radius:var(--vcl-radius-sm)!important;opacity:.85}
.nav-btn.active,.nav-btn:hover{opacity:1;background:rgba(255,255,255,.14)!important}

/* ---- Green strip under the toolbar = txtMockBanner (vcl_accent, 11sp white, centred) ---- */
.vcl-strip{position:sticky;top:var(--mud-appbar-height);z-index:5;background:var(--vcl-accent);color:#fff;text-align:center;font-size:12px;font-weight:500;line-height:1.3;padding:6px 12px}

.vcl-main{min-height:100vh;display:flex;flex-direction:column}
.vcl-body{flex:1}
.vcl-footer{border-top:1px solid var(--vcl-line);background:var(--vcl-card);color:var(--vcl-muted);font-size:13px;padding:18px 0 28px}

/* ---- Bottom navigation (phones) = BottomNavigationView ---- */
.bottom-nav{display:none}
@media (max-width:599.98px){
  .top-nav{display:none}
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;height:var(--vcl-bottom-nav-h);z-index:1200;background:var(--vcl-card);
    box-shadow:0 -1px 8px rgba(0,0,0,.12);padding-bottom:env(safe-area-inset-bottom)}
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--vcl-muted);font-size:12px;font-weight:500}
  .bottom-nav a:hover{text-decoration:none}
  .bottom-nav a.active{color:var(--vcl-primary-dark)}
  .bottom-nav a.active span{font-weight:700}
  .vcl-main{padding-bottom:var(--vcl-bottom-nav-h)}
  .logo{font-size:18px}
}

/* ---- Cards = MaterialCardView (white, 12dp corners, elevation 3dp, no stroke) ---- */
.vcl-card{background:var(--vcl-card)!important;border-radius:var(--vcl-radius-card)!important;box-shadow:var(--vcl-shadow-card)!important;border:0!important}
.game-card{height:100%;display:flex;flex-direction:column;background:var(--vcl-card)!important;border-radius:var(--vcl-radius-card)!important;
  box-shadow:var(--vcl-shadow-card)!important;transition:box-shadow .15s,transform .15s;overflow:hidden}
.game-card:hover{box-shadow:var(--vcl-shadow-card-hover)!important;transform:translateY(-2px)}
.game-card a{color:inherit;text-decoration:none}
.card-title{font-weight:700;font-size:15px;line-height:1.25;color:var(--vcl-text)}   /* txtTitle bold 16sp */
.card-meta{color:var(--vcl-primary-dark)!important;font-size:12px!important}       /* txtMeta: primary colour 12sp */
.thumb{aspect-ratio:4/3;background:var(--vcl-neutral);display:flex;align-items:center;justify-content:center;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb img.logo-img{object-fit:contain;padding:12px;background:#fff}
/* Placeholder: blue→green gradient like the VCL app icon; pixel-font initials are the only other retro accent. */
.ph-wrap{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--vcl-primary-dark),var(--vcl-primary) 55%,var(--vcl-accent))}
.ph{font-family:'Press Start 2P',monospace;font-size:24px;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.25)}
.ph-wrap small{font-size:10px;color:#fff;text-transform:uppercase;letter-spacing:.12em;font-weight:500}

/* ---- Buttons = Widget.Vcl.Button (10dp corners, no all-caps) / Button.Secondary (1.5dp primary stroke) ---- */
.mud-button-root.mud-button-filled,.mud-button-root.mud-button-outlined{border-radius:var(--vcl-radius-btn)}
.mud-button-outlined.mud-button-outlined-primary{border:1.5px solid var(--vcl-primary);color:var(--vcl-primary-dark)}
.mud-button-filled{box-shadow:0 1px 3px rgba(0,0,0,.2)}

/* ---- Inputs = bg_input.xml (white, 1dp #D1D5DB stroke, 8dp corners) ---- */
.mud-input.mud-input-outlined{background:var(--vcl-card);border-radius:var(--vcl-radius-sm)}
.mud-input-outlined-border{border-radius:var(--vcl-radius-sm)!important}

/* ---- Chips: VCL colours; small text uses the darker variants so it stays readable ---- */
.mud-chip{border-radius:var(--vcl-radius-sm)!important;font-weight:500}
.mud-chip.mud-chip-outlined.mud-chip-color-primary{color:var(--vcl-primary-dark)!important;border-color:var(--vcl-primary)!important}
.mud-chip.mud-chip-outlined.mud-chip-color-tertiary{color:var(--vcl-primary-dark)!important;border-color:var(--vcl-primary-dark)!important}
.mud-chip.mud-chip-outlined.mud-chip-color-success{color:var(--vcl-accent-text)!important;border-color:var(--vcl-accent)!important}
.mud-chip.mud-chip-outlined.mud-chip-color-warning{color:var(--vcl-warning-text)!important;border-color:var(--vcl-warning)!important}
.group-chips .mud-chip{background:var(--vcl-card)}
/* Selected filter chip: filled, white bold text (primary-dark fill = 4.9:1; VCL blue #009FE3 would be 2.97:1). */
.mud-chip.mud-chip-selected.mud-chip-selected{background:var(--vcl-primary-dark)!important;border-color:var(--vcl-primary-dark)!important;color:#fff!important;font-weight:700}
.grp{font-size:10px!important;height:20px!important}

/* ---- Home ---- */
.hero-title{font-size:clamp(1.4rem,3.4vw,2rem)!important;line-height:1.25!important}
.hero-title span{color:var(--vcl-primary)}
.filters{margin:0}
.mud-expand-panel .filters{margin:0!important;box-shadow:none!important}
.mud-expansion-panels.mud-expansion-panels-outlined .mud-expand-panel{background:var(--vcl-card);border-radius:var(--vcl-radius-card)!important}
.noimg{border:2px dashed var(--vcl-line);border-radius:var(--vcl-radius-card);padding:24px;text-align:center;color:var(--vcl-muted);background:var(--vcl-card)}

/* ---- Detail: facts table, gallery, credits ---- */
.facts th{width:32%;color:var(--vcl-muted)!important;font-size:13px;font-weight:500!important;vertical-align:top}
.facts td{font-size:15px;color:var(--vcl-text)}
.gallery-frame{border-radius:var(--vcl-radius-card)!important}
.gallery-img{width:100%;height:100%;object-fit:contain;background:var(--vcl-neutral)}
.gallery-img.logo{background:#fff;padding:20px}
.gallery-img.boxart,.gallery-img.boxart-back,.gallery-img.boxart-3d{object-fit:contain}
/* Caption over the image (source / rights): white on a dark scrim so it is readable on any picture. */
.gallery-caption{position:absolute;left:0;right:0;top:0;padding:8px 12px 16px;font-size:.75rem;line-height:1.35;color:#fff;
  background:linear-gradient(rgba(17,24,39,.86) 60%,transparent);pointer-events:none}
.attrib{font-size:12.5px;color:var(--vcl-muted);line-height:1.5}
.kpi-value{color:var(--vcl-primary)!important;margin-top:4px}   /* KPI value: bold VCL blue like the dashboard */

/* ---- Videos (GameVideos.razor): responsive 16:9 click-to-load YouTube facade in VCL cards ---- */
.yt-card{margin:0;background:var(--vcl-card);border-radius:var(--vcl-radius-card);box-shadow:var(--vcl-shadow-card);overflow:hidden;height:100%}
.yt-frame{position:relative;aspect-ratio:16/9;background:#000}
.yt-frame>a,.yt-frame>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.yt-facade img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .15s}
.yt-facade:hover img,.yt-facade:focus-visible img{filter:brightness(.8)}
.yt-play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:12px;background:rgba(33,33,33,.85);transition:background .15s}
.yt-play::after{content:"";position:absolute;left:27px;top:14px;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
.yt-facade:hover .yt-play,.yt-facade:focus-visible .yt-play{background:#f00}
.yt-caption{padding:12px 14px 14px;font-size:.85rem}
.yt-title{color:var(--vcl-text);font-weight:700;margin-bottom:2px}
.yt-meta,.yt-note{color:var(--vcl-muted);font-size:.8rem}
.yt-platform{color:var(--vcl-text)}
.yt-platform.other{color:var(--vcl-warning-text);font-weight:500}
.yt-prov{opacity:.85}
.yt-auto{margin-left:6px;padding:0 6px;border:1px solid var(--vcl-line);border-radius:var(--vcl-radius-sm);background:var(--vcl-neutral);font-size:.7rem;color:var(--vcl-muted);white-space:nowrap;cursor:help}

@media (max-width:600px){.ph{font-size:20px}}

/* ---- TheGamesDB fields (detail page) ---- */
.esrb-badge{display:inline-block;min-width:28px;padding:0 6px;margin-right:6px;border:1px solid var(--vcl-line);border-radius:var(--vcl-radius-sm);background:var(--vcl-neutral);font-size:12px;font-weight:700;text-align:center;color:var(--vcl-text)}
.facts td.releases div{font-size:13.5px;line-height:1.5}
.desc-source a{font-weight:500}

/* ---- Gallery thumbnail strip (ImageGallery.razor): all images, grouped by kind; active = VCL blue ---- */
.thumb-status{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:10px 2px 6px;font-size:12.5px;color:var(--vcl-muted);min-height:18px}
.thumb-pos{font-weight:700;color:var(--vcl-text);font-variant-numeric:tabular-nums}
.thumb-cur-group{color:var(--vcl-primary-dark);font-weight:500}
.thumb-cur-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.thumb-strip{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:4px 4px 10px;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--vcl-line) transparent}
.thumb-strip::-webkit-scrollbar{height:6px} .thumb-strip::-webkit-scrollbar-thumb{background:var(--vcl-line);border-radius:3px}
.thumb-group{flex:0 0 auto;display:flex;flex-direction:column;gap:4px}
.thumb-group+.thumb-group{padding-left:14px;border-left:1px solid var(--vcl-line)}
.thumb-group-label{font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--vcl-muted);white-space:nowrap;position:sticky;left:0}
.thumb-group-label span{display:inline-block;min-width:16px;margin-left:2px;padding:0 5px;border-radius:8px;background:var(--vcl-neutral);text-align:center;letter-spacing:0}
.thumb-group-items{display:flex;gap:8px}
.thumb-btn{flex:0 0 auto;width:72px;height:54px;padding:0;border:2px solid transparent;border-radius:var(--vcl-radius-sm);background:var(--vcl-neutral);
  cursor:pointer;overflow:hidden;scroll-snap-align:start;box-shadow:0 1px 2px rgba(0,0,0,.12);transition:border-color .12s,box-shadow .12s,transform .12s}
.thumb-btn img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.thumb-btn.kind-logo img,.thumb-btn.kind-wheel img,.thumb-btn.kind-clearlogo img{object-fit:contain;background:#fff;padding:4px}
.thumb-btn.kind-boxart img{object-fit:contain}
.thumb-btn.pixel{background:#fff} .thumb-btn.pixel img{object-fit:cover;object-position:center top;image-rendering:pixelated}
.thumb-btn:hover{border-color:var(--vcl-line);transform:translateY(-1px)}
.thumb-btn:focus-visible{outline:2px solid var(--vcl-primary-dark);outline-offset:2px}
.thumb-btn.active{border-color:var(--vcl-primary);box-shadow:0 0 0 2px rgba(0,159,227,.28)}
@media (max-width:599.98px){ .thumb-btn{width:60px;height:46px} .thumb-strip{gap:10px} .thumb-group+.thumb-group{padding-left:10px} }

/* ---- Sprites (GameSprites.razor) + pixel art everywhere it is scaled ---- */
img.pixel,.gallery-img.sprite{image-rendering:pixelated;image-rendering:crisp-edges}
img.pixel{image-rendering:pixelated}
.gallery-img.sprite{background:#fff;padding:8px}
.sprite-platform{font-size:.9rem}
.sprite-card{margin:0;height:100%;display:flex;flex-direction:column;background:var(--vcl-card);border-radius:var(--vcl-radius-card);box-shadow:var(--vcl-shadow-card);overflow:hidden;transition:box-shadow .15s}
.sprite-card:hover{box-shadow:var(--vcl-shadow-card-hover)}
.sprite-frame{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff;
  background-image:linear-gradient(45deg,var(--vcl-neutral) 25%,transparent 25%,transparent 75%,var(--vcl-neutral) 75%),
                   linear-gradient(45deg,var(--vcl-neutral) 25%,transparent 25%,transparent 75%,var(--vcl-neutral) 75%);
  background-size:16px 16px;background-position:0 0,8px 8px;border-bottom:1px solid var(--vcl-line);cursor:zoom-in}
.sprite-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top;display:block;padding:6px}
.sprite-frame.tall img{object-fit:cover;padding:0}   /* very tall sheets: show the top at a readable scale */
.sprite-caption{padding:10px 12px 12px;font-size:.8rem;flex:1}
.sprite-name{color:var(--vcl-text);font-weight:700;font-size:.9rem;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sprite-meta{color:var(--vcl-muted);font-size:.78rem;line-height:1.45}
.sprite-cat{display:inline-block;padding:0 6px;margin-right:4px;border:1px solid var(--vcl-primary);border-radius:var(--vcl-radius-sm);color:var(--vcl-primary-dark);font-weight:500;font-size:.7rem}
.sprite-prov{color:var(--vcl-muted);font-size:.7rem;margin-top:4px;opacity:.85;cursor:help}
.sprite-search{white-space:normal}
.linkform{display:inline;margin:0}
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--vcl-primary-dark);cursor:pointer}
.linklike:hover{text-decoration:underline}

/* Pixel-art viewer (wwwroot/gallery.js) */
dialog.sprite-viewer{position:fixed;inset:0;margin:auto;width:min(1100px,96vw);height:fit-content;max-height:92vh;padding:0;border:0;border-radius:var(--vcl-radius-card);box-shadow:0 12px 40px rgba(0,0,0,.35);
  background:var(--vcl-card);color:var(--vcl-text);font-family:var(--vcl-font);overflow:hidden}
dialog.sprite-viewer::backdrop{background:rgba(17,24,39,.72)}
.sv-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:var(--vcl-primary);color:#fff}
.sv-title{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.sv-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sv-tools button,.sv-tools a{min-width:34px;height:32px;padding:0 10px;border:0;border-radius:var(--vcl-radius-sm);background:rgba(255,255,255,.18);color:#fff;
  font:500 14px var(--vcl-font);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.sv-tools button:hover,.sv-tools a:hover{background:rgba(255,255,255,.3)}
.sv-zoom{font-size:12px;min-width:110px;text-align:center;font-variant-numeric:tabular-nums}
.sv-body{overflow:auto;max-height:calc(92vh - 110px);padding:8px;text-align:center;
  background-color:#fff;background-image:linear-gradient(45deg,var(--vcl-neutral) 25%,transparent 25%,transparent 75%,var(--vcl-neutral) 75%),
  linear-gradient(45deg,var(--vcl-neutral) 25%,transparent 25%,transparent 75%,var(--vcl-neutral) 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.sv-body img{image-rendering:pixelated;max-width:none;display:inline-block}
.sv-credit{padding:8px 12px 10px;font-size:12px;color:var(--vcl-muted);border-top:1px solid var(--vcl-line)}
@media (max-width:599.98px){ .sv-zoom{min-width:0} .sv-tools a.sv-open{display:none} }

/* ---- Arcade Database (ADB) overlay: source tag + artwork strip ---- */
.src-tag{display:inline-block;margin-left:6px;padding:0 5px;border-radius:4px;font-size:10px;font-weight:700;line-height:16px;letter-spacing:.04em;
  background:#fff4d6;color:#8a5a00;border:1px solid #f0c060;text-decoration:none!important;vertical-align:middle}
.adb-images{display:flex;flex-wrap:wrap;gap:10px}
.adb-images figure{margin:0;width:120px;text-align:center}
.adb-images img{width:120px;height:120px;object-fit:contain;background:#f4f6f8;border-radius:6px;border:1px solid var(--vcl-line)}
.adb-images figcaption{font-size:11px;color:var(--vcl-muted)}

/* ---- Wishlist (WishlistToggle.razor, WishlistPanel.razor; data/wishlist.json) ---- */
:root{--wish-red:var(--vcl-danger)}   /* VCL danger red for the "on" heart */
/* Home: browse on the left, Wishlist panel on the right from md (960px); below the results on narrow screens. */
.home-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.home-main{min-width:0}
.home-aside{min-width:0}
@media (min-width:960px){
  .home-layout{grid-template-columns:minmax(0,1fr) 280px}
  .home-aside{padding-top:24px}
  .wish-panel{position:sticky;top:calc(var(--mud-appbar-height) + 44px);max-height:calc(100vh - var(--mud-appbar-height) - 64px);overflow-y:auto}
}
@media (min-width:1280px){ .home-layout{grid-template-columns:minmax(0,1fr) 300px} }
.wish-panel{padding:14px 12px 10px}
.wish-head{display:flex;align-items:center;gap:8px;padding:0 4px 8px;border-bottom:1px solid var(--vcl-line);margin-bottom:6px}
.wish-head-icon{color:var(--wish-red)}
.wish-heading{flex:1}
.wish-count{min-width:24px;padding:0 7px;border-radius:12px;background:var(--vcl-primary);color:#fff;font-size:12px;font-weight:700;line-height:22px;text-align:center}
.wish-empty{padding:18px 8px 14px;text-align:center;color:var(--vcl-muted);font-size:13.5px;line-height:1.45}
.wish-empty b{color:var(--vcl-text);font-weight:500}
.wish-empty-icon{font-size:36px!important;color:var(--vcl-line);margin-bottom:4px}
.wish-list{list-style:none;margin:0;padding:0}
.wish-item{display:flex;align-items:center;gap:2px;border-radius:var(--vcl-radius-sm);transition:background .12s}
.wish-item:hover{background:#F0F7FC}
.wish-item+.wish-item{border-top:1px solid #EEF0F3}
.wish-link{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:7px 4px;color:inherit}
.wish-link:hover{text-decoration:none}
.wish-link:hover .wish-title{color:var(--vcl-primary-dark)}
.wish-link:focus-visible{outline:2px solid var(--vcl-primary-dark);outline-offset:-2px;border-radius:var(--vcl-radius-sm)}
.wish-thumb{flex:0 0 52px;width:52px;border-radius:6px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.14)}
.wish-thumb .ph{font-size:10px;text-shadow:1px 1px 0 rgba(0,0,0,.25)}
.wish-thumb .ph-wrap small{display:none}
.wish-thumb .thumb img.logo-img{padding:3px}
.wish-text{min-width:0}
.wish-title{font-weight:700;font-size:14px;line-height:1.25;color:var(--vcl-text);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wish-meta{font-size:12px;color:var(--vcl-primary-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wish-remove{flex:0 0 auto;color:var(--vcl-muted)!important}
.wish-remove:hover{color:var(--vcl-danger)!important}
/* Heart on game cards (Home): round white button over the top-right corner of the cover. */
.game-card{position:relative}
.wish-btn{position:absolute;top:6px;right:6px;z-index:2;width:32px;height:32px;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);color:var(--vcl-muted);
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .12s,color .12s,background .12s}
.wish-btn:hover{color:var(--wish-red);transform:scale(1.08)}
.wish-btn:focus-visible{outline:2px solid var(--vcl-primary-dark);outline-offset:2px}
.wish-btn.on{color:var(--wish-red);background:#fff}
/* Detail page: heart button next to the title. */
.detail-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.detail-title-row h1{flex:1 1 260px;min-width:0}
.wish-toggle{border-radius:var(--vcl-radius-btn)!important;white-space:nowrap;margin-top:2px}
.wish-toggle.on{background:#FDECEC!important}
.wish-toggle.on .mud-button-icon-start{color:var(--wish-red)}

/* Links page (/links) */
.link-card{height:100%;display:flex;flex-direction:column}
.link-name{font-weight:600;font-size:1.05rem}
.link-host{margin-top:-2px}
.link-platforms .mud-chip{margin:0}
.link-used{margin-top:auto!important;padding-top:6px}
.link-used-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;background:#2e7d32;color:#fff;flex:0 0 auto;cursor:help}
.link-used-badge .mud-icon-root{font-size:16px;color:#fff}
/* Data-use badge (free / conditional / none / unknown) next to the used check, and the "Data use" filter chips */
.link-meta{flex-wrap:wrap;justify-content:flex-end}
.link-data-badge{display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:4px;font-size:.72rem;font-weight:600;line-height:1;white-space:nowrap;cursor:help;border:1px solid transparent}
.link-data-badge.data-free{background:#e8f5e9;color:#1b5e20;border-color:#a5d6a7}
.link-data-badge.data-conditional{background:#fff3e0;color:#8a4b00;border-color:#ffcc80}
.link-data-badge.data-none{background:#eeeeee;color:#555;border-color:#e0e0e0}
.link-data-badge.data-unknown{background:transparent;color:#666;border-color:#9e9e9e;border-style:dashed}
.links-data-filter .mud-chip{margin:2px}