.hidden { display: none !important; }
.flex-col { display: flex; flex-direction: column; }
.gap-5 { gap: 5px; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.gap-20 { gap: 20px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.font-bold { font-weight: bold; }
.w-100 { width: 100%; }

h1 {
    font-size: 20px;
    color: var(--color-highlight);
    text-shadow: 2px 2px 0 #000;
    margin-bottom: 10px;
}

h2, h3 { margin-top: 0; }

.title-highlight { color: var(--color-highlight); }
.title-blue { color: var(--color-blue); }
.title-green { color: var(--color-green); }
.title-danger { color: var(--color-red); }

#user-status {
    margin-bottom: 20px;
    color: var(--color-highlight);
}

/* Buttons */
button {
    font-family: var(--font-pixel);
    padding: 10px;
    font-size: 10px;
    border: 2px solid #fff;
    cursor: pointer;
    background: #333;
    color: #fff;
    box-shadow: 2px 2px 0 #000;
    transition: transform 0.1s, box-shadow 0.1s;
    text-transform: uppercase;
}

button:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 #000;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-primary { background: var(--color-blue); border-color: #5dade2; }
.btn-secondary { background: #555; border-color: #777; }
.btn-danger-action { background: var(--color-red); border-color: #f1948a; }
.btn-danger { background: #d9534f; border-color: #f5b7b1; }
.btn-finish { background: var(--color-green); border-color: #58d68d; width: 100%; padding: 15px;}
.btn-full { width: 100%; }
.btn-action { background: #444; padding: 12px; margin: 5px; border-color: #666; }
.btn-fame { background: var(--color-highlight); color: #000; padding: 12px; margin: 5px; border-color: #fff; }
.btn-spin { margin-top: 20px; padding: 15px 30px; font-size: 12px; background: var(--color-red); border-color: #f1948a; }

/* Wheel */
#fortune-wheel-canvas {
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--color-highlight), 0 0 15px rgba(0,0,0,0.8);
}
#wheel-pointer {
    position: absolute;
    top: -15px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 25px solid var(--color-highlight);
    z-index: 10;
    filter: drop-shadow(0 2px 2px #000);
}

/* Checklists & Stats */
.season-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; }
.season-checklist li {
    padding: 10px;
    background: #333;
    border: 2px solid #555;
    transition: opacity 0.3s;
}
.step-result { color: var(--color-highlight); float: right; }
.opacity-half { opacity: 0.5; }

.stats-container {
    border: 2px solid #fff;
    padding: 15px;
    margin-bottom: 20px;
    background: var(--bg-color-panel);
    text-align: left;
    box-shadow: var(--shadow-main);
}
.stats-container p { margin: 5px 0; }

/* Save Slots */
.save-slot {
    background: var(--bg-color-panel);
    border: 2px solid var(--color-border);
    padding: 15px;
    box-shadow: 2px 2px 0 #000;
}
.slot-title { color: #ccc; border-bottom: 2px dashed #444; padding-bottom: 5px; margin-bottom: 10px; }

/* Modals */
.modal {
    display: flex;
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 1000;
}

.modal.hidden {
    display: none !important;
}

.modal-content {
    background: var(--bg-color-container);
    width: 90%; max-width: 400px;
    margin: 5vh auto;
    padding: 20px;
    border: var(--border-main);
    box-shadow: var(--shadow-main);
    text-align: center;
    max-height: 85vh;
    overflow-y: auto;
}

.modal-large { max-width: 600px; }
.modal-xl { max-width: 800px; }
.modal-danger { border-color: var(--color-red); background: #2c0e0e; }
.modal-desc { margin-bottom: 20px; }

.modal-btn-row { display: flex; gap: 10px; justify-content: center; }

/* Forms */
.form-group label { display: block; margin-bottom: 5px; }
.form-group input, .form-group select, .form-control {
    font-family: var(--font-pixel);
    width: 100%; padding: 8px;
    background: #222; color: #fff;
    border: 2px solid #555;
    box-sizing: border-box;
    font-size: 10px;
}

/* Tables */
.retro-table { width: 100%; border-collapse: collapse; text-align: left; }
.retro-table th, .retro-table td { border: 2px solid #444; padding: 8px; }
.retro-table th { background: #333; color: var(--color-highlight); }
.small-text { font-size: 8px; }

/* Components */
.playstyles-container { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.new-playstyle-box { padding: 10px; border-radius: 0; border: 2px solid #fff; }

.btn-training-choice, .btn-shop-item {
    background: #333;
    border: 2px solid #555;
    padding: 15px;
    width: 100%;
    text-align: center;
}
.btn-training-choice:hover, .btn-shop-item:hover { border-color: #fff; }

.text-positive { color: var(--color-green); }
.text-negative { color: var(--color-red); }
.stat-highlight { color: var(--color-highlight); font-weight: bold; }
.stat-blue { color: var(--color-blue); font-weight: bold; }

.season-summary-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media(min-width: 600px) {
    .season-summary-grid { grid-template-columns: 1fr 2fr; }
}

.summary-box { background: var(--bg-color-panel); padding: 15px; border: 2px solid #555; text-align: left; }
.summary-box h3 { border-bottom: 2px solid #444; padding-bottom: 10px; margin-bottom: 10px; }

.transfer-offer-box { background: #1a252f; border: 2px solid var(--color-blue); padding: 15px; margin: 15px 0; }