/* ============================================================
   UI Polish — fixes from visual audit (May 2026)
   ============================================================ */

/* ----------------------------------------------------------
   0. DESIGN TOKENS — Cinzel for headings, consistent buttons
   ---------------------------------------------------------- */
:root {
    --font-heading: 'Cinzel', 'Palatino Linotype', 'Georgia', serif;
    --btn-radius: 8px;
    --btn-height: 44px;
    --btn-font-size: 14px;
    --gold-primary: #c9a84c;
    --gold-hover: #e0c068;
}

/* ----------------------------------------------------------
   1. APPLY CINZEL TO HEADINGS & WORDMARK
   ---------------------------------------------------------- */
h1, h2, h3, h4,
.screen-title,
.nav-section-header,
.section-title,
.panel-title,
.modal-title,
.stat-label,
.card-name,
.deck-name-input,
.battle-result-title,
.performance-grade {
    font-family: var(--font-heading);
}

.top-bar-title {
    font-family: var(--font-heading);
    font-size: 20px !important;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--gold-primary) !important;
}

/* ----------------------------------------------------------
   2. AUTH SCREEN FIXES
   ---------------------------------------------------------- */

/* Hide empty error box */
.auth-error:empty {
    display: none;
}

/* Auth container: don't overflow viewport */
#screen-auth .screen-content,
#screen-auth {
    overflow-y: auto;
    max-height: 100vh;
}

.auth-container {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Focus styles for auth links */
.auth-switch a:focus-visible {
    outline: 2px solid var(--gold-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ----------------------------------------------------------
   3. DASHBOARD FIXES
   ---------------------------------------------------------- */

/* Kill horizontal overflow from decorative layers */
#screen-main-menu {
    overflow-x: hidden !important;
}

.hero-aether-swirl,
.battlefield-particles {
    max-width: 100%;
    overflow: hidden;
}

/* Sidebar: prevent horizontal scroll, add scrollbar gutter */
.main-menu-sidebar {
    overflow-x: hidden !important;
    scrollbar-gutter: stable;
}

/* Fix sidebar PLAY cards clipping: reduce gap so 2-col grid fits in 280px - 40px padding = 240px */
.main-menu-sidebar .nav-section:first-child .nav-buttons {
    gap: 8px;
}

.main-menu-sidebar .nav-section:first-child .nav-btn {
    min-width: 0;
}

/* Remove duplicate ::before icons on Deck/Collection/Shop nav buttons
   These buttons already have .nav-icon SVGs from main_menu_redesign.css */
#goto-deck-manager::before,
#goto-shop::before,
#goto-collection::before {
    display: none !important;
}

/* Gem count color — match the blue diamond icon */
#player-crystals-display {
    color: #4fc3f7 !important;
}

/* ----------------------------------------------------------
   4. COLLECTION SCREEN FIXES
   ---------------------------------------------------------- */

/* Make collection grid fill available viewport height instead of fixed px */
#collection-list-main {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    min-height: 200px;
}

/* Card name should be larger than description */
#collection-list-main .card .card-name,
.card-gothic .card-name {
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-heading);
}

/* ----------------------------------------------------------
   5. SHOP FIXES
   ---------------------------------------------------------- */

/* Hide "No discount" text — only show when discount is active */
.bulk-discount-info .discount-text {
    display: none;
}

.bulk-discount-info.has-discount .discount-text {
    display: inline;
    color: #4caf50;
    font-weight: 600;
    margin-right: 8px;
}

/* Make PURCHASE button vivid instead of grey */
.buy-button.primary,
button.buy-button {
    background: linear-gradient(135deg, var(--gold-primary), #d4a843) !important;
    color: #1a1a2e !important;
    font-weight: 700 !important;
    border: none;
    border-radius: var(--btn-radius);
    min-height: var(--btn-height);
    font-size: var(--btn-font-size);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s ease;
}

.buy-button.primary:hover,
button.buy-button:hover {
    background: linear-gradient(135deg, var(--gold-hover), #e8c060) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(201, 168, 76, 0.4);
}

/* Consistent Buy 5 / Buy 10 buttons */
.bulk-action-btn {
    background: rgba(201, 168, 76, 0.15) !important;
    border: 1px solid rgba(201, 168, 76, 0.3) !important;
    color: var(--gold-primary) !important;
    border-radius: var(--btn-radius) !important;
    font-weight: 600;
    transition: all 0.2s ease;
}

.bulk-action-btn:hover,
.bulk-action-btn.recommended {
    background: rgba(201, 168, 76, 0.25) !important;
    border-color: var(--gold-primary) !important;
}

/* Consistent shop filter buttons */
.shop-filter-btn,
.shop-nav-btn {
    border-radius: var(--btn-radius) !important;
}

/* ----------------------------------------------------------
   6. DECK BUILDER FIXES
   ---------------------------------------------------------- */

/* Fix toolbar / deck-panel header collision */
.deck-manager-toolbar {
    position: relative;
    z-index: 2;
    margin-bottom: 8px;
}

/* Size card preview modal to content, not viewport */
.deck-manager-preview-content {
    max-width: 600px !important;
    max-height: 85vh;
    width: auto !important;
    margin: auto;
}

/* Remove blank purple band above filter row */
.deck-builder-filters {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ----------------------------------------------------------
   7. BATTLE FIXES
   ---------------------------------------------------------- */

/* Consistent SP bar for both player and opponent */
.opponent-sp-bar,
.player-sp-bar {
    height: 8px;
    border-radius: 4px;
    min-width: 80px;
}

/* ----------------------------------------------------------
   8. SETTINGS FIXES
   ---------------------------------------------------------- */

/* Back button: stop being full-width */
#screen-settings .back-button,
.settings-back-btn {
    max-width: 200px;
    margin: 1rem auto;
    display: block;
    border-radius: var(--btn-radius);
}

/* Style checkboxes and radios to match theme */
#screen-settings input[type="checkbox"],
#screen-settings input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(201, 168, 76, 0.4);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    margin-right: 8px;
}

#screen-settings input[type="radio"] {
    border-radius: 50%;
}

#screen-settings input[type="checkbox"]:checked,
#screen-settings input[type="radio"]:checked {
    background: var(--gold-primary);
    border-color: var(--gold-primary);
}

#screen-settings input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #1a1a2e;
    font-size: 14px;
    font-weight: 700;
}

#screen-settings input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1a1a2e;
}

/* Radio labels inline */
#screen-settings label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-right: 16px;
}

/* ----------------------------------------------------------
   9. CARD LAYOUT FIXES
   ---------------------------------------------------------- */

/* Cost badge is position:absolute (premium-screens.css), so pad the name to clear it */
.card .card-name {
    padding-left: 28px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card type badge: prevent clipping at top-right */
.card .card-type {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 6;
    font-size: 7px;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Restore card description visibility */
.card .card-description-container {
    min-height: 20px;
    max-height: 50px;
    overflow: hidden;
    display: block;
}

/* Stat circle labels via title attributes — add tiny icons for clarity */
.card-attack::before { content: '\2694'; font-size: 6px; position: absolute; top: -2px; }
.card-defense::before { content: '\1F6E1'; font-size: 5px; position: absolute; top: -2px; }
.card-health::before { content: '\2764'; font-size: 5px; position: absolute; top: -2px; }

.card-attack, .card-defense, .card-health {
    position: relative;
}

/* ----------------------------------------------------------
   10. GLOBAL BUTTON CONSISTENCY
   ---------------------------------------------------------- */

/* Primary buttons */
.btn-primary,
.auth-button,
.purchase-confirmation-btn.primary,
button[class*="primary"]:not(.bulk-action-btn) {
    border-radius: var(--btn-radius);
    min-height: var(--btn-height);
    font-size: var(--btn-font-size);
    font-weight: 700;
    font-family: var(--font-heading);
}

/* Secondary buttons */
.btn-secondary,
.purchase-confirmation-btn.secondary {
    border-radius: var(--btn-radius);
    min-height: var(--btn-height);
    font-size: var(--btn-font-size);
    font-weight: 600;
}