/* Sayfa geneli: koyu tema, kaydırma yok */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0d0d14;
    font-family: "Segoe UI", Arial, sans-serif;
}

/* Arena canvas'ı tüm ekranı kaplar */
#arena {
    display: block;
    width: 100%;
    height: 100%;
}

/* Üstteki oyun başlığı: BATTLE of HOCA */
.mode-tabs {
    position: fixed; top: 14px; left: 16px; z-index: 30; display: flex; gap: 6px;
    padding: 5px; border: 1px solid rgba(130, 135, 210, 0.28); border-radius: 13px;
    background: rgba(12, 13, 25, 0.84); backdrop-filter: blur(14px); box-shadow: 0 8px 26px rgba(0,0,0,.38);
}
.mode-tab { padding: 8px 12px; border-radius: 9px; color: rgba(225,228,255,.62); font-size: 12px; font-weight: 800; text-decoration: none; transition: .18s ease; }
.mode-tab:hover { color: #fff; background: rgba(255,255,255,.08); }
.mode-tab.active { color: #fff; background: linear-gradient(135deg, rgba(255,90,55,.34), rgba(82,118,255,.32)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }

/* İlk açılışta iki oyunu büyük kartlarla sunan oyun kapısı. */
.game-portal{display:none;position:fixed;inset:0;z-index:1000;place-items:center;overflow:hidden;padding:34px;background:radial-gradient(circle at 50% 42%,#202746 0,#0a0d19 48%,#03050b 100%);color:#fff;font-family:Inter,"Segoe UI",sans-serif}
.game-entry .game-portal{display:grid}.game-entry body{overflow:hidden}
.portal-content{position:relative;z-index:2;width:min(1180px,100%);text-align:center}
.portal-kicker{margin:0 0 8px;color:#9ba9c9;font-size:12px;font-weight:900;letter-spacing:6px}
.game-portal h1{margin:0 0 34px;font-size:clamp(42px,7vw,92px);line-height:.95;letter-spacing:-4px;text-shadow:0 8px 34px #0008}
.portal-games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.portal-game{position:relative;display:flex;min-height:390px;flex-direction:column;align-items:flex-start;justify-content:flex-end;overflow:hidden;padding:36px;border:1px solid #ffffff30;border-radius:28px;color:#fff;text-align:left;text-decoration:none;box-shadow:0 28px 80px #0009;isolation:isolate;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}
.portal-game::before{content:"";position:absolute;z-index:-2;inset:0;transition:transform .4s ease,filter .4s ease}
.portal-game::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,transparent 10%,rgba(2,5,12,.18) 40%,rgba(2,5,12,.95) 100%)}
.portal-battle::before{background:radial-gradient(circle at 25% 20%,#ffb13b88,transparent 34%),radial-gradient(circle at 75% 35%,#e7305788,transparent 38%),linear-gradient(135deg,#561a1d,#24112e 55%,#0b1020)}
.portal-race::before{background:radial-gradient(circle at 70% 15%,#6af4ff99,transparent 32%),radial-gradient(circle at 25% 40%,#8468ff99,transparent 38%),linear-gradient(135deg,#102f56,#15264c 52%,#09111f)}
.portal-game:hover{transform:translateY(-8px);border-color:#ffffff9c;box-shadow:0 38px 90px #000b,0 0 45px #78ddff24}.portal-game:hover::before{transform:scale(1.06);filter:saturate(1.2)}
.portal-icon{position:absolute;top:30px;right:34px;width:84px;height:84px;display:grid;place-items:center;border:1px solid #ffffff4a;border-radius:50%;background:#ffffff16;font-size:42px;box-shadow:inset 0 0 25px #ffffff12}
.portal-game small{margin-bottom:8px;color:#b8c5dd;font-size:11px;font-weight:900;letter-spacing:3px}
.portal-game strong{max-width:520px;font-size:clamp(35px,4.2vw,64px);line-height:.92;letter-spacing:-2px}.portal-game strong em{color:#ffbd54;font-style:normal}.portal-race strong em{color:#6cecff}
.portal-game p{max-width:490px;margin:18px 0 25px;color:#c2cada;font-size:14px;line-height:1.55}
.portal-game b{font-size:13px;letter-spacing:2px}.portal-game b span{display:inline-block;margin-left:7px;font-size:20px;transition:transform .2s}.portal-game:hover b span{transform:translateX(7px)}
.portal-glow{position:absolute;width:430px;height:430px;border-radius:50%;filter:blur(90px);opacity:.2}.portal-glow-one{top:-180px;left:-100px;background:#ff543d}.portal-glow-two{right:-120px;bottom:-220px;background:#46dfff}
@media(max-width:760px){.game-portal{padding:18px}.portal-kicker{letter-spacing:4px}.game-portal h1{margin-bottom:22px;letter-spacing:-2px}.portal-games{grid-template-columns:1fr;gap:13px}.portal-game{min-height:245px;padding:24px;border-radius:21px}.portal-icon{top:20px;right:22px;width:58px;height:58px;font-size:28px}.portal-game p{margin:12px 70px 16px 0;font-size:12px}}
@media(max-width:760px) and (max-height:700px){.portal-kicker{display:none}.game-portal h1{margin-bottom:14px;font-size:36px}.portal-game{min-height:196px;padding:20px}.portal-game strong{font-size:31px}.portal-game p{display:none}.portal-game b{margin-top:14px}.portal-icon{width:50px;height:50px;font-size:24px}}

.game-title {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-weight: 900;
    user-select: none;
    pointer-events: none;
    animation: titleGlow 2.5s ease-in-out infinite alternate;
}

/* "BATTLE": ateş kırmızısı degrade */
.t-battle {
    font-size: 30px;
    letter-spacing: 5px;
    background: linear-gradient(180deg, #ffd9a0, #ff7b3d 45%, #e6262b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 14px rgba(255, 80, 40, 0.55))
            drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
    transform: skewX(-6deg);
}

/* "of": küçük, sade, italik */
.t-of {
    font-size: 16px;
    font-style: italic;
    font-weight: 600;
    color: rgba(230, 230, 255, 0.65);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* "HOCA": buz mavisi degrade */
.t-hoca {
    font-size: 30px;
    letter-spacing: 5px;
    background: linear-gradient(180deg, #eaffff, #6fd6ff 45%, #2b6fe6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 14px rgba(70, 150, 255, 0.55))
            drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
    transform: skewX(-6deg);
}

/* Başlığın hafifçe nefes alan ışıması */
@keyframes titleGlow {
    from { opacity: 0.92; transform: translateX(-50%) scale(1); }
    to   { opacity: 1;    transform: translateX(-50%) scale(1.03); }
}

/* Üst köşedeki yeniden başlat butonu */
.restart-btn {
    position: fixed;
    top: 16px;
    right: 16px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: #fff;
    background: linear-gradient(135deg, #2b2b45, #1a1a2e);
    border: 1px solid rgba(140, 140, 255, 0.35);
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.15s ease;
}

.restart-btn:hover {
    border-color: rgba(160, 160, 255, 0.7);
    box-shadow: 0 4px 20px rgba(110, 110, 255, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.restart-btn:active {
    transform: translateY(1px);
}

.hidden {
    display: none !important;
}

/* ============ Savaş sırasındaki karakter panelleri ============ */
.fighter-panel {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 250px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 14px 15px;
    background: linear-gradient(160deg, rgba(34, 34, 58, 0.92), rgba(14, 14, 26, 0.95));
    border: 1px solid rgba(140, 140, 255, 0.3);
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.07);
    z-index: 5;
    user-select: none;
    /* HP/durum değişikliklerini panel içinde sınırlar; arena ve menü yeniden
       yerleştirilmez ya da boyanmaz. */
    contain: layout paint style;
}

/* Savaş sırasında dekoratif başlık animasyonu yerine sabit görüntü kullan. */
body.battle-running .game-title { animation: none; }

.fighter-panel.left { left: 20px; }
.fighter-panel.right { right: 20px; }

.p-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.p-emoji {
    font-size: 38px;
    line-height: 1;
}

.p-names { min-width: 0; }

.p-name {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.p-code {
    font-size: 11px;
    font-style: italic;
    color: rgba(230, 230, 255, 0.5);
}

.p-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
}

/* Can barı */
.p-hp-wrap { margin-top: 11px; }

.p-hp-bar {
    height: 15px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

.p-hp-fill {
    height: 100%;
    width: 100%;
    border-radius: 8px;
    transition: width 0.12s linear;
}

.p-hp-text {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

.p-weapon {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #dfe4ff;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 7px;
    padding: 5px 9px;
    text-align: center;
}

/* İstatistik listesi: iki sütun */
.p-stats {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px 10px;
}

.p-stat {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: rgba(230, 230, 255, 0.72);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 2px;
}

.p-stat b { color: #fff; }

.p-passive {
    margin-top: 11px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #cfe3ff;
    background: rgba(110, 140, 255, 0.1);
    border: 1px solid rgba(110, 140, 255, 0.25);
    border-radius: 8px;
    padding: 7px 9px;
}

/* Durum başlığı */
.p-durum-baslik {
    margin-top: 12px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: rgba(230, 230, 255, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 3px;
}

/* Anlık durumlar (kalkan, yanma, öfke...) */
.p-live {
    margin-top: 7px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 26px;
}

.p-live-item {
    font-size: 11.5px;
    font-weight: 700;
    color: #ffe6a8;
    background: rgba(255, 190, 80, 0.14);
    border: 1px solid rgba(255, 190, 80, 0.35);
    border-radius: 7px;
    padding: 3px 8px;
}

.p-live-item.ok {
    color: #b9f6c4;
    background: rgba(120, 240, 150, 0.1);
    border-color: rgba(120, 240, 150, 0.28);
}

.p-live-item.bad {
    color: #ffc7a8;
    background: rgba(255, 110, 60, 0.14);
    border-color: rgba(255, 110, 60, 0.4);
}

.p-live-item.shield {
    color: #a5f3fc;
    background: rgba(103, 232, 249, 0.14);
    border-color: rgba(103, 232, 249, 0.45);
}

.p-live-item.latch {
    color: #ffb3c1;
    background: rgba(255, 45, 85, 0.15);
    border-color: rgba(255, 45, 85, 0.45);
}

.p-live-item.rage {
    color: #ffd0a8;
    background: rgba(255, 90, 50, 0.16);
    border-color: rgba(255, 90, 50, 0.5);
}

.p-live-item.guard {
    color: #dbe6f5;
    background: rgba(190, 210, 240, 0.12);
    border-color: rgba(190, 210, 240, 0.4);
}

.p-ozel-etki {
    font-size: 10.5px;
    color: rgba(255, 235, 215, 0.75);
}

.ozel-element {
    font-size: 10px;
    font-weight: 600;
    color: #ffd98a;
    opacity: 0.85;
}

/* Kartlardaki özel yetenek kutusu */
.card-passive.special {
    color: #ffd9b0;
    background: rgba(255, 150, 80, 0.1);
    border-color: rgba(255, 150, 80, 0.28);
}

/* Özel yetenek bekleme çubuğu */
.p-cd {
    margin-top: 5px;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
}

.p-cd-fill {
    height: 100%;
    width: 0;
    border-radius: 3px;
    transition: width 0.12s linear;
}

/* Dar ekranlarda paneller arenayı kapatmasın */
@media (max-width: 1100px) {
    .fighter-panel { width: 200px; font-size: 90%; }
    .fighter-panel.left { left: 8px; }
    .fighter-panel.right { right: 8px; }
}

/* ============ Karakter seçim ekranı ============ */
.menu-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* İçerik ekranı aşarsa flex merkezleme üst kısmı görünmez yapıyordu.
       Baştan yerleştirip kendi içinde kaydırmak tüm Chrome ölçeklerinde
       kadro düğmelerini erişilebilir tutar. */
    justify-content: flex-start;
    gap: clamp(10px, 2.2vh, 26px);
    background: rgba(5, 5, 12, 0.55);
    backdrop-filter: blur(5px);
    z-index: 10;
    padding: 70px 16px 24px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.menu-overlay > * { flex-shrink: 0; }

.menu-heading {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 6px;
    color: #e8e8ff;
    text-shadow: 0 0 18px rgba(120, 120, 255, 0.5);
}

.select-row {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    justify-content: center;
}

.vs-text {
    font-size: 42px;
    font-weight: 900;
    font-style: italic;
    background: linear-gradient(180deg, #fff, #999);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}

/* Karakter kartı */
.char-card {
    width: 270px;
    background: linear-gradient(160deg, rgba(40, 40, 70, 0.9), rgba(18, 18, 32, 0.95));
    border: 1px solid rgba(140, 140, 255, 0.35);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.card-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.nav-btn {
    width: 38px;
    height: 38px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s;
}

.nav-btn:hover {
    background: rgba(140, 140, 255, 0.35);
}

.card-emoji {
    font-size: 54px;
    line-height: 1.1;
}

.card-name {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 1px;
}

.card-code {
    font-size: 12px;
    font-style: italic;
    color: rgba(230, 230, 255, 0.55);
    margin-top: -6px;
}

.card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.tag {
    font-size: 11px;
    font-weight: 600;
    color: #d5d5f0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 2px 9px;
}

.tag.element {
    color: #ffd98a;
    border-color: rgba(255, 200, 100, 0.4);
}

/* Mini istatistik barları */
.card-stats {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.stat-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-label {
    width: 46px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(230, 230, 255, 0.7);
    text-align: right;
}

.stat-bar {
    flex: 1;
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    overflow: hidden;
}

.stat-fill {
    height: 100%;
    background: linear-gradient(90deg, #6a8cff, #9a6aff);
    border-radius: 4px;
}

.stat-value {
    width: 26px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.card-passive {
    font-size: 11.5px;
    line-height: 1.4;
    color: #cfe3ff;
    background: rgba(110, 140, 255, 0.1);
    border: 1px solid rgba(110, 140, 255, 0.25);
    border-radius: 8px;
    padding: 6px 10px;
    text-align: center;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-passive-title,
.card-passive-desc { display: block; }
.card-passive-desc { margin-top: 3px; }

.dice-btn {
    margin-top: 2px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.dice-btn:hover {
    background: rgba(255, 200, 80, 0.25);
}

/* Kartta silah satırı */
.card-weapon {
    font-size: 11px;
    font-weight: 600;
    color: #dfe4ff;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 7px;
    padding: 4px 8px;
    text-align: center;
    width: 100%;
}

.char-count {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgba(230, 230, 255, 0.55);
}

.roster-switch{position:sticky;top:0;z-index:12;display:flex;justify-content:center;gap:10px;margin:0 auto;padding:6px;width:min(430px,92vw);border:1px solid rgba(255,255,255,.12);border-radius:15px;background:rgba(8,10,20,.92);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.roster-btn{flex:1;padding:11px 14px;border:1px solid transparent;border-radius:10px;background:transparent;color:rgba(225,230,255,.55);font-size:11px;font-weight:900;letter-spacing:1.2px;cursor:pointer;transition:.2s}
.roster-btn:hover{color:#fff;background:rgba(255,255,255,.07)}
.roster-btn.active{color:#fff;border-color:rgba(105,160,255,.45);background:linear-gradient(135deg,rgba(65,105,255,.36),rgba(85,210,255,.18));box-shadow:0 6px 20px rgba(30,80,255,.2)}
.roster-btn.special.active{border-color:rgba(255,198,70,.62);background:linear-gradient(135deg,rgba(255,157,45,.35),rgba(255,51,104,.2));box-shadow:0 6px 24px rgba(255,120,30,.2)}
.special-roster-active .menu-heading{color:#ffd45f;text-shadow:0 0 22px rgba(255,176,40,.38)}
.special-roster-active .grid-item{border-color:rgba(255,194,71,.2)}

/* ============ Karakter listesi (arama + ızgara) ============ */
.browser {
    width: min(1000px, 94vw);
    background: rgba(12, 12, 24, 0.75);
    border: 1px solid rgba(140, 140, 255, 0.25);
    border-radius: 14px;
    padding: 12px;
}

.browser-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.search-input {
    flex: 1 1 240px;
    min-width: 180px;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9px;
    outline: none;
}

.search-input:focus { border-color: rgba(150, 150, 255, 0.7); }
.search-input::placeholder { color: rgba(230, 230, 255, 0.4); }

.filter-select {
    padding: 9px 10px;
    font-size: 13px;
    font-family: inherit;
    color: #fff;
    background: #1c1c30;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9px;
    outline: none;
    cursor: pointer;
}

.pick-target {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(230, 230, 255, 0.7);
}

.pick-btn {
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
}

.pick-btn.active {
    background: linear-gradient(135deg, #4a6aff, #2b3fb0);
    border-color: rgba(180, 190, 255, 0.7);
}

/* Karakter ızgarası */
.char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 7px;
    max-height: 34vh;
    overflow-y: auto;
    padding-right: 4px;
}

/* 1366x768 ve benzeri dizüstü ekranlarında tarayıcı yakınlaştırmasına ihtiyaç
   bırakmadan seçim kartlarını otomatik olarak sıkıştır. */
@media (max-height: 900px) {
    .menu-overlay { padding: 58px 12px 18px; gap: 9px; }
    .menu-heading { font-size: 20px; letter-spacing: 4px; }
    .roster-switch { width: min(390px, 92vw); padding: 4px; }
    .roster-btn { padding: 8px 10px; }
    .select-row { gap: 16px; }
    .char-card { width: 244px; padding: 10px; gap: 4px; }
    .card-emoji { font-size: 40px; }
    .nav-btn { width: 32px; height: 32px; font-size: 19px; }
    .card-name { font-size: 17px; }
    .card-stats { gap: 2px; margin-top: 1px; }
    .card-passive { min-height: 38px; padding: 4px 8px; }
    .card-passive-desc {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
    .big-btn { padding: 10px 28px; font-size: 16px; }
    .browser { padding: 9px; }
    .browser-bar { margin-bottom: 7px; }
    .char-grid { max-height: 24vh; }
}

@media (max-height: 700px) {
    .menu-overlay { padding-top: 52px; gap: 7px; }
    .menu-heading { font-size: 17px; letter-spacing: 3px; }
    .char-card { width: 226px; padding: 8px; }
    .card-emoji { font-size: 34px; }
    .card-passive { font-size: 10px; line-height: 1.25; }
    .card-passive-desc { -webkit-line-clamp: 1; line-clamp: 1; }
    .card-weapon { padding: 2px 6px; }
    .dice-btn { padding: 5px 12px; }
    .char-grid { max-height: 20vh; }
}

@media (max-width: 620px) {
    .menu-overlay { align-items: stretch; padding-inline: 10px; }
    .menu-heading { text-align: center; }
    .select-row { flex-wrap: nowrap; gap: 7px; align-items: stretch; }
    .char-card { width: calc((100vw - 54px) / 2); min-width: 0; padding: 7px; }
    .vs-text { align-self: center; font-size: 25px; }
    .card-tags .tag:nth-child(2) { display: none; }
    .card-passive { font-size: 9.5px; }
    .browser { width: 100%; }
}

.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 5px;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s, transform 0.12s;
}

.grid-item:hover {
    background: rgba(120, 130, 255, 0.22);
    border-color: rgba(160, 170, 255, 0.6);
    transform: translateY(-2px);
}

.gi-emoji { font-size: 22px; line-height: 1.2; }

.gi-name {
    font-size: 11.5px;
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
}

.gi-sub {
    font-size: 9.5px;
    color: rgba(230, 230, 255, 0.5);
    text-align: center;
}

.grid-empty {
    grid-column: 1 / -1;
    padding: 20px;
    text-align: center;
    color: rgba(230, 230, 255, 0.5);
    font-size: 13px;
}

/* Panelde özel yetenek ve güçlü/zayıf satırları */
.p-passive.special {
    color: #ffd9b0;
    background: rgba(255, 150, 80, 0.1);
    border-color: rgba(255, 150, 80, 0.28);
}

.p-vs {
    margin-top: 9px;
    font-size: 10.5px;
    line-height: 1.45;
    color: rgba(230, 230, 255, 0.62);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.p-vs b { color: rgba(255, 255, 255, 0.85); }

/* Kazanan ekranındaki buton satırı */
.winner-buttons {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
}

.big-btn.secondary {
    background: linear-gradient(135deg, #3a3a5c, #22223a);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.big-btn.secondary:hover {
    background: linear-gradient(135deg, #4a4a72, #2c2c4a);
    box-shadow: 0 8px 28px rgba(90, 90, 200, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Ses açma/kapama butonu */
.sound-btn {
    position: fixed;
    top: 16px;
    right: 178px;
    width: 42px;
    height: 42px;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(135deg, #2b2b45, #1a1a2e);
    border: 1px solid rgba(140, 140, 255, 0.35);
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    transition: all 0.15s ease;
    z-index: 6;
}

.sound-btn:hover {
    border-color: rgba(160, 160, 255, 0.7);
    transform: translateY(-1px);
}

.sound-btn.kapali {
    opacity: 0.5;
    border-color: rgba(255, 120, 120, 0.5);
}

/* Savaş sırasında görünen, yarım saniyede bir yenilenen hafif FPS sayacı. */
.fps-counter {
    position: fixed;
    left: 16px;
    bottom: 14px;
    z-index: 31;
    min-width: 66px;
    padding: 7px 10px;
    border: 1px solid rgba(95, 244, 238, 0.28);
    border-radius: 9px;
    background: rgba(4, 13, 22, 0.76);
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.38);
    color: #70fff5;
    font: 800 11px/1 "Segoe UI", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.8px;
    text-align: center;
    pointer-events: none;
    user-select: none;
    contain: layout paint style;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

body.battle-running .fps-counter {
    opacity: 1;
    transform: translateY(0);
}

.fps-counter.medium {
    color: #ffd45e;
    border-color: rgba(255, 212, 94, 0.4);
}

.fps-counter.low {
    color: #ff7783;
    border-color: rgba(255, 92, 108, 0.48);
}

@media (max-width: 760px) {
    .fps-counter {
        left: 8px;
        bottom: 8px;
        min-width: 60px;
        padding: 6px 8px;
        font-size: 10px;
    }
}

/* Kazanan ekranı: tüm ekranı kaplayan yarı saydam katman */
.winner-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    background: rgba(5, 5, 12, 0.6);
    backdrop-filter: blur(6px);
    z-index: 10;
}

.winner-overlay.hidden {
    display: none;
}

.winner-text {
    font-size: clamp(36px, 8vw, 96px);
    font-weight: 900;
    letter-spacing: 3px;
    background: linear-gradient(180deg, #fff6c8, #ffd700 55%, #ff9d00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 25px rgba(255, 200, 40, 0.55))
            drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
    text-align: center;
    animation: winnerPop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes winnerPop {
    0% { transform: scale(0.2) rotate(-4deg); opacity: 0; }
    70% { transform: scale(1.12) rotate(1deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.big-btn {
    padding: 15px 36px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(135deg, #43a047, #1b5e20);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(30, 120, 40, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.15s ease;
}

.big-btn:hover {
    background: linear-gradient(135deg, #52b657, #26702b);
    transform: scale(1.05);
    box-shadow: 0 8px 28px rgba(50, 180, 70, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.big-btn:active {
    transform: scale(0.98);
}

@media (max-height: 900px) {
    .big-btn { padding: 10px 28px; font-size: 16px; }
}