/*
 * characterselect.css — one-time onboarding screen shown after Register.
 * No HUD/bottom-nav (matches the original scene, which also had neither) —
 * just a header, a 3-card grid, and a footer confirm button. Same tan-panel/
 * flat-nested-box/darkened-accent conventions as the rest of NEW_UI.
 */

.cs-header { position: relative; z-index: 2; text-align: center; padding: 28px 20px 6px; flex-shrink: 0; }
.cs-eyebrow { font-size: 11.5px; letter-spacing: 4px; color: rgba(200,130,40,.5); margin-bottom: 6px; }
.cs-title { font-family: var(--font-title, var(--font-body)); font-size: 24px; font-weight: 800; letter-spacing: 4px; color: #ffe8a0; text-shadow: 0 0 20px rgba(255,232,160,.25); }
.cs-sub { font-size: 12.5px; color: rgba(200,150,90,.45); letter-spacing: 1px; margin-top: 10px; }

.cs-grid {
    position: relative; z-index: 2; flex: 1;
    display: grid; grid-template-columns: repeat(3, minmax(0, 340px)); justify-content: center;
    gap: 20px; padding: 20px 24px; overflow-y: auto; min-height: 0;
}

.cs-card {
    position: relative; cursor: pointer;
    background: rgba(58,36,16,.06); border: 1.5px solid var(--cc, rgba(200,100,26,.4));
    border-radius: 14px; padding: 26px 22px 20px; text-align: center;
    transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
    display: flex; flex-direction: column;
}
.cs-card:hover { transform: translateY(-6px); }
.cs-card.selected { transform: translateY(-8px); border-width: 2px; box-shadow: 0 10px 28px rgba(0,0,0,.25); }

.cs-picked-badge {
    position: absolute; top: 12px; right: 12px; display: none;
    color: #1c1006; font-size: 10.5px; font-weight: 800; letter-spacing: 1px;
    padding: 3px 9px; border-radius: 4px;
}
.cs-card.selected .cs-picked-badge { display: block; }

.cs-avatar {
    width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center; font-size: 44px;
    background: rgba(58,36,16,.08); border: 2px solid;
}
.cs-class-badge { display: inline-block; font-size: 10.5px; letter-spacing: 2px; font-weight: 800; border: 1px solid; border-radius: 20px; padding: 3px 14px; margin-bottom: 10px; }
.cs-name { font-size: 18px; font-weight: 800; color: #2c1a08; letter-spacing: 3px; margin-bottom: 4px; }
.cs-tagline { font-size: 11.5px; color: #8a6a48; line-height: 1.5; padding: 0 6px; }

.cs-divider { height: 1px; background: rgba(58,36,16,.15); margin: 14px 4px; }

.cs-stats { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.cs-stat-row { display: flex; align-items: center; gap: 8px; }
.cs-stat-key { font-size: 10.5px; color: #8a6a48; font-family: var(--font-mono); width: 28px; flex-shrink: 0; }
.cs-stat-track { flex: 1; height: 4px; background: rgba(58,36,16,.12); border-radius: 2px; overflow: hidden; }
.cs-stat-fill { height: 100%; border-radius: 2px; }
.cs-stat-val { font-size: 11.5px; font-weight: 800; font-family: var(--font-mono); width: 22px; text-align: right; flex-shrink: 0; }

.cs-lore { font-size: 11.5px; color: #8a6a48; line-height: 1.6; }

.cs-card.locked { cursor: default; opacity: .55; filter: grayscale(.35); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 320px; background: rgba(58,36,16,.04); border: 1.5px solid rgba(58,36,16,.15); border-radius: 14px; position: relative; overflow: hidden; }
.cs-card-bg-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 120px; opacity: .04; pointer-events: none; }
.cs-lock-icon { font-size: 40px; opacity: .4; margin-bottom: 12px; }
.cs-lock-lbl { font-size: 12px; letter-spacing: 3px; color: #8a6a48; font-weight: 800; margin-bottom: 16px; }
.cs-lock-name { font-size: 12px; letter-spacing: 2px; color: #8a6a48; margin-bottom: 8px; }
.cs-lock-hint { font-size: 11.5px; color: rgba(58,36,16,.4); line-height: 1.5; padding: 0 20px; text-align: center; }

.cs-footer {
    position: relative; z-index: 2; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; gap: 18px;
    padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
}
.cs-footer-hint { font-size: 11.5px; color: rgba(120,70,20,.45); letter-spacing: 1px; font-family: var(--font-mono); }
#cs-start { padding: 13px 32px; font-size: 12px; }

@container (max-width: 900px) {
    .cs-grid { grid-template-columns: minmax(0, 380px); }
    .cs-card.locked { min-height: 200px; }
}