:root {
    --bg-primary: #ecdcb9; /* Yellowed parchment paper background */
    --bg-secondary: #f4ebd0; /* Light parchment/papyrus card background */
    --bg-card: #ebdca5; /* Aged parchment scroll element background */
    --border: #5c4033; /* Aged dark brown ink border */
    --accent: #8b0000; /* Deep royal crimson ink */
    --accent-glow: rgba(139, 0, 0, 0.15);
    --text-main: #2c241e; /* Calligraphy coal-black/brown ink */
    --text-muted: #6e584a; /* Faded/aged ink */
    --success: #1f5231; /* Forest green seal ink */
    --success-glow: rgba(31, 82, 49, 0.15);
    --danger: #8b0000; /* Royal crimson red ink */
    --danger-glow: rgba(139, 0, 0, 0.15);
    --warning: #b8860b; /* Golden bronze ink */
    --mobile-bottom-nav-height: 86px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'EB Garamond', serif;
    -webkit-font-smoothing: antialiased;
}

/* Medieval Typography Overrides */
h1, h2, h3, h4, h5, h6, .logo-text, .btn, .toggle-btn, .tab-btn, .energy-label {
    font-family: 'MedievalSharp', cursive !important;
    letter-spacing: 0.02em;
}

/* Beautiful Medieval Illuminated Drop Cap */
.drop-cap-title::first-letter, .view-header h2::first-letter {
    font-size: 2.8rem;
    float: left;
    line-height: 0.95;
    margin-right: 8px;
    font-family: 'Almendra', serif;
    color: var(--accent);
    font-weight: 700;
    border: 2px solid var(--border);
    padding: 2px 6px;
    background-color: #f4ebd0;
    box-shadow: 2px 2px 0px var(--border);
    border-radius: 2px;
}

body {
    background-color: var(--bg-primary);
    background-image: 
        radial-gradient(circle at center, rgba(244, 235, 208, 0.4) 0%, rgba(236, 220, 185, 0.8) 100%),
        repeating-linear-gradient(0deg, rgba(92, 64, 51, 0.015) 0px, rgba(92, 64, 51, 0.015) 1px, transparent 1px, transparent 4px);
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Authentic Parchment Pulp & Fiber Noise Overlay */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0.06;
    pointer-events: none;
    z-index: 9999;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Parchment Vignette Overlay for Aged Feel */
.bg-glow-sphere-1 {
    position: fixed;
    width: 100vw;
    height: 100vh;
    box-shadow: inset 0 0 100px rgba(92, 64, 51, 0.4);
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1000;
}

.bg-glow-sphere-2 {
    display: none !important;
}

/* Tactile Active Pressed State (Medieval retro/boardgame feel) */
.btn:active, 
.option-btn:active, 
.toggle-btn:active, 
.tab-btn:active, 
.btn-logout:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 0px 0px 0px var(--border) !important;
}

/* Utilities */
.hidden {
    display: none !important;
}

/* Toast Message */
.toast {
    position: fixed;
    top: 24px;
    right: 24px;
    background-color: #f4ebd0;
    backdrop-filter: blur(5px);
    border: 3px double var(--border);
    color: var(--text-main);
    padding: 16px 24px;
    border-radius: 4px;
    box-shadow: 4px 4px 0px rgba(92, 64, 51, 0.2);
    z-index: 2000;
    font-weight: 700;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Authentication Screen */
#auth-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at center, #f4ebd0 0%, #ecdcb9 100%);
}

.auth-card {
    background-color: #f4ebd0;
    border: 4px double var(--border);
    border-radius: 8px;
    padding: 40px;
    width: 100%;
    max-width: 440px;
    box-shadow: 8px 8px 0px rgba(92, 64, 51, 0.15);
    text-align: center;
}

.game-logo {
    display: inline-block;
    font-size: 3.5rem;
    margin-bottom: 16px;
    animation: pulse 2s infinite ease-in-out;
}

.auth-header h1 {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
    color: var(--accent);
}

.auth-header p {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 32px;
    font-style: italic;
}

/* Forms */
.form-group {
    text-align: left;
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    background-color: #ecdcb9;
    border: 2px solid var(--border);
    border-radius: 4px;
    color: var(--text-main);
    font-size: 1.05rem;
    outline: none;
    font-family: 'EB Garamond', serif;
    transition: all 0.2s ease;
}

.form-group input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.1);
    background-color: #ffffff;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 4px;
    border: 2px solid var(--border);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    background-color: #e3d2b0;
    color: var(--text-main);
    box-shadow: 3px 3px 0px var(--border);
    transition: all 0.1s ease;
    width: 100%;
    height: 48px;
}

.btn-primary {
    background-color: #e3d2b0;
    color: var(--text-main);
}

.btn-primary:hover {
    background-color: #ebdca5;
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0px var(--border);
}

.btn-glow {
    background-color: var(--accent);
    color: white;
    box-shadow: 3px 3px 0px var(--border);
}

.btn-glow:hover {
    background-color: #a61c1c;
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0px var(--border);
}

.btn-logout {
    background-color: var(--accent);
    border: 2px solid var(--border);
    font-size: 1.1rem;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #ffffff;
    box-shadow: 2px 2px 0px var(--border);
    transition: all 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    position: relative;
}

.btn-logout::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1.5px dashed rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    pointer-events: none;
}

.btn-logout:hover {
    background-color: #a61c1c;
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px var(--border);
}

.auth-footer {
    margin-top: 24px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
}

/* Game Interface Header */
.app-header {
    background-color: #ebdca5;
    border-bottom: 4px double var(--border);
    padding: 12px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(92, 64, 51, 0.18);
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Beautiful Medieval Heraldic Shield Crest */
.heraldic-crest {
    position: relative;
    width: 44px;
    height: 48px;
    background-color: var(--accent);
    border: 2px solid var(--border);
    border-radius: 4px 4px 50% 50% / 4px 4px 30% 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 0px var(--border);
    overflow: hidden;
}

/* Gold inner lining */
.heraldic-crest::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 1.5px solid var(--warning);
    border-radius: 2px 2px 50% 50% / 2px 2px 30% 30%;
    pointer-events: none;
}

.heraldic-crest .crest-symbol {
    font-size: 1.4rem;
    color: #ffffff;
    z-index: 2;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    animation: crestPulse 3s infinite ease-in-out;
}

@keyframes crestPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(255,215,0,0)); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 5px rgba(255,215,0,0.6)); }
}

.logo-title-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-text {
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    color: var(--accent);
    text-shadow: 1px 1px 0px #ffffff, 2px 2px 0px rgba(92, 64, 51, 0.2);
    line-height: 1.1;
    font-family: 'MedievalSharp', cursive !important;
}

.logo-sub {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #8c6b23;
    font-weight: 700;
    margin-top: 2px;
    font-family: 'MedievalSharp', cursive !important;
}

.profile-stats {
    display: flex;
    align-items: center;
    gap: 24px;
}

.btn-mute-toggle:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.05);
}

.profile-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.profile-meta .username {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-main);
}

.badge-cities {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    background-color: rgba(139, 0, 0, 0.08);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 4px;
}

/* Stylized Gilded Energy Widget */
.energy-widget {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #f4ebd0;
    border: 3px double var(--border);
    padding: 6px 16px;
    border-radius: 6px;
    box-shadow: 2px 2px 0px var(--border);
}

.energy-icon {
    color: var(--warning);
    font-size: 1.15rem;
    animation: flash 1.5s infinite ease-in-out;
}

.energy-bar-bg {
    width: 100px;
    height: 12px;
    background-color: #ecdcb9;
    border: 1px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.15);
}

.energy-bar-fill {
    height: 100%;
    background: linear-gradient(to right, #b8860b 0%, var(--warning) 50%, #ffd700 100%);
    border-radius: 0;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.energy-label {
    font-size: 0.95rem;
    font-weight: 700;
    min-width: 38px;
    text-align: right;
    color: var(--text-main);
    font-family: 'MedievalSharp', cursive !important;
}

.coin-widget {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #f4ebd0;
    border: 3px double var(--border);
    padding: 6px 12px;
    border-radius: 6px;
    box-shadow: 2px 2px 0px var(--border);
    color: var(--text-main);
    font-family: 'MedievalSharp', cursive;
    font-weight: 800;
}

.coin-icon {
    color: var(--warning);
}

/* Workspace Layout */
.game-container {
    max-width: 1550px;
    margin: 32px auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 240px 1fr 340px;
    gap: 24px;
    z-index: 10;
    position: relative;
    align-items: start;
}

.game-tabs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: none;
    border: 2px solid transparent;
    color: var(--text-muted);
    font-size: 1.05rem;
    font-weight: 700;
    text-align: left;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    color: var(--text-main);
    background-color: rgba(92, 64, 51, 0.05);
}

.tab-btn.active {
    color: var(--accent);
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    box-shadow: 3px 3px 0px var(--border);
}

/* Content Area */
.tab-content {
    min-height: 70vh;
}

.view-header {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.view-header h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent);
}

.search-box input {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    padding: 10px 16px;
    border-radius: 4px;
    color: var(--text-main);
    outline: none;
    font-size: 0.95rem;
    min-width: 260px;
    font-family: 'EB Garamond', serif;
    transition: all 0.2s;
}

.search-box input:focus {
    border-color: var(--accent);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
}

/* Cities Grid & Cards */
.cities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.city-card {
    background-color: var(--bg-secondary);
    border: 4px double var(--border);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 4px 4px 0px rgba(92, 64, 51, 0.15);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.city-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 6px 6px 0px rgba(92, 64, 51, 0.2);
}

.city-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.city-plate {
    background-color: rgba(92, 64, 51, 0.08);
    border: 1px solid var(--border);
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text-main);
}

.city-title {
    font-size: 1.2rem;
    font-weight: 700;
    font-family: 'MedievalSharp', cursive !important;
}

.city-owner {
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.city-owner .king {
    color: var(--accent);
    font-weight: 700;
}

.city-owner .vacant {
    color: var(--text-muted);
    font-style: italic;
}

.city-card-actions {
    display: flex;
    gap: 8px;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.9rem;
    border-radius: 4px;
    height: 36px;
    box-shadow: 2px 2px 0px var(--border);
}

/* Modals & Leaderboards */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: #f4ebd0;
    border: 4px double var(--border);
    border-radius: 8px;
    padding: 32px;
    width: 100%;
    max-width: 480px;
    box-shadow: 8px 8px 0px rgba(92, 64, 51, 0.2);
    position: relative;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.modal-header h3 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--accent);
}

.modal-owner-badge {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    background-color: rgba(139, 0, 0, 0.08);
    border: 1px solid var(--border);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: 4px;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.75rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
}

.modal-close-btn:hover {
    color: var(--accent);
}

.account-setup-card {
    max-width: 440px;
}

.account-setup-body {
    display: grid;
    gap: 12px;
}

.account-setup-copy {
    margin: -4px 0 4px;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.45;
}

.account-setup-error {
    border: 1.5px solid rgba(139, 0, 0, 0.35);
    background-color: rgba(139, 0, 0, 0.08);
    color: var(--accent);
    padding: 10px 12px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
}

.account-setup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
    margin: 16px 0;
    padding-right: 4px;
}

.leaderboard-entry {
    background-color: rgba(92, 64, 51, 0.05);
    border: 1.5px solid var(--border);
    padding: 12px 16px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.leaderboard-entry .rank-user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.leaderboard-entry .rank {
    font-weight: 800;
    color: var(--text-muted);
}

.leaderboard-entry .score {
    font-weight: 700;
    color: var(--accent);
}

.map-system-note {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: -8px 0 22px;
}

.map-system-note p {
    background-color: var(--bg-secondary);
    border: 3px double var(--border);
    border-radius: 6px;
    color: var(--text-main);
    font-weight: 700;
    line-height: 1.25;
    padding: 12px 14px;
    box-shadow: 3px 3px 0 rgba(92, 64, 51, 0.12);
}

.map-system-note p:last-child {
    color: var(--accent);
}

.elo-panel {
    background-color: var(--bg-secondary);
    border: 4px double var(--border);
    border-radius: 8px;
    box-shadow: 4px 4px 0 rgba(92, 64, 51, 0.15);
    overflow: hidden;
}

.elo-self-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 10px 14px;
    background-color: #ebdca5;
    border: 3px double var(--border);
    border-radius: 8px;
    box-shadow: 3px 3px 0 rgba(92, 64, 51, 0.14);
}

.elo-self-card span,
.elo-self-card strong {
    font-family: 'MedievalSharp', cursive;
}

.elo-self-card span {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.elo-self-card strong {
    color: var(--accent);
    font-size: 1.2rem;
    white-space: nowrap;
}

.elo-self-card small {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-left: auto;
    text-align: right;
}

.elo-panel-header,
.elo-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) 120px 90px;
    align-items: center;
    gap: 12px;
}

.elo-panel-header {
    background-color: #ebdca5;
    border-bottom: 2px solid var(--border);
    color: var(--accent);
    font-family: 'MedievalSharp', cursive;
    font-weight: 800;
    padding: 12px 16px;
}

.elo-leaderboard-list {
    display: flex;
    flex-direction: column;
}

.elo-row {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(92, 64, 51, 0.22);
}

.elo-row.me {
    background-color: rgba(139, 0, 0, 0.06);
}

.elo-player {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.elo-rank {
    flex: 0 0 42px;
    color: var(--accent);
    font-family: 'MedievalSharp', cursive;
    font-weight: 800;
}

.elo-player strong,
.elo-player small,
.elo-score small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.elo-player small,
.elo-score small {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.elo-score strong,
.elo-rate {
    color: var(--accent);
    font-family: 'MedievalSharp', cursive;
    font-size: 1.15rem;
    font-weight: 800;
}

/* Rewards Section */
.rewards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.reward-card {
    background-color: var(--bg-secondary);
    border: 4px double var(--border);
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 4px 4px 0px rgba(92, 64, 51, 0.15);
}

.reward-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.reward-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.reward-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.reward-amount {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--success);
    margin-bottom: 24px;
    background-color: rgba(31, 82, 49, 0.08);
    border: 1.5px solid var(--border);
    padding: 4px 12px;
    border-radius: 4px;
}

/* History logs */
.reward-history {
    background-color: var(--bg-secondary);
    border: 4px double var(--border);
    border-radius: 8px;
    padding: 24px;
    box-shadow: 4px 4px 0px rgba(92, 64, 51, 0.15);
}

.reward-history h3 {
    margin-bottom: 16px;
    color: var(--accent);
}

.history-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 200px;
    overflow-y: auto;
}

.history-list li {
    padding: 12px;
    background-color: transparent;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.history-list li strong {
    color: var(--text-main);
}

/* Coin Shop */
.shop-wallet-card,
.inventory-panel,
.shop-category-block {
    background-color: var(--bg-secondary);
    border: 4px double var(--border);
    border-radius: 8px;
    box-shadow: 4px 4px 0px rgba(92, 64, 51, 0.15);
}

.shop-wallet-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.shop-wallet-card span,
.shop-wallet-card strong {
    display: block;
    font-family: 'MedievalSharp', cursive;
}

.shop-wallet-card strong {
    color: var(--accent);
    font-size: 1.35rem;
}

.shop-wallet-card small {
    color: var(--text-muted);
    text-align: right;
}

.shop-products-grid {
    display: grid;
    gap: 18px;
}

.shop-category-block {
    padding: 18px;
}

.shop-category-block h3 {
    color: var(--accent);
    margin-bottom: 12px;
}

.shop-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.shop-product-card {
    background-color: rgba(92, 64, 51, 0.045);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shop-product-card.owned {
    background-color: rgba(31, 82, 49, 0.08);
}

.shop-product-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: flex-start;
}

.shop-product-head strong {
    color: var(--text-main);
    line-height: 1.15;
}

.shop-product-head span {
    color: var(--warning);
    white-space: nowrap;
    font-family: 'MedievalSharp', cursive;
    font-weight: 800;
}

.shop-product-card p,
.shop-product-meta,
.inventory-row small {
    color: var(--text-muted);
    font-size: 0.86rem;
}

.shop-product-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.inventory-panel {
    margin-top: 18px;
    padding: 18px;
}

.inventory-panel h3 {
    color: var(--accent);
    margin-bottom: 12px;
}

.inventory-list {
    display: grid;
    gap: 8px;
}

.inventory-default-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.inventory-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    background-color: rgba(92, 64, 51, 0.04);
}

.inventory-row.active {
    border-color: var(--success);
    background-color: rgba(31, 82, 49, 0.08);
}

/* Battle Arena Game Loop */
.battle-arena {
    max-width: 600px;
    margin: auto;
    width: 100%;
}

.battle-box {
    background-color: var(--bg-secondary);
    border: 4px double var(--border);
    border-radius: 8px;
    padding: 32px;
    box-shadow: 6px 6px 0px rgba(92, 64, 51, 0.15);
}

.battle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.battle-city {
    display: flex;
    align-items: center;
    gap: 8px;
}

.battle-progress {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
}

.battle-progress-bar {
    width: 100%;
    height: 8px;
    background-color: rgba(92, 64, 51, 0.15);
    border: 1.5px solid var(--border);
    border-radius: 2px;
    margin-bottom: 32px;
    overflow: hidden;
}

.question-timer-wrap {
    margin: -18px 0 28px;
}

.question-timer-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.question-timer-meta strong {
    color: var(--accent);
    font-family: 'MedievalSharp', cursive;
}

.question-timer-bar {
    width: 100%;
    height: 12px;
    background-color: rgba(92, 64, 51, 0.12);
    border: 1.5px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.question-timer-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, var(--success), var(--warning), var(--accent));
    transition: width 0.2s linear;
}

.joker-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: -10px 0 22px;
}

.joker-btn {
    min-width: 0;
    min-height: 64px;
    background-color: #ebdca5;
    border: 2px solid var(--border);
    border-radius: 6px;
    box-shadow: 2px 2px 0 var(--border);
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px;
    text-align: center;
}

.joker-btn strong {
    font-size: 0.78rem;
    line-height: 1.05;
    font-family: 'MedievalSharp', cursive;
}

.joker-btn small {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.joker-btn:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    box-shadow: none;
}

.option-btn.joker-hidden {
    opacity: 0.34;
    filter: grayscale(0.8);
    text-decoration: line-through;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(to right, var(--accent), var(--warning));
    border-radius: 2px;
    transition: width 0.3s ease;
}

.question-container {
    margin-bottom: 32px;
}

.q-category {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent);
    letter-spacing: 0.05em;
    display: inline-block;
    margin-bottom: 8px;
}

.q-text {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-main);
}

.options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.option-btn {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    color: var(--text-main);
    border-radius: 4px;
    padding: 16px 20px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    outline: none;
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 2px 2px 0px var(--border);
    transition: all 0.1s ease;
}

.option-btn:hover {
    border-color: var(--accent);
    background-color: #ebdca5;
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px var(--border);
}

.option-btn .badge {
    background-color: rgba(92, 64, 51, 0.08);
    border: 1px solid var(--border);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.option-btn:hover .badge {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* Feedback panel and overlay */
.feedback-panel, .summary-panel {
    background-color: var(--bg-secondary);
    border: 4px double var(--border);
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    box-shadow: 6px 6px 0px rgba(92, 64, 51, 0.15);
}

.feedback-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feedback-card .icon {
    font-size: 3rem;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.feedback-card .icon.success {
    background-color: rgba(31, 82, 49, 0.08);
    color: var(--success);
    border: 2px solid var(--success);
    box-shadow: none;
}

.feedback-card .icon.error {
    background-color: rgba(139, 0, 0, 0.08);
    color: var(--danger);
    border: 2px solid var(--danger);
    box-shadow: none;
}

.feedback-card h3 {
    font-size: 1.35rem;
    margin-bottom: 8px;
    color: var(--text-main);
    font-family: 'MedievalSharp', cursive !important;
}

.feedback-card p {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 24px;
}

/* Summary Screen */
.summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.summary-card .crown-icon {
    font-size: 3.5rem;
    margin-bottom: 16px;
    animation: bounce 2s infinite ease-in-out;
}

.summary-card h2 {
    font-size: 1.75rem;
    margin-bottom: 24px;
    color: var(--accent);
}

.stats-row {
    display: flex;
    gap: 32px;
    margin-bottom: 24px;
}

.summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.summary-stat .label {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 700;
}

.summary-stat .val {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-main);
    font-family: 'MedievalSharp', cursive !important;
}

.summary-stat .val.positive {
    color: var(--success);
}

.influence-total {
    background-color: rgba(92, 64, 51, 0.06);
    border: 2px solid var(--border);
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 32px;
    color: var(--text-main);
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.05);
}

.influence-total span {
    color: var(--accent);
    font-weight: 800;
}

.elo-total {
    background-color: rgba(139, 0, 0, 0.06);
    border: 2px solid var(--border);
    border-radius: 4px;
    color: var(--text-main);
    font-weight: 800;
    margin-bottom: 24px;
    padding: 12px 16px;
    text-align: center;
}

.elo-total span {
    color: var(--accent);
    display: inline-block;
}

.elo-total span.negative {
    color: var(--danger);
}

.elo-total small {
    color: var(--text-muted);
    display: block;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 5px;
}

/* Ad Simulator Overlay */
.ad-box {
    text-align: center;
    max-width: 400px;
}

.ad-video-sim {
    background-color: #ecdcb9;
    border-radius: 4px;
    height: 220px;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid var(--border);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15);
}

.ad-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(92, 64, 51, 0.2);
    border-top: 3px solid var(--accent);
    border-radius: 50%;
    animation: spin 1s infinite linear;
    margin-bottom: 12px;
}

.ad-sponsor-text {
    position: absolute;
    bottom: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

/* Keyframe Animations */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); filter: drop-shadow(0 0 15px var(--accent-glow)); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive app shell */
@media (max-width: 1180px) {
    .app-header {
        padding: 12px 24px;
    }

    .profile-stats {
        gap: 14px;
    }

    .game-container {
        grid-template-columns: 210px minmax(0, 1fr);
        max-width: 1100px;
    }

    .chat-widget {
        grid-column: 1 / -1;
        height: 360px;
    }
}

@media (max-width: 900px) {
    .app-header {
        gap: 14px;
        flex-wrap: wrap;
    }

    .profile-stats {
        flex: 1 1 100%;
        justify-content: space-between;
        min-width: 0;
    }

    .game-container {
        grid-template-columns: 1fr;
        margin: 20px auto;
        padding: 0 18px;
    }

    .game-tabs {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .tab-btn {
        flex: 0 0 auto;
        min-height: 46px;
        white-space: nowrap;
    }

    .view-header,
    .view-controls {
        align-items: stretch;
        flex-direction: column;
        margin-left: 0;
        width: 100%;
    }

    .view-toggle,
    .search-box input {
        width: 100%;
    }

    .toggle-btn {
        flex: 1;
    }

    .cities-grid,
    .rewards-grid,
    .settings-grid {
        grid-template-columns: 1fr;
    }

    .map-view-wrapper {
        overflow-x: auto;
        padding: 16px;
    }

    .map-container {
        min-width: 640px;
    }

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

    .modal-content {
        max-height: calc(100dvh - 28px);
        overflow-y: auto;
        margin: 14px;
        padding: 22px;
        width: calc(100vw - 28px);
    }
}

@media (max-width: 768px) {
    body {
        padding-bottom: calc(var(--mobile-bottom-nav-height) + 18px + env(safe-area-inset-bottom));
    }

    .app-header {
        position: sticky;
        padding: 10px 12px;
        text-align: left;
    }

    .logo-area {
        flex: 1 1 auto;
        min-width: 0;
        gap: 10px;
    }

    .heraldic-crest {
        width: 36px;
        height: 40px;
    }

    .logo-text {
        font-size: 1.1rem;
    }

    .logo-sub {
        display: none;
    }

    .profile-stats {
        flex: 0 1 auto;
        width: auto;
        margin-left: auto;
        gap: 8px;
    }

    .profile-meta {
        display: none;
    }

    .energy-widget {
        gap: 6px;
        padding: 5px 8px;
    }

    .coin-widget {
        padding: 5px 7px;
        font-size: 0.82rem;
    }

    .energy-bar-bg {
        display: none;
    }

    .energy-label {
        min-width: auto;
        font-size: 0.88rem;
    }

    #audio-mute-btn,
    .btn-logout {
        width: 34px !important;
        height: 34px !important;
        margin-right: 0 !important;
        flex: 0 0 34px;
    }

    #header-avatar-container {
        width: 34px;
        height: 34px;
    }

    .avatar-emoji {
        font-size: 1.1rem;
    }

    .game-container {
        margin: 14px auto 0;
        padding: 0 12px;
        gap: 14px;
    }

    .game-tabs {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 850;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
        overflow: visible;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
        min-height: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom));
        background-color: #ebdca5;
        border-top: 4px double var(--border);
        box-shadow: 0 -4px 18px rgba(92, 64, 51, 0.22);
    }

    .tab-btn {
        justify-content: center;
        min-width: 0;
        min-height: 50px;
        padding: 7px 4px;
        gap: 4px;
        border-radius: 4px;
        font-size: 0.74rem;
        line-height: 1.05;
        text-align: center;
        white-space: normal;
        box-shadow: none;
        flex-direction: column;
    }

    .tab-btn .icon {
        font-size: 1.1rem;
        line-height: 1;
    }

    .shop-wallet-card,
    .inventory-row {
        align-items: stretch;
        flex-direction: column;
    }

    .shop-wallet-card small {
        text-align: left;
    }

    .shop-category-block,
    .inventory-panel {
        padding: 14px;
    }

    .shop-category-grid {
        grid-template-columns: 1fr;
    }

    .joker-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        margin: -6px 0 12px;
    }

    .joker-btn {
        min-height: 50px;
        padding: 5px 3px;
        gap: 1px;
    }

    .joker-btn span {
        font-size: 0.95rem;
        line-height: 1;
    }

    .joker-btn strong {
        font-size: 0.62rem;
        line-height: 1.05;
        overflow-wrap: anywhere;
    }

    .joker-btn small {
        font-size: 0.62rem;
        line-height: 1;
    }

    .tab-content {
        min-height: auto;
        padding-bottom: 8px;
    }

    .view-header {
        gap: 12px;
        margin-bottom: 14px;
    }

    .view-header h2 {
        font-size: 1.28rem;
    }

    .cities-grid {
        gap: 12px;
    }

    .city-card,
    .reward-card,
    .reward-history,
    .battle-box,
    .feedback-panel,
    .summary-panel,
    .settings-card {
        border-width: 3px;
        padding: 16px;
        box-shadow: 3px 3px 0 rgba(92, 64, 51, 0.15);
    }

    .city-card-actions {
        flex-direction: column;
    }

    .btn-sm {
        width: 100%;
        min-height: 42px;
    }

    .map-legend {
        gap: 10px;
        justify-content: flex-start;
    }

    .legend-item {
        font-size: 0.8rem;
    }

    .map-system-note {
        grid-template-columns: 1fr;
        gap: 8px;
        margin: 0 0 16px;
    }

    .map-system-note p {
        font-size: 0.86rem;
        padding: 10px 12px;
    }

    .elo-panel-header {
        display: none;
    }

    .elo-self-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        padding: 10px 12px;
    }

    .elo-self-card small {
        margin-left: 0;
        text-align: left;
    }

    .elo-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
    }

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

    .elo-rank {
        flex-basis: 36px;
    }

    .elo-score,
    .elo-rate {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px dashed rgba(92, 64, 51, 0.25);
        padding-top: 8px;
    }

    .elo-score::before {
        content: "ELO";
        color: var(--text-muted);
        font-family: 'EB Garamond', serif;
        font-size: 0.82rem;
    }

    .elo-rate::before {
        content: "Başarı";
        color: var(--text-muted);
        font-family: 'EB Garamond', serif;
        font-size: 0.82rem;
    }

    .chat-widget {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(var(--mobile-bottom-nav-height) + 10px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        z-index: 820 !important;
        border-radius: 8px !important;
        box-shadow: 0 -4px 20px rgba(92, 64, 51, 0.26) !important;
    }

    .chat-widget.expanded {
        height: min(62dvh, calc(100dvh - var(--mobile-bottom-nav-height) - 96px - env(safe-area-inset-bottom)), 560px) !important;
    }

    .chat-widget.collapsed {
        height: 46px !important;
    }

    .chat-title {
        font-size: 0.86rem;
    }

    .chat-input-area {
        gap: 6px;
        padding: 8px;
    }

    .btn-chat-send {
        padding: 7px 9px;
        font-size: 0.78rem;
    }

    .settings-profile-summary-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding: 16px !important;
    }

    .settings-profile-summary-card .profile-stats-grid,
    .profile-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        min-width: 0 !important;
        width: 100%;
    }

    .avatar-custom-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .stats-row {
        gap: 14px;
        width: 100%;
        justify-content: space-between;
    }

    .q-text {
        font-size: 1.2rem;
    }

    .option-btn {
        min-height: 56px;
        padding: 12px;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .auth-card {
        min-height: 100dvh;
        max-width: none;
        border-left: none;
        border-right: none;
        border-radius: 0;
        padding: 30px 18px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .app-header {
        align-items: center;
        gap: 8px;
    }

    .logo-text {
        font-size: 0.98rem;
    }

    .profile-stats {
        gap: 6px;
    }

    .energy-widget {
        padding: 4px 6px;
    }

    .coin-widget {
        padding: 4px 6px;
    }

    .tab-btn {
        font-size: 0.66rem;
    }

    .game-container {
        padding: 0 10px;
    }

    .view-toggle {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .city-card-header,
    .leaderboard-entry,
    .history-list li {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .modal-content {
        margin: 8px;
        padding: 18px;
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
    }

    .modal-header {
        gap: 12px;
    }

    .profile-stats-grid {
        grid-template-columns: 1fr !important;
    }

    .chat-widget {
        left: 6px !important;
        right: 6px !important;
    }

    #chat-emoji-picker {
        left: 0 !important;
        width: min(220px, calc(100vw - 32px)) !important;
    }
}

/* Interactive Turkey SVG Map Styling */
.view-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.view-toggle {
    display: inline-flex;
    background-color: rgba(92, 64, 51, 0.1);
    border: 1px solid var(--border);
    padding: 2px;
    border-radius: 4px;
}

.toggle-btn {
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle-btn.active {
    background-color: #e3d2b0;
    color: var(--accent);
    border: 1px solid var(--border);
    box-shadow: 1px 1px 0px var(--border);
}

.map-view-wrapper {
    background-color: var(--bg-secondary);
    border: 4px double var(--border);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    box-shadow: 4px 4px 0px rgba(92, 64, 51, 0.15);
}

.map-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
}

.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid var(--border);
}

.legend-dot.me {
    background-color: var(--accent);
    box-shadow: 0 0 4px var(--accent-glow);
}

.legend-dot.other {
    background-color: #1f3a52;
}

.legend-dot.vacant {
    background-color: #ecdcb9;
}

.map-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* SVG Path Interactive Styling */
#svg-turkiye-haritasi {
    width: 100%;
    height: auto;
    filter: sepia(0.35) contrast(1.15) drop-shadow(2px 4px 8px rgba(92, 64, 51, 0.25));
}

#svg-turkiye-haritasi g[id] {
    cursor: pointer;
    outline: none;
}

#svg-turkiye-haritasi path {
    fill: #ecdcb9;
    stroke: #5c4033;
    stroke-width: 1.4;
    stroke-linejoin: round;
    transition: fill 0.2s ease, stroke 0.2s, filter 0.2s;
}

/* Hover styles for the entire group */
#svg-turkiye-haritasi g[id]:hover path {
    stroke: var(--accent);
    stroke-width: 1.8;
    filter: drop-shadow(0 0 4px rgba(139, 0, 0, 0.2));
    z-index: 10;
}

/* Custom classes applied via Javascript dynamically */
#svg-turkiye-haritasi g.owned-by-me path {
    fill: #8b0000 !important; /* Crimson Red seal */
}
#svg-turkiye-haritasi g.owned-by-me:hover path {
    fill: #a61c1c !important;
}

#svg-turkiye-haritasi g.owned-by-other path {
    fill: #1f3a52 !important; /* Deep Blue seal */
}
#svg-turkiye-haritasi g.owned-by-other:hover path {
    fill: #2a5275 !important;
}

#svg-turkiye-haritasi g.map-theme-gold path {
    fill: #b8860b !important;
}

#svg-turkiye-haritasi g.map-theme-gold:hover path {
    fill: #d4af37 !important;
}

#svg-turkiye-haritasi g.map-theme-emerald path {
    fill: #1f5231 !important;
}

#svg-turkiye-haritasi g.map-theme-emerald:hover path {
    fill: #2f7a49 !important;
}

#svg-turkiye-haritasi g.map-theme-navy path {
    fill: #1f3a52 !important;
}

#svg-turkiye-haritasi g.vacant path {
    fill: #ecdcb9 !important;
}
#svg-turkiye-haritasi g.vacant:hover path {
    fill: #d4af37 !important; /* Gold highlight */
}

/* Tooltip */
.map-tooltip {
    position: fixed;
    background-color: #f4ebd0;
    border: 3px double var(--border);
    padding: 12px 18px;
    border-radius: 4px;
    color: var(--text-main);
    pointer-events: none;
    z-index: 9999;
    box-shadow: 4px 4px 0px rgba(92, 64, 51, 0.2);
    backdrop-filter: blur(2px);
    transition: opacity 0.15s ease;
    opacity: 0;
}

.map-tooltip h5 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--accent);
    font-family: 'MedievalSharp', cursive !important;
}

.map-tooltip p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ==========================================
   LIVE CHAT WIDGET (MEDIEVAL MANUSCRIPT)
   ========================================== */
.chat-widget {
    position: relative;
    bottom: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: none;
    background-color: var(--bg-secondary);
    border: 3px double var(--border);
    border-radius: 8px;
    box-shadow: 4px 4px 0px rgba(92, 64, 51, 0.15);
    z-index: 10;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-widget.collapsed {
    height: 44px;
}

.chat-widget.expanded {
    height: calc(100vh - 160px);
}

.chat-header {
    background-color: #ebdca5;
    border-bottom: 2px solid var(--border);
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.chat-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-title {
    font-family: 'MedievalSharp', cursive;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--accent);
}

.chat-toggle-btn {
    background: none;
    border: none;
    font-size: 0.9rem;
    color: var(--text-main);
    cursor: pointer;
    transition: transform 0.2s ease;
    padding: 4px;
    line-height: 1;
}

.chat-widget.expanded .chat-toggle-btn {
    transform: rotate(180deg);
}

.chat-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: calc(100% - 44px);
    background-color: rgba(244, 235, 208, 0.5);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-bubble {
    background-color: rgba(92, 64, 51, 0.05);
    border: 1px solid rgba(92, 64, 51, 0.15);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 0.9rem;
    line-height: 1.3;
    word-break: break-word;
    font-family: 'EB Garamond', serif;
    position: relative;
    box-shadow: 1px 1px 2px rgba(92, 64, 51, 0.05);
}

.chat-bubble.me {
    background-color: rgba(139, 0, 0, 0.04);
    border-left: 3px solid var(--accent);
}

.chat-bubble-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.chat-bubble-user {
    font-weight: 700;
    color: var(--accent);
    font-family: 'MedievalSharp', cursive;
}

.chat-bubble-time {
    color: #8c7664;
}

.chat-bubble-content {
    color: var(--text-main);
}

.chat-input-area {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1.5px solid var(--border);
    background-color: #ebdca5;
    box-sizing: border-box;
}

.chat-input-area input {
    flex: 1;
    min-width: 0;
    border: 1.5px solid var(--border);
    background-color: var(--bg-secondary);
    padding: 6px 8px;
    border-radius: 4px;
    font-family: 'EB Garamond', serif;
    font-size: 0.95rem;
    outline: none;
    color: var(--text-main);
    box-sizing: border-box;
}

.btn-chat-send {
    flex-shrink: 0;
    white-space: nowrap;
    box-sizing: border-box;
    background-color: var(--accent);
    border: 1.5px solid var(--border);
    color: white;
    font-family: 'MedievalSharp', cursive;
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--border);
    transition: all 0.1s;
}

.btn-chat-send:hover {
    background-color: #a61c1c;
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--border);
}

/* ==========================================
   AVATARS & FRAMES CUSTOMIZATION STYLES
   ========================================== */
.avatar-frame {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 2px 2px 0px var(--border);
    transition: all 0.2s;
    background-color: #ebdca5;
    flex-shrink: 0;
}

.avatar-emoji {
    font-size: 1.45rem;
    z-index: 2;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

/* Wood frame styling */
.avatar-frame.wooden {
    border: 3px solid #8b5a2b;
    background-color: #ebdca5;
}
.avatar-frame.wooden::after {
    content: "";
    position: absolute;
    top: 1px; left: 1px; right: 1px; bottom: 1px;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    pointer-events: none;
}

/* Iron frame styling */
.avatar-frame.iron {
    border: 3px solid #555555;
    background-color: #d3d3d3;
}
.avatar-frame.iron::after {
    content: "";
    position: absolute;
    top: 1px; left: 1px; right: 1px; bottom: 1px;
    border: 1.5px solid #222222;
    border-radius: 50%;
    pointer-events: none;
}

/* Gold frame styling */
.avatar-frame.gold {
    border: 3px solid #ffd700;
    background-color: #fff8dc;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.6), 2px 2px 0px var(--border);
}
.avatar-frame.gold::after {
    content: "";
    position: absolute;
    top: 1px; left: 1px; right: 1px; bottom: 1px;
    border: 1px solid #b8860b;
    border-radius: 50%;
    pointer-events: none;
}

/* Ruby frame styling */
.avatar-frame.ruby {
    border: 3px solid #8b0000;
    background-color: #ffe4e1;
    box-shadow: 0 0 8px rgba(139, 0, 0, 0.5), 2px 2px 0px var(--border);
}
.avatar-frame.ruby::after {
    content: "";
    position: absolute;
    top: 1px; left: 1px; right: 1px; bottom: 1px;
    border: 1.5px solid #ff4500;
    border-radius: 50%;
    pointer-events: none;
}

/* Settings Tab Styling */
.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

.settings-card {
    background-color: var(--bg-secondary);
    border: 3px double var(--border);
    padding: 24px;
    border-radius: 6px;
    box-shadow: 3px 3px 0 var(--border);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-card h3 {
    font-family: 'MedievalSharp', cursive;
    color: var(--accent);
    font-size: 1.25rem;
    margin: 0;
    border-bottom: 2px dashed rgba(92, 64, 51, 0.2);
    padding-bottom: 8px;
}

.settings-help {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
}

.avatar-custom-wrapper {
    display: flex;
    gap: 20px;
    align-items: center;
    background-color: rgba(92, 64, 51, 0.04);
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.avatar-preview-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 100px;
}

.avatar-preview-box .preview-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.custom-selectors {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.selector-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.selector-group label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
}

.avatar-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.avatar-opt-btn {
    background-color: #ebdca5;
    border: 1.5px solid var(--border);
    font-size: 1.3rem;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.1s;
}

.avatar-opt-btn:hover, .avatar-opt-btn.active {
    background-color: var(--accent);
    color: white;
    transform: scale(1.1);
    box-shadow: 1px 1px 0 var(--border);
}

.frame-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.frame-opt-btn {
    background-color: #ebdca5;
    border: 1.5px solid var(--border);
    font-family: 'MedievalSharp', cursive;
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.1s;
}

.frame-opt-btn:hover, .frame-opt-btn.active {
    background-color: var(--accent);
    color: white;
    box-shadow: 1px 1px 0 var(--border);
}

.frame-opt-btn.locked,
.frame-opt-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.35);
    box-shadow: none;
}

.frame-opt-btn.locked:hover,
.frame-opt-btn:disabled:hover {
    background-color: #ebdca5;
    color: var(--text-main);
    transform: none;
}

.password-status-section {
    font-family: 'EB Garamond', serif;
    font-size: 0.95rem;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--border);
}

.password-status-section.secured {
    background-color: rgba(34, 139, 34, 0.08);
    border-color: #228b22;
    color: #228b22;
}

.password-status-section.guest {
    background-color: rgba(139, 0, 0, 0.06);
    border-color: var(--accent);
    color: var(--accent);
}

.auth-toggle-link-wrap {
    text-align: center;
    margin-top: 16px;
    width: 100%;
}

.auth-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 10px 20px;
    border-radius: 4px;
    border: 2px solid var(--border);
    font-size: 1.05rem;
    font-weight: 700;
    font-family: 'MedievalSharp', cursive !important;
    cursor: pointer;
    background-color: #f4ebd0;
    color: var(--text-main);
    box-shadow: 3px 3px 0px var(--border);
    text-decoration: none;
}

.auth-mode-toggle:hover {
    background-color: #ebdca5;
    color: var(--accent);
    text-decoration: none;
}

/* Chat bubble with avatar layout */
.chat-bubble-user-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-bubble-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border: 1.5px solid #8b5a2b;
}

.chat-bubble-avatar.wooden { border-color: #8b5a2b; background-color: #ebdca5; }
.chat-bubble-avatar.iron { border-color: #555555; background-color: #d3d3d3; }
.chat-bubble-avatar.gold { border-color: #ffd700; background-color: #fff8dc; }
.chat-bubble-avatar.ruby { border-color: #8b0000; background-color: #ffe4e1; }

.name-color-default { color: inherit !important; }
.name-color-crimson { color: #8b0000 !important; }
.name-color-royal { color: #b8860b !important; text-shadow: 0 0 3px rgba(184, 134, 11, 0.25); }
.name-color-forest { color: #1f5231 !important; }
.name-color-violet { color: #5b3aa4 !important; }

.chat-bubble.chat-style-gold {
    border-left: 3px solid #b8860b;
    background-color: rgba(184, 134, 11, 0.08);
}

.chat-bubble.chat-style-crimson {
    border-left: 3px solid var(--accent);
    background-color: rgba(139, 0, 0, 0.07);
}

.profile-card.profile-theme-royal {
    background: linear-gradient(135deg, #f4ebd0 0%, #fff4c7 100%) !important;
}

.profile-stats.profile-theme-royal,
.settings-profile-summary-card.profile-theme-royal {
    background: linear-gradient(135deg, #f4ebd0 0%, #fff4c7 100%) !important;
}

.profile-card.profile-theme-emerald {
    background: linear-gradient(135deg, #f4ebd0 0%, #dcefd9 100%) !important;
}

.profile-stats.profile-theme-emerald,
.settings-profile-summary-card.profile-theme-emerald {
    background: linear-gradient(135deg, #f4ebd0 0%, #dcefd9 100%) !important;
}

.profile-card.profile-theme-midnight {
    background: linear-gradient(135deg, #f4ebd0 0%, #d9dfef 100%) !important;
}

.profile-stats.profile-theme-midnight,
.settings-profile-summary-card.profile-theme-midnight {
    background: linear-gradient(135deg, #f4ebd0 0%, #d9dfef 100%) !important;
}

.clickable-reporter {
    cursor: pointer;
    text-decoration: underline dotted;
    transition: color 0.15s ease;
}

.clickable-reporter:hover {
    color: var(--accent);
}

/* Custom avatar image styling inside frames */
.chat-bubble-avatar img,
.avatar-frame img,
.profile-avatar-container img,
#profile-card-avatar-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.profile-stats-grid .stat-box {
    background-color: rgba(92, 64, 51, 0.05);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.profile-stats-grid .stat-box:hover {
    transform: translateY(-2px);
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.05), 2px 2px 0px rgba(92, 64, 51, 0.15);
}

/* Clickable Header profile header widget styling */
.user-profile-header {
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.user-profile-header:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

/* Chat Emoji Hover Effects */
#chat-emoji-btn:hover {
    transform: scale(1.15);
}

.emoji-picker-item {
    transition: transform 0.1s ease, background-color 0.1s ease;
    border-radius: 4px;
    padding: 2px 0;
}
.emoji-picker-item:hover {
    transform: scale(1.3);
    background-color: rgba(92, 64, 51, 0.1);
}

/* Animated Premium Username Styling */
.username-premium {
    font-weight: bold !important;
    background: linear-gradient(90deg, #b8860b, #ffd700, #ff8c00, #ffd700, #b8860b);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: premium-glow 3s linear infinite;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.2);
    display: inline-block;
    position: relative;
}

.username-premium::after {
    content: "👑";
    font-size: 0.75rem;
    margin-left: 4px;
    vertical-align: middle;
    filter: drop-shadow(0px 0px 2px rgba(255, 215, 0, 0.8));
    display: inline-block;
    animation: premium-crown-float 1.5s ease-in-out infinite alternate;
}

@keyframes premium-glow {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
}

@keyframes premium-crown-float {
    0% { transform: translateY(0); }
    100% { transform: translateY(-2px); }
}

/* Dynamic Weather Badges styling */
.city-weather-badge, .modal-weather-badge {
    transition: all 0.25s ease;
}

.weather-clear {
    background-color: rgba(255, 193, 7, 0.1) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
    color: #ffc107 !important;
}

.weather-rainy {
    background-color: rgba(33, 150, 243, 0.1) !important;
    border-color: rgba(33, 150, 243, 0.3) !important;
    color: #2196f3 !important;
}

.weather-snowy {
    background-color: rgba(0, 188, 212, 0.15) !important;
    border-color: rgba(0, 188, 212, 0.4) !important;
    color: #00bcd4 !important;
    animation: snow-pulse 2s infinite alternate;
}

.weather-heatwave {
    background-color: rgba(244, 67, 54, 0.15) !important;
    border-color: rgba(244, 67, 54, 0.4) !important;
    color: #f44336 !important;
    animation: heat-pulse 2s infinite alternate;
}

.weather-foggy {
    background-color: rgba(158, 158, 158, 0.15) !important;
    border-color: rgba(158, 158, 158, 0.3) !important;
    color: #cfcfcf !important;
}

.modal-weather-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    border: 1px solid var(--border);
    margin-top: 8px;
}

@keyframes snow-pulse {
    0% { box-shadow: 0 0 2px rgba(0, 188, 212, 0.2); }
    100% { box-shadow: 0 0 8px rgba(0, 188, 212, 0.5); }
}

@keyframes heat-pulse {
    0% { box-shadow: 0 0 2px rgba(244, 67, 54, 0.2); }
    100% { box-shadow: 0 0 8px rgba(244, 67, 54, 0.5); }
}

/* SVG Weather border coloring */
#svg-turkiye-haritasi g.weather-snowy path {
    stroke: #00bcd4 !important;
    stroke-width: 2.2 !important;
}
#svg-turkiye-haritasi g.weather-heatwave path {
    stroke: #f44336 !important;
    stroke-width: 2.2 !important;
}
#svg-turkiye-haritasi g.weather-rainy path {
    stroke: #2196f3 !important;
    stroke-width: 1.8 !important;
}
#svg-turkiye-haritasi g.weather-foggy path {
    stroke: #9e9e9e !important;
    stroke-width: 1.8 !important;
}

/* Mobile map fit overrides */
@media (max-width: 768px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .view-controls,
    .search-box,
    .search-box input,
    .view-toggle {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .search-box input {
        display: block;
    }

    .map-view-wrapper {
        overflow: hidden !important;
        padding: 12px 8px 14px;
        width: 100%;
    }

    .map-container {
        min-width: 0 !important;
        width: 100% !important;
        overflow: visible;
    }

    #svg-turkiye-haritasi {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto;
    }

    .map-legend {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin-bottom: 12px;
        width: 100%;
    }

    .legend-item {
        justify-content: center;
        gap: 5px;
        min-width: 0;
        font-size: 0.72rem;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
    }

    .legend-dot {
        flex: 0 0 10px;
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 420px) {
    .map-view-wrapper {
        padding-left: 6px;
        padding-right: 6px;
    }

    .map-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile profile/report modal fit */
@media (max-width: 768px) {
    #account-setup-modal,
    #profile-modal,
    #report-modal {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 10px calc(122px + env(safe-area-inset-bottom)) !important;
    }

    #account-setup-modal .account-setup-card,
    #profile-modal .profile-card,
    #report-modal .modal-content {
        width: 100% !important;
        max-width: none !important;
        max-height: calc(100dvh - 146px - env(safe-area-inset-bottom)) !important;
        margin: 0 !important;
        padding: 18px 14px 0 !important;
        border-radius: 12px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #account-setup-modal .modal-header,
    #profile-modal .modal-header,
    #report-modal .modal-header {
        position: sticky;
        top: -18px;
        z-index: 2;
        align-items: center;
        margin: -18px -14px 12px;
        padding: 14px;
        background-color: #f4ebd0;
        border-bottom: 2px solid var(--border);
    }

    #account-setup-modal .modal-header h3,
    #profile-modal .modal-header h3,
    #report-modal .modal-header h3 {
        font-size: 1.1rem;
        line-height: 1.2;
    }

    #account-setup-modal .modal-body,
    #profile-modal .modal-body,
    #report-modal .modal-body {
        width: 100% !important;
        min-width: 0 !important;
        padding-top: 6px !important;
        flex: 1 1 auto !important;
    }

    .account-setup-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        flex-shrink: 0 !important;
        padding-bottom: 12px !important;
    }

    #profile-modal .profile-avatar-container {
        margin-bottom: 10px !important;
    }

    #profile-card-avatar-frame {
        width: 64px !important;
        height: 64px !important;
        font-size: 1.8rem !important;
    }

    #profile-card-username {
        max-width: 100% !important;
        font-size: 1.24rem !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #profile-card-role {
        margin-bottom: 12px !important;
    }

    #profile-modal .profile-stats-grid {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    #profile-modal .profile-stats-grid .stat-box {
        min-width: 0 !important;
        padding: 9px !important;
    }

    #profile-modal .profile-stats-grid .stat-box span,
    #profile-modal .profile-stats-grid .stat-box strong {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #profile-modal .profile-stats-grid .stat-box strong {
        display: block;
        font-size: 0.98rem !important;
        line-height: 1.15;
    }

    #profile-modal .modal-footer,
    #report-modal .modal-footer {
        position: sticky;
        bottom: 0;
        z-index: 2;
        width: 100% !important;
        margin: 4px -14px 0 !important;
        padding: 12px 14px calc(14px + env(safe-area-inset-bottom)) !important;
        background-color: #f4ebd0;
        border-top: 1.5px dashed var(--border) !important;
    }

    #profile-card-report-btn,
    #btn-submit-report,
    #btn-cancel-report {
        min-height: 44px !important;
        height: auto !important;
        white-space: normal;
        line-height: 1.15;
    }

    #report-modal .modal-footer {
        justify-content: stretch !important;
        gap: 8px !important;
    }

    #report-modal .modal-footer .btn {
        flex: 1 1 0;
        width: auto !important;
    }

    #report-modal select,
    #report-modal textarea {
        max-width: 100% !important;
    }
}

@media (max-width: 380px) {
    #profile-modal .profile-stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   🏰 AAA JUICY GAME FEEL & MICRO-INTERACTION STYLES
   ========================================================================== */

/* 1. Springy transitions for all interactive elements */
.btn, 
.option-btn, 
.tab-btn, 
.city-card,
.btn-logout,
.avatar-opt-btn,
.frame-opt-btn,
.clickable-reporter,
.stat-box,
.emoji-picker-item,
.auth-mode-toggle {
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                background-color 0.2s ease, 
                border-color 0.2s ease,
                filter 0.2s ease !important;
}

/* 2. Juicy Hover Spring-Up effects */
.btn:hover, 
.tab-btn:hover,
.btn-logout:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 5px 5px 0px var(--border) !important;
}

.option-btn:hover {
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow: 4px 4px 0px var(--border) !important;
}

.city-card:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 8px 8px 0px rgba(92, 64, 51, 0.25) !important;
}

/* 3. Active Tactile Clicking Overrides (pressed feel) */
.btn:active, 
.option-btn:active, 
.tab-btn:active, 
.btn-logout:active,
.city-card:active {
    transform: translateY(2px) scale(0.97) !important;
    box-shadow: 1px 1px 0px var(--border) !important;
}

/* 4. Turkey Map Interactive Province Scale-Up (using modern transform metrics) */
#svg-turkiye-haritasi g[id] path {
    transform-origin: center;
    transform-box: fill-box;
    transition: transform 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                fill 0.25s ease, 
                stroke 0.25s ease, 
                filter 0.25s ease !important;
}

#svg-turkiye-haritasi g[id]:hover path {
    transform: scale(1.03);
    stroke: var(--accent) !important;
    stroke-width: 2.2 !important;
    filter: drop-shadow(0px 6px 12px rgba(139, 0, 0, 0.45)) !important;
    z-index: 999;
}

/* 5. Correct & Incorrect Answer Juicy Styles */
.option-btn.correct {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
    color: white !important;
    box-shadow: 0 0 16px var(--success-glow) !important;
    animation: juicySuccessPulse 0.4s ease-in-out !important;
}

.option-btn.correct .badge {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.option-btn.incorrect {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    color: white !important;
    box-shadow: 0 0 16px var(--danger-glow) !important;
    animation: juicyShake 0.4s ease-in-out !important;
}

.option-btn.incorrect .badge {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* 6. View & Modal Pop-In spring animation */
.modal-content, 
.feedback-panel, 
.summary-panel,
.auth-card {
    animation: juicyPopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

@keyframes juicyPopIn {
    0% {
        opacity: 0;
        transform: scale(0.88) translateY(12px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 7. Keyframe animations */
@keyframes juicyShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px) rotate(-1deg); }
    40%, 80% { transform: translateX(8px) rotate(1deg); }
}

@keyframes juicySuccessPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.04);
    }
    100% {
        transform: scale(1);
    }
}