/* One game-card contract for BLOCK, MARBLE and GOTCHA. */
.world-menu-audio{position:relative;display:inline-block;color:var(--accent)}
.world-menu-audio summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:36px;height:36px;border:1px solid #36516b;border-radius:4px;font-size:20px}
.world-menu-audio summary::-webkit-details-marker{display:none}
.world-menu-audio>div{position:absolute;right:0;top:42px;width:205px;padding:15px;background:#102037;border:1px solid #36516b;border-radius:6px;z-index:60;box-shadow:0 12px 30px #0008}
.world-menu-audio button,.world-menu-audio input{display:block;width:100%;margin:8px 0}
.world-menu-audio label{display:block;font-size:13px;letter-spacing:0;color:#d5e6f5}
.world-menu-audio input{accent-color:var(--accent)}
.world-toolbar nav:has(.world-menu-audio){display:flex;align-items:center;gap:4px;overflow:visible}
.menu .games{position:relative;display:block;flex:1;min-height:0;overflow:hidden;mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent)}
.menu .game-card,.menu .game-card:hover{position:absolute;top:50%;left:10px;width:calc(100% - 65px);height:132px;min-height:132px;max-height:none;flex:none;margin:0;padding:12px 20px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;transform:translate(calc(var(--depth,0)*12px + 12px),calc(-50% + var(--card-y,0px))) scale(.94);transform-origin:right center;opacity:calc(1 - var(--depth,0)*.15);z-index:calc(10 - var(--depth,0));filter:none;transition:transform .3s,height .3s,opacity .3s}
.menu .game-card:before{display:block;content:'';position:absolute;inset:0;z-index:-1;clip-path:polygon(0 0,95% 0,100% 100%,6% 100%);background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 30%,#091424),#0c192a);border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);box-shadow:inset 9px 0 var(--accent)}
.menu .game-card[aria-selected=true]{height:280px;min-height:280px;transform:translate(0,-50%);opacity:1;z-index:20}
.menu .game-card[aria-selected=true]:before{background:repeating-linear-gradient(130deg,transparent 0 35px,#ffffff09 36px 37px),linear-gradient(100deg,color-mix(in srgb,var(--accent) 38%,#102037),#12243b);border-width:2px}
.menu .game-card .track-copy{display:block;position:relative;max-width:none;width:100%;padding:0 142px 0 12px;text-align:center}
.menu .game-card[aria-selected=true] .track-copy{padding-right:255px}
.menu .game-card strong{font:900 32px/1.1 'Arial Black',Arial,sans-serif;letter-spacing:-.04em;white-space:nowrap}
.menu .game-card small{display:block;color:inherit;font-size:10px;line-height:1.4;font-weight:800;margin-top:7px;letter-spacing:.05em}
.menu .game-card .jacket-description{display:none;font-size:15px;line-height:1.6;font-weight:700;margin-top:16px;color:#d5e6f5}
.menu .game-card[aria-selected=true] .jacket-description{display:block}
.menu .game-card :is(.jacket-symbol,.marble-disc){position:absolute;top:50%;right:-20px;display:grid;place-items:center;width:152px;height:152px;padding:33px;border:2px solid var(--accent);border-radius:50%;background:repeating-radial-gradient(circle,#122339 0 4px,#08111e 5px 7px,#263b4d 8px 9px);box-shadow:0 0 0 4px #07101d,0 0 18px color-mix(in srgb,var(--accent) 35%,transparent);font:76px/1 Arial;color:var(--accent);transform:translateY(-50%);opacity:1;filter:none;animation:none}
.menu .game-card[aria-selected=true] :is(.jacket-symbol,.marble-disc){width:280px;height:280px;padding:60px;right:-30px;font-size:138px;box-shadow:0 0 0 5px #07101d,0 0 0 7px var(--accent),0 0 25px color-mix(in srgb,var(--accent) 35%,transparent)}
.menu .game-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(min-width:761px) and (max-width:1200px){
 .menu .game-card,.menu .game-card:hover{height:110px;min-height:110px}.menu .game-card[aria-selected=true]{height:220px;min-height:220px}
 .menu .game-card :is(.jacket-symbol,.marble-disc){width:112px;height:112px;padding:24px;font-size:56px}.menu .game-card[aria-selected=true] :is(.jacket-symbol,.marble-disc){width:190px;height:190px;padding:42px;font-size:95px}
 .menu .game-card .track-copy{padding-right:100px}.menu .game-card[aria-selected=true] .track-copy{padding-right:170px}.menu .game-card strong{font-size:27px}.menu .game-card .jacket-description{font-size:14px}
}
@media(max-width:760px){
 .menu .games{display:flex;align-items:center;flex:none;height:182px;min-height:182px;padding:12px max(32px,calc((100% - 280px)/2));gap:36px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:calc((100% - 280px)/2);mask-image:none;touch-action:pan-x}
 .menu .game-card,.menu .game-card:hover,.menu .game-card[aria-selected=true]{position:relative;top:auto;left:auto;flex:0 0 280px;width:280px;height:150px;min-height:150px;padding:12px;transform:none;scroll-snap-align:center;opacity:.55}.menu .game-card[aria-selected=true]{opacity:1}
 .menu .game-card :is(.jacket-symbol,.marble-disc),.menu .game-card[aria-selected=true] :is(.jacket-symbol,.marble-disc){width:116px;height:116px;padding:25px;right:-20px;font-size:58px}
 .menu .game-card .track-copy,.menu .game-card[aria-selected=true] .track-copy{padding:0 92px 0 10px}.menu .game-card strong{font-size:25px}.menu .game-card small{font-size:9px}.menu .game-card .jacket-description{font-size:12px;margin-top:12px}
}
@media(prefers-reduced-motion:reduce){.menu .game-card{transition:none!important}}

/* Scale disc and text together with each selector column, not the viewport. */
.game-picker{container-type:inline-size}
@media(min-width:761px){.menu .game-card[aria-selected=true] :is(.jacket-symbol,.marble-disc){width:clamp(130px,36cqw,260px);height:clamp(130px,36cqw,260px);padding:clamp(28px,8cqw,56px);font-size:clamp(65px,18cqw,130px)}.menu .game-card[aria-selected=true] .track-copy{padding-right:clamp(120px,34cqw,245px)}.menu .game-card strong{font-size:clamp(22px,4.5cqw,32px)}}
@media(max-width:760px){.menu .game-card strong{font-size:22px}.menu .game-card small{font-size:8px}}

.menu .game-card .track-arrow{display:none!important}.menu .game-card[aria-selected=true] small{display:block!important}
@media(max-width:760px){.menu .game-card :is(.jacket-symbol,.marble-disc),.menu .game-card[aria-selected=true] :is(.jacket-symbol,.marble-disc){right:-12px}}