/* ============================================================================
   Shared broadcast skin for the entry / lobby / utility views (Phase 5.5).
   Home, Join, CreateSession, WaitingRoom, DrafterWaitingRoom, Rejoin,
   RestoreSession, Settings, PlayerSelection.

   Loaded AFTER each view's @section Styles so this broadcast skin wins the
   colour/typography battle by load order, while per-view inline blocks keep
   their own layout geometry. Every selector here targets a class that is
   entry-view-only (verified NOT present in DraftRoom.cshtml / Display.cshtml),
   so it never overrides the dedicated draft-room.css / host-display.css.
   ============================================================================ */

/* ---- Hero wrapper + centered card (Join, CreateSession, Rejoin, Restore) ---- */
.draft-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    background: var(--hd-grad-body);
}
.draft-card {
    background: var(--hd-card);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 0;
    padding: 40px 36px;
    box-shadow: var(--hd-elevation-modal);
}
.draft-card h1, .draft-card h2, .draft-hero h1, .draft-hero h2 {
    font-family: var(--hd-font);
    font-weight: 900;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--hd-text-max);
}
.draft-card h6, .draft-card .text-muted, .draft-hero .text-muted {
    color: var(--hd-text-muted) !important;
}
.draft-card .form-label,
.draft-card .form-text {
    font-family: var(--hd-mono);
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--hd-text-muted) !important;
}

/* ---- Generic dark panel classes carried over from the old theme ---- */
.pl-card {
    background: var(--hd-card);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 0;
    color: var(--hd-text);
}
.pl-card-header, .pl-header {
    background: var(--hd-surface);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-family: var(--hd-mono);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--hd-text-2);
}
/* Card headers need their own gutter — content was hugging the left edge. */
.pl-card-header { padding: 13px 22px; }

/* The lobby / settings page title inherited the muted header grey and read as a dead
   faded label. Lift it to full white with a green trophy so it actually announces the draft. */
.pl-header h1, .pl-header h2 { color: var(--hd-text-max); }
.pl-header h1 .fa-trophy { color: var(--hd-green); }

/* ---- CTAs ---- */
.btn-draft-primary, .btn-pl-success {
    background: var(--hd-green);
    color: #08281a;
    border: none;
    border-radius: 0;
    font-family: var(--hd-font);
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: var(--hd-glow-cta);
}
.btn-draft-primary:hover, .btn-pl-success:hover { filter: brightness(1.08); color: #08281a; }
.btn-draft-secondary {
    background: transparent;
    color: var(--hd-text-3);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 0;
    font-family: var(--hd-font);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.btn-draft-secondary:hover { border-color: var(--hd-green); color: var(--hd-green); }

/* ---- Session code hero (WaitingRoom, Rejoin) ---- */
.session-code-display {
    font-family: var(--hd-mono);
    font-weight: 700;
    letter-spacing: .25em;
    color: var(--hd-green);
    background: rgba(0, 255, 135, .06);
    border: 1px solid rgba(0, 255, 135, .35);
    border-radius: 0;
    padding: 14px 22px;
    display: inline-block;
    text-shadow: 0 0 20px rgba(0, 255, 135, .35);
}

/* ---- Participant / lobby cards ---- */
.participant-card {
    background: var(--hd-card);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 0;
    color: var(--hd-text);
    text-align: center;
    padding: 14px 12px;
    height: 100%;
}

/* ---- Stat tiles ---- */
.stat-item {
    background: var(--hd-surface);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 0;
    padding: 14px;
    text-align: center;
}
.stat-number {
    font-family: var(--hd-mono);
    font-weight: 700;
    font-size: 28px;
    color: var(--hd-text-max);
    line-height: 1;
}
.stat-label {
    font-family: var(--hd-mono);
    font-weight: 600;
    font-size: 8px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--hd-text-muted);
}

/* ---- Colour utility classes from the old PL theme → tokens ---- */
.pl-green, .text-pl-green { color: var(--hd-green) !important; }
.pl-purple { color: var(--hd-purple) !important; }
.pl-primary { color: var(--hd-cyan) !important; }
.pl-secondary { color: var(--hd-text-muted) !important; }
.pl-success { color: var(--hd-green) !important; }

/* ---- Form controls: green focus instead of the old #667eea ---- */
.draft-card .form-control:focus,
.draft-card .form-select:focus,
.pl-card .form-control:focus {
    border-color: var(--hd-green);
    box-shadow: 0 0 0 .2rem rgba(0, 255, 135, .2);
}