/* Original Banco Mastro key art; both entry states use the game's shared tokens. */
.entry-boot{position:fixed;inset:0;z-index:300;display:grid;place-items:center;overflow:hidden;background:var(--mastro-deep);isolation:isolate;color:var(--mastro-paper)}
.entry-boot-scene,.entry-scene{position:absolute;inset:0;z-index:-2;pointer-events:none}
.entry-boot-scene img,.entry-scene img{display:block;width:100%;height:100%;object-fit:cover}
.entry-vault-frame{position:absolute;left:50%;top:50%;width:max(100vw,177.778svh);aspect-ratio:16/9;transform:translate(-50%,-50%);transform-origin:50% 40%;perspective:1300px}
.entry-vault-frame>picture{position:absolute;inset:0;display:block}
.entry-vault-wall{z-index:1}
.entry-vault-leaf{z-index:2;clip-path:ellipse(17.3% 31.2% at 50% 40%);transform-origin:66% 40%;backface-visibility:hidden}
.entry-boot-scene{animation:entry-vault-camera 16s ease-in-out infinite alternate}
.entry-boot::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--mastro-backdrop),transparent 48%,var(--mastro-shadow-soft)),radial-gradient(ellipse at center,transparent 20%,var(--mastro-backdrop))}
.entry-boot::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 42%,var(--mastro-gold-subtle) 50%,transparent 58%);opacity:.25;animation:entry-light-sweep 7s ease-in-out infinite}
.entry-boot-content{display:grid;justify-items:center;gap:25px;position:relative;z-index:1;width:min(80%,360px);text-align:center;filter:drop-shadow(0 4px 18px var(--mastro-shadow))}
.entry-boot-logo{width:100%;height:auto;max-height:165px;object-fit:contain;animation:entry-logo-arrive .7s ease-out both}
.entry-boot-content p{margin:0;color:var(--mastro-paper);font:500 .8rem/1.4 var(--mastro-font-body);letter-spacing:.16em;text-transform:uppercase}
.entry-loading-track{position:relative;display:block;overflow:hidden;width:148px;height:2px;background:var(--mastro-line)}
.entry-loading-track::after{content:'';position:absolute;inset:0;background:var(--mastro-gold);transform:translateX(-100%);animation:entry-loading-scan 1.7s ease-in-out infinite}
.entry-boot-help{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:20px;right:20px;text-align:center;font-size:.85rem;color:var(--mastro-paper);text-underline-offset:4px}
.entry-boot-help[hidden]{display:none}
.entry-boot.is-ready{pointer-events:none;animation:entry-boot-exit .8s ease-in both}
.entry-boot.is-ready .entry-vault-frame{animation:entry-vault-depart .8s cubic-bezier(.55,0,.7,1) both}
.entry-boot.is-ready .entry-vault-wall{animation:entry-vault-uncover .12s linear both}
.entry-boot.is-ready .entry-vault-leaf{animation:entry-vault-open .48s cubic-bezier(.3,0,.2,1) both}
.entry-boot.is-ready .entry-boot-content{animation:entry-caption-exit .18s ease-in both}
.entry-noscript{position:fixed;z-index:301;left:20px;right:20px;bottom:24px;max-width:480px;margin:auto;padding:16px;background:var(--mastro-deep);border:1px solid var(--mastro-line);color:var(--mastro-paper);font-family:var(--mastro-font-body)}
.entry-noscript a{color:var(--mastro-gold)}
@keyframes entry-vault-camera{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes entry-light-sweep{0%,20%{transform:translateX(-90%)}80%,100%{transform:translateX(90%)}}
@keyframes entry-logo-arrive{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes entry-loading-scan{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes entry-boot-exit{0%,62%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes entry-vault-depart{0%,12%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(3.6)}}
@keyframes entry-vault-uncover{from{opacity:1}to{opacity:0}}
@keyframes entry-vault-open{from{transform:rotateY(0)}to{transform:rotateY(-105deg)}}
@keyframes entry-caption-exit{to{opacity:0;transform:translateY(-10px)}}

.entry-screen.access-screen{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100svh;background:var(--mastro-deep);overflow:clip}
.entry-screen .entry-scene{animation:entry-lobby-camera 24s ease-in-out infinite alternate}
.entry-screen::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent 35%,var(--mastro-shadow-soft) 66%,var(--mastro-deep)),linear-gradient(0deg,var(--mastro-deep),transparent 20%)}
.entry-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px clamp(24px,4vw,64px);z-index:1}
.entry-brand img{display:block;width:164px;height:76px;object-fit:contain}
.entry-header .access-back{display:inline-flex;align-items:center;gap:8px;margin:0;padding:10px 0;color:var(--mastro-paper);text-decoration:none;font-size:.85rem;text-shadow:0 1px 5px var(--mastro-shadow)}
.entry-header .access-back:hover{color:var(--mastro-gold);text-decoration:none}
.entry-header .ui-icon{width:18px;height:18px}
.access-content{flex:1;display:grid;grid-template-columns:1fr minmax(320px,440px);align-items:center;gap:40px;width:min(100%,1440px);margin:auto;padding:24px clamp(24px,6vw,92px) 64px}
.access-panel{grid-column:2;position:relative;min-width:0;padding:32px;border:1px solid var(--mastro-line);border-top:2px solid var(--mastro-gold);border-radius:var(--mastro-radius-card);background:var(--mastro-backdrop);box-shadow:0 18px 60px var(--mastro-shadow-soft);animation:entry-panel-arrive .65s ease-out both}
.access-panel .access-eyebrow{margin:0 0 12px;color:var(--mastro-gold);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase}
.access-panel h1{font:500 3.3rem/1 var(--mastro-font-display);letter-spacing:-.015em;margin:0 0 16px;color:var(--mastro-paper)}
.access-panel .access-intro{font-size:.95rem;line-height:1.5;color:var(--mastro-muted);margin:0 0 24px}
.access-actions{display:grid;gap:10px;margin:0 0 20px}
.access-actions .oauth-button{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:52px;padding:12px 42px;font-size:.95rem;font-weight:500;line-height:1.3;border-radius:4px;box-shadow:none;white-space:normal}
.access-actions .oauth-button .provider-logo{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;object-fit:contain;flex:none}
.access-actions .oauth-google{background:var(--mastro-white);border-color:var(--mastro-line-strong);color:var(--mastro-ink)}
.access-actions .oauth-google:hover:not(:disabled){background:var(--mastro-paper);border-color:var(--mastro-white);color:var(--mastro-ink)}
.access-actions .oauth-discord{background:var(--mastro-discord);border-color:var(--mastro-discord-line);color:var(--mastro-white)}
.access-actions .oauth-discord:hover:not(:disabled){background:var(--mastro-discord-hover);border-color:var(--mastro-discord-line)}
.access-actions .oauth-button:disabled{opacity:.55}
.access-actions>p,.access-actions>small{margin:0;font-size:.85rem;line-height:1.45}
.access-panel .access-note{font-size:.75rem;line-height:1.5;color:var(--mastro-muted);margin:0 0 16px}
.access-panel .access-help{display:inline-block;margin:0;font-size:.8rem;line-height:1.5;color:var(--mastro-paper);text-decoration:none}
.access-panel .access-help:hover{color:var(--mastro-gold);text-decoration:underline;text-underline-offset:4px}
.access-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:18px;margin-top:22px;border-top:1px solid var(--mastro-line)}
.access-footer .legal-link{font-size:.75rem;color:var(--mastro-muted);text-underline-offset:4px}
.access-footer small{font-size:.7rem;color:var(--mastro-muted)}
@keyframes entry-lobby-camera{from{transform:scale(1)}to{transform:scale(1.035) translateX(-.5%)}}
@keyframes entry-panel-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.entry-screen .entry-scene img{object-position:center 38%}}
@media(max-width:760px){
 .entry-screen .entry-scene{height:410px;bottom:auto}
 .entry-screen .entry-scene img{object-position:18% top}
 .entry-screen::before{background:linear-gradient(0deg,var(--mastro-deep) 20%,transparent 65%)}
 .entry-header{padding:12px 20px;gap:12px}
 .entry-brand img{width:126px;height:58px}
 .entry-header .access-back{font-size:.75rem}
 .access-content{display:block;width:100%;padding:202px 16px 24px}
 .access-panel{max-width:460px;margin:0 auto;padding:24px;background:var(--mastro-deep)}
 .access-panel h1{font-size:2.7rem;margin-bottom:12px}
 .access-panel .access-intro{font-size:.9rem;margin-bottom:20px}
 .access-panel .access-eyebrow{margin-bottom:10px}
 .access-actions{margin-bottom:16px}
 .access-footer{margin-top:18px;padding-top:16px}
 .entry-boot-content{width:min(78%,310px);gap:20px}
}
@media(max-width:360px){.access-panel{padding:20px}.access-panel h1{font-size:2.4rem}.entry-header{padding-inline:16px}.access-content{padding-inline:12px;padding-top:180px}}
@media(min-width:761px) and (max-height:720px){.entry-header{padding-block:12px}.entry-brand img{height:52px}.access-content{padding-top:10px;padding-bottom:24px}.access-panel{padding:24px}.access-panel h1{font-size:2.7rem;margin-bottom:12px}.access-panel .access-intro{margin-bottom:18px}.access-actions{margin-bottom:14px}.access-footer{margin-top:16px;padding-top:14px}}
@media(max-height:540px) and (orientation:landscape){.entry-screen .entry-scene{height:100%}.entry-screen .entry-scene img{object-position:left center}.access-content{padding-top:10px;padding-bottom:24px;display:block}.access-panel{width:min(100%,420px);margin-left:auto;margin-right:0;padding:24px}.entry-header{padding-block:10px}.entry-brand img{height:52px}.entry-screen::before{background:linear-gradient(90deg,transparent,var(--mastro-backdrop) 70%)}}

/* The original character keeps its identity, framed by the Banco Mastro gallery. */
.mastro-selection.character-selection{position:relative;isolation:isolate;max-width:none;min-height:100svh;overflow:hidden;display:flex;justify-content:flex-start;padding:0;margin:0;background:var(--mastro-deep);font-weight:500}
.selection-room{position:absolute;inset:0;z-index:-3;pointer-events:none}
.selection-room img{width:100%;height:100%;object-fit:cover;object-position:45% center}
.mastro-selection::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,transparent 20%,var(--mastro-backdrop) 64%,var(--mastro-deep)),linear-gradient(0deg,var(--mastro-deep),transparent 30%,var(--mastro-shadow-soft))}
.selection-header,.selection-footer{width:min(100%,1500px);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 40px}
.selection-header .selection-brand{width:160px;height:70px;display:block;object-fit:contain}
.selection-account{display:flex;align-items:center;gap:24px}
.selection-wallet{display:flex;align-items:center;gap:9px;color:var(--gold);font-size:1.1rem;font-variant-numeric:tabular-nums}
.selection-wallet .pixel-icon{width:28px;height:28px}
.selection-wallet>span{display:grid;gap:2px}
.selection-wallet small{font-size:.65rem;color:var(--muted)}
.selection-header button{font-size:.76rem;min-height:36px;padding:7px 12px}
.selection-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,430px);width:min(100%,1340px);margin:auto;flex:1;min-height:560px;padding:0 40px;gap:36px}
.selection-stage{position:relative;min-width:0;min-height:550px;align-self:stretch;pointer-events:none;isolation:isolate}
.selection-spotlight{position:absolute;inset:5% 0 12%;background:radial-gradient(ellipse,var(--mastro-gold-subtle),transparent 65%);animation:selection-light 5s ease-in-out infinite alternate}
.selection-plinth{position:absolute;width:min(95%,560px);height:auto;left:50%;bottom:0;transform:translateX(-50%);filter:drop-shadow(0 12px 25px var(--mastro-shadow));z-index:-1}
.selection-stage .sprite.selection-hero{position:absolute;width:min(110%,640px);height:calc(100% - 40px);left:50%;bottom:40px;transform:translateX(-50%);filter:drop-shadow(0 12px 12px var(--mastro-shadow));animation:selection-hero-arrive .6s cubic-bezier(.2,.7,.2,1) both}
.selection-stage-caption{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);color:var(--gold);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.selection-stage-caption>span{display:block;text-align:center;font-size:.55rem;letter-spacing:.3em;color:var(--muted);margin-top:4px}
.selection-roster{align-self:center;padding:24px 0;min-width:0}
.selection-eyebrow{margin:0 0 20px;color:var(--gold);text-transform:uppercase;letter-spacing:.18em;font-size:.68rem}
.mastro-selection h1{font-size:clamp(2rem,3.3vw,3rem);line-height:1.12;margin:0 0 16px;letter-spacing:-.02em;font-weight:500;overflow-wrap:anywhere}
.selection-summary{display:flex;align-items:center;gap:12px;min-width:0;margin-bottom:26px}
.selection-summary>.selection-portrait{width:90px;height:90px;flex-shrink:0;margin:0}
.selection-summary>div{min-width:0}
.selection-summary h1{margin:0 0 8px;font-size:clamp(1.8rem,3vw,2.7rem)}
.selection-summary .vip-mark{width:52px;height:20px;vertical-align:middle}
.selection-level{font-size:.82rem;margin:0;color:var(--muted);display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.selection-level>span{color:var(--paper);font-variant-numeric:tabular-nums}
.selection-state{font-size:.76rem;color:var(--muted);margin:0 0 16px}
.selection-intro{font-size:.88rem;line-height:1.6;color:var(--muted);margin:0 0 24px}
.selection-free{font-size:.72rem;margin:14px 0 0}
.selection-play>button{width:100%;min-height:52px;display:flex;justify-content:center;align-items:center;gap:10px;font-size:1rem;font-weight:500}
.selection-manage{font-size:.72rem;margin:22px 0}
.selection-manage summary{color:var(--muted);cursor:pointer;width:fit-content}
.selection-manage button{margin-top:10px;font-size:.72rem;padding:8px 12px}
.selection-roster .season-panel{padding:18px 0 0;margin:24px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}
.selection-roster .season-panel h2{font-size:1rem;margin-top:4px;font-weight:500}
.selection-roster .season-panel .season-summary{gap:12px}
.selection-roster .season-panel .season-summary small,.selection-roster .season-panel .season-date,.selection-roster .season-panel .season-rules{font-size:.7rem}
.selection-roster .season-panel .season-date{margin-top:8px}
.selection-roster .season-timer strong{font-size:.85rem}
.selection-footer{color:var(--muted);font-size:.66rem;padding-block:16px;margin-top:auto}
.selection-footer .legal-link{font-size:.7rem}
.selection-entering .selection-room{animation:selection-room-arrive 1s ease-out both}
.selection-entering .selection-roster{animation:entry-logo-arrive .55s .1s ease-out both}
@keyframes selection-room-arrive{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
@keyframes selection-hero-arrive{from{opacity:0;transform:translateX(-50%) translateY(18px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes selection-light{from{opacity:.5}to{opacity:1}}
@media(min-width:761px) and (max-height:800px){.selection-body{min-height:520px}.selection-stage{min-height:500px}.selection-roster{padding-block:16px}.selection-header{padding-block:10px}.selection-header .selection-brand{height:56px}.selection-footer{padding-block:10px}}
@media(max-width:760px){
 .selection-header{padding:12px 16px;gap:10px;align-items:flex-start}.selection-header .selection-brand{width:117px;height:52px}
 .selection-account{gap:8px;align-items:flex-end;flex-direction:column}.selection-wallet{font-size:.9rem;gap:5px}.selection-wallet .pixel-icon{width:23px;height:23px}.selection-wallet small{font-size:.6rem}.selection-header button{font-size:.68rem;padding:4px 8px;min-height:30px}
 .selection-room{height:460px;bottom:auto;mask-image:linear-gradient(#000 65%,transparent)}.selection-room img{object-position:28% top}.mastro-selection::before{background:linear-gradient(0deg,var(--mastro-deep) 30%,transparent 75%,var(--mastro-shadow-soft))}
 .selection-body{display:flex;flex-direction:column;min-height:0;padding:0 20px;gap:4px;margin:0 auto;max-width:520px}
 .selection-stage{height:300px;min-height:300px;width:100%;margin-top:-24px}.selection-stage .sprite.selection-hero{width:370px;height:335px;bottom:12px;max-width:120%}.selection-plinth{width:330px;max-width:100%;bottom:-6px}.selection-stage-caption{bottom:2px;font-size:.6rem}.selection-stage-caption>span{font-size:.5rem}
 .selection-roster{position:relative;isolation:isolate;width:100%;padding:16px 0 4px}.selection-roster::before{content:'';position:absolute;inset:-8px -20px 0;z-index:-1;background:var(--mastro-deep);box-shadow:0 -12px 24px var(--mastro-deep);pointer-events:none}
 .selection-eyebrow{font-size:.64rem;margin-bottom:14px}.mastro-selection h1{font-size:2rem}.selection-summary{margin-bottom:22px;gap:12px}.selection-summary>.selection-portrait{width:74px;height:74px}.selection-summary h1{font-size:1.9rem}.selection-level{font-size:.78rem;gap:10px}
 .selection-footer{padding:16px 20px}.selection-roster .season-panel{margin-top:22px}.selection-manage{margin-block:18px}
}
@media(max-width:360px){.selection-stage{height:260px;min-height:260px}.selection-stage .sprite.selection-hero{height:300px}.selection-header{padding-inline:12px}.selection-body{padding-inline:16px}.selection-summary h1{font-size:1.65rem}.selection-summary>.selection-portrait{width:65px;height:65px}.selection-summary{gap:9px}.selection-level{font-size:.72rem}}

@media(max-width:760px){.selection-stage-caption>span{display:none}}

/* Character creation shares the selection scene, with room for touch and keyboard. */
.modal-backdrop.creation-backdrop{padding:0;display:block;overflow:hidden}
.dialog.character-dialog{position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:var(--mastro-deep);box-shadow:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;font-weight:500;scroll-padding-block:20px}
.creation-room{position:absolute;inset:0;z-index:-3;pointer-events:none;animation:selection-room-arrive .7s ease-out both}
.creation-room img{display:block;width:100%;height:100%;object-fit:cover;object-position:40% center}
.character-dialog::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,transparent 15%,var(--mastro-backdrop) 62%,var(--mastro-deep)),linear-gradient(0deg,var(--mastro-deep),transparent 45%,var(--mastro-shadow-soft))}
.creation-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;width:min(100%,1500px);margin:0 auto;padding:18px 40px}
.creation-header .creation-brand{display:block;width:160px;height:70px;object-fit:contain}
.character-dialog .creation-back{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 12px;background:var(--mastro-backdrop);border-color:var(--mastro-line);font-size:.8rem;font-weight:500;box-shadow:none}
.creation-back .ui-icon{width:17px;height:17px}
.character-dialog .creation-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,440px);align-items:center;gap:40px;flex:1;width:min(100%,1340px);min-height:600px;margin:0 auto;padding:0 40px 36px}
.character-dialog .creation-preview{display:flex;flex-direction:column;align-self:stretch;justify-content:center;min-width:0;margin:0;padding:0;background:none;border:0;border-radius:0;text-align:center}
.creation-stage-art{position:relative;isolation:isolate;flex:1;min-height:410px;pointer-events:none}
.creation-stage-art .selection-spotlight{inset:0 0 8%}
.creation-plinth{position:absolute;z-index:-1;left:50%;bottom:-20px;transform:translateX(-50%);width:min(105%,550px);height:auto;filter:drop-shadow(0 12px 25px var(--mastro-shadow))}
.creation-preview .sprite.creation-sprite{position:absolute;display:block;left:50%;bottom:22px;transform:translateX(-50%);width:110%;max-width:640px;height:100%;margin:0;filter:drop-shadow(0 12px 12px var(--mastro-shadow));animation:selection-hero-arrive .4s ease-out both}
.creation-preview figcaption{position:relative;margin:0;padding:10px 0 4px;color:var(--mastro-paper);font-weight:500}
.creation-preview figcaption h3{font:500 clamp(1.5rem,2.4vw,2rem)/1.15 var(--mastro-font-display);margin:0 0 6px}
.creation-preview figcaption p{min-height:0;font-size:.78rem;line-height:1.45;margin:0;color:var(--mastro-muted)}
.creation-controls{min-width:0;padding:12px 0;animation:entry-panel-arrive .5s ease-out both}
.character-dialog .creation-heading{margin:0 0 24px}
.character-dialog .creation-eyebrow{margin:0 0 10px;color:var(--gold);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.character-dialog .creation-heading h2{font:500 clamp(2rem,3.4vw,3rem)/1.05 var(--mastro-font-display);letter-spacing:-.015em;margin:0;max-width:360px}
.creation-name{margin-bottom:18px}
.character-dialog .character-name-label{display:block;font-size:.8rem;font-weight:500;margin:0 0 8px;color:var(--mastro-paper)}
.character-dialog #character-name{display:block;width:100%;min-width:0;max-width:100%;margin:0;min-height:48px;padding:12px 14px;background:var(--mastro-subtle);border:1px solid var(--mastro-line-strong);border-radius:var(--mastro-radius-control);color:var(--mastro-paper);font:500 1rem/1.3 var(--mastro-font-body)}
.character-dialog #character-name:focus{outline:2px solid var(--gold);outline-offset:2px}
.character-dialog #character-name::placeholder{color:var(--mastro-muted);opacity:1}
.character-dialog #character-name[aria-invalid=true]{border-color:var(--red)}
.character-dialog .character-name-error{font-size:.78rem;font-weight:500;line-height:1.4;margin:6px 0 0;color:var(--red)}
.character-dialog .character-name-error:empty{display:none}
.character-dialog .character-choices{min-width:0}
.character-dialog .avatar-heading{margin:0 0 9px}
.character-dialog .avatar-heading h3{font:500 .8rem/1.4 var(--mastro-font-body);color:var(--mastro-paper)}
.character-dialog .avatar-filters{display:flex;gap:6px;margin:0 0 10px}
.character-dialog .avatar-filters button{min-width:0;min-height:36px;padding:7px 13px;font-size:.73rem;font-weight:500;border-color:var(--mastro-line);background:var(--mastro-subtle);box-shadow:none}
.character-dialog .avatar-filters button[aria-pressed=true]{color:var(--gold);border-color:var(--gold);background:var(--mastro-gold-subtle)}
.character-dialog .avatar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:none;overflow:visible;padding:3px;margin:-3px}
.character-dialog .avatar-option{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding:6px 4px;gap:2px;border:1px solid var(--mastro-line);border-radius:var(--mastro-radius-control);background:var(--mastro-subtle);font-weight:500;box-shadow:none;text-align:center;transition:background .15s,border-color .15s}
.character-dialog .avatar-option[hidden]{display:none}
.character-dialog .avatar-option .sprite.avatar-choice-sprite{height:clamp(64px,7.8vw,92px);width:100%;aspect-ratio:auto}
.character-dialog .avatar-option>span:first-of-type{display:flex;align-items:center;min-height:24px;font-size:.72rem;line-height:1.25;font-weight:500}
.character-dialog .avatar-option:hover{background:var(--mastro-raised);border-color:var(--mastro-line-strong)}
.character-dialog .avatar-option[aria-pressed=true]{border-color:var(--gold);background:var(--mastro-gold-subtle)}
.character-dialog .avatar-selected{display:none;position:absolute;align-items:center;justify-content:center;right:5px;top:5px;width:18px;height:18px;border-radius:50%;color:var(--mastro-ink);background:var(--gold)}
.character-dialog .avatar-option[aria-pressed=true] .avatar-selected{display:flex}
.character-dialog .avatar-selected .ui-icon{width:12px;height:12px}
.character-dialog .avatar-option:focus-visible,.character-dialog .avatar-filters button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.character-dialog .creation-footer{display:block;border:0;margin:20px 0 0;padding:0}
.character-dialog button.creation-start{display:flex;align-items:center;justify-content:center;gap:14px;min-width:0;width:100%;min-height:52px;font-size:.95rem;font-weight:500}
.creation-start .ui-icon{width:19px;height:19px}
@media(min-width:901px) and (max-height:760px){
 .creation-header{padding-block:10px}.creation-header .creation-brand{height:52px}
 .character-dialog .creation-layout{min-height:530px;padding-bottom:24px}.creation-stage-art{min-height:380px}
 .character-dialog .creation-heading{margin-bottom:18px}.character-dialog .creation-heading h2{font-size:2.3rem}
 .character-dialog .avatar-option .sprite.avatar-choice-sprite{height:66px}.character-dialog .creation-footer{margin-top:16px}
}
@media(max-width:900px){
 .creation-header{padding:10px 16px}.creation-header .creation-brand{width:117px;height:52px}
 .character-dialog .creation-back{font-size:.73rem;padding:8px 10px}
 .creation-room{height:460px;bottom:auto;mask-image:linear-gradient(#000 60%,transparent)}.creation-room img{object-position:28% top}
 .character-dialog::before{background:linear-gradient(0deg,var(--mastro-deep) 20%,transparent 80%,var(--mastro-shadow-soft))}
 .character-dialog .creation-layout{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0;gap:8px;width:min(100%,520px);padding:0 20px max(20px,env(safe-area-inset-bottom));margin:0 auto;flex:none}
 .character-dialog .creation-preview{display:block;flex:none;margin:-12px 0 0}
 .creation-stage-art{height:clamp(170px,25svh,230px);min-height:0}
 .creation-preview .sprite.creation-sprite{width:340px;max-width:100%;height:calc(100% + 24px);bottom:6px}
 .creation-plinth{width:290px;max-width:100%;bottom:-22px}
 .creation-preview figcaption{padding:4px 0 8px}.creation-preview figcaption h3{font-size:1.35rem;margin-bottom:4px}.creation-preview figcaption p{font-size:.72rem}
 .creation-controls{position:relative;isolation:isolate;padding:6px 0 0}
 .creation-controls::before{content:'';position:absolute;inset:0 -20px -20px;z-index:-1;background:var(--mastro-deep);box-shadow:0 -10px 22px var(--mastro-deep);pointer-events:none}
 .character-dialog .creation-heading{margin-bottom:16px}.character-dialog .creation-heading h2{font-size:2rem;max-width:none}.character-dialog .creation-eyebrow{display:none}
 .creation-name{margin-bottom:16px}.character-dialog .character-name-label{font-size:.75rem;margin-bottom:6px}
 .character-dialog #character-name{min-height:46px;padding:10px 12px}
 .character-dialog .avatar-option .sprite.avatar-choice-sprite{height:62px}.character-dialog .avatar-option{padding:4px;gap:0}
 .character-dialog .avatar-option>span:first-of-type{font-size:.66rem;min-height:24px;line-height:1.25}
 .character-dialog .avatar-grid{gap:7px}.character-dialog .avatar-filters button{min-height:40px;padding-inline:14px}
 .character-dialog .creation-footer{position:sticky;bottom:0;z-index:2;margin:6px 0 -8px;padding:10px 0 max(12px,env(safe-area-inset-bottom));background:var(--mastro-deep);box-shadow:0 -8px 14px var(--mastro-deep)}
}
@media(max-width:360px){
 .creation-header{padding-inline:12px}.character-dialog .creation-layout{padding-inline:16px}.creation-controls::before{inset-inline:-16px}
 .creation-stage-art{height:150px}.creation-preview figcaption h3{font-size:1.2rem}.creation-preview figcaption p{font-size:.68rem}
 .character-dialog .creation-heading h2{font-size:1.8rem}.character-dialog .avatar-option .sprite.avatar-choice-sprite{height:52px}
 .character-dialog .avatar-option>span:first-of-type{font-size:.62rem}.character-dialog .avatar-grid{gap:6px}
}
@media(max-width:900px) and (max-height:540px) and (orientation:landscape){
 .character-dialog .creation-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:24px;width:100%;max-width:1000px;padding-inline:24px}
 .character-dialog .creation-preview{position:sticky;top:12px;align-self:start;margin:0}.creation-stage-art{height:230px}
 .creation-room{height:100%}.character-dialog .creation-heading h2{font-size:1.8rem}
 .character-dialog .avatar-option .sprite.avatar-choice-sprite{height:48px}.character-dialog .creation-heading{margin-bottom:12px}
}