/* =======================================================
   RESET
======================================================= */

* {
    box-sizing: border-box;
}

/* =======================================================
   BASE
======================================================= */

body {

    margin: 0;
    padding: 0;

    font-family: Arial, Helvetica, sans-serif;

    background:
        linear-gradient(
            to bottom,
            #c5d0da,
            #dbe2e8
        );
    color: #333;
}

img {

    display: block;
    max-width: 100%;
}

/* =======================================================
   LAYOUT
======================================================= */

.wrapper {

    max-width: 95%;
    margin: 0 auto;
}

.content {

    padding: 25px;
}

.site-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 6px 25px;

    background: #2f3e46;

    color: #fff;
}

.site-title {

    font-size: 18px;
    font-weight: bold;
}

.user-info a {

    color: #fff;
    text-decoration: none;
}

.user-info a:hover {

    text-decoration: underline;
}

.site-footer {

    text-align: center;

    padding: 20px;

    color: #777;

    font-size: 12px;
}

/* =======================================================
   TYPOGRAPHY
======================================================= */

h1,
h2,
h3 {

    margin-top: 0;
}

h1 {

    font-size: 20px;

    margin-bottom: 15px;

    font-weight: 600;
}

small {

    color: #666;
}

/* =======================================================
   CARDS
======================================================= */

.card,
.player-card {

    background: #fff;

    border-radius: 10px;

    padding: 20px;

    margin-bottom: 20px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 3px 10px rgba(0,0,0,.12);
}

.player-card {

    padding: 15px;
}

.player-card label {

    margin-bottom:3px;
}

.player-card input[type=text],
.player-card select {

    margin-bottom:8px;
}

.current-player {

    border-left: 6px solid #4a90e2;

    background:
        linear-gradient(
            to right,
            #f0f7ff,
            #ffffff
        );
}

.status-card {

    padding: 12px 20px;
}

.status-card h2 {

    margin:0 0 6px 0;

    font-size:20px;
}

.status-card p {

    margin: 0;

    font-size: 15px;
}

/* =======================================================
   FORMS
======================================================= */

fieldset {

    border: 1px solid #ddd;

    border-radius: 10px;

    padding: 20px;

    margin-bottom: 20px;

    background: #fff;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 2px 6px rgba(0,0,0,.08);
}

legend {

    padding: 0 10px;

    font-weight: bold;
}

label {

    display: block;

    font-weight: bold;

    margin-bottom: 5px;
}

input[type=text],
input[type=password],
select,
textarea {

    width: 100%;

    padding: 10px;

    border: 1px solid #ccc;

    border-radius: 5px;

    margin-bottom: 10px;
}

textarea {

    min-height: 100px;
}

input[type=checkbox] {

    width: auto;
}

/* =======================================================
   SETUP FORM WIDTHS
======================================================= */

.setup-form input[type=text],
.setup-form select {

    width: 350px;

    max-width: 100%;
}

.setup-form textarea {

    width: 100%;

    max-width: 100%;
}

.setup-top-row {

    display:flex;

    gap:20px;

    align-items:flex-start;
}

.setup-top-row .field:first-child {

    flex:0 0 420px;
}

.setup-top-row .field.duration {

    flex:0 0 320px;
}


legend {
    display:none;
}

.section-title {

    margin:0 0 15px 0;

    font-size:20px;

    font-weight:600;

    color:#2f3e46;
}

/* =======================================================
   BUTTONS
======================================================= */

.btn {

    display: inline-block;

    padding: 12px 22px;

    border-radius: 6px;

    text-decoration: none;

    font-weight: bold;

    cursor: pointer;

    border: none;

    transition: all .15s ease;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 2px 5px rgba(0,0,0,.20);
}

.btn:hover {

    transform: translateY(-1px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 4px 8px rgba(0,0,0,.20);
}

.btn:active {

    transform: translateY(1px);

    box-shadow:
        inset 0 2px 4px rgba(0,0,0,.20);
}

.btn-primary {

    background: #28a745;
    color: #fff;
}

.btn-primary:hover {

    background: #218838;
}

.btn-secondary {

    background: #6c757d;
    color: #fff;
}

.btn-secondary:hover {

    background: #5a6268;
}

.btn-success {

    background:
        linear-gradient(
            135deg,
            #6c3dd9,
            #9b67ff
        );

    color:#fff;
}

.btn-success:hover {

    background:
        linear-gradient(
            135deg,
            #7b4ae6,
            #aa79ff
        );
}

.btn-danger {

    background:
        linear-gradient(
            135deg,
            #ff4f9c,
            #ff7dc0
        );

    color:#fff;
}

.btn-danger:hover {

    background:
        linear-gradient(
            135deg,
            #ff62aa,
            #ff8cc9
        );
}

/* =======================================================
   TABLES
======================================================= */

table {

    width: 100%;
    border-collapse: collapse;
}

th,
td {

    border: 1px solid #ccc;

    padding: 8px;

    vertical-align: top;
}

th {

    background: #eee;
}

.results-card .table th {

    background:
        linear-gradient(
            135deg,
            #5b2495,
            #ff4f9c
        ) !important;

    color:#fff !important;

    font-weight:700;
}

/* =======================================================
   DASHBOARD / ADMIN MENUS
======================================================= */

.menu-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px,1fr)
        );

    gap: 20px;

    margin-top: 20px;
}

.menu-item {

    display: block;

    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #f7f7f7
        );

    border-radius: 10px;

    border: 1px solid #e5e5e5;

    padding: 25px;

    text-align: center;

    text-decoration: none;

    color: #333;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 3px 8px rgba(0,0,0,.12);

    transition: all .2s ease;
}

.menu-item:hover {

    transform: translateY(-3px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 6px 12px rgba(0,0,0,.18);
}

.menu-item h3 {

    font-size: 36px;

    margin-bottom: 10px;
}

/* =======================================================
   GAME SCREEN
======================================================= */

.game-header {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 15px;
}

.scoreboard {

    display:flex;

    flex-direction:column;

    gap:20px;
}

.score-box {

    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #f7f7f7
        );

    border: 1px solid #e5e5e5;

    border-radius: 10px;

    padding: 10px;

    width: 100%;

    box-sizing: border-box;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 3px 8px rgba(0,0,0,.12);
}

.score-box h3 {

    text-align: center;

    font-size: 22px;

    margin-bottom: 2px;

    text-transform: uppercase;
}

.score-box ul {
    margin:5px 0;
}

.score-box li {
    margin-bottom:2px;
}

.score-box p strong {

    font-size: 13px;

    color: #666;

    letter-spacing: .5px;
}

.score-box p {

    margin-bottom: 5px;
}

.clothing-list,
.score-box ul {

    font-size: 13px;
}

.token-display {

    font-weight: bold;

    color: #4a90e2;
}

.token-display-row {

    display:flex;

    justify-content:center;

    align-items:baseline;

    gap:10px;

    margin-bottom:10px;
}

.token-label {

    font-size:12px;

    font-weight:bold;

    letter-spacing:1px;

    color:#777;

    text-transform:uppercase;
}

.token-row {

    display:flex;

    gap:4px;

    align-items:center;
}

.token-dot {

    width:12px;

    height:12px;

    border-radius:50%;

    border:2px solid #4a90e2;

    background:transparent !important;

    display:inline-block;
}

.token-dot.filled {

    background:#4a90e2 !important;
}

.player-score {

    font-size: 40px;

    font-weight: bold;

    text-align: center;

    color: #4a90e2;

    line-height: 1;
}

.player-score-label {

    text-align: center;

    font-size: 12px;

    letter-spacing: 2px;

    color: #777;

    margin-bottom: 8px;
}



/* =======================================================
   VIDEO
======================================================= */

.video-container {

    margin-top: 20px;
}

.video-container video {

    width: 100%;

    max-width: 800px;

    border-radius: 8px;
}

/* =======================================================
   CLOTHING
======================================================= */

.clothing-list {

    columns: 2;
}

.clothing-list label {

    display: block;

    font-weight: normal;

    margin-bottom: 5px;

    padding: 4px 8px;

    border-radius: 4px;

    transition: .2s;
}

.clothing-list label:hover {

    background: #eef5ff;
}

.removed-clothing {

    color: #999;

    text-decoration: line-through;

    font-size: 12px;
}

/* =======================================================
   MESSAGES
======================================================= */

.error {

    background: #ffe5e5;

    color: #990000;

    padding: 12px;

    border-radius: 5px;

    margin-bottom: 15px;
}

.success {

    background: #e6ffe6;

    color: #006600;

    padding: 12px;

    border-radius: 5px;

    margin-bottom: 15px;
}

/* =======================================================
   ADMIN UTILITIES
======================================================= */

.filter-box {

    margin-bottom: 20px;
}

.admin-row {

    background: #e8ffe8;
}

.inactive-row {

    background: #ffe8e8;
}

/* =======================================================
   SETUP PAGE
======================================================= */

.setup-players {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;
}

.form-hint {

    color: #777;

    font-size: 12px;
}

/* =======================================================
   PROGRESS SUMMARY
======================================================= */

.progress-summary {

    margin-top: 15px;

    padding: 15px;

    background: #f8fbff;

    border: 1px solid #d6e6ff;

    border-radius: 8px;
}

.progress-summary > strong {

    font-size:18px;

    color:#2f3e46;
}

.progress-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

    margin-top: 10px;
}

.progress-box {

    text-align: center;

    padding: 8px 8px;

    border-radius: 8px;

    border: 1px solid #ddd;

    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #f5f5f5
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 2px 5px rgba(0,0,0,.12);
}

.progress-box strong {

    display: block;

    font-size: 20px;

    margin-top: 6px;
}

.progress-box.level-1 {

    background:
        linear-gradient(
            to bottom,
            #f4fff7,
            #ddf7e5
        );

    border-color: #9ed8b0;
}

.progress-box.level-2 {

    background:
        linear-gradient(
            to bottom,
            #fffdf4,
            #fff0c2
        );

    border-color: #e5c75e;
}

.progress-box.level-3 {

    background:
        linear-gradient(
            to bottom,
            #fff7f7,
            #ffd6d6
        );

    border-color: #e59d9d;
}

/* ======================================
   Video Challenge Target Duration
====================================== */

.target-duration {

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

    border:1px solid
        rgba(
            255,
            255,
            255,
            .12
        );
}

.target-duration-box {

    background:
        rgba(
            255,
            255,
            255,
            .12
        ) !important;

    border:1px solid
        rgba(
            255,
            255,
            255,
            .20
        ) !important;
}

.target-duration-box strong {

    display:block;

    color:#ffffff !important;

    font-size:32px;

    font-weight:700;

    opacity:1 !important;

    text-shadow:
        0 2px 4px rgba(
            0,
            0,
            0,
            .40
        );
}

/* =======================================================
   MOBILE
======================================================= */

@media (max-width: 768px) {

    .site-header {

        flex-direction: column;

        gap: 10px;
    }

    .scoreboard {

        flex-direction: column;
    }

    .clothing-list {

        columns: 1;
    }

    .setup-players {

        grid-template-columns: 1fr;
    }

    .progress-grid {

        grid-template-columns: 1fr;
    }

    .content {

        padding: 12px 25px 25px 25px;
    }

    .menu-item {

        padding: 18px;
    }
}

/* =======================================================
   Preview Video Card
======================================================= */

.preview-card {

    max-width: 350px;

    margin: 20px auto;

    text-align: center;

    padding: 20px;

    background: #fff;

    border-radius: 12px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.15);
}


.preview-card h3 {

    margin-top: 15px;

    margin-bottom: 10px;
}

/* ======================================
   GAME LAYOUT
====================================== */

.game-layout {

    display:flex;

    gap:15px;

    align-items:flex-start;
}

.player-column {

    width:240px;

    flex-shrink:0;
}

.play-column {

    flex:1;

    min-width:0;
}

.turn-card {

    padding:12px 18px;
}

.turn-row {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;
}

.turn-player {

    font-size:22px;

    font-weight:bold;
}

.turn-actions {

    display:flex;

    gap:10px;
}

/* ======================================
   Challenge
====================================== */

.challenge-summary-row {

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:10px;
}

.challenge-timer-box {

    width:120px;

    flex-shrink:0;

    background:
        rgba(
            255,
            255,
            255,
            .12
        );

    border:1px solid
        rgba(
            255,
            255,
            255,
            .20
        );

    border-radius:10px;

    padding:12px;

    text-align:center;

    box-shadow:
        inset 0 1px 0 rgba(
            255,
            255,
            255,
            .10
        );
}

.challenge-details {

    flex:1;
}

.challenge-details h4 {

    margin:0 0 6px 0;

    font-size:20px;

    font-weight:bold;
}

.challenge-details p {

    margin:0;

    color:#555;

    line-height:1.4;
}

.level-up-card {

    text-align:center;

    max-width:700px;

    margin:40px auto;
}

.challenge-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    margin-bottom:10px;

    flex-wrap:wrap;
}

.challenge-points {

    display:flex;

    gap:10px;

    align-items:center;
}

.challenge-success,
.challenge-fail {

    padding:6px 10px;

    border-radius:20px;

    font-size:14px;

    font-weight:700;
}

.challenge-success {

    background:
        rgba(
            155,
            103,
            255,
            .25
        );

    border:1px solid
        rgba(
            155,
            103,
            255,
            .50
        );

    color:#ffffff;
}

.challenge-fail {

    background:
        rgba(
            255,
            79,
            156,
            .25
        );

    border:1px solid
        rgba(
            255,
            79,
            156,
            .50
        );

    color:#ffffff;
}

/* ======================================
   Setup "Journey"
====================================== */

.journey-title {

    font-size: 1.25rem;

    font-weight: 700;

    margin: 6px 0 4px 0;

    line-height:1.2;
}

.journey-time {

    font-size: .9rem;

    color:#666;

    font-weight:500;
}



.progress-box .level-label {

    font-size:.95rem;

    color:#555;
}

.journey-title {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;
}

.header-link-btn {

    background:none;
    border:none;
    color:#fff;
    cursor:pointer;
    padding:0;
    font:inherit;
}

.header-link-btn:hover {

    text-decoration:underline;
}

/* =======================================================
   TOD BRAND THEME
======================================================= */

/* Page */

body {

    background:
        linear-gradient(
            180deg,
            #171717,
            #0f0f0f
        );

    color: #f5f5f5;
}

/* Header */

.site-header {

    background:
        linear-gradient(
            135deg,
            #1a1a1a,
            #2a083f
        );
}

/* Status Card */

.status-card {

    background:
        linear-gradient(
            135deg,
            #2a083f,
            #5b2495
        );

    color:#fff;
}

/* Main Challenge Card */

#currentChallenge {

    background:
        linear-gradient(
            135deg,
            #2a083f,
            #5b2495
        );

    color:#fff;

    border:1px solid rgba(
        255,
        255,
        255,
        .10
    );
}

#currentChallenge .challenge-details p,
#currentChallenge .progress-summary > strong {

    color:#f0e6ff;
}

#currentChallenge .progress-summary {

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

    border-color:
        rgba(
            255,
            255,
            255,
            .12
        );
}

/* Male Player */

.score-box.male-player {

    background:
        linear-gradient(
            135deg,
            #101010,
            #2b1540
        );

    color:#fff;

    border:1px solid #4a2b6a;
}

/* Female Player */

.score-box.female-player {

    background:
        linear-gradient(
            135deg,
            #ff4f9c,
            #b03d8d
        );

    color:#fff;

    border:1px solid #ff8bc2;
}

/* Shared Player Text */

.score-box.male-player h3,
.score-box.female-player h3,
.score-box.male-player p,
.score-box.female-player p,
.score-box.male-player li,
.score-box.female-player li,
.score-box.male-player strong,
.score-box.female-player strong,
.score-box.male-player .player-score-label,
.score-box.female-player .player-score-label,
.score-box.male-player .token-label,
.score-box.female-player .token-label {

    color:#fff;
}

/* Score */

.score-box .player-score {

    color:#fff;
}

/* Truth Tokens */

.score-box .token-dot {

    border-color:#ffffff;
}

.score-box .token-dot.filled {

    background:#ffffff !important;
}

/* Truth Button */

.btn {

    border-radius:12px;
}

.btn:not(.btn-danger):not(.btn-success):not(.btn-secondary) {

    background:
        linear-gradient(
            135deg,
            #5b2495,
            #8b4fe3
        );

    color:#fff;
}

/* Dare Button */

.btn-danger {

    background:
        linear-gradient(
            135deg,
            #ff4f9c,
            #ff78ba
        );

    color:#fff;
}

/* Journey Cards */

.progress-box.level-1 {

    background:
        linear-gradient(
            135deg,
            #3a145c,
            #5b2495
        );

    color:#fff;

    border-color:#8b4fe3;
}

.progress-box.level-2 {

    background:
        linear-gradient(
            135deg,
            #7a1f6d,
            #c03d97
        );

    color:#fff;

    border-color:#e05fb2;
}

.progress-box.level-3 {

    background:
        linear-gradient(
            135deg,
            #b03d8d,
            #ff4f9c
        );

    color:#fff;

    border-color:#ff8bc2;
}

.progress-box .level-label,
.journey-time {

    color:
        rgba(
            255,
            255,
            255,
            .85
        );
}

/* Turn Card */

.turn-card {

    background:
        linear-gradient(
            135deg,
            #1f1f1f,
            #2a083f
        );
}

/* Preview Cards */

.preview-card {

    background:
        linear-gradient(
            135deg,
            #2a083f,
            #5b2495
        );

    color:#fff;
}

/* =======================================================
   TOD SETUP PAGE
======================================================= */

.setup-form fieldset {

    background:
        linear-gradient(
            135deg,
            #2a083f,
            #4b1f7c
        );

    border:1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    color:#fff;
}

.setup-form h1,
.setup-form h2,
.setup-form h3,
.setup-form label,
.setup-form .section-title {

    color:#fff;
}

.setup-form .form-hint {

    color:
        rgba(
            255,
            255,
            255,
            .75
        );
}

.setup-form input[type=text],
.setup-form select,
.setup-form textarea {

    background:#fff;

    color:#222;

    border:1px solid #ccc;
}

.setup-form .clothing-list label {

    color:#fff;
}

.setup-form .clothing-list label:hover {

    background:
        rgba(
            255,
            255,
            255,
            .08
        );
}




/* ======================================
   Tablet Support
====================================== */

@media (max-width: 900px) {

    .game-layout {

        flex-direction:column;
    }

    .player-column {

        width:100%;
    }
	
    .turn-row {

        flex-direction:column;

        align-items:flex-start;
    }

    .turn-actions {

        width:100%;
    }

    .setup-top-row {

        flex-direction:column;
    }

    .setup-top-row .field.duration {

        flex:auto;

        width:100%;
    }

}



/* =======================================================
   TOD POLISH PASS
======================================================= */

/* Setup screen player panels */

.setup-players fieldset:first-child {
    background: linear-gradient(135deg,#101010,#2b1540);
}

.setup-players fieldset:last-child {
    background: linear-gradient(135deg,#ff4f9c,#b03d8d);
}

/* Journey container */

.progress-summary {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
}

.progress-summary > strong {
    color:#fff;
}

/* Page title */

.content > h1 {
    color:#fff;
}

/* ======================================
   Challenge Timer
====================================== */

.challenge-timer-box {

    background:
        rgba(
            255,
            255,
            255,
            .12
        );

    border:1px solid
        rgba(
            255,
            255,
            255,
            .20
        );

    border-radius:10px;

    box-shadow:
        inset 0 1px 0 rgba(
            255,
            255,
            255,
            .10
        );
}

.challenge-timer-box strong {

    display:block;

    margin:0;

    font-size:32px;

    font-weight:700;

    color:#ffffff;

    text-shadow:
        0 2px 4px rgba(
            0,
            0,
            0,
            .40
        );
}

/* ======================================
   Level Up Screen
====================================== */

.level-up-card {

    background:
        linear-gradient(
            135deg,
            #2a083f,
            #5b2495
        );

    color:#fff;

    border:1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    border-radius:12px;
}

.level-up-card h1,
.level-up-card h2,
.level-up-card h3 {

    color:#fff;
}

.level-up-card p {

    color:
        rgba(
            255,
            255,
            255,
            .90
        );
}

/* ======================================
   Video Challenge Results
====================================== */

.video-results-row {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid
        rgba(
            255,
            255,
            255,
            .08
        );
}

.video-results-row:last-child {

    border-bottom:none;
}

.video-results-options {

    display:flex;

    gap:25px;
}

.video-results-options label {

    color:#fff;

    cursor:pointer;

    font-weight:600;
}

.video-player-name {

    font-size:16px;

    font-weight:700;
}

.male-player-label {

    color:#d8c4ff;
}

.female-player-label {

    color:#ffb6d8;
}

/* ======================================
   Level Up Screen
====================================== */

.level-up-card {

    text-align:center;

    color:#fff;

    padding:40px 30px;
}

.level-up-card.level-2 {

    background:
        linear-gradient(
            135deg,
            #5b2495,
            #b03d8d
        );
}

.level-up-card.level-3 {

    background:
        linear-gradient(
            135deg,
            #b03d8d,
            #ff4f9c
        );
}

.level-up-card h1 {

    color:#fff;

    font-size:48px;

    letter-spacing:3px;

    margin-bottom:20px;
}

.level-up-card p {

    color:
        rgba(
            255,
            255,
            255,
            .95
        );

    font-size:20px;

    line-height:1.6;
}


/* ======================================
   Winner Screen
====================================== */

.winner-card {

    text-align:center;

    padding: 5px 10px;

    background:
        linear-gradient(
            135deg,
            #5b2495,
            #ff4f9c
        );

    color:#fff;
}

.winner-card h1 {

    color:#fff;

    margin-bottom:2px;
}

.winner-card h2 {

    color:#fff;

    font-size:34px;

    margin:2px 0;
}

.winner-subtitle {

    color:
        rgba(
            255,
            255,
            255,
            .90
        );

    font-size:20px;
}

.prize-card {

    background:
        rgba(
            255,
            255,
            255,
            .08
        );
}

.prize-card h2 {

    color:#fff;

    margin-bottom: 12px;
}

.prize-card p {

    font-size:28px;

    margin: 0;

    font-weight:700;

    color:#fff;

    line-height:1.3;
}

.winner-card h2 {

    font-size:58px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:2px;
}

.winner-row {

    background:
        linear-gradient(
            90deg,
            rgba(255,79,156,.15),
            rgba(91,36,149,.15)
        ) !important;

    font-weight:700;
}

/* ======================================
   Login Screen
====================================== */

.login-card {

    max-width:500px;

    margin:40px auto;

    background:
        linear-gradient(
            135deg,
            #2a083f,
            #5b2495
        );

    color:#fff;
}

.login-card h1 {

    color:#fff;

    text-align:center;

    margin-bottom:10px;
}

.login-subtitle {

    text-align:center;

    color:
        rgba(
            255,
            255,
            255,
            .85
        );

    margin-bottom:25px;
}

.login-card label {

    color:#fff;

    font-weight:600;
}

.login-card input[type="text"],
.login-card input[type="password"] {

    background:
        rgba(
            255,
            255,
            255,
            .12
        );

    border:1px solid
        rgba(
            255,
            255,
            255,
            .20
        );

    color:#fff;
}

.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus {

    border-color:#ff4f9c;
}

.login-card .btn {

    width:100%;
}

/* ======================================
   Dashboard Hero
====================================== */

.dashboard-hero {

    text-align:center;

    background:
        linear-gradient(
            135deg,
            #2a083f,
            #5b2495,
            #b03d8d
        );

    color:#fff;

    margin-bottom:25px;
}

.dashboard-hero h1 {

    color:#fff;

    font-size:52px;

    margin-bottom:10px;

    letter-spacing:2px;
}

.dashboard-tagline {

    font-size:22px;

    color:
        rgba(
            255,
            255,
            255,
            .85
        );

    margin-bottom:20px;
}

.menu-item {

    background:
        linear-gradient(
            135deg,
            rgba(91,36,149,.85),
            rgba(176,61,141,.85)
        );

    border:1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    color:#fff;

    transition:
        transform .2s,
        box-shadow .2s;
}

.menu-item:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 8px 20px
        rgba(
            0,
            0,
            0,
            .30
        );
}

.menu-item strong {

    color:#fff;
}

.menu-item h3 {

    font-size:42px;

    margin-bottom:10px;
}

.dashboard-message {

    text-align:center;

    color:#d8c4ff;

    font-size:20px;

    margin-bottom:25px;
}

.results-card {

    background:
        linear-gradient(
            135deg,
            #1a1a1a,
            #2a083f
        );

    color:#fff;
}

.results-card h2 {

    color:#fff;
}

/* ==================================================
   CLOTHING REMOVAL
================================================== */

.clothing-removal-card {

    text-align:center;

    background:
        linear-gradient(
            135deg,
            #2a083f,
            #5b2495
        );

    color:#fff;

    border:1px solid
        rgba(
            255,
            255,
            255,
            .12
        );
}

.clothing-removal-card h1,
.clothing-removal-card p,
.clothing-removal-card label,
.clothing-removal-card span {

    color:#fff;
}

.clothing-removal-card select {

    background:#fff;

    color:#222;
}

.challenge-banner {

    background:#2b2b2b;
    color:#f5c16c;

    padding:12px;

    border-radius:12px;

    font-weight:bold;

    font-size:1.1rem;

    margin-bottom:15px;
}

.clothing-removal-text {

    color:#d8d8d8;

    margin-bottom:20px;
}

.clothing-option {

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 15px;

    margin-bottom:10px;

    border:1px solid rgba(255,255,255,.12);

    border-radius:12px;

    background:rgba(255,255,255,.04);

    cursor:pointer;

    transition:.2s;
}

.clothing-option:hover {

    background:rgba(255,255,255,.08);
}

.clothing-option input {

    transform:scale(1.3);
}

.btn-remove-clothing {

    margin-top:20px;

    width:100%;
}

.target-player-banner {

    margin:12px 0 18px 0;

    padding:10px 14px;

    border-radius:12px;

    font-weight:600;

    text-align:center;
}

.props-grid {

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px,1fr)
        );

    gap:10px;

    margin-top:15px;
}

.prop-option {

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 12px;

    border-radius:10px;

    background:
        rgba(
            255,
            255,
            255,
            0.04
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    cursor:pointer;

    transition:.2s;
}

.prop-option:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );
}

.prop-option input {

    transform:scale(1.15);
}

.clothing-grid {

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(140px,1fr)
        );

    gap:10px;

    margin-top:15px;
}

.clothing-option {

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 12px;

    border-radius:10px;

    background:
        rgba(
            255,
            255,
            255,
            0.04
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    cursor:pointer;

    transition:.2s;
}

.clothing-option:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );
}

.clothing-option input {

    transform:scale(1.15);
}