/* Wide, shallow login: keep visible scenery and a balanced left-hand group. */
@font-face{font-family:KinoLoginDisplay;src:url('/ibm-plex-mono-regular-v1.ttf') format('truetype');font-display:swap}
.auth-stage{--entry-width:min(760px,calc(100vw - 32px))}
@media(min-width:601px) and (max-height:720px) and (orientation:landscape){
 .auth-stage{--entry-width:min(1000px,calc(100vw - 80px))}
 .auth-stage>.auth-panel[data-step=login]{width:var(--entry-width)!important;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)!important;grid-template-rows:minmax(0,1fr) auto auto auto minmax(0,1fr)!important;gap:22px 40px;padding:24px 36px!important}
 .auth-stage>.auth-panel[data-step=login] .auth-brand{justify-self:center;width:100%}
 .auth-stage>.auth-panel[data-step=login] .auth-brand img{width:270px!important;max-width:88%}
 .auth-stage>.auth-panel[data-step=login] #auth-title{font-family:KinoLoginDisplay,Consolas,monospace!important;font-size:clamp(20px,2.4vw,28px)!important;font-weight:600;letter-spacing:.025em!important;line-height:1.25;margin:0!important;gap:12px}
 .auth-stage>.auth-panel[data-step=login] #auth-title::before,.auth-stage>.auth-panel[data-step=login] #auth-title::after{display:none}
 .auth-stage>.auth-panel[data-step=login] #new-account{font-family:KinoLoginDisplay,Consolas,monospace;font-size:14px!important;letter-spacing:.04em;min-height:44px;margin:0 auto!important;padding:10px 8px}
 .auth-stage>.auth-panel[data-step=login] #login-form{max-width:380px;height:min(100%,420px);gap:10px}
 .auth-stage>.auth-panel[data-step=login] #access-hint{text-align:left;justify-self:stretch;font-family:KinoLoginDisplay,Consolas,monospace;font-size:14px!important;letter-spacing:.035em;line-height:1.4}
}
@media(min-width:601px) and (max-width:900px) and (max-height:720px) and (orientation:landscape){
 .auth-stage{--entry-width:calc(100vw - 56px)}
 .auth-stage>.auth-panel[data-step=login]{width:var(--entry-width)!important;column-gap:24px;padding-inline:24px!important}
 .auth-stage>.auth-panel[data-step=login] #access-hint{font-size:12px!important}
}
/* A narrow desktop window still uses the desktop hall and a compact login. */
@media(hover:hover) and (pointer:fine){
 .auth-body{background-image:url('/auth/background-pc-v4.webp')}
}
@media(hover:hover) and (pointer:fine) and (min-width:601px) and (max-width:900px) and (orientation:portrait){
 .auth-stage{--entry-width:min(520px,calc(100vw - 64px));padding:24px 16px!important;min-height:100dvh}
 .auth-stage>.auth-panel[data-step=login]{width:var(--entry-width)!important;height:min(560px,calc(100dvh - 48px))!important;min-height:0!important;max-height:none!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:1fr auto auto 1fr!important;gap:24px;padding:28px!important}
 .auth-stage>.auth-panel[data-step=login] #login-view{display:contents!important}
 .auth-stage>.auth-panel[data-step=login] .auth-brand{grid-area:1/1!important;min-height:0!important;align-self:center!important;margin:0!important}
 .auth-stage>.auth-panel[data-step=login] .auth-brand img{width:240px!important}
 .auth-stage>.auth-panel[data-step=login] #auth-title{grid-area:2/1;font:600 clamp(18px,3.8vw,26px)/1.3 KinoLoginDisplay,Consolas,monospace!important;letter-spacing:.025em!important;margin:0!important}
 .auth-stage>.auth-panel[data-step=login] #auth-title::before,.auth-stage>.auth-panel[data-step=login] #auth-title::after{display:none}
 .auth-stage>.auth-panel[data-step=login] #login-form{grid-area:3/1;display:grid;grid-template-rows:auto 56px;gap:12px;width:100%;max-width:360px;justify-self:center;height:auto;margin:0}
 .auth-stage>.auth-panel[data-step=login] #access-hint{text-align:left;font-size:12px!important;letter-spacing:.06em;margin:0!important}
 .auth-stage>.auth-panel[data-step=login] .code-entry{width:100%;height:56px!important;margin:0!important;max-width:none}
 .auth-stage>.auth-panel[data-step=login] .code-cells{height:100%!important}
 .auth-stage>.auth-panel[data-step=login] .code-cells span{aspect-ratio:auto}
 .auth-stage>.auth-panel[data-step=login] .keypad{display:none!important}
 .auth-stage>.auth-panel[data-step=login] #new-account{grid-area:4/1;align-self:center;min-height:44px;margin:0 auto!important}
}
/* Registration shares the login width. Only the gallery scrolls at normal
   heights; very short viewports retain an outer escape instead of clipping. */
:is(.auth-stage,html[data-playback-device=projector] .auth-stage)>.auth-panel[data-step=register]{width:var(--entry-width)!important;min-width:0!important;height:min(680px,calc(100dvh - 48px))!important;min-height:0!important;max-height:calc(100dvh - 24px)!important;display:flex!important;flex-direction:column;gap:12px;padding:24px 28px!important;overflow-y:auto!important}
:is(.auth-stage,html[data-playback-device=projector] .auth-stage)>.auth-panel[data-step=register] .auth-brand{flex:none;min-height:0!important;margin:0!important;align-self:center!important}
:is(.auth-stage,html[data-playback-device=projector] .auth-stage)>.auth-panel[data-step=register] .auth-brand img{width:180px!important}
:is(.auth-stage,html[data-playback-device=projector] .auth-stage)>.auth-panel[data-step=register] .profile-preview{flex:none;min-height:48px!important;margin:0!important}
:is(.auth-stage,html[data-playback-device=projector] .auth-stage)>.auth-panel[data-step=register] #register-view{display:flex!important;flex:1 1 auto!important;min-height:190px!important;width:100%;margin:0}
:is(.auth-stage,html[data-playback-device=projector] .auth-stage)>.auth-panel[data-step=register] #register-form{display:grid!important;grid-template-rows:auto 44px minmax(80px,1fr) auto;gap:8px;height:100%!important;min-height:0;width:100%}
:is(.auth-stage,html[data-playback-device=projector] .auth-stage)>.auth-panel[data-step=register] .name-input{height:44px;margin:0!important;font-size:16px}
:is(.auth-stage,html[data-playback-device=projector] .auth-stage)>.auth-panel[data-step=register] #register-form .avatar-field{display:flex!important;flex-direction:column;flex:1!important;min-height:0!important;margin:0!important}
:is(.auth-stage,html[data-playback-device=projector] .auth-stage)>.auth-panel[data-step=register] #register-form .avatar-grid{flex:1!important;height:auto!important;min-height:0!important;max-height:100%!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:auto;touch-action:pan-y;scrollbar-gutter:stable!important;scrollbar-width:thin;padding:4px 12px 4px 4px;margin:0;width:100%}
:is(.auth-stage,html[data-playback-device=projector] .auth-stage)>.auth-panel[data-step=register] #register-form>.primary{min-height:44px;margin:0!important}
@media(max-width:600px){
 .auth-stage{--entry-width:calc(100vw - 32px)}
 :is(.auth-stage,html[data-playback-device=projector] .auth-stage)>.auth-panel[data-step=register]{height:100%!important;padding:16px!important}
 :is(.auth-stage,html[data-playback-device=projector] .auth-stage)>.auth-panel[data-step=register] #register-form .avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(orientation:landscape) and (max-height:550px){
 :is(.auth-stage,html[data-playback-device=projector] .auth-stage)>.auth-panel[data-step=register]{display:grid!important;grid-template-columns:minmax(140px,.7fr) minmax(0,1.3fr)!important;grid-template-rows:1fr 1fr!important;height:100%!important;padding:16px 24px!important;gap:12px 24px}
 :is(.auth-stage,html[data-playback-device=projector] .auth-stage)>.auth-panel[data-step=register] .auth-brand{grid-area:1/1!important;align-self:end!important}
 :is(.auth-stage,html[data-playback-device=projector] .auth-stage)>.auth-panel[data-step=register] .profile-preview{grid-area:2/1!important;align-self:start}
 :is(.auth-stage,html[data-playback-device=projector] .auth-stage)>.auth-panel[data-step=register] #register-view{grid-area:1/2/3/3!important;align-self:stretch;min-height:190px!important}
 :is(.auth-stage,html[data-playback-device=projector] .auth-stage)>.auth-panel[data-step=register] #register-form .avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(min-width:601px) and (max-height:400px) and (orientation:landscape){
 .auth-stage>.auth-panel[data-step=login]{row-gap:14px;padding-block:14px!important}
 .auth-stage>.auth-panel[data-step=login] .auth-brand img{width:240px!important}
 .auth-stage>.auth-panel[data-step=login] #login-form{gap:6px}
}