/* =========================
   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;
}

.home-wordmark {
    display: block;
    width: clamp(250px, 32vw, 460px);
    height: auto;
    margin: 14px auto 28px;
    filter: brightness(0) invert(1) drop-shadow(0 3px 12px rgba(0,0,0,.72));
}

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 { position:relative; height: 220px; background-size: cover; background-position: center; }.channel-game-title { position:absolute; left:20px; top:17px; color:#fff; font-size:18px; letter-spacing:.14em; text-shadow:0 2px 14px #000; }.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: calc(50% - 108px); 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); }
#communityFeedback[hidden] { display:none !important; }
.community-button { position: fixed; left: 18px; top: calc(50% - 36px); z-index: 9000; width: 58px; height: 58px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 2px solid #7651ae; border-radius: 50%; background: #201a2a; box-shadow: 0 6px 20px rgba(0,0,0,.55); font-size: 25px; }.community-button:hover { background:#302440; }.community-button small { position:absolute; right:-5px; top:-5px; width:22px; height:22px; display:none; align-items:center; justify-content:center; border-radius:50%; background:#e34848; color:white; font-size:11px; }
.community-popup { display:none; position:fixed; inset:0; z-index:220000; padding:20px; background:rgba(0,0,0,.82); align-items:center; justify-content:center; }.community-popup.open { display:flex; }.community-popup-box { position:relative; width:min(720px,94vw); max-height:86vh; overflow:auto; box-sizing:border-box; padding:25px; border:1px solid #7651ae; border-radius:14px; background:#17151d; }.community-popup-close { position:absolute; top:7px; right:10px; margin:0; border:0; background:transparent; font-size:28px; }.community-popup-box>header { text-align:center; }.community-popup-box>header small { color:#b996fa; letter-spacing:2px; font-weight:900; }.community-popup-box>header h2 { margin:5px 0 18px; }.community-popup-box>nav { display:grid; grid-template-columns:1fr 1fr; margin-bottom:16px; overflow:hidden; border:1px solid #654c86; border-radius:9px; }.community-popup-box>nav button { margin:0; border:0; border-radius:0; background:#211c29; }.community-popup-box>nav button.active { background:#56349d; }.community-post { margin:10px 0; padding:15px; text-align:left; border:1px solid #47404f; border-radius:10px; background:#111016; }.community-post.pinned { border-color:#8b68ba; }.community-post>div { display:flex; justify-content:space-between; gap:10px; }.community-post>div b { color:#c6a3ff; font-size:10px; letter-spacing:1px; }.community-post time { color:#89818f; font-size:11px; }.community-post h3 { margin:8px 0; }.community-post p { margin:0; color:#d7d1dd; line-height:1.55; }.community-empty { padding:35px 10px; color:#999; text-align:center; }.community-panel[hidden] { display:none; }#communityFeedback { display:grid; gap:10px; text-align:left; }#communityFeedback p { margin:0 0 5px; color:#bdb5c6; }#communityFeedback select,#communityFeedback input,#communityFeedback textarea { width:100%; box-sizing:border-box; padding:11px; border:1px solid #544661; border-radius:7px; background:#100e14; color:white; }#communityFeedback textarea { min-height:170px; resize:vertical; }#communityFeedback button { margin:0; border-color:#8060ac; background:#4c2e78; }#communityFeedbackStatus.success { color:#7ce59b; }#communityFeedbackStatus.error { color:#ff9da7; }

.social-dock-button { position:fixed; left:18px; z-index:9000; width:58px; height:58px; margin:0; padding:0; display:flex; align-items:center; justify-content:center; border:2px solid #4b8ed2; border-radius:50%; background:#172231; box-shadow:0 6px 20px rgba(0,0,0,.55); font-size:23px; }.social-dock-button.friends { top:calc(50% + 36px); }.social-dock-button.history { top:calc(50% + 108px); border-color:#a477d8; background:#251b31; }.social-dock-button:hover { filter:brightness(1.3); }
body.battle-mode .community-button,
body.battle-mode .social-dock-button { display:none; }
.history-profile { position:relative; overflow:hidden; isolation:isolate; background-size:cover !important; background-position:center; }.history-profile::before { position:absolute; z-index:-1; inset:0; content:""; background:rgba(5,8,12,.77); }
.history-finish-reason { flex:1; color:#e2b36c; font-size:9px; font-weight:900; letter-spacing:.6px; text-align:center; }
.social-hub-popup,.social-profile-popup { display:none; position:fixed; inset:0; z-index:220100; padding:20px; background:rgba(0,0,0,.84); align-items:center; justify-content:center; }.social-hub-popup.open { display:flex; }.social-hub-box { position:relative; width:min(700px,94vw); max-height:86vh; overflow:auto; box-sizing:border-box; padding:25px; border:1px solid #5a85b4; border-radius:14px; background:#151a22; }.social-hub-close,.social-profile-close { position:absolute; top:7px; right:10px; margin:0; border:0; background:transparent; font-size:28px; }.social-hub-box>header { text-align:center; }.social-hub-box>header small { color:#8abbef; letter-spacing:2px; font-weight:900; }.social-hub-box>header h2 { margin:5px 0 18px; }.social-hub-box>nav { display:grid; grid-template-columns:1fr 1fr; margin-bottom:16px; overflow:hidden; border:1px solid #49677f; border-radius:9px; }.social-hub-box>nav button { margin:0; border:0; border-radius:0; background:#1b2734; }.social-hub-box>nav button.active { background:#315c86; }.social-loading,.social-empty { padding:30px 10px; color:#aaa; text-align:center; }.friend-search { display:grid; grid-template-columns:1fr auto; gap:8px; }.friend-search input { min-width:0; padding:10px; border:1px solid #49677f; border-radius:7px; background:#0e131a; color:#fff; }.friend-search button { margin:0; border-color:#5a9bda; background:#244c76; }.social-section-title { margin:20px 0 8px; color:#92c6fa; font-size:11px; font-weight:900; letter-spacing:1px; text-align:left; }.social-player-list { display:grid; gap:8px; }.social-player-card { width:100%; margin:0; padding:9px; display:flex; align-items:center; gap:10px; border-color:#3c5368; background:#10161d; text-align:left; }.social-player-card:hover { border-color:#79b8f4; }.social-player-card img { width:42px; height:42px; object-fit:cover; border:1px solid #78aede; border-radius:50%; background:#090b0e; }.social-player-card span { min-width:0; display:grid; gap:3px; }.social-player-card b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.social-player-card small { color:#aab6c3; }.social-player-card i { margin-left:auto; color:#79e6a2; font-size:10px; font-style:normal; }.ranked-history-list { display:grid; gap:12px; }.ranked-history-match { display:grid; grid-template-columns:1fr 24px 1fr; gap:7px; padding:11px; border:1px solid #444e5b; border-radius:10px; background:#0d1117; }.ranked-history-match>header { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:10px; }.ranked-history-match>header b { color:#72e99c; font-size:11px; letter-spacing:1px; }.ranked-history-match.lost>header b { color:#ec8490; }.ranked-history-match time { color:#8a939f; font-size:10px; }.history-profile { min-width:0; margin:0; padding:7px; display:flex; align-items:center; gap:8px; border-color:#516474; background:#121b24; text-align:left; }.history-profile:hover { border-color:#8bc9ff; }.history-profile.defeated { opacity:.48; filter:grayscale(1); }.history-profile img { width:40px; height:40px; object-fit:cover; border:1px solid #82b4df; border-radius:50%; background:#07090c; }.history-profile span { min-width:0; flex:1; display:grid; gap:3px; }.history-profile b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.history-profile small { color:#a8b4bf; font-size:9px; }.history-versus { align-self:center; color:#b69ae3; font-size:10px; font-weight:900; }.history-hp b { color:#78e89e; font-size:10px; }.history-hp i { display:block; height:5px; overflow:hidden; border-radius:4px; background:#29323b; }.history-hp em { display:block; height:100%; background:#42d97c; }.social-profile-popup { display:flex; }.social-profile-popup>section { position:relative; width:min(360px,92vw); overflow:hidden; box-sizing:border-box; padding:20px; border:1px solid #578ab7; border-radius:13px; background:#151a21; text-align:center; }.social-profile-banner { height:105px; margin:-20px -20px 50px; background-size:cover; background-position:center; filter:brightness(.65); }.social-profile-avatar { position:absolute; top:78px; left:50%; width:86px; height:86px; object-fit:cover; border:2px solid #8bc9ff; border-radius:50%; background:#090b0f; transform:translateX(-50%); }.social-profile-popup h2 { margin:0 0 4px; }.social-profile-popup small { color:#9aaab8; }.social-profile-popup p { color:#d7e2ed; font-size:12px; }.social-friend-action { margin:12px 0 0; border-color:#67bd91; background:#19432c; }.social-friend-action.remove { border-color:#be6772; background:#481c24; }

/* =========================
   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(180px, 240px);
        grid-template-rows: min(300px, 35vh);
        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(240px, 28vh);
        height: min(300px, 35vh);
        aspect-ratio: 4 / 5;
    }
    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: 100%;
        object-fit: cover;
        object-position: center;
    }
    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-media-effect.food-serve { gap:10px; filter:drop-shadow(0 8px 20px rgba(255,178,43,.72)); }.skill-media-effect.food-serve img { width:min(220px,54vw); max-height:42vh; object-fit:contain; border:2px solid #ffcc4b; border-radius:16px; background:#15100a; box-shadow:0 12px 35px #000; }
.gambling-slot,.roulette-spin { opacity:1; animation:none; transform:translate(-50%,-50%); }.gambling-slot { animation:gamblingSlotEnter .28s ease-out both; }.slot-machine { display:flex; gap:6px; padding:9px; border:3px solid #d8b96a; border-radius:10px; background:#09080d; box-shadow:inset 0 0 16px #000,0 0 18px rgba(137,92,255,.7); perspective:300px; }.slot-reel-window { position:relative; width:64px; height:72px; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:6px; background:#1c1927; box-shadow:inset 0 8px 15px #07060a,inset 0 -8px 15px #07060a; }.slot-reel-window::before,.slot-reel-window::after { content:""; position:absolute; z-index:2; left:0; right:0; height:12px; pointer-events:none; }.slot-reel-window::before { top:0; background:linear-gradient(#08070b,transparent); }.slot-reel-window::after { bottom:0; background:linear-gradient(transparent,#08070b); }.slot-symbol-strip { display:flex; flex-direction:column; align-items:center; animation:slotSymbolsFall .42s linear infinite; will-change:transform; }.slot-reel-window:nth-child(2) .slot-symbol-strip { animation-duration:.36s; }.slot-reel-window:nth-child(3) .slot-symbol-strip { animation-duration:.31s; }.slot-symbol-strip span,.slot-reel-window .slot-final-symbol { display:grid; flex:0 0 72px; width:64px; height:72px; place-items:center; color:#fff; font-size:32px; line-height:1; }.slot-reel-window.slot-locked { display:grid; place-items:center; background:#31244c; box-shadow:inset 0 0 12px rgba(255,255,255,.18),0 0 12px rgba(160,96,255,.6); animation:slotLock .22s ease-out; }.slot-reel-window.slot-locked::before,.slot-reel-window.slot-locked::after { opacity:.25; }.slot-result { color:#e5d8ff; font-size:16px; font-weight:900; }.slot-jackpot .slot-machine,.roulette-spin.roulette-jackpot .roulette-wheel { box-shadow:0 0 10px #fff,0 0 32px #ffba18; }.slot-jackpot .slot-result,.roulette-settled em { color:#ffdf58; text-shadow:0 0 14px #ffba18; }.roulette-stage { position:relative; width:174px; height:184px; display:grid; place-items:center; }.roulette-pointer { position:absolute; z-index:4; top:0; left:50%; width:0; height:0; transform:translateX(-50%); border-left:11px solid transparent; border-right:11px solid transparent; border-top:24px solid #ffe65a; filter:drop-shadow(0 2px 4px #000); }.roulette-spin .roulette-wheel { position:relative; width:156px; height:156px; border-radius:50%; background:var(--roulette-bg); border:5px solid #d8b96a; animation:rouletteTurn 4.9s cubic-bezier(.18,.75,.2,1) forwards; box-shadow:inset 0 0 14px #000,0 0 18px rgba(137,92,255,.55); }.roulette-pocket { position:absolute; left:50%; top:50%; width:20px; height:20px; margin:-10px; display:grid; place-items:center; transform:rotate(var(--pocket-angle)) translateY(-63px) rotate(calc(-1 * var(--pocket-angle))); color:#fff; font-size:10px !important; font-style:normal; font-weight:900; text-shadow:0 1px 2px #000; }.roulette-wheel > b { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:24px; }.roulette-spin em { font-size:18px; font-weight:900; color:#fff; }
@keyframes gamblingSlotEnter { from { opacity:0; transform:translate(-50%,-45%) scale(.88); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } } @keyframes slotSymbolsFall { from { transform:translateY(-72px); } to { transform:translateY(-216px); } } @keyframes slotLock { 0% { transform:scaleY(1.18); filter:brightness(1.8); } 100% { transform:scaleY(1); filter:brightness(1); } } @keyframes rouletteTurn { to { transform:rotate(var(--roulette-end)); } }
.roulette-choice-modal { position:fixed; inset:0; z-index:60000; display:grid; place-items:center; background:rgba(0,0,0,.72); backdrop-filter:blur(5px); }.roulette-choice-modal > div { width:min(330px,88vw); padding:20px; border:1px solid #8d64ff; border-radius:15px; background:linear-gradient(145deg,#20152f,#0c0d14); box-shadow:0 18px 60px #000; text-align:center; }.roulette-choice-modal strong { display:block; color:#f1ddff; font-size:19px; letter-spacing:1px; }.roulette-choice-modal p { color:#c2b9ca; font-size:12px; }.roulette-choice-modal button { display:block; width:100%; margin:8px 0; padding:13px; font-weight:900; }.roulette-choice-modal .roulette-red { border-color:#e84c58; color:#ffc0c6; }.roulette-choice-modal .roulette-black { border-color:#8f95a5; color:#e5e7eb; }.roulette-choice-modal .roulette-green { border-color:#53df8a; color:#b9ffd3; }
.skill-video-overlay { position: fixed; z-index:50000; inset:0; width:100vw; height:100dvh; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.72); pointer-events:auto; cursor:pointer; overflow:hidden; }.skill-video-overlay video { width:min(720px,92vw); height:min(405px,52vw,76dvh); max-height:76dvh; 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; }
body.campaign-mode #mainProfileCard { display:none !important; }
body.campaign-mode #accountPanel { display:none !important; }
.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 strong { display:flex; align-items:center; gap:9px; }.campaign-table-event strong img { width:27px; height:27px; object-fit:contain; }.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; }

#menu .solo-battle-launch {
    position:relative;
    display:block;
    width:min(300px,100%);
    min-height:39px;
    margin:10px auto;
    overflow:hidden;
    box-sizing:border-box;
    border:1px solid #777;
    border-radius:6px;
    background:#222;
}
#menu .solo-battle-launch > button:first-child {
    position:absolute;
    z-index:1;
    inset:0;
    width:100%;
    height:100%;
    min-height:0;
    margin:0 !important;
    padding:10px 76px;
    box-sizing:border-box;
    border:0;
    border-radius:inherit;
    background:transparent;
    text-align:center;
}
#menu .solo-battle-launch > button:first-child:hover { background:#444; }
.solo-battle-launch .solo-difficulty-button { position:absolute; z-index:2; top:-1px; right:-1px; width:76px !important; height:calc(100% + 2px); min-height:0; margin:0 !important; border-radius:0 6px 6px 0; }
.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; }
.battle-profile-synergy-anchor { display:none; }

@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; }
}

/* Phone-first refinements. Desktop keeps its dedicated compact layout above. */
@media (max-width: 760px) {
    body { padding: 12px; padding-top: 68px; overflow-x: hidden; }
    button { min-height: 42px; }

    #playerCurrencyHUD {
        top: 7px !important;
        right: 7px !important;
        gap: 7px;
        max-width: calc(100vw - 86px);
        padding: 7px 8px;
        font-size: 11px;
    }
    #playerCurrencyHUD div { gap: 2px; min-height: 16px; }
    #playerCurrencyHUD .global-energy-currency small { display: none; }
    #playerCurrencyHUD .energy-hover-popup { right: 0; width: min(190px, calc(100vw - 24px)); }
    .global-page-back { top: 7px !important; left: 7px !important; min-width: 66px; padding: 8px 10px !important; font-size: 9px !important; }
    .game-settings-button { left: 8px; bottom: 8px; }
    .game-settings-overlay { padding: 12px; }
    .game-settings-overlay section { width: 100%; padding: 22px 17px; }

    .home-view-toggle { top: 61px; width: min(290px, calc(100vw - 24px)); }
    .home-view-toggle button { flex: 1; min-height: 32px; padding: 6px; font-size: 9px; }
    .main-profile-card { width: min(340px, 100%); height: 78px; margin: 0 auto 14px; padding: 8px 10px; }
    .main-profile-card img { width: 54px; height: 54px; }
    .main-profile-info strong { font-size: 17px; }
    .main-profile-info small { font-size: 10px; }
    .generic-home { margin-top: 14px; }
    h1.generic-home { margin-bottom: 18px; font-size: 25px; }
    .home-wordmark { width:min(290px,78vw); margin:14px auto 18px; }
    #menu { width: min(420px, 100%); margin-inline: auto; }
    #menu button { width: 100%; min-height: 52px; margin: 8px 0; font-size: 15px; }
    #menu .solo-battle-launch { display:block; width:100%; min-height:52px; margin:8px 0; }
    #menu .solo-battle-launch > button:first-child { width:100% !important; height:100%; margin:0 !important; }
    #menu .solo-battle-launch .solo-difficulty-button { top:-1px; right:-1px; width:76px !important; height:calc(100% + 2px); margin:0 !important; }

    .youtube-home { margin-top: 58px; border-radius: 10px; }
    .channel-banner { height: 118px; }
    .channel-header { padding: 13px; gap: 10px; }
    .channel-header > img { width: 76px; height: 76px; }
    .channel-identity h1 { font-size: 25px; }
    .channel-header > button { width: 100%; }
    .channel-content { padding: 14px; }
    .channel-featured-art { min-height: 120px; }
    .channel-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .channel-actions button { min-height: 102px; padding: 8px; }

    .shard-storage-modal,.quest-popup { padding: 10px; }
    .shard-storage-box,.quest-popup-box { width: 100%; max-height: 88vh; padding: 18px 14px; box-sizing: border-box; }
    .shard-storage-list { grid-template-columns: 1fr; }
    body.offline-game .quest-button { left: 10px; top:calc(50% - 87px); bottom: auto; transform: translateY(-50%); width: 48px; height: 48px; font-size: 21px; }
    body.offline-game .community-button { left:10px; top:calc(50% - 29px); width:48px; height:48px; font-size:20px; }
    body.offline-game .social-dock-button { left:10px; width:48px; height:48px; font-size:19px; }
    body.offline-game .social-dock-button.friends { top:calc(50% + 29px); }
    body.offline-game .social-dock-button.history { top:calc(50% + 87px); }
    .social-hub-popup,.social-profile-popup { padding:10px; }.social-hub-box { width:100%; max-height:90vh; padding:19px 13px; }.social-hub-box>nav button { padding:10px 4px; font-size:11px; }.ranked-history-match { grid-template-columns:1fr 18px 1fr; gap:4px; padding:8px; }.history-profile { padding:5px; gap:5px; }.history-profile img { width:34px; height:34px; }.history-profile b { font-size:10px; }.history-profile small { font-size:8px; }
    .community-popup { padding:10px; }.community-popup-box { width:100%; max-height:90vh; padding:19px 13px; }.community-popup-box>nav button { padding:10px 4px; font-size:11px; }
    .quest-item { grid-template-columns: 32px minmax(0,1fr); }
    .quest-item > b,.quest-claim-button { grid-column: 2; justify-self: start; }

    body.battle-mode { padding: 7px 5px 88px; }
    body.battle-mode #battle { padding-top: 38px; }
    body.battle-mode #returnHomeButton { top: 7px !important; right: 7px !important; min-height: 34px; padding: 7px 9px; font-size: 9px; }
    body.battle-mode #timer { margin: 0 0 8px; font-size: 21px; }
    body.battle-mode .battle-team-title { display: none; }
    body.battle-mode #battle > hr { margin: 12px 0; border-color: #3a3a3a; }
    body.battle-mode #battle .team {
        --mobile-card-width: clamp(92px, 28vw, 124px);
        grid-template-columns: repeat(3, var(--mobile-card-width));
        grid-template-rows: repeat(2, calc(var(--mobile-card-width) * 1.3));
        gap: 10px 6px;
    }
    body.battle-mode #battle .formation-slot,
    body.battle-mode #battle .card { width: var(--mobile-card-width); height: calc(var(--mobile-card-width) * 1.25); }
    body.battle-mode #battle .formation-slot:nth-child(4),
    body.battle-mode #battle .formation-slot:nth-child(5) { margin-left: calc((var(--mobile-card-width) + 6px) / 2); }
    body.battle-mode #battle .card { padding: 5px; }
    body.battle-mode #battle .card h3 { font-size: 10px; line-height: 11px; }
    body.battle-mode #battle .card-meta { min-height: 10px; font-size: 8px; line-height: 9px; }
    body.battle-mode #battle .battle-resource span { font-size: 7px; }
    body.battle-mode #battle .battle-resource i { height: 4px; }
    body.battle-mode #actions {
        position: sticky;
        bottom: 0;
        margin: 12px -5px 0;
        padding: 8px 5px calc(8px + env(safe-area-inset-bottom));
        gap: 6px;
        background: linear-gradient(to top, rgba(9,9,12,.98), rgba(9,9,12,.88));
        box-shadow: 0 -7px 18px rgba(0,0,0,.32);
    }
    body.battle-mode #actions button { flex: 1 1 calc(50% - 6px); min-width: 0; min-height: 44px; margin: 0; padding: 7px 5px; font-size: 11px; }
    body.battle-mode #log { height: 100px; margin: 10px 6px 0; font-size: 10px; }
    body.battle-mode .log-title { margin: 14px 0 0; }
    body.battle-mode .turn-order-panel { width: calc(100vw - 24px); margin: 8px auto 12px; padding: 8px; }
    body.battle-mode .turn-order-item { min-width: 96px; min-height: 35px; }
    body.battle-mode .battle-synergy-hud { position: relative; left: auto; top: auto; width: min(420px, 94vw); margin: 0 auto 8px; transform: none; }
}
/* 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; }

.mobile-battle-panel-button { display:none; }

/* Streamer > Produkcija > Trollganger > Streamer reminder chart. */
.role-chart-modal { position:fixed; inset:0; z-index:150000; display:none; place-items:center; padding:18px; box-sizing:border-box; background:rgba(3,4,8,.88); backdrop-filter:blur(8px); }
.role-chart-modal.open { display:grid; }
.role-chart-window { position:relative; width:min(520px,calc(100vw - 28px)); max-height:calc(100svh - 28px); overflow:auto; padding:24px; box-sizing:border-box; border:1px solid #825bd0; border-radius:16px; background:linear-gradient(145deg,#1c1527,#0d0d12 72%); box-shadow:0 20px 70px rgba(0,0,0,.72),0 0 30px rgba(129,82,220,.2); color:#fff; text-align:center; }
.role-chart-close { position:absolute; top:9px; right:9px; width:32px; min-width:32px; height:32px; margin:0; padding:0; border-color:#654c83; border-radius:50%; background:#1c1723; color:#d9c7ff; font-size:20px; line-height:28px; }
.role-chart-window header small { color:#b995ff; font-size:10px; font-weight:900; letter-spacing:1.4px; }
.role-chart-window header h2 { margin:5px 0 4px; color:#fff; font-size:25px; }
.role-advantage-wheel { position:relative; width:290px; height:270px; margin:10px auto 0; }
.role-wheel-ring { position:absolute; inset:42px 48px 30px; border:3px solid rgba(172,137,235,.28); border-radius:50%; box-shadow:inset 0 0 26px rgba(111,68,180,.16),0 0 18px rgba(111,68,180,.12); }
.role-wheel-node { position:absolute; z-index:2; display:grid; place-items:center; width:108px; height:72px; padding:6px; box-sizing:border-box; border:2px solid; border-radius:12px; background:#121218; box-shadow:0 7px 18px rgba(0,0,0,.5); }
.role-wheel-node span { font-size:25px; line-height:26px; }
.role-wheel-node b { font-size:10px; letter-spacing:.45px; }
.role-wheel-node.streamer { top:0; left:91px; border-color:#3296ff; color:#75c0ff; }
.role-wheel-node.production { right:0; bottom:10px; border-color:#9b59ff; color:#c799ff; }
.role-wheel-node.trollganger { left:0; bottom:10px; border-color:#35c96f; color:#75e69d; }
.role-wheel-center { position:absolute; z-index:2; top:119px; left:50%; color:#ffdb65; font-size:14px; transform:translateX(-50%); text-shadow:0 0 12px rgba(255,210,64,.45); }
.role-wheel-center small { display:block; margin-top:1px; color:#aaa; font-size:8px; letter-spacing:1px; }
.role-wheel-arrow { position:absolute; z-index:3; color:#ffe170; font-size:31px; font-weight:900; text-shadow:0 0 9px rgba(255,213,75,.7); }
.role-wheel-arrow.arrow-streamer { top:77px; right:38px; transform:rotate(58deg); }
.role-wheel-arrow.arrow-production { right:126px; bottom:14px; transform:rotate(180deg); }
.role-wheel-arrow.arrow-trollganger { top:77px; left:38px; transform:rotate(-58deg); }

/* Phone battle: a complete, non-scrolling combat view. */
@media (max-width: 760px) {
    body.battle-mode {
        height: 100svh;
        min-height: 0;
        padding: 4px;
        overflow: hidden;
        box-sizing: border-box;
    }

    body.battle-mode #battle {
        position: relative;
        display: grid !important;
        grid-template-rows: 42px 22px minmax(0,1fr) 18px minmax(0,1fr) 114px;
        width: 100%;
        height: calc(100svh - 8px);
        padding: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    body.battle-mode #turnInfo,
    body.battle-mode .battle-team-title,
    body.battle-mode .battle-section-title,
    body.battle-mode .battle-log-toggle { display: none; }

    body.battle-mode .battle-side-profile {
        position: relative;
        z-index: 4;
        grid-row: 1;
        display: flex;
        align-items: center;
        gap: 5px;
        width: 41%;
        height: 40px;
        padding: 4px 5px;
        overflow: hidden;
        box-sizing: border-box;
        background-color: #17171d;
        background-position: center;
        background-size: cover;
        border: 1px solid #555;
        border-radius: 8px;
        text-align: left;
    }
    body.battle-mode .player-profile { grid-column: 1; justify-self: start; border-color: #3b9b58; }
    body.battle-mode .enemy-profile { grid-column: 1; justify-self: end; border-color: #a6404b; }
    body.battle-mode .battle-profile-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.44)); }
    body.battle-mode .battle-side-profile img { position:relative; width:30px; height:30px; flex:0 0 auto; object-fit:cover; border:1px solid #777; border-radius:50%; background:#08090c; }
    body.battle-mode .battle-profile-content { position:relative; min-width:0; flex:1; }
    body.battle-mode .battle-side-profile strong { display:block; overflow:hidden; font-size:10px; line-height:11px; text-overflow:ellipsis; white-space:nowrap; }
    body.battle-mode .battle-side-profile small { display:block; margin-top:1px; overflow:hidden; color:#c9c1d4; font-size:6px; line-height:8px; text-overflow:ellipsis; white-space:nowrap; }
    body.battle-mode .battle-side-profile small b { color:#ffcc55; font-size:10px; }
    body.battle-mode .battle-team-health { margin-top:2px; }
    body.battle-mode .battle-team-health span { display:none; }
    body.battle-mode .battle-team-health i { display:block; height:4px; overflow:hidden; border-radius:4px; background:#080808; }
    body.battle-mode .battle-team-health em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#28a84f,#72ef91); }
    body.battle-mode .battle-team-health.enemy-health em { background:linear-gradient(90deg,#b52c39,#ff6975); }
    body.battle-mode .battle-green-team-badge { display:none !important; }

    body.battle-mode #returnHomeButton {
        position: absolute !important;
        z-index: 6 !important;
        top: 45px !important;
        right: 3px !important;
        min-width: 0;
        min-height: 19px;
        margin: 0 !important;
        padding: 3px 6px;
        font-size: 7px;
        opacity: .76;
    }
    body.battle-mode #returnHomeButton span { font-size: 7px; }
    body.battle-mode .auto-battle-toggle { position:absolute; z-index:6; top:45px; left:3px; display:block; width:auto; min-width:70px; height:19px; margin:0; padding:2px 5px; font-size:7px; }
    body.battle-mode .video-animations-toggle { position:absolute; z-index:6; top:45px; left:78px; display:block; width:auto; min-width:64px; height:19px; margin:0; padding:2px 5px; font-size:7px; }
    .role-chart-window { padding:20px 12px 14px; }
    .role-advantage-wheel { transform:scale(.9); margin-top:-5px; margin-bottom:-1px; }

    body.battle-mode .battle-synergy-hud {
        position: relative;
        z-index: 3;
        grid-row: 2;
        grid-column: 1;
        align-self: center;
        width: 100%;
        margin: 0;
        transform: none;
    }
    body.battle-mode .battle-synergy-side { padding: 2px 5px; }
    body.battle-mode .battle-synergy-side > small { display:none; }
    body.battle-mode .battle-synergy-badge > b { font-size:11px; }
    body.battle-mode .battle-synergy-badge > em { max-width:74px; overflow:hidden; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }

    body.battle-mode #enemyTeam { grid-row: 3; align-self: center; margin: 0; }
    body.battle-mode #playerTeam { grid-row: 5; align-self: center; margin: 0; }
    body.battle-mode #battle > hr {
        grid-row: 4;
        align-self: center;
        width: 100%;
        height: 1px;
        margin: 0;
        border: 0;
        background: linear-gradient(to right,#292929 0%,#292929 43%,transparent 47%,transparent 53%,#292929 57%,#292929 100%);
    }
    body.battle-mode #timer {
        position: absolute;
        z-index: 5;
        top: 50%;
        left: 50%;
        margin: 0;
        padding: 0 6px;
        transform: translate(-50%,-50%);
        background:#111;
        color:#ffcc00;
        font-size: 12px;
        line-height: 16px;
    }

    body.battle-mode #battle .team {
        --mobile-card-width: clamp(66px, 11vh, 96px);
        grid-template-columns: repeat(3, var(--mobile-card-width));
        grid-template-rows: repeat(2, calc(var(--mobile-card-width) * 1.25));
        gap: 5px 5px;
        align-content: center;
    }
    body.battle-mode #battle .formation-slot,
    body.battle-mode #battle .card { width:var(--mobile-card-width); height:calc(var(--mobile-card-width) * 1.2); }
    body.battle-mode #battle .formation-slot:nth-child(4),
    body.battle-mode #battle .formation-slot:nth-child(5) { margin-left:calc((var(--mobile-card-width) + 5px) / 2); }
    body.battle-mode #battle .card { padding:3px; }
    body.battle-mode #battle .card h3 { font-size:8px; line-height:9px; }
    body.battle-mode #battle .card-meta { min-height:8px; font-size:6px; line-height:7px; }
    body.battle-mode #battle .formation-role { font-size:6px; }
    body.battle-mode #battle .battle-resource span { font-size:6px; line-height:7px; }
    body.battle-mode #battle .battle-resource i { height:3px; }

    body.battle-mode .turn-order-panel {
        position: relative;
        z-index: 4;
        grid-row: 6;
        grid-column: 1;
        align-self: start;
        width: 100%;
        max-height: 29px;
        margin: 0;
        padding: 1px 3px;
        overflow: hidden;
        box-sizing: border-box;
        transform: none;
        border-radius: 6px;
    }
    body.battle-mode .turn-order-heading { position:absolute; left:3px; top:2px; z-index:2; margin:0; }
    body.battle-mode .turn-order-heading h3 { display:none; }
    body.battle-mode #turnRoundIndicator { padding:1px 3px; font-size:6px; }
    body.battle-mode .turn-order-panel #turnOrderList { display:flex; height:27px; gap:3px; padding-left:50px; overflow-x:auto; }
    body.battle-mode .turn-order-item { display:grid; flex:0 0 24px; min-width:24px; min-height:24px; margin:0; padding:1px; grid-template-columns:1fr; border-radius:5px; }
    body.battle-mode .turn-order-item img { width:21px; height:21px; border-radius:50%; }
    body.battle-mode .turn-order-number,.turn-order-name { display:none; }

    body.battle-mode #log {
        position: relative;
        z-index: 4;
        grid-row: 6;
        grid-column: 1;
        align-self: center;
        width: 100%;
        height: 23px;
        margin: 0;
        padding: 5px 7px;
        overflow: hidden;
        box-sizing: border-box;
        border-radius: 5px;
        color:#c7c7ce;
        font-size: 8px;
        line-height: 12px;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    body.battle-mode #actions {
        position: relative;
        z-index: 5;
        grid-row: 6;
        grid-column: 1;
        align-self: end;
        display:flex;
        flex-wrap: nowrap;
        justify-content:flex-start;
        width: 100%;
        min-height: 52px;
        height: 52px;
        margin: 0;
        padding: 4px 0 env(safe-area-inset-bottom);
        overflow-x: auto;
        background:linear-gradient(to top,rgba(9,9,12,.98),rgba(9,9,12,.88));
        box-sizing:border-box;
    }
    body.battle-mode #actions button { flex:0 0 min(118px,31vw); min-height:43px; height:43px; margin:0 2px; padding:5px; font-size:9px; line-height:10px; }
    body.battle-mode #actions button.skill-text-long { font-size:8px; line-height:9px; }
    body.battle-mode #actions button.skill-text-very-long { font-size:7px; line-height:8px; }
}

/* Final phone battle layout: scaled PC composition with optional side drawers. */
@media (max-width: 899px) {
    body.battle-mode { height:100svh; min-height:0; padding:4px; overflow:hidden; box-sizing:border-box; }
    body.battle-mode #battle {
        position:relative;
        display:grid !important;
        grid-template-rows:minmax(0,1fr) 34px minmax(0,1fr) 58px;
        gap:0;
        width:100%;
        height:calc(100svh - 8px);
        padding:0;
        overflow:hidden;
        box-sizing:border-box;
    }

    body.battle-mode #turnInfo,
    body.battle-mode .battle-team-title,
    body.battle-mode .battle-section-title,
    body.battle-mode .battle-log-toggle { display:none; }

    body.battle-mode #enemyTeam { grid-row:1; align-self:end; margin:0; padding-bottom:3px; }
    body.battle-mode #playerTeam { grid-row:3; align-self:start; margin:0; padding-top:3px; }
    body.battle-mode #battle > hr {
        grid-row:2;
        align-self:center;
        width:100%;
        height:1px;
        margin:0;
        border:0;
        background:linear-gradient(to right,#323232 0%,#323232 calc(50% - 45px),rgba(50,50,50,.35) calc(50% - 28px),transparent calc(50% - 18px),transparent calc(50% + 18px),rgba(50,50,50,.35) calc(50% + 28px),#323232 calc(50% + 45px),#323232 100%);
    }
    body.battle-mode #timer {
        position:absolute;
        z-index:30;
        top:calc(50% - 29px);
        left:50%;
        margin:0;
        padding:2px 9px;
        transform:translate(-50%,-50%);
        border-radius:999px;
        background:radial-gradient(ellipse at center,#111 50%,rgba(17,17,17,.72) 72%,transparent 100%);
        color:#ffcc00;
        font-size:clamp(13px,4vw,21px);
        line-height:22px;
        white-space:nowrap;
        text-shadow:0 0 9px rgba(255,204,0,.45);
    }

    body.battle-mode #battle .team {
        --mobile-card-width:min(26vw, calc((100svh - 112px) / 4.9), 120px);
        --mobile-card-height:calc(var(--mobile-card-width) * 1.25);
        display:grid !important;
        grid-template-columns:repeat(3,var(--mobile-card-width));
        grid-template-rows:repeat(2,var(--mobile-card-height));
        gap:5px 7px;
        justify-content:center;
        align-content:center;
    }
    body.battle-mode #battle .formation-slot,
    body.battle-mode #battle .card { width:var(--mobile-card-width); height:var(--mobile-card-height); }
    body.battle-mode #battle .formation-slot:nth-child(4),
    body.battle-mode #battle .formation-slot:nth-child(5) { margin-left:calc((var(--mobile-card-width) + 7px) / 2); }
    body.battle-mode #battle .card { padding:4px; }
    body.battle-mode #battle .card h3 { font-size:clamp(7px,2.4vw,11px); line-height:1.05; }
    body.battle-mode #battle .card-meta { min-height:8px; font-size:clamp(6px,1.8vw,8px); line-height:1; }
    body.battle-mode #battle .formation-role { font-size:clamp(5px,1.6vw,7px); }
    body.battle-mode #battle .battle-resource span { font-size:clamp(5px,1.55vw,7px); line-height:1.05; }
    body.battle-mode #battle .battle-resource i { height:3px; }

    body.battle-mode #enemyTeam.campaign-solo-formation {
        grid-template-columns:min(34vw,145px);
        grid-template-rows:min(42.5vw,181px);
        justify-items:center;
    }
    body.battle-mode #enemyTeam.campaign-solo-formation .formation-slot,
    body.battle-mode #enemyTeam.campaign-solo-formation .card { width:min(34vw,145px); height:min(42.5vw,181px); margin:0; }

    body.battle-mode .battle-side-profile {
        position:absolute;
        z-index:22;
        display:flex;
        align-items:center;
        gap:5px;
        width:clamp(105px,22vw,195px);
        height:auto;
        aspect-ratio:270 / 92;
        padding:5px;
        overflow:hidden;
        box-sizing:border-box;
        background-color:#17171d;
        background-position:center;
        background-size:cover;
        border:1px solid #555;
        border-radius:8px;
        text-align:left;
        box-shadow:0 4px 15px rgba(0,0,0,.5);
        transform:none;
    }
    body.battle-mode .player-profile { left:3px; top:auto; bottom:calc(50% + 9px); width:clamp(105px,22vw,195px); grid-row:auto; grid-column:auto; justify-self:auto; border-color:#3b9b58; }
    body.battle-mode .enemy-profile { right:3px; bottom:calc(50% + 9px); top:auto; grid-row:auto; grid-column:auto; justify-self:auto; border-color:#a6404b; }
    body.battle-mode .battle-profile-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.93),rgba(0,0,0,.45)); }
    body.battle-mode .battle-side-profile img { position:relative; width:clamp(27px,6vw,45px); height:clamp(27px,6vw,45px); flex:0 0 auto; object-fit:cover; border:1px solid #777; border-radius:50%; background:#08090c; }
    body.battle-mode .battle-profile-content { position:relative; min-width:0; flex:1; }
    body.battle-mode .battle-side-profile strong { display:block; overflow:hidden; font-size:clamp(8px,1.8vw,12px); line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }
    body.battle-mode .battle-side-profile small { display:block; margin-top:2px; overflow:hidden; color:#c3bacd; font-size:clamp(5px,1.15vw,7px); line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }
    body.battle-mode .battle-side-profile small b { display:block; color:#ffcc55; font-size:clamp(9px,2.3vw,15px); line-height:1.05; }
    body.battle-mode .battle-team-health { margin-top:2px; }
    body.battle-mode .battle-team-health span { display:flex; justify-content:space-between; color:#aaa; font-size:5px; }
    body.battle-mode .battle-team-health span b { color:#72ef91; font-size:6px; }
    body.battle-mode .battle-team-health.enemy-health span b { color:#ff747d; }
    body.battle-mode .battle-team-health i { display:block; height:4px; margin-top:1px; overflow:hidden; border-radius:5px; background:#080808; }
    body.battle-mode .battle-team-health em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#28a84f,#72ef91); }
    body.battle-mode .battle-team-health.enemy-health em { background:linear-gradient(90deg,#b52c39,#ff6975); }
    body.battle-mode .battle-green-team-badge.show { display:flex !important; transform:scale(.7); transform-origin:top right; }

    body.battle-mode .battle-synergy-hud {
        position:absolute;
        z-index:24;
        left:50%;
        top:calc(50% - 29px);
        width:min(72vw,520px);
        margin:0;
        transform:translate(-50%,-50%);
    }
    body.battle-mode .battle-synergy-side { padding:2px 5px; }
    body.battle-mode .battle-synergy-side > small { display:none; }
    body.battle-mode .battle-synergy-badge > b { font-size:11px; }
    body.battle-mode .battle-synergy-badge > em { max-width:70px; overflow:hidden; font-size:6px; text-overflow:ellipsis; white-space:nowrap; }

    body.battle-mode #actions {
        position:relative;
        z-index:25;
        grid-row:4;
        align-self:center;
        display:flex;
        flex-wrap:nowrap;
        justify-content:center;
        width:100%;
        height:54px;
        min-height:54px;
        margin:0;
        padding:4px 2px calc(4px + env(safe-area-inset-bottom));
        gap:4px;
        overflow-x:auto;
        box-sizing:border-box;
        background:transparent;
        box-shadow:none;
        transform:none;
    }
    body.battle-mode #actions button { flex:1 1 0; min-width:76px; max-width:155px; height:46px; min-height:46px; margin:0; padding:5px 4px; font-size:clamp(8px,2.2vw,13px); line-height:1.08; }
    body.battle-mode #actions button.skill-text-long { font-size:clamp(7px,1.9vw,11px); }
    body.battle-mode #actions button.skill-text-very-long { font-size:clamp(6px,1.7vw,9px); }

    body.battle-mode #returnHomeButton { top:4px !important; right:4px !important; min-height:25px; padding:4px 7px; font-size:7px; }
    body.battle-mode #returnHomeButton span { font-size:7px; }
    body.battle-mode .auto-battle-toggle { position:absolute; z-index:32; top:4px; left:4px; display:block; width:auto; min-width:72px; height:24px; margin:0; padding:3px 5px; font-size:7px; }
    body.battle-mode .video-animations-toggle { position:absolute; z-index:32; top:4px; left:110px; display:block; width:auto; min-width:72px; height:24px; margin:0; padding:3px 5px; font-size:7px; }

    body.battle-mode .mobile-battle-panel-button {
        position:fixed;
        z-index:9202;
        top:50%;
        display:flex;
        width:34px;
        min-width:34px;
        height:58px;
        margin:0;
        padding:4px 2px;
        transform:translateY(-50%);
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        border-color:#6e5a91;
        background:rgba(23,20,30,.9);
        color:#d3c4ed;
        font-size:13px;
        line-height:1;
        backdrop-filter:blur(6px);
    }
    body.battle-mode .mobile-battle-panel-button span { font-size:6px; font-weight:800; letter-spacing:.5px; }
    body.battle-mode .mobile-battle-log-button { left:0; border-left:0; border-radius:0 8px 8px 0; }
    body.battle-mode .mobile-turn-order-button { right:0; border-right:0; border-radius:8px 0 0 8px; }
    body.battle-mode .mobile-battle-panel-button[aria-expanded="true"] { border-color:#a77cff; background:#38245d; color:#fff; box-shadow:0 0 14px rgba(140,92,232,.45); }

    body.battle-mode #log,
    body.battle-mode .turn-order-panel {
        position:fixed;
        z-index:9200;
        top:10%;
        bottom:10%;
        width:min(310px,82vw);
        height:auto;
        max-height:none;
        margin:0;
        padding:12px;
        overflow-y:auto;
        box-sizing:border-box;
        border:1px solid #685681;
        background:rgba(10,10,14,.97);
        box-shadow:0 14px 42px rgba(0,0,0,.72);
        opacity:0;
        pointer-events:none;
        transition:transform .25s ease,opacity .2s ease;
    }
    body.battle-mode #log { left:0; transform:translateX(-105%); border-radius:0 12px 12px 0; color:#ddd; font-size:10px; line-height:14px; text-align:left; white-space:normal; }
    body.battle-mode .turn-order-panel { right:0; left:auto; transform:translateX(105%); border-radius:12px 0 0 12px; }
    body.battle-mode.mobile-battle-log-open #log { transform:translateX(0); opacity:1; pointer-events:auto; }
    body.battle-mode.mobile-turn-order-open .turn-order-panel { transform:translateX(0); opacity:1; pointer-events:auto; }
    body.battle-mode .turn-order-heading { position:static; margin-bottom:9px; }
    body.battle-mode .turn-order-heading h3 { display:block; }
    body.battle-mode .turn-order-panel #turnOrderList { display:block; height:auto; padding:0; overflow:visible; }
    body.battle-mode .turn-order-item { display:grid; min-width:0; min-height:36px; margin:4px 0; padding:4px; grid-template-columns:24px 28px 1fr; }
    body.battle-mode .turn-order-item img { width:27px; height:27px; }
    body.battle-mode .turn-order-number,.turn-order-name { display:block; }
}

/* Enforce the final mobile battle positions over every legacy compact rule. */
@media (max-width: 899px) {
    body.battle-mode .player-profile {
        position:absolute !important;
        left:3px !important;
        top:auto !important;
        width:clamp(105px,22vw,195px) !important;
        right:auto !important;
        bottom:calc(50% + 9px) !important;
        transform:none !important;
    }
    body.battle-mode .enemy-profile {
        position:absolute !important;
        top:auto !important;
        right:3px !important;
        bottom:calc(50% + 9px) !important;
        left:auto !important;
        transform:none !important;
    }
    /* Keep each synergy attached directly beside its profile on the centre line. */
    body.battle-mode .battle-synergy-hud {
        position:absolute !important;
        z-index:24 !important;
        --mobile-profile-width:clamp(105px,22vw,195px);
        left:0 !important;
        top:auto !important;
        right:0 !important;
        bottom:calc(50% + 9px) !important;
        width:100% !important;
        height:0 !important;
        min-height:0 !important;
        min-width:0 !important;
        margin:0 !important;
        padding:0 !important;
        display:block !important;
        transform:none !important;
    }
    body.battle-mode .battle-synergy-side {
        position:absolute;
        bottom:0 !important;
        flex:0 0 auto;
    }
    body.battle-mode .battle-synergy-side.player-synergy { left:calc(7px + var(--mobile-profile-width)) !important; }
    body.battle-mode .battle-synergy-side.enemy-synergy { right:calc(7px + var(--mobile-profile-width)) !important; }
    body.battle-mode .battle-side-profile { overflow:visible !important; }
    body.battle-mode .battle-profile-synergy-anchor {
        display:block;
        position:absolute;
        z-index:3;
        bottom:0;
        pointer-events:none;
        white-space:nowrap;
    }
    body.battle-mode .battle-profile-synergy-anchor .battle-synergy-side { position:static; }
    body.battle-mode .player-profile .battle-profile-synergy-anchor { left:calc(100% + 4px); }
    body.battle-mode .enemy-profile .battle-profile-synergy-anchor { right:calc(100% + 4px); }
    body.battle-mode .turn-order-panel,
    body.battle-mode #log {
        position:fixed !important;
        grid-row:auto !important;
        grid-column:auto !important;
    }
    body.battle-mode .turn-order-panel { transform:translateX(105%) !important; }
    body.battle-mode #log { transform:translateX(-105%) !important; }
    body.battle-mode.mobile-turn-order-open .turn-order-panel { transform:translateX(0) !important; }
    body.battle-mode.mobile-battle-log-open #log { transform:translateX(0) !important; }
    body.battle-mode #testingBattleControls { display:none !important; }
}

.social-request-list { display:grid; gap:8px; }.social-request-list article { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:7px; border:1px solid #49677f; border-radius:9px; background:#10161d; }.social-request-list .social-player-card { padding:2px; border:0; background:transparent; }.social-request-list article>div { display:grid; gap:5px; }.social-request-list article button { margin:0; padding:7px 9px; font-size:10px; }.social-request-list [data-friend-response="accept"] { border-color:#5fbd8a; background:#17442b; }.social-request-list [data-friend-response="decline"] { border-color:#ad5f6a; background:#421c23; }.friend-request-setting { display:flex; align-items:center; gap:7px; margin:16px 0 4px; color:#b5c5d5; font-size:11px; }.friend-request-setting input { accent-color:#6ca9df; }