/* /profile, the sign-up page (GDD 3d, chessingo s5.1). */
.prof-page { background: #06120b; }
.prof-backdrop {
    position: fixed; inset: 0; z-index: 0;
    background:
        linear-gradient(180deg, rgba(4, 14, 8, 0.55) 0%, rgba(4, 14, 8, 0.82) 100%),
        url('https://prodmedia.tyga.host/public/tyga.cloud/landing/connectmore.online/connectmoreonline_splash.jpg') center / cover no-repeat;
}
.prof-page header.play-head { position: relative; z-index: 2; }
header.play-head .logo-link { all: unset; cursor: pointer; }
.prof {
    position: relative; z-index: 1;
    width: min(1100px, calc(100% - 2rem));
    margin: clamp(1rem, 4vw, 3rem) auto 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 1fr);
    gap: clamp(1rem, 4vw, 3rem);
    align-items: center;
}
/* The builder open on the page, not in a card (vipsallowed /my/avatar pattern). */
.prof-hero { --pp-brand: #1f6b34; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.prof-kicker {
    font-family: 'Titan One', 'Arial Black', sans-serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--corn);
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 210, 63, 0.35);
}
.prof-builder { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.prof-builder .tz-face { width: min(260px, 62vw); aspect-ratio: 1; background: var(--pp-tile); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55); }
.prof-builder .tz-face svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }
.prof-builder .tz-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; width: min(100%, 520px); }
.prof-builder .tz-strip { display: grid; grid-template-columns: repeat(auto-fill, 48px); grid-auto-rows: 48px; gap: 14px; justify-content: center;
    width: min(100%, 520px); max-height: 190px; overflow-y: auto; padding: 4px; }
.prof-builder > :not(.tz-face):not(.tz-tabs):not(.tz-strip) { display: flex; flex-wrap: wrap; justify-content: center; }
.prof-loading { color: var(--text-dim); }
.prof-row { display: flex; gap: 0.7rem; justify-content: center; }
.prof-row button.btn { width: auto; margin: 0; padding: 0.25rem 1.5rem 0.4rem; }
.prof-msg { min-height: 1.2em; color: var(--lime); font-weight: 700; }
.prof-hook { color: var(--text-dim); text-align: center; }
/* Three doors, in this order. */
.prof-doors { display: flex; flex-direction: column; gap: 0.9rem; align-items: stretch; }
.prof-door {
    display: block; text-align: center; text-decoration: none;
    padding: 1rem 1.2rem; border-radius: 14px;
    font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em;
}
.prof-door.primary {
    color: #0d3300;
    background: linear-gradient(180deg, #d6ffa8 0%, #7cf05a 42%, #22b85a 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -3px 0 rgba(0, 90, 30, 0.35), 0 0 22px rgba(124, 240, 90, 0.45), 0 6px 16px rgba(0, 0, 0, 0.45);
}
.prof-door.ghost { color: var(--lime); border: 2px solid var(--lime); background: rgba(0, 0, 0, 0.35); }
.prof-door:hover { filter: brightness(1.07); }
.prof-guest { text-align: center; color: #fff; font-weight: 600; }
@media (max-width: 860px) {
    .prof { grid-template-columns: 1fr; }
    .prof-doors { width: min(100%, 420px); margin: 0 auto; }
}
/* Builder switched off: only the doors, centred. */
html[data-off~="avatar-builder"] .prof { grid-template-columns: 1fr; justify-items: center; }