/* A fluid layout shared by the arcade and Studio. Game canvases keep their own coordinates. */
:root{color-scheme:dark;--wrap:min(1240px,calc(100% - 48px))}
html{scroll-padding-top:100px;scrollbar-gutter:stable}
body{overflow-x:clip}
@media(max-width:680px){
 #album .section-head{gap:12px;margin-bottom:14px}
 #album .section-head h2{font-size:1.45rem}
 #album .album-intro{display:none}
 #album #openAlbum{min-height:44px;padding:9px 16px;font-size:.75rem}
 #album .album-progress{grid-template-columns:auto minmax(0,1fr);padding:10px 14px;gap:14px;margin-bottom:14px;border-radius:16px}
 #album .album-count b{font-size:1.5rem}
 #album .album-count span{font-size:.72rem;margin-left:2px}
 #album .rarity-legend{display:none}
 #album .gmy-album-slider-head>div:first-child{display:none}
}
button,a,input,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,a{ -webkit-user-drag:none }
main,section,article,.hero-copy,.hero-stage,.panel,.game-body,.profile-body,.detail-body,.album-rows,.album-row,.card-strip{min-width:0}
.btn{white-space:normal;text-align:center;line-height:1.35;padding-block:11px}
.btn-small,.close,.tab{min-height:44px}
.close{width:44px;height:44px}
.game-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr))}
.game-body .game-mech{flex:0;margin:6px 0;font-size:.75rem}
.game-body>p:not(.game-mech){margin-top:7px}
.game-actions{margin-top:auto}
.game-actions .btn{min-height:48px}
.game-badge{max-width:calc(100% - 24px);overflow-wrap:anywhere}
.game-progress{max-width:calc(100% - 24px)}
.hero{min-height:min(700px,calc(100svh - 86px));gap:40px;padding-block:66px 42px}
.hero h1{font-size:clamp(2.45rem,5.4vw,4.5rem)}
.hero-actions{margin-top:26px}
.play-note{font-size:.78rem;color:var(--muted);margin:17px 0 0}
.play-note span{color:var(--gold);margin-right:5px}
.resume-link{display:inline-flex;margin-top:14px;padding:10px 0;color:var(--gold-soft);font-size:.85rem;text-underline-offset:5px}
.hero-stats{margin-top:26px;gap:clamp(16px,3vw,36px)}
.hero-stats>div{min-width:0}
.hero-stats dt{font-size:.65rem;letter-spacing:.08em}
.hero-stats dd{font-size:1.75rem}
.cabinet-info>div{min-width:0}
.cabinet-info h2{font-size:clamp(1.1rem,2vw,1.45rem)}
.cabinet-info .btn{flex:none}
.cabinet-dots{gap:2px;padding-block:2px}
.cabinet-dots button,.cabinet-dots button[aria-selected="true"]{width:48px;height:44px;position:relative;background:transparent}
.cabinet-dots button::after{content:"";position:absolute;top:20px;left:8px;right:8px;height:4px;border-radius:8px;background:var(--line-2);transition:background .2s}
.cabinet-dots button[aria-pressed="true"]::after{background:var(--gold)}
.connection-note{position:sticky;top:75px;z-index:31;display:flex;justify-content:center;align-items:center;gap:16px;padding:12px 20px;background:#513615;border-bottom:1px solid var(--gold);font-size:.85rem}
.connection-note button{min-height:44px;text-decoration:underline;font-weight:700;flex:none}
.games{padding-top:38px}
.daily-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,.9fr)}
.profile-panel{flex-direction:column;align-items:flex-start;gap:18px}
.profile-panel .level-ring{width:92px;height:92px}
.profile-panel .level-ring img{width:72px;height:72px}
.profile-panel .level-ring b{height:32px;min-width:32px;font-size:.8rem}
.profile-body{width:100%}
.profile-body .btn{width:100%;font-size:.76rem;padding-inline:10px}
.mission{grid-template-columns:28px minmax(0,1fr) auto;gap:8px;padding:12px 10px}
.mission-check{width:28px;height:28px}
.mission .xp-chip{font-size:.7rem;padding:4px 7px}
.missions-panel>header{flex-wrap:wrap;gap:4px}
.rarity-legend{flex-wrap:wrap}
.card-strip{scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.card-strip .mini-card{scroll-snap-align:start}
.album-row h3{gap:12px}
.album-row h3 b{flex:none}
.podium{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr)}
.board li{grid-template-columns:24px 32px minmax(0,1fr) auto;gap:8px}
.board b{overflow-wrap:anywhere}
.modal{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.modal-card{max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overscroll-behavior:contain;scrollbar-gutter:stable}
body.modal-open{overflow:hidden}
.field input{width:100%;min-width:0}
.controls{grid-template-columns:minmax(0,auto) minmax(0,1fr)}
.controls dt{white-space:normal}
.code-row code{min-width:0}
.mobile-nav{display:none}
.toasts{pointer-events:none}
.faq #motionToggle{margin-bottom:20px}
.footer-links a{min-height:44px;display:inline-flex;align-items:center}
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion="reduce"]{scroll-behavior:auto}
html[data-background="true"] *{animation-play-state:paused!important}
@media (min-width:901px) and (max-width:1180px){
 .topnav{gap:14px;padding-inline:24px}.nav-links a{padding-inline:10px;font-size:.8rem}.chip-xp,.chip-streak{display:none}
 .daily-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.streak-panel{grid-column:1/-1}
}
@media (max-width:900px){
 :root{--wrap:calc(100% - 40px)}
 .topnav{gap:12px;padding:12px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left));padding-top:max(12px,env(safe-area-inset-top))}
 .hero{min-height:0;grid-template-columns:1fr 1fr;gap:20px;padding-top:50px}
 .hero h1{font-size:clamp(2.25rem,5vw,3rem)}
 .hero-stage{padding:20px 0}.hero-bipy{right:16px;width:100px;top:-38px}
 .lead{font-size:.95rem}.hero-actions{gap:10px}.hero-actions .btn{font-size:.86rem;padding-inline:18px}
 .cabinet{transform:none;padding:10px;border-radius:24px}.cabinet-info{padding:14px 2px 0;flex-wrap:wrap}
 .cabinet-info p{font-size:.8rem}.cabinet-info small{font-size:.6rem}.cabinet-info .btn{min-height:44px;width:100%}
 .cabinet-marquee{letter-spacing:.13em;font-size:.65rem;gap:8px}
 .daily-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.streak-panel{grid-column:1/-1}
 .mobile-nav{position:fixed;inset:auto 0 0;z-index:40;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:rgba(27,8,19,.96);border-top:1px solid var(--line-2);padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));backdrop-filter:blur(16px)}
 .mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;text-decoration:none;color:var(--muted);font-size:.63rem;font-weight:600;border-radius:12px}
 .mobile-nav a[aria-current="location"]{background:rgba(249,162,193,.09);color:var(--gold-soft)}
 .mobile-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
 body:not(.studio){padding-bottom:calc(76px + env(safe-area-inset-bottom))}
 .toasts{bottom:calc(82px + env(safe-area-inset-bottom));right:16px;width:min(360px,calc(100% - 32px))}
 .studio .toasts{bottom:20px}.studio .nav-links{display:flex;margin-left:auto}
 .connection-note{top:68px}
}
@media (max-width:640px){
 :root{--wrap:calc(100% - 32px)}
 html{scroll-padding-top:88px}
 .topnav{padding-inline:16px;gap:8px}.brand{gap:7px}.brand img{width:34px;height:34px}.brand-text b{font-size:.85rem;letter-spacing:.12em}.brand-text small{font-size:.85rem}
 .player-chip{gap:7px;padding-right:10px;min-height:44px;max-width:48%}.player-chip img{width:30px;height:30px}.chip-id{min-width:0}.chip-id b{max-width:100%;font-size:.72rem}.chip-streak{display:none}
 .hero{grid-template-columns:1fr;padding:30px 0 16px;gap:42px}
 .hero h1{font-size:clamp(2.3rem,9.7vw,3.7rem)}
 .hero-copy>.eyebrow{font-size:.56rem;letter-spacing:.14em}
 .lead{font-size:.93rem;margin-top:17px;max-width:36em}
 .hero-actions{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .hero-actions .btn{padding-inline:12px;font-size:.83rem;min-height:48px}
 .play-note{font-size:.71rem}
 .hero-stats{margin-top:24px;padding-top:15px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .hero-stats dd{font-size:1.45rem}.hero-stats dt{font-size:.58rem}
 .hero-stage{padding:6px}.hero-bipy{width:86px;top:-43px;right:22px}
 .cabinet-screen{border-radius:14px}.cabinet-info{flex-wrap:nowrap;padding:14px 4px 0;gap:10px}
 .cabinet-info h2{font-size:1.1rem}.cabinet-info p{font-size:.76rem}.cabinet-info .btn{width:auto;padding-inline:17px}
 .cabinet-marquee{padding-block:6px 12px}.token{display:none}
 section{padding-top:48px}.games{padding-top:30px}.section-head{margin-bottom:20px}
 .section-head h2{font-size:1.85rem}.section-head p:not(.eyebrow){font-size:.88rem}
 .daily-grid{grid-template-columns:1fr}.panel{padding:20px}
 .profile-panel{align-items:center;text-align:center}.profile-meta{justify-content:center}
 .profile-body .btn{font-size:.82rem}.game-body{padding:20px}.game-body h3{font-size:1.25rem}
 .game-body>p{font-size:.87rem}.game-cover{aspect-ratio:16/9}
 .album-progress{padding:16px;gap:12px}.rarity-legend{gap:10px;font-size:.7rem}
 .album-row h3{font-size:.85rem}.mini-card{width:100px}.badges{grid-template-columns:repeat(2,minmax(0,1fr))}
 .podium{gap:6px}.podium-slot{padding:12px 5px}.podium-slot img{width:44px;height:44px}.podium-slot b{font-size:.72rem}.podium-slot small{font-size:.63rem}
 .tabs{width:100%;border-radius:16px}.tab{flex:1;font-size:.78rem;padding-inline:10px}
 .modal{padding:10px}.modal-card{border-radius:22px;padding:24px 20px;max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
 .modal-card h2{font-size:1.35rem;padding-right:25px}.onboard h2{padding-right:0}
 .onboard{padding-top:118px}.onboard-bipy{width:130px;top:-16px}.onboard>p{font-size:.82rem}
 .avatar-picker{gap:8px}.avatar-picker button{width:52px;height:52px}.onboard-tips{gap:6px;margin-top:16px}.onboard-tips li{font-size:.7rem;padding:5px 8px}
 .modal-actions{gap:8px}.modal-actions .btn{flex:1;font-size:.83rem;padding-inline:14px}
 .game-detail{padding:0}.detail-cover{aspect-ratio:2/1}.detail-body{padding:24px 20px}.detail-body h2{padding-right:0}
 .album-grid{grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:10px}
 .faq{font-size:.9rem}.faq details{padding-inline:16px}.footer{margin-top:42px;padding-top:28px}
 .footer-brand b{font-size:.87rem;letter-spacing:.1em}.footer-brand p{font-size:.8rem}
 .connection-note{font-size:.75rem;padding:8px 14px;gap:8px}
}
@media (max-width:359px){
 .hero-actions{grid-template-columns:1fr}.hero-actions .btn{min-height:46px}
 .cabinet-info p{display:none}.panel{padding:16px}.mission{padding:10px 8px;gap:7px}.mission-check{display:none}.mission{grid-template-columns:minmax(0,1fr) auto}
 .avatar-picker{gap:6px}.avatar-picker button{width:46px;height:46px}.onboard .modal-actions{flex-direction:column}.onboard .modal-actions .btn{width:100%}
}
@media (max-height:500px) and (orientation:landscape){
 .modal-card{max-height:calc(100dvh - 20px)}.onboard{padding-top:24px}.onboard-bipy{display:none}
 .hero{min-height:0;padding-top:28px}.mobile-nav{padding-block:3px}.mobile-nav a{min-height:44px;flex-direction:row;font-size:.7rem;gap:5px}.mobile-nav svg{width:18px;height:18px}
}
@media (hover:none){.game-card:hover,.btn:hover,.cabinet:hover{transform:none}.glow{animation:none;filter:blur(50px)}}

/* Lima arena bawaan: dua kolom di tablet, tiga kolom di layar lebar. */
.new-arena{display:flex;align-items:center;gap:12px;max-width:480px;min-height:76px;margin-top:20px;padding:12px 16px;border:2px solid #45122b;border-radius:18px;background:#f6cfce;color:#45122b;text-decoration:none;box-shadow:4px 4px 0 #f5b83d;transition:transform .2s}
.new-arena[hidden]{display:none}.new-arena:hover{transform:translateY(-2px)}
.new-arena>img{flex:none;width:92px;height:auto}.new-arena>span:nth-child(2){min-width:0}
.new-arena small{display:block;font-size:.6rem;letter-spacing:.1em;font-weight:800}.new-arena b{display:block;margin-top:3px;font-size:.85rem;line-height:1.5}.new-arena-arrow{margin-left:auto}
@media(max-width:359px){.new-arena{gap:9px;padding:10px}.new-arena>img{width:64px}.new-arena b{font-size:.74rem}.new-arena small{font-size:.53rem}}
@media (min-width:760px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1150px){.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Five arenas keep readable cover art on both compact and wide screens. */
.game-card:has(a[href="/g/heart/"]){border-color:color-mix(in srgb,var(--pink) 65%,var(--line))}
/* A full-width event tile shifts the parity of the remaining cards. */
@media (min-width:760px) and (max-width:1149px){.game-grid:not(.event-offset) .game-card:last-child:nth-child(odd),.game-grid.event-offset .game-card:last-child:nth-child(even){grid-column:1/-1;max-width:680px;width:100%;justify-self:center}}
@media (prefers-reduced-motion:reduce){.game-card,.game-cover img{transition:none}}