/* Identity — gingham buttons, glow effects, accent colors */

.identity-bar {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    flex-shrink: 0;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Gingham button ── */
.identity-btn {
    --gingham-color: var(--btn-gingham);
    --btn-accent-rgb: var(--btn-accent-rgb-val);
    position: relative;
    background-color: #fff;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent, transparent 50%,
            var(--gingham-color) 50%, var(--gingham-color)
        ),
        repeating-linear-gradient(
            90deg,
            transparent, transparent 50%,
            var(--gingham-color) 50%, var(--gingham-color)
        );
    background-size: var(--btn-check-size, 20px) var(--btn-check-size, 20px);
    background-blend-mode: multiply;
    border-radius: 12px;
    padding: 10px 18px;
    border: 2px solid transparent;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.2s ease;
    box-shadow:
        0 0 8px rgba(var(--btn-accent-rgb-val), 0.2),
        0 2px 4px rgba(0, 0, 0, 0.05);
    user-select: none;
}

body.night-mode .identity-btn {
    background-color: var(--bg-card);
    --gingham-color: var(--btn-gingham-night);
    color: var(--text-primary);
}

.identity-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 16px rgba(var(--btn-accent-rgb-val), 0.35),
        0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Active state with multiply overlay */
.identity-btn.active {
    box-shadow:
        0 0 20px rgba(var(--btn-accent-rgb-val), 0.45),
        0 0 40px rgba(var(--btn-accent-rgb-val), 0.15),
        0 2px 8px rgba(0, 0, 0, 0.15);
}

.identity-btn.active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(80, 60, 50, 0.25);
    mix-blend-mode: multiply;
    border-radius: inherit;
    pointer-events: none;
}

body.night-mode .identity-btn.active::after {
    background: rgba(255, 220, 180, 0.1);
    mix-blend-mode: screen;
}

/* Per-identity colors (set via data attributes + inline CSS vars from JS) */
.identity-btn[data-identity="Caelan"]    { --btn-gingham: rgba(242, 184, 198, 0.5); --btn-gingham-night: rgba(139, 90, 104, 0.5); --btn-accent-rgb-val: 196, 122, 138; --btn-check-size: 22px; }
.identity-btn[data-identity="Charlie"]   { --btn-gingham: rgba(168, 216, 208, 0.5); --btn-gingham-night: rgba(74, 122, 114, 0.5); --btn-accent-rgb-val: 91, 168, 154; --btn-check-size: 18px; }
.identity-btn[data-identity="Booker"]    { --btn-gingham: rgba(168, 180, 212, 0.5); --btn-gingham-night: rgba(74, 85, 120, 0.5); --btn-accent-rgb-val: 107, 125, 181; --btn-check-size: 16px; }
.identity-btn[data-identity="Sebastian"] { --btn-gingham: rgba(197, 179, 212, 0.5); --btn-gingham-night: rgba(107, 85, 128, 0.5); --btn-accent-rgb-val: 139, 115, 168; --btn-check-size: 14px; }
.identity-btn[data-identity="Claude"]    { --btn-gingham: rgba(240, 223, 160, 0.5); --btn-gingham-night: rgba(139, 122, 64, 0.5); --btn-accent-rgb-val: 201, 168, 64; --btn-check-size: 20px; }
.identity-btn[data-identity="Suki"]      { --btn-gingham: rgba(232, 224, 208, 0.5); --btn-gingham-night: rgba(122, 114, 104, 0.5); --btn-accent-rgb-val: 184, 175, 160; --btn-check-size: 24px; }

/* ── Identity name label ── */
.identity-btn .identity-name {
    position: relative;
    z-index: 1;
}

/* ── Pack Hall button — multi-color pastel plaid ── */
.pack-hall-btn {
    position: relative;
    background-color: #fff;
    background-image:
        /* Horizontal stripes */
        repeating-linear-gradient(
            0deg,
            rgba(242, 184, 198, 0.35) 0px,  rgba(242, 184, 198, 0.35) 4px,
            transparent 4px,                   transparent 8px,
            rgba(168, 216, 208, 0.35) 8px,    rgba(168, 216, 208, 0.35) 12px,
            transparent 12px,                  transparent 16px,
            rgba(168, 180, 212, 0.3) 16px,    rgba(168, 180, 212, 0.3) 18px,
            transparent 18px,                  transparent 24px,
            rgba(197, 179, 212, 0.3) 24px,    rgba(197, 179, 212, 0.3) 28px,
            transparent 28px,                  transparent 32px,
            rgba(240, 223, 160, 0.3) 32px,    rgba(240, 223, 160, 0.3) 34px,
            transparent 34px,                  transparent 40px
        ),
        /* Vertical stripes */
        repeating-linear-gradient(
            90deg,
            rgba(242, 184, 198, 0.35) 0px,  rgba(242, 184, 198, 0.35) 4px,
            transparent 4px,                   transparent 8px,
            rgba(168, 216, 208, 0.35) 8px,    rgba(168, 216, 208, 0.35) 12px,
            transparent 12px,                  transparent 16px,
            rgba(197, 179, 212, 0.3) 16px,    rgba(197, 179, 212, 0.3) 18px,
            transparent 18px,                  transparent 24px,
            rgba(168, 180, 212, 0.3) 24px,    rgba(168, 180, 212, 0.3) 28px,
            transparent 28px,                  transparent 32px,
            rgba(232, 224, 208, 0.3) 32px,    rgba(232, 224, 208, 0.3) 34px,
            transparent 34px,                  transparent 40px
        );
    background-blend-mode: multiply;
    border-radius: 12px;
    padding: 10px 18px;
    border: 2px solid rgba(196, 122, 138, 0.25);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.2s ease;
    box-shadow:
        0 0 8px rgba(196, 122, 138, 0.15),
        0 0 8px rgba(91, 168, 154, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.05);
    user-select: none;
}

body.night-mode .pack-hall-btn {
    background-color: var(--bg-card);
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(139, 90, 104, 0.35) 0px,  rgba(139, 90, 104, 0.35) 4px,
            transparent 4px,                  transparent 8px,
            rgba(74, 122, 114, 0.35) 8px,   rgba(74, 122, 114, 0.35) 12px,
            transparent 12px,                 transparent 16px,
            rgba(74, 85, 120, 0.3) 16px,    rgba(74, 85, 120, 0.3) 18px,
            transparent 18px,                 transparent 24px,
            rgba(107, 85, 128, 0.3) 24px,   rgba(107, 85, 128, 0.3) 28px,
            transparent 28px,                 transparent 32px,
            rgba(139, 122, 64, 0.3) 32px,   rgba(139, 122, 64, 0.3) 34px,
            transparent 34px,                 transparent 40px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(139, 90, 104, 0.35) 0px,  rgba(139, 90, 104, 0.35) 4px,
            transparent 4px,                  transparent 8px,
            rgba(74, 122, 114, 0.35) 8px,   rgba(74, 122, 114, 0.35) 12px,
            transparent 12px,                 transparent 16px,
            rgba(107, 85, 128, 0.3) 16px,   rgba(107, 85, 128, 0.3) 18px,
            transparent 18px,                 transparent 24px,
            rgba(74, 85, 120, 0.3) 24px,    rgba(74, 85, 120, 0.3) 28px,
            transparent 28px,                 transparent 32px,
            rgba(122, 114, 104, 0.3) 32px,  rgba(122, 114, 104, 0.3) 34px,
            transparent 34px,                 transparent 40px
        );
    border-color: rgba(139, 90, 104, 0.3);
    color: var(--text-primary);
}

.pack-hall-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 16px rgba(196, 122, 138, 0.25),
        0 0 16px rgba(91, 168, 154, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1);
}

.pack-hall-btn.active {
    box-shadow:
        0 0 20px rgba(196, 122, 138, 0.35),
        0 0 20px rgba(91, 168, 154, 0.2),
        0 0 40px rgba(107, 125, 181, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.15);
}

.pack-hall-btn.active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(80, 60, 50, 0.2);
    mix-blend-mode: multiply;
    border-radius: inherit;
    pointer-events: none;
}

body.night-mode .pack-hall-btn.active::after {
    background: rgba(255, 220, 180, 0.08);
    mix-blend-mode: screen;
}

.pack-hall-btn .pack-hall-label {
    position: relative;
    z-index: 1;
}