/* =========================
   OSNOVNI SLOGI
   ========================= */
body {
    background: #111;
    color: white;
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 20px;
    position: relative; /* Omogoča pravilno pozicioniranje gumba na vrh strani */
}

.emoji {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

h1 {
    margin-bottom: 30px;
}

button {
    padding: 10px 15px;
    margin: 5px;
    font-size: 16px;
    cursor: pointer;
    background: #222;
    color: white;
    border: 1px solid #777;
    border-radius: 6px;
}

button:hover {
    background-color: #444;
}

#gamePageTransition { position:fixed; inset:0; z-index:999999; pointer-events:none; background:#090a0d; opacity:1; transition:opacity .16s ease; }
#gamePageTransition.ready { opacity:0; }
#gamePageTransition.cover { opacity:1; }

.game-settings-button { position:fixed; z-index:10010; left:16px; bottom:16px; min-height:34px; margin:0; padding:7px 11px; border-color:#69558d; background:rgba(25,21,32,.9); color:#cdbaf2; font-size:10px; font-weight:bold; letter-spacing:.06em; backdrop-filter:blur(7px); }
body.battle-mode .game-settings-button,body.gacha-pull-transition .game-settings-button { display:none; }
.game-settings-overlay { position:fixed; inset:0; z-index:240000; display:none; place-items:center; padding:20px; background:rgba(0,0,0,.8); backdrop-filter:blur(8px); }
.game-settings-overlay.open { display:grid; }
.game-settings-overlay section { position:relative; display:grid; gap:18px; width:min(390px,92vw); padding:27px; box-sizing:border-box; border:1px solid #7b5cac; border-radius:16px; background:linear-gradient(145deg,#20182d,#0d0e14); color:#fff; box-shadow:0 22px 70px rgba(0,0,0,.65); text-align:left; }
.game-settings-overlay h2 { margin:0; font-size:25px; }.game-settings-overlay section>small { color:#b99ae8; font-weight:bold; letter-spacing:.15em; }.game-settings-overlay label { display:grid; gap:10px; }.game-settings-overlay label span,.settings-view-choice>span { display:flex; justify-content:space-between; color:#bbb4c5; font-size:11px; font-weight:bold; letter-spacing:.08em; }.game-settings-overlay input[type=range] { width:100%; accent-color:#895ce8; }.settings-view-choice { display:grid; gap:9px; }.settings-view-choice>div { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.settings-view-choice button { margin:0; color:#aaa; font-size:11px; }.settings-view-choice button.active { border-color:#8c63e8; background:#38245d; color:#fff; box-shadow:0 0 14px rgba(137,92,232,.3); }.settings-close { position:absolute; top:8px; right:8px; min-width:32px; margin:0; padding:3px; border:0; background:transparent; font-size:23px; }

.auto-scroll-name {
    display:block;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
}

.auto-scroll-name-track {
    display:inline-block;
    min-width:max-content;
    will-change:transform;
}

.auto-scroll-name.is-overflowing .auto-scroll-name-track {
    animation:autoNameScroll 8s ease-in-out infinite alternate;
}

@keyframes autoNameScroll {
    0%,15% { transform:translateX(0); }
    85%,100% { transform:translateX(calc(-1 * var(--name-scroll-distance))); }
}

@media (prefers-reduced-motion:reduce) {
    .auto-scroll-name.is-overflowing .auto-scroll-name-track { animation:none; }
}

/* Universal non-avatar character art format: portrait 4:5 (recommended source 1024x1280). */
.character-portrait {
    display: block;
    aspect-ratio: 4 / 5;
    object-fit: contain !important;
    border-radius: 8px !important;
    background: #090a0f;
}

.community-role.role-streamer { color:#4da8ff !important; }
.community-role.role-stream-support { color:#b56cff !important; }
.community-role.role-trollganger { color:#52d878 !important; }

#menu button {
    display: block;
    margin: 10px auto;
}

/* =========================
   GUMB IN HUD (POZICIJA NA VRHU STRANI, KI SE SKROLA)
   ========================= */
#returnHomeButton {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 9999 !important;
    background: #222 !important;
    color: white !important;
    border: 1px solid #777 !important;
    border-radius: 6px !important;
    margin: 0 !important;
}

#returnHomeButton:hover {
    background: #444 !important;
}

#playerCurrencyHUD {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 8px 11px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: white;
    font-size: 13px;
    font-weight: bold;
    z-index: 9998 !important;
    pointer-events: auto;
}

#playerCurrencyHUD div {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 19px;
    line-height: 1;
    white-space: nowrap;
}

#playerCurrencyHUD .global-energy-currency { position:relative; display:flex; align-items:center; gap:5px; color:#ffcc00; cursor:help; }
#playerCurrencyHUD .global-energy-currency > span:not(.energy-hover-popup) { display:flex; align-items:baseline; gap:2px; }
#playerCurrencyHUD .global-energy-currency small { margin-left:4px; color:#91889d; font-size:9px; font-weight:normal; }
#playerCurrencyHUD .energy-hover-popup { position:absolute; top:calc(100% + 10px); right:0; z-index:10020; display:grid; width:190px; gap:8px; padding:11px 13px; transform:translateY(-6px); border:1px solid rgba(210,210,215,.35); border-radius:10px; background:rgba(62,62,66,.88); color:#eee; opacity:0; visibility:hidden; pointer-events:none; box-shadow:0 10px 30px rgba(0,0,0,.38); backdrop-filter:blur(8px); transition:opacity .16s ease,transform .16s ease,visibility .16s; }
#playerCurrencyHUD .global-energy-currency:hover .energy-hover-popup { opacity:1; visibility:visible; transform:translateY(0); }
#playerCurrencyHUD .energy-hover-popup > b { color:#f1f1f1; font-size:9px; letter-spacing:.12em; }
#playerCurrencyHUD .energy-hover-popup > span { display:flex; justify-content:space-between; gap:12px; color:#aaa1b5; font-size:10px; }
#playerCurrencyHUD .energy-hover-popup strong { color:#fff; font-size:11px; }
.currency-collection-particle { position:fixed; z-index:230000; display:grid; place-items:center; width:20px; height:20px; pointer-events:none; font-size:17px; filter:drop-shadow(0 0 6px rgba(255,255,255,.7)); }
.currency-collection-particle.collection-troll-coin { box-sizing:border-box; border:1px solid #bdeeff; border-radius:50%; background:radial-gradient(circle at 32% 28%,#d7fbff 0 8%,#38bdf8 18%,#7047eb 58%,#a21caf 100%); box-shadow:0 0 9px rgba(112,71,235,.8); }
#playerCurrencyHUD .currency-collect-hit { animation:currencyCollectHit .42s ease; }
@keyframes currencyCollectHit { 0%,100%{transform:scale(1)} 45%{transform:scale(1.2);filter:brightness(1.7);text-shadow:0 0 9px currentColor} }

.global-page-back { position:fixed !important; top:10px !important; left:10px !important; right:auto !important; z-index:9997 !important; min-width:106px; margin:0 !important; padding:10px 18px !important; border:1px solid rgba(255,255,255,.22) !important; border-radius:9px !important; background:rgba(35,35,38,.58) !important; color:rgba(255,255,255,.68) !important; font-size:11px !important; font-weight:bold; letter-spacing:.1em; opacity:.5; box-shadow:0 4px 14px rgba(0,0,0,.2); backdrop-filter:blur(7px); transition:opacity .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease !important; }
.global-page-back:hover,.global-page-back:focus-visible { opacity:1; color:#fff !important; border-color:rgba(174,135,255,.8) !important; background:rgba(68,49,94,.9) !important; box-shadow:0 0 18px rgba(132,84,226,.38); transform:translateY(1px); }

.main-profile-card { position: absolute; top: 15px; left: 15px; z-index: 9998; width: 270px; height: 92px; margin: 0; padding: 10px 14px; overflow: hidden; display: flex; align-items: center; gap: 12px; background-color: #171717; background-size: cover; background-position: center; border: 1px solid #666; border-radius: 12px; text-align: left; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.main-profile-card:hover { border-color: #ffcc00; }
.green-team-profile { border-color:#42e87d !important; box-shadow:0 0 12px rgba(66,232,125,.55), inset 0 0 18px rgba(36,190,103,.14) !important; animation:greenTeamProfileBreath 2.8s ease-in-out infinite; }
.green-team-profile img, .green-team-active .profile-avatar { border-color:#42e87d !important; box-shadow:0 0 10px rgba(66,232,125,.62); }
.profile-green-team-badge { position:absolute; z-index:5; right:8px; top:7px; display:none; align-items:center; gap:4px; padding:4px 7px; border:1px solid #48dc7c; border-radius:10px; background:rgba(9,35,19,.9); box-shadow:0 0 10px rgba(66,232,125,.5); color:#73f3a0; font-size:9px; line-height:1; white-space:nowrap; }
.profile-green-team-badge.show { display:flex; }
.profile-green-team-badge b { font-size:8px; line-height:1; letter-spacing:.5px; }
@keyframes greenTeamProfileBreath { 0%,100%{box-shadow:0 0 9px rgba(66,232,125,.35),inset 0 0 14px rgba(36,190,103,.1)} 50%{box-shadow:0 0 22px rgba(66,232,125,.75),0 0 42px rgba(29,150,86,.25),inset 0 0 25px rgba(36,190,103,.2)} }
.main-profile-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.48)); }
.main-profile-card img { position: relative; width: 64px; height: 64px; object-fit: cover; flex: 0 0 auto; border: 2px solid #ffcc00; border-radius: 50%; background: #111; }
.main-profile-info { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 6px; color: white; }
.main-profile-info strong { max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; }
.main-profile-info small { color: #ffcc00; font-size: 11px; }
@media (max-width: 650px) { .main-profile-card { position: relative; top: auto; left: auto; width: min(270px, 90vw); margin: 0 auto 20px; } }

.home-view-toggle { position: absolute; top: 15px; left: 50%; z-index: 9997; display: flex; padding: 3px; transform: translateX(-50%); background: #181818; border: 1px solid #555; border-radius: 9px; }.home-view-toggle button { margin: 0; padding: 7px 12px; border: 0; background-color: transparent; color: #888; font-size: 10px; }.home-view-toggle button.active { background-color: #eee; color: #111; }
.youtube-home { max-width: 1120px; margin: 75px auto 20px; overflow: hidden; background: #0f0f0f; border: 1px solid #333; border-radius: 14px; text-align: left; }.channel-banner { height: 220px; background-size: cover; background-position: center; }.channel-header { display: flex; align-items: center; gap: 20px; padding: 18px 28px; }.channel-header > img { width: 105px; height: 105px; object-fit: cover; border-radius: 50%; border: 3px solid #444; background: #222; }.channel-identity { flex: 1; display: flex; flex-direction: column; gap: 5px; }.channel-identity h1 { margin: 0; font-size: 34px; }.channel-identity span { color: #999; }.channel-identity strong { font-size: 13px; color: #ccc; }.channel-header > button { border-radius: 20px; background-color: #eee; color: #111; font-size: 11px; font-weight: bold; }
.channel-tabs { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid #333; }.channel-tabs button { margin: 0; padding: 13px 16px; border: 0; border-bottom: 2px solid transparent; background-color: transparent; color: #aaa; font-size: 11px; }.channel-tabs button.active { border-bottom-color: white; color: white; }
.channel-content { padding: 25px; }.channel-featured { display: grid; grid-template-columns: minmax(240px, 42%) 1fr; align-items: center; gap: 24px; padding-bottom: 25px; border-bottom: 1px solid #333; }.channel-featured-art { min-height: 180px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #321919, #171717); border-radius: 10px; color: #eee; font-size: 42px; }.channel-featured small { color: #999; }.channel-featured h2 { margin: 7px 0; }.channel-featured p { color: #aaa; }.channel-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 15px; margin-top: 24px; }.channel-actions button { min-height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-color: #3e3e3e; background-color: #181818; }.channel-actions button span { font-size: 28px; }.channel-actions button strong { font-size: 11px; }
@media (max-width: 700px) { .youtube-home { margin-top: 65px; }.channel-banner { height: 150px; }.channel-header { flex-direction: column; text-align: center; }.channel-identity { align-items: center; }.channel-featured { grid-template-columns: 1fr; }.channel-actions { grid-template-columns: 1fr; }.channel-tabs { overflow-x: auto; } }

.shard-currency-button { cursor: pointer; transition: color .2s, transform .2s; }
.shard-currency-button:hover, .shard-currency-button:focus { color: #66c9ff; transform: translateY(-1px); outline: none; }
.shard-storage-modal { display: none; position: fixed; inset: 0; z-index: 200000; background: rgba(0, 0, 0, .82); align-items: center; justify-content: center; padding: 20px; }
.shard-storage-modal.open { display: flex; }
.shard-storage-box { position: relative; width: min(680px, 92vw); max-height: 80vh; overflow-y: auto; padding: 28px; border: 2px solid #4ea7d8; border-radius: 14px; background: #151820; box-shadow: 0 12px 45px rgba(0, 0, 0, .7); }
.shard-storage-box > p { color: #aaa; }
.shard-storage-close { position: absolute; top: 8px; right: 12px; margin: 0; border: 0; background: transparent; font-size: 30px; }
.shard-storage-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 20px; }
.shard-storage-item { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #4ea7d8; border-radius: 9px; background: #202633; text-align: left; }
.shard-storage-item.empty { opacity: .5; border-color: #555; }
.shard-storage-item img { width: 58px; height: 58px; object-fit: cover; border-radius: 50%; border: 2px solid #777; }
.shard-storage-item div { display: flex; flex-direction: column; gap: 6px; }
.shard-storage-item span { color: #66c9ff; font-size: 18px; font-weight: bold; }

.quest-button { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 9000; width: 58px; height: 58px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 2px solid #c99b31; border-radius: 50%; background-color: #242018; box-shadow: 0 6px 20px rgba(0,0,0,.55); font-size: 26px; }
.quest-button:hover { background-color: #3a3120; }.quest-button small { position: absolute; right: -5px; top: -5px; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: #e34848; color: white; font-size: 11px; }
.quest-popup { display: none; position: fixed; inset: 0; z-index: 220000; padding: 20px; background: rgba(0,0,0,.82); align-items: center; justify-content: center; }.quest-popup.open { display: flex; }
.quest-popup-box { position: relative; width: min(580px, 92vw); max-height: 82vh; overflow-y: auto; padding: 26px; background: #17191f; border: 1px solid #876c32; border-radius: 14px; }.quest-popup-close { position: absolute; top: 7px; right: 10px; margin: 0; border: 0; background: transparent; font-size: 28px; }
.quest-group { margin-top: 18px; padding: 14px; background: #202229; border: 1px solid #444; border-radius: 10px; }.quest-group h3 { margin: 0 0 10px; color: #ffcc00; text-align: left; }
.quest-item { display: grid; grid-template-columns: 38px 1fr minmax(62px, auto); align-items: center; gap: 10px; padding: 11px; margin: 7px 0; background: #14161b; border: 1px solid #444; border-radius: 8px; text-align: left; }.quest-item.complete { border-color: #3d9b58; }.quest-icon { font-size: 23px; }.quest-info { min-width: 0; }.quest-info strong { display: block; font-size: 13px; }.quest-reward { display: block; margin-top: 4px; color: #ffcc00; }.quest-item > b { text-align: right; color: #999; font-size: 10px; }.quest-claim-button { margin: 0; padding: 8px 10px; border-color: #4fb66e; background-color: #183a22; color: #76ed98; font-size: 11px; }
.quest-progress { height: 7px; margin-top: 7px; overflow: hidden; background: #333; border-radius: 5px; }.quest-progress span { display: block; height: 100%; background: linear-gradient(90deg, #b48525, #ffcc00); }

/* =========================
   POSTAVITEV EKIPE IN KART
   ========================= */
.team {
    display: grid;
    grid-template-columns: repeat(3, 120px);
    grid-template-rows: repeat(2, 165px);
    gap: 35px 45px;
    justify-content: center;
    align-items: center;
}

.formation-slot {
    width: 120px;
    height: 150px;
    position: relative;
    overflow: visible;
}

.formation-slot:nth-child(4) {
    grid-column: 1;
    margin-left: 80px;
}

.formation-slot:nth-child(5) {
    grid-column: 2;
    margin-left: 80px;
}

.card {
    background: #222;
    border: 2px solid #666;
    border-radius: 10px;
    width: 120px;
    height: 150px;
    padding: 6px;
    box-sizing: border-box;
    cursor: pointer;
    transition: .2s;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.card:hover {
    transform: scale(1.05);
}

.card img {
    border-radius: 50%;
    object-fit: cover;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
}

.card h3 { width: 100%; margin: 1px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 15px; }
.card-meta { width: 100%; min-height: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; color: #bbb; font-size: 10px; line-height: 12px; }
.card-stats { width: 100%; margin-top: auto; display: flex; flex-direction: column; gap: 1px; }

/* Full-art offline battle card experiment. */
.offline-game #battle .card {
    overflow: hidden;
    justify-content: flex-start;
    padding: 7px;
    isolation: isolate;
    background: #090a0f;
}

.offline-game #battle .card::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(2,3,6,.82) 0%, rgba(2,3,6,.18) 27%, rgba(2,3,6,.08) 47%, rgba(2,3,6,.9) 76%, rgba(2,3,6,.98) 100%);
}

.offline-game #battle .card .battle-card-art {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    flex: none;
    border-radius: 0;
    object-fit: contain;
    background: #090a0f;
}

.offline-game #battle .card h3,
.offline-game #battle .card .card-meta,
.offline-game #battle .card .card-stats {
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 4px #000, 0 0 8px #000;
}

.offline-game #battle .formation-slot.polizi-marked .card {
    border-color: #9d72ff;
    box-shadow: 0 0 12px rgba(126, 83, 245, .62);
}

.offline-game #battle .formation-slot.polizi-marked .card::before {
    content: "💬 POLIŽI...";
    position: absolute;
    z-index: 3;
    top: 19px;
    right: 4px;
    padding: 2px 4px;
    border: 1px solid rgba(164, 121, 255, .75);
    border-radius: 5px;
    background: rgba(14, 8, 28, .78);
    color: #e0d5ff;
    font-size: 7px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .15px;
    text-shadow: 0 1px 2px #000;
    pointer-events: none;
}

/* Janova pasiva Zmaga!: pokaži točno nasprotnika, ki mu mora vrniti damage. */
.offline-game #battle .formation-slot.zmaga-challenge-target .card {
    border-color: #b56cff;
    box-shadow: 0 0 16px rgba(181, 108, 255, .7), inset 0 0 12px rgba(181, 108, 255, .18);
}

.offline-game #battle .zmaga-challenge-badge {
    position: absolute;
    z-index: 4;
    top: 19px;
    left: 4px;
    padding: 2px 4px;
    border: 1px solid rgba(201, 139, 255, .9);
    border-radius: 5px;
    background: rgba(32, 10, 59, .9);
    color: #f0d9ff;
    font-size: 7px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .15px;
    text-shadow: 0 1px 2px #000;
    pointer-events: none;
    animation: zmagaChallengePulse 1.2s ease-in-out infinite alternate;
}

@keyframes zmagaChallengePulse {
    from { filter: brightness(.9); box-shadow: 0 0 3px rgba(181, 108, 255, .25); }
    to { filter: brightness(1.22); box-shadow: 0 0 8px rgba(181, 108, 255, .72); }
}

.offline-game #battle .card h3 {
    margin: 0;
    color: #fff;
    padding: 0;
    background: transparent;
}

.offline-game #battle .card h3 { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; column-gap:4px; min-width:0; text-align:center; }
.offline-game #battle .card h3 > span { grid-column:2; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.battle-class-dot { grid-column:1; justify-self:end; display:inline-block; width:7px; height:7px; border-radius:50%; box-shadow:0 0 5px currentColor; }
.battle-class-dot.streamer { color:#4ca7ff; background:#4ca7ff; }
.battle-class-dot.production { color:#b96cff; background:#b96cff; }
.battle-class-dot.trollganger { color:#4fd174; background:#4fd174; }

.offline-game #battle .card .card-meta {
    justify-content: space-between;
    color: #ddd;
    padding: 0;
    background: transparent;
}

.offline-game #battle .card .card-stats {
    margin-top: auto;
    padding: 3px 4px;
    box-sizing: border-box;
    border-radius: 5px;
    background: rgba(0,0,0,.48);
    backdrop-filter: blur(2px);
}

.dead .card {
    opacity: .35;
    filter: grayscale(100%);
}

.hp {
    color: #55ff55;
    font-size: 11px;
    line-height: 13px;
}

.stamina {
    color: #55ccff;
    font-size: 11px;
    line-height: 13px;
}

.shield { color: #33ccff; font-size: 10px; line-height: 12px; }

/* Active Turn Highlight */
.formation-slot.active-turn .card {
    border-color: #ffcc55;
    box-shadow: 0 0 8px rgba(255, 204, 85, 0.45);
    transform: scale(1.03);
}

.formation-slot.active-turn .card:hover {
    box-shadow: 0 0 15px rgba(255, 204, 85, 0.65);
    transform: scale(1.05);
}

/* Target Highlights */
.target-enemy .card,
.target-damage .card {
    border: 2px solid #ff3333;
}

.target-enemy .card:hover,
.target-damage .card:hover {
    box-shadow: 0 0 25px red;
    transform: scale(1.08);
}

.target-ally .card,
.target-heal .card {
    border: 2px solid #33ff66;
}

.target-ally .card:hover,
.target-heal .card:hover {
    box-shadow: 0 0 25px lime;
    transform: scale(1.08);
}

.target-shield .card {
    border: 2px solid #33ccff;
}

.target-shield .card:hover {
    box-shadow: 0 0 25px #33ccff;
    transform: scale(1.08);
}

.target-buff .card {
    border: 2px solid orange;
}

.target-buff .card:hover {
    box-shadow: 0 0 25px orange;
}

/* Trening: hover čez kateregakoli brata poudari oba člana duo buffa. */
.formation-slot.zore-training-hover .card {
    border-color: orange;
    box-shadow: 0 0 25px rgba(255, 165, 0, .8);
    transform: scale(1.06);
}

.target-debuff .card {
    border: 2px solid violet;
}

.target-debuff .card:hover {
    box-shadow: 0 0 25px violet;
}

/* Izbrana tarča je pomembnejša od indikatorja aktivne poteze. */
.formation-slot.active-turn.target-damage .card,
.formation-slot.active-turn.target-enemy .card { border-color: #ff3333; box-shadow: 0 0 18px rgba(255, 51, 51, .62); }
.formation-slot.active-turn.target-heal .card,
.formation-slot.active-turn.target-ally .card { border-color: #33ff66; box-shadow: 0 0 18px rgba(51, 255, 102, .62); }
.formation-slot.active-turn.target-shield .card { border-color: #33ccff; box-shadow: 0 0 18px rgba(51, 204, 255, .62); }
.formation-slot.active-turn.target-buff .card { border-color: orange; box-shadow: 0 0 18px rgba(255, 165, 0, .62); }
.formation-slot.active-turn.target-debuff .card { border-color: violet; box-shadow: 0 0 18px rgba(238, 130, 238, .62); }

/* Duo preview mora pri Treningu preglasiti rumeni indikator aktivne poteze. */
.formation-slot.active-turn.zore-training-hover .card {
    border-color: orange;
    box-shadow: 0 0 25px rgba(255, 165, 0, .8);
    transform: scale(1.06);
}

/* AOE Animations */
.aoe-preview .card {
    animation: aoeGlow 0.8s infinite alternate;
}

@keyframes aoeGlow {
    from {
        box-shadow: 0 0 10px red;
        transform: scale(1);
    }
    to {
        box-shadow: 0 0 30px red;
        transform: scale(1.08);
    }
}

.target-heal.aoe-preview .card {
    animation: aoeHealGlow 0.8s infinite alternate;
}

@keyframes aoeHealGlow {
    from {
        box-shadow: 0 0 10px lime;
    }
    to {
        box-shadow: 0 0 30px lime;
        transform: scale(1.08);
    }
}

/* =========================
   FLOATING TEXT
   ========================= */
.floating-text {
    position: absolute;
    font-size: 28px;
    font-weight: bold;
    opacity: 0;
    pointer-events: none;
    z-index: 999999;
    animation: floatUp .85s ease-out forwards;
}

.damage {
    color: #ff3333;
}

.heal {
    color: #33ff66;
}

.shield {
    color: #33ccff;
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -60px);
    }
}

/* =========================
   BATTLE INTERFACE
   ========================= */
#timer {
    font-size: 40px;
    color: #ffcc00;
    margin: 10px;
}

#actions {
    min-height: 60px;
    margin: 40px auto 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
    z-index: 10;
}

#log {
    height: 220px;
    overflow-y: auto;
    background: #050505;
    border: 1px solid #555;
    padding: 10px;
    text-align: left;
    margin-top: 15px;
}

#playerTeam {
    margin-top: 20px;
}

#enemyTeam {
    margin-bottom: 20px;
}

.battle-log-toggle { display: none; }
.battle-side-profile { display:none; }
.auto-battle-toggle, .video-animations-toggle { display:none; }
.battle-resource { width:100%; }
.battle-resource span { display:block; font-size:9px; }
.battle-resource i { display:block; width:100%; height:5px; overflow:hidden; border-radius:5px; background:#111; }
.battle-resource em { display:block; height:100%; }
.hp-resource em { background:#55d875; }
.hp-resource i { position:relative; }
.shield-bar-overlay { position:absolute; z-index:1; top:0; right:0; bottom:0; max-width:100%; border-radius:inherit; background:linear-gradient(90deg,#123a82,#071f54); box-shadow:inset 0 0 0 1px rgba(72,139,255,.78),0 0 4px rgba(16,72,180,.8); pointer-events:none; }
.hp-impact-preview,.shield-impact-preview { display:none; position:absolute; z-index:2; top:0; bottom:0; pointer-events:none; }
.hp-resource.previewing .hp-impact-preview { display:block; }
.hp-resource.previewing .shield-impact-preview { display:block; }
.hp-resource.preview-damage .hp-impact-preview { background:rgba(255,65,65,.92); box-shadow:0 0 6px #ff3939; }
.hp-resource.preview-damage .shield-impact-preview { z-index:3; background:rgba(215,250,255,.95); box-shadow:0 0 7px #64dfff; }
.hp-resource.preview-shield .shield-impact-preview { z-index:3; background:#3f8fff; box-shadow:0 0 6px rgba(80,150,255,.8); }
.hp-resource.preview-heal .hp-impact-preview { background:rgba(100,255,155,.72); box-shadow:0 0 6px #66ff9c; }
.hp-resource.preview-damage span { color:#ff8d8d !important; }
.hp-resource.preview-heal span { color:#89ffad !important; }
.hp-resource.preview-shield span { color:#74dfff !important; }


#actions .skill-button.selected {
    border-color:#ffcc55;
    color:#ffe29a;
    background:linear-gradient(180deg,rgba(255,204,85,.22),rgba(80,58,10,.35));
    box-shadow:0 0 8px rgba(255,204,85,.45),inset 0 0 8px rgba(255,204,85,.16);
}
.stamina-resource em { background:#55bdf0; }
.stamina-resource i { position:relative; }
.stamina-impact-preview { display:none; position:absolute; z-index:2; top:0; bottom:0; border-radius:inherit; background:rgba(255,156,58,.95); box-shadow:0 0 6px rgba(255,145,35,.9); pointer-events:none; }
.stamina-resource.previewing .stamina-impact-preview { display:block; }
.stamina-resource.preview-stamina span { color:#ffd29c !important; }

/* Compact desktop battle: both formations and controls fit into one viewport. */
@media (min-width: 900px) and (min-height: 700px) {
    body.battle-mode {
        height: 100vh;
        padding: 6px;
        box-sizing: border-box;
        overflow: hidden;
    }

    body.battle-mode #battle {
        display: grid !important;
        grid-template-rows: minmax(250px, 1fr) 44px minmax(250px, 1fr);
        gap: 3px;
        width: min(920px, calc(100vw - 430px));
        height: calc(100vh - 12px);
        margin: 0 auto;
        box-sizing: border-box;
    }

    body.battle-mode #turnInfo {
        display: none;
    }

    body.battle-mode #timer {
        position: fixed;
        z-index: 8001;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0 12px;
        background: radial-gradient(ellipse at center, #111 42%, rgba(17,17,17,.78) 68%, transparent 100%);
        text-shadow: 0 0 10px rgba(255,204,0,.55);
        font-size: 22px;
    }

    body.battle-mode .battle-team-title { display:none; }

    body.battle-mode #enemyTeam { grid-row: 1; }
    body.battle-mode #battle > hr {
        grid-row: 2;
        width: 100%;
        height: 1px;
        margin: 0;
        align-self: center;
        border: 0;
        background: linear-gradient(to right, #333 0%, #333 calc(50% - 46px), rgba(51,51,51,.5) calc(50% - 34px), transparent calc(50% - 20px), transparent calc(50% + 20px), rgba(51,51,51,.5) calc(50% + 34px), #333 calc(50% + 46px), #333 100%);
    }
    body.battle-mode #playerTeam { grid-row: 3; }

    body.battle-mode #battle .team {
        --compact-card-width: clamp(106px, 15.2vh, 128px);
        --compact-card-height: clamp(132px, 19vh, 160px);
        grid-template-columns: repeat(3, var(--compact-card-width));
        grid-template-rows: repeat(2, var(--compact-card-height));
        gap: 6px 25px;
        margin: 0;
    }

    body.battle-mode #enemyTeam { align-self:end; padding-bottom:3px; }
    body.battle-mode #playerTeam { align-self:start; padding-top:3px; }

    body.battle-mode #battle .formation-slot,
    body.battle-mode #battle .card {
        width: var(--compact-card-width);
        height: var(--compact-card-height);
    }

    body.battle-mode #battle .formation-slot:nth-child(4),
    body.battle-mode #battle .formation-slot:nth-child(5) {
        margin-left: calc((var(--compact-card-width) + 25px) / 2);
    }

    /* Campaign milestone bosses and Miza use a single, central objective card. */
    body.battle-mode #enemyTeam.campaign-solo-formation {
        grid-template-columns: minmax(210px, 280px);
        grid-template-rows: clamp(225px, 31vh, 300px);
        justify-content: center;
        justify-items: center;
        align-items: center;
        padding-bottom: 0;
    }
    body.battle-mode #enemyTeam.campaign-solo-formation .formation-slot,
    body.battle-mode #enemyTeam.campaign-solo-formation .card {
        width: min(280px, 28vh);
        height: clamp(225px, 31vh, 300px);
    }
    body.battle-mode #enemyTeam.campaign-solo-formation .formation-slot {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
    }
    body.battle-mode #enemyTeam.campaign-solo-formation .battle-card-art { height: 68%; }
    body.battle-mode #enemyTeam.campaign-solo-formation .card h3 { font-size: 15px; line-height: 17px; }
    body.battle-mode #enemyTeam.campaign-solo-formation .card-meta { font-size: 10px; }

    body.battle-mode #battle .card { padding: 5px; }
    body.battle-mode #battle .card h3 { font-size: 11px; line-height: 12px; }
    body.battle-mode #battle .card-meta { font-size: 8px; line-height: 9px; }
    body.battle-mode #battle .card-stats { gap: 0; padding: 2px 3px; }
    body.battle-mode #battle .hp,
    body.battle-mode #battle .stamina,
    body.battle-mode #battle .shield { font-size: 8px; line-height: 9px; }
    body.battle-mode #battle .formation-role { font-size: 7px; }
    body.battle-mode .battle-resource { display:grid; gap:1px; width:100%; }
    body.battle-mode .battle-resource span { overflow:hidden; color:#eee; font-size:7px; line-height:8px; white-space:nowrap; text-align:left; text-shadow:0 1px 3px #000; }
    body.battle-mode .battle-resource i { display:block; width:100%; height:4px; overflow:hidden; border-radius:5px; background:rgba(0,0,0,.75); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
    body.battle-mode .battle-resource em { display:block; height:100%; border-radius:inherit; transition:width .28s ease; }
    body.battle-mode .hp-resource em { background:linear-gradient(90deg,#28b85a,#69ef83); }
    body.battle-mode .stamina-resource em { background:linear-gradient(90deg,#287ac7,#62c9ff); }

    body.battle-mode .battle-section-title { display: none; }

    body.battle-mode #actions {
        position:fixed;
        z-index:8050;
        left:50%;
        bottom:4px;
        width:min(920px,calc(100vw - 430px));
        height:64px;
        min-height:64px;
        margin:0;
        gap: 5px;
        align-content: center;
        box-sizing:border-box;
        transform:translate(-50%,-24px);
    }

    body.battle-mode #actions button {
        display:flex;
        align-items:center;
        justify-content:center;
        width:150px;
        height:50px;
        margin: 1px;
        padding: 7px 12px;
        box-sizing:border-box;
        font-size: 14px;
        line-height:16px;
        white-space:normal;
        overflow-wrap:anywhere;
        text-align:center;
    }

    body.battle-mode #actions button.skill-text-long { font-size:12px; line-height:14px; }
    body.battle-mode #actions button.skill-text-very-long { font-size:10px; line-height:12px; }

    body.battle-mode #log {
        position: fixed;
        z-index: 7900;
        left: 8px;
        top: 50%;
        width: 190px;
        height: 68vh;
        min-height: 260px;
        margin: 0;
        padding: 8px;
        transform: translateY(-50%);
        box-sizing: border-box;
        font-size: 10px;
        line-height: 13px;
        transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
    }

    body.battle-mode #log::before {
        content: "BATTLE LOG";
        position: sticky;
        top: -8px;
        display: block;
        margin: -8px -8px 7px;
        padding: 7px 8px;
        border-bottom: 1px solid #444;
        background: #111;
        color: #aaa;
        font-size: 9px;
        font-weight: bold;
        letter-spacing: 1px;
    }

    body.battle-mode .battle-log-toggle {
        display: block;
        position: fixed;
        z-index: 7901;
        left: 198px;
        top: 50%;
        width: 28px;
        min-width: 28px;
        height: 58px;
        margin: 0;
        padding: 0;
        transform: translateY(-50%);
        border: 1px solid #555;
        border-left: 0;
        border-radius: 0 8px 8px 0;
        background: #19191d;
        color: #bbb;
        font-size: 12px;
        transition: left .32s cubic-bezier(.2,.8,.2,1), background .2s;
    }

    body.battle-mode.battle-log-hidden #log {
        transform: translate(-210px, -50%);
        opacity: .25;
    }

    body.battle-mode.battle-log-hidden .battle-log-toggle {
        left: 0;
        border-left: 1px solid #555;
        color: #d4c2ff;
        background: #24183b;
    }

    body.battle-mode .turn-order-panel {
        right: 8px;
        top: 58%;
        width: 180px;
        max-height: 62vh;
        padding: 8px;
    }

    body.battle-mode .battle-side-profile {
        position: fixed;
        z-index: 8002;
        top: 50%;
        display:flex;
        align-items:center;
        gap:9px;
        width:clamp(180px,15vw,220px);
        height:auto;
        aspect-ratio:270 / 92;
        padding:9px;
        overflow:hidden;
        box-sizing:border-box;
        background-color:#17171d;
        background-position:center;
        background-size:cover;
        border:1px solid #555;
        border-radius:10px;
        text-align:left;
        box-shadow:0 5px 18px rgba(0,0,0,.55);
    }

    body.battle-mode .player-profile { left:max(205px,calc(50% - 455px)); top:calc(50% + 58px); transform:translateY(-50%); border-color:#3b9b58; }
    body.battle-mode .enemy-profile { right:max(200px,calc(50% - 455px)); top:calc(50% - 58px); transform:translateY(-50%); border-color:#a6404b; }
    body.battle-mode .battle-profile-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.94),rgba(0,0,0,.5)); }
    body.battle-mode .battle-green-team-badge { position:absolute; z-index:4; right:4px; top:3px; display:none; height:18px; box-sizing:border-box; align-items:center; justify-content:center; gap:3px; padding:2px 5px; overflow:visible; border:1px solid #48dc7c; border-radius:9px; background:rgba(9,35,19,.92); box-shadow:0 0 7px rgba(66,232,125,.5); color:#73f3a0; font-size:8px; line-height:12px; white-space:nowrap; }
    body.battle-mode .battle-green-team-badge.show { display:flex; }
    body.battle-mode .battle-green-team-badge b { display:block; overflow:visible; font-size:7px; line-height:11px; letter-spacing:.25px; }
    body.battle-mode .battle-side-profile img { position:relative; width:50px; height:50px; flex:0 0 auto; object-fit:cover; border:2px solid #777; border-radius:50%; background:#08090c; }
    body.battle-mode .battle-side-profile div { position:relative; min-width:0; }
    body.battle-mode .battle-profile-content { flex:1; }
    body.battle-mode .battle-side-profile strong,
    body.battle-mode .battle-side-profile small { display:block; overflow:hidden; text-overflow:ellipsis; }
    body.battle-mode .battle-side-profile strong { white-space:nowrap; font-size:13px; }
    body.battle-mode .battle-side-profile small { margin-top:4px; color:#bcb3c6; font-size:7px; line-height:10px; }
    body.battle-mode .battle-side-profile small b { display:block; color:#ffcc55; font-size:16px; line-height:17px; }
    body.battle-mode .battle-team-health { margin-top:5px; }
    body.battle-mode .battle-team-health span { display:flex; justify-content:space-between; color:#aaa; font-size:7px; }
    body.battle-mode .battle-team-health span b { color:#72ef91; font-size:9px; }
    body.battle-mode .battle-team-health.enemy-health span b { color:#ff747d; }
    body.battle-mode .battle-team-health i { display:block; height:6px; margin-top:2px; overflow:hidden; border-radius:7px; background:rgba(0,0,0,.72); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
    body.battle-mode .battle-team-health em { display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#28a84f,#72ef91); transition:width .3s ease; }
    body.battle-mode .battle-team-health.enemy-health em { background:linear-gradient(90deg,#b52c39,#ff6975); }

    body.battle-mode .auto-battle-toggle { position:fixed; z-index:8100; top:48px; right:8px; display:block; width:150px; height:34px; margin:0; padding:6px 9px; border-color:#666; background:#19191d; color:#aaa; font-size:9px; font-weight:bold; letter-spacing:.7px; }
    body.battle-mode .auto-battle-toggle.active { border-color:#9a6cff; background:#33205a; color:#e0d3ff; box-shadow:0 0 14px rgba(140,87,232,.45); }
    body.battle-mode .video-animations-toggle { position:fixed; z-index:8100; top:86px; right:8px; display:block; width:150px; height:30px; margin:0; padding:6px 9px; border-color:#666; background:#19191d; color:#aaa; font-size:9px; font-weight:bold; letter-spacing:.7px; }
    body.battle-mode .video-animations-toggle.active { border-color:#9a6cff; background:#33205a; color:#e0d3ff; box-shadow:0 0 14px rgba(140,87,232,.45); }
    body.battle-mode .testing-battle-controls { position:fixed; z-index:8100; top:122px; right:8px; display:grid; gap:5px; width:150px; padding:7px; box-sizing:border-box; border:1px solid #7654bd; border-radius:8px; background:rgba(22,15,34,.94); box-shadow:0 6px 20px rgba(0,0,0,.45); }
    body.battle-mode .testing-battle-controls[hidden] { display:none; }
    body.battle-mode .testing-battle-controls b { color:#d7c5ff; font-size:9px; letter-spacing:.55px; text-align:center; }
    body.battle-mode .testing-battle-controls button { width:100%; min-height:25px; margin:0; padding:4px; border-color:#5c5767; background:#222127; color:#aaa; font-size:8px; }
    body.battle-mode .testing-battle-controls button.active { border-color:#5cda91; background:#173c28; color:#caffdc; }
    body.auto-battle-active #actions { opacity:.34; pointer-events:none; }

    body.battle-mode #returnHomeButton { top:8px !important; right:8px !important; padding:6px 9px; font-size:10px; }

    body.battle-mode .turn-order-item {
        min-height: 32px;
        margin: 3px 0;
        padding: 3px 5px;
        grid-template-columns: 27px 28px 1fr;
    }

    body.battle-mode .turn-order-item img { width: 27px; height: 27px; }
}

@media (min-width:900px) and (max-width:1100px) and (min-height:700px) {
    body.battle-mode .battle-side-profile { top:8px; width:170px; height:auto; aspect-ratio:270 / 92; transform:none; }
    body.battle-mode .player-profile { left:8px; }
    body.battle-mode .enemy-profile { right:8px; }
    body.battle-mode .battle-side-profile img { width:40px; height:40px; }
    body.battle-mode #returnHomeButton { top:106px !important; }
    body.battle-mode .auto-battle-toggle { top:140px; }
    body.battle-mode .video-animations-toggle { top:178px; }
    body.battle-mode #actions button { width:110px; padding-inline:7px; font-size:12px; }
    body.battle-mode #actions button.skill-text-long { font-size:10px; }
    body.battle-mode #actions button.skill-text-very-long { font-size:9px; }
}

.skill-media-layer { position: fixed; inset: 0; z-index: 50000; pointer-events: none; overflow: hidden; }.skill-media-effect { position: absolute; left: 50%; top: 45%; display: flex; flex-direction: column; align-items: center; gap: 5px; transform: translate(-50%,-50%); animation: skillMediaPop .95s ease-out forwards; text-shadow: 0 4px 15px #000; }.skill-media-effect span { font-size: 70px; }.skill-media-effect strong { padding: 5px 12px; background: rgba(0,0,0,.72); border-radius: 6px; color: white; font-size: 18px; }.skill-media-effect em { color: #ffcc00; font-size: 15px; }.slash-swipe { animation-name: skillSlash; }.heavy-impact { animation-name: skillImpact; }.fireball-cast,.meteor-fall { filter: drop-shadow(0 0 18px #ff632f); }.heal-pulse { filter: drop-shadow(0 0 18px #43ff78); }.shield-rise { filter: drop-shadow(0 0 18px #43bfff); }.taunt-burst { filter: drop-shadow(0 0 18px #ff3f5f); }.buff-wave { filter: drop-shadow(0 0 18px #ffcc00); }
.skill-video-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.72); pointer-events:auto; cursor:pointer; }.skill-video-overlay video { width: min(720px,88vw); height: min(405px,49.5vw,70vh); object-fit: contain; background: #000; border: 2px solid #777; border-radius: 12px; box-shadow: 0 12px 40px #000; }
.skill-video-skip-hint { position:absolute; bottom:5vh; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.58); font-size:11px; font-weight:700; letter-spacing:1.4px; text-shadow:0 1px 5px #000; pointer-events:none; }
.skill-video-overlay.impact-flight { animation: skillVideoBackdropOut .52s ease forwards; }
.skill-video-impact-flash { position: fixed; z-index: 50002; width: 18px; height: 18px; border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); background: #fff; box-shadow: 0 0 15px 7px #8b5cff, 0 0 34px 18px #287cff; animation: skillVideoImpactFlash .43s ease-out forwards; }
@keyframes skillVideoBackdropOut { from { background:rgba(0,0,0,.72); } to { background:rgba(0,0,0,0); } }
@keyframes skillVideoImpactFlash { 0% { opacity:1; transform:translate(-50%,-50%) scale(.35); } 45% { opacity:1; transform:translate(-50%,-50%) scale(1.5); } 100% { opacity:0; transform:translate(-50%,-50%) scale(2.8); } }
@keyframes skillMediaPop { 0% { opacity:0; transform:translate(-50%,-50%) scale(.35); } 25% { opacity:1; transform:translate(-50%,-50%) scale(1.12); } 100% { opacity:0; transform:translate(-50%,-70%) scale(.9); } }
@keyframes skillSlash { 0% { opacity:0; transform:translate(-120%,-50%) rotate(-25deg); } 35% { opacity:1; transform:translate(-50%,-50%) rotate(8deg); } 100% { opacity:0; transform:translate(50%,-60%) rotate(20deg); } }
@keyframes skillImpact { 0% { opacity:0; transform:translate(-50%,-50%) scale(2); } 35% { opacity:1; transform:translate(-50%,-50%) scale(.85); } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.25); } }

.turn-order-panel { position: fixed; right: 15px; top: 50%; z-index: 8000; width: 195px; max-height: 78vh; padding: 12px; transform: translateY(-50%); overflow-y: auto; background: rgba(10,10,12,.94); border: 1px solid #555; border-radius: 11px; box-shadow: 0 8px 28px rgba(0,0,0,.55); }
.turn-order-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.turn-order-panel h3 { margin:0; color: #bbb; font-size: 11px; letter-spacing: 1.5px; }
#turnRoundIndicator { color:#e8e8ed; font-size:9px; font-weight:800; letter-spacing:.7px; padding:3px 5px; border:1px solid #4b4f5c; border-radius:4px; background:#191b21; white-space:nowrap; }
.turn-order-item { display: grid; grid-template-columns: 31px 34px 1fr; align-items: center; gap: 7px; min-height: 40px; margin: 5px 0; padding: 5px 7px; border: 1px solid #444; border-radius: 7px; background: #191b21; text-align: left; }
.turn-order-item.player { border-left: 3px solid #44cc66; }.turn-order-item.enemy { border-left: 3px solid #dd4444; }.turn-order-item.current { border-color: #ffcc00; background: #332b15; box-shadow: 0 0 9px rgba(255,204,0,.25); }
.turn-order-item img { width: 32px; height: 32px; object-fit: cover; border-radius: 50%; }.turn-order-number { color: #999; font-size: 9px; font-weight: bold; text-align: center; }.turn-order-item.current .turn-order-number { color: #ffcc00; }.turn-order-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.turn-order-waiting { color: #777; font-size: 11px; }
@media (max-width: 980px) { .turn-order-panel { right: 5px; width: 150px; }.turn-order-item { grid-template-columns: 25px 28px 1fr; gap: 5px; padding: 4px; }.turn-order-item img { width: 27px; height: 27px; } }
@media (max-width: 720px) { .turn-order-panel { position: relative; right: auto; top: auto; width: min(420px, 90vw); max-height: none; margin: 10px auto 22px; transform: none; }.turn-order-panel #turnOrderList { display: flex; gap: 5px; overflow-x: auto; }.turn-order-item { min-width: 105px; grid-template-columns: 25px 28px 1fr; } }

/* Nasprotnikova formacija je obrnjena proti igralčevi.
   Posamezne kartice obrnemo nazaj, da slika in tekst ostaneta pokončna. */
.offline-game #enemyTeam {
    transform: rotate(180deg);
}

.offline-game #enemyTeam .formation-slot {
    transform: rotate(180deg);
}

/* =========================
   RESULT MODAL
   ========================= */
#battleResult {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100000;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#battleResultBox {
    padding: 40px;
}

#battleResultTitle {
    font-size: 60px;
    margin-bottom: 40px;
}

#battleResultBackButton {
    padding: 15px 35px;
    font-size: 20px;
    cursor: pointer;
}

.campaign-menu { max-width: 1120px; margin: 30px auto; padding: 25px; background: #171717; border: 1px solid #555; border-radius: 12px; }
.campaign-summary { display:flex; justify-content:space-between; color:#b994ff; border-bottom:1px solid #3c3150; padding-bottom:10px; }
.campaign-levels { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 12px; margin: 24px 0; max-height:62vh; overflow-y:auto; padding-right:8px; }
.campaign-level { min-height:126px; padding: 13px 10px; border: 1px solid #777; border-radius: 10px; background: #222; color: white; cursor: pointer; display:flex; flex-direction:column; gap:7px; justify-content:center; }
.campaign-level small { color:#a690ca; font-size:9px; }.campaign-level strong { font-size:13px; }.campaign-level span { color:#c4c4c4; font-size:10px; }.campaign-level em { color:#ffd34d; font-size:10px; font-style:normal; }
.campaign-level.locked { opacity: .4; cursor: not-allowed; }
.campaign-level.cleared { border-color: #44ff66; }
.campaign-level.boss { border-color: #ffbd3e; background: linear-gradient(135deg,#3b2413,#211719); box-shadow:0 0 18px rgba(255,166,40,.18); }
.campaign-table-event { grid-column:1/-1; min-height:88px; border:1px solid #79d8ff; background:linear-gradient(100deg,#122332,#17202a); color:white; border-radius:10px; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:6px; cursor:pointer; }.campaign-table-event.locked { opacity:.4; cursor:not-allowed; }
#battleReward { color: #ffcc00; font-size: 20px; margin: -20px 0 25px; }
#battleReward small { display:block; margin-top:8px; color:#bdb6c8; font-size:10px; letter-spacing:.08em; }

.solo-battle-launch { display:flex; width:max-content; margin:0 auto; justify-content:center; align-items:stretch; gap:7px; }
.solo-battle-launch > button { margin:10px 0 !important; }
.solo-difficulty-button { min-width:72px; border-color:#7452c9 !important; background:linear-gradient(145deg,#282038,#171222) !important; color:#d7c6ff !important; font-size:12px !important; }
.solo-difficulty-modal { position:fixed; inset:0; z-index:230000; display:none; place-items:center; padding:20px; background:rgba(0,0,0,.78); backdrop-filter:blur(8px); }
.solo-difficulty-modal.open { display:grid; }
.solo-difficulty-modal section { position:relative; display:grid; gap:16px; width:min(420px,92vw); padding:28px; border:1px solid rgba(139,94,235,.8); border-radius:17px; background:linear-gradient(145deg,#211637,#0d0e15); color:#fff; box-shadow:0 24px 70px rgba(0,0,0,.65); text-align:center; }
.solo-difficulty-modal h2 { margin:0; font-size:23px; }.solo-difficulty-modal small { color:#bca1f6; letter-spacing:.15em; font-weight:bold; }.solo-difficulty-modal strong { color:#fff; font-size:42px; line-height:1; }.solo-difficulty-modal input[type=range] { width:100%; accent-color:#9161ff; }.solo-difficulty-modal #soloDifficultyRewards { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; color:#aaa3b5; font-size:11px; }.solo-difficulty-modal #soloDifficultyRewards b { color:#ffcc4d; }.solo-difficulty-modal #soloDifficultyLimit { margin:0; color:#bdb7c9; font-size:11px; letter-spacing:.08em; }.solo-difficulty-close { position:absolute; top:8px; right:9px; min-width:34px !important; padding:3px !important; border:0 !important; background:transparent !important; font-size:23px !important; }
.tutorial-overlay { position:fixed; inset:0; z-index:120000; display:none; place-items:center; padding:20px; box-sizing:border-box; background:rgba(4,3,10,.78); backdrop-filter:blur(7px); }
.tutorial-overlay.show { display:grid; }
.tutorial-card { width:min(510px,92vw); padding:28px; border:1px solid rgba(149,99,255,.8); border-radius:18px; background:linear-gradient(145deg,#21163d,#0e101a); box-shadow:0 0 55px rgba(111,61,255,.35); text-align:center; }
.tutorial-kicker { color:#af8cff; font-size:10px; letter-spacing:.16em; font-weight:bold; }
.tutorial-card h2 { margin:9px 0 11px; font-size:28px; color:#fff; }
.tutorial-card p { margin:0; color:#d8d0e8; font-size:15px; line-height:1.55; }
.tutorial-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:22px; }
.tutorial-actions button,.tutorial-battle-note button { min-height:42px; padding:10px 16px; border:1px solid #8e63ef; border-radius:8px; color:#fff; font-weight:bold; cursor:pointer; }
.tutorial-primary,.tutorial-battle-note button { background:linear-gradient(90deg,#6135c7,#2455a2); }
.tutorial-secondary { background:rgba(255,255,255,.06); }
.tutorial-battle-note { display:grid; gap:9px; justify-items:center; color:#e4d8ff; font-size:14px; }
.tutorial-battle-note b { color:#fff; font-size:20px; }
.account-panel { position:fixed; z-index:9999; top:112px; left:15px; display:flex; align-items:center; gap:8px; padding:7px 9px; border:1px solid #555; border-radius:9px; background:rgba(12,12,17,.88); color:#cfc8dc; font-size:10px; }
body.battle-mode .account-panel { display:none; }
.account-panel span b { color:#ae88ff; }.account-panel button { min-height:25px; margin:0; padding:4px 8px; font-size:9px; }
.account-modal { position:fixed; inset:0; z-index:130000; display:none; place-items:center; background:rgba(0,0,0,.8); backdrop-filter:blur(7px); }.account-modal.show { display:grid; }.account-modal section { display:grid; gap:10px; width:min(360px,90vw); padding:24px; position:relative; border:1px solid #895ce8; border-radius:14px; background:linear-gradient(145deg,#211638,#0e1019); }.account-modal h2 { margin:0; font-size:22px; }.account-modal small { color:#b28dff; font-weight:bold; letter-spacing:1px; }.account-modal input { padding:11px; border:1px solid #575063; border-radius:7px; background:#0a0b11; color:#fff; }.account-modal section > div { display:flex; gap:8px; }.account-modal section > div button { flex:1; }.account-modal #accountGuest { background:transparent; border-color:#555; color:#bbb; }.account-modal #accountError { min-height:15px; margin:0; color:#ff8792; font-size:11px; }.account-close { position:absolute; top:8px; right:8px; min-width:30px; padding:3px; background:transparent; border:0; font-size:20px; }
@media (max-width: 760px) { .campaign-levels { grid-template-columns: 1fr; } }
.account-modal .account-link-button { min-height:28px; padding:3px 7px; background:transparent; border:0; color:#bca5ed; font-size:10px; text-decoration:underline; }
.developer-only,.developer-tools-open { display:none !important; }
html.developer-mode .developer-only,html.developer-mode .developer-tools-open { display:inline-flex !important; }

/* --- CHARACTER TOOLTIP STYLES ---statsi ingame na kartici */
.character-tooltip {
    display: none;
    position: absolute;
    z-index: 10000;
    pointer-events: none;
    background-color: #12131a;
    border: 2px solid #555;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.85);
    width: 280px;
    height: auto;
    max-height: calc(100vh - 24px);
    box-sizing: border-box;
    overflow-y: auto;
    color: #ffffff;
    font-family: Arial, sans-serif;
}

.character-tooltip.player-border {
    border-color: #44ff66;
}

.character-tooltip.enemy-border {
    border-color: #ff4444;
}
.character-tooltip.skill-border {
    border-color: #ffcc55;
}

.tooltip-header {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid #2d3142;
    padding-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tooltip-badge {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    color: #ddd;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.18);
    padding: 2px 6px;
    border-radius: 3px;
}
.tooltip-badge.player { color: #44ff66; }
.tooltip-badge.enemy { color: #ff4444; }
.tooltip-badge.skill { color:#ffdc7a; background:rgba(255,204,85,.1); border-color:rgba(255,204,85,.35); }
.tooltip-badge.skill-type-damage { color:#ff7373; background:rgba(255,51,51,.1); border-color:rgba(255,51,51,.42); }
.tooltip-badge.skill-type-heal { color:#70ff9a; background:rgba(51,255,102,.1); border-color:rgba(51,255,102,.42); }
.tooltip-badge.skill-type-shield { color:#75d6ff; background:rgba(51,204,255,.1); border-color:rgba(51,204,255,.42); }
.tooltip-badge.skill-type-buff { color:#ffc15f; background:rgba(255,165,0,.1); border-color:rgba(255,165,0,.42); }
.tooltip-badge.skill-type-debuff { color:#e8a1ff; background:rgba(238,130,238,.1); border-color:rgba(238,130,238,.42); }

.tooltip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    font-size: 12px;
    margin-bottom: 8px;
}

.tooltip-stat-box {
    background: #1a1c26;
    padding: 4px 6px;
    border-radius: 4px;
}

.tooltip-stat-box.full-width {
    grid-column: span 2;
}

.stat-buff {
    color: #44ff66;
    font-weight: bold;
}

.stat-debuff {
    color: #ff4444;
    font-weight: bold;
}

.tooltip-effects {
    font-size: 11px;
    border-top: 1px solid #2d3142;
    padding-top: 6px;
    min-height: 0;
}
.tooltip-badge.streamer { color:#4ca7ff; background:rgba(76,167,255,.1); border-color:rgba(76,167,255,.35); }
.tooltip-badge.production { color:#b96cff; background:rgba(185,108,255,.1); border-color:rgba(185,108,255,.35); }
.tooltip-badge.trollganger { color:#4fd174; background:rgba(79,209,116,.1); border-color:rgba(79,209,116,.35); }
.formation-role { margin: 0; font-size: 8px; letter-spacing: .6px; font-weight: bold; }.formation-role.frontline { color: #66bfff; }.formation-role.backline { color: #ff8f66; }
.tooltip-formation { margin-bottom: 8px; padding: 5px 6px; border-radius: 4px; background: #1a1c26; font-size: 10px; }.tooltip-formation.frontline { color: #66bfff; }.tooltip-formation.backline { color: #ff8f66; }

.tooltip-effects-title {
    color: #aaaaaa;
    margin-bottom: 4px;
}

.tooltip-effect-badge {
    background: #2a2d3d;
    border: 1px solid #444961;
    color: #e1e1e1;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    margin-right: 4px;
    display: inline-block;
    margin-bottom: 3px;
}

.tooltip-no-effects {
    color: #888888;
    font-style: italic;
}

.tooltip-effect-row {
    display:grid;
    grid-template-columns:minmax(72px,.8fr) minmax(110px,1.4fr);
    align-items:center;
    gap:8px;
    margin-bottom:3px;
    padding:4px 6px;
    border:1px solid #3b4055;
    border-radius:4px;
    background:#242735;
}

.tooltip-effect-row:last-child { margin-bottom:0; }
.tooltip-effect-name { min-width:0; color:#eee; font-weight:700; overflow-wrap:anywhere; }
.tooltip-effect-name small { color:#999; font-size:9px; font-weight:400; white-space:nowrap; }
.tooltip-effect-row > strong { color:#c8d4ff; font-size:10px; font-weight:600; line-height:12px; text-align:right; }
.character-tooltip.skill-tooltip .tooltip-effects,
.character-tooltip.skill-tooltip .tooltip-effects-title,
.character-tooltip.skill-tooltip .tooltip-effect-row,
.character-tooltip.skill-tooltip .tooltip-effect-name,
.character-tooltip.skill-tooltip .tooltip-effect-row > strong { text-align:center; }
.character-tooltip.skill-tooltip .tooltip-effect-row { display:block; }

/* Troll Coins are still stored under the legacy gachaGems key for save compatibility. */
.troll-coin-icon {
    display: inline-block;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    vertical-align: middle;
    border: 1px solid rgba(151, 224, 255, .9);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #c9f7ff 0 8%, #38bdf8 18%, #7047eb 58%, #a21caf 100%);
    box-shadow: inset 0 0 3px rgba(255,255,255,.75), 0 0 6px rgba(112,71,235,.65);
}

.testing-time-control { position: fixed; right: 12px; bottom: 12px; z-index: 10000; display: grid; grid-template-columns: auto 105px auto auto auto; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #7450df; border-radius: 10px; background: rgba(14,10,25,.92); box-shadow: 0 4px 18px rgba(0,0,0,.5); color: #bda7ff; }
.testing-time-control small { font-size: 9px; font-weight: bold; letter-spacing: .8px; }.testing-time-control small b { color: white; }.testing-time-control input { width: 105px; accent-color: #8057e8; }.testing-time-control button { min-width: 72px; padding: 6px 9px; border-color: #7655d9; font-size: 10px; touch-action: none; user-select: none; }.testing-time-control button.active { color: white; background: #7655d9; box-shadow: 0 0 14px #7655d9; }
@media(max-width:650px){.testing-time-control{right:6px;bottom:6px;grid-template-columns:auto 65px auto auto auto}.testing-time-control input{width:65px}.testing-time-control button{min-width:52px;padding:5px}}

/* Character rank colour progression. Selection and active-turn borders stay independent. */
.rank-visual {
    --rank-fill-start: rgba(110,115,125,.08);
    --rank-fill-middle: rgba(75,80,90,.10);
    --rank-fill-end: rgba(40,42,48,.08);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.rank-visual::before {
    display: none;
}
.character-card.rank-visual:not(.in-formation),
.formation-card.rank-visual,
.mission-character.rank-visual:not(.selected),
.profile-character-card.rank-visual,
.offline-game #battle .card.rank-visual {
    background-image: linear-gradient(135deg,var(--rank-fill-start) 0%,var(--rank-fill-middle) 50%,var(--rank-fill-end) 100%) !important;
}
.rank-tier-1 { --rank-fill-start:rgba(100,105,115,.16); --rank-fill-middle:rgba(60,64,73,.22); --rank-fill-end:rgba(30,32,38,.25); }
.rank-tier-2 { --rank-fill-start:rgba(245,248,255,.50); --rank-fill-middle:rgba(170,182,200,.42); --rank-fill-end:rgba(75,85,105,.34); }
.rank-tier-3 { --rank-fill-start:rgba(55,220,255,.52); --rank-fill-middle:rgba(25,145,205,.45); --rank-fill-end:rgba(15,65,105,.36); }
.rank-tier-4 { --rank-fill-start:rgba(45,90,255,.60); --rank-fill-middle:rgba(30,52,185,.53); --rank-fill-end:rgba(15,25,90,.45); }
.rank-tier-5 { --rank-fill-start:rgba(145,70,255,.58); --rank-fill-middle:rgba(95,38,180,.52); --rank-fill-end:rgba(48,20,95,.43); }
.rank-tier-6 { --rank-fill-start:rgba(240,55,220,.59); --rank-fill-middle:rgba(165,30,160,.53); --rank-fill-end:rgba(78,18,90,.44); }
.rank-tier-7 { --rank-fill-start:rgba(250,45,65,.61); --rank-fill-middle:rgba(180,28,48,.55); --rank-fill-end:rgba(92,16,30,.46); }
.rank-tier-8 { --rank-fill-start:rgba(255,125,20,.64); --rank-fill-middle:rgba(205,65,12,.57); --rank-fill-end:rgba(105,35,10,.47); }
.rank-tier-9 { --rank-fill-start:rgba(255,210,35,.68); --rank-fill-middle:rgba(215,135,15,.60); --rank-fill-end:rgba(120,70,8,.50); }
.rank-tier-10 { --rank-fill-start:rgba(255,250,205,.76); --rank-fill-middle:rgba(255,195,45,.67); --rank-fill-end:rgba(150,90,12,.55); }

.character-card.rank-tier-10:not(.in-formation),
.formation-card.rank-tier-10,
.mission-character.rank-tier-10:not(.selected),
.profile-character-card.rank-tier-10,
.offline-game #battle .card.rank-tier-10,
.rank-preview-card.rank-tier-10 {
    background-image:
        linear-gradient(110deg,transparent 20%,rgba(255,255,255,.82) 43%,rgba(255,245,175,.95) 50%,transparent 72%),
        linear-gradient(135deg,var(--rank-fill-start),var(--rank-fill-middle) 50%,var(--rank-fill-end)) !important;
    background-size:260% 100%,100% 100% !important;
    animation:rankTenShine 5s linear infinite;
}
@keyframes rankTenShine {
    from { background-position:155% 0,0 0; }
    to { background-position:-155% 0,0 0; }
}
/* Shared role synergy UI */
.synergy-summary { width: 100%; margin: 10px 0; }
.synergy-summary-button { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; border: 1px solid rgba(142, 92, 255, .45); border-radius: 12px; background: rgba(18, 13, 29, .88); color: #fff; text-align: left; cursor: pointer; }
.synergy-summary-button:hover { border-color: #9d72ff; box-shadow: 0 0 18px rgba(116, 70, 255, .22); }
.synergy-summary-button span { display: grid; gap: 3px; min-width: 0; }
.synergy-summary-button small { color: #a997ca; letter-spacing: .13em; font-size: 10px; }
.synergy-summary-button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.synergy-summary-button em { flex: 0 0 auto; color: #c7b8e5; font-size: 11px; font-style: normal; }
.synergy-summary-combo { flex:0 0 auto; padding:4px 7px; border:1px solid rgba(154,103,255,.55); border-radius:7px; background:rgba(107,63,190,.18); color:#d8c7ff; font-size:10px; }

.synergy-popup-overlay { position: fixed; inset: 0; z-index: 15000; display: grid; place-items: center; padding: 20px; background: rgba(3, 2, 8, .8); backdrop-filter: blur(8px); }
.synergy-popup { width: min(700px, 96vw); max-height: 88vh; overflow: auto; border: 1px solid rgba(144, 95, 255, .55); border-radius: 18px; background: linear-gradient(145deg, #171020, #0d0a13); color: #fff; box-shadow: 0 22px 70px rgba(0, 0, 0, .65); }
.synergy-popup > header { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.synergy-popup header small { color: #a98be8; letter-spacing: .16em; }
.synergy-popup header h2 { margin: 3px 0 0; }
.synergy-popup header button { width: 38px; height: 38px; padding: 0; border-radius: 9px; font-size: 24px; }
.synergy-popup-help { margin: 14px 22px; color: #bcb6c7; font-size: 12px; }
.synergy-popup-list { display: grid; gap: 9px; padding: 0 22px 22px; }
.synergy-popup-row { display: grid; grid-template-columns: minmax(190px, 1.25fr) minmax(115px, .75fr) minmax(170px, 1fr); align-items: center; gap: 14px; padding: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.035); }
.synergy-popup-row.locked { opacity: .52; }
.synergy-popup-row.active { border-color: rgba(132, 84, 255, .6); background: linear-gradient(90deg, rgba(68, 38, 126, .3), rgba(28, 20, 43, .6)); }
.synergy-popup-name { display: flex; align-items: center; gap: 11px; }
.synergy-popup-name > b { font-size: 25px; }
.synergy-popup-name span { display: grid; gap: 3px; }
.synergy-popup-name small { color: #aaa2b7; font-size: 10px; }
.synergy-popup-name small { display:flex; align-items:center; gap:5px; min-height:14px; }
.synergy-popup-name .synergy-role-dot.requirement { width:10px; height:10px; opacity:1; border-color:rgba(255,255,255,.75); box-shadow:0 0 7px rgba(255,255,255,.2); }
.synergy-popup-row p { margin: 0; color: #d2cadc; font-size: 11px; text-align: right; }
.synergy-combo-preview { grid-column:1 / -1; display:grid; grid-template-columns:1fr auto 1fr auto; align-items:center; gap:9px; margin-top:2px; padding:8px 10px; border:1px dashed rgba(255,255,255,.16); border-radius:8px; background:rgba(0,0,0,.2); font-size:10px; }
.synergy-combo-preview > span:last-of-type { text-align:left; }
.synergy-combo-preview > i { color:#a58fbf; font-style:normal; }
.synergy-combo-preview > strong { color:#92899d; font-size:10px; }
.synergy-combo-preview.locked { opacity:.42; filter:saturate(.4); }
.synergy-combo-preview.active { border-style:solid; border-color:#8f62ef; background:linear-gradient(90deg,rgba(103,53,185,.22),rgba(44,25,77,.25)); box-shadow:inset 0 0 18px rgba(132,78,236,.09); }
.synergy-combo-preview.active > strong { color:#d9c7ff; text-shadow:0 0 8px rgba(151,98,255,.6); }
.synergy-popup-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.synergy-role-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); vertical-align: middle; }
.synergy-role-dot.streamer { background: #3296ff; }
.synergy-role-dot.production { background: #9b59ff; }
.synergy-role-dot.trollganger { background: #35c96f; }
.synergy-role-dot.contributes { opacity: 1; box-shadow: 0 0 5px #fff, 0 0 13px currentColor; transform: scale(1.12); }
.synergy-role-dot.unused { opacity: .18; filter: saturate(.35); }
.synergy-no-crew { color: #777080; font-size: 10px; }

.battle-synergy-hud { position: absolute; left: 50%; top: 50%; z-index: 34; width: min(520px, 50vw); transform: translate(-50%, -50%); display: flex; justify-content: space-between; pointer-events: none; }
.battle-synergy-side { display: flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 999px; background: rgba(7, 5, 13, .72); border: 1px solid rgba(255,255,255,.1); }
.battle-synergy-side.is-empty { visibility:hidden; }
.battle-synergy-side > small { color: #978ca8; font-size: 8px; letter-spacing: .1em; }
.battle-synergy-badge { display: inline-flex; align-items: center; gap: 3px; }
.battle-synergy-badge > b { font-size: 15px; filter: drop-shadow(0 0 5px rgba(150,105,255,.8)); }
.battle-synergy-badge > b > i { margin:0 2px; color:#c6b4e9; font-size:9px; font-style:normal; }
.battle-synergy-badge > em { color:#d9c8ff; font-size:8px; font-style:normal; font-weight:bold; }
.battle-synergy-badge > i { display: inline-flex; gap: 2px; font-style: normal; }
.battle-synergy-badge .synergy-role-dot { width: 5px; height: 5px; border-width: 0; }

@media (max-width: 700px) {
    .synergy-popup-row { grid-template-columns: 1fr auto; }
    .synergy-popup-row p { grid-column: 1 / -1; text-align: left; }
    .battle-synergy-hud { width: 75vw; }
}
/* Public accounts must never keep playing against an unavailable authority server. */
#serverOfflineGate { position:fixed; inset:0; z-index:999999; display:grid; place-items:center; padding:24px; background:rgba(5,4,9,.94); backdrop-filter:blur(9px); color:#fff; text-align:center; }
.server-offline-card { width:min(420px,100%); padding:34px 28px; border:1px solid #7750d6; border-radius:18px; background:linear-gradient(145deg,#181124,#0d0b12); box-shadow:0 0 60px rgba(118,79,216,.24); display:grid; gap:12px; }
.server-offline-card strong { color:#d4b3ff; font-size:1.5rem; letter-spacing:.1em; }
.server-offline-card span { font-size:1rem; }
.server-offline-card small { color:#aaa; }