/* style.css - KOZALAK LUDO ANA TASARIM DOSYASI (GÜNCEL & MODERN FİNAL) */

:root{--board-bg:#fff;--board-size:min(100vw - 20px,100vh - 160px,750px);--cell:calc(var(--board-size)/15);--red:#fc4d4a;--light-red:#ffdcdb;--blue:#1eb1ff;--light-blue:#cceeff;--green:#25c962;--light-green:#d1f5de;--yellow:#facb15;--light-yellow:#fef1b8;--center-bg:transparent;--board-lines:#f0f0f5;--bg:#f5f5f7;--text-main:#1d1d1f;--text-secondary:#86868b;--apple-blue:#007aff;--card-bg:rgba(255,255,255,.85);--move-dur:.35s;--timer-bg:rgba(0,0,0,0.08)}
body{margin:0;background:var(--bg);color:var(--text-main);font-family:-apple-system,BlinkMacSystemFont,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100dvh;overflow-x:hidden;padding:20px 0 0;box-sizing:border-box;-webkit-font-smoothing:antialiased;user-select:none;touch-action:manipulation;overscroll-behavior-y:contain;transition:background .3s}
#menu,#settings-menu,#store-menu,#victory-modal,#about-menu,#history-menu,#icon-picker-modal,#local-setup-menu,#profile-menu,#notification-menu,#quest-menu{position:fixed;inset:0;background:rgba(245,245,247,.6);z-index:2000;justify-content:center;align-items:center;backdrop-filter:blur(20px);display:none}
#menu{display:flex;align-items:flex-start;padding-top:max(20px,env(safe-area-inset-top))}
#settings-menu,#store-menu,#history-menu,#about-menu,#profile-menu,#notification-menu,#quest-menu{background:rgba(245,245,247,.85);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);flex-direction:column;justify-content:flex-start;align-items:stretch;padding:0}
#victory-modal{z-index:3000;background:rgba(245,245,247,.7);animation:fadeIn .4s ease forwards}
#icon-picker-modal{z-index:3500;background:rgba(0,0,0,.4)}

/* --- Altın Oran Pencere Genişlikleri (Fluid Design) --- */
.modal-header, .profile-tabs, .modal-body, .card {
    width: 100%;
    max-width: min(90vw, 420px);
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
.modal-header {
    background: rgba(255,255,255,.8);
    margin-top: max(15px,env(safe-area-inset-top));
    margin-bottom: 15px;
    border-radius: 20px;
    padding: 8px 12px 8px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 8px 20px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.5);
    position: sticky;
    top: max(15px,env(safe-area-inset-top));
    z-index: 100;
    backdrop-filter: saturate(200%) blur(40px);
    -webkit-backdrop-filter: saturate(200%) blur(40px);
}
.modal-header h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; position: relative; }
.card {
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    padding: 35px 25px;
    border-radius: 36px;
    text-align: center;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0,0,0,.15), inset 0 0 0 1px rgba(255,255,255,.5);
    border: 1px solid rgba(255,255,255,.8);
    transition: all .3s;
    will-change: transform, opacity;
    animation: cardPopIn .6s cubic-bezier(.34,1.56,.64,1) forwards;
}

.modern-section{background:rgba(255,255,255,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:20px;padding:0 15px;margin-bottom:20px;border:1px solid rgba(255,255,255,.8);box-shadow:0 8px 20px rgba(0,0,0,.03)}
.modern-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid rgba(0,0,0,.05)}
.modern-row:last-child{border-bottom:none}
.section-title{font-size:12px;font-weight:800;color:var(--text-secondary);margin:0 0 10px 5px;letter-spacing:1px;text-transform:uppercase}

@keyframes cardPopIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.card h1{margin:0 0 5px;font-size:28px;font-weight:800;letter-spacing:-.5px}
.card h3{margin:0 0 20px;font-size:20px;font-weight:600;color:var(--text-secondary)}
.menu-header{display:flex;flex-direction:column;align-items:center;margin-bottom:20px}
.menu-logo{font-size:54px;margin-bottom:5px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}
.id-badge{background:#e5e5ea;color:var(--text-secondary);padding:6px 16px;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:.5px;margin-top:8px;border:1px solid #d1d1d6;font-family:monospace}
.id-badge::after{content:'\2398';margin-left:5px;font-size:13px;vertical-align:-1px;opacity:.6}
.divider{height:1px;background:rgba(0,0,0,.05);margin:25px 0;position:relative}
.divider::after{content:attr(data-label);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.8);padding:0 10px;font-size:12px;color:var(--text-secondary);font-weight:600;border-radius:10px}
.top-actions-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:25px}
.player-stat{padding:8px 12px;border-radius:8px;display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.1rem;border:1px solid transparent;color:var(--text-main);margin-right:auto}
.player-stat>span{color:var(--apple-blue)}
.player-stat svg{color:var(--apple-blue);width:1.3rem;height:1.3rem}
@keyframes flipAndShine{0%,100%{transform:rotateY(0) scale(1);filter:drop-shadow(0 0 2px var(--apple-blue))}50%{transform:rotateY(360deg) scale(1.1);filter:drop-shadow(0 0 10px var(--apple-blue))}}
.lucide-diamond{animation:flipAndShine 9s linear infinite}
.k-btn{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;color:var(--text-main);cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.05);transition:all .3s;position:relative}
.notification-badge{position:absolute;top:-2px;right:-2px;width:16px;height:16px;background:var(--red);color:#fff;border-radius:50%;border:2px solid #fff;font-size:9px;font-weight:bold;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(252,77,74,.4);animation:pulse-badge 2s infinite}
@keyframes pulse-badge{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(252,77,74,.7)}70%{transform:scale(1);box-shadow:0 0 0 6px rgba(252,77,74,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(252,77,74,0)}}
.custom-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:5000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);animation:fadeIn .3s ease;padding:20px}
.custom-modal-box{background:rgba(255,255,255,.85);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.6);border-radius:24px;padding:25px;width:100%;max-width:340px;box-shadow:0 20px 40px rgba(0,0,0,.15);text-align:center;transform:scale(.9);will-change: transform, opacity; animation:popIn .3s cubic-bezier(.34,1.56,.64,1) forwards}
.custom-modal-title{font-size:20px;font-weight:800;color:var(--text-main);margin:0 0 10px;display:flex;align-items:center;justify-content:center;gap:8px}
.custom-modal-text{font-size:14px;color:var(--text-secondary);line-height:1.5;margin:0 0 20px}
.custom-modal-text b{color:var(--text-main)}
.custom-modal-buttons{display:flex;gap:10px;justify-content:center}
.custom-modal-btn{flex:1;padding:12px;border-radius:16px;font-size:14px;font-weight:700;cursor:pointer;border:none;transition:all .2s}
.custom-modal-btn.cancel{background:rgba(0,0,0,.05);color:var(--text-main)}
.custom-modal-btn.confirm{background:var(--apple-blue);color:#fff;box-shadow:0 4px 15px rgba(0,122,255,.3)}
.item-locked{filter:grayscale(1);opacity:.7}
.price-tag{display:flex;align-items:center;justify-content:center;gap:4px;background:rgba(0,0,0,.65);color:#fff;padding:3px 8px;border-radius:12px;font-size:10px;margin-top:6px;box-shadow:0 2px 5px rgba(0,0,0,.2);pointer-events:none}
.price-tag svg{width:12px;height:12px;color:#48dbfb}
.floating-coin{position:fixed;color:var(--apple-blue);font-weight:800;font-size:18px;display:flex;align-items:center;gap:4px;animation:floatUp 1.2s cubic-bezier(.34,1.56,.64,1) forwards;z-index:5000;text-shadow:0 2px 5px rgba(0,0,0,.2);pointer-events:none; will-change: transform, opacity;}
@keyframes floatUp{0%{transform:translateY(0) scale(.5);opacity:0}20%{transform:translateY(-10px) scale(1.2);opacity:1}100%{transform:translateY(-50px) scale(1);opacity:0}}
.history-modern-card{background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.8);border-radius:20px;padding:15px;margin-bottom:15px;box-shadow:0 8px 20px rgba(0,0,0,.03);transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.history-m-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px dashed rgba(0,0,0,.08);margin-bottom:12px}
.history-m-winner{display:flex;align-items:center;gap:12px}
.history-m-avatar{width:44px;height:44px;border-radius:14px;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.1);font-size:24px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.history-m-title{font-size:10px;font-weight:800;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;text-align:left}
.history-m-name{font-size:16px;font-weight:800;color:var(--text-main);line-height:1;text-align:left}
.history-m-meta{text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.history-m-mode{font-size:10px;font-weight:800;background:rgba(0,0,0,.05);padding:4px 8px;border-radius:8px;color:var(--text-main);display:inline-block}
.history-m-date{font-size:10px;font-weight:600;color:var(--text-secondary)}
.history-m-stats{background:rgba(255,255,255,.5);border-radius:12px;padding:10px}
.history-stat-row{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:6px;padding:6px 10px;background:rgba(255,255,255,.7);border-radius:8px;border:1px solid rgba(0,0,0,.02)}
.history-stat-row:last-child{margin-bottom:0}

.action-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}
.action-btn{flex:1;padding:10px 4px;background:rgba(255,255,255,.5);border-radius:16px;border:1px solid rgba(255,255,255,.6);font-size:11px;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 4px 15px rgba(0,0,0,.03)}
.action-btn span{font-size:18px}
.menu-btn{display:block;width:100%;padding:16px;margin:10px 0;cursor:pointer;border-radius:20px;border:1px solid rgba(255,255,255,.4);background:rgba(229,229,234,.7);backdrop-filter:blur(10px);color:var(--text-main);font-size:16px;font-weight:700;letter-spacing:.5px;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-sizing:border-box;box-shadow:0 8px 20px rgba(0,0,0,.06)}
.menu-btn.primary{background:linear-gradient(135deg,var(--apple-blue),#005bb5);border:none;color:#fff;box-shadow:0 8px 25px rgba(0,122,255,.3)}
.credits{margin-top:25px;font-size:11px;color:#a1a1a6;line-height:1.5;font-weight:500}
.count-btn{width:54px;height:54px;border-radius:50%;border:2px solid var(--text-secondary);background:transparent;font-size:20px;font-weight:800;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);color:var(--text-secondary);display:flex;align-items:center;justify-content:center}
.count-btn.active{background:var(--text-main);color:var(--bg);border-color:var(--text-main);transform:scale(1.1);box-shadow:0 4px 15px rgba(0,0,0,.1)}
.setup-card{border:2px solid;border-radius:20px;padding:12px 15px;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.6);backdrop-filter:blur(10px);transition:all .3s;position:relative;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.03)}
.setup-card::after{content:'';position:absolute;inset:0;background:currentColor;opacity:.05;z-index:0;pointer-events:none}
.setup-card>*{position:relative;z-index:1}
.setup-card.disabled{opacity:.4;filter:grayscale(1);pointer-events:none;border-color:var(--board-lines)!important;color:var(--text-secondary)!important;background:var(--bg)}
.setup-card.disabled::after{display:none}

/* --- YENİ MODERN ZAFER MODALI EKRANI (FİNİŞ EKRANI) --- */
#victory-modal {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5);
}

#v-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    border-radius:36px;
    width:100%;
    max-width:400px;
    max-height:90vh;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    transform:scale(.9);
    opacity:0;
    animation:vPopIn .6s cubic-bezier(.34,1.56,.64,1) forwards;
    will-change: transform, opacity;
}

@keyframes vPopIn{to{transform:scale(1);opacity:1}}
.v-header{position:relative;padding:45px 20px 20px;display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,transparent 100%)}
.v-glow{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);width:160px;height:160px;border-radius:50%;filter:blur(45px);opacity:.65;z-index:0;animation:vGlowPulse 2.5s infinite alternate ease-in-out;pointer-events:none}
@keyframes vGlowPulse{from{transform:translate(-50%,-50%) scale(.8);opacity:.4}to{transform:translate(-50%,-50%) scale(1.2);opacity:.8}}
.v-avatar{position:relative;z-index:1;font-size:60px;width:110px;height:110px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:50%;box-shadow:0 12px 30px rgba(0,0,0,.15),inset 0 -4px 12px rgba(0,0,0,.05);border:4px solid #fff;animation:vFloat 3.5s ease-in-out infinite;overflow:hidden;}
@keyframes vFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.v-badge{position:relative;z-index:2;margin-top:-14px;background:#1d1d1f;color:#fff;font-size:11px;font-weight:800;padding:6px 18px;border-radius:20px;letter-spacing:1px;text-transform:uppercase;box-shadow:0 6px 15px rgba(0,0,0,.2);border:2px solid #fff}
.v-body{padding:15px 25px 20px;text-align:center;position:relative;z-index:1}
.v-name{margin:0;font-size:30px;font-weight:800;letter-spacing:-1px;color:var(--text-main);line-height:1.1}
.v-subtitle{margin:6px 0 22px;font-size:15px;font-weight:600;color:var(--text-secondary)}
.v-actions{display:flex;gap:15px;justify-content:center;margin-bottom:25px;padding:0 25px}
.v-btn-icon{width:54px;height:54px;border-radius:18px;background:#fff;border:1px solid rgba(0,0,0,.03);color:var(--c);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 8px 20px rgba(0,0,0,.06)}
.v-footer{padding:0 25px 25px;display:flex;flex-direction:column;gap:10px}
.v-btn{margin:0!important;height:54px;border-radius:20px!important;font-size:16px!important;box-shadow:0 8px 20px rgba(0,122,255,.2)}
.v-btn-alt{margin:0!important;height:54px;border-radius:20px!important;background:rgba(0,0,0,.04)!important;color:var(--text-main)!important;font-size:15px!important;box-shadow:none;border:1px solid transparent}

#victory-stats {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 20px;
    height: auto !important; 
    overflow: visible !important; 
}

.v-modern-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v-summary-header {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-muted, #86868b);
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.v-kills-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v-kill-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.v-kill-icon { font-size: 14px; }
.v-v-text { color: var(--text-secondary); font-weight: 600; font-size: 11px; }
.v-k-count { margin-left: auto; color: var(--text-secondary); font-weight: 800; }

.v-friendly-game {
    text-align: center;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    padding: 15px 0;
}
.v-friendly-game span { font-size: 24px; margin-bottom: 5px; display: block; }

.v-rewards-banner {
    border-radius: 10px;
    border: 1px solid;
    padding: 10px;
    font-weight: 800;
    font-size: 13px;
    text-align: center;
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.v-rewards-banner span:first-child { font-size: 18px; }

#stats-menu{position:fixed;top:max(20px,env(safe-area-inset-top));left:50%;width:100%;max-width:min(90vw, 420px);background:rgba(255,255,255,.85);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.6);border-radius:24px;padding:16px;box-shadow:0 15px 40px rgba(0,0,0,.15);z-index:4000;display:none;flex-direction:column;box-sizing:border-box}
@keyframes slideDown{from{transform:translate(-50%,-150%);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes slideUp{from{transform:translate(-50%,0);opacity:1}to{transform:translate(-50%,-150%);opacity:0}}

/* --- Tema Destekleri --- */
body.dark-theme #stats-menu{background:rgba(28,28,30,.85);border-color:rgba(255,255,255,.1);box-shadow:0 15px 40px rgba(0,0,0,.5)}
body.dark-theme{--bg:#1c1c1e;--text-main:#f5f5f7;--text-secondary:#a1a1a6;--card-bg:rgba(28,28,30,.85);--center-bg:#2c2c2e;--board-bg:#2c2c2e;--board-lines:#38383a;--timer-bg:rgba(255,255,255,0.1)}
body.dark-theme .menu-btn{background:rgba(44,44,46,.7);border-color:#38383a;color:#f5f5f7}
body.dark-theme .glass-dock{background:rgba(44,44,46,.85);border-color:#38383a}
body.dark-theme .menu-icon-btn{background:#2c2c2e;border-color:#38383a}
body.dark-theme .player-avatar{background:#1c1c1e}
body.dark-theme .action-btn{background:rgba(44,44,46,.5);border-color:#38383a}
body.dark-theme .id-badge{background:#2c2c2e;border-color:#38383a}
body.dark-theme input[type="text"],body.dark-theme select{background:#1c1c1e!important;color:#f5f5f7!important;border-color:#38383a!important}
body.dark-theme .preview-container{background:#1c1c1e!important;border-color:#38383a!important}
body.dark-theme .icon-grid-btn{background:#2c2c2e;border-color:#38383a}
body.dark-theme .icon-grid-btn.selected{background:#38383a}
body.dark-theme .icon-grid-btn.disabled{background:#1c1c1e}
body.dark-theme .toggle-switch{background:#38383a}
body.dark-theme .toggle-switch:checked{background:var(--apple-blue)}
body.dark-theme .card,body.dark-theme #settings-menu,body.dark-theme #store-menu,body.dark-theme #history-menu,body.dark-theme #about-menu,body.dark-theme #profile-menu,body.dark-theme #notification-menu,body.dark-theme #quest-menu{background:rgba(28,28,30,.75);border-color:rgba(255,255,255,.1)}
body.dark-theme .modern-section,body.dark-theme .setup-card{background:rgba(44,44,46,.6);border-color:rgba(255,255,255,.1)}
body.dark-theme .modal-header{background:rgba(44,44,46,.65);border:1px solid rgba(255,255,255,.1);box-shadow:0 12px 35px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05)}
body.dark-theme .k-btn{background:rgba(44,44,46,.5);border-color:rgba(255,255,255,.2);color:#f5f5f7}
body.dark-theme .notification-badge{border-color:#2c2c2e}
body.dark-theme .custom-modal-box{background:rgba(44,44,46,.85);border-color:rgba(255,255,255,.1)}
body.dark-theme .custom-modal-btn.cancel{background:rgba(255,255,255,.1);color:#fff}
body.dark-theme .history-modern-card{background:rgba(44,44,46,.6);border-color:rgba(255,255,255,.1)}
body.dark-theme .history-m-header{border-color:rgba(255,255,255,.08)}
body.dark-theme .history-m-avatar{background:#2c2c2e;box-shadow:0 4px 10px rgba(0,0,0,.3)}
body.dark-theme .history-m-mode{background:rgba(255,255,255,.1);color:#fff}
body.dark-theme .history-m-stats{background:rgba(0,0,0,.2)}
body.dark-theme .history-stat-row{background:rgba(44,44,46,.8);border-color:rgba(255,255,255,.05)}
body.dark-theme .player-banner{background:rgba(28,28,30,.85);border-color:rgba(255,255,255,.1)}

body.theme-pastel{--red:#ffb3ba;--light-red:#ffe5e8;--blue:#bae1ff;--light-blue:#e8f4ff;--green:#b5ead7;--light-green:#eaf7f1;--yellow:#ffffba;--light-yellow:#fffff0;--board-bg:#fff;--board-lines:#f0f0f5}
body.theme-neon{--red:#ff0055;--light-red:#4a0018;--blue:#00f2fe;--light-blue:#00474a;--green:#39ff14;--light-green:#0d3a03;--yellow:#fff000;--light-yellow:#4a4600;--board-bg:#121212;--board-lines:#333}
body.theme-wood{--red:#b75d32;--light-red:#e6cbbd;--blue:#4682b4;--light-blue:#cddce7;--green:#6b8e23;--light-green:#d3dec1;--yellow:#daa520;--light-yellow:#f4ead5;--board-bg:#faebd7;--board-lines:#d2b48c}
body.theme-ocean{--red:#ff7f50;--light-red:#ffd9cc;--blue:#00ced1;--light-blue:#ccf5f6;--green:#20b2aa;--light-green:#d2f0ef;--yellow:#f4a460;--light-yellow:#fcf0d3;--board-bg:#e0f7fa;--board-lines:#b2ebf2}
body.theme-dark{--red:#cc3333;--light-red:#4a2020;--blue:#3388cc;--light-blue:#203a4a;--green:#449944;--light-green:#254025;--yellow:#cca533;--light-yellow:#4a4020;--board-bg:#2c2c2e;--board-lines:#38383a}
body.theme-cyber{--red:#ff003c;--light-red:#4a0011;--blue:#00f0ff;--light-blue:#00454a;--green:#a100ff;--light-green:#2e004a;--yellow:#fce803;--light-yellow:#4a4400;--board-bg:#0d0221;--board-lines:#261447}
body.theme-nature{--red:#e07a5f;--light-red:#f4dcd6;--blue:#3d5a80;--light-blue:#c5d1df;--green:#81b29a;--light-green:#dceae3;--yellow:#f2cc8f;--light-yellow:#faebd7;--board-bg:#f4f1de;--board-lines:#eab69f}
body.theme-candy{--red:#ff6b6b;--light-red:#ffdada;--blue:#48dbfb;--light-blue:#d0f5fe;--green:#1dd1a1;--light-green:#c6f4e6;--yellow:#feca57;--light-yellow:#fff0d4;--board-bg:#fff;--board-lines:#ff9ff3}
body.theme-antika{--red:#bd5b4c;--light-red:#e08477;--blue:#63727d;--light-blue:#98a7b3;--green:#776c5b;--light-green:#a49988;--yellow:#cba063;--light-yellow:#efcc97;--board-bg:#eaddcc;--board-lines:#523a28}
body.theme-lumina{--red:#f05c4b;--light-red:#ffa69c;--blue:#418f9d;--light-blue:#85c2cd;--green:#5ebea2;--light-green:#96e6cf;--yellow:#fab03c;--light-yellow:#ffe099;--board-bg:#f4f4f4;--board-lines:#e2e2e2}

/* --- Mağaza İçin Yapışkan (Sticky) Ön İzleme --- */
#shared-dice-preview {
    position: sticky !important;
    top: -15px !important;
    z-index: 50 !important;
    padding: 10px 15px !important;
    margin: -15px -15px 15px -15px !important;
    background: rgba(255,255,255,0.8) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    border-radius: 0 0 16px 16px;
}
body.dark-theme #shared-dice-preview {
    background: rgba(28,28,30,0.85) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

/* --- Kompakt Mağaza Kutucukları --- */
.dice-grid-btn, .board-grid-btn, .effect-grid-btn, .piece-grid-btn {
    padding: 8px 4px 6px !important;
    border-radius: 14px !important;
    gap: 4px !important;
    border: 2px solid transparent;
    background: rgba(255,255,255,.5);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all .3s cubic-bezier(.34,1.56,.64,1);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,.03);
    backdrop-filter: blur(10px);
}
.dice-grid-btn.selected, .board-grid-btn.selected, .effect-grid-btn.selected, .piece-grid-btn.selected {
    border-color: var(--apple-blue);
    color: var(--apple-blue);
    background: #fff;
    box-shadow: 0 8px 25px rgba(0,122,255,.2);
    transform: scale(1.05);
}

.dice-grid-btn > div:first-child { transform: scale(0.85); margin-bottom: 5px; height: 30px !important; }
.effect-grid-btn div:first-child { font-size: 20px !important; margin-bottom: 2px !important; }
.piece-grid-btn div:first-child { font-size: 26px !important; margin-bottom: 2px !important; }
.board-grid-btn > div:first-child { width: 32px !important; height: 32px !important; }

/* --- Kademeli Izgara (Grid) Sistemi --- */
#piece-settings-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
#board-settings-grid, #dice-settings-grid, #effect-settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#setup-cards-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

@media (max-width: 650px) {
    #piece-settings-grid { grid-template-columns: repeat(3, 1fr) !important; }
    #board-settings-grid, #dice-settings-grid, #effect-settings-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 400px) {
    #piece-settings-grid { grid-template-columns: repeat(2, 1fr) !important; }
    #board-settings-grid, #dice-settings-grid, #effect-settings-grid { grid-template-columns: repeat(2, 1fr) !important; }
    #setup-cards-container { grid-template-columns: 1fr !important; }
    .action-row { grid-template-columns: 1fr 1fr !important; }
}

/* --- ZARFİLEŞTİRİLMİŞ ZAR NOKTALARI (DOTS) --- */
.dot{border-radius:50%;width:7px;height:7px;position:absolute;transform:translate(-50%,-50%);box-shadow:inset 0 2px 4px rgba(0,0,0,.3);transition:all .3s}

/* --- YENİ: Merhamet Sistemi Garanti 6 Zarı Parlaması (Pity Glow) --- */
.mercy-glow {
    animation: mercyPulse 1.2s infinite alternate !important;
}
@keyframes mercyPulse {
    0% { box-shadow: 0 0 15px #facb15, inset 0 0 10px rgba(250, 203, 21, 0.5) !important; border-color: #facb15 !important; }
    100% { box-shadow: 0 0 35px #facb15, inset 0 0 20px #facb15 !important; border-color: #fff !important; transform: scale(1.05); }
}

/* --- YENİ: Eğitici Uyarı Metni (Tam Zar Uyarısı İçin) --- */
.edu-warning-text {
    color: var(--orange);
    font-size: 11px;
    font-weight: 800;
    animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    margin-top: 4px;
    display: block;
}

.dice-type-classic { background: var(--apple-blue) !important; border-radius: 14px !important; box-shadow: 0 6px 15px rgba(0,0,0,.2), inset 0 3px 8px rgba(255,255,255,.5), inset 0 -3px 8px rgba(0,0,0,.15) !important; color: var(--apple-blue) !important; }
.dice-type-classic .dot { background: #fff !important; box-shadow: inset 0 2px 4px rgba(0,0,0,.3) !important; }
#dice.dice-type-minimal,#preview-dice-hub.dice-type-minimal,.dice-grid-btn .dice-type-minimal{background:currentColor!important;border-radius:8px!important;box-shadow:0 4px 12px rgba(0,0,0,.15);border:none!important}
.dice-type-minimal .dot{background:#fff!important;width:6px!important;height:6px!important;box-shadow:none!important;opacity:.9}
#dice.dice-type-neon,#preview-dice-hub.dice-type-neon,.dice-grid-btn .dice-type-neon{background:transparent!important;border:2px solid currentColor;box-shadow:0 0 15px currentColor,inset 0 0 10px currentColor}
.dice-type-neon .dot{background:currentColor!important;box-shadow:0 0 6px currentColor!important}
#dice.dice-type-glass,#preview-dice-hub.dice-type-glass,.dice-grid-btn .dice-type-glass{background:linear-gradient(135deg,#a1c4fd 0%,#c2e9fb 100%)!important;border-radius:20px!important;box-shadow:0 8px 25px rgba(161,196,253,.5);border:2px solid #fff!important}
.dice-type-glass .dot{background:#fff!important;box-shadow:0 0 8px rgba(255,255,255,.8),inset 0 1px 2px rgba(0,0,0,.1)!important;width:7px!important;height:7px!important;border-radius:50%!important}
#dice.dice-type-sharp,#preview-dice-hub.dice-type-sharp,.dice-grid-btn .dice-type-sharp{background:linear-gradient(145deg,#bdc3c7,#fff)!important;border-radius:12px!important;border:1px solid #a1a1a6!important;box-shadow:inset 0 2px 5px rgba(255,255,255,.8),0 5px 15px rgba(0,0,0,.15)}
.dice-type-sharp .dot{background:#1d1d1f!important;border-radius:50%!important;box-shadow:inset 0 2px 3px rgba(0,0,0,.4),0 1px 1px rgba(255,255,255,.3)!important;width:6px!important;height:6px!important}
#dice.dice-type-inverted,#preview-dice-hub.dice-type-inverted,.dice-grid-btn .dice-type-inverted{background:#1c1c1e!important;border:2px solid currentColor;box-shadow:none}
.dice-type-inverted .dot{background:currentColor!important}
#dice.dice-type-hologram,#preview-dice-hub.dice-type-hologram,.dice-grid-btn .dice-type-hologram{background:rgba(0,255,255,.05)!important;border:1px solid #0ff;box-shadow:0 0 15px #0ff,inset 0 0 15px #0ff}
.dice-type-hologram .dot{background:#f0f!important;box-shadow:0 0 6px #f0f!important}
#dice.dice-type-retro,#preview-dice-hub.dice-type-retro,.dice-grid-btn .dice-type-retro{border-radius:0!important;border:3px solid currentColor;background:#fff!important;box-shadow:none}
.dice-type-retro .dot{border-radius:0!important;width:7px!important;height:7px!important;background:currentColor!important;box-shadow:none!important}
#dice.dice-type-gold,#preview-dice-hub.dice-type-gold,.dice-grid-btn .dice-type-gold{background:linear-gradient(135deg,#ffd700,#daa520)!important;border:1px solid rgba(255,255,255,.5);box-shadow:0 6px 15px rgba(218,165,32,.4),inset 0 2px 5px rgba(255,255,255,.6)}
.dice-type-gold .dot{background:#fff!important;box-shadow:inset 0 1px 3px rgba(0,0,0,.2)!important}

.effect-pulse{animation:efPulse 1.3s ease-in-out forwards}
@keyframes efPulse{0%,28%,70%{transform:scale(1);box-shadow:0 0 0 currentColor}14%,42%{transform:scale(1.1);box-shadow:0 0 30px currentColor}}
.effect-aura{animation:efAura 1.3s ease-in-out forwards}
@keyframes efAura{0%,100%{box-shadow:0 0 0 transparent}50%{transform:scale(1.1);box-shadow:0 0 45px currentColor}}
.effect-ripple{animation:efRipple 1.3s ease-out forwards}
@keyframes efRipple{0%{box-shadow:0 0 0 0 currentColor}100%{box-shadow:0 0 0 40px transparent}}
.effect-flash{animation:efFlash 1.3s ease-out forwards}
@keyframes efFlash{0%,40%,80%,100%{box-shadow:0 0 0 transparent}20%,60%{box-shadow:0 0 50px #fff,0 0 80px currentColor;transform:scale(1.1)}}
.effect-rainbow{animation:efRainbow 1.3s linear forwards}
@keyframes efRainbow{0%{box-shadow:0 0 35px currentColor;filter:hue-rotate(0deg);transform:scale(1.1)}100%{box-shadow:0 0 35px currentColor;filter:hue-rotate(360deg);transform:scale(1)}}
.effect-fire{animation:efFire 1.3s ease-in-out forwards}
@keyframes efFire{0%,100%{box-shadow:0 0 20px currentColor;transform:translateY(0) scale(1)}25%{box-shadow:0 -15px 30px currentColor;transform:translateY(-3px) scale(1.05)}50%{box-shadow:0 -5px 40px currentColor;transform:translateY(0) scale(1.1)}75%{box-shadow:0 -20px 25px currentColor;transform:translateY(-4px) scale(1.05)}}
.effect-spin{animation:efSpin 1.3s cubic-bezier(.4,0,.2,1) forwards}
@keyframes efSpin{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(360deg) scale(1.2);box-shadow:0 0 30px currentColor}100%{transform:rotate(720deg) scale(1)}}
.effect-phantom{animation:efPhantom 1.3s ease-out forwards}
@keyframes efPhantom{0%{transform:scale(1);opacity:1;box-shadow:0 0 0 currentColor}50%{transform:scale(1.3);opacity:.3;box-shadow:0 0 40px currentColor,0 0 80px currentColor}100%{transform:scale(1);opacity:1;box-shadow:0 0 0 transparent}}

@keyframes popIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

#board{width:calc(var(--cell)*15);height:calc(var(--cell)*15);display:grid;grid-template:repeat(15,1fr)/repeat(15,1fr);background:var(--board-bg);border:1px solid var(--board-lines);position:relative;box-shadow:0 8px 30px rgba(0,0,0,.06);border-radius:20px;overflow:hidden;transition:all .3s}
.cell{border:.5px solid var(--board-lines);position:relative;display:flex;align-items:center;justify-content:center;transition:border-color .3s}
.star::after{content:'★';position:absolute;font-size:calc(var(--cell)*.7);color:#f2ce6e;text-shadow:0 2px 4px rgba(0,0,0,.1);transition:all .3s}
.star.occupied::after{transform:scale(1.5);color:#ffdf00;text-shadow:0 0 15px rgba(250,203,21,.6)}
.safe-start::after{content:'🛡';position:absolute;font-size:calc(var(--cell)*.45);opacity:.25;filter:grayscale(1)}
.bg-red{background:var(--red)!important;border-color:var(--red)!important}
.bg-green{background:var(--green)!important;border-color:var(--green)!important}
.bg-yellow{background:var(--yellow)!important;border-color:var(--yellow)!important}
.bg-blue{background:var(--blue)!important;border-color:var(--blue)!important}
.center{grid-column:7/10;grid-row:7/10;background:var(--center-bg);border:none!important}

/* YENİ NESİL GEOMETRİK MERKEZ TASARIMLARI CSS KURALLARI (style.css ENTEGRASYONU) */
.center-led-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(var(--cell)*3);height:calc(var(--cell)*3);background:conic-gradient(from 45deg,var(--light-green) 0 90deg,var(--light-yellow) 90deg 180deg,var(--light-red) 180deg 270deg,var(--light-blue) 270deg 360deg);backdrop-filter:blur(15px);border-radius:50%;border:1px solid rgba(255,255,255,.8);box-shadow:0 10px 30px rgba(0,0,0,.15),inset 0 0 0 4px rgba(255,255,255,.5),inset 0 0 20px rgba(255,255,255,.3);z-index:150;overflow:hidden;transition:all .3s}
.hub-pulse{animation:hubPulse .78s ease-out}
@keyframes hubPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.15)}}
.hub-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(var(--cell)*.9);height:calc(var(--cell)*.9);background:transparent;border-radius:50%;z-index:10;display:flex;align-items:center;justify-content:center;font-size:calc(var(--cell)*.5);border:none}
.led-quadrant{position:absolute;z-index:5;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.led-arc{position:absolute;border-radius:50%;border:calc(var(--cell)*.12) solid transparent;box-sizing:border-box;transition:all .5s cubic-bezier(.34,1.56,.64,1);color:rgba(255,255,255,.5);opacity:.3}
.arc-0{width:calc(var(--cell)*.85);height:calc(var(--cell)*.85)}
.arc-1{width:calc(var(--cell)*1.45);height:calc(var(--cell)*1.45)}
.arc-2{width:calc(var(--cell)*2.05);height:calc(var(--cell)*2.05)}
.arc-3{width:calc(var(--cell)*2.65);height:calc(var(--cell)*2.65)}
.quad-left .led-arc{border-left-color:currentColor}
.quad-top .led-arc{border-top-color:currentColor}
.quad-right .led-arc{border-right-color:currentColor}
.quad-bottom .led-arc{border-bottom-color:currentColor}

/* MINI MODE FIX */
#board.mini-mode .arc-2, #board.mini-mode .arc-3 { display: none !important; }

/* 🛡️ GPU Hızlandırma: will-change eklendi */
.piece{cursor:pointer;position:absolute;z-index:100;transition:all var(--move-dur) cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;justify-content:center;background:transparent!important;border:none!important;width:calc(var(--cell)*1);height:calc(var(--cell)*1); will-change: transform;}
.piece .piece-inner{position:absolute;z-index:2;line-height:1;transition:font-size var(--move-dur);background:transparent!important;border-radius:0}
.piece.active{animation:bounce-icon .91s infinite alternate;z-index:500!important; will-change: transform, filter;}
.eaten-anim{animation:eaten .5s cubic-bezier(.68,-.55,.27,1.55) forwards}
@keyframes eaten{0%{transform:scale(1);opacity:1}50%{transform:scale(.2) rotate(180deg);opacity:.8;filter:brightness(2)}100%{transform:scale(1) rotate(360deg);opacity:1}}
@keyframes bounce-icon{from{transform:translateY(0) scale(1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}to{transform:translateY(-8px) scale(1.15);filter:drop-shadow(0 10px 10px rgba(0,0,0,.4))}}
@keyframes popInCentering{from{transform:translate(-50%,-50%) scale(.8);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.blockade-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px;z-index:200;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));animation:popInCentering .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none}

.glass-dock{background:rgba(255,255,255,.7);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.6);box-shadow:0 12px 35px rgba(0,0,0,.1);border-radius:24px;box-sizing:border-box;transition:all .3s}
.menu-icon-btn{background:#fff;border:1px solid #e5e5ea;border-radius:16px;width:48px;height:48px;cursor:pointer;transition:all .2s ease;color:var(--text-main);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.icon-grid-btn{font-size:24px;width:54px;height:54px;border-radius:18px;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.5);cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(0,0,0,.03)}
.icon-grid-btn.selected{background:#fff;border-color:var(--apple-blue);box-shadow:0 0 0 2px var(--apple-blue),0 8px 20px rgba(0,122,255,.2)}
.icon-grid-btn.disabled{opacity:.3;cursor:not-allowed;filter:grayscale(1);background:rgba(0,0,0,.05)}
.toggle-switch{position:relative;width:44px;height:24px;-webkit-appearance:none;appearance:none;background:#e5e5ea;border-radius:12px;outline:0;cursor:pointer;transition:background .3s;margin:0;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}
.toggle-switch::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.toggle-switch:checked{background:var(--apple-blue)}
.toggle-switch:checked::after{transform:translateX(20px)}

/* --- YENİ: Geliştirilmiş Sıra Odaklayıcısı (Neon Parlama) --- */
.players-row{display:flex;justify-content:space-between;width:var(--board-size);max-width:95vw;margin:15px 0;z-index:1000;flex-shrink:0;overflow:visible;box-sizing:border-box;padding:0 30px}
.player-slot{width:45%;display:flex;align-items:center;transition:all .3s ease;opacity:.4;filter:grayscale(.6);box-sizing:border-box;overflow:visible;position:relative}
.player-slot.active{opacity:1;filter:grayscale(0)}
.player-slot.active .player-banner{
    box-shadow: 0 8px 25px rgba(0,0,0,.15), inset 0 0 0 1px currentColor, 0 0 15px currentColor;
    transform: translateY(-2px);
    animation: pPulse 1.8s infinite alternate; 
    border-color: currentColor;
}
@keyframes pPulse{
    0% { box-shadow: 0 8px 25px rgba(0,0,0,.15), inset 0 0 0 1px currentColor, 0 0 5px currentColor; }
    100% { box-shadow: 0 8px 25px rgba(0,0,0,.15), inset 0 0 0 2px currentColor, 0 0 25px currentColor; transform: translateY(-4px) scale(1.02); }
}

.player-banner{width:100%;background:rgba(255,255,255,.85);backdrop-filter:blur(20px);border:2px solid transparent;border-radius:24px;display:flex;align-items:center;position:relative;overflow:visible;transition:all .3s ease;box-sizing:border-box;min-height:60px}
.player-slot.left .player-banner{flex-direction:row;padding:6px 8px 6px 36px;border-left-color:currentColor}
.player-slot.right .player-banner{flex-direction:row-reverse;padding:6px 36px 6px 8px;text-align:right;border-right-color:currentColor}
.timer-container{position:absolute;top:50%;transform:translateY(-50%);width:64px;height:64px;display:flex;align-items:center;justify-content:center;z-index:10}
.player-slot.left .timer-container{left:-32px}
.player-slot.right .timer-container{right:-32px}
.timer-svg{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible;filter:drop-shadow(0 4px 6px rgba(0,0,0,.1))}
.timer-circle-bg{fill:var(--bg);stroke:var(--timer-bg);stroke-width:3}
.timer-circle-fg{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-dasharray:194.8;stroke-dashoffset:194.8;transition:stroke-dashoffset 1s linear,stroke .3s ease}
.strike-ring{fill:none;stroke-width:4;stroke-linecap:round;transition:all .3s;stroke:var(--green);opacity:.8}
.strike-ring.active{stroke:var(--red);opacity:1}
.strike-0{stroke-dasharray:42 115.1;stroke-dashoffset:0}
.strike-1{stroke-dasharray:42 115.1;stroke-dashoffset:-52.36}
.strike-2{stroke-dasharray:42 115.1;stroke-dashoffset:-104.72}
.pb-avatar{font-size:26px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 10px rgba(0,0,0,.05);z-index:2;overflow:hidden;}
.pb-info{display:flex;flex-direction:column;z-index:2;flex:1;min-width:0;overflow:hidden;padding:0 10px}
.pb-name{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;color:var(--text-main)}
.pb-status{font-size:10px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;margin-top:2px;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dice-slot{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;margin:0;z-index:5}
#dice-hub{width:48px!important;height:48px!important;min-width:48px;min-height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s;position:relative;z-index:950;pointer-events:auto}
#dice-hub:active{transform:scale(.92)}
#dice{width:100%;height:100%;border-radius:10px;position:relative;box-sizing:border-box;box-shadow:0 6px 15px rgba(0,0,0,.2),inset 0 3px 8px rgba(255,255,255,.5),inset 0 -3px 8px rgba(0,0,0,.15);transition:all .3s}
.players-row,.player-slot,.dice-slot,#dice-hub,#dice{pointer-events:auto}
.top-players .player-slot,.top-players .dice-slot,.bottom-players .player-slot,.bottom-players .dice-slot{position:relative;z-index:800}
.top-players .player-banner,.bottom-players .player-banner{position:relative;z-index:800}
.top-players .player-slot.active,.top-players .player-slot.active .dice-slot,.top-players .player-slot.active #dice-hub,.bottom-players .player-slot.active,.bottom-players .player-slot.active .dice-slot,.bottom-players .player-slot.active #dice-hub{z-index:900}
.top-players .player-slot.active .player-banner,.bottom-players .player-slot.active .player-banner{z-index:900}
/* 🛡️ GPU Hızlandırma: will-change eklendi */
.rolling{animation:dice-shake .39s ease-in-out infinite; will-change: transform;}
@keyframes dice-shake{0%,100%{transform:rotate(-12deg) scale(.95)}50%{transform:rotate(12deg) scale(1.05)}}
@keyframes panel-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.shake-active{animation:panel-shake .35s ease-in-out}

/* --- Kusursuz Top Bar Hizalaması --- */
.game-top-bar {
    margin-bottom: 12px;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: var(--board-size);
    max-width: 95vw;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    z-index: 1500;
    animation: slideDown 0.4s ease;
    gap: 12px;
}

@media(max-height:700px){.card{max-height:80vh;padding:20px}}
@media(max-width:480px){
    .menu-icon-btn{width:40px;height:40px;border-radius:12px}
    .menu-icon-btn svg{width:20px;height:20px}
    .card{padding:25px 20px}
    .card h1{font-size:24px}
    .menu-btn{padding:14px;font-size:15px}
    .hub-core{width:calc(var(--cell)*.7);height:calc(var(--cell)*.7);font-size:13px;border-width:1px}
    .players-row{padding:0 20px;margin:10px 0}
    .player-slot{width:46%}
    .player-banner{min-height:50px;border-radius:18px}
    .player-slot.left .player-banner{padding:4px 4px 4px 28px}
    .player-slot.right .player-banner{padding:4px 28px 4px 4px}
    .timer-container{width:54px;height:54px}
    .player-slot.left .timer-container{left:-27px}
    .player-slot.right .timer-container{right:-27px}
    .pb-avatar{width:32px;height:32px;font-size:20px}
    .pb-name{font-size:12px}
    .pb-status{font-size:9px}
    .dice-slot{width:36px;height:36px}
    #dice-hub{width:36px!important;height:36px!important;min-width:36px;min-height:36px;border-radius:8px}
    #dice{padding:4px;border-radius:8px}
    
    /* --- Mobilde Zar Noktalarını Küçültme --- */
    .dot{width:5px;height:5px}
}

@media (hover: hover) {
    .k-btn:hover { transform:scale(1.1); background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.1); border-color:var(--apple-blue); color:var(--apple-blue) }
    .action-btn:hover { background:rgba(255,255,255,.9); color:var(--apple-blue); transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.08) }
    .menu-btn:hover { transform:translateY(-2px); box-shadow:0 10px 25px rgba(0,0,0,.1) }
    .v-btn-icon:hover { transform:translateY(-4px) scale(1.05); box-shadow:0 12px 25px rgba(0,0,0,.1); background:var(--c); color:#fff; border-color:transparent }
    .menu-icon-btn:hover { background:#f2f2f7; transform:scale(.95); box-shadow:0 2px 6px rgba(0,0,0,.04) }
    .dice-grid-btn:hover, .board-grid-btn:hover, .effect-grid-btn:hover, .piece-grid-btn:hover { transform:scale(1.05); background:rgba(255,255,255,.9) }
    .icon-grid-btn:hover:not(.disabled) { transform:scale(1.1); box-shadow:0 8px 20px rgba(0,0,0,.08); background:#fff }
    .custom-modal-btn.cancel:hover { background:rgba(0,0,0,.1) }
    .custom-modal-btn.confirm:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,122,255,.4) }
    .history-modern-card:hover { transform:scale(1.02); box-shadow:0 12px 25px rgba(0,0,0,.06) }
}

.btn-google { background: #fff; color: #000; border: none; padding: 14px; border-radius: 14px; width: 100%; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 6px 15px rgba(255,255,255,0.2); transition: transform 0.2s; }
.btn-google img { width: 20px; height: 20px; }
.btn-google:hover { transform: scale(1.02); }
.k-btn-with-icon svg { width: 20px; height: 20px; display: block; }
#settings-menu-btn-icon svg { stroke-width: 1.5px; stroke: currentColor; }

#leaderboard-menu { display:none; position:fixed; inset:0; background:rgba(245,245,247,.85); z-index:2000; flex-direction:column; justify-content:flex-start; align-items:stretch; backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); }
body.dark-theme #leaderboard-menu { background:rgba(28,28,30,.75); border-color:rgba(255,255,255,.1); }

#board.mini-mode { --cell: calc(var(--board-size) / 11) !important; width: var(--board-size) !important; height: var(--board-size) !important; grid-template: repeat(11, 1fr) / repeat(11, 1fr) !important; }
#board.mini-mode .center { grid-column: 5 / 8 !important; grid-row: 5 / 8 !important; background: var(--board-bg) !important; border: none !important; z-index: 1; }
#board.mini-mode .arc-0 { width: calc(var(--cell) * 1.2) !important; height: calc(var(--cell) * 1.2) !important; }
#board.mini-mode .arc-1 { width: calc(var(--cell) * 2.2) !important; height: calc(var(--cell) * 2.2) !important; }
#board.mini-mode .center-led-hub { background: conic-gradient(from 45deg, var(--light-green) 0 90deg, var(--light-yellow) 90deg 180deg, var(--light-red) 180deg 270deg, var(--light-blue) 270deg 360deg) !important; }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.glass-dock.online-active { background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(209, 245, 222, 0.9)) !important; border-color: var(--green) !important; box-shadow: 0 10px 30px rgba(37, 201, 98, 0.2) !important; }
body.dark-theme .glass-dock.online-active { background: linear-gradient(135deg, rgba(44,44,46,0.9), rgba(20, 60, 30, 0.8)) !important; border-color: rgba(37, 201, 98, 0.5) !important; box-shadow: 0 10px 30px rgba(37, 201, 98, 0.15) !important; }

.game-event-text { flex: 1; text-align: left; font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; transition: all 0.3s ease; }
.chat-tab-btn { background: var(--apple-blue); color: #fff; border: none; border-radius: 10px; padding: 8px 12px; font-size: 12px; font-weight: 800; cursor: pointer; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,122,255,0.3); transition: transform 0.2s; }
.chat-tab-btn:hover { transform: scale(1.05); }

.top-bar-controls { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-shrink: 0; }
.expandable-menu { display: flex; gap: 8px; overflow: hidden; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); max-width: 0px; opacity: 0; transform: translateX(20px); pointer-events: none; }

@media(max-width: 600px) {
    .game-top-bar { padding: 6px 8px; margin-bottom: 6px; gap: 6px; }
    .game-event-text { font-size: 13px; padding-right: 5px; }
    .chat-tab-btn { padding: 6px 8px; font-size: 11px; }
    .top-bar-controls { gap: 4px; }
    .top-bar-controls .menu-icon-btn { width: 36px; height: 36px; min-height: 36px; border-radius: 10px; }
    .top-bar-controls .menu-icon-btn svg { width: 18px; height: 18px; }
}

/* --- Ergonomik Sohbet Balonu --- */
.chat-balloon-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 15px;
    width: 260px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 24px;
    padding: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    z-index: 4000;
    transform-origin: top right;
    animation: balloonPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

body.dark-theme .chat-balloon-panel {
    background: rgba(28,28,30,0.95);
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}

@keyframes balloonPop {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.emoji-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.msg-list-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
}

.inline-chat-btn { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02); white-space: nowrap; flex-shrink: 0; color: var(--text-main); }
.inline-chat-btn:hover { transform: scale(1.05); background: #fff; border-color: var(--apple-blue); box-shadow: 0 4px 10px rgba(0, 122, 255, 0.15); }
.inline-chat-btn:active { transform: scale(0.95); }

body.dark-theme .inline-chat-btn { background: rgba(44, 44, 46, 0.6); border-color: rgba(255, 255, 255, 0.05); color: var(--text-main); }
body.dark-theme .inline-chat-btn:hover { background: rgba(60, 60, 62, 0.9); border-color: var(--apple-blue); }

.chat-balloon-panel .inline-chat-btn {
    width: 100% !important;
    height: 44px !important;
    font-size: 22px;
    margin: 0;
}

.chat-balloon-panel .msg-list-container .inline-chat-btn {
    font-size: 13px !important;
    height: auto !important;
    padding: 12px !important;
    white-space: normal;
    text-align: left;
    justify-content: flex-start;
}

.chat-inline-anim { animation: chatInlinePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes chatInlinePop { from { transform: translateX(-10px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* --- 🛡️ MOBİL ZIRH: Yatay Ekran Kırılması Engeli --- */
@media screen and (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
    body::after {
        content: "📱 Lütfen telefonu dik tutun!";
        position: fixed; inset: 0; z-index: 2147483647;
        background: var(--bg, #1c1c1e); color: var(--text-main, #fff);
        display: flex; align-items: center; justify-content: center;
        font-size: 20px; font-weight: 800; letter-spacing: 1px;
    }
    body > * { display: none !important; }
}

/* --- 🛡️ METAGAME: Zafer Serisi Alevi --- */
.win-streak-fire {
    position: relative;
    box-shadow: 0 0 20px #ff3b30, 0 0 40px #ff9500, inset 0 0 15px #ff3b30 !important;
    border-color: #ff9500 !important;
    animation: firePulse 1s infinite alternate;
}
.win-streak-fire::before {
    content: '🔥 SERİ!';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, #ff3b30, #ff9500);
    padding: 2px 8px;
    border-radius: 10px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    white-space: nowrap;
    z-index: 20;
    pointer-events: none;
}
@keyframes firePulse {
    0% { box-shadow: 0 0 15px #ff3b30, inset 0 0 10px #ff3b30; }
    100% { box-shadow: 0 0 30px #ff9500, 0 0 50px #ff3b30, inset 0 0 20px #ff9500; transform: scale(1.02); }
}

/* --- 🛡️ METAGAME: VIP Çerçeveler --- */
.vip-border-gold {
    border: 4px solid #facb15 !important;
    box-shadow: 0 0 15px #facb15, inset 0 0 15px rgba(250,203,21,0.5) !important;
}
.vip-border-diamond {
    border: 4px solid #48dbfb !important;
    box-shadow: 0 0 25px #48dbfb, inset 0 0 20px rgba(72,219,251,0.6) !important;
    animation: diamondShine 3s linear infinite;
}
@keyframes diamondShine { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }

/* --- GÖREVLER (QUESTS) MENÜSÜ TASARIMLARI --- */
.quest-card { background: var(--card-bg); border: 1px solid rgba(0,0,0,0.05); padding: 15px; border-radius: 20px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 15px rgba(0,0,0,0.03); transition: transform 0.2s; }
.quest-card:hover { transform: scale(1.02); }
body.dark-theme .quest-card { border-color: rgba(255,255,255,0.05); }
.quest-progress-bar { width: 100%; height: 8px; background: rgba(0,0,0,0.1); border-radius: 4px; margin-top: 8px; overflow: hidden; position: relative; }
.quest-progress-fill { height: 100%; background: var(--apple-blue); border-radius: 4px; transition: width 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.quest-btn { background: var(--apple-blue); color: #fff; border: none; padding: 8px 16px; border-radius: 12px; font-weight: 800; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 10px rgba(0,122,255,0.3); }
.quest-btn:disabled { background: var(--green); box-shadow: 0 4px 10px rgba(52,199,89,0.3); cursor: default; }

.quest-tabs { display:flex; border-bottom:1px solid rgba(0,0,0,0.1); width:100%; margin-bottom:15px; }
body.dark-theme .quest-tabs { border-color: rgba(255,255,255,0.1); }
.quest-tab-btn { flex:1; background:transparent; border:none; color:var(--text-muted); font-weight:bold; padding:15px 5px; font-size:12px; border-bottom:2px solid transparent; cursor:pointer; transition:all 0.3s; }
.quest-tab-btn.active { color:var(--apple-blue); border-bottom-color:var(--apple-blue); }

/* =========================================================================
   🔥 YENİ: ÜS (KALE) TASARIMLARI (GERÇEK ŞEKİL DEĞİŞİMİ)
   ========================================================================= */

.base-hub-container {
    background: var(--board-bg); /* SİHİR BURADA: Orijinal kare ızgarayı tamamen gizler! */
    pointer-events: none;
    z-index: 1;
}

/* Üs Renkleri (Otomatik olarak ilgili köşenin rengini alır) */
.base-hub-pos-0 .base-hub { background-color: var(--red); }
.base-hub-pos-1 .base-hub { background-color: var(--blue); }
.base-hub-pos-2 .base-hub { background-color: var(--green); }
.base-hub-pos-3 .base-hub { background-color: var(--yellow); }

.base-hub {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: inset 0 0 25px rgba(0,0,0,0.2); /* Derinlik hissi */
}

/* Taşların Beklediği İç Merkez (Tüm üslere Ludo dokunuşu katar) */
.base-hub::after {
    content: '';
    position: absolute;
    top: 25%; left: 25%; width: 50%; height: 50%;
    background: rgba(255,255,255,0.35);
    border-radius: 15%;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.1);
}

/* 1. Klasik Üs */
.base-design-classic {
    border-radius: 15%;
}

/* 2. Şato Surları (Tam bir kale şekli) */
.base-design-castle {
    border-radius: 5%;
    clip-path: polygon(5% 0, 20% 0, 20% 10%, 35% 10%, 35% 0, 65% 0, 65% 10%, 80% 10%, 80% 0, 95% 0, 100% 5%, 100% 20%, 90% 20%, 90% 35%, 100% 35%, 100% 65%, 90% 65%, 90% 80%, 100% 80%, 100% 95%, 95% 100%, 80% 100%, 80% 90%, 65% 90%, 65% 100%, 35% 100%, 35% 90%, 20% 90%, 20% 100%, 5% 100%, 0 95%, 0 80%, 10% 80%, 10% 65%, 0 65%, 0 35%, 10% 35%, 10% 20%, 0 20%, 0 5%);
}

/* 3. Siber Kalkan */
.base-design-cyber {
    clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
}
.base-design-cyber::after { border-radius: 50%; }

/* 4. Enerji Portalı */
.base-design-portal {
    border-radius: 50%;
    background-image: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.2) 10%, transparent 15%);
}
.base-design-portal::after { border-radius: 50%; background: rgba(0,0,0,0.15); box-shadow: 0 0 15px rgba(255,255,255,0.3); }

/* 5. Arena */
.base-design-stadium {
    border-radius: 35%;
    background-image: radial-gradient(circle, transparent 50%, rgba(0,0,0,0.15) 80%);
}

/* 6. Taç Yaprak */
.base-design-floral {
    clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
}
.base-design-floral::after { transform: rotate(45deg); }

/* 7. Kara Delik */
.base-design-void {
    border-radius: 50%;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
}
.base-design-void::after { background: rgba(0,0,0,0.3); border-radius: 50%; }

/* 8. Kristal Kesim */
.base-design-crystal {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.base-design-crystal::after { transform: rotate(45deg); border-radius: 10px; background: rgba(255,255,255,0.25); }

/* Mağaza Önizleme İçin Rengi Yeşile Sabitleme */
#preview-base-hub-inner { background-color: var(--green); }

/* 🔥 EKLENEN KISIM: Mağazadaki küçük seçeneklerin görünür olması için renkler */
.base-grid-btn .base-hub { background-color: rgba(0,0,0,0.15); }
.base-grid-btn.selected .base-hub { background-color: var(--green); }

/* 🔥 YENİ: EZOTERİK KLAN STİLLERİ */
.grandmaster-glow::after {
    content: '';
    position: absolute;
    top: -8px; left: -8px; right: -8px; bottom: -8px;
    background: conic-gradient(from 0deg, #ff00cc, #333399, #00ffcc, #ff00cc);
    border-radius: 50%;
    z-index: -1;
    animation: esotericSpin 4s linear infinite;
    filter: blur(10px);
    opacity: 0.8;
}
@keyframes esotericSpin { 100% { transform: rotate(360deg); } }

/* --- YENİ MODERN ZAFER MODALI EKRANI (FİNİŞ EKRANI) --- */
#victory-modal {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5);
}

#v-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    border-radius:36px;
    width:100%;
    max-width:400px;
    max-height:90vh;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    transform:scale(.9);
    opacity:0;
    animation:vPopIn .6s cubic-bezier(.34,1.56,.64,1) forwards;
    will-change: transform, opacity;
}

@keyframes vPopIn{to{transform:scale(1);opacity:1}}
.v-header{position:relative;padding:45px 20px 20px;display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,transparent 100%)}
.v-glow{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);width:160px;height:160px;border-radius:50%;filter:blur(45px);opacity:.65;z-index:0;animation:vGlowPulse 2.5s infinite alternate ease-in-out;pointer-events:none}
@keyframes vGlowPulse{from{transform:translate(-50%,-50%) scale(.8);opacity:.4}to{transform:translate(-50%,-50%) scale(1.2);opacity:.8}}
.v-avatar{position:relative;z-index:1;font-size:60px;width:110px;height:110px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:50%;box-shadow:0 12px 30px rgba(0,0,0,.15),inset 0 -4px 12px rgba(0,0,0,.05);border:4px solid #fff;animation:vFloat 3.5s ease-in-out infinite;overflow:hidden;}
@keyframes vFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.v-badge{position:relative;z-index:2;margin-top:-14px;background:#1d1d1f;color:#fff;font-size:11px;font-weight:800;padding:6px 18px;border-radius:20px;letter-spacing:1px;text-transform:uppercase;box-shadow:0 6px 15px rgba(0,0,0,.2);border:2px solid #fff}
.v-body{padding:15px 25px 20px;text-align:center;position:relative;z-index:1}
.v-name{margin:0;font-size:30px;font-weight:800;letter-spacing:-1px;color:var(--text-main);line-height:1.1}
.v-subtitle{margin:6px 0 22px;font-size:15px;font-weight:600;color:var(--text-secondary)}
.v-actions{display:flex;gap:15px;justify-content:center;margin-bottom:25px;padding:0 25px}
.v-btn-icon{width:54px;height:54px;border-radius:18px;background:#fff;border:1px solid rgba(0,0,0,.03);color:var(--c);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 8px 20px rgba(0,0,0,.06)}
.v-footer{padding:0 25px 25px;display:flex;flex-direction:column;gap:10px}
.v-btn{margin:0!important;height:54px;border-radius:20px!important;font-size:16px!important;box-shadow:0 8px 20px rgba(0,122,255,.2)}
.v-btn-alt{margin:0!important;height:54px;border-radius:20px!important;background:rgba(0,0,0,.04)!important;color:var(--text-main)!important;font-size:15px!important;box-shadow:none;border:1px solid transparent}

#victory-stats {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 20px;
    height: auto !important; 
    overflow: visible !important; 
}

.v-modern-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v-summary-header {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-muted, #86868b);
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.v-kills-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v-kill-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.v-kill-icon { font-size: 14px; }
.v-v-text { color: var(--text-secondary); font-weight: 600; font-size: 11px; }
.v-k-count { margin-left: auto; color: var(--text-secondary); font-weight: 800; }

.v-friendly-game {
    text-align: center;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    padding: 15px 0;
}
.v-friendly-game span { font-size: 24px; margin-bottom: 5px; display: block; }

.v-rewards-banner {
    border-radius: 10px;
    border: 1px solid;
    padding: 10px;
    font-weight: 800;
    font-size: 13px;
    text-align: center;
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.v-rewards-banner span:first-child { font-size: 18px; }

#stats-menu{position:fixed;top:max(20px,env(safe-area-inset-top));left:50%;width:100%;max-width:min(90vw, 420px);background:rgba(255,255,255,.85);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.6);border-radius:24px;padding:16px;box-shadow:0 15px 40px rgba(0,0,0,.15);z-index:4000;display:none;flex-direction:column;box-sizing:border-box}
@keyframes slideDown{from{transform:translate(-50%,-150%);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes slideUp{from{transform:translate(-50%,0);opacity:1}to{transform:translate(-50%,-150%);opacity:0}}

/* --- MODERN AÇILIR MENÜ (ACCORDION) TASARIMLARI --- */
.modern-accordion {
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.dark-theme .modern-accordion { 
    background: rgba(255,255,255,0.02); 
    border-color: rgba(255,255,255,0.05); 
}
.modern-accordion.active {
    background: rgba(255,255,255,0.6);
    border-color: var(--apple-blue);
    box-shadow: 0 8px 25px rgba(0,122,255,0.15);
}
body.dark-theme .modern-accordion.active { 
    background: rgba(0,0,0,0.2); 
}
.acc-header {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.acc-icon {
    font-size: 12px;
    color: var(--text-secondary);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modern-accordion.active .acc-icon {
    transform: rotate(180deg);
    color: var(--apple-blue);
}
.acc-body {
    padding: 0 16px 16px 16px;
    display: none;
    animation: fadeIn 0.4s ease;
}