/* The same satin light and route lines as the desktop workspace. */
#games { position:relative; isolation:isolate; }
.library-backdrop { position:absolute; inset:-36px calc((min(1280px,100vw - 72px) - 100vw)/2); z-index:-1; overflow:hidden; pointer-events:none; background:radial-gradient(ellipse at 90% 45%,#163a2b88,transparent 64%); mask-image:linear-gradient(transparent,#000 15% 85%,transparent); }
.library-backdrop:before,.library-backdrop:after { content:""; position:absolute; inset:-20%; background-repeat:no-repeat; }
.library-backdrop:before { background:linear-gradient(127deg,transparent 22%,#43b98c0a 32%,#43b98c24 43%,#81e4b41b 48%,transparent 60%); animation:library-satin 14s ease-in-out infinite alternate; }
.library-backdrop:after { background:linear-gradient(135deg,transparent 40%,#4c9d9a0c 50%,#4c9d9a2a 62%,transparent 76%); animation:library-satin 18s ease-in-out -7s infinite alternate-reverse; }
.library-backdrop svg { position:absolute; inset:0; width:100%; height:100%; }
.library-flow-track { stroke:#67c99c1c; stroke-width:1; }
.library-flow-pulse { stroke:#78e7b563; stroke-width:1.5; stroke-linecap:round; stroke-dasharray:65 935; animation:library-route 11s linear infinite; }
.library-flow-pulse:last-child { stroke:#70c9d14f; animation-duration:15s; animation-delay:-7s; }
@keyframes library-satin { from {transform:translate3d(-9%,5%,0) rotate(-5deg);} to {transform:translate3d(9%,-5%,0) rotate(5deg);} }
@keyframes library-route { from {stroke-dashoffset:1000;} to {stroke-dashoffset:0;} }
#games[data-paused=true] .library-backdrop:before,#games[data-paused=true] .library-backdrop:after,#games[data-paused=true] .library-flow-pulse { animation-play-state:paused; }
#games .catalog-shell { background:linear-gradient(120deg,#12261dcf,#0c1912b8); border:1px solid #3c60494d; border-radius:12px; padding:22px; box-shadow:0 14px 55px #00000015; }
#games .game-tools { align-items:center; margin-bottom:23px; gap:20px; }
#games .game-tabs { display:flex; flex-wrap:nowrap; gap:5px; border:0; border-radius:0; background:transparent; padding:0; }
#games .game-tabs button { position:relative; border:1px solid transparent; border-radius:7px; min-height:46px; padding:8px 14px 8px 9px; gap:9px; font-size:12px; color:#96b3a2; background:transparent; transition:background .2s,color .2s,border-color .2s; }
#games .game-tabs button svg { width:30px; height:30px; padding:6px; border-radius:5px; background:#25453570; color:#8fb5a0; stroke-width:1.5; }
#games .game-tabs button[aria-pressed=true] { background:linear-gradient(115deg,#2d5741,#203c2d); color:#e1f1e7; border-color:#649a764f; }
#games .game-tabs button[aria-pressed=true]:after { content:""; position:absolute; left:13px; right:13px; bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,#9eddb7,transparent); }
#games .game-tabs button[aria-pressed=true] svg { background:#659d7830; color:#b5e4c9; }
#games .game-tabs button:hover { background:#244331a0; color:#d1e6da; }
#games .game-tabs button:focus-visible { box-shadow:inset 0 0 0 2px #96c7a9; }
#games .game-search { background:#0a1711a6; border-color:#3a604766; border-radius:7px; width:270px; min-height:44px; }
#games .game-search:focus-within { border-color:#8cb99c; box-shadow:0 0 0 2px #7eb69715; }
#games .game-search input { min-width:0; }
#games .catalog-caption { font-size:10px; padding-bottom:15px; color:#89a795; }
#games .catalog-caption > span:first-child { display:flex; align-items:center; gap:7px; max-width:none; }
#games .catalog-caption i { width:4px; height:4px; border-radius:50%; background:#8ac5a2; }
#games .catalog-caption #catalog-results { color:#749682; flex:none; }
.catalog-viewport { --visible-cards:5; --card-gap:12px; overflow:hidden; touch-action:pan-y; padding-block:5px; mask-image:linear-gradient(90deg,transparent,#000 8px calc(100% - 8px),transparent); }
#games .site-game-grid { display:flex; gap:var(--card-gap); min-height:136px; width:100%; will-change:transform; }
#games .site-game { position:relative; flex:0 0 calc((100% - (var(--visible-cards) - 1)*var(--card-gap))/var(--visible-cards)); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:12px; height:158px; min-height:0; padding:17px; border:1px solid #456d515c; border-radius:8px; background:linear-gradient(140deg,#1c3527f2,#102319f2); text-align:left; animation:none; transition:background .2s,border-color .2s; }
#games .site-game:after { content:"↗"; position:absolute; top:15px; right:15px; font-size:14px; color:#79a68a; opacity:.45; }
#games .site-game:hover { transform:none; border-color:#7ca28c; background:linear-gradient(140deg,#294a36,#183223); }
#games .site-game:focus-visible { outline:0; box-shadow:inset 0 0 0 2px #9cd1b0; }
#games .site-game:hover:after { color:#c6e7d3; opacity:1; }
#games .site-game-art,#games .site-app .site-game-art { width:46px; height:56px; border-radius:5px; border:0; background:#11251b; flex:none; }
#games .site-app .site-game-art { width:48px; height:48px; background:#29433466; margin-block:4px; }
#games .site-game-art img { padding:0; object-fit:cover; }
#games .site-app .site-game-art img { padding:5px; object-fit:contain; }
#games .site-game-copy { width:100%; padding:0; }
#games .site-game strong { font-size:13px; line-height:1.35; height:auto; -webkit-line-clamp:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; font-weight:650; }
#games .site-game small { margin-top:4px; font-size:10px; color:#91af9d; }
#games .catalog-empty { width:100%; align-self:center; padding:25px 12px; font-size:13px; }
#games .catalog-bottom { margin-top:17px; align-items:center; }
#games .catalog-bottom > p { font-size:10px; color:#7e9b89; }
.catalog-playback { display:flex; align-items:center; gap:5px; flex:none; }
.catalog-playback button { display:grid; place-items:center; width:31px; height:31px; border:1px solid #45694f88; border-radius:5px; color:#a9cbb7; background:#1e392a80; transition:background .2s,border-color .2s; }
.catalog-playback button:hover:not(:disabled) { background:#335a40; border-color:#7ea98b; }
.catalog-playback button:disabled { opacity:.3; cursor:default; }
.catalog-playback button:focus-visible { outline:2px solid #90c6a4; outline-offset:2px; }
.catalog-playback svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; }
.catalog-motion-label { display:flex; align-items:center; gap:7px; margin-right:10px; font-size:9px; color:#8baa97; }
.catalog-motion-label i { width:13px; height:10px; background:repeating-linear-gradient(90deg,#7bb994 0 2px,transparent 2px 5px); opacity:.55; transform:skew(-15deg); }
#games[data-moving=true] .catalog-motion-label i { opacity:1; }
@media(max-width:1100px) {
  .catalog-viewport { --visible-cards:4; }
  #games .game-tabs button { padding-right:10px; gap:6px; }
  #games .site-game { padding:15px; }
}
@media(max-width:860px) {
  .catalog-viewport { --visible-cards:3; }
  #games .game-tools { align-items:stretch; flex-direction:column; gap:15px; }
  #games .game-search { width:100%; }
  #games .game-tabs { width:100%; }
  #games .game-tabs button { flex:1; }
}
@media(max-width:640px) {
  .library-backdrop { left:-20px; right:-20px; }
  .catalog-viewport { --visible-cards:1.6; --card-gap:10px; }
  #games .catalog-shell { padding:16px 12px; border-radius:10px; }
  #games .game-tabs { gap:3px; }
  #games .game-tabs button { min-width:0; min-height:42px; padding:6px 7px; font-size:10px; gap:5px; white-space:nowrap; }
  #games .game-tabs button svg { display:block; width:21px; height:21px; padding:3px; }
  #games .game-search { min-height:42px; }
  #games .catalog-caption { font-size:9px; gap:7px; }
  #games .catalog-caption > span:first-child { max-width:165px; line-height:1.5; }
  #games .site-game { height:151px; padding:15px; gap:12px; }
  #games .site-game strong { font-size:13px; }
  #games .site-game small { font-size:10px; }
  #games .catalog-bottom { gap:12px; }
  #games .catalog-bottom > p { font-size:9px; line-height:1.6; max-width:190px; }
  .catalog-motion-label { display:none; }
}
@media(max-width:380px) {
  .catalog-viewport { --visible-cards:1.25; }
  #games .game-tabs button { font-size:9px; gap:3px; padding:6px 4px; }
  #games .game-tabs button svg { width:18px; height:18px; padding:2px; }
  #games .catalog-caption > span:first-child { max-width:145px; }
  #games .catalog-caption #catalog-results { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .library-backdrop:before,.library-backdrop:after,.library-flow-pulse { animation:none; }
  .library-flow-pulse { display:none; }
  #catalog-motion { display:none; }
}