[hidden]{display:none!important}

/* Fluid phone layout: the board and controls always fit the available screen. */
.game{width:100%;max-width:650px;padding:clamp(8px,2.8vw,18px);overflow-x:hidden}.board{width:min(calc(100vw - 2 * clamp(8px,2.8vw,18px)),570px,calc(100svh - 250px));max-width:100%}.keypad{gap:clamp(3px,1vw,5px);margin:clamp(8px,1.8vh,16px) auto clamp(7px,1.4vh,11px)}.keypad button{min-width:clamp(25px,8vw,30px);height:clamp(36px,5.8vh,44px);font-size:clamp(11px,3.8vw,15px)}.game-tools{gap:clamp(4px,1.5vw,7px)}.game-tools button{height:clamp(46px,7vh,56px)}
@media(max-width:430px){.home{padding:12px 14px 16px}.hero{height:clamp(255px,42svh,330px)}.prism{transform:translateX(-50%) scale(.82);transform-origin:top center}.title-wrap{margin-top:118px}.overline{font-size:12px}.actions{gap:9px}.primary{height:56px}.profile-card{height:58px!important}.secondary{height:49px}.mini-actions button{height:56px}.gamebar .icon-button{width:38px;height:38px}.game-status{margin:10px 3px 7px}.cell{font-size:clamp(7px,calc(72vw / var(--n)),22px)}dialog form{padding:24px 18px}}
@media(max-height:680px){.board{width:min(calc(100vw - 16px),calc(100svh - 210px),570px)}.game{padding:8px}.gamebar strong{font-size:14px}.game-status{margin:5px 2px}.keypad{margin:6px auto 5px}.keypad button{height:34px}.game-tools button{height:42px}.game-tools span{margin-top:1px}.music-gate{overflow-y:auto;padding:12px 0}.welcome-credit{position:relative!important;bottom:auto!important}}
@media(orientation:landscape) and (max-height:520px){.game{max-width:none;display:grid;grid-template-columns:minmax(260px,52vh) minmax(260px,1fr);grid-template-rows:auto 1fr;gap:6px 14px;align-items:center}.gamebar{grid-column:1/-1}.game-status{display:none}.board-wrap{grid-column:1;grid-row:2}.board{width:min(52vh,48vw)}.keypad,.game-tools{grid-column:2;margin:4px auto;width:100%}.keypad{align-self:end}.game-tools{align-self:start}.home{max-width:760px}.hero{height:190px}.prism{transform:translateX(-50%) scale(.65)}.title-wrap{margin-top:70px}.actions{max-width:520px;width:100%;margin:auto}}

/* True single-screen layout, including mobile browser bars and Android WebView. */
html,body{width:100%;height:100%;overscroll-behavior:none}body{height:var(--app-height,100dvh);min-height:0;overflow:hidden}.home,.game,.music-gate{height:var(--app-height,100dvh);min-height:0;max-height:var(--app-height,100dvh)}.home{overflow:hidden;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}.game{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;overflow:hidden;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}.board-wrap{min-height:0}.board{width:min(100%,calc(var(--app-height,100dvh) - 225px));max-height:100%;height:auto}.keypad{margin:clamp(4px,1vh,9px) auto}.game-tools button{height:clamp(40px,6.5vh,52px)}
@media(max-width:430px){.home{padding-left:12px;padding-right:12px}.hero{height:min(34vh,270px);flex:0 1 auto}.title-wrap{margin-top:96px}.prism{transform:translateX(-50%) scale(.72)}.actions{gap:7px}.primary{height:50px}.profile-card{height:52px!important}.secondary{height:46px}.mini-actions button{height:50px}footer{padding-top:10px}.game-status{margin:5px 2px}.board{width:min(calc(100vw - 16px),calc(var(--app-height,100dvh) - 218px))}.keypad button{height:clamp(32px,5.2vh,40px)}.game-tools button{height:clamp(38px,6vh,46px)}}
@media(max-height:620px) and (orientation:portrait){.topbar .eyebrow{font-size:12px!important}.hero{height:190px}.title-wrap{margin-top:70px}h1{font-size:52px}.prism{transform:translateX(-50%) scale(.58)}.actions{gap:5px}.mini-actions{display:none}footer{padding-top:5px}.board{width:min(calc(100vw - 16px),calc(var(--app-height,100dvh) - 190px))}.gamebar p{display:none}.game-status{margin:2px}.keypad{margin:3px auto}.keypad button{height:30px}.game-tools button{height:36px}}

/* Welcome screen must fit inside one real phone viewport. */
.music-gate:has(.welcome-profiles){display:flex;flex-direction:column;align-items:center;justify-content:center;place-content:unset;padding:max(12px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom));gap:clamp(4px,1vh,9px)}.music-gate:has(.welcome-profiles)>.welcome-kicker{order:-2}.music-gate:has(.welcome-profiles)>.welcome-credit{position:relative!important;inset:auto!important;margin-top:clamp(2px,.8vh,8px)}.music-gate:has(.welcome-profiles)>label{margin-top:clamp(2px,.7vh,8px)}
@media(max-width:480px){.music-gate:has(.welcome-profiles):after{width:72vmin;height:72vmin;top:-12vmin}.music-gate:has(.welcome-profiles)>span{display:none}.music-gate:has(.welcome-profiles)>strong{font-size:clamp(19px,6vw,26px);line-height:1.05;text-align:center}.music-gate:has(.welcome-profiles) label{gap:5px;margin-top:2px;font-size:10px}.music-gate:has(.welcome-profiles) select{padding:10px 12px}.welcome-profiles{gap:6px}.profile-create input{padding:10px}.profile-create button,.profile-manage button{min-height:38px}.welcome-choices{margin-top:4px;gap:7px}.welcome-choices button{min-height:48px}.music-gate:has(.welcome-profiles) .welcome-credit>span{display:block}.music-gate:has(.welcome-profiles) .welcome-credit>strong{font-size:18px}.music-gate:has(.welcome-profiles) .welcome-credit>em{font-size:8px}}
@media(max-height:740px){.music-gate:has(.welcome-profiles){justify-content:flex-start}.music-gate:has(.welcome-profiles)>.welcome-kicker{margin-top:0}.music-gate:has(.welcome-profiles)>strong{font-size:18px}.music-gate:has(.welcome-profiles) .welcome-credit{margin-top:auto}.music-gate:has(.welcome-profiles) .welcome-credit>span{display:none}}

/* Stable centering: the credit no longer pushes the controls off centre. */
.music-gate:has(.welcome-profiles)>.welcome-credit{position:absolute!important;left:16px!important;right:16px!important;bottom:max(10px,env(safe-area-inset-bottom))!important;margin:0!important}.music-gate:has(.welcome-profiles){padding-bottom:max(74px,calc(env(safe-area-inset-bottom) + 58px))}

/* The game owns the complete visible viewport. */
.game:not([hidden]){position:fixed;inset:0;z-index:20;width:100vw;max-width:none;height:var(--app-height,100dvh);max-height:none;margin:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;align-content:stretch;background:radial-gradient(circle at 50% 35%,#251047 0,#0b0517 68%,#05020b 100%);padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));overflow:hidden}.game .board-wrap{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:hidden}.game .board{width:min(calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)),calc(var(--app-height,100dvh) - 205px));max-width:570px;max-height:100%;margin:auto}.game .keypad,.game .game-tools{width:min(100%,570px);margin-left:auto;margin-right:auto}
@media(orientation:landscape) and (max-height:520px){.game:not([hidden]){grid-template-columns:minmax(220px,55vh) minmax(240px,1fr);grid-template-rows:auto minmax(0,1fr);padding:6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left))}.game .board{width:min(55vh,48vw);height:auto}.game .keypad,.game .game-tools{width:100%}}