.auth-screen{position:absolute;inset:0;z-index:25;display:flex;align-items:center;justify-content:center;background:#061116 url('/assets/login-background-v5.webp') center/cover no-repeat;color:#e9dfc4}
.auth-snow{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
#game-shell #arena-stage #auth-sound-btn{position:absolute;z-index:1;bottom:8px;right:8px;width:22px;height:22px;border:0!important}
.auth-screen.auth-revealing::after{content:'';position:absolute;inset:0;z-index:2;background:#000;pointer-events:none;animation:auth-screen-reveal var(--anger-screen-fade-duration,1s) ease both}
@keyframes auth-screen-reveal{from{opacity:1}to{opacity:0}}
.auth-languages{--auth-flag-width:26px;position:relative;z-index:1;grid-column:1;grid-row:1;display:flex;align-items:center;align-self:start;justify-self:start;min-height:22px;gap:4px}
.auth-screen .auth-languages button{display:grid;place-items:center;flex:0 0 var(--auth-flag-width);width:var(--auth-flag-width);padding:0;font:11px/18px Arial,sans-serif;white-space:nowrap}
#game-shell #auth-languages button{height:18px!important;min-height:18px!important;max-height:18px!important;background:transparent!important;border:0!important;box-shadow:none!important}
#game-shell #auth-languages button[aria-pressed=true]{opacity:1!important}
.auth-languages img{display:block;width:var(--auth-flag-width);height:18px;object-fit:contain}
#auth-online{grid-column:3;grid-row:1;align-self:start;justify-self:stretch;text-align:right;color:rgb(0,220,0);line-height:22px;white-space:pre}
#game-shell #auth-support{grid-column:1;grid-row:2;align-self:end;justify-self:start;min-width:0;max-width:100%;overflow-wrap:anywhere;font:900 14px/22px 'Arial Black',Arial,sans-serif;color:rgb(40,40,40);text-decoration:none;outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
.auth-card{position:relative;z-index:0;flex:0 0 auto;width:max-content;min-width:0;height:auto;min-height:40%;display:grid;grid-template-columns:120px 200px 120px;grid-template-rows:1fr 1fr;column-gap:8px;padding:8px;border:1px solid #000;background:repeating-linear-gradient(to bottom,rgb(0 0 0 / 20%) 0 1px,transparent 1px 2px),rgb(0 0 0 / 80%);box-shadow:0 0 32px #000;overflow:visible}
.auth-content{grid-column:2;grid-row:1/3;min-width:0;display:flex;flex-direction:column}
.auth-card :is(#auth-form-home,#auth-form,.auth-login-preview){display:contents}
.auth-card #auth-form>.auth-actions,.auth-login-preview>.auth-actions{order:7;margin-top:8px}
.auth-login-preview>:first-child{order:1}
.auth-login-preview>:nth-child(2){order:2}
.auth-card .auth-server-picker{order:6}
.auth-card h1{position:absolute;bottom:calc(100% + 16px);inset-inline:0;font:400 32px/1.2 'Blood',sans-serif;letter-spacing:.4px;margin:0;padding-inline:0;text-align:center;color:var(--anger-title-color,#c9010d);text-shadow:0 0 16px #000;-webkit-text-stroke:1px #000;paint-order:stroke fill;overflow-wrap:anywhere}
.auth-server-picker{margin-top:8px}
.auth-server-picker .menu-picker-menu{top:100%;bottom:auto}
#game-shell #auth-server-button{position:relative;justify-content:center;padding-inline:22px;text-align:center;color:rgb(240,160,80)!important}
#auth-server-button .menu-picker-label::before{content:'';display:inline-block;width:20px;height:20px;background:url('/assets/animated_dot.gif') left center/20px 20px no-repeat;vertical-align:middle}
#auth-server-button::after{position:absolute;right:5px;top:50%;transform:translateY(-50%)}
#game-shell #auth-submit.auth-loading{background:url('/assets/loading.gif') center/20px 20px no-repeat,var(--button-background)!important}
.auth-screen button{width:100%;min-width:0;height:22px;min-height:22px;max-height:22px;padding:0 4px;font-size:10px;line-height:10px;white-space:normal;overflow-wrap:anywhere}
.auth-card #auth-guest{order:6;margin-top:8px}
.auth-card .auth-guest-dot{width:20px;height:20px;object-fit:contain;vertical-align:middle}
.auth-card #auth-email-field>label{margin-top:0}
.auth-card #auth-password-field,.auth-card .auth-login-preview>div:nth-child(2){padding-top:4px}
.auth-card #auth-password-field>label,.auth-card .auth-login-preview label[for=auth-preview-password]{margin-top:0}
.auth-screen label:is([for=auth-email],[for=auth-password],[for=auth-preview-email],[for=auth-preview-password]){padding-left:4px;margin-bottom:4px;font-size:11px!important}
.auth-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.auth-card :is(#auth-submit,.auth-login-preview [data-auth-copy=signIn]){grid-column:1/-1;grid-row:1}
#game-shell .auth-card :is(#auth-submit,.auth-login-preview [data-auth-copy=signIn]){--button-background:linear-gradient(to bottom,#dc2633 0%,#760008 10%);--button-hover-background:linear-gradient(to bottom,#f13b47 0%,#8d0009 10%);--button-selected-background:linear-gradient(to bottom,#be1923 0%,#650006 10%);height:40px!important;min-height:40px!important;max-height:40px!important;font-size:16px!important;line-height:20px}
#game-shell .auth-card :is(#auth-submit,.auth-login-preview [data-auth-copy=signIn]):enabled:active{background:linear-gradient(to bottom,#760008 0%,#9c000a 10%)!important}
.auth-card :is(#auth-register,.auth-login-preview [data-auth-copy=register]){grid-column:1;grid-row:2}
.auth-card :is(#auth-forgot,.auth-login-preview [data-auth-copy=recovery]){grid-column:2;grid-row:2}
.auth-screen label{display:block;font-size:10px;margin:8px 0 4px}.auth-screen input,.auth-screen select{width:100%;min-width:0;height:28px;font-size:11px;border-color:#000}
.auth-remember-row{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:8px;padding-inline:4px}
.auth-servers-label{margin-right:auto}
.auth-screen .auth-remember-row label,.auth-remember-row input[type=checkbox]{margin:0}
/* Keep Chromium's autofill preview and committed text at the same visible 11px
   boot.js measures the native font once before revealing the form
   A numeric scale avoids unresolved length division in transform */
.auth-input-box{position:relative;width:100%;height:22px}
@supports (font:-webkit-small-control){
  #game-shell #auth-screen :is(#auth-name,#auth-email,#auth-password,#auth-confirm,#auth-preview-email,#auth-preview-password){
    position:absolute;left:0;top:0;
    font:-webkit-small-control!important;
    font-family:'IBM Plex Sans',sans-serif!important;
    transform:scale(var(--auth-input-scale,.825));transform-origin:0 0;
    width:calc(100% / var(--auth-input-scale,.825));
    height:calc(22px / var(--auth-input-scale,.825))!important;
    min-height:calc(22px / var(--auth-input-scale,.825))!important;
    max-height:calc(22px / var(--auth-input-scale,.825))!important;
    padding-left:calc(4px / var(--auth-input-scale,.825))!important;
    padding-right:calc(8px / var(--auth-input-scale,.825));
    --field-border-width:calc(1px / var(--auth-input-scale,.825));
  }
  #game-shell #auth-screen :is(#auth-name,#auth-email,#auth-password,#auth-confirm,#auth-preview-email,#auth-preview-password)::placeholder{font-size:inherit!important}
}
#auth-form{display:flex;flex-direction:column}#auth-name-field{order:0}#auth-email-field{order:1}#auth-password-field{order:2}#auth-confirm-field{order:4}#auth-details-field{order:5}#auth-form>.auth-actions{order:6}
.auth-modal-backdrop{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:20px;background:#071007bb}
.auth-modal-backdrop.ui-closing{pointer-events:none}
.auth-login-preview{display:flex;flex-direction:column}
.auth-card .auth-login-preview label{margin-top:0}
.auth-modal{width:min(460px,100%);max-height:100%;overflow:auto;padding:24px;background:linear-gradient(130deg,#30291ff5,#15130ff5);box-shadow:0 14px 50px #000c;scrollbar-width:thin;scrollbar-color:#8a7954 #191b15}
.auth-modal-inner{display:contents}
#game-shell #auth-modal.auth-support #auth-modal-title{font:700 11px/12px Arial,sans-serif;color:rgb(240,200,120)}
#game-shell #auth-support-details a{display:flex;align-items:center;min-width:0;height:22px;padding:0 4px;border:1px solid #000;background:#151713;font:11px/18px Arial,sans-serif;color:#eee0bc;text-decoration:none;overflow-wrap:anywhere}
.auth-modal header{display:flex;align-items:center;gap:12px;margin-bottom:10px}.auth-modal h2{flex:1;margin:0;font:700 20px Georgia,serif;color:#f1cd83}.auth-modal #auth-modal-close{flex:0 0 22px;width:22px;font-size:20px}
.auth-modal #auth-password-field{order:1}.auth-modal #auth-confirm-field{order:2}.auth-modal #auth-email-field{order:3}
.auth-details{display:grid;grid-template-columns:1fr 1fr;gap:12px}.auth-details>div{min-width:0}
.auth-modal [data-auth-mode]{display:none}.auth-modal .auth-actions{grid-template-columns:minmax(0,1fr) 120px;align-items:center;margin-top:18px}.auth-modal #auth-submit{grid-column:2}
.auth-modal:is(.auth-recovery,.auth-registration,.auth-support){background:#2d2117 url('/assets/lobby-background.png') center/cover no-repeat;box-shadow:inset 0 0 0 1px #000,0 14px 50px #000c}
.auth-modal.auth-registration{width:min(420px,100%);padding:4px;overflow:visible}
.auth-registration .auth-modal-inner{position:relative;isolation:isolate;display:block;min-width:0;padding:8px 12px;box-shadow:inset 0 0 0 1px #000}
.auth-registration header{align-items:center;justify-content:center;min-height:22px;margin-bottom:2px;text-align:center}
#game-shell #auth-modal.auth-registration #auth-modal-title{display:block;font:700 14px/18px Arial,sans-serif;color:rgb(240,200,120)}
#game-shell #auth-modal.auth-registration :where(:not(#auth-modal-title,#auth-modal-title *)){font-size:11px!important}
#game-shell #auth-modal.auth-registration .menu-picker-toggle::after{font-size:11px!important}
.auth-registration #auth-form label{margin:4px 0;padding-left:0}
.auth-registration #auth-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:'nickname password' 'email confirm' 'details details' 'status status' '. actions';column-gap:12px}
.auth-registration #auth-form>div{min-width:0}
.auth-registration #auth-name-field{grid-area:nickname}
.auth-registration #auth-email-field{grid-area:email}
.auth-registration #auth-password-field{grid-area:password}
.auth-registration #auth-confirm-field{grid-area:confirm}
.auth-registration #auth-details-field{grid-area:details}
.auth-registration #auth-form>.auth-actions{grid-area:actions;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;margin-top:8px}
.auth-registration #auth-cancel{grid-column:1;grid-row:1}
.auth-registration #auth-submit{grid-row:1}
.auth-country-picker .menu-picker-menu{top:100%;bottom:auto;max-height:176px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.auth-country-picker .menu-picker-menu button{flex:0 0 22px;text-align:left;overflow:hidden;text-overflow:clip}
.auth-country-picker .menu-picker-toggle{overflow:hidden}
.auth-country-picker .menu-picker-toggle::after{flex-shrink:0}
.auth-date-picker:has(>.auth-date-menu:not(.hidden)){z-index:3}
.auth-date-menu{position:absolute;left:0;top:100%;bottom:auto;z-index:5;width:244px;padding:4px;background:#111;border:1px solid #000;box-shadow:0 2px 8px #0008}
.auth-date-header{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:4px;margin-bottom:4px}
.auth-date-header .menu-picker-menu{top:100%;bottom:auto;max-height:176px;overflow-y:auto;overscroll-behavior:contain}
.auth-date-header .menu-picker-menu button{flex:0 0 22px}
.auth-date-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;text-align:center}
#game-shell .auth-date-days button{padding:0}
.auth-modal:is(.auth-recovery,.auth-support){position:relative;display:flex;flex-direction:column;width:220px;height:auto;padding:4px;overflow:auto}
:is(.auth-recovery,.auth-support) .auth-modal-inner{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;padding:0 12px 8px;box-shadow:inset 0 0 0 1px #000}
.auth-support header{position:static;min-height:34px;margin:0;padding-right:26px;gap:0}
#game-shell #auth-modal.auth-support #auth-modal-close{position:absolute;top:8px;right:12px}
.auth-recovery #auth-modal-body{flex:0 0 auto;min-width:0;margin-block:0}
.auth-recovery header{position:absolute;top:8px;right:12px;margin:0;gap:0}
.auth-recovery #auth-modal-title{display:none}
.auth-screen .auth-recovery #auth-email-field>label{display:flex;align-items:center;justify-content:center;min-height:34px;margin:0;padding-inline:0;text-align:center;font-size:11px;font-weight:700;line-height:12px;color:rgb(240,200,120)}
.auth-screen .auth-recovery #auth-email{display:block;height:22px;padding-inline:4px}
.auth-recovery .auth-actions{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:8px;gap:4px}
.auth-recovery #auth-submit{grid-column:1}
.auth-recovery #auth-cancel{grid-column:2;grid-row:1}
.auth-recovery #auth-submit{grid-row:1}
#lobby-logout-btn{font:bold 20px Arial;width:22px;height:22px;padding:0;flex-shrink:0}
#rooms-panel .room-actions{flex-wrap:nowrap;gap:4px;padding:1px 0}#rooms-panel .room-actions>button{flex:1 1 auto;margin:0;white-space:nowrap;font-size:9px;padding-left:5px;padding-right:5px}.room-actions #room-sort-select{flex:0 0 116px;width:116px;min-width:0;height:25px;margin:0;font-size:9px;padding:2px;color:#dfc695;background:#1b1712;border:1px solid #6d5732}.room-level-hint{display:block;margin:5px 0 12px;color:#c0aa79;font-size:10px}
