/* Sign-in, sign-up and the starting monster: Bestiary Arena skin (docs/DESIGN.md). */
/* Like the Despertar window: padding and overflow only on the class, or ba.css hides the title bar. */
.auth-modal{padding:0;overflow:hidden}
dialog.window.auth-modal{width:min(440px,calc(100vw - 12px));max-height:calc(100dvh - 12px)}
dialog.window.auth-modal.auth-modal--wide{width:min(900px,calc(100vw - 12px))}
.auth-modal::backdrop{background:#000c}
.auth-modal #auth-body{padding:6px;overflow:auto;max-height:calc(100dvh - 40px);box-sizing:border-box}
.lg{display:grid;gap:6px}
.lg .pf-panel{margin:0}.lg .pf-head small{margin-left:auto}
.lg-logo{display:grid;justify-items:center;gap:2px;padding:10px 6px 6px}
.lg-logo b{font:bold 22px 'Tibia Pixel',Verdana,sans-serif;color:#e8c547;letter-spacing:2px;text-shadow:2px 0 #000,-2px 0 #000,0 2px #000,0 -2px #000}
.lg-logo small{color:#a9a9a9;font-size:10px;letter-spacing:3px}
.lg-form{display:grid;gap:6px;padding:8px}
.lg-form label{display:grid;gap:2px;font-size:11px;color:#c0c0c0}
.lg-form input[type=text],.lg-form input[type=password]{width:100%;box-sizing:border-box}
.lg-form .lg-check{display:flex;align-items:center;gap:5px}
.lg-error{margin:0;padding:4px 6px;color:#ff8b7e;text-align:center;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.lg-note{margin:0;font-size:10px;color:#a9a9a9;text-align:center}
.lg-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.lg-steps span{display:flex;align-items:center;justify-content:center;gap:5px;height:24px;font-size:11px;color:#a9a9a9;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.lg-steps span.on{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.lg-steps span.done{color:#5fc85f}
.lg-rules{display:grid;gap:2px;padding:0 8px 8px;font-size:10px}
.lg-rules span{color:#a9a9a9}.lg-rules span.ok{color:#5fc85f}
.lg-foot{display:flex;gap:4px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.lg-foot .pf-note{margin:0 auto 0 0}
/* Starting monsters: the Despertar path cards, one per monster. */
.st-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:6px}
.st-grid:has(.st:nth-child(6)){grid-template-columns:repeat(6,minmax(0,1fr))}
.st{align-content:start}
.st .aw-tag{white-space:nowrap}
.st-art{display:grid;place-items:center;width:76px;height:76px}
.st-sprite{display:block;image-rendering:pixelated}
.aw-head .ba-slot .st-sprite{width:58px;height:58px}
.st-bars{display:grid;gap:2px;width:100%}
.st-bars>span{display:grid;grid-template-columns:14px 1fr;align-items:center;gap:4px}
.st-bars i{position:relative;height:6px;background:#1c1c1c;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.st-bars i::before{content:'';position:absolute;top:1px;bottom:1px;left:1px;width:calc(var(--v) - 2px);min-width:1px;background:#5fc85f}
.st.active .st-bars i::before{background:#e8c547}
.st .aw-lines{margin-top:2px}
/* Detail window (the Despertar modal's layout) */
.starter-modal #starter-body{position:relative;padding:6px;overflow:auto;max-height:calc(100dvh - 40px);box-sizing:border-box}
.st-how{grid-template-columns:repeat(3,minmax(0,1fr))}
.st-lore{margin:0;padding:6px}
/* Confirmation */
.lg-confirm{display:grid;gap:6px}
.lg-banner{margin:0}
.lg-banner .st-art{margin-bottom:4px;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c,inset 0 0 10px #c5b47caa}
.lg-list{display:grid;gap:2px;font-size:11px;color:#c0c0c0}
.lg-list div{display:flex;justify-content:space-between;gap:8px;padding:1px 6px;background:#1c1c1c}
.lg-list b{color:#fff;text-align:right}
.lg-warn{margin:0;text-align:center}
@media(max-width:600px){
 .st-grid,.st-grid:has(.st:nth-child(6)){grid-template-columns:repeat(2,minmax(0,1fr))}
 .st-grid .st:last-child:nth-child(odd){grid-column:1/-1}
 .st-how{grid-template-columns:1fr}
 .lg-steps span{font-size:10px}
 .lg .pf-head small{display:none}
 .starter-modal .pf-head{height:auto;min-height:19px}
 .lg-foot .pf-note{flex-basis:100%;margin:0}
 .lg-foot button{flex:1}
}
/* Minha conta */
.acct{display:grid;gap:6px}
.acct .pf-panel{margin:0}.acct .pf-head small{margin-left:auto}
.acct-rows{display:grid;gap:2px;padding:6px;font-size:11px;color:#c0c0c0}
.acct-rows div{display:flex;justify-content:space-between;gap:8px;padding:2px 6px;background:#1c1c1c}
.acct-rows b{color:#fff;text-align:right}
.acct-actions{display:flex;gap:4px;flex-wrap:wrap;padding:0 6px 6px}
.acct-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px}
.acct-form label{display:grid;gap:2px;font-size:11px;color:#c0c0c0}
.acct-form input{width:100%;box-sizing:border-box}
.acct-form .acct-actions,.acct-form .pf-note{grid-column:1/-1;padding:0}
.acct .pf-note:empty{display:none}
.acct-devices{padding:6px}.acct-devices .pf-table{margin:0}
.acct-version{margin:0}
@media(max-width:600px){.acct-form{grid-template-columns:1fr}.acct-actions button{flex:1}}
.acct .pf-panel>.pf-note{margin:0;padding:6px 6px 0}