/* One launcher, sized for the screen in use. */
.mobile-discover{display:none}
.search-results[hidden]{display:none}
.search-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.search-heading h2{font-size:24px;margin:0}
#search-summary{font-size:13px;color:var(--muted);margin:12px 0 18px}
.search-matches{display:grid;gap:10px}
.search-match{display:flex;align-items:center;gap:14px;min-height:80px;padding:10px 14px 10px 10px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}
.search-match:hover{border-color:var(--violet);background:var(--soft)}
.search-match>img{width:88px;height:60px;object-fit:contain;background:var(--bg);border-radius:8px;flex:none}
.match-copy{display:grid;gap:5px;min-width:0;flex:1}
.match-copy strong{font-size:16px;overflow-wrap:anywhere}
.match-copy>span{font-size:12px;color:var(--muted)}
.match-play{display:flex;align-items:center;gap:7px;color:var(--violet);font-size:12px;font-weight:700;flex:none}
.searching .welcome,.searching .hero,.searching .mobile-discover,.searching .return-card,.searching .library,.searching .collection-note{display:none}
.searching .guest-status{display:none}
.searching main{padding-top:20px}
.content,.section-heading>div,.card-body,.hero-copy{min-width:0}
.section-heading{flex-wrap:wrap}
.filters{max-width:100%;flex-wrap:wrap}
.dialog-close{width:44px;height:44px}
.player-dialog{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh}
.player-dialog[open]{display:flex;flex-direction:column}
.player-bar{flex:none;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.player-bar #player-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#frame-slot{flex:1;min-height:0;height:auto;padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#player-status{top:calc(57px + env(safe-area-inset-top))}
html:has(dialog[open]){overflow:hidden}
@media(max-width:820px){
  .topbar{position:sticky;top:0;z-index:5;background:var(--bg)}
  .searching .topbar{padding-top:calc(10px + env(safe-area-inset-top))}
  .searching .sidebar{display:none}
  .searching .sidebar .nav{display:grid}
  .sidebar{padding-top:calc(8px + env(safe-area-inset-top));padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  .topbar{height:auto;min-height:72px;flex-wrap:wrap;gap:12px;padding-top:12px;padding-bottom:12px}
  .breadcrumb{display:none}
  .search{margin:0;flex:1;min-width:150px;min-height:46px}
  .search input{font-size:16px}
  .guest-status{display:flex;min-height:44px;max-width:180px;font-size:12px}
  .guest-status span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hero-pagination{position:relative;top:auto;right:auto;grid-column:1/-1;max-width:100%;overflow-x:auto;gap:0;padding:0 16px 8px;scrollbar-width:thin}
  .feature-dot{width:44px;height:44px;flex:0 0 44px}
  .hero-pagination>span{display:none}
  .hero-copy{padding-bottom:20px}
  .hero-art{min-height:0}
  .filter{min-height:44px;font-size:12px;padding:10px 14px}
  .card-play,.card-more,.detail-button,.play-button,.small-play{min-height:46px}
  .small-play{display:inline-flex;align-items:center}
  .card-more{font-size:12px}
  .card-note{overflow-wrap:anywhere}
}
@media(max-width:600px){
  #hero{display:none}
  .mobile-discover{display:block;margin-bottom:24px}
  .discover-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
  .discover-heading h2{font-size:15px;letter-spacing:-.3px;margin:0}
  .discover-heading>span{font-size:10px;color:var(--muted);white-space:nowrap}
  .discover-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin:0 -16px;padding:0 16px 12px;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .discover-track::-webkit-scrollbar{display:none}
  .discover-card{flex:0 0 88%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;background:var(--panel);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
  .discover-art{display:block;aspect-ratio:16/9;background:var(--side);overflow:hidden}
  .discover-art img{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
  .discover-copy{padding:16px;display:flex;flex-direction:column;flex:1}
  .discover-copy h3{font-size:28px;line-height:1.1;letter-spacing:-.8px;margin:8px 0}
  .discover-copy p{font-size:12px;color:var(--muted);line-height:1.5;margin:0 0 16px}
  .discover-actions{display:flex;gap:8px;margin-top:auto}
  .discover-actions .play-button{background:var(--violet);color:var(--button-ink);flex:1;min-width:0;padding:10px 8px;gap:7px}
  .discover-actions .play-label{font-size:12px}
  .discover-actions .detail-button{font-size:12px;padding:10px}
  .searching .sidebar{display:flex;min-height:0;height:0;padding:0;border:0}
  .searching .sidebar>.studio,.searching .sidebar>.nav-label,.searching .sidebar>.sidebar-bottom{display:none}
  .searching .topbar{min-height:0;padding-bottom:10px}
  .searching main{padding-top:14px}
  .search-heading h2{font-size:20px}
  .search-heading .detail-button{font-size:11px;min-height:40px;padding:8px 10px}
  #search-summary{font-size:12px;margin:8px 0 14px}
  .search-match{min-height:72px;padding:8px;gap:10px}
  .search-match>img{width:66px;height:50px}
  .match-copy strong{font-size:14px}
  .match-copy>span{font-size:11px}
  .match-play{font-size:11px;gap:4px}
  .sidebar{position:relative;display:flex;flex-wrap:nowrap;padding:calc(6px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left));min-height:66px}
  .studio{flex:1;gap:9px}
  .studio img{width:46px;height:52px}
  .studio-name{display:block;font-size:15px}
  .studio-name>span{font-size:9px}
  .studio-name small{display:none}
  .sidebar-bottom{margin-left:auto}
  .appearance{width:46px;height:46px}
  .sidebar .nav{position:fixed;inset:auto 0 0;z-index:6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:var(--side);border-top:1px solid var(--border);box-shadow:0 -8px 30px #0002;gap:4px}
  .nav-button{display:flex;flex-direction:column;justify-content:center;gap:5px;font-size:11px;min-height:54px;padding:7px 3px;text-align:center}
  .nav-button .icon{width:21px;height:21px}
  .nav-button .count{display:none}
  .content{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
  .topbar{padding:10px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));gap:4px}
  .search{flex-basis:100%;width:100%;min-height:48px;padding:10px 13px}
  .search input{font-size:16px}
  .search kbd{display:none}
  .guest-status{margin-left:auto;max-width:100%;min-height:36px;font-size:11px}
  main{padding:16px max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
  .welcome{margin-bottom:20px}
  .welcome .eyebrow{display:none}
  h1{font-size:26px;letter-spacing:-1px}
  .welcome p{font-size:12px}
  .hero{display:grid;grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-copy{padding:16px 18px 10px}
  .hero h2,.hero[data-game=toads-adventure] h2{font-size:34px;line-height:1.08;letter-spacing:-1.5px;max-width:none;margin:12px 0 8px}
  .hero-tag{font-size:8px;flex-wrap:wrap}
  .hero-tagline{font-size:16px;max-width:none;margin-bottom:14px}
  .hero-description{display:none}
  .hero-art,.hero[data-game=toads-adventure] .hero-art{position:relative;inset:auto;width:100%;height:110px;opacity:1;order:-1;overflow:hidden}
  .hero .hero-art img{width:100%;height:100%;max-height:110px;transform:none;object-fit:contain}
  .hero .art-caption{display:none}
  .hero-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .hero .play-button{padding:10px;font-size:12px}
  .hero .play-label{font-size:12px}
  .hero .detail-button{padding:10px;font-size:12px}
  .hero-note{font-size:10px;line-height:1.5;margin-top:10px}
  .hero-pagination{padding:0 12px 6px}
  .library{margin-top:26px;scroll-margin-top:16px}
  .section-heading{display:block;margin-bottom:16px}
  .filters{display:flex;flex-wrap:nowrap;width:100%;max-width:100%;overflow-x:auto;margin-top:16px;gap:4px;scrollbar-width:thin;overscroll-behavior-x:contain}
  .filter{flex:0 0 auto;white-space:nowrap}
  .game-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .card-art{height:auto;aspect-ratio:16/9}
  .card-body{padding:18px}
  .card-heading h3{font-size:25px}
  .card-body p{font-size:13px;line-height:1.5}
  .card-features span{font-size:10px}
  .card-play{font-size:13px;padding:12px}
  .card-note{font-size:10px;line-height:1.6}
  .return-card{padding:12px;gap:10px;flex-wrap:wrap}
  .return-card>div{flex:1;min-width:140px}
  .return-card p{font-size:10px}
  .small-play{font-size:12px}
  .details-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overscroll-behavior:contain}
  .details-dialog>img{height:auto;aspect-ratio:16/9}
  .details-body{padding:20px}
  .details-body p{font-size:14px}
  .leaderboards-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:20px 16px;overscroll-behavior:contain}
  .ranking-heading h2{font-size:25px}
  .ranking-filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ranking-filters select,.ranking-profile input{font-size:16px;min-width:0}
  .ranking-table{font-size:12px}
  .ranking-table td,.ranking-table th{padding:12px 8px;overflow-wrap:anywhere}
  .ranking-table th:first-child{width:56px;white-space:nowrap}
  .player-bar{height:calc(48px + env(safe-area-inset-top));gap:8px}
  .player-bar button{min-height:44px;flex-shrink:0;font-size:10px}
  .player-bar strong{font-size:12px}
  .player-bar button:last-child span{display:none}
  #player-status{top:calc(48px + env(safe-area-inset-top))}
  footer{font-size:10px}
}
@media(pointer:coarse) and (max-width:1000px) and (min-width:601px){#player-status{top:calc(43px + env(safe-area-inset-top))}}
@media(max-width:360px){.hero-actions{grid-template-columns:minmax(0,1fr)}.hero .play-label{white-space:nowrap}}
@media(hover:none){.game-card:hover,.play-button:hover,.game-card:hover .card-art img{transform:none}}

/* Keep play space available when a phone is turned sideways. */
@media(orientation:landscape) and (max-height:540px){.player-bar{height:calc(40px + env(safe-area-inset-top));min-height:40px;padding-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right))}.player-bar button{min-height:36px}#player-status{top:40px}}