body { font-family: Arial, sans-serif; padding: 20px; background-color: #f4f4f9; margin: 0; padding-bottom: 350px !important; transition: background-color 0.3s; }
.dashboard-container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: background-color 0.3s, color 0.3s; }

.badge { padding: 4px 8px; border-radius: 6px; font-weight: bold; font-size: 12px; display: inline-block; width: 65px; text-align: center; }
.badge-troop { background-color: #d0ebff; color: #0b5394; border: 1px solid #9fc5e8; }
.badge-spell { background-color: #fce5cd; color: #b45f06; border: 1px solid #f9cb9c; }
.badge-building { background-color: #d9ead3; color: #38761d; border: 1px solid #b6d7a8; }

#balanceTable tbody tr { cursor: pointer; transition: background-color 0.2s; }
#balanceTable tbody tr:hover { background-color: #e8f0fe !important; }

table.dataTable tbody tr.row-champion { background: linear-gradient(90deg, #fffdf0, #ffffff) !important; box-shadow: inset 6px 0 0 #ffaa00; }
table.dataTable tbody tr.row-champion:hover { background: linear-gradient(90deg, #fff3b3, #ffffff) !important; }
table.dataTable tbody tr.row-champion td:nth-child(2) { font-weight: bold; color: #cc5500; }
table.dataTable tbody tr.row-champion td:nth-child(2)::after { content: ' 👑'; font-size: 14px; text-shadow: none; }

#compareBanner { display: none; background: linear-gradient(to right, #ffe600, #ffb300); color: #330000; padding: 15px; text-align: center; font-size: 18px; font-weight: bold; cursor: pointer; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); border: 2px solid #cc7a00; }
#compareBanner:hover { background: #ffcc00; }

.modal-overlay { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow-y: auto; }
.modal-content { background: linear-gradient(135deg, #3b507b, #1e2a45); color: white; margin: 5% auto; padding: 20px; border: 4px solid #141c2e; border-radius: 15px; width: 95%; max-width: 500px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); position: relative; font-family: 'Arial Rounded MT Bold', Arial, sans-serif; }
.modal-content-vs { max-width: 850px; } 

@keyframes popIn { 0% { transform: scale(0.5) translateY(50px); opacity: 0; } 70% { transform: scale(1.05) translateY(-10px); opacity: 1; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
.modal-open-anim .modal-content { animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

.close-btn { position: absolute; top: -15px; right: -15px; color: white; background: #e33; border: 3px solid #811; border-radius: 8px; font-size: 24px; font-weight: bold; cursor: pointer; width: 40px; height: 40px; line-height: 34px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.5); z-index: 100; }
.close-btn:hover { background: #ff4d4d; }

.nav-btn { position: absolute; top: 60px; background: linear-gradient(to bottom, #1e2a45, #0f1626); color: #ffcc00; border: 2px solid #3b507b; border-radius: 50%; width: 40px; height: 40px; font-size: 20px; font-weight: bold; cursor: pointer; z-index: 105; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 8px rgba(0,0,0,0.5); transition: transform 0.2s, background 0.2s; }
.nav-btn:hover { background: #3b507b; transform: scale(1.1); }
.prev-btn { left: -15px; } .next-btn { right: -15px; }

.cr-header { display: flex; align-items: flex-start; margin-bottom: 20px; gap: 15px; }
.cr-card-img-wrapper { width: 100px; height: 120px; position: relative; flex-shrink: 0; }
.cr-card-img-inner { width: 100%; height: 100%; background: #000; border-radius: 10px; border: 3px solid #ffd700; box-shadow: 0 4px 8px rgba(0,0,0,0.5); overflow: hidden; display: flex; justify-content: center; align-items: center; }

.champion-frame { border: 4px solid #ffaa00 !important; box-shadow: 0 0 15px #ffaa00, inset 0 0 20px #ff3300 !important; animation: pulseChampion 1.5s infinite alternate; }
@keyframes pulseChampion { 0% { box-shadow: 0 0 10px #ffaa00, inset 0 0 10px #ff3300; } 100% { box-shadow: 0 0 25px #ff3300, inset 0 0 20px #ffaa00; } }

.cr-card-img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform 0.2s ease; }
.cr-card-img:hover { transform: scale(1.1); }

.cr-header-info { flex-grow: 1; }
.cr-header-info h2 { margin: 0 0 2px 0; font-size: 26px; text-shadow: 2px 2px 4px rgba(0,0,0,0.9); letter-spacing: 1px; text-transform: capitalize; }
.cr-level-text { margin: 0 0 10px 0; color: #a9b8d6; font-size: 14px; font-weight: bold; }

.star-selector { position: absolute; top: -14px; right: -14px; display: flex; gap: 2px; z-index: 100; cursor: pointer; user-select: none; pointer-events: auto; }
.cr-star-svg { cursor: pointer; transition: transform 0.1s; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.8)); }
.cr-star-svg:hover { transform: scale(1.2); }
.cr-star-svg polygon { fill: #444; stroke: #222; stroke-width: 8; transition: fill 0.2s, stroke 0.2s; }
.cr-star-svg.active polygon { fill: #ffcc00; stroke: #fff; filter: drop-shadow(0px 0px 5px #ff9900); }

.cr-badges-row { display: flex; gap: 10px; }
.cr-badge-container { display: flex; flex-direction: column; flex: 1; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.5); border: 2px solid #1a2a40; min-width: 80px; }
.cr-badge-label { font-size: 11px; font-weight: 900; text-align: center; padding: 4px 0; border-bottom: 2px solid #14243b; }
.cr-badge-value { font-size: 14px; font-weight: bold; text-align: center; padding: 6px 0; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }

.badge-common { border-color: #1a2a40; } .badge-common .cr-badge-label { background: linear-gradient(to bottom, #a0cbf5, #6c9ce6); color: #1a3c6d; border-bottom-color: #14243b; } .badge-common .cr-badge-value { background: linear-gradient(to bottom, #304768, #1b2a40); color: #ffffff; }
.badge-rare { border-color: #ff9900 !important; } .badge-rare .cr-badge-label { background: linear-gradient(to bottom, #ffcc66, #ff9900) !important; color: #553300 !important; border-bottom-color: #995500 !important; } .badge-rare .cr-badge-value { background: linear-gradient(to bottom, #cc5500, #883300) !important; color: #ffeeaa !important; text-shadow: 1px 1px 0 #000 !important; }
.badge-epic { border-color: #aa33ff !important; } .badge-epic .cr-badge-label { background: linear-gradient(to bottom, #d9a3ff, #aa33ff) !important; color: #330066 !important; border-bottom-color: #660099 !important; } .badge-epic .cr-badge-value { background: linear-gradient(to bottom, #660099, #330066) !important; color: #eeccff !important; text-shadow: 1px 1px 0 #000 !important; }
.badge-legendary { border-color: #00ffff !important; box-shadow: 0 0 10px rgba(0,255,255,0.4) !important; } .badge-legendary .cr-badge-label { background: linear-gradient(to bottom, #ccffff, #00ccff) !important; color: #002244 !important; border-bottom-color: #005588 !important; } .badge-legendary .cr-badge-value { background: linear-gradient(to bottom, #003366, #001133) !important; color: #00ffff !important; text-shadow: 0 0 5px #00ffff !important; }
.champion-badge { border-color: #ffaa00 !important; box-shadow: 0 4px 10px rgba(255, 170, 0, 0.5) !important; } .champion-badge .cr-badge-label { background: linear-gradient(to bottom, #ffdd55, #ffaa00) !important; color: #551100 !important; border-bottom-color: #cc5500 !important; } .champion-badge .cr-badge-value { background: linear-gradient(to bottom, #cc0000, #880000) !important; color: #ffdd55 !important; text-shadow: 1px 1px 2px #000 !important; }

.cr-desc-box { background-color: #f4f7f6; color: #334; padding: 15px; border-radius: 12px; font-size: 14px; text-align: center; font-weight: bold; line-height: 1.4; border: 3px solid #b0c4de; margin-bottom: 20px; }

.champion-ability-container { background: linear-gradient(to bottom, #005ce6, #003d99); border: 3px solid #1a2a40; border-radius: 12px; margin-bottom: 20px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.5); display: none; }
.champion-ability-header { color: #ffcc00; font-family: 'Arial Black', sans-serif; font-size: 18px; padding: 8px 15px; text-transform: uppercase; text-shadow: 2px 2px 0px #000; text-align: center; }
.champion-ability-desc { color: #fff; font-size: 13px; padding: 0 15px 15px 15px; text-align: center; font-weight: bold; line-height: 1.4; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); }
.ability-row { background: #0f1626; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; border-top: 2px solid #1a2a40; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #dbe4f0; padding: 12px; border-radius: 12px; margin-bottom: 20px; border: 2px solid #aabed1; }
.stat-box { background: #e8eef5; padding: 4px; border-radius: 8px; border-bottom: 3px solid #b0c4de; box-shadow: inset 0 2px 4px #fff; display: flex; align-items: center; gap: 8px; color: #000; position: relative; }
.stat-icon { background: #263345; width: 34px; height: 34px; border-radius: 8px; display: flex; justify-content: center; align-items: center; font-size: 18px; border: 2px solid #111824; box-shadow: inset 0 2px 2px rgba(255,255,255,0.2); flex-shrink: 0;}
.stat-text { display: flex; flex-direction: column; width: 100%; justify-content: center;}
.stat-label { font-size: 10px; color: #444c5e; font-weight: 900; letter-spacing: 0.5px; line-height: 1.1;}
.stat-value { font-size: 16px; font-weight: 900; font-family: 'Arial Black', sans-serif; text-shadow: 1px 1px 0 #fff; margin-top: -2px;}

.info-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: linear-gradient(to bottom, #5ba4ff, #1c75ff); color: white; border-radius: 4px; width: 22px; height: 22px; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: bold; border: 1px solid #0b4abf; cursor: pointer; text-shadow: 1px 1px 0 #000; }
.info-btn:hover { background: linear-gradient(to bottom, #7bb8ff, #3083ff); }

.summon-section { display: none; background: #e8eef5; padding: 15px; border-radius: 12px; margin-bottom: 20px; border: 3px solid #b0c4de; }
.summon-title { color: white; font-size: 20px; margin: 0 0 10px 0; font-family: 'Arial Black', sans-serif; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0px 2px 4px rgba(0,0,0,0.5); letter-spacing: 1px; }
.summon-section .stat-grid { margin-bottom: 0; border: none; padding: 0; background: transparent; }

.purple-elixir { filter: hue-rotate(60deg) saturate(200%) brightness(0.9); }
.icon-jump { color: #ff007f; } .icon-spawn { color: #ff4500; } .icon-clock { color: #ffd700; } .icon-arc { color: #b100ff; }
.text-legendary { color: #ffcc00 !important; text-shadow: -1px -1px 0 #b300ff, 1px -1px 0 #b300ff, -1px 1px 0 #b300ff, 1px 1px 0 #b300ff !important; }

.edit-input { width: 90%; text-align: left; font-size: 16px; font-weight: bold; color: #cc0000; border: 2px dashed #999; border-radius: 4px; padding: 2px; background: #fff; margin-top: 2px; }
.email-input { width: 100%; box-sizing: border-box; border-radius: 8px; border: 2px solid #3b507b; padding: 10px; font-family: inherit; font-size: 14px; margin-bottom: 10px; background: #1a2a40; color: #fff; }
.email-input::placeholder { color: #8a9bb8; }

.account-tag { font-size: 14px; color: #a0cbf5; font-weight: bold; margin-bottom: 10px; text-align: center; }
.account-tag span { color: #ffcc00; text-shadow: 1px 1px 0 #000; }

.arena-list-item { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-bottom: 1px solid #3b507b; }
.arena-list-item.locked { opacity: 0.5; filter: grayscale(100%); }
.arena-list-item.current { background: rgba(255, 204, 0, 0.2); border-radius: 8px; border: 1px solid #ffcc00; box-shadow: inset 0 0 10px rgba(255,204,0,0.2); }
.trophy-log-entry { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #3b507b; font-size: 14px; }
.trophy-log-amount { color: #52d053; font-weight: bold; font-size: 16px; }

.review-table { width: 100%; border-collapse: collapse; margin-top: 10px; background: #dbe4f0; color: #000; border-radius: 8px; overflow: hidden; border: 2px solid #aabed1; }
.review-table th { background: #263345; color: white; padding: 12px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid #111824; }
.review-table td { padding: 12px; text-align: center; border-bottom: 1px solid #b0c4de; font-weight: bold; font-size: 16px; font-family: 'Arial Black', sans-serif;}
.review-table tr:last-child td { border-bottom: none; }
.val-original { color: #667788; text-decoration: line-through; font-size: 14px; font-family: Arial, sans-serif;}
.val-new { color: #cc0000; text-shadow: 1px 1px 0 #fff; }

.action-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.action-btn { flex: 1 1 20%; min-width: 60px; padding: 10px 5px; font-weight: bold; color: white; border: none; border-radius: 8px; cursor: pointer; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); border-bottom: 4px solid rgba(0,0,0,0.3); display: flex; flex-direction: column; align-items: center; font-size: 11px; text-align: center; }
.action-btn span { font-size: 18px; margin-bottom: 4px; }
.action-btn:active { transform: translateY(2px); border-bottom: 2px solid rgba(0,0,0,0.3); }
.btn-use { background: linear-gradient(to bottom, #ffe600, #ff9900); color: #330000; font-size: 20px; padding: 15px; flex: 1 1 100%; border-bottom: 4px solid #cc7a00; justify-content: center; flex-direction: row; margin-top: 5px;}
.btn-lore { background: linear-gradient(to bottom, #d2b48c, #8b4513); }
.btn-deck { background: linear-gradient(to bottom, #b366ff, #6600cc); }
.btn-compare { background: linear-gradient(to bottom, #66ccff, #0066cc); }
.btn-edit { background: linear-gradient(to bottom, #ff4d4d, #cc0000); }
.btn-edit.active-edit { background: linear-gradient(to bottom, #33cc33, #009900); }
.btn-review { background: linear-gradient(to bottom, #ff9933, #e65c00); }

.vs-container { display: flex; gap: 10px; } .vs-side { flex: 1; }
.vs-title { text-align: center; margin-top: 0; font-size: 28px; color: #ffcc00; text-shadow: 3px 3px 0 #000; font-style: italic; }

#deckBuilderPanel { position: fixed; bottom: 0; left: 0; width: 100%; background: linear-gradient(to bottom, #1e2a45, #0f1626); color: white; border-top: 4px solid #ffd700; padding: 15px; box-sizing: border-box; z-index: 900; box-shadow: 0 -10px 20px rgba(0,0,0,0.6); font-family: 'Arial Rounded MT Bold', Arial, sans-serif; transform: translateY(100%); transition: transform 0.3s ease; }
#deckBuilderPanel.open { transform: translateY(0); }
.deck-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; border-bottom: 2px solid #3b507b; padding-bottom: 5px; flex-wrap: wrap; gap: 10px;}
.deck-title { margin: 0; font-size: 20px; color: #ffcc00; text-shadow: 2px 2px 0 #000; }
.deck-slots { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.deck-slot { width: 65px; height: 80px; background: #000; border: 2px dashed #6c9ce6; border-radius: 8px; cursor: pointer; position: relative; display: flex; justify-content: center; align-items: center; font-size: 20px; color: #6c9ce6; box-shadow: inset 0 0 10px rgba(0,0,0,0.8); margin-bottom: 18px; }
.deck-slot.filled { border: 2px solid #ffd700; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.5); background: #1a2a40; }
.deck-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.deck-slot-name { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); width: 130%; text-align: center; font-size: 11px; color: #ffcc00; font-family: 'Arial Rounded MT Bold', Arial, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 1px 0 #000; pointer-events: none; }
.remove-overlay { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; background: #e33; color: white; display: none; justify-content: center; align-items: center; font-size: 18px; font-weight: bold; border-radius: 50%; border: 2px solid #811; box-shadow: 0 2px 4px rgba(0,0,0,0.5); z-index: 10; transition: transform 0.1s; }
.remove-overlay:hover { transform: scale(1.1); background: #ff4d4d; }
.deck-slot.filled:hover .remove-overlay { display: flex; }

.deck-analysis { display: flex; justify-content: space-between; margin-top: 15px; gap: 15px; flex-wrap: wrap; }
.analysis-box { background: rgba(0,0,0,0.4); padding: 10px; border-radius: 8px; border: 1px solid #3b507b; flex: 1; min-width: 200px; }
.elixir-bar-container { background: #3b507b; height: 20px; border-radius: 10px; margin-top: 5px; overflow: hidden; border: 2px solid #141c2e; position: relative; }
.elixir-bar-fill { background: linear-gradient(to right, #b100ff, #ff00ff); height: 100%; width: 0%; transition: width 0.3s, background 0.3s; }
.elixir-bar-fill.over-limit { background: linear-gradient(to right, #ff4d4d, #cc0000); }
.elixir-bar-text { position: absolute; top: 0; left: 0; width: 100%; text-align: center; font-size: 13px; font-weight: bold; line-height: 20px; text-shadow: 1px 1px 0 #000; }
.deck-tips { color: #a0cbf5; font-size: 14px; margin-top: 5px; line-height: 1.4; }
.tip-good { color: #52d053; } .tip-warn { color: #ffcc00; } .tip-danger { color: #ff4d4d; font-weight: bold; text-shadow: 1px 1px 0 #000;}
.btn-toggle-deck { position: fixed; bottom: 20px; right: 20px; background: linear-gradient(to bottom, #b366ff, #6600cc); color: white; border: 3px solid #3b0086; padding: 15px 25px; border-radius: 30px; font-size: 18px; font-weight: bold; cursor: pointer; z-index: 800; box-shadow: 0 5px 15px rgba(0,0,0,0.5); text-shadow: 2px 2px 0 #000; transition: transform 0.2s; }
.btn-toggle-deck:hover { transform: scale(1.05); }
.btn-clear { background: #cc0000; color: white; border: none; padding: 6px 12px; border-radius: 6px; font-weight: bold; cursor: pointer; text-shadow: 1px 1px 0 #000; border-bottom: 3px solid rgba(0,0,0,0.3); }
.btn-clear:hover { filter: brightness(1.2); } .btn-clear:active { transform: translateY(2px); border-bottom: 1px solid rgba(0,0,0,0.3); }

.music-btn { background: #263345; color: white; border: 2px solid #ffd700; border-radius: 50%; width: 40px; height: 40px; font-size: 20px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: transform 0.2s; vertical-align: middle; padding: 0; margin-left: 5px; }
.music-btn:hover { transform: scale(1.1); }
.trophy-container { background: linear-gradient(to bottom, #ffe600, #ff9900); color: #330000; padding: 5px 15px; border-radius: 20px; font-weight: bold; font-size: 18px; border: 2px solid #cc7a00; box-shadow: 0 2px 6px rgba(0,0,0,0.3); display: inline-flex; align-items: center; gap: 5px; transition: transform 0.2s; cursor: pointer; }
.trophy-container:hover { filter: brightness(1.1); }
.arena-container { background: linear-gradient(to bottom, #a0cbf5, #6c9ce6); color: #1a3c6d; border-radius: 20px; font-weight: bold; font-size: 18px; border: 2px solid #3b507b; box-shadow: 0 2px 6px rgba(0,0,0,0.3); display: inline-flex; gap: 5px; transition: transform 0.2s; cursor: pointer; flex-direction: row; align-items: center; padding: 5px 15px; }
.arena-container:hover { filter: brightness(1.1); }

@keyframes genieOpen { 0% { opacity: 0; transform: translateY(100vh) scale(0.1) scaleY(3); border-radius: 50%; } 60% { opacity: 1; transform: translateY(-20px) scale(1.05) scaleY(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1) scaleY(1); border-radius: 15px; } }
@keyframes genieClose { 0% { opacity: 1; transform: translateY(0) scale(1) scaleY(1); border-radius: 15px; } 40% { opacity: 1; transform: translateY(-20px) scale(1.05) scaleY(0.9); } 100% { opacity: 0; transform: translateY(100vh) scale(0.1) scaleY(3); border-radius: 50%; } }
.genie-open { animation: genieOpen 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; }
.genie-close { animation: genieClose 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards; }

body.dark-mode { background-color: #111824; color: #e8eef5; }
body.dark-mode .dashboard-container { background: #1e2a45; color: #e8eef5; box-shadow: 0 4px 15px rgba(0,0,0,0.5); border: 1px solid #3b507b; }
body.dark-mode h2, body.dark-mode p { color: #e8eef5; }
body.dark-mode table.dataTable tbody tr { background-color: #263345; color: #a0cbf5; border-bottom: 1px solid #141c2e; }
body.dark-mode table.dataTable tbody tr:hover { background-color: #3b507b !important; color: #fff; }
body.dark-mode table.dataTable thead th { background-color: #141c2e; color: #ffcc00; border-bottom: 2px solid #3b507b; }
body.dark-mode .dataTables_info, body.dark-mode .dataTables_length, body.dark-mode .dataTables_filter { color: #a9b8d6 !important; }
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button { color: #a9b8d6 !important; }
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #3b507b; color: white !important; border: 1px solid #6c9ce6;}

.feed-post { background: #1a2a40; border: 2px solid #3b507b; border-radius: 12px; padding: 15px; margin-bottom: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.4); text-align: left; }
.feed-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #263345; padding-bottom: 8px; margin-bottom: 10px; }
.feed-user { font-weight: bold; color: #ffcc00; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.feed-user-icon { background: #3b507b; padding: 5px; border-radius: 50%; font-size: 16px; }
.feed-date { color: #8a9bb8; font-size: 12px; }
.feed-card-title { color: #a0cbf5; font-size: 18px; font-weight: bold; margin-bottom: 5px; text-shadow: 1px 1px 0 #000; }
.feed-comment { color: #fff; font-size: 14px; background: #111824; padding: 10px; border-radius: 8px; border-left: 4px solid #ff4d4d; margin-bottom: 10px; font-style: italic; }

.feed-changes-box { background: #0f1626; border: 1px solid #3b507b; border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.feed-change-item { font-size: 13px; color: #a9b8d6; margin-bottom: 4px; display: flex; justify-content: space-between; border-bottom: 1px dashed #263345; padding-bottom: 4px; }
.feed-change-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.feed-change-old { color: #667788; text-decoration: line-through; margin-right: 5px; }
.feed-change-new { color: #52d053; font-weight: bold; }

.feed-actions { display: flex; gap: 15px; border-top: 1px solid #263345; padding-top: 10px; margin-top: 10px; }
.feed-btn { background: transparent; border: none; color: #a9b8d6; cursor: pointer; font-weight: bold; font-size: 14px; display: flex; align-items: center; gap: 5px; transition: color 0.2s; }
.feed-btn:hover { color: #fff; }
.feed-btn.liked { color: #ff4d4d; }
.feed-replies-container { margin-top: 10px; padding-left: 15px; border-left: 2px solid #3b507b; display: none; }
.feed-reply { background: #0f1626; padding: 8px; border-radius: 6px; margin-bottom: 8px; font-size: 13px; color: #e8eef5; }
.feed-reply strong { color: #a0cbf5; }
.reply-input-wrapper { display: flex; gap: 5px; margin-top: 10px; }
.reply-input { flex-grow: 1; padding: 8px; border-radius: 6px; border: 1px solid #3b507b; background: #1a2a40; color: white; }
.reply-btn { background: #52d053; color: #003300; border: none; border-radius: 6px; padding: 0 15px; font-weight: bold; cursor: pointer; }

.account-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 2px solid #ffcc00; margin-right: 5px; vertical-align: middle; background: #000; }
.feed-user-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid #3b507b; margin-right: 8px; vertical-align: middle; background: #000; }

.emoji-bar { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; background: #1a2a40; padding: 5px; border-radius: 8px; border: 1px solid #3b507b; }
.emoji-btn { background: transparent; border: none; font-size: 18px; cursor: pointer; transition: transform 0.2s; padding: 2px; }
.emoji-btn:hover { transform: scale(1.3); }

.chat-message { display: flex; gap: 10px; margin-bottom: 15px; }
.chat-message.self { flex-direction: row-reverse; }
.chat-bubble { background: #1a2a40; color: #fff; padding: 10px 15px; border-radius: 15px; border-bottom-left-radius: 0; max-width: 70%; border: 1px solid #3b507b; box-shadow: 0 4px 6px rgba(0,0,0,0.3); word-wrap: break-word; }
.chat-message.self .chat-bubble { background: #005ce6; border-color: #003d99; border-bottom-right-radius: 0; border-bottom-left-radius: 15px; }
.chat-header-info { display: flex; justify-content: space-between; font-size: 11px; color: #a9b8d6; margin-bottom: 5px; }
.chat-message.self .chat-header-info { color: #cce0ff; flex-direction: row-reverse; }
.chat-gif { max-width: 100%; border-radius: 8px; margin-top: 5px; border: 2px solid #ffcc00; }
.chat-shared-card { background: #0f1626; border: 1px solid #ffaa00; border-radius: 8px; padding: 8px; margin-top: 5px; display: flex; gap: 10px; align-items: center; cursor: pointer; transition: transform 0.2s; }
.chat-shared-card:hover { transform: scale(1.02); }
.chat-shared-card img { width: 40px; height: 50px; object-fit: cover; border-radius: 4px; border: 1px solid #ffcc00; }
.chat-input-area { background: #0f1626; padding: 15px; border-top: 2px solid #3b507b; border-radius: 0 0 15px 15px; }
.chat-toolbar { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.chat-input-wrapper { display: flex; gap: 10px; }

#gifSearchPopup, .gif-popup { display: none; position: absolute; width: 260px !important; height: 280px !important; bottom: 50px !important; left: 10px !important; background: #1a2a40; border: 2px solid #3b507b; border-radius: 12px; padding: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.9); z-index: 1000; }
.gif-popup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.gif-search-input { width: 100%; box-sizing: border-box; padding: 10px; border-radius: 6px; border: 1px solid #3b507b; background: #0f1626; color: white; margin-bottom: 10px; }
#gifResults, .gif-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: 70px !important; gap: 6px !important; max-height: 200px; padding: 5px !important; overflow-y: auto !important; }
.gif-item { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 6px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s, transform 0.2s; }
.gif-item:hover { border-color: #ffcc00; transform: scale(1.05); }
.gif-grid::-webkit-scrollbar { width: 6px; } .gif-grid::-webkit-scrollbar-thumb { background: #3b507b; border-radius: 3px; }

.emoji-picker-modal { display: none; position: fixed; bottom: 50%; left: 50%; transform: translate(-50%, 50%); background: #1a2a40; border: 2px solid #3b507b; border-radius: 12px; padding: 15px; box-shadow: 0 10px 40px rgba(0,0,0,0.9); z-index: 9999; width: 320px; max-width: 90%; max-height: 300px; overflow-y: auto; }
.emoji-picker-modal::-webkit-scrollbar { width: 6px; } .emoji-picker-modal::-webkit-scrollbar-thumb { background: #3b507b; border-radius: 3px; }

@keyframes scrollBackground {
    from { background-position: 0 0, 40px 40px; }
    to { background-position: 80px 80px, 120px 120px; }
}

.clash-mobile-view {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    background-color: #2b568c;
    background-image: 
        linear-gradient(45deg, #224673 25%, transparent 25%, transparent 75%, #224673 75%, #224673), 
        linear-gradient(45deg, #224673 25%, transparent 25%, transparent 75%, #224673 75%, #224673);
    background-size: 80px 80px;
    animation: scrollBackground 4s linear infinite; 
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cr-top-bar {
    background: linear-gradient(to bottom, #1a2a40, #0f1626);
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #3b507b;
}

.cr-player-badge {
    background: #263345;
    border: 2px solid #ffcc00;
    padding: 5px 10px;
    border-radius: 20px;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.cr-pass-banner {
    background: linear-gradient(to right, #ffcc00, #ff9900);
    margin: 10px;
    padding: 15px;
    border-radius: 8px;
    border: 2px solid #fff;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #330000;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
    cursor: pointer;
    transition: transform 0.2s;
}
.cr-pass-banner:active { transform: scale(0.95); }

.cr-arena-display {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 20px 0;
}

/* ==========================================================================
   ⛺ ANIMATED ARENA DISPLAY
   ========================================================================== */

/* 1. The Levitation Animation (Bobs up and down while shadow expands) */
@keyframes floatArena {
    0% { transform: translateY(0); box-shadow: 0 10px 20px rgba(0,0,0,0.6); }
    50% { transform: translateY(-12px); box-shadow: 0 25px 30px rgba(0,0,0,0.4); }
    100% { transform: translateY(0); box-shadow: 0 10px 20px rgba(0,0,0,0.6); }
}

/* 2. The Glossy Sweep Animation (Shine passing over the glass) */
@keyframes arenaShine {
    0% { left: -150%; }
    20% { left: 150%; }
    100% { left: 150%; }
}

/* 3. The Updated Placeholder Box */
.cr-arena-img-placeholder {
    width: 250px;
    height: 250px;
    background: linear-gradient(to bottom, #5ba4ff, #1c75ff);
    border-radius: 20px;
    border: 4px solid #141c2e;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px;
    margin-bottom: 15px;
    
    /* Apply the floating animation */
    animation: floatArena 4s ease-in-out infinite;
    position: relative;
    overflow: hidden; /* Traps the shine inside the box */
}

/* 4. The Shine Element */
.cr-arena-img-placeholder::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg); /* Angles the shine */
    animation: arenaShine 5s infinite; /* Sweeps across every 5 seconds */
}

.cr-main-buttons {
    display: flex;
    gap: 10px;
    padding: 0 15px;
    margin-bottom: 20px;
}

.btn-battle-yellow {
    flex: 1;
    background: linear-gradient(to bottom, #ffea00, #ffaa00);
    border: 2px solid #fff;
    border-bottom: 6px solid #cc7a00;
    border-radius: 12px;
    color: white;
    text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    font-size: 26px;
    font-family: 'Arial Black', sans-serif;
    padding: 15px 0;
    cursor: pointer;
    transition: transform 0.1s;
}
.btn-battle-yellow:active { transform: translateY(4px); border-bottom: 2px solid #cc7a00; }

.btn-party-blue {
    flex: 1;
    background: linear-gradient(to bottom, #66ccff, #0088cc);
    border: 2px solid #fff;
    border-bottom: 6px solid #005580;
    border-radius: 12px;
    color: white;
    text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    font-size: 26px;
    font-family: 'Arial Black', sans-serif;
    padding: 15px 0;
    cursor: pointer;
    transition: transform 0.1s;
}
.btn-party-blue:active { transform: translateY(4px); border-bottom: 2px solid #005580; }

.cr-bottom-nav {
    display: flex;
    background: #141c2e;
    padding: 10px;
    border-top: 2px solid #3b507b;
    gap: 5px;
}

.cr-nav-chest {
    flex: 1;
    background: linear-gradient(to bottom, #263345, #0f1626);
    border: 2px solid #3b507b;
    border-radius: 8px;
    padding: 10px 5px;
    text-align: center;
    color: #a0cbf5;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.1);
}

/* ==========================================================================
   ✨ LIVE DATABASE THEME (Glassy Slate Overlay Container Layouts)
   ========================================================================== */
.dashboard-container,
#mainDatabase,
#deckBuilderPanel {
    background-color: rgba(17, 27, 45, 0.85) !important; 
    border: 3px solid #3b507b !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.dashboard-container table.dataTable th,
#mainDatabase table.dataTable th {
    background-color: rgba(26, 37, 56, 0.95) !important;
    color: #ffcc00 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    border-bottom: 2px solid #3b507b !important;
}

.dashboard-container table.dataTable tbody tr:nth-child(odd),
#mainDatabase table.dataTable tbody tr:nth-child(odd) {
    background-color: rgba(26, 38, 63, 0.4) !important;
    color: #e4e9f2 !important;
}

.dashboard-container table.dataTable tbody tr:nth-child(even),
#mainDatabase table.dataTable tbody tr:nth-child(even) {
    background-color: rgba(15, 22, 38, 0.5) !important;
    color: #e4e9f2 !important;
}

.dashboard-container table.dataTable tbody tr:hover,
#mainDatabase table.dataTable tbody tr:hover {
    background-color: rgba(0, 114, 255, 0.25) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   🌙 SAFE FOCUS MODE 
   ========================================================================== */
body.focus-mode {
    background-color: #03060f !important;
}

body.focus-mode .dashboard-container,
body.focus-mode #mainDatabase,
body.focus-mode .clash-mobile-view,
body.focus-mode #deckBuilderPanel {
    background-color: rgba(10, 15, 25, 0.85) !important;
    border-color: #1c2635 !important;
}

body.focus-mode table.dataTable {
    background-color: rgba(15, 22, 38, 0.8) !important;
    color: #e4e9f2 !important;
}

body.focus-mode table.dataTable th {
    background-color: #121a2b !important;
    color: #ffcc00 !important;
    border-bottom: 2px solid #3b507b !important;
}

body.focus-mode table.dataTable tbody tr:nth-child(odd) {
    background-color: rgba(20, 28, 45, 0.7) !important;
}
body.focus-mode table.dataTable tbody tr:nth-child(even) {
    background-color: rgba(15, 22, 38, 0.7) !important;
}
body.focus-mode table.dataTable tbody tr:hover {
    background-color: rgba(0, 114, 255, 0.2) !important;
}

body.focus-mode p,
body.focus-mode i,
body.focus-mode .dataTables_info,
body.focus-mode .dataTables_length,
body.focus-mode .dataTables_filter,
body.focus-mode .dataTables_filter label {
    color: #8fa3c7 !important;
}

/* ==========================================================================
   🃏 CLASH ROYALE AUTHENTIC CARD STYLES
   ========================================================================== */
.cr-card-container {
    position: relative;
    width: 110px; 
    height: 150px;
    margin: 10px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    font-family: 'Arial Black', Arial, sans-serif;
    display: inline-block;
}

.cr-card-container:hover {
    transform: scale(1.08); 
}

.cr-card-art-box {
    width: 100%;
    height: 85%;
    border-radius: 6px;
    overflow: hidden;
    border: 4px solid #8e9bb3; 
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 6px 12px rgba(0,0,0,0.6);
    background: radial-gradient(circle, #5b8db8, #1a3c5e); 
    position: relative;
}

.cr-card-art-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.cr-elixir-drop {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 32px;
    height: 32px;
    background: radial-gradient(circle at 30% 30%, #ff8aed, #c900c4);
    border: 2px solid #222;
    border-radius: 50% 50% 50% 0; 
    transform: rotate(-45deg);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    z-index: 5;
}

.cr-elixir-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg); 
    color: white;
    font-size: 16px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.cr-stars {
    position: absolute;
    top: 2px;
    right: 4px;
    display: flex;
    gap: 1px;
    z-index: 5;
}

.cr-star {
    color: #ffd600;
    font-size: 12px;
    text-shadow: 1px 1px 0px #000, -1px -1px 0px #000, 0px 0px 2px #000;
}

.cr-level-banner {
    position: absolute;
    bottom: 12%;
    left: 10%;
    width: 80%;
    background: linear-gradient(to bottom, #f255ff, #a600b3); 
    border: 2px solid #111;
    border-radius: 4px;
    color: white;
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    padding: 2px 0;
    z-index: 5;
    text-shadow: 1px 1px 0px #000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.cr-status-text {
    position: absolute;
    bottom: -5px;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 13px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 2px #000;
}

.cr-legendary .cr-card-art-box { border-color: #ffd600; box-shadow: 0 0 10px #ffd600; }
.cr-epic .cr-card-art-box { border-color: #d500f9; box-shadow: 0 0 10px #d500f9; }
.cr-rare .cr-card-art-box { border-color: #ff9100; box-shadow: 0 0 10px #ff9100; }
.cr-champion .cr-card-art-box { border-color: #ffaa00; box-shadow: 0 0 12px #ffaa00, inset 0 0 10px #ffaa00; }

/* ==========================================================================
   🚀 DATATABLES CLEAN DISPLAY CONFIGURES (NATIVE TABLE ELEMENTS HIDDEN)
   ========================================================================== */
table#balanceTable,
.dataTables_scrollHead,
.dataTables_scrollBody,
.dataTables_scrollFoot {
    display: none !important;
}

#balanceTable_wrapper {
    position: relative;
    z-index: 10;
    pointer-events: auto !important; 
}

#card-grid-container {
    position: relative;
    z-index: 5;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: #ffffff !important;
    font-weight: bold;
    margin-bottom: 15px; 
}

.dataTables_wrapper .dataTables_filter input {
    background-color: rgba(0, 0, 0, 0.4) !important;
    border: 2px solid #4da8da !important;
    color: #ffffff !important;
    border-radius: 8px;
    padding: 6px 12px;
    margin-left: 8px;
    outline: none;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #ffcc00 !important;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}

/* ==========================================================================
   ✨ PREMIUM NAV LINKS FOR SHOW ENTRIES (ELIMINATES OPERATING SYSTEM DROPDOWNS)
   ========================================================================== */
.dt-length, .dataTables_wrapper .dataTables_length {
    color: #ffffff !important;
    font-weight: bold;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Transform matching styling rules into clean link arrays */
.dt-length button, 
.dt-length a,
.dataTables_wrapper .dt-length select,
.dataTables_wrapper .dataTables_length select,
.custom-length-btn {
    background-color: #1a2a40 !important;
    color: #ffffff !important;
    border: 2px solid #4da8da !important;
    padding: 6px 14px !important;
    margin: 0 4px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.dt-length button:hover,
.dt-length a:hover,
.custom-length-btn:hover {
    border-color: #ffcc00 !important;
    color: #ffcc00 !important;
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.4);
    transform: scale(1.05);
}

.custom-length-btn.active {
    background: linear-gradient(to bottom, #ffea00, #ffaa00) !important;
    border-color: #ffffff !important;
    color: #1a2a40 !important;
}
/* ==========================================================================
   🏆 AUTHENTIC CARD COLLECTION HEADER
   ========================================================================== */
.cr-collection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 22, 38, 0.6);
    border: 2px solid #3b507b;
    border-radius: 12px;
    padding: 10px 15px;
    margin-bottom: 15px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.3);
}

.cr-collection-left {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.cr-collection-title {
    color: white;
    font-size: 22px;
    font-family: 'Arial Black', sans-serif;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 4px 4px rgba(0,0,0,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: -2px;
}

.cr-collection-found {
    color: #ff8ad8; /* The exact Clash Royale Pink */
    font-size: 16px;
    font-family: 'Arial Black', sans-serif;
    text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}

/* The Purple Sort Button */
.cr-sort-btn {
    background: linear-gradient(to bottom, #8a73c1, #5c478a);
    color: white;
    border: 2px solid #2a1a4a;
    border-radius: 8px;
    padding: 8px 15px;
    font-size: 14px;
    font-family: 'Arial Black', sans-serif;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.3), 0 4px 6px rgba(0,0,0,0.5);
    cursor: pointer;
    transition: transform 0.1s;
}

.cr-sort-btn:active {
    transform: translateY(3px); /* Button pushes down when clicked */
}
/* ==========================================================================
   ⭐ FAVORITE CARD BUTTON
   ========================================================================== */
.btn-fav { 
    background: linear-gradient(to bottom, #ffcc00, #cc7a00); 
    color: #330000 !important; 
    border-bottom: 4px solid #995c00 !important; 
}

/* ========================================================================== 
   ARCADE PARADISE STABLE RELEASE 1.0 — HTML/CSS POLISH LAYER
   Purpose: move safe layout/mobile/modal fixes into CSS so app.js can stay focused
   on logic. This layer is intentionally placed at the end of styles.css.
   ========================================================================== */
:root {
  --ap-bg: #0f1626;
  --ap-panel: #111824;
  --ap-panel-2: #1a2a40;
  --ap-border: #3b507b;
  --ap-blue: #66ccff;
  --ap-yellow: #ffcc00;
  --ap-red: #ef3333;
  --ap-green: #52d053;
  --ap-text: #ffffff;
  --ap-muted: #a9b8d6;
  --ap-radius: 14px;
  --ap-shadow: 0 10px 30px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body { background: #07101d; color: var(--ap-text); }
body.ap-modal-open, body.modal-open { overflow: hidden !important; touch-action: none; }

/* Safe scroll containers */
.modal-overlay,
.modal-content,
#chatFeedContainer,
#communityFeedContainer,
#updatesFeedContainer,
#socialModal .modal-content,
#dmModal .modal-content,
#adminModal .modal-content,
#v20AdminSafetyModal .v20-safety-page,
#v21CardEditorModal .v21-card-page,
#safetyReviewModal .modal-content,
#apInlineSafetyReviewPage,
#emojiPickerPopup,
#gifSearchPopup,
#fanCardModal .modal-content,
#vsModal .modal-content,
#arenaClashModal,
#warModalContainer {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Unified popup shell without fighting inline styles */
.modal-overlay {
  inset: 0;
  padding: clamp(8px, 2vw, 20px);
  background: rgba(0,0,0,.76);
}
.modal-content {
  width: min(95vw, 900px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow);
}

/* Unified small close button style */
.close-btn,
.v15-modal-x,
.v20-safety-close,
.v21-close,
.modal-close {
  width: 34px !important;
  height: 34px !important;
  line-height: 28px !important;
  font-size: 22px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  z-index: 50 !important;
}

/* Chat cleanup */
#chatModal .modal-content {
  width: min(960px, 96vw) !important;
  height: min(86dvh, 760px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
#chatFeedContainer { min-height: 0; }
.chat-toolbar, .chat-input-wrapper { flex-wrap: wrap; }
.chat-input-wrapper input, #chat-input-text { min-width: 0; }

/* Emoji/GIF picker stability */
#emojiPickerPopup.emoji-picker-modal {
  width: min(92vw, 380px) !important;
  max-height: min(72dvh, 520px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 999999 !important;
}
#emojiGrid { justify-content: flex-start !important; align-content: flex-start; }
#emojiGrid button, #emojiGrid .emoji-btn {
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Admin and editor pages */
#adminModal .modal-content {
  width: min(96vw, 980px) !important;
  max-height: calc(100dvh - 28px) !important;
}
#adminModal [style*="overflow-y"],
#adminModal .modal-content > div:last-child {
  -webkit-overflow-scrolling: touch;
}
#v20AdminSafetyModal .v20-safety-page,
#v21CardEditorModal .v21-card-page,
#safetyReviewModal .modal-content {
  width: min(96vw, 980px) !important;
  max-height: calc(100dvh - 28px) !important;
  overflow: auto !important;
}

/* Compare / Versus modal */
#vsModal .modal-content-vs,
#vsModal .modal-content {
  width: min(96vw, 920px) !important;
  max-height: calc(100dvh - 28px) !important;
  overflow: auto !important;
}
#vsModal .vs-container { align-items: stretch; }
#vsModal .vs-side { min-width: 0; }
#vsModal .stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* Arena Clash and War wrappers that are dynamically injected */
#arenaClashModal,
#warModalContainer,
#warModal,
.ap-war-modal,
.stable-war-modal {
  max-width: 96vw !important;
  max-height: calc(100dvh - 28px) !important;
  overflow: auto !important;
}

/* Deck panel */
#deckBuilderPanel {
  max-height: min(78dvh, 620px);
  overflow-y: auto;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}
.deck-header .close-btn, #deckBuilderPanel .close-btn { display: none !important; }
.btn-toggle-deck { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }

/* Home/mobile screen safe area */
.clash-mobile-view { min-height: 100dvh; width: min(100%, 720px); }
.cr-bottom-nav { padding-bottom: max(10px, env(safe-area-inset-bottom)); }

@media (max-width: 768px) {
  body { padding: 0 !important; padding-bottom: 120px !important; }
  .modal-overlay { padding: 8px !important; }
  .modal-content {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 8px auto !important;
  }
  .close-btn,
  .v15-modal-x,
  .v20-safety-close,
  .v21-close,
  .modal-close {
    top: 8px !important;
    right: 8px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 22px !important;
  }

  #chatModal .modal-content {
    height: calc(100dvh - 16px) !important;
    width: calc(100vw - 16px) !important;
    resize: none !important;
  }
  #chatModal h2 { font-size: 24px !important; padding-right: 42px; }
  #chatFeedContainer { padding: 12px !important; }
  .chat-input-area { padding: 10px !important; }
  .chat-toolbar { gap: 8px !important; }
  .emoji-bar { overflow-x: auto; white-space: nowrap; max-width: 100%; }
  .chat-input-wrapper { gap: 8px !important; }
  .chat-input-wrapper input, #chat-input-text { width: 100% !important; flex: 1 1 100% !important; }
  .chat-input-wrapper button, #sendChatBtn { flex: 1 1 auto; min-height: 44px; }

  #vsModal .vs-container { display: block !important; }
  #vsModal .vs-side { width: 100% !important; margin-bottom: 14px !important; }
  #vsModal .modal-content { padding: 14px !important; }
  #vsModal textarea { width: 100% !important; min-height: 110px; }

  #adminModal .modal-content,
  #v20AdminSafetyModal .v20-safety-page,
  #v21CardEditorModal .v21-card-page,
  #safetyReviewModal .modal-content {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 8px auto !important;
  }
  #adminModal button, #adminModal input, #adminModal select, #adminModal textarea,
  #v21CardEditorModal button, #v21CardEditorModal input, #v21CardEditorModal select, #v21CardEditorModal textarea {
    min-height: 42px;
  }

  #emojiPickerPopup.emoji-picker-modal {
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: calc(100dvh - 70px) !important;
    padding-bottom: max(15px, env(safe-area-inset-bottom)) !important;
  }

  .cr-top-bar { gap: 8px; flex-wrap: wrap; }
  .cr-player-badge { max-width: 48vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cr-arena-img-placeholder { width: min(68vw, 250px); height: min(68vw, 250px); }
  .cr-main-buttons { gap: 8px; }
  .btn-battle-yellow, .btn-party-blue { font-size: clamp(20px, 7vw, 26px); }
}

@media (min-width: 769px) {
  #chatModal .modal-content { resize: both; }
  #vsModal .vs-container { display: flex; }
}



/* Arcade Paradise Stable 1.0 - Patch Notes Cleanup Phase 2: visual support is injected by app.js to avoid CSS conflicts. */

/* ============================================================
   Arcade Paradise Stable Release 1.0
   Card / Compare / Deck Cleanup Phase 1
   Safe CSS-only polish for card details, compare, and deck panels.
   ============================================================ */

html.ap-modal-open,
body.ap-modal-open,
html.ap-stable-modal-open,
body.ap-stable-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

#cardModal,
#vsModal,
#imageLightbox {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

#cardModal .modal-content,
#cardModal .cr-modal-content,
#vsModal .modal-content,
#vsModal .modal-content-vs {
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

#cardModal .close-btn,
#vsModal .close-btn,
#imageLightbox .close-btn {
  z-index: 99999 !important;
}

#cardModal .stat-grid,
#vsModal .stat-grid {
  align-items: stretch !important;
}

#cardModal .stat-box,
#vsModal .stat-box,
#vsModal .stable10-extra-stat-box,
#vsModal .stable10-editable-stat-row {
  min-width: 0 !important;
  word-break: break-word !important;
}

#vsModal .stable10-compare-row,
#vsModal .vs-cards-row,
#vsModal .compare-cards-row {
  max-width: 100% !important;
}

#deckBuilderPanel {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

#deckBuilderPanel.open {
  max-height: min(55vh, 520px) !important;
  overflow-y: auto !important;
  z-index: 4500 !important;
}

#deckBuilderPanel .deck-slot,
#deckBuilderPanel .deck-card,
#deckBuilderPanel img {
  -webkit-user-drag: none !important;
  user-select: none !important;
}

@media (max-width: 768px) {
  #cardModal .modal-content,
  #cardModal .cr-modal-content,
  #vsModal .modal-content,
  #vsModal .modal-content-vs {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 8px auto !important;
    box-sizing: border-box !important;
  }

  #cardModal .cr-header,
  #cardModal .cr-badges-row {
    max-width: 100% !important;
  }

  #cardModal .stat-grid,
  #vsModal .stat-grid {
    grid-template-columns: 1fr !important;
  }

  #vsModal .stable10-compare-row,
  #vsModal .vs-cards-row,
  #vsModal .compare-cards-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  #vsModal .stable10-compare-card,
  #vsModal .vs-card,
  #vsModal .compare-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #deckBuilderPanel.open {
    max-height: 50dvh !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ====================================================================
   Stable 1.0 - Social / Community / Esports / Leaderboard Cleanup Phase 1
   ==================================================================== */
body.ap-modal-open {
  overflow: hidden !important;
  touch-action: none;
}

.ap-scel-modal {
  overscroll-behavior: contain;
}

.ap-scel-modal .ap-scel-content,
#socialModal .modal-content,
#communityModal .modal-content,
#esportsModal .modal-content,
#socialLinksModal .modal-content,
#leaderboardModal .modal-content {
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#communityFeedContainer,
#esportsFeed,
#socialLinksFeed,
#leaderboardFeed {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#socialModal .close-btn,
#communityModal .close-btn,
#esportsModal .close-btn,
#socialLinksModal .close-btn,
#leaderboardModal .close-btn {
  width: 38px !important;
  height: 38px !important;
  line-height: 32px !important;
  font-size: 22px !important;
  z-index: 999999 !important;
}

@media (max-width: 700px) {
  #socialModal .modal-content,
  #communityModal .modal-content,
  #esportsModal .modal-content,
  #socialLinksModal .modal-content,
  #leaderboardModal .modal-content {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
    max-height: calc(100dvh - 24px) !important;
    box-sizing: border-box;
  }

  #communityFeedContainer,
  #esportsFeed,
  #socialLinksFeed,
  #leaderboardFeed {
    max-height: 62dvh !important;
  }
}


/* ============================================================
   APWarArena Organization Layer - Stable Release 1.0
   Small safe support styles only. Main War/Arena layout remains unchanged.
   ============================================================ */
#warModalContainer,
#arenaClashModal,
#arenaClashContainer {
  overscroll-behavior: contain;
}
#warModalContainer .modal-content,
#arenaClashModal .modal-content,
#arenaClashContainer .modal-content {
  -webkit-overflow-scrolling: touch;
}


/* Stable 1.0 Social / Community Internal Organization Phase 1 */
#socialModal, #communityModal, #esportsModal, #socialLinksModal, #leaderboardModal { overscroll-behavior: contain; }
#socialModal .modal-content, #communityModal .modal-content, #esportsModal .modal-content, #socialLinksModal .modal-content, #leaderboardModal .modal-content { max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ========================================================================== 
   Arcade Paradise Stable Release 1.0
   Phase 110 - Mobile Layout Finish Pass
   Real website finish pass: reduce mobile overflow, improve modal/button touch
   sizing, and keep large tables/panels scrollable without breaking desktop.
   ========================================================================== */
:root { --ap-finish-mobile-phase: "phase111"; }

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

img,
video,
canvas,
iframe,
svg {
  max-width: 100%;
}

.dashboard-container,
.clash-mobile-view,
#mainDatabase,
#mobileHomeScreen {
  max-width: 100%;
  box-sizing: border-box;
}

.dataTables_wrapper,
.dt-container,
#balanceTable_wrapper {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#balanceTable {
  max-width: 100%;
}

.modal-overlay {
  box-sizing: border-box !important;
  align-items: flex-start;
  justify-content: center;
}

.modal-content,
.cr-modal-content,
.modal-content-vs {
  box-sizing: border-box !important;
  max-width: calc(100vw - 20px) !important;
  overflow-wrap: anywhere;
}

.close-btn,
.modal-close,
.v15-modal-x,
.v20-safety-close,
.v21-close,
.ap-finish-close-btn {
  touch-action: manipulation;
  min-width: 38px !important;
  min-height: 38px !important;
}

button,
[role="button"],
.arena-container,
.trophy-container,
.cr-nav-chest,
.cr-pass-banner,
.cr-player-badge,
.action-btn,
.music-btn {
  touch-action: manipulation;
}

@media (max-width: 768px) {
  body {
    width: 100vw !important;
    overflow-x: hidden !important;
    padding-left: max(0px, env(safe-area-inset-left)) !important;
    padding-right: max(0px, env(safe-area-inset-right)) !important;
  }

  .dashboard-container {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 0 !important;
  }

  .cr-top-bar,
  #mainDatabase > div:first-child,
  .deck-header,
  .action-bar,
  .cr-main-buttons {
    max-width: 100% !important;
  }

  .arena-container,
  .trophy-container,
  .music-btn,
  .cr-player-badge,
  .cr-nav-chest,
  button,
  input,
  select,
  textarea {
    min-height: 42px;
  }

  .modal-overlay {
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .modal-content,
  .cr-modal-content,
  .modal-content-vs,
  #dndModal .modal-content,
  #datapadModal .modal-content,
  #fanCardModal .modal-content,
  #updatesModal .modal-content,
  #communityModal .modal-content,
  #socialModal .modal-content,
  #dmModal .modal-content,
  #adminModal .modal-content,
  #chatModal .modal-content,
  #reviewModal .modal-content,
  #loginModal .modal-content,
  #arenaModal .modal-content,
  #trophyModal .modal-content,
  #loreChoiceModal .modal-content {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 8px auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #chatModal .modal-content,
  #dmModal .modal-content {
    height: calc(100dvh - 16px) !important;
    min-height: 0 !important;
  }

  #adminModal .modal-content,
  #apInlineSafetyReviewPage,
  #v20AdminSafetyModal .v20-safety-page,
  #v21CardEditorModal .v21-card-page {
    max-height: calc(100dvh - 16px) !important;
  }

  .close-btn,
  .modal-close,
  .v15-modal-x,
  .v20-safety-close,
  .v21-close,
  .ap-finish-close-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    font-size: 24px !important;
    line-height: 34px !important;
  }

  .dataTables_wrapper,
  .dt-container,
  #balanceTable_wrapper {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
  }

  #balanceTable {
    min-width: 760px;
  }

  .cr-bottom-nav {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
  }

  #deckBuilderPanel.open {
    max-height: min(58dvh, 560px) !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 430px) {
  .cr-player-badge {
    max-width: 44vw !important;
    font-size: 12px !important;
  }

  .cr-pass-banner {
    font-size: clamp(14px, 4.5vw, 18px) !important;
    padding: 10px 12px !important;
  }

  .btn-battle-yellow,
  .btn-party-blue {
    width: 100% !important;
  }

  .cr-main-buttons {
    flex-direction: column !important;
  }

  .cr-nav-chest {
    font-size: 11px !important;
    padding: 7px 4px !important;
  }

  #chatFeedContainer,
  #communityFeedContainer,
  #updatesFeedContainer,
  #dmMessages,
  #socialContent,
  #adminPanelContent {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}


/* ==========================================================================
   🏠 PHASE 111 - HOMEPAGE SECTIONS FINISH PASS
   Gives the launch/home screen clearer section structure, safer spacing, and
   more consistent touch/card behavior without changing button functions.
   ========================================================================== */
:root { --ap-finish-home-phase: "phase111"; }

#mobileHomeScreen.ap-home-polished,
html.ap-home-polished #mobileHomeScreen {
  min-height: 100dvh;
  gap: 10px;
}

html.ap-home-polished .cr-top-bar {
  position: relative;
  z-index: 3;
  gap: 10px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

html.ap-home-polished .cr-player-badge,
html.ap-home-polished .music-btn,
html.ap-home-polished .cr-pass-banner,
html.ap-home-polished .cr-arena-display,
html.ap-home-polished .cr-nav-chest,
html.ap-home-polished .btn-battle-yellow,
html.ap-home-polished .btn-party-blue {
  -webkit-tap-highlight-color: transparent;
}

html.ap-home-polished .cr-pass-banner {
  letter-spacing: 0.4px;
  box-shadow: 0 6px 0 rgba(110, 65, 0, 0.55), 0 12px 22px rgba(0, 0, 0, 0.32);
}

html.ap-home-polished .cr-pass-banner::after {
  content: "Tap to see what changed";
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: rgba(51, 0, 0, 0.72);
  text-shadow: none;
}

html.ap-home-polished .cr-arena-display {
  flex: 1 1 auto;
  min-height: 280px;
  padding: 8px 10px;
}

html.ap-home-polished #homeArenaName {
  max-width: min(92vw, 420px);
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

html.ap-home-polished .cr-main-buttons {
  position: relative;
  z-index: 2;
}

html.ap-home-polished .btn-battle-yellow,
html.ap-home-polished .btn-party-blue {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

html.ap-home-polished .cr-bottom-nav {
  position: sticky;
  bottom: 0;
  z-index: 4;
  box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.35);
}

html.ap-home-polished .cr-nav-chest {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

html.ap-home-polished .cr-nav-chest:focus-visible,
html.ap-home-polished .cr-pass-banner:focus-visible,
html.ap-home-polished .cr-player-badge:focus-visible,
html.ap-home-polished .btn-battle-yellow:focus-visible,
html.ap-home-polished .btn-party-blue:focus-visible {
  outline: 3px solid #ffcc00;
  outline-offset: 3px;
}

@media (max-width: 430px) {
  html.ap-home-polished .cr-arena-display {
    min-height: 230px;
    margin: 8px 0 10px;
  }

  html.ap-home-polished .cr-arena-img-placeholder {
    width: min(58vw, 220px);
    height: min(58vw, 220px);
    font-size: clamp(56px, 18vw, 76px);
  }

  html.ap-home-polished .btn-battle-yellow,
  html.ap-home-polished .btn-party-blue {
    min-height: 54px;
    font-size: clamp(20px, 6vw, 26px);
  }
}