/* ==========================================================================
   MODERN CSS SYSTEM - NO BOOTSTRAP
   ========================================================================== */

/* CSS Custom Properties (Variables) */
:root {
    --primary-blue: #2563EB;
    --secondary-gold: #F59E0B;
    --dark-bg: #111827;
    --light-text: #F9FAFB;
    --dark-text: #1F2937;
    --primary-green: #10B981;
    --primary-green-dark: #059669;
    --success-green: #10B981;
    --danger-red: #EF4444;
    --box-blue: #2563EB;
    --box-gray: #4B5563;
    --box-faded-gray: #374151;
    --google-red: #DB4437;
    --apple-black: #000000;
    
    /* Spacing System */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Mobil scroll bounce'ı önle */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    height: 100%;
}

body {
    font-family: 'Lora', serif;
    color: var(--light-text);
    background-color: var(--dark-bg);
    margin: 0;
    padding-top: 80px;
    line-height: 1.6;
    position: relative;
    /* Mobil scroll sorununu önle */
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
    min-height: 100vh;
}

/* Cross-mobile sabit arka plan: pseudo element */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dark-bg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: -1;
    pointer-events: none;
    /* Mobil için özel ayarlar */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Background Classes via ::before */
body.bg-index::before {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 22%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 70%), url('../images/1.jpg');
    background-position: center 20%;
}

body.bg-login::before {
    background-image: url('../images/3.jpg');
}

body.bg-signup::before {
    background-image: url('../images/4.jpg');
}

body.bg-profile::before {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 22%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 70%), url('../images/2.jpg');
}

/* New pages backgrounds */
body.bg-privacy::before {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 22%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 70%), url('../images/5.jpg');
    background-position: center 20%;
}

body.bg-impressum::before {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 22%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 70%), url('../images/6.jpg');
    background-position: center 20%;
}

/* Fallback background (in case ::before layer is not rendered by the browser) */
body.bg-privacy {
    background-image: url('../images/5.jpg');
    background-position: center 20%;
    background-repeat: no-repeat;
    background-size: cover;
}

body.bg-impressum {
    background-image: url('../images/6.jpg');
    background-position: center 20%;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ==========================================================================
   LAYOUT SYSTEM - CSS GRID + FLEXBOX
   ========================================================================== */

/* Container System */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.container-sm {
    max-width: 640px;
}

.container-md {
    max-width: 768px;
}

.container-lg {
    max-width: 1024px;
}

.container-xl {
    max-width: 1280px;
}

/* Grid System */
.grid {
    display: grid;
    gap: var(--spacing-md);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Flexbox System */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

/* ==========================================================================
   NAVIGATION SYSTEM
   ========================================================================== */

.nav-bar {
    position: fixed;
    top: 0;
        left: 0;
    width: 100%;
    height: 80px;
        background: rgba(17, 24, 39, 0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 1000;
}

.nav-bar .container {
    display: flex;
        align-items: center;
        justify-content: space-between;
    height: 100%;
        max-width: 1280px;
        margin: 0 auto;
    padding: 0 var(--spacing-md);
}

                                                                .nav-left,
                                                                .nav-right {
                                                                    display: flex;
                                                                    align-items: center;
    gap: var(--spacing-xl);
                                                                }
                                
                                                                .nav-center {
                                                                    flex: 1;
                                                                    text-align: center;
                                                                }
                                
                                                                .nav-title {
                                                                    font-family: 'Cinzel', serif;
                                                                    font-size: 1.75rem;
                                                                    font-weight: 700;
    color: var(--secondary-gold);
    text-decoration: none;
    text-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
    transition: all 0.3s ease;
}

.nav-title:hover,
.nav-title:focus,
.nav-title:visited {
    color: var(--secondary-gold);
    text-decoration: none;
}

.nav-link {
    color: var(--light-text);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    }
    
    .nav-link:hover {
        background: rgba(255, 255, 255, 0.1);
    color: var(--light-text);
}

.dropdown-trigger {
    color: var(--light-text);
}

.dropdown-trigger:hover {
    color: var(--light-text);
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
        position: absolute;
    top: 100%;
        right: 0;
    margin-top: var(--spacing-sm);
    background: rgba(17, 24, 39, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) 0;
        min-width: 180px;
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(10px);
    z-index: 1000;
    list-style: none;
    padding-left: 0;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-menu li a {
    color: var(--light-text);
    padding: var(--spacing-sm) var(--spacing-lg);
    display: block;
    font-size: 1rem;
    transition: all 0.2s;
    text-decoration: none;
    font-weight: 500;
}

.dropdown-menu li a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--secondary-gold);
}

/* ==========================================================================
   MAIN CONTENT SYSTEM
   ========================================================================== */

.main-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

.content-section {
    width: 100%;
    margin-bottom: var(--spacing-2xl);
    text-align: center;
}

#welcomeSection {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
    position: relative;
    z-index: 1;
}

.main-title {
    font-family: 'Cinzel', serif;
    font-size: 2.8rem;
    color: var(--light-text);
    margin-bottom: var(--spacing-md);
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 0, 0, 0.45);
    position: relative;
    z-index: 1;
}

.main-desc {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-xl);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
}

#pyramidTitle {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    color: var(--light-text);
    margin-bottom: var(--spacing-xl);
    text-align: center;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 0, 0, 0.45);
}

#pyramidSection {
    padding: var(--spacing-2xl) var(--spacing-md);
    margin: 0 auto var(--spacing-xl);
    max-width: 800px;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 1;
}

#pyramidSvg {
    width: 100%;
    max-width: 800px;
    height: 420px; /* ensure visible height on all browsers */
        display: block;
        margin: 0 auto;
    padding: var(--spacing-lg);
    }
    
/* ==========================================================================
   PYRAMID STYLES
   ========================================================================== */
    
    .player-box {
        fill: #3B82F6;
        stroke: #2563EB;
        stroke-width: 2;
        rx: 8;
        transition: all 0.3s ease;
        filter: drop-shadow(0 4px 6px rgba(59, 130, 246, 0.3));
    }
    
    .player-box.myself {
        fill: #48bb78;
        stroke: #2f855a;
        stroke-width: 3;
        filter: drop-shadow(0 4px 8px rgba(72, 187, 120, 0.4));
    }
    
    .player-box.can-challenge {
        cursor: pointer;
        fill: #60A5FA;
        stroke: #3B82F6;
    }
    
    .player-box.can-challenge:hover {
        fill: #93C5FD;
        stroke: #2563EB;
        filter: drop-shadow(0 6px 12px rgba(59, 130, 246, 0.5));
        transform: translateY(-2px);
    }

    /* Non-challengeable players ahead of current user (grayed/disabled look) */
    .player-box.disabled-ahead {
        fill: #4B5563;
        stroke: #2B313B;
        opacity: 0.75;
    }
    .player-group.disabled-ahead { pointer-events: none; }

    /* Players behind the current user (subtle gray) */
    .player-box.behind {
        fill: #2F3844;
        stroke: #1F2937;
        opacity: 0.8;
    }
    
    .rank-text,
    .player-name-text {
    fill: var(--light-text);
        font-weight: 500;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    }
    
/* ==========================================================================
   TABLES AND CHALLENGES SECTION
   ========================================================================== */
    
    #matchesAndChallengesSection {
    background: rgba(17, 24, 39, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--shadow-xl);
}

#matchesAndChallengesSection .tabs { display: flex; justify-content: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); }

.tabs {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: var(--spacing-md);
}

.tab-button {
    background: transparent;
        border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: var(--spacing-sm) var(--spacing-md);
        font-size: 1rem;
        cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.tab-button:hover {
    color: var(--light-text);
}

.tab-button.active {
    color: var(--light-text);
}

.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary-blue);
}

.table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    margin-top: var(--spacing-md);
    max-height: 480px;
    -webkit-overflow-scrolling: touch;
}

/* Compact table layout inside scroll wrapper */
.table-wrapper table { table-layout: fixed; width: 100%; }
.table-wrapper thead th {
    position: sticky;
    top: 0;
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(6px);
    z-index: 1;
}
.table-wrapper th, .table-wrapper td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: calc(var(--spacing-sm) * 0.85) var(--spacing-sm);
}

/* Centered compact 3-column tables */
.centered-table th,
.centered-table td { text-align: center; }

.compact-3col th,
.compact-3col td {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* Tighter spacing for compact tables */
#matchesAndChallengesSection .compact-3col { table-layout: fixed; width: 100%; }
#matchesAndChallengesSection .compact-3col th,
#matchesAndChallengesSection .compact-3col td { padding: 6px 8px; }

/* Stack Accept/Decline vertically and centered */
.stack-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Ensure Status column shows full action buttons on desktop */
#matchesAndChallengesSection table th:nth-child(4),
#matchesAndChallengesSection table td:nth-child(4) {
    min-width: 220px;
}
#matchesAndChallengesSection .table-wrapper td:nth-child(4) {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
#matchesAndChallengesSection .table-wrapper td .accept-btn,
#matchesAndChallengesSection .table-wrapper td .decline-btn,
#matchesAndChallengesSection .table-wrapper td .match-result-btn {
    white-space: nowrap;
}

/* ==========================================================================
   PROFILE PAGE STYLES
   ========================================================================== */

.profile-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.profile-info {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-info h2 {
    font-family: 'Cinzel', serif;
    color: var(--secondary-gold);
    margin-bottom: var(--spacing-lg);
    font-size: 2rem;
}

.profile-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
}

.profile-detail {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.profile-detail strong {
    color: var(--secondary-gold);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-detail span {
    color: var(--light-text);
    font-size: 1.1rem;
}

.profile-settings {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    justify-content: center;
}

.settings-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 255, 255, 0.1);
    color: var(--light-text);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    font-size: 0.9rem;
    backdrop-filter: blur(5px);
}

.settings-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.settings-btn.danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.settings-btn.danger:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
}

/* ==========================================================================
   FORM STYLES
   ========================================================================== */

.form-container {
    max-width: 400px;
    margin: 0 auto;
    padding: var(--spacing-xl);
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    color: var(--light-text);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.form-input {
    width: 100%;
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    color: var(--light-text);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--secondary-gold);
    background: rgba(255, 255, 255, 0.15);
}

/* Select element styling */
select.form-input {
    background: rgba(17, 24, 39, 0.8);
    color: var(--light-text);
    cursor: pointer;
}

select.form-input option {
    background: rgba(17, 24, 39, 0.95);
    color: var(--light-text);
    padding: var(--spacing-sm);
}

select.form-input:focus {
    background: rgba(17, 24, 39, 0.9);
}

.form-btn {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--primary-blue);
    color: var(--light-text);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-btn:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

.social-btn {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    text-decoration: none;
}

.google-btn {
    background: var(--google-red);
    color: var(--light-text);
}

.google-btn:hover {
    background: #c53030;
    color: var(--light-text);
}

/* ==========================================================================
   TABLE STYLES
   ========================================================================== */

table {
    width: 100%;
        border-collapse: collapse;
    color: var(--light-text);
}

th, td {
    padding: var(--spacing-md);
        text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

th {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

tr:hover td {
    background: rgba(255, 255, 255, 0.05);
}

/* Match result styles */
.win {
    color: var(--primary-green);
    font-weight: bold;
}

.loss {
    color: var(--primary-red);
    font-weight: bold;
}

.matches-table td.win {
    color: var(--primary-green);
    font-weight: bold;
}

.matches-table td.loss {
    color: var(--primary-red);
    font-weight: bold;
}

/* ==========================================================================
   RULES PAGE STYLES
   ========================================================================== */

.rules-container {
    max-width: 800px;
    margin: 0 auto;
}

.rule-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.rule-section:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.rule-section.featured {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
    border-color: rgba(245, 158, 11, 0.3);
}

.rule-section h2 {
    color: var(--secondary-gold);
    font-family: 'Cinzel', serif;
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.rule-section h2 i {
    font-size: 1.2em;
}

.rule-content h3 {
    color: #d1d5db; /* slate-300: darker than white, high contrast on dark bg */
    margin: var(--spacing-lg) 0 var(--spacing-md) 0;
    font-size: 1.1rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.rule-content p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
}

.rule-content strong {
    color: var(--secondary-gold);
}

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

.accept-btn, .decline-btn, .contact-btn {
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-sm);
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	margin: 0 var(--spacing-xs);
	backdrop-filter: blur(5px);
	border: 1px solid;
}

.accept-btn { background: rgba(16, 185, 129, 0.15); color: var(--light-text); border-color: rgba(16, 185, 129, 0.3); }
.accept-btn:hover { background: rgba(16, 185, 129, 0.3); border-color: rgba(16, 185, 129, 0.5); transform: translateY(-1px); }
.decline-btn { background: rgba(239, 68, 68, 0.15); color: var(--light-text); border-color: rgba(239, 68, 68, 0.3); }
.decline-btn:hover { background: rgba(239, 68, 68, 0.3); border-color: rgba(239, 68, 68, 0.5); transform: translateY(-1px); }

.contact-btn {
	background: rgba(59,130,246,0.15); /* blue */
	color: var(--light-text);
	border-color: rgba(59,130,246,0.3);
}
.contact-btn:hover {
	background: rgba(59,130,246,0.3);
	border-color: rgba(59,130,246,0.5);
	transform: translateY(-1px);
}

.match-result-btn {
    background: var(--primary-green);
    color: #ffffff;
    border: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: var(--spacing-xs);
    display: inline-block;
}

.match-result-btn:hover {
    background: var(--primary-green-dark);
    transform: translateY(-1px);
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.hidden { display: none; }
.visible { display: block; }

/* Admin Panel Styles */
.admin-panel {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.admin-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.admin-section {
    background: rgba(255, 255, 255, 0.05);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-btn {
    display: block;
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    background: var(--primary-blue);
    color: var(--light-text);
    border: none;
    border-radius: var(--radius-md);
    font-family: 'Lora', serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.admin-btn:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.admin-btn.danger {
    background: var(--danger-red);
}

.admin-btn.danger:hover {
    background: #dc2626;
}

.admin-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive admin panel */
@media (max-width: 768px) {
    .admin-buttons {
        grid-template-columns: 1fr;
    }
    
    .admin-section {
        padding: var(--spacing-md);
    }
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
    .nav-bar .container {
        padding: 0 var(--spacing-sm);
    }
    
    .nav-title {
        font-size: 1.4rem;
    }
    
    .nav-link {
        font-size: 0.9rem;
        padding: var(--spacing-sm) var(--spacing-sm);
    }
    
    .nav-left,
    .nav-right {
        gap: var(--spacing-md);
    }
    
    .main-container {
        padding: var(--spacing-md) var(--spacing-sm);
    }
    
    .main-title {
        font-size: 2rem;
    }
    
    .main-desc {
        font-size: 1rem;
    }
    
    #pyramidTitle {
        font-size: 2rem;
    }
    
    .profile-info {
        padding: var(--spacing-lg);
    }
    
    .profile-info h2 {
        font-size: 1.5rem;
    }
    
    .settings-btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.9rem;
        margin: var(--spacing-sm);
    }
    
    .rules-container {
        padding: 20px;
        margin: 20px 10px;
    }
    
    .rule-section {
        padding: 15px;
    }
    
    .rule-section h2 {
        font-size: 1.3rem;
    }
    
    .rule-content h3 {
        font-size: 1.1rem;
    }
    
    .rule-content p {
        font-size: 0.9rem;
    }
    
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
	/* Ensure dropdown anchors at left and under trigger on mobile */
	.dropdown-menu { right: auto; left: 0; margin-top: 6px; min-width: 160px; }
	/* Prevent clipping off-screen */
	.nav-bar .container { overflow: visible; }
}

@media (max-width: 576px) {
    .nav-title {
        font-size: 1.2rem;
    }
    
    .nav-link {
        font-size: 0.8rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .nav-left,
    .nav-right {
        gap: var(--spacing-sm);
    }
    
    .main-title {
        font-size: 1.8rem;
    }
    
    #pyramidTitle {
        font-size: 1.8rem;
    }
    
    .profile-details {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    .settings-btn {
        display: block;
        width: 100%;
        margin: var(--spacing-sm) 0;
    }
    
    .table-wrapper {
        padding: var(--spacing-md);
    }
    
    th, td {
        padding: var(--spacing-sm) var(--spacing-sm);
        font-size: 0.9rem;
    }

    /* On small screens, allow wrapping inside challenge/match tables to avoid clipping */
    .table-wrapper th,
    .table-wrapper td {
        white-space: normal;
        word-break: break-word;
        text-overflow: clip;
        line-height: 1.3;
    }

    /* Slightly reduce inner padding for the challenge/match table */
    #matchesAndChallengesSection .table-wrapper th,
    #matchesAndChallengesSection .table-wrapper td {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    /* Allow auto layout for better wrapping in portrait */
    #matchesAndChallengesSection .table-wrapper table {
        table-layout: auto;
    }

    /* Keep table headers readable: do not split words */
    #matchesAndChallengesSection .table-wrapper thead th {
        white-space: nowrap;
        word-break: keep-all;
        font-size: 0.85rem;
    }

    /* Compact 3-col: equal widths to fit one line */
    #matchesAndChallengesSection .compact-3col { table-layout: fixed; }
    #matchesAndChallengesSection .compact-3col th:nth-child(1),
    #matchesAndChallengesSection .compact-3col td:nth-child(1) { width: 44%; }
    #matchesAndChallengesSection .compact-3col th:nth-child(2),
    #matchesAndChallengesSection .compact-3col td:nth-child(2) { width: 28%; white-space: nowrap; }
    #matchesAndChallengesSection .compact-3col th:nth-child(3),
    #matchesAndChallengesSection .compact-3col td:nth-child(3) { width: 28%; }

    /* Tabloları daha okunur yap: yazı boyutunu düşür, satırları sıklaştır */
    #matchesAndChallengesSection table { font-size: 0.9rem; }
    #matchesAndChallengesSection .table-wrapper th,
    #matchesAndChallengesSection .table-wrapper td { line-height: 1.35; letter-spacing: 0.1px; }

    /* Kolonları sabitle: Type | Opponent | Date | Status | Action */
    /* Adjusted for 4-column layout (Action merged into Status) */
    #matchesAndChallengesSection table th:nth-child(1),
    #matchesAndChallengesSection table td:nth-child(1) { min-width: 70px; }
    #matchesAndChallengesSection table th:nth-child(2),
    #matchesAndChallengesSection table td:nth-child(2) { min-width: 170px; }
    #matchesAndChallengesSection table th:nth-child(3),
    #matchesAndChallengesSection table td:nth-child(3) { min-width: 90px; white-space: nowrap; }
    #matchesAndChallengesSection table th:nth-child(4),
    #matchesAndChallengesSection table td:nth-child(4) { min-width: 130px; }

    /* Allow wrapping only for Opponent column for better readability */
    #matchesAndChallengesSection .table-wrapper td:nth-child(2) { white-space: normal; word-break: break-word; line-height: 1.35; }
    #matchesAndChallengesSection .table-wrapper th { letter-spacing: 0.2px; }

    /* Reduce overall section padding on mobile */
    #matchesAndChallengesSection { padding: var(--spacing-lg); }

    /* Aksiyon butonlarını daha kompakt yap */
    .accept-btn, .decline-btn, .match-result-btn { font-size: 0.7rem; padding: var(--spacing-xs) 6px; }

    /* Opponent altındaki yardımcı notu gizle (kalabalığı azalt) */
    .contact-note { display: none; }

    /* Compress profile info card so pyramid appears sooner */
    .profile-info {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
    .profile-detail strong { font-size: 0.8rem; }
    .profile-detail span { font-size: 1rem; }

    /* Tighten spacing around pyramid on mobile */
    #pyramidSection { padding: var(--spacing-lg) var(--spacing-sm); }
    #pyramidTitle { margin-bottom: var(--spacing-lg); }

    /* Align opponent cell text to left on mobile */
    .opponent-cell { align-items: flex-start; }
    .opponent-name { text-align: left; }
    
    .accept-btn, .decline-btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.75rem;
    }
    
    .form-container {
        margin: var(--spacing-md);
        padding: var(--spacing-lg);
    }
}

/* Disable legacy card layout to prevent duplicated labels on mobile */
/* Keeping real table structure for clarity */

/* Force rows (not cards) specifically for profile tables; enable horizontal scroll */
@media (max-width: 576px) {
    #matchesAndChallengesSection .table-wrapper table { display: table; min-width: 0; width: 100%; table-layout: fixed; }
    #matchesAndChallengesSection .table-wrapper thead { display: table-header-group; }
    #matchesAndChallengesSection .table-wrapper tbody { display: table-row-group; }
    #matchesAndChallengesSection .table-wrapper tr { display: table-row; }
    #matchesAndChallengesSection .table-wrapper th,
    #matchesAndChallengesSection .table-wrapper td { display: table-cell; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Hide long helper texts to reduce clutter */
    #matchesAndChallengesSection .waiting-text { display: none; }
}

.waiting-text {
    color: var(--secondary-text);
    font-style: italic;
    font-size: 0.8rem;
}

/* Toast styles for notifications */
.toast { position: fixed; right: 16px; bottom: 16px; padding: 10px 14px; border-radius: 10px; background: rgba(17,24,39,0.92); color: #fff; z-index: 9999; max-width: 420px; box-shadow: 0 10px 25px rgba(0,0,0,0.35); font-size: 14px; line-height: 1.35; pointer-events: none; backdrop-filter: blur(6px); }
.toast.success { border-left: 4px solid #10B981; }
.toast.error { border-left: 4px solid #EF4444; }

.winner-name { font-weight: 700; color: #10B981; text-shadow: 0 0 6px rgba(16,185,129,0.35); }

.action-hint { margin-top: 6px; font-size: 12px; color: rgba(255,255,255,0.8); }
.action-hint .contact-btn { margin-left: 6px; }

.contact-note { margin-top: 4px; font-size: 12px; text-align: center; color: rgba(255,255,255,0.9); }

/* Opponent cell layout */
.opponent-cell { display: flex; flex-direction: column; align-items: center; }
.opponent-name { text-align: center; }
.contact-wrap { margin-top: 6px; display: flex; flex-direction: column; align-items: center; }
.contact-wrap .contact-btn { margin: 0; }
.contact-wrap .contact-note { margin-top: 4px; }

@media (max-width: 576px) {
    .contact-wrap { margin-top: 4px; }
}

/* ==========================================================================
   MODAL (DARK TRANSLUCENT)
   ==========================================================================
*/
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-card {
    background: rgba(17, 24, 39, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--light-text);
    border-radius: var(--radius-lg);
    padding: 20px;
    width: 92%;
    max-width: 680px;
    box-shadow: var(--shadow-xl);
}

.modal-title {
    margin: 0 0 10px 0;
    font-family: 'Cinzel', serif;
    color: var(--secondary-gold);
}

.modal-field { margin-bottom: 10px; }
.modal-field label { display: block; margin-bottom: 4px; color: rgba(255,255,255,0.9); }
.modal-field input,
.modal-field textarea,
.modal-field select {
    width: 100%;
    padding: 8px 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius-sm);
    color: var(--light-text);
}
/* Do not force full width for checkboxes/radios inside modal fields */
.modal-field input[type="checkbox"],
.modal-field input[type="radio"] {
    width: auto;
    padding: 0;
}

/* Ensure modal dropdowns are readable (dark translucent + white text) */
.modal-card select {
    background: rgba(17,24,39,0.9);
    color: var(--light-text);
    border: 1px solid rgba(255,255,255,0.25);
}
.modal-card select:focus {
    outline: none;
    border-color: var(--secondary-gold);
}
.modal-card select option {
    background: rgba(17,24,39,0.95);
    color: var(--light-text);
}

.modal-actions { text-align: right; margin-top: 12px; }

/* Improve visibility of Change Region dropdown on profile */
#changeRegionSelect {
    background: rgba(17, 24, 39, 0.98);
    color: var(--light-text);
    border: 1px solid rgba(255, 255, 255, 0.4);
}
#changeRegionSelect option {
    background: rgba(17, 24, 39, 0.98);
    color: var(--light-text);
}
@media (max-width: 576px) {
    #changeRegionSelect { font-size: 1rem; }
}

/* --- Overrides for compact 3-col tables on mobile to avoid card layout and ::before labels --- */
@media (max-width: 576px) {
    /* Keep real table structure for compact-3col */
    #matchesAndChallengesSection .compact-3col { display: table; width: 100%; min-width: 0; table-layout: auto; }
    #matchesAndChallengesSection .compact-3col thead { display: table-header-group; }
    #matchesAndChallengesSection .compact-3col tbody { display: table-row-group; }
    #matchesAndChallengesSection .compact-3col tr { display: table-row; }
    #matchesAndChallengesSection .compact-3col th,
    #matchesAndChallengesSection .compact-3col td { display: table-cell; white-space: normal; overflow: visible; text-overflow: clip; }
    /* Remove duplicated data-label headings inside cells */
    #matchesAndChallengesSection .compact-3col td::before { content: none !important; }
}