/* Preparation is a full page, not an overlay on a running arena. */
.account-page, .character-page { position: absolute; inset: 0; width: 100%; height: 100dvh; max-height: none; overflow: auto; transform: none; border: 0; border-radius: 0; box-shadow: none; background: radial-gradient(ellipse at 85% 20%, #1a3c45 0, transparent 55%), #0b151e; z-index: 2; padding: 108px max(28px, calc((100vw - 1440px) / 2)) 36px; }
.topbar { z-index: 3; } #notice { z-index: 6; }
.account-page { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7vw; }
.access-content { max-width: 550px; padding: 24px; }.access-content h1 { font-size: clamp(40px, 4.8vw, 74px); line-height: 1.08; }.access-content .intro { font-size: 17px; line-height: 1.9; margin: 26px 0; }
.access-content .primary { max-width: 360px; padding: 18px; font-size: 14px; }.access-content .profile-note { margin-top: 16px; }.access-content .prototype-note { text-align: left; max-width: 360px; font-size: 11px; }
.access-art { text-align: center; color: #72c7c0; }.sigil { aspect-ratio: 1; width: min(31vw, 410px); display: grid; place-items: center; margin: auto; border: 1px solid #77cfbb44; outline: 1px solid #77cfbb22; outline-offset: 28px; border-radius: 50%; font-size: 170px; background: radial-gradient(#539a9355, transparent 65%); text-shadow: 0 0 80px #8af3cc; }.access-art p { font-size: 10px; letter-spacing: .3em; margin-top: 60px; }
.manager-top { display: flex; justify-content: space-between; border-bottom: 1px solid #789ba333; padding-bottom: 20px; gap: 20px; }.manager-top .eyebrow { margin: 0; }.manager-top nav { display: flex; gap: 26px; font-size: 10px; letter-spacing: .1em; color: #78929a; }.manager-top nav b { color: #bce7d7; font-weight: 500; }
.manager-layout { display: grid; grid-template-columns: 265px 1fr; min-height: calc(100dvh - 175px); }.roster-sidebar { padding: 32px 24px 20px 0; border-right: 1px solid #789ba333; }.roster-sidebar h2 { font-size: 20px; margin: 0 0 9px; }.roster-sidebar .profile-note { font-size: 11px; }
.roster-cards { display: grid; gap: 9px; margin: 24px 0 14px; }.roster-card { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; border: 1px solid #4f6f7b66; background: #132732; color: #e2eeee; padding: 14px; border-radius: 6px; }.roster-card[aria-pressed="true"] { border-color: #8bdbc0; background: #25473f; }.roster-card i { font-size: 25px; font-style: normal; color: #a8e1dc; }.roster-card b { font-size: 13px; display: block; overflow-wrap: anywhere; }.roster-card small { display: block; font-size: 10px; color: #96b4b8; margin-top: 5px; }
.roster-card-wrap { position: relative; min-width: 0; }
.roster-card-wrap > .roster-card { height: 100%; padding-right: 72px; }
.roster-edit { position: absolute; top: 10px; right: 10px; z-index: 1; min-height: 36px; padding: 6px 10px; border: 1px solid #6b9a91; border-radius: 5px; background: #18333b; color: #c9eee1; font-size: 11px; }
.roster-edit:hover, .roster-edit:focus-visible { border-color: #a2e5cc; background: #24483f; }
.roster-new { width: 100%; padding: 12px; border-style: dashed; }.account-details { border-top: 1px solid #789ba333; margin-top: 28px; padding-top: 22px; }.account-details label { font-size: 10px; color: #b2c5ca; }.account-details input { display: block; width: 100%; background: #132832; border: 1px solid #3b545f; color: #dfedeb; padding: 10px; border-radius: 4px; margin-top: 7px; }
.preparation-main { padding: 36px 0 30px 42px; min-width: 0; }.character-page h1 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.1; }.character-page .intro { font-size: 13px; line-height: 1.8; margin: 18px 0 28px; max-width: 650px; }.character-page .classes { gap: 14px; margin: 32px 0 22px; }.character-page .classes span { min-height: 260px; padding: 24px 18px; background: linear-gradient(160deg, #253e4c77, #101d29); transition: border-color .15s; }.character-page .classes input:checked + span { background: linear-gradient(160deg, #30534e, #152c31); box-shadow: inset 0 0 50px #76d2bd0a; }.character-page .classes i { display: block; font-style: normal; font-size: 50px; height: 80px; color: #98d4d9; }.character-page .classes b { font-size: 17px; }.character-page .classes small { font-size: 9px; letter-spacing: .04em; }.character-page .classes p { font-size: 12px; line-height: 1.8; color: #a6bec5; }
#class-next { max-width: 320px; margin-left: auto; }.build-heading { display: flex; justify-content: space-between; gap: 20px; align-items: start; }.build-explainer { color: #9fbabf; font-size: 12px; line-height: 1.8; margin: 0 0 24px; max-width: 680px; }.character-page .character-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.character-editor label:last-child { grid-column: 1 / -1; }.character-page input, .character-page select { padding: 12px; font-size: 12px; }.character-page .character-editor select { height: 44px; }.character-page .traits { margin-top: 20px; gap: 18px; }.character-page .traits label { font-size: 12px; }.character-page .traits small { font-size: 10px; margin: 8px 0; }.character-save { padding-bottom: 18px; border-bottom: 1px solid #789ba333; }.character-save button { padding: 12px 22px; border-color: #7dbda0; color: #beebd4; }#join-button { font-size: 14px; padding: 17px; }.character-page .prototype-note { font-size: 10px; }
.minimap-panel { position: absolute; right: 28px; top: 200px; margin: 0; width: 180px; pointer-events: none; border: 1px solid #64899466; border-radius: 5px; overflow: hidden; background: #0e1e27cf; }.minimap-panel canvas { width: 100%; display: block; }.minimap-panel figcaption { text-align: center; font-size: 7px; padding: 7px 1px; color: #a2bbc3; }.minimap-panel span { color: #91ffc5; }
.upgrade-choices { display: grid; grid-template-columns: repeat(3, 1fr); }.upgrade-choices button:disabled { opacity: .4; cursor: default; }
@media (max-width: 900px) { .manager-layout { grid-template-columns: 210px 1fr; }.preparation-main { padding-left: 24px; }.character-page .classes { gap: 7px; }.character-page .classes span { padding: 14px 10px; }.character-page .classes b { font-size: 13px; }.character-page .classes p { font-size: 11px; }.manager-top nav { gap: 14px; font-size: 8px; }.minimap-panel { width: 135px; right: 18px; top: 205px; } }
@media (pointer: coarse) { .minimap-panel { width: 100px; top: 78px; right: 190px; }.minimap-panel figcaption { display: none; } }
@media (max-width: 650px) { .account-page { grid-template-columns: 1fr; }.access-content { padding: 8px; }.access-art { display: none; }.manager-layout { display: flex; flex-direction: column; }.roster-sidebar { border-right: none; border-bottom: 1px solid #789ba333; padding: 20px 0; }.roster-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }.account-details { margin-top: 15px; }.preparation-main { padding: 28px 0; }.manager-top nav { display: none; }.character-page .classes { grid-template-columns: 1fr; }.character-page .classes span { min-height: 0; }.character-page .classes i { float: left; height: 100px; margin-right: 20px; }.character-page .classes p { font-size: 12px; }.character-page .traits { gap: 9px; } }
@media (max-height: 600px) { .account-page, .character-page { top: 0; left: 0; transform: none; max-height: none; padding-top: 85px; }.character-page h1 { font-size: 30px; }.manager-top { padding-bottom: 12px; }.preparation-main { padding-top: 22px; }.character-page .classes { margin-top: 18px; }.character-page .classes span { min-height: 220px; }.access-art .sigil { width: 180px; font-size: 100px; }.access-art p { margin-top: 30px; } }