/* Collection Page Styles */
body.collection-page { padding: 0; }
body.collection-page .main-menu-container { min-height: unset; padding-top: 8px; margin: 0 auto 8px auto; }
body.collection-page .main-title { font-size: 1.5rem; margin: 8px 0 6px 0; }
body.collection-page .main-desc { font-size: 0.95rem; margin: 0 0 8px 0; }
body.collection-page .collection-panel { margin-top: 0px; }

.collection-panel { width: min(100%, var(--panel-width)); margin: 5px auto 40px auto; background: linear-gradient(180deg,#eef2f6 0%,#e3e8ee 70%,#d9e0e7 100%); border-radius: 32px; box-shadow: 0 8px 30px -8px rgba(0,0,0,0.28),0 0 0 1px rgba(255,255,255,0.35) inset; padding: 32px 36px 36px 36px; border: 2px solid #c1cad3; position: relative; z-index: 2; min-height: 200px; }
.collection-panel.is-empty { min-height: 200px; }

.player-info-row { display: flex; align-items: center; gap: 32px; margin-bottom: 32px; padding: 28px 32px; background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); border-radius: 14px; border: 1px solid rgba(0,0,0,0.08); min-height: 140px; }
.player-level-badge { width: 110px; height: 110px; background: url('/assets/images/experience.webp') center/contain no-repeat; color: #fff; font-size: 2.2rem; font-family: 'ClashBold', Arial, sans-serif; border-radius: 0; display: flex; align-items: center; justify-content: center; box-shadow: none; border: none; text-shadow: 0 2px 4px rgba(0,0,0,0.55); flex-shrink: 0; }
.player-main-info { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.player-nickname { font-family: 'Clash_Bold', Arial, sans-serif; font-size: 2.3rem; color: #111; margin-bottom: 0; }
.player-hashtag { font-family: 'Clash_Regular', Arial, sans-serif; font-size: 1.1rem; color: #444; }
.player-trophies, .player-league { font-size: 1.1rem; color: #222; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.league-icon-img { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; }
.player-clan-link { font-size:1rem; font-family:'ClashRegular',Arial,sans-serif; }
.player-clan-link .clan-link-anchor,
.player-clan-link .clan-link-label { color:#0a5ec9; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.player-clan-link .clan-link-anchor { text-decoration:none; transition:color .2s,transform .2s; }
.player-clan-link .clan-link-anchor:hover { color:#ff9800; transform:translateY(-2px); }
.player-clan-link .clan-link-anchor:active { transform:translateY(0); }
.player-clan-link .clan-link-badge { width:20px; height:20px; object-fit:contain; flex-shrink:0; }

.player-progress { min-width: 220px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.player-progress.new-progress { align-items:stretch; min-width:260px; }
.rp-progress { position:relative; width:260px; height:44px; border-radius:14px; overflow:hidden; background:linear-gradient(135deg,#1c2538,#101722); box-shadow:0 4px 14px -4px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05) inset; display:flex; align-items:center; justify-content:center; font-family:'ClashBold',Arial,sans-serif; }
.rp-progress-bg { position:absolute; inset:0; background:radial-gradient(circle at 30% 50%,rgba(66,165,245,.25),transparent 60%),radial-gradient(circle at 75% 30%,rgba(30,136,229,.28),transparent 55%); filter:blur(2px); }
.rp-progress-bar { position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,#42a5f5,#2196f3 40%,#1e88e5); box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 4px 20px -6px rgba(33,150,243,.55),0 0 12px -2px rgba(66,165,245,.65); transition:width .7s cubic-bezier(.65,.05,.36,1); }
.rp-progress-glow { pointer-events:none; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,.15),rgba(255,255,255,0) 35%,rgba(255,255,255,.15) 65%,rgba(255,255,255,0)); mix-blend-mode:overlay; opacity:.55; animation:rpShine 7s linear infinite; }
@keyframes rpShine { 0%{transform:translateX(-30%);} 100%{transform:translateX(30%);} }
.rp-progress-inner-label { position:relative; z-index:3; color:#fff; font-size:1.2rem; text-shadow:0 2px 6px rgba(0,0,0,.7); letter-spacing:1px; }
.rp-progress-percent { font-variant-numeric:tabular-nums; }
.rp-progress-tagline { font-family:'ClashBold',Arial,sans-serif; font-size:.85rem; letter-spacing:2px; text-transform:uppercase; color:#42a5f5; margin-top:4px; text-shadow:0 2px 4px rgba(0,0,0,.8); }
.rp-progress[data-pct="0"] .rp-progress-bar { box-shadow:none; }
.rp-progress[data-pulse="1"] .rp-progress-bar { animation:rpPulse 2.6s ease-in-out infinite; }
@keyframes rpPulse { 0%,100%{filter:brightness(1);} 50%{filter:brightness(1.25);} }
.rp-progress.complete .rp-progress-bar { background:linear-gradient(90deg,#00c853,#00e676,#1de9b6); box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 0 16px 2px rgba(0,230,118,.7),0 6px 22px -6px rgba(0,200,83,.7); }
.rp-progress.complete .rp-progress-tagline { color:#00e676; }
.rp-history { width:260px; display:flex; gap:8px; margin-top:8px; }
.rp-history-link { appearance:none; border:1px solid #c7cfe0; background:#fff; padding:8px 12px; border-radius:10px; font-weight:600; cursor:pointer; box-shadow:0 4px 10px -6px rgba(0,0,0,.2); transition: all 0.2s ease; }
.rp-history-link:hover { transform:translateY(-1px); box-shadow:0 10px 20px -10px rgba(0,0,0,.3); }
.rp-history-link:active { transform:translateY(0); background:#f5f5f5; }
.rp-progress:focus-visible { outline:2px solid #42a5f5; outline-offset:3px; }

/* Info popup button - hidden on desktop, shown on mobile */
.rp-progress-title-row { display: flex; align-items: center; gap: 6px; }
.rp-info-wrap { position: relative; display: inline-flex; align-items: center; }
.rp-info-btn { appearance: none; border: 1px solid #93c5fd; background: #eff6ff; color: #1d4ed8; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-family: 'ClashBold', Arial, sans-serif; cursor: default; padding: 0; line-height: 1; }
.rp-info-popup { display: none; position: absolute; left: 100%; right: auto; bottom: calc(100% - 202px); transform: none; width: 260px; background: #1e293b; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: 14px 16px; font-family: 'ClashRegular', Arial, sans-serif; font-size: .82rem; color: #e2e8f0; line-height: 1.45; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,.4); text-align: left; pointer-events: none; margin-left: 6px; }
.rp-info-popup strong { color: #7dd3fc; }
.rp-info-wrap:hover .rp-info-popup, .rp-info-wrap:focus-within .rp-info-popup { display: block; }

/* Global progress detail under RoyaleProgress */

.progress-label { font-family: 'ClashBold', Arial, sans-serif; font-size: 1.1rem; color: #222; }
.progress-bar { width: 180px; height: 22px; background: #3bb3e6; border-radius: 16px; overflow: hidden; position: relative; }
.progress-bar-inner { height: 100%; background: #fff; border-radius: 16px; width: 60%; transition: width 0.4s; }

.rarity-section { margin-top: 24px; display: block; }
.rarity-group { background: linear-gradient(145deg,#ffffff,#e8edf3); border-radius: 18px; padding: 18px 16px 12px 16px; width: 100%; margin-bottom: 32px; box-shadow: 0 4px 14px -4px rgba(0,0,0,0.15),0 0 0 1px rgba(0,0,0,0.04); border: 1px solid #c9d2dc; position:relative; overflow:hidden; box-sizing: border-box; }
.rarity-group::before { content:""; position:absolute; inset:0; z-index:0; opacity:.35; background:radial-gradient(circle at 35% 35%,rgba(255,255,255,0.55),rgba(255,255,255,0)); border-radius:inherit; mix-blend-mode:soft-light; }
.rarity-group.champions { background:linear-gradient(160deg,#ffe992 0%,#ffd150 55%,#e6a52a 100%); border:1px solid #e9bb57; }
.rarity-group.champions::after { content:""; position:absolute; inset:0; z-index:0; background: linear-gradient(180deg,rgba(255,208,70,0.10) 0%,rgba(230,150,20,0.35) 45%,rgba(180,110,10,0.55) 1%), url('/assets/images/groups_champions_2.webp') 50% 40%/90% auto; mix-blend-mode:normal; opacity:1; pointer-events:none; }
.rarity-group.legendaries { background:linear-gradient(135deg,#def6e9 0%,#f2f3fb 45%,#e6dafb 80%); border:1px solid #ccd8ed; }
.rarity-group.legendaries::after { content:""; position:absolute; inset:0; z-index:0; background: linear-gradient(145deg,rgba(255, 255, 255, 0.177),rgba(0, 0, 0, 0.68) 45%,rgba(0, 0, 0, 0.007)), url('/assets/images/legendarybg.webp') center center/cover no-repeat; mix-blend-mode:normal; opacity:1; pointer-events:none; }
.rarity-group.epics { background:linear-gradient(145deg,#5e1786 0%,#7a33a8 55%,#b071df 100%); border:1px solid #a566d3; }
.rarity-group.epics::after { content:""; position:absolute; inset:0; z-index:0; background: linear-gradient(145deg,rgba(32,12,48,0.60),rgba(60,24,90,0.48) 45%,rgba(32,12,48,0.62)), url('/assets/images/The_Witch.webp') center center/cover no-repeat; mix-blend-mode:normal; opacity:1; pointer-events:none; }
.rarity-group.rares { background:linear-gradient(145deg,#ffef9f 0%,#ffd95e 55%,#f3b938 100%); border:1px solid #e0b04e; }
.rarity-group.rares::after { content:""; position:absolute; inset:0; z-index:0; background: linear-gradient(145deg,rgba(120,82,16,0.40),rgba(90,60,12,0.52) 45%,rgba(60,40,10,0.60)), url('/assets/images/Mini_Pekka_Pancakes.webp') center center/cover no-repeat; mix-blend-mode:normal; opacity:1; pointer-events:none; }
.rarity-group.commons { background:linear-gradient(145deg,#b8e1ff 0%,#6fb9f4 55%,#2d83d4 100%); border:1px solid #3f92d8; }
.rarity-group.commons::after { content:""; position:absolute; inset:0; z-index:0; background: linear-gradient(145deg,rgba(10,22,48,0.52),rgba(16,36,72,0.46) 45%,rgba(10,22,48,0.58)), url('/assets/images/Super_Archer.webp') center center/cover no-repeat; mix-blend-mode:normal; opacity:1; pointer-events:none; }

.rarity-title { font-family: 'ClashBold', Arial, sans-serif; font-size: 1.15rem; color: #163049; margin-bottom: 12px; letter-spacing: 1px; text-shadow: 0 1px 0 #fff; position:relative; z-index:1; }
.rarity-group.champions .rarity-title { color:#ffab4a; text-shadow:0 1px 3px rgba(0,0,0,0.5); }
.rarity-group.epics .rarity-title { color:#c35bff; text-shadow:0 1px 3px rgba(0,0,0,0.5); }
.rarity-group.rares .rarity-title { color:#ffaa65; text-shadow:0 1px 3px rgba(0,0,0,0.5); }
.rarity-group.commons .rarity-title { color:#6c7fec; text-shadow:0 1px 3px rgba(0,0,0,0.5); }
.rarity-group.legendaries .rarity-title { color:#76d9f7; text-shadow:0 1px 2px rgba(255,255,255,0.45); }
.rarity-group.champions .rarity-title span { color:#a3ff8c !important; }
.rarity-group.epics .rarity-title span { color:#ffb27e !important; }
.rarity-group.rares .rarity-title span { color:#ff915e !important; }
.rarity-group.commons .rarity-title span { color:#f033a1 !important; }

/* Card grid: 7 columns desktop, responsive below */
.rarity-cards { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; width: 100%; max-width: 100%; position:relative; z-index:1; margin: 0 auto; box-sizing: border-box; }
.card-icon { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; min-height: 160px; box-sizing: border-box; background: none; border: none; padding: 0; margin: 0; }
.card-image-container { position: relative; width: 100%; margin-bottom: 4px; }
.card-icon img { width: 100%; height: auto; object-fit: contain; border-radius: 0; background: none; box-shadow: none; border: none; display: block; }

/* .card-level-badge removed (duplicate) */

.card-progress-container {
    width: 90%;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.upgrade-arrow-icon {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.upgrade-arrow-icon.green {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2366ff66'%3E%3Cpath d='M12 4l-8 8h6v8h4v-8h6z'/%3E%3C/svg%3E");
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.upgrade-arrow-icon.blue {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2333ccff'%3E%3Cpath d='M12 4l-8 8h6v8h4v-8h6z'/%3E%3C/svg%3E");
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.card-progress-bar {
    flex: 1;
    height: 16px;
    background: #1a1a1a;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    border: 1px solid #333;
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
}
.progress-bar-fill.green { background: #66ff66; }
.progress-bar-fill.blue { background: #33ccff; }
.progress-bar-fill.gold { background: #ffd700; }

.card-progress-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    z-index: 2;
}

/* --- New Card Styles (v3) --- */

.card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}

.card-visual {
    position: relative;
    width: 100%;
    z-index: 10; /* Higher than panel to sit on top */
}

.card-visual img {
    width: 100%;
    height: auto;
    display: block;
    /* Ensure image doesn't have weird margins */
    margin: 0;
    padding: 0;
}

.card-wrapper.not-owned .card-visual img {
    filter: grayscale(1) brightness(0.5);
}

.card-level-badge {
    position: absolute;
    bottom: 18%; /* Adjust based on card image aspect ratio */
    left: 50%;
    transform: translateX(-50%);
    color: #ffe65e;
    font-family: 'ClashBold', sans-serif;
    font-size: 1.1rem;
    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,
         0 2px 4px rgba(0,0,0,0.9);
    white-space: nowrap;
    z-index: 15; /* On top of visual */
    pointer-events: none;
}

.card-bottom-panel {
    width: 90%;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 0 0 8px 8px; /* Rounded bottom only? Or all around? Let's keep all around or adjust */
    border-radius: 8px;
    /* Large top padding to push content down, small bottom padding */
    padding: 40px 6px 6px 6px;
    /* Pull up to overlap behind card */
    margin-top: -44px; 
    position: relative;
    z-index: 5; /* Lower than card-visual */
    display: flex;
    align-items: flex-end; /* Align content to bottom */
    gap: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.6);
    box-sizing: border-box;
    min-height: 50px; /* Ensure enough height */
}

.card-bottom-panel.max-level {
    background: linear-gradient(180deg, #a64dff 0%, #6b00b3 100%);
    border-color: #d9b3ff;
    justify-content: center;
    padding-top: 28px; /* Keep same spacing */
    padding-bottom: 6px;
}

.max-label {
    color: #fff;
    font-family: 'ClashBold', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    letter-spacing: 0.5px;
}

.upgrade-arrow {
    width: 22px;
    height: 22px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    position: absolute;
    left: 2px;
    bottom: 4px;
    z-index: 30;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.8));
}

.upgrade-arrow.green { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2366ff66'%3E%3Cpath d='M12 4l-8 8h6v8h4v-8h6z'/%3E%3C/svg%3E");
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.upgrade-arrow.blue { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2333ccff'%3E%3Cpath d='M12 4l-8 8h6v8h4v-8h6z'/%3E%3C/svg%3E");
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.progress-track {
    flex: 1;
    height: 18px;
    background: #000;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    border: 1px solid #444;
    margin-left: 10px; /* Overlap with arrow */
}

.progress-fill {
    height: 100%;
    width: 0;
    transition: width 0.3s ease;
}
.progress-fill.green { background: #66ff66; }
.progress-fill.blue { background: #33ccff; }

.progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    text-shadow: 0 1px 2px #000;
    line-height: 1;
}

.not-owned-label {
    margin-top: 4px;
    background: #555;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    text-align: center;
}

/* Hide old elements if they exist */
.card-level-label, .progress-bar-under { display: none; }
.rarity-cards > .card-icon > div:last-child { display: none; } /* Old text div */


.card-level-badge {
    position: absolute;
    bottom: 15%; /* Moved up */
    left: 50%;
    transform: translateX(-50%);
    color: #ffe65e;
    font-family: 'ClashBold', Arial, sans-serif;
    font-size: 1rem; /* Slightly larger */
    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,
         0 2px 4px rgba(0,0,0,0.9);
    white-space: nowrap;
    z-index: 5;
}



.card-bottom-panel.max-level {
    background: linear-gradient(180deg, #a64dff 0%, #6b00b3 100%);
    justify-content: center;
    padding: 8px 4px;
    border: 1px solid #d9b3ff;
    box-shadow: 0 2px 8px rgba(166, 77, 255, 0.6);
    margin-top: -28px;
}

.max-label {
    color: #fff;
    font-family: 'ClashBold', Arial, sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    letter-spacing: 0.5px;
    line-height: 1;
}

.upgrade-arrow-icon {
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    margin-left: 2px;
}
.upgrade-arrow-icon.green {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2366ff66'%3E%3Cpath d='M12 4l-8 8h6v8h4v-8h6z'/%3E%3C/svg%3E");
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.upgrade-arrow-icon.blue {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2333ccff'%3E%3Cpath d='M12 4l-8 8h6v8h4v-8h6z'/%3E%3C/svg%3E");
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.card-progress-bar {
    flex: 1;
    height: 14px;
    background: #000;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    border: 1px solid #444;
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
}
.progress-bar-fill.green { background: #66ff66; }
.progress-bar-fill.blue { background: #33ccff; }
.progress-bar-fill.gold { background: #ffd700; }

.card-progress-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,1);
    z-index: 2;
    line-height: 1;
}

/* Evolutions */
.evolutions-compact { display:flex; flex-wrap:wrap; gap:10px; width:100%; max-width:100%; position:relative; z-index:1; margin:0 auto; box-sizing:border-box; padding:12px; border-radius:18px; overflow:hidden; }
.evolutions-compact::before { content:""; position:absolute; inset:0; z-index:0; }
.evolutions-compact::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.18),rgba(255,255,255,0)); mix-blend-mode:soft-light; opacity:.55; }
.evolutions-compact .evo-icon { width:96px; height:96px; display:flex; align-items:center; justify-content:center; position:relative; margin:0; padding:0; z-index:1; }
.evolutions-compact .evo-icon img { width:96px; height:96px; object-fit:contain; image-rendering:auto; transition:filter .25s,transform .25s; }
.evolutions-compact .evo-icon.not-owned img.dim { filter:grayscale(1) brightness(0.35) contrast(1.05); }
.evolutions-compact .evo-icon:hover img { transform:translateY(-3px); }
.rarity-group.evolutions { position:relative; overflow:hidden; }
.rarity-group.evolutions::after { content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; background: linear-gradient(145deg,rgba(20,24,32,0.85),rgba(20,24,32,0.55) 45%,rgba(20,24,32,0.85)), url('/assets/images/cardevolutionbg.webp') center center/cover no-repeat; mix-blend-mode:normal; opacity:1; pointer-events:none; filter:saturate(1.1); }
.rarity-group.evolutions .rarity-title, .rarity-group.evolutions .rarity-cards { position:relative; z-index:1; }
.rarity-group.evolutions .rarity-title { color:#bea1f7; text-shadow:0 1px 3px rgba(0,0,0,0.5); }
.rarity-group.evolutions .rarity-title span { font-family:'ClashRegular', Arial, sans-serif; font-weight:400; }
/* Keep Evolutions header text below card/value layers to avoid overlap conflicts */
.rarity-group.evolutions .rarity-title,
.rarity-group.evolutions .rarity-title > span {
    z-index: 100;
}

/* Heroes Cards */
.rarity-group.heroes { position:relative; overflow:hidden; }
.rarity-group.heroes::after { content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; background: linear-gradient(145deg,rgba(32,12,18,0.82),rgba(48,18,28,0.55) 45%,rgba(32,12,18,0.82)), url('/assets/images/HeroBackgorund.webp') center center/cover no-repeat; mix-blend-mode:normal; opacity:1; pointer-events:none; filter:saturate(1.15); }
.rarity-group.heroes .rarity-title, .rarity-group.heroes .rarity-cards { position:relative; z-index:1; }
.rarity-group.heroes .rarity-title { color:#ff6b6b; text-shadow:0 1px 3px rgba(0,0,0,0.5); }
.rarity-group.heroes .rarity-title span { font-family:'ClashRegular', Arial, sans-serif; font-weight:400; }
.rarity-group.heroes .rarity-cards { flex-wrap:wrap; gap:10px; }

/* Tower Cards */
.rarity-group.tower-cards { position:relative; overflow:hidden; background:linear-gradient(135deg,#1e2434,#2b3144); }
.rarity-group.tower-cards::before { content:""; position:absolute; inset:0; z-index:0; background:url('/assets/images/Illustration_DaggerDuchess.webp') 80% 20%/100% auto no-repeat,#1e2434; border-radius:inherit; filter:brightness(.97) saturate(1.08); opacity:.95; image-rendering:auto; }
.rarity-group.tower-cards::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(10,14,20,0.55) 0%,rgba(10,14,20,0.25) 40%,rgba(10,14,20,0.55) 100%); pointer-events:none; border-radius:inherit; mix-blend-mode:normal; }
.rarity-group.tower-cards .rarity-title { position:relative; z-index:2; color:#fff; text-shadow:0 2px 5px rgba(0,0,0,.65); }
.rarity-group.tower-cards .rarity-cards { position:relative; z-index:2; }
@media (max-width: 760px){ .rarity-group.tower-cards::before { background-position:70% 55%; background-size:140% auto; } }

/* Collection Back Button & Empty State */
.cc-back-btn { position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:10px; border:2px solid #b9c6d3; background:linear-gradient(180deg,#f4f7fb,#e0e6ed); box-shadow:0 2px 6px rgba(0,0,0,0.2),0 0 0 1px rgba(255,255,255,0.6) inset; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .2s,filter .2s; z-index:30; }
.cc-back-btn svg { width:20px; height:20px; stroke:#1e3a5f; stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.cc-back-btn:hover { filter:brightness(0.96); transform:translateY(-2px); }
.cc-back-btn:active { transform:translateY(0); }
.cc-empty-state { width:min(100%, var(--panel-width)); margin:30px auto 60px auto; background:linear-gradient(180deg,#eef2f6,#dde3ea); border:2px solid #c1cad3; border-radius:32px; padding:36px 40px 42px; box-shadow:0 8px 26px -6px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.4) inset; }
.cc-empty-title { margin:0 0 18px; font-family:'ClashBold'; font-size:2.1rem; color:#111; text-align:center; }

/* Desktop: make empty-state search bar match other pages (home/search pill style) */
@media (min-width: 901px) {
    body.collection-page #ccEmptyState .main-search {
        display: flex;
        align-items: center;
        background: transparent;
        border-radius: 32px;
        box-shadow: none;
        padding: 8px 24px;
        width: 420px;
        max-width: 90vw;
        margin: 0 auto 28px;
        position: relative;
        z-index: 2;
    }

    body.collection-page #ccEmptyState .main-search::before {
        content: '';
        position: absolute;
        inset: 0;
        background: #fff;
        border-radius: 32px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        z-index: 2;
        pointer-events: none;
    }

    body.collection-page #ccEmptyState .main-search .search-input {
        border: none;
        outline: none;
        font-size: 1.1rem;
        font-family: 'ClashRegular', Arial, sans-serif;
        flex: 1;
        background: transparent;
        padding: 10px 0;
        position: relative;
        z-index: 3;
    }

    body.collection-page #ccEmptyState .main-search .search-btn {
        background: none;
        border: none;
        cursor: pointer;
        margin-left: 8px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 3;
    }

    body.collection-page #ccEmptyState .main-search .search-btn svg {
        width: 28px;
        height: 28px;
        stroke: #333;
    }
}

/* Empty-state suggestions (progress page search) */
body.collection-page #ccEmptyState .main-search {
    overflow: visible;
}

body.collection-page #ccEmptyState .cc-suggest-box {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid #cbd4de;
    border-radius: 14px;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,0.25);
    z-index: 90;
    max-height: 250px;
    overflow: auto;
}

body.collection-page #ccEmptyState .cc-suggest-list {
    list-style: none;
    margin: 6px 0;
    padding: 0;
}

body.collection-page #ccEmptyState .cc-suggest-item {
    margin: 0;
    padding: 0;
}

body.collection-page #ccEmptyState .cc-suggest-item button {
    width: 100%;
    border: none;
    background: #fff;
    cursor: pointer;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 2px 10px;
    text-align: left;
    color: #22313f;
    font-family: 'ClashRegular', Arial, sans-serif;
}

body.collection-page #ccEmptyState .cc-suggest-item button:hover {
    background: #f4f7fb;
}

body.collection-page #ccEmptyState .cc-suggest-item.is-active button {
    background: #eaf2ff;
}

body.collection-page #ccEmptyState .cc-sg-name {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    font-family: 'ClashBold', Arial, sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.collection-page #ccEmptyState .cc-sg-clan {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    color: #556;
    opacity: 0.9;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.collection-page #ccEmptyState .cc-sg-tag {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    max-width: 110px;
    color: #0a5ec9;
    font-family: 'ClashBold', Arial, sans-serif;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.collection-page #ccEmptyState .cc-suggest-empty {
    padding: 10px 12px;
    color: #556;
    font-size: 0.9rem;
    opacity: 0.8;
}

.cc-recent-wrapper { margin-top:10px; }
.cc-recent-title { font-family:'ClashBold'; font-size:1rem; letter-spacing:1px; text-transform:uppercase; color:#22313f; margin:0 0 10px 4px; }
.cc-recent-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.cc-recent-list li { background:#fff; border:1px solid #c9d2dc; border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; gap:4px; box-shadow:0 2px 8px rgba(0,0,0,0.08); position:relative; }
.cc-recent-list li button { all:unset; cursor:pointer; display:flex; flex-direction:column; gap:4px; }
.cc-recent-list li button:hover .cc-r-name { color:#ff9800; }
.cc-r-tag { font-family:'ClashBold'; font-size:.8rem; background:#111; color:#ffd34f; padding:2px 6px; border-radius:6px; display:inline-block; letter-spacing:1px; }
.cc-r-name { font-family:'ClashRegular'; font-size:.9rem; color:#1a2b38; word-break:break-word; }
.cc-r-pct { font-family:'ClashBold'; font-size:.78rem; color:#0a5ec9; }
.cc-r-time { font-size:.65rem; color:#4b5b68; margin-top:2px; }

/* History Modal - Modern Design */
.history-modal { position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; z-index:1100; }
.history-modal[aria-hidden="false"] { display:flex; }
.history-modal-card { width:94%; max-width:860px; max-height:90vh; background:#0f172a; border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(59,130,246,.15) inset; padding:0; overflow:hidden; display:flex; flex-direction:column; }
.history-modal-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:linear-gradient(135deg,#1e3a5f 0%,#172554 100%); border-bottom:1px solid #1e3a5f; flex-shrink:0; }
.history-modal-title { font-family:'ClashBold',Arial,sans-serif; color:#fff; font-size:1.15rem; display:flex; align-items:center; gap:8px; }
.history-modal-title svg { opacity:0.9; }
.history-close { appearance:none; border:none; background:rgba(255,255,255,0.08); border-radius:8px; padding:6px 10px; cursor:pointer; color:#94a3b8; font-size:1rem; font-weight:bold; transition:background .2s, color .2s; }
.history-close:hover { background:rgba(255,255,255,0.15); color:#fff; }
.history-chart-wrap { overflow-x:auto; overflow-y:hidden; background:linear-gradient(180deg,#0f172a,#1e293b); padding:16px 14px; border-bottom:1px solid #334155; flex-shrink:0; }
.history-chart-wrap svg { display:block; width:100%; height:auto; min-width:400px; }

/* Card-based history list (replaces table on all sizes) */
.history-list-wrap { padding:10px 14px; overflow-y:auto; flex:1; min-height:0; background:#0f172a; }
.h-empty { text-align:center; padding:24px 16px; color:#64748b; font-size:0.9rem; }
.h-card { background:#1e293b; border-radius:10px; padding:10px 12px; margin-bottom:6px; border:1px solid #334155; transition:background .15s; }
.h-card:last-child { margin-bottom:0; }
.h-card:hover { background:#263244; }
.h-card-latest { border-left:3px solid #3b82f6; background:linear-gradient(135deg,#1e3a5f 0%,#1e293b 100%); }
.h-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.h-card-date { font-size:0.78rem; color:#94a3b8; font-family:'ClashRegular',Arial,sans-serif; }
.h-card-change { font-size:0.78rem; }
.h-card-value { font-family:'ClashBold',Arial,sans-serif; font-size:1.05rem; color:#e2e8f0; margin-bottom:6px; }
.h-card-bar { width:100%; height:4px; background:#334155; border-radius:2px; overflow:hidden; }
.h-card-bar-fill { height:100%; background:linear-gradient(90deg,#3b82f6,#60a5fa); border-radius:2px; transition:width .4s ease; }
.h-change-positive { color:#4ade80; font-weight:700; }
.h-change-negative { color:#f87171; font-weight:700; }
.h-change-neutral { color:#64748b; }

/* Desktop: hide old table, show card list */
.history-table-wrap { display:none; }

/* SVG chart elements (dark theme) */
.h-axis { stroke:#475569; stroke-width:1; }
.h-grid { stroke:#334155; stroke-width:1; stroke-dasharray:4 3; }
.h-path { fill:none; stroke:#3b82f6; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.h-area { fill:url(#historyGradient); opacity:0.35; }
.h-dot { fill:#1e293b; stroke:#60a5fa; stroke-width:2; transition:r .15s, fill .15s; }
.h-dot-group:hover .h-dot { r:5; fill:#3b82f6; }
.h-label { font-size:10px; fill:#94a3b8; font-family:'ClashRegular',Arial,sans-serif; }
.h-tooltip rect { filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }

/* Totals modal (overall + per-rarity stats) */
.totals-modal { position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; z-index:1100; }
.totals-modal[aria-hidden="false"] { display:flex; }
.totals-card { width:92%; max-width:540px; background:linear-gradient(160deg,#0a0f1e,#101828); border-radius:22px; box-shadow:0 16px 48px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08) inset; padding:0; overflow:hidden; animation:totalsSlideIn .3s cubic-bezier(.22,.61,.36,1); }
@keyframes totalsSlideIn { 0%{opacity:0;transform:translateY(16px) scale(.97);} 100%{opacity:1;transform:translateY(0) scale(1);} }
.totals-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 12px; background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%); }
.totals-title { font-family:'ClashBold',Arial,sans-serif; color:#fff; font-size:1.1rem; display:flex; align-items:center; gap:8px; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.totals-header .history-close { color:#fff; background:rgba(255,255,255,.15); border:none; border-radius:50%; width:32px; height:32px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; transition:background .2s; }
.totals-header .history-close:hover { background:rgba(255,255,255,.3); }
.totals-body { max-height:420px; overflow-y:auto; padding:12px 16px 16px; font-size:0.85rem; }

/* Overall summary banner */
.totals-overall { background:linear-gradient(135deg,#080c19,#060a14); border-radius:14px; padding:14px 16px; margin-bottom:12px; color:#fff; }
.totals-overall-title { font-family:'ClashBold',Arial,sans-serif; font-size:0.9rem; color:#94a3b8; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.totals-overall-percent { font-family:'ClashBold',Arial,sans-serif; font-size:1.6rem; color:#60a5fa; margin-bottom:6px; }
.totals-overall-bar { width:100%; height:8px; background:rgba(255,255,255,.1); border-radius:4px; overflow:hidden; margin-bottom:10px; }
.totals-overall-bar-fill { height:100%; background:linear-gradient(90deg,#7dd3fc,#38bdf8); border-radius:4px; transition:width .5s; }
.totals-overall-stats { display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; }
.totals-overall-stat { display:flex; justify-content:space-between; font-size:0.82rem; }
.totals-overall-stat .t-label { color:#fff; }
.totals-overall-stat .t-value { color:#fff; font-family:'ClashBold',Arial,sans-serif; }

/* Per-group sections */
.totals-group { background:rgba(8,12,25,0.9); border-radius:12px; border:1px solid rgba(255,255,255,.06); margin-bottom:8px; overflow:hidden; transition:box-shadow .2s; background-size:cover; background-position:center; }
.totals-group:last-child { margin-bottom:0; }
.totals-group:hover { box-shadow:0 4px 16px rgba(0,0,0,.2); }
.totals-group-header { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; user-select:none; }
.totals-group-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:0.9rem; flex-shrink:0; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.totals-group-icon.champion { background:linear-gradient(135deg,rgba(255,213,79,.85),rgba(255,179,0,.85)); }
.totals-group-icon.legendary { background:linear-gradient(135deg,rgba(206,147,216,.85),rgba(171,71,188,.85)); }
.totals-group-icon.epic { background:linear-gradient(135deg,rgba(124,77,255,.85),rgba(101,31,255,.85)); }
.totals-group-icon.rare { background:linear-gradient(135deg,rgba(79,195,247,.85),rgba(2,136,209,.85)); }
.totals-group-icon.common { background:linear-gradient(135deg,rgba(165,214,167,.85),rgba(102,187,106,.85)); }
.totals-group-icon.tower { background:linear-gradient(135deg,rgba(144,164,174,.85),rgba(96,125,139,.85)); }
.totals-group-icon.evolution { background:linear-gradient(135deg,rgba(244,143,177,.85),rgba(233,30,99,.85)); }
.totals-group-icon.hero { background:linear-gradient(135deg,rgba(255,204,128,.85),rgba(255,152,0,.85)); }
.totals-group-img-icon { width:100%; height:100%; object-fit:contain; border-radius:inherit; }
.totals-group-info { flex:1; min-width:0; }
.totals-group-name { font-family:'ClashBold',Arial,sans-serif; font-size:0.88rem; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.totals-group-pct { font-size:0.78rem; color:rgba(255,255,255,.75); margin-top:1px; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.totals-group-bar { width:100%; height:5px; background:rgba(255,255,255,.2); border-radius:3px; overflow:hidden; margin-top:4px; }
.totals-group-bar-fill { height:100%; border-radius:3px; transition:width .5s; }
.totals-group-bar-fill.champion { background:linear-gradient(90deg,#7dd3fc,#38bdf8); }
.totals-group-bar-fill.legendary { background:linear-gradient(90deg,#7dd3fc,#38bdf8); }
.totals-group-bar-fill.epic { background:linear-gradient(90deg,#7dd3fc,#38bdf8); }
.totals-group-bar-fill.rare { background:linear-gradient(90deg,#7dd3fc,#38bdf8); }
.totals-group-bar-fill.common { background:linear-gradient(90deg,#7dd3fc,#38bdf8); }
.totals-group-bar-fill.tower { background:linear-gradient(90deg,#7dd3fc,#38bdf8); }
.totals-group-bar-fill.evolution { background:linear-gradient(90deg,#7dd3fc,#38bdf8); }
.totals-group-bar-fill.hero { background:linear-gradient(90deg,#7dd3fc,#38bdf8); }
.totals-group-details { padding:0 14px 10px; display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; }
.totals-group-stat { display:flex; justify-content:space-between; font-size:0.8rem; }
.totals-group-stat .t-label { color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.3); }
.totals-group-stat .t-value { color:#fff; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.4); }

/* Card detail modal - Modern Design */
.card-detail-modal { position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; z-index:1100; }
.card-detail-modal[aria-hidden="false"] { display:flex; }
.card-detail-card { width:92%; max-width:440px; background:linear-gradient(160deg,#0a0f1e,#101828); border-radius:22px; padding:0; box-shadow:0 16px 48px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08) inset; position:relative; overflow:hidden; animation:cardDetailSlideIn .3s cubic-bezier(.22,.61,.36,1); }
@keyframes cardDetailSlideIn { 0%{opacity:0;transform:translateY(16px) scale(.97);} 100%{opacity:1;transform:translateY(0) scale(1);} }
.card-detail-close { position:absolute; top:12px; right:12px; z-index:10; border:none; background:rgba(255,255,255,.15); border-radius:50%; width:32px; height:32px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; transition:background .2s,transform .15s; }
.card-detail-close:hover { background:rgba(255,255,255,.3); transform:scale(1.05); }
.card-detail-close svg { width:16px; height:16px; fill:currentColor; }
.card-detail-hero { display:flex; align-items:center; gap:14px; padding:20px 20px 16px; background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%); border-bottom:1px solid rgba(255,255,255,.08); }
.card-detail-img-wrap { width:84px; height:84px; flex-shrink:0; border-radius:14px; background:radial-gradient(circle,rgba(255,255,255,.08),rgba(255,255,255,.02)); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,.3); overflow:hidden; }
.card-detail-img-wrap img { width:76px; height:76px; object-fit:contain; }
.card-detail-hero-info { flex:1; min-width:0; }
.card-detail-name { font-family:'ClashBold',Arial,sans-serif; font-size:1.2rem; color:#fff; margin-bottom:4px; text-shadow:0 1px 4px rgba(0,0,0,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-detail-level { font-size:0.9rem; color:rgba(255,255,255,.85); font-family:'ClashRegular',Arial,sans-serif; }
.card-detail-rarity { font-size:0.75rem; color:#93c5fd; margin-top:2px; font-family:'ClashRegular',Arial,sans-serif; text-transform:uppercase; letter-spacing:0.6px; }
.card-detail-progress-section { padding:12px 20px; background:linear-gradient(180deg,#101828,#0b1220); border-bottom:1px solid rgba(255,255,255,.06); }
.card-detail-progress-section .card-detail-progress-bar { width:100%; height:8px; background:rgba(255,255,255,.12); border-radius:4px; overflow:hidden; }
.card-detail-progress-section .card-detail-progress-fill { height:100%; width:0%; background:linear-gradient(90deg,#7dd3fc,#38bdf8); border-radius:4px; transition:width .5s cubic-bezier(.4,0,.2,1); box-shadow:0 0 10px rgba(56,189,248,.35); }
.card-detail-progress-section .card-detail-progress-text { text-align:right; font-size:0.8rem; margin-top:6px; color:rgba(255,255,255,.75); font-family:'ClashBold',Arial,sans-serif; }
.card-detail-body { padding:14px 20px 18px; background:#0b1220; }
.card-detail-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; }
.card-detail-stat { display:flex; justify-content:space-between; align-items:center; font-size:0.85rem; }
.card-detail-stat-label { color:rgba(255,255,255,.75); }
.card-detail-stat-value { font-family:'ClashBold',Arial,sans-serif; color:#fff; }
.card-detail-stat-value.gold-value { color:#fbbf24; }

@media (max-width: 480px) {
    .card-detail-card { max-width:360px; }
    .card-detail-stats { grid-template-columns:1fr; }
    .card-detail-hero { gap:12px; padding:18px 18px 14px; }
    .card-detail-img-wrap { width:72px; height:72px; }
    .card-detail-img-wrap img { width:64px; height:64px; }
}

@media (max-width: 1200px) { .rarity-cards { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 900px) {
  .collection-panel { padding: 24px 20px; width: 94%; }
  .player-info-row { flex-direction: column; text-align: center; gap: 20px; }
  .player-main-info { align-items: center; }
  .player-progress { width: 100%; align-items: center; }
  .rp-progress { width: 100%; max-width: 320px; }
  .rarity-cards { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  /* === MOBILE-FIRST COMPLETE REDESIGN === */
  
  /* Body & Main Container */
  body.collection-page {
      overflow-x: hidden;
      padding: 0;
      margin: 0;
      background: #f8f9fb;
  }
  
  /* Hide main menu on mobile */
  .main-menu-container {
      display: none;
  }
  
  .collection-panel {
      width: 100vw;
      margin: 0;
      padding: 0;
      border-radius: 0;
      box-shadow: none;
      background: transparent;
      border: none;
  }
  
  /* Player Info Row — Minimal compact redesign for mobile */
  .player-info-row {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto;
      grid-template-areas: "badge info" "progress progress";
      gap: 0 12px;
      margin: 0;
      padding: 12px 14px 14px;
      background: linear-gradient(160deg, #111827 0%, #1a2d44 100%);
      border-radius: 0;
      box-shadow: 0 2px 10px rgba(0,0,0,0.25);
      border-bottom: 1px solid rgba(255,255,255,0.07);
      min-height: auto;
      position: relative;
      overflow: hidden;
      align-items: center;
  }

  .player-info-row::before {
      content: '';
      position: absolute;
      inset: -10px -8px -8px -12px;
      background-image: url('/assets/images/Super_Archer.webp');
      background-repeat: no-repeat;
      background-position: 74% 56%;
      background-size: clamp(300px, 100vw, 486px) auto;
      opacity: 0.14;
      z-index: 0;
      pointer-events: none;
  }

  @media (max-width: 480px) {
      .player-info-row::before {
          inset: -8px -14px -8px -12px;
          background-position: 68% 58%;
          background-size: clamp(277px, 111vw, 446px) auto;
      }
  }

  @media (max-width: 380px) {
      .player-info-row::before {
          inset: -6px -16px -6px -10px;
          background-position: 63% 60%;
          background-size: clamp(250px, 119vw, 392px) auto;
          opacity: 0.13;
      }
  }

  .player-level-badge {
      grid-area: badge;
      width: 54px;
      height: 54px;
      font-size: 1.15rem;
      z-index: 1;
      flex-shrink: 0;
      align-self: center;
  }

  .player-main-info {
      grid-area: info;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 2px;
      z-index: 1;
      min-width: 0;
      padding: 0;
      text-align: left;
  }

  .player-nickname {
      font-size: 1.05rem;
      line-height: 1.2;
      color: #fff;
      font-weight: bold;
      text-shadow: 0 1px 3px rgba(0,0,0,0.5);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
  }

  .player-hashtag {
      font-size: 0.72rem;
      color: rgba(255,255,255,0.45);
      margin: 0;
      letter-spacing: 0.3px;
  }

  .player-trophies {
      font-size: 0.82rem;
      color: rgba(255,255,255,0.85);
      display: flex;
      align-items: center;
      gap: 4px;
      margin-top: 3px;
      background: rgba(255,255,255,0.08);
      border-radius: 20px;
      padding: 2px 8px 2px 4px;
      width: fit-content;
  }

  .player-league {
      display: none;
  }

  .player-clan-link {
      display: none;
  }
  
  /* Progress Bar - sits in grid-area "progress" below badge+info */
  .player-progress {
      grid-area: progress;
      width: 100%;
      padding: 0;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      z-index: 1;
  }

  .player-progress.new-progress {
      width: 100%;
      min-width: 0;
  }
  
  .rp-progress-header { width: 100%; }
  
  .rp-progress-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin-bottom: 4px;
  }

  .rp-progress-title {
      color: #fff;
  }
  
  .rp-info-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,0.7);
      background: rgba(255,255,255,0.15);
      color: #fff;
      font-size: 0.7rem;
      font-family: 'ClashBold', Arial, sans-serif;
      cursor: pointer;
      flex-shrink: 0;
      line-height: 1;
      padding: 0;
  }
  
  .rp-info-wrap {
      position: relative;
  }
  
  .rp-info-popup {
      display: none;
      position: fixed;
      top: auto;
      bottom: auto;
      left: 50%;
      transform: translateX(-50%);
      width: 88vw;
      max-width: 340px;
      height: auto;
      max-height: 60vh;
      overflow-y: auto;
      background: #1e293b;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 12px;
      padding: 16px 18px;
      font-family: 'ClashRegular', Arial, sans-serif;
      font-size: 0.84rem;
      color: #e2e8f0;
      line-height: 1.5;
      z-index: 9999;
      box-shadow: 0 8px 24px rgba(0,0,0,0.45);
      text-align: left;
      box-sizing: border-box;
  }

  .rp-info-popup.is-open {
      display: block !important;
      pointer-events: auto;
      z-index: 2147483000 !important;
  }
  
    .rp-info-popup strong { color: #7dd3fc; }
  
  .rp-progress {
      width: 100%;
      max-width: none;
      margin: 0;
      height: 44px;
      border-radius: 10px;
      background: linear-gradient(90deg, #1a3a5c 0%, #1e4976 50%, #1a3a5c 100%);
      box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 3px rgba(0,0,0,0.3);
  }
  
  .rp-progress-inner-label {
      font-size: 1.3rem;
      font-weight: bold;
      letter-spacing: 1px;
  }
  
  .rp-progress-percent {
      font-size: 1.5rem;
  }
  
  .rp-progress-tagline {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-top: 2px;
      opacity: 0.75;
  }
  
  
  /* History buttons - better mobile layout */
  .rp-history {
      width: 100%;
      display: flex;
      gap: 10px;
      margin-top: 10px;
      padding: 0;
      position: relative;
      z-index: 10;
  }
  
  .rp-history-link {
      flex: 1;
      text-align: center;
      font-size: 1rem;
      padding: 14px 12px;
      background: #fff;
      border: 2px solid #1565c0;
      border-radius: 10px;
      color: #1565c0;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
      z-index: 10;
      -webkit-tap-highlight-color: transparent;
  }
  
  .rp-history-link:active {
      background: #1565c0;
      color: #fff;
      transform: scale(0.98);
  }
  
  /* Rarity Groups - Section Style */
  .rarity-section {
      margin-top: 0;
      background: #fff;
  }
  
  .rarity-group {
      padding: 10px 6px;
      margin: 0;
      border-radius: 0;
      box-shadow: none;
      border-bottom: 1px solid #e0e0e0;
  }
  
  .rarity-group:last-child {
      border-bottom: none;
  }
  
  .rarity-title {
      font-size: 1rem;
      margin-bottom: 8px;
      text-align: left;
      padding: 4px 6px;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  
  .rarity-title span {
      font-size: 1.1rem;
      font-weight: bold;
  }
  
  /* Card Grid: 5 columns with equal gaps */
  .rarity-cards {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      padding: 4px 6px 10px 6px;
      justify-items: center;
  }
  
  /* Card Wrapper: Clean minimal design */
  .card-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding: 0;
      background: transparent;
  }
  
  /* Card Visual - Compact */
  .card-visual {
      width: 100%;
      max-width: 100%;
      position: relative;
  }
  
  .card-visual img {
      width: 100%;
      height: auto;
      display: block;
  }
  
  /* Level Badge: Tiny but clear */
  .card-level-badge {
      font-size: 0.6rem;
      bottom: 18%;
      text-shadow: 
          -0.8px -0.8px 0 #000,
          0.8px -0.8px 0 #000,
          -0.8px 0.8px 0 #000,
          0.8px 0.8px 0 #000,
          0 1px 2px rgba(0,0,0,1);
  }
  
  /* Bottom Panel: Micro size for 5 columns */
  .card-bottom-panel {
      width: 91%;
      padding: 18px 3px 6px 3px;
      margin-top: -18px;
      min-height: 30px;
      border-radius: 0 0 5px 5px;
      gap: 0;
      border-width: 0.5px;
      background: rgba(26, 26, 26, 0.96);
  }
  
  .card-bottom-panel.max-level {
      padding: 18px 3px 6px 3px;
      min-height: 30px;
      margin-top: -18px;
  }
  
  /* Progress Elements - Micro */
  .progress-track {
      height: 11px;
      border-radius: 999px;
      margin-left: 3px;
      border-width: 0.5px;
      overflow: visible;
  }

  .card-progress-bar {
      overflow: visible;
  }

  .progress-fill,
  .progress-bar-fill {
      max-width: 100%;
      border-radius: 999px;
  }
  
  .progress-text {
      font-size: clamp(0.54rem, 1.7vw, 0.62rem);
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1;
      white-space: nowrap;
      overflow: visible;
      text-overflow: unset;
      padding: 0 1px;
      font-variant-numeric: tabular-nums;
      z-index: 3;
  }

  .card-progress-text {
      font-size: clamp(0.54rem, 1.7vw, 0.62rem);
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1;
      white-space: nowrap;
      overflow: visible;
      text-overflow: unset;
      padding: 0 1px;
      font-variant-numeric: tabular-nums;
      z-index: 3;
  }
  
  .max-label {
      font-size: clamp(0.54rem, 1.7vw, 0.62rem);
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1;
      white-space: nowrap;
  }
  
  /* Arrow: Micro but visible */
  .upgrade-arrow {
      width: 9px;
      height: 9px;
      left: 0.5px;
      bottom: 1.5px;
  }
  
  /* Not Owned */
  .not-owned-label {
      font-size: 0.62rem;
      padding: 2px 4px;
      margin-top: 2px;
      border-radius: 3px;
  }
  
  /* Old card-icon fallback */
  .card-icon {
      min-height: auto;
  }
  
  .card-icon img {
      width: 100%;
      height: auto;
  }
  
  /* Empty State */
  .cc-empty-state {
      width: calc(100% - 16px);
      margin: 10px 8px calc(12px + env(safe-area-inset-bottom, 0px));
      padding: 14px 12px 12px;
      border-radius: 18px;
      border: 1px solid #ccd7e3;
      background: linear-gradient(180deg, #eef3f9 0%, #e4ebf4 100%);
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  }
  
  .cc-empty-title {
      font-size: 1.1rem;
      margin: 0 0 10px;
      text-align: left;
      letter-spacing: 0.3px;
  }

  body.collection-page #ccEmptyState .main-search {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      padding: 6px;
      border-radius: 14px;
      background: #fff;
      border: 1px solid #c6d4e4;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 8px rgba(15, 23, 42, 0.08);
      position: relative;
  }

  body.collection-page #ccEmptyState .main-search::before {
      content: none;
  }

  body.collection-page #ccEmptyState .main-search .search-input {
      flex: 1;
      min-width: 0;
      border: none;
      outline: none;
      background: transparent;
      padding: 8px 10px;
      font-size: 0.95rem;
      font-family: 'ClashRegular', Arial, sans-serif;
      color: #0f172a;
  }

  body.collection-page #ccEmptyState .main-search .search-btn {
      width: 36px;
      height: 36px;
      border: 1px solid #b5c9dd;
      border-radius: 10px;
      background: linear-gradient(180deg, #f8fbff 0%, #e8f0f9 100%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 0;
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  }

  body.collection-page #ccEmptyState .main-search .search-btn svg {
      width: 20px;
      height: 20px;
  }

  .cc-recent-wrapper {
      margin-top: 10px;
  }

  .cc-recent-title {
      font-size: 0.82rem;
      margin: 0 0 8px;
      letter-spacing: 0.5px;
      color: #334155;
  }
  
  .cc-recent-list {
      grid-template-columns: 1fr;
      gap: 9px;
  }

  .cc-recent-list li {
      border-radius: 12px;
      padding: 10px;
      border: 1px solid #cfdae6;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  }

  .cc-recent-list li button {
      width: 100%;
      gap: 5px;
  }

  .cc-r-tag {
      align-self: flex-start;
      font-size: 0.72rem;
      padding: 2px 7px;
  }

  .cc-r-name {
      font-size: 0.88rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .cc-r-pct {
      font-size: 0.74rem;
      color: #1d4ed8;
  }

  .cc-r-time {
      font-size: 0.68rem;
      opacity: 0.8;
  }
  
  /* Back Button */
  .cc-back-btn {
      position: absolute;
      top: 8px;
      right: 10px;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      z-index: 30;
      box-shadow: 0 6px 16px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.6) inset;
  }

  .cc-back-btn svg {
      width: 18px;
      height: 18px;
  }
  
  /* Evolutions - grid on mobile for proper sizing */
  .evolutions-compact {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      padding: 4px 6px 10px 6px;
      justify-items: center;
  }
  
  .evolutions-compact .evo-icon {
      width: 100%;
      aspect-ratio: 1;
      overflow: hidden;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .evolutions-compact .evo-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
  }
  
  /* Hero icons: same grid cell style as evolution icons (square, contain, no overflow) */
  .evolutions-compact .evo-icon.hero-icon {
      aspect-ratio: 1;
      overflow: hidden;
  }

  .evolutions-compact .evo-icon.hero-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
  }
  
  /* Prevent horizontal scroll */
  * {
      max-width: 100%;
  }

  html, body {
      overflow-x: hidden;
  }

  /* History Modal - Mobile Full Screen */
  .history-modal-card {
      width: 100%;
      max-width: 100%;
      max-height: 100vh;
      height: 100%;
      border-radius: 0;
      box-shadow: none;
  }
  .history-modal-header {
      padding: 10px 14px;
      position: sticky;
      top: 0;
      z-index: 2;
  }
  .history-modal-title {
      font-size: 0.95rem;
  }
  .history-chart-wrap {
      padding: 8px 4px;
      min-height: 0;
  }
  .history-chart-wrap svg {
      min-width: 300px;
      height: auto;
  }
  .history-list-wrap {
      padding: 6px 8px;
  }
  .h-card {
      padding: 8px 10px;
      margin-bottom: 4px;
      border-radius: 8px;
  }
  .h-card-top {
      margin-bottom: 2px;
  }
  .h-card-date {
      font-size: 0.72rem;
  }
  .h-card-change {
      font-size: 0.72rem;
  }
  .h-card-value {
      font-size: 0.92rem;
      margin-bottom: 4px;
  }
  .h-card-bar {
      height: 3px;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .player-info-row {
      gap: 0 14px;
      padding: 14px 16px 16px;
  }

  .player-info-row::before {
      inset: -18px -22px -10px -140px;
      background-position: 28% 50%;
      background-size: clamp(884px, 143vw, 1224px) auto;
      opacity: 0.12;
  }

  .rp-info-popup {
      width: min(420px, calc(100vw - 24px));
      max-width: none;
      font-size: 0.9rem;
  }

  .rarity-cards {
      grid-template-columns: repeat(6, 1fr);
      gap: 8px;
      padding: 6px 10px 12px 10px;
  }

  .card-level-badge {
      font-size: 0.72rem;
  }

  .card-bottom-panel {
      width: 92%;
      min-height: 36px;
      padding: 20px 4px 8px 4px;
  }

  .card-bottom-panel.max-level {
      min-height: 36px;
      padding: 20px 4px 8px 4px;
  }

  .progress-track {
      height: 13px;
  }

  .progress-text,
  .card-progress-text,
  .max-label {
      font-size: 0.76rem;
  }

  .not-owned-label {
      font-size: 0.72rem;
      padding: 3px 6px;
  }

  .evolutions-compact {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 14px;
      padding: 10px 16px 16px 16px;
  }

    .cc-back-btn {
            top: 10px;
            right: 12px;
            width: 40px;
            height: 40px;
    }

        .cc-back-btn svg {
            width: 20px;
            height: 20px;
        }
}

/* ========== MOBILE TOTALS FIX ========== */
@media (max-width: 900px) {
  .totals-overall-stats {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
  .totals-overall-stat {
    font-size: 0.8rem;
  }
  .totals-group-details {
    grid-template-columns: 1fr;
    gap: 3px 0;
  }
  .totals-body {
    max-height: 70vh;
  }
}

/* ========== MOBILE UI COMPONENTS ========== */

/* Collection page mobile adjustments - mobile UI styles are in global.css */
@media (max-width: 900px) {
  body.collection-page {
    padding-top: 52px;
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
  
  .main-footer {
    margin-bottom: 0;
    padding-bottom: 8px;
  }
}