/* Responsive navigation and touch-friendly layout. */
html, body { min-width: 0; }
.archive { scroll-margin-top: calc(var(--av-header-height,72px) + 12px); }
.brand { white-space: nowrap; }
.brand-mark { flex: none; }
.menu-button { width: 44px; height: 44px; }
.game-card h3 { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.menu-button:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
@media (min-width: 901px) {
 body.nav-collapsed .app-layout { grid-template-columns: minmax(0,1fr); }
 body.nav-collapsed .sidebar { display: none; }
}
@media (max-width: 900px) {
 .topbar { height: auto; min-height: 112px; grid-template-columns: 44px minmax(0,1fr) auto; gap: 6px; padding: 6px 12px; }
 .brand strong { font-size: .94rem; }
 .global-search { grid-column: 1 / -1; grid-row: 2; height: 44px; width: 100%; max-width: none; }
 .global-search input { font-size: 16px; min-width: 0; }
 .language-picker select { min-width: 84px; min-height: 44px; padding: 7px; }
 .app-layout { display: block; }
 .sidebar { display: none; position: fixed; left: 0; top: var(--av-header-height,112px); bottom: 0; width: min(320px,88vw); height: auto; max-height: calc(100dvh - var(--av-header-height,112px)); overflow: auto; padding: 12px; z-index: 25; box-shadow: 15px 0 45px #0009; border-right: 1px solid var(--line); }
 body.nav-open .sidebar { display: block; }
 .sidebar nav { display: grid; min-width: 0; }
 .sidebar a { min-height: 44px; padding: 10px; }
 .sidebar a span { display: inline-block; }
 .sidebar .nav-divider, .sidebar-stats { display: block; }
 .archive-nav { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
 .archive { padding: 20px 14px 40px; }
 h1 { font-size: clamp(1.7rem,6vw,2.3rem); line-height: 1.16; overflow-wrap: anywhere; }
 .page-heading { gap: 18px; margin-bottom: 16px; }
 .page-heading p { font-size: .88rem; line-height: 1.55; }
 .collection-tabs { gap: 6px; }
 .collection-tabs button, .filter-row button { min-height: 44px; font-size: .82rem; padding: 9px 12px; }
 .collection-tabs span { margin-left: 0; }
 .filter-row { scrollbar-width: none; }
 .filter-row::-webkit-scrollbar { display: none; }
 .result-summary { flex-wrap: wrap; gap: 6px; font-size: .8rem; }
 .result-summary p:last-child { text-align: left; line-height: 1.5; }
 .game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 12px; }
 .catalog-ad { margin-top: 40px; }
 .catalog-ad:not([hidden]) + .game-grid-more:not(:empty) { margin-top: 40px; }
 .game-card h3 { font-size: .9rem; line-height: 1.35; }
 .game-card .game-info p { font-size: .75rem; }
 .game-card .year { display: none; }
 .game-card .play-button { opacity: 1; transform: none; width: 30px; height: 30px; right: 7px; bottom: 7px; }
 .pagination button { min-width: 44px; height: 44px; }
 dialog { width: 100%; max-width: 100%; max-height: 100dvh; margin: auto; border: 0; }
 .player-shell > header { position: sticky; top: 0; z-index: 2; min-height: 58px; gap: 12px; }
 .player-shell > header > div:first-child { min-width: 0; }
 .player-shell header h2 { overflow-wrap: anywhere; }
 .player-actions { flex-shrink: 0; }
 .player-actions button { min-width: 44px; height: 44px; }
 .player-stage { min-height: 0; height: min(65dvh, calc(100vw * .75)); }
 .player-stage iframe, .player-stage ruffle-player, .player-stage object { height: 100%; min-height: 0; }
 .player-ad-slot { height: 52px; }
 .player-meta { flex-wrap: wrap; }
 #av-developer-toolbar { max-width: calc(100vw - 20px); right: 10px; bottom: 10px; flex-wrap: wrap; }
}
@media (min-width: 600px) and (max-width: 900px) { .game-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 900px) and (orientation: landscape) {
 .player-stage { height: max(120px, calc(100dvh - 126px)); }
 .player-ad-slot { height: 40px; }
 dialog.brickit-landscape { height: 100dvh; max-height: 100dvh; overflow: hidden; }
 .brickit-landscape .player-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
 .brickit-landscape .player-shell > header { flex: 0 0 58px; }
 .brickit-landscape .player-stage { flex: 1 1 0; height: auto; min-height: 0; }
 .brickit-landscape .player-stage iframe { height: 100%; }
 .brickit-landscape :is(.player-feedback, .player-meta, .player-runtime-warning, .online-help, .player-ad-slot) { display: none !important; }
}

/* Fullscreen must override the normal modal's 650px/66vh player cap. */
.player-shell:fullscreen {
 display: flex; flex-direction: column; width: 100%; height: 100%;
 min-height: 0; overflow: hidden; background: #000;
}
.player-shell:fullscreen > header { flex: 0 0 auto; min-height: 56px; }
.cinema-panic-player .player-stage {
 width: min(100%, calc(66dvh * 1.6));
 aspect-ratio: 8 / 5;
 height: auto;
 min-height: 0;
 margin-inline: auto;
}
.cinema-panic-player .player-stage iframe { height: 100%; min-height: 0; }
.player-shell:fullscreen .player-stage {
 flex: 1 1 0; width: 100%; height: auto; min-height: 0;
 grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
}
.player-shell:fullscreen .player-stage > :is(iframe, ruffle-player, object) {
 width: 100%; height: 100%; min-height: 0; max-height: none;
}
.cinema-panic-player .player-shell:fullscreen .player-stage {
 /* Reserve the wrapped player header while retaining the complete scene. */
 flex: 0 0 auto;
 width: min(100%, calc((100dvh - 128px) * 1.6));
 aspect-ratio: 8 / 5;
 height: auto;
 margin: auto;
}
.player-shell:fullscreen :is(.online-help, .player-meta, .player-ad-slot) { display: none !important; }
.player-shell:fullscreen .player-runtime-warning { flex: 0 0 auto; max-height: 15vh; overflow: auto; }
.growth-guides { display:flex; flex-wrap:wrap; gap:12px; padding:16px 24px; }
.growth-guides a { color:#8ee3da; text-underline-offset:4px; }
.growth-guides a:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.sidebar a[hidden] { display:none; }