.game-carousel {
 --carousel-accent:var(--accent,#26bbff);
 --carousel-gap:14px;
 min-width:0;
 margin:0 0 32px;
}
.game-carousel-heading {
 display:flex;
 align-items:flex-end;
 justify-content:space-between;
 gap:20px;
 margin-bottom:19px;
}
.game-carousel-eyebrow {
 display:block;
 margin:0 0 7px;
 font-size:9px;
 font-weight:750;
 letter-spacing:1.5px;
 color:var(--muted,#62778b);
}
.game-carousel-intro h2 {
 margin:0;
 font-family:var(--heading,system-ui,sans-serif);
 font-size:clamp(23px,2.5vw,32px);
 font-weight:800;
 line-height:1.2;
 letter-spacing:-1px;
 color:var(--ink,#16304f);
}
.game-carousel-intro p {
 margin:8px 0 0;
 font-size:12px;
 line-height:1.5;
 color:var(--muted,#62778b);
}
.game-carousel-controls {
 display:flex;
 flex:none;
 align-items:center;
 gap:8px;
 padding-bottom:2px;
}
.game-carousel-controls[hidden] {display:none}
.game-carousel-position {
 min-width:61px;
 margin-right:5px;
 color:var(--muted,#62778b);
 font-size:11px;
 font-variant-numeric:tabular-nums;
 white-space:nowrap;
 text-align:right;
}
.game-carousel-arrow {
 display:grid;
 place-items:center;
 width:42px;
 height:42px;
 min-width:42px;
 padding:0;
 border:1px solid var(--line,#d2dfec);
 border-radius:50%;
 color:var(--ink,#16304f);
 background:var(--paper,#fff);
 transition:border-color .16s,background .16s,transform .16s;
}
.game-carousel-arrow svg {width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.game-carousel-arrow:disabled {opacity:.35;cursor:default}
.game-carousel-arrow:focus-visible {outline:3px solid var(--carousel-accent);outline-offset:3px}
.game-carousel-stage {position:relative;min-width:0}
.game-carousel-swipe-hint {
 position:absolute;
 left:50%;
 top:46%;
 z-index:2;
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:6px;
 transform:translate(-50%,-50%);
 pointer-events:none;
 user-select:none;
 opacity:0;
}
.game-carousel-swipe-hint[hidden] {display:none}
.game-carousel-hand {width:44px;height:48px;overflow:visible;fill:#fff;stroke:#16304f;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 6px #08142540)}
.game-carousel-hand-trail {fill:none;stroke:var(--carousel-accent);stroke-width:2.5}
.game-carousel-swipe-hint>span {padding:5px 10px;border:1px solid var(--line,#d2dfec);border-radius:20px;background:var(--paper,#fff);color:var(--ink,#16304f);box-shadow:0 3px 12px #08142525;font-size:10px;font-weight:700;white-space:nowrap}
.game-carousel-swipe-hint.is-swiping {animation:carousel-swipe-hint 1.35s ease-in-out both}
@keyframes carousel-swipe-hint {
 0% {opacity:0;transform:translate(calc(-50% + 50px),-50%) rotate(8deg)}
 18% {opacity:1;transform:translate(calc(-50% + 50px),-50%) rotate(8deg)}
 72% {opacity:1;transform:translate(calc(-50% - 50px),-50%) rotate(-8deg)}
 100% {opacity:0;transform:translate(calc(-50% - 50px),-50%) rotate(-8deg)}
}
.game-carousel-track {
 display:grid;
 grid-auto-flow:column;
 grid-auto-columns:calc((100% - 72px) / 5.35);
 gap:var(--carousel-gap);
 width:100%;
 overflow-x:auto;
 overscroll-behavior-x:contain;
 scroll-snap-type:x mandatory;
 scrollbar-width:thin;
 scrollbar-color:var(--line,#d2dfec) transparent;
 list-style:none;
 margin:0;
 padding:2px 0 10px;
 -webkit-overflow-scrolling:touch;
}
.game-carousel-track::-webkit-scrollbar {height:4px}
.game-carousel-track::-webkit-scrollbar-thumb {border-radius:4px;background:var(--line,#d2dfec)}
.game-carousel-track::-webkit-scrollbar-track {background:transparent}
.game-carousel-item {min-width:0;scroll-snap-align:start;list-style:none;margin:0;padding:0}
.game-carousel-card {
 display:block;
 height:100%;
 border:1px solid var(--line,#d2dfec);
 border-radius:18px;
 overflow:hidden;
 background:var(--paper,#fff);
 color:var(--ink,#16304f);
 box-shadow:0 3px 0 color-mix(in srgb,var(--line,#d2dfec) 60%,transparent);
 transition:border-color .16s,box-shadow .16s,transform .16s;
}
.game-carousel-card.is-active {
 border-color:var(--carousel-accent);
 box-shadow:0 0 0 1px var(--carousel-accent);
}
.game-carousel-card.is-featured {
 border-color:#26bbff99;
 background:linear-gradient(145deg,#26bbff14,#8b5cf61a 65%,var(--paper,#18181d));
 box-shadow:0 0 16px #26bbff35,inset 0 0 22px #8b5cf61c;
}
.game-carousel-card.is-featured .game-carousel-art {
 background:radial-gradient(ellipse at 25% 20%,#26bbff25,transparent 65%),radial-gradient(ellipse at 85% 90%,#8b5cf62e,transparent 60%),var(--bg,#0f0f13);
}
.game-carousel-card.is-featured .game-carousel-category {color:#55cdff}
.game-carousel-featured {
 position:absolute;
 top:7px;
 left:7px;
 z-index:1;
 padding:3px 7px;
 border:1px solid #26bbff66;
 border-radius:20px;
 background:#0b192de8;
 color:#b2eaff;
 font-size:8px;
 font-weight:750;
 line-height:1.4;
 letter-spacing:.25px;
 box-shadow:0 0 10px #26bbff29;
}
.game-carousel-card:focus-visible {outline:3px solid var(--carousel-accent);outline-offset:-4px}
.game-carousel-art {
 position:relative;
 display:grid;
 place-items:center;
 height:124px;
 margin:8px 8px 0;
 border-radius:11px;
 overflow:hidden;
 background:var(--game-color,#bde9ff);
 background:color-mix(in srgb,var(--game-color,#bde9ff) 70%,#fff);
}
.game-carousel-art>svg {display:block;width:150px;max-width:94%;height:116px}
.game-carousel-art:has(.game-preview) {background:var(--bg,#0f0f13)}
.game-carousel-art>svg.game-preview {width:100%;max-width:none;height:100%}
.game-carousel-played {
 position:absolute;
 top:7px;
 right:7px;
 display:inline-flex;
 align-items:center;
 gap:4px;
 border-radius:20px;
 padding:3px 7px;
 color:#214b35;
 background:#f8fff2;
 box-shadow:0 1px 3px #16304f0c;
 font-size:8px;
 font-weight:700;
 line-height:1.4;
 white-space:nowrap;
}
.game-carousel-played svg {width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.game-carousel-copy {padding:13px 15px 14px}
.game-carousel-category {display:block;color:var(--muted,#62778b);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.85px}
.game-carousel-copy h3 {
 min-height:38px;
 margin:5px 0 12px;
 font-family:var(--heading,system-ui,sans-serif);
 font-size:15px;
 font-weight:750;
 line-height:1.25;
 letter-spacing:-.45px;
}
.game-carousel-foot {display:flex;align-items:center;justify-content:space-between;gap:7px;color:var(--muted,#62778b);font-size:10px;line-height:1.4}
.game-carousel-play {display:inline-flex;align-items:center;gap:5px;font-weight:750;color:var(--ink,#16304f)}
.game-carousel-play svg {width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) {
 .game-carousel-arrow:not(:disabled):hover {background:var(--soft,#e2ebf6);border-color:var(--carousel-accent)}
 .game-carousel-card:hover {border-color:var(--carousel-accent);transform:translateY(-2px);box-shadow:0 5px 0 color-mix(in srgb,var(--carousel-accent) 20%,transparent)}
 .game-carousel-card.is-featured:hover {box-shadow:0 0 22px #26bbff50,inset 0 0 26px #8b5cf624}
 .game-carousel-card:hover .game-carousel-play {color:var(--carousel-accent)}
}
@media (max-width:1050px) {
 .game-carousel-track {grid-auto-columns:calc((100% - 45px) / 3.4)}
}
@media (max-width:650px) {
 .game-carousel {--carousel-gap:11px;margin-bottom:25px}
 .game-carousel-heading {display:block;margin-bottom:15px}
 .game-carousel-eyebrow {font-size:8px;letter-spacing:1.1px;margin-bottom:6px}
 .game-carousel-intro h2 {font-size:24px;letter-spacing:-.75px;max-width:none}
 .game-carousel-intro p {font-size:10px;margin-top:6px;max-width:none}
 .game-carousel-controls {gap:6px;margin-top:12px;justify-content:flex-end}
 .game-carousel-position {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 .game-carousel-arrow {width:36px;height:36px;min-width:36px}
 .game-carousel-arrow svg {width:17px;height:17px}
 .game-carousel-track {grid-auto-columns:calc((100% - 20px) / 2.2)}
 .game-carousel-card {border-radius:15px}
 .game-carousel-art {height:104px;margin:6px 6px 0;border-radius:9px}
 .game-carousel-art>svg {width:130px;height:101px}
 .game-carousel-copy {padding:11px 11px 12px}
 .game-carousel-copy h3 {font-size:13px;min-height:33px;letter-spacing:-.3px;margin:5px 0 10px}
 .game-carousel-category {font-size:8px;letter-spacing:.65px}
 .game-carousel-foot {font-size:9px;gap:4px}
 .game-carousel-play {gap:3px}
 .game-carousel-played {font-size:7px;padding:3px 5px;top:5px;right:5px;gap:3px}
 .game-carousel-featured {font-size:7px;padding:3px 5px;top:5px;left:5px}
}
@media (max-width:360px) {
 .game-carousel-intro h2 {font-size:22px;max-width:none}
 .game-carousel-arrow {width:33px;height:33px;min-width:33px}
 .game-carousel-track {grid-auto-columns:calc((100% - 16px) / 2.12)}
 .game-carousel-copy {padding-right:9px;padding-left:9px}
}
@media (prefers-reduced-motion:reduce) {
 .game-carousel-arrow,.game-carousel-card {transition:none}
 .game-carousel-swipe-hint {display:none!important;animation:none!important}
 .game-carousel-track {scroll-behavior:auto}
 .game-carousel-card:hover {transform:none}
}
