/* Mobile effects use opacity/translation only: no animated filters or gradient stops. */
@media(pointer:coarse) and (max-width:1200px){
  :root{--interface-scale:1}
  #particles,.ambient,.card-spark{display:none!important}
  .header,.header button,.hero-rating-tile,dialog,dialog::backdrop,.splash{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .backdrop,.catalog,.hero,.hero>*,.hero-actions>button,.game-card,.game-card img{filter:none!important}
  .backdrop{transition:opacity .16s linear!important}
  .backdrop[data-bg=drone]{background-image:url('assets/drone-mobile.webp')}
  .backdrop[data-bg=boxes]{background-image:url('assets/boxes-mobile.webp')}
  .scene-shade{background:none!important;transition:none!important}
  .scene-shade::before,.scene-shade::after{content:'';position:absolute;inset:0;transition:opacity .16s linear;pointer-events:none}
  .scene-shade::before{background:linear-gradient(180deg,#090a0ed9 0%,#090a0e44 32%,#090a0e88 60%,#090a0ef5 100%);opacity:1}
  .scene-shade::after{background:linear-gradient(180deg,transparent 15%,#090a0e11 28%,#090a0eb3 52%,#090a0ef5 100%);opacity:0}
  .game-open .scene-shade::before{opacity:0}.game-open .scene-shade::after{opacity:1}
  .catalog,.game-open .catalog{transform:none!important;transition:opacity .14s,visibility 0s .14s!important}
  .hero>:not(.hero-actions),.hero-actions>button{transform:translateY(8px)!important;transition:opacity .16s,transform .16s!important}
  .game-open .hero>:not(.hero-actions),.game-open .hero-actions>button{transform:translateY(0)!important;transition-delay:0s!important}
  .game-card:before,.game-card:after{animation:none!important;filter:none!important}
  .game-card{box-shadow:none!important}.game-card.selected{border-color:#d9b978}
  .game-list{contain:layout style}.header .nav-button,.header .profile{background:#1618209c}
  .game-player{zoom:1;height:100dvh;padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
  .player-toolbar{height:calc(38px + env(safe-area-inset-top));min-height:38px;padding:env(safe-area-inset-top) 8px 0;gap:8px}
  .player-toolbar .secondary{height:32px;min-height:32px;padding:0 9px;font-size:11px}
  #exit-player{min-width:40px;max-width:140px;white-space:nowrap}
  #player-title{font-size:11px}#player-controls{font-size:0;padding:0!important;min-width:36px;width:36px}
  #player-fullscreen{font-size:22px;min-width:36px;padding:0}
  .player-loading{inset:calc(38px + env(safe-area-inset-top)) 0 0}
}
body.playing-game #particles,body.playing-game .backdrops,body.playing-game .scene-shade,body.playing-game>.ambient{visibility:hidden}
html:fullscreen{--interface-scale:1;zoom:1}html:fullscreen .game-player{zoom:1;height:100dvh}
#player-fullscreen{flex-shrink:0}#toast{z-index:100}
@media(pointer:coarse) and (max-width:600px){
  .header{height:auto;min-height:120px;padding:14px 18px;gap:14px;display:grid;grid-template-columns:1fr auto}
  .header .brand{grid-column:1;font-size:11px;letter-spacing:2px;gap:7px}.header .brand-mark{width:28px;height:34px}
  .header nav{grid-column:1/-1;grid-row:2;gap:8px;width:100%;height:auto;justify-content:space-between}
  .header .nav-button{flex:1;padding:11px 8px;font-size:12px;text-align:center}
  .header-actions{grid-column:2;grid-row:1;padding:0;margin:0;gap:8px}
  .header-actions #controller{display:grid;width:32px;min-width:32px;height:32px}.header-actions #profile{padding:3px;width:34px;min-width:34px;height:34px}.header-actions #profile>span:last-child{display:none}.header-actions #profile .avatar{width:26px;height:26px}
  .music-toggle{top:auto;bottom:12px;right:12px}.playing-game .music-toggle{display:none}
  main{padding:145px 18px 20px}.game-open main{padding-top:18px;padding-bottom:20px}
  .game-list,.game-list.has-many-games{min-height:0;gap:14px}.game-card,.game-list.has-many-games .game-card{width:230px;min-width:230px;flex-shrink:0}
  .game-list{overflow-x:auto;padding:8px 3px 18px;scrollbar-width:none}
  .hero,.game-open .hero{margin-top:0!important;min-height:0!important;height:auto;gap:10px}.game-open .hero{max-height:calc(100dvh - 40px)!important}
  .hero h1{font-size:28px}.hero .description{font-size:13px;line-height:1.5}.hero .eyebrow{display:none}
  .hero .game-meta{gap:5px}.hero .hero-actions{gap:8px}.hero-actions .primary{width:145px;min-width:0}
}
@media(prefers-reduced-motion:reduce){.scene-shade::before,.scene-shade::after{transition:none!important}}

@media(pointer:coarse) and (max-width:600px){
  .section-label{margin-bottom:16px;line-height:1.4;font-size:9px;letter-spacing:1.5px}
  .game-list,.game-list.has-many-games{margin:0;padding:8px 3px 20px;max-width:100%;width:100%;gap:16px}
  .game-list .game-card,.game-list.has-many-games .game-card{flex:0 0 min(82vw,320px);width:min(82vw,320px);min-width:0}
  .catalog{width:100%;max-width:100%}
}
@media(pointer:coarse) and (min-width:601px) and (max-width:1200px) and (max-height:550px){
  .header{height:72px;min-height:0;padding:10px 20px;gap:18px}
  .header .brand{font-size:11px;letter-spacing:2px;gap:8px}.header .brand-mark{width:30px;height:36px}
  .header nav{gap:8px}.header .nav-button{font-size:12px;padding:10px 14px}.header-actions{gap:8px;padding-right:0}
  .header-actions .profile{max-width:100px}.header-actions .profile>span:last-child{display:none}
  main{padding:96px 24px 16px}.section-label{margin-bottom:12px}
  .game-list,.game-list.has-many-games{margin:0;padding:8px 3px 16px;gap:16px;max-width:100%;overflow-x:auto}
  .game-list .game-card{flex:0 0 240px;width:240px;min-width:240px}
  .game-open main{padding-top:16px}.hero,.game-open .hero{height:auto;min-height:0;max-height:calc(100dvh - 32px)!important}
  .music-toggle{top:auto;bottom:12px;right:12px}.playing-game .music-toggle{display:none}
}

@media(pointer:coarse) and (max-width:600px){.header-actions #search-toggle,.header-actions #controller,.header-actions #profile{width:34px;min-width:34px;height:34px;display:grid;place-items:center;padding:0}.header-actions svg{width:22px;height:22px;display:block}.header .brand{min-width:0}}

/* The player uses a narrow left rail; the game keeps the full available height. */
.game-player{flex-direction:row;--player-rail:52px}
.game-player .player-toolbar{width:var(--player-rail);height:100%;min-height:0;flex:0 0 var(--player-rail);flex-direction:column;gap:12px;padding:8px 4px;border-bottom:0;border-right:1px solid #ffffff15;overflow-y:auto}
.game-player .player-toolbar .secondary{width:42px;min-width:0;height:42px;min-height:42px;padding:0;font-size:0;flex-shrink:0}
#exit-player::before{content:'×';font-size:28px}
#player-controls::before{content:'⚙';font-size:24px}
.game-player .player-toolbar #player-fullscreen{font-size:24px;margin-top:auto}
#player-title{display:none}
#game-frame-host{height:100%;min-width:0;flex:1}
.game-player .player-loading{inset:0 0 0 var(--player-rail)}
@media(pointer:coarse) and (max-width:1200px){
 .game-player{--player-rail:48px}
 .game-player .player-toolbar{padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom))}
 .game-player .player-toolbar .secondary{width:38px;height:38px;min-height:38px}
}
@media(pointer:fine){main{padding-bottom:10px}.game-open .hero{padding-bottom:0}}

/* Explicit layout for the detail deck: content owns its height. */
#portal-fullscreen{width:42px;min-width:42px;height:42px;padding:0;border-radius:50%;font-size:24px;display:grid;place-items:center}
body.game-open main{padding-bottom:0}
body.game-open .hero{height:auto;min-height:0;padding-bottom:16px;max-height:calc(100dvh / var(--interface-scale) - 24px);grid-template-rows:auto auto auto auto;overflow-y:auto}
body.game-open .hero::before{display:none}
body.game-open .hero{background:linear-gradient(180deg,#090a0ebd,#090a0ee8);border-radius:18px 18px 0 0;padding:18px 20px 16px}
.hero .hero-actions{flex-wrap:wrap;min-width:0}
.hero .hero-rating-tile{position:relative;margin:0}
.hero .eyebrow{display:none}
@media(pointer:coarse) and (max-width:1200px){
 .header-actions #portal-fullscreen{width:34px;min-width:34px;height:34px;font-size:22px}
 .game-open main{padding:12px 14px 0!important;display:flex;justify-content:flex-end}
 body.game-open .hero{display:flex!important;flex-direction:column;align-items:stretch;gap:14px;width:100%;height:auto!important;max-height:calc(100dvh - 24px)!important;margin:0!important;padding:18px 16px 24px;flex-shrink:1;background:#090c14ed;border:1px solid #ffffff18;border-radius:18px 18px 0 0;overflow-y:auto!important}
 .game-open .hero>*{flex-shrink:0;min-width:0;grid-column:auto!important;grid-row:auto!important;max-width:100%}
 .game-open .hero .back-to-menu{align-self:flex-start;order:0}
 .game-open .hero h1{order:1;font-size:27px;line-height:1.2;letter-spacing:-.5px;margin:0}
 .game-open .hero .description{order:2;color:#e0e2e8;font-size:14px;line-height:1.6;max-width:none;overflow-wrap:anywhere}
 .game-open .hero .game-meta{order:3;gap:7px}
 .game-open .hero .hero-actions{order:4;display:flex!important;flex-wrap:wrap;gap:10px;margin:0;align-items:center}
 .game-open .hero .hero-actions .primary{width:150px;min-width:0;flex:1 1 140px}
 .game-open .hero .hero-actions .secondary{flex:1 1 110px;padding:0 16px}
 .game-open .hero .hero-actions .favorite{width:46px;min-width:46px;flex:0 0 46px;font-size:26px}
 .game-open .hero .hero-actions button{height:46px}
 .game-open .hero .hero-rating-tile{order:5;align-self:stretch;justify-self:auto;width:100%;min-width:0;padding:12px 16px;box-sizing:border-box}
 .game-open .hero .eyebrow{display:none}
 .game-open .music-toggle{bottom:auto;top:8px;right:8px;width:30px;height:30px}
}
@media(pointer:coarse) and (max-width:380px){.header .brand{font-size:9px;letter-spacing:1px}.header-actions{gap:4px}.header{padding-left:12px;padding-right:12px;gap:8px}}

@media(pointer:coarse) and (max-width:1200px){.game-open main>.catalog{position:absolute;left:14px;right:14px;width:auto;top:96px}.game-open main>.hero{flex:0 1 auto}}

/* Use the safe inset for the rail instead of adding a second empty strip. */
.game-player{padding-left:0!important;padding-right:0!important}
.game-player .player-toolbar{order:0;padding-left:4px}
#player-controls{order:0}
#exit-player{order:1;margin-top:auto}
.game-player .player-toolbar #player-fullscreen{order:2;margin-top:0}
#player-controls::after{content:none!important}
@media(pointer:coarse) and (max-width:1200px){.game-player{--player-rail:max(48px,env(safe-area-inset-left))}}

.header-actions{position:relative}
#fullscreen-hint{position:absolute;top:calc(100% + 12px);left:0;z-index:12;width:min(300px,85vw);padding:14px;background:#151820f5;border:1px solid #d9b978;border-radius:12px;box-shadow:0 8px 25px #0008;color:#eee;font-size:13px;line-height:1.5}
#fullscreen-hint button{display:block;margin-top:10px;border:1px solid #d9b97866;background:#d9b97822;border-radius:18px;padding:6px 16px}
@media(max-width:600px){#fullscreen-hint{left:auto;right:0;width:260px}}

.hero-rating-tile>.feedback-stars,.hero-rating-tile>button,.hero-rating-tile>small{grid-column:1/-1}.hero-rating-tile .feedback-stars{display:flex;gap:6px}.hero-rating-tile .feedback-stars button{font-size:24px;padding:4px;min-width:32px}.hero-rating-tile>small:empty{display:none}

/* Six visible mobile catalogue slots; only the catalogue scrolls. */
@media(pointer:coarse) and (max-width:1200px){
 body:not(.game-open) main{display:flex;flex-direction:column;padding:136px 14px 48px;min-height:0}
 body:not(.game-open) main>.hero{display:none}
 body:not(.game-open) .catalog{display:flex;flex-direction:column;width:100%;max-width:none;min-height:0;height:100%;flex:1}
 .catalog .section-label{flex-shrink:0;margin-bottom:10px;font-size:9px;line-height:14px}
 .catalog .game-list,.catalog .game-list.has-many-games{--catalog-rows:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:min(calc((100% - 20px) / 3),calc((100vw - 44px) * .29375));gap:10px;flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:3px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;align-content:start}
 .catalog .game-list .game-card,.catalog .game-list.has-many-games .game-card{width:100%;min-width:0;max-width:none;height:100%;min-height:0;aspect-ratio:auto;border-radius:12px;overflow:hidden}
 .catalog .game-card img{object-fit:cover;border-radius:10px;background:#101218}
 .catalog .game-card.selected:after{display:none}
 .catalog .game-rating-badge{font-size:10px;padding:3px 6px;bottom:5px;left:5px}
 #search-dialog{padding:12px;gap:8px;height:100dvh;max-height:100dvh}
 #search-dialog .search-toolbar{padding:4px 8px;gap:8px;border-radius:12px}
 #search-dialog .search-toolbar input{font-size:16px;padding:6px 0}
 #search-dialog .search-toolbar>button{width:32px;height:32px;flex-shrink:0}
 #search-dialog .search-symbol{font-size:23px}
 #search-dialog .search-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 #search-dialog .search-filters select{width:100%;padding:7px 4px;font-size:10px;text-overflow:ellipsis}
 #search-dialog .search-status{font-size:11px}
 #search-dialog .search-results{flex:1;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:min(calc((100% - 16px) / 3),calc((100vw - 32px) * .29375));gap:8px;padding:0;overflow-y:auto;overflow-x:hidden}
 #search-dialog .search-game-card{display:flex;height:100%;min-height:0;align-self:stretch;padding:0;border-radius:10px}
 #search-dialog .search-game-card img{flex:1;min-height:0;height:0;aspect-ratio:auto;object-fit:cover}
 #search-dialog .search-game-card strong{flex-shrink:0;font-size:12px;line-height:15px;margin:5px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #search-dialog .search-game-card small{display:none}
}
@media(pointer:coarse) and (max-width:1200px) and (orientation:landscape){
 body:not(.game-open) main{padding:76px 18px 12px}
 .catalog .game-list,.catalog .game-list.has-many-games{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:min(calc((100% - 10px) / 2),calc((100vw - 62px) * .195833))}
 #search-dialog .search-results{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:min(calc((100% - 8px) / 2),calc((100vw - 40px) * .195833))}
 #search-dialog{padding:8px 12px;gap:6px}
}

@media(pointer:coarse) and (max-width:1200px){
 .catalog .game-list .game-card,#search-dialog .search-game-card{border:1px solid #d9b97899;background:transparent}
 .catalog .game-card.selected,.catalog .game-card:hover,#search-dialog .search-game-card:hover{border-color:#f2d18c}
 #search-dialog .search-game-card{position:relative;display:block}
 #search-dialog .search-game-card img{width:100%;height:100%;display:block;object-fit:cover}
 #search-dialog .search-game-card strong{position:absolute;bottom:0;left:0;right:0;margin:0;padding:14px 7px 6px;background:linear-gradient(transparent,#000b);color:#fff;text-shadow:0 1px 3px #000}
}

/* Fit the card itself into each slot, keeping the artwork's landscape ratio. */
@media(pointer:coarse) and (max-width:1200px){
 .catalog .game-list .game-card,.catalog .game-list.has-many-games .game-card,
 #search-dialog .search-game-card{width:auto;max-width:100%;height:100%;aspect-ratio:800 / 470;justify-self:start;box-sizing:border-box}
 .catalog .game-card img,#search-dialog .search-game-card img{object-fit:fill}
}






body.game-open .scene-shade{background:linear-gradient(180deg,transparent 35%,#090a0e18 43%,#090a0e66 55%,#090a0ec9 72%,#090a0ef5 90%,#090a0e 100%)!important}
body.game-open .scene-shade::before,body.game-open .scene-shade::after{display:none}
body.game-open .hero{background:transparent;border:0;border-radius:0}
@media(min-width:1000px) and (pointer:fine){
 body.game-open main{padding-top:24px}
 body.game-open .hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.2fr) minmax(240px,.75fr);grid-template-rows:auto 1fr auto;gap:18px 28px;padding:20px 0 18px;height:auto;max-height:calc(100dvh / var(--interface-scale) - 48px);align-items:start}
 .game-open .hero .back-to-menu{grid-column:1;grid-row:1}
 .game-open .hero h1{grid-column:1;grid-row:2;align-self:center;font-size:clamp(25px,2.5vw,40px);line-height:1.15;overflow-wrap:anywhere;min-width:0}
 .game-open .hero .description{grid-column:2;grid-row:2;align-self:start;max-width:none;font-size:14px;line-height:1.65;min-width:0;color:#d5d6dd;overflow-wrap:anywhere}
 .game-open .hero .game-meta{grid-column:2;grid-row:3;align-self:start;min-width:0}
 .game-open .hero .hero-actions{grid-column:1;grid-row:3;display:flex;flex-wrap:wrap;align-self:end;gap:8px;margin:0;min-width:0}
 .game-open .hero .hero-actions .primary{width:150px;min-width:0}
 .game-open .hero .hero-actions .secondary{padding:0 16px}
 .game-open .hero .hero-rating-tile{grid-column:3;grid-row:2/4;align-self:start;justify-self:stretch;width:100%;min-width:0;padding:16px;gap:8px;background:#11131b66}
 .game-open .hero .hero-rating-tile>button{white-space:normal;height:auto;min-height:42px;padding:8px 12px}
}

/* Catalogue fills the viewport; detail view preserves the full cover. */

#game-count{display:none}
@media(pointer:coarse) and (max-width:1200px){
 body.game-open .hero{isolation:isolate}
 body.game-open .hero::before{content:'';display:block;position:absolute;inset:-50px -16px 0;z-index:-1;background:linear-gradient(180deg,transparent 0,#090a0e66 35px,#090a0edb 100px,#090a0ef5 170px,#090a0e 100%);pointer-events:none}
}

.backdrops{pointer-events:none}

@media(pointer:coarse) and (max-width:1200px){
 body.game-open .hero::before{display:none}
 body.game-open .hero{background:transparent}
 body.game-open .scene-shade{background:linear-gradient(180deg,transparent 0,transparent var(--text-shade-start,40px),#090a0e18 calc(var(--text-shade-start,40px) + 24px),#090a0e66 calc(var(--text-shade-start,40px) + 48px),#090a0ec9 calc(var(--text-shade-start,40px) + 82px),#090a0ef5 calc(var(--text-shade-start,40px) + 120px),#090a0e 100%)!important}
}



.favorite-heart{display:none}
@media(pointer:coarse) and (max-width:1200px){
 .hero .hero-actions .favorite{display:grid;place-items:center;padding:0;line-height:1}
 .favorite .favorite-glyph{display:none}
 .favorite .favorite-heart{display:block;width:23px;height:23px;flex:none}
 .favorite[aria-pressed=true] .favorite-heart{fill:currentColor}
}

/* Desktop catalogue keeps all cover edges when browser chrome changes height. */


/* Preserve the detail layout until its exit animation completes. */
body.game-closing #hero{pointer-events:none;transform-origin:50% 65%;will-change:opacity,transform}
body.game-closing #hero>*,body.game-closing #hero .hero-actions>button{transition:none!important}
body:not(.game-open) #hero{opacity:0;visibility:hidden;transition:none}

/* One fixed artwork layer for menu, details and the entire return transition. */
body .backdrops .backdrop{background-size:cover;background-position:center center;background-repeat:no-repeat;background-color:#090a0e;transform:none;transform-origin:center}
@media(pointer:fine){body .backdrops .backdrop{background-size:100% 100%}}


/* A stable shadow and artwork luminance prevent transition flashes. */
body .backdrops .backdrop.active{opacity:1}
body .scene-shade,body.game-open .scene-shade{background:radial-gradient(ellipse 95vw 145vh at -8% 88%,#090a0ef5 0%,#090a0eeb 25%,#090a0ebf 45%,#090a0e67 65%,#090a0e16 85%,transparent 100%),linear-gradient(0deg,#090a0efc 0%,#090a0ef5 13.75%,#090a0ecc 26.4%,#090a0e6e 38.5%,#090a0e21 48.4%,transparent 55%),linear-gradient(#090a0e33,#090a0e33)!important;transition:none!important}
body .scene-shade::before,body .scene-shade::after,body.game-open .scene-shade::before,body.game-open .scene-shade::after{display:none!important;content:none!important;transition:none!important}
@media(pointer:coarse) and (max-width:1200px){
 body .scene-shade,body.game-open .scene-shade{background:linear-gradient(180deg,#090a0ed9 0%,#090a0e77 32%,#090a0eb3 60%,#090a0ef5 100%),linear-gradient(#090a0e33,#090a0e33)!important}
}

.detail-portrait-art{position:absolute;inset:0;background-color:#090a0e;background-size:100% 100%;background-position:center top;background-repeat:no-repeat;opacity:0;pointer-events:none;transition:opacity .18s linear}@media(pointer:coarse) and (max-width:1200px) and (orientation:portrait){body .backdrop .detail-portrait-art[data-ready=true]{opacity:1}}@media(prefers-reduced-motion:reduce){.detail-portrait-art{transition:none}}