/* ============================================================
   CityCards games panel V2 auto-fit
   - Ancien panel #cc-games-panel supprime.
   - Le JS utilise uniquement #cc-games-panel-v2.
   - Le panel normal et le plein ecran gardent le meme principe :
     scene de base + zoom automatique, sans reglages au pixel.
   ============================================================ */

#cc-games-panel-v2 {
    position: fixed;
    left: 50%;
    top: 36px;
    width: min(1440px, 84vw);
    height: min(930px, 86vh);
    transform: translateX(-50%);
    z-index: 2147483600 !important;
    background: #05070d;
    border: 2px solid #00a9ff;
    border-radius: 10px;
    box-shadow: 0 12px 38px rgba(0, 0, 0, .65);
    overflow: hidden;
    resize: both;
    min-width: min(640px, calc(100vw - 16px));
    min-height: min(360px, calc(100vh - 16px));
    max-width: 96vw;
    max-height: 96vh;
}

#cc-games-panel-v2[hidden],
#cc-games-info-panel[hidden] {
    display: none !important;
}

#cc-games-panel-v2-bar,
#cc-games-info-bar {
    height: 34px;
    background: linear-gradient(#101826, #07111f);
    border-bottom: 1px solid rgba(100, 190, 255, .45);
    color: #dff4ff;
    font-weight: 900;
    box-sizing: border-box;
}

#cc-games-panel-v2-bar {
    line-height: 34px;
    font-size: 13px;
    padding: 0 8px 0 12px;
    cursor: move;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    user-select: none;
}

#cc-games-panel-v2-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

#cc-games-panel-v2-wallet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

#cc-games-panel-v2-wallet span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid rgba(120, 200, 255, .32);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: #eaf7ff;
    font-size: 12px;
    line-height: 18px;
}

#cc-games-panel-v2-menu {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

#cc-games-panel-v2-menu button,
#cc-games-info-close {
    border: 1px solid rgba(120, 200, 255, .65);
    border-radius: 7px;
    background: rgba(6, 12, 23, .92);
    color: #dff4ff;
    font-weight: 900;
    padding: 4px 8px;
    cursor: pointer;
    line-height: 1.15;
}

#cc-games-panel-v2-menu .cc-games-icon-btn {
    width: 32px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

#cc-games-panel-v2-menu button:hover,
#cc-games-info-close:hover {
    background: rgba(20, 50, 80, .95);
}

#cc-games-panel-v2-content {
    position: relative;
    width: 100%;
    height: calc(100% - 34px);
    overflow: hidden;
    background: #05070d;
}

#cc-games-panel-v2-frame {
    position: absolute;
    left: 0;
    top: 0;
    width: 1680px;
    height: 840px;
    border: 0;
    display: block;
    background: #05070d;
    transform-origin: top left;
}

#cc-games-info-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 34px;
    bottom: 0;
    width: auto;
    max-height: none;
    transform: none;
    z-index: 2147483647 !important;
    background: rgba(5, 9, 18, .98);
    border: 2px solid #00a9ff;
    border-radius: 10px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .7);
    overflow: hidden;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

#cc-games-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 12px;
}

#cc-games-info-content {
    height: calc(100% - 34px);
    overflow: auto;
    padding: 18px;
    font-size: 14px;
    line-height: 1.35;
    box-sizing: border-box;
}

#cc-games-hub {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 18px;
    min-height: 100%;
}

#cc-games-panel-v2:not(:fullscreen) #cc-games-info-content {
    min-height: 0;
}

#cc-games-panel-v2:not(:fullscreen) #cc-games-hub {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

#cc-games-panel-v2:not(:fullscreen) #cc-games-hub-nav,
#cc-games-panel-v2:not(:fullscreen) #cc-games-hub-main {
    min-height: 0;
    overflow: auto;
}

#cc-games-hub-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-right: 1px solid rgba(120, 200, 255, .22);
}

#cc-games-hub-nav button {
    min-height: 42px;
    border: 1px solid rgba(120, 200, 255, .35);
    border-radius: 8px;
    background: rgba(11, 22, 42, .92);
    color: #eaf7ff;
    font-weight: 900;
    text-align: left;
    padding: 0 14px;
    cursor: pointer;
}

#cc-games-hub-nav .cc-games-hub-link--help {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cc-games-hub-link__label {
    min-width: 0;
    flex: 1 1 auto;
}

#cc-games-hub-nav .cc-games-hub-link--help[data-panel-section="ai"] {
    height: auto !important;
    min-height: 68px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

#cc-games-hub-nav .cc-games-hub-link--help[data-panel-section="ai"] .cc-games-hub-link__label {
    display: grid;
    place-items: center;
    align-self: stretch;
    text-align: center;
    line-height: 1.2;
    overflow-wrap: normal;
    word-break: normal;
}

.cc-panel-menu-help {
    position: relative;
    z-index: 1;
    display: inline-grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    margin-left: auto;
    color: #ff496d;
    font-size: 23px;
    line-height: 1;
    font-weight: 1000;
    text-shadow: 0 0 7px rgba(255, 39, 82, .95), 0 0 16px rgba(255, 39, 82, .65);
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: help;
    transition: color .18s ease, transform .18s ease, text-shadow .18s ease;
}

.cc-panel-menu-help::after {
    content: "✦";
    position: absolute;
    top: -3px;
    right: -2px;
    color: #ffd966;
    font-size: 9px;
    text-shadow: 0 0 7px #ffd966;
}

.cc-panel-menu-help:hover,
.cc-panel-menu-help:focus-visible {
    color: #ff7892;
    outline: none;
    transform: translateY(-1px) scale(1.12);
    text-shadow: 0 0 9px #ff335d, 0 0 22px rgba(255, 39, 82, .9);
}

.cc-panel-menu-tooltip {
    position: fixed;
    z-index: 2147483647;
    width: min(340px, calc(100vw - 24px));
    padding: 15px 17px 15px 20px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 91, 122, .8);
    border-left: 4px solid #ff496d;
    border-radius: 12px;
    background: radial-gradient(circle at top right, rgba(81, 38, 91, .96), rgba(7, 20, 35, .99) 58%);
    color: #f1f8ff;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 750;
    white-space: pre-line;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .78), 0 0 22px rgba(255, 51, 93, .28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(5px) scale(.98);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.cc-panel-menu-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.cc-panel-faq-topic + .cc-panel-faq-topic {
    margin-top: 10px;
}

#cc-games-hub-nav button.is-active {
    background: linear-gradient(135deg, rgba(0, 169, 255, .36), rgba(126, 87, 255, .28));
    border-color: rgba(120, 220, 255, .85);
}

.cc-panel-faq{padding:22px;max-width:850px;margin:0 auto}.cc-panel-faq-hero{display:flex;align-items:center;gap:16px;margin-bottom:20px;padding:20px;border:1px solid rgba(128,233,255,.35);border-radius:14px;background:linear-gradient(135deg,rgba(18,47,78,.94),rgba(25,20,61,.94))}.cc-panel-faq-hero>span{font-size:42px}.cc-panel-faq-hero h2{margin:0 0 7px;color:#fff;font-size:27px}.cc-panel-faq-hero p{margin:0;color:#d5e8f5;font-size:16px;line-height:1.5}.cc-panel-faq-topic{display:grid!important;grid-template-columns:42px minmax(0,1fr) 24px;align-items:center;width:100%;min-height:66px!important;padding:10px 16px!important;font-size:17px!important}.cc-panel-faq-topic>span{font-size:27px}.cc-panel-faq-topic>em{text-align:right;font-size:28px;font-style:normal}.cc-panel-faq-modal{display:none;position:fixed;z-index:2147483600;inset:0;padding:20px;box-sizing:border-box;align-items:center;justify-content:center;background:rgba(2,6,14,.82);backdrop-filter:blur(4px)}.cc-panel-faq-modal.is-open{display:flex}.cc-panel-faq-dialog{position:relative;width:min(820px,96vw);max-height:min(720px,92vh);overflow:auto;box-sizing:border-box;padding:28px 32px;border:1px solid rgba(126,225,255,.7);border-radius:18px;background:radial-gradient(circle at top left,#153f65,#091421 48%,#090b17);color:#eefaff;box-shadow:0 25px 80px rgba(0,0,0,.78),0 0 30px rgba(76,207,255,.2)}.cc-panel-faq-close{position:absolute;right:14px;top:12px;width:42px!important;height:42px!important;min-height:42px!important;padding:0!important;border:1px solid rgba(255,255,255,.45)!important;border-radius:50%!important;background:rgba(9,20,34,.94)!important;color:#fff!important;font-size:30px!important;line-height:36px!important;text-align:center!important;cursor:pointer}.cc-panel-faq-heading{display:flex;align-items:center;gap:14px;padding-right:50px}.cc-panel-faq-heading span{font-size:40px}.cc-panel-faq-heading h2{margin:0;color:#fff;font-size:29px}.cc-panel-faq-copy{margin-top:20px}.cc-panel-faq-copy p{margin:0 0 15px;color:#e2edf6;font-size:17px;line-height:1.6}.cc-panel-faq-copy p:last-child{margin-bottom:0}@media(max-width:760px){.cc-panel-faq-dialog{padding:24px 20px}.cc-panel-faq-heading h2{font-size:24px}.cc-panel-faq-copy p{font-size:16px}}

#cc-games-hub-main {
    min-width: 0;
}

.cc-panel-missions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
}

.cc-panel-missions__hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(120, 220, 255, .28);
    border-radius: 10px;
    background: radial-gradient(circle at top left, rgba(0, 169, 255, .22), transparent 44%), linear-gradient(135deg, rgba(12, 24, 45, .96), rgba(8, 13, 27, .96));
    box-shadow: inset 0 0 24px rgba(95, 190, 255, .08);
}

.cc-panel-missions__kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(126, 87, 255, .22);
    color: #bfeeff;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .04em;
}

.cc-panel-missions__hero h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 26px;
    line-height: 1.05;
}

.cc-panel-missions__hero p {
    margin: 0;
    color: #b8c7dc;
    font-weight: 700;
    max-width: 720px;
}

.cc-panel-wallet {
    display: grid;
    grid-template-columns: repeat(3, minmax(118px, 1fr));
    gap: 9px;
    min-width: 360px;
}

.cc-panel-wallet__item {
    padding: 10px 12px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
}

.cc-panel-wallet__item span {
    display: block;
    color: #8fdfff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.cc-panel-wallet__item strong {
    display: block;
    color: #fff;
    font-size: 22px;
    margin-top: 3px;
}

.cc-panel-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
}

.cc-panel-switch button {
    border: 1px solid rgba(160, 225, 255, .72);
    border-radius: 999px;
    padding: 9px 15px;
    background: linear-gradient(135deg, rgba(34, 206, 172, .88), rgba(75, 149, 255, .88));
    color: #fff;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.cc-panel-switch button:nth-child(2n) {
    background: linear-gradient(135deg, rgba(126, 87, 255, .92), rgba(239, 95, 170, .9));
}

.cc-panel-switch button:nth-child(3n) {
    background: linear-gradient(135deg, rgba(255, 177, 57, .92), rgba(239, 95, 170, .9));
}

.cc-panel-switch button.is-active {
    outline: 2px solid rgba(255, 255, 255, .72);
    box-shadow: 0 0 0 3px rgba(92, 211, 255, .22), 0 10px 22px rgba(0, 0, 0, .28);
    filter: brightness(1.08);
}

.cc-panel-workshop-sortbar{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0 0 16px;padding:10px 12px;border:1px solid rgba(93,219,230,.34);border-radius:15px;background:linear-gradient(135deg,rgba(15,172,190,.13),rgba(124,83,226,.17));box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.cc-panel-workshop-sortbar strong{margin-right:3px;color:#bdefff;font-weight:1000}
.cc-panel-workshop-sortbar button{min-height:37px;padding:8px 13px;border:1px solid rgba(143,223,255,.42);border-radius:999px;background:linear-gradient(135deg,#153c61,#483985);color:#eaf8ff;font-weight:1000;cursor:pointer;box-shadow:0 6px 14px rgba(0,0,0,.26);transition:transform .16s ease,box-shadow .16s ease}
.cc-panel-workshop-sortbar button:hover{transform:translateY(-1px)}
.cc-panel-workshop-sortbar button.is-active{border-color:#fff;background:linear-gradient(135deg,#16bfbd,#7d55e4);box-shadow:0 0 0 3px rgba(155,124,255,.18),0 0 16px rgba(41,209,231,.34)}
@media(max-width:620px){.cc-panel-workshop-sortbar strong{width:100%}.cc-panel-workshop-sortbar button{flex:1 1 140px}}

.cc-panel-view[hidden] {
    display: none !important;
}

.cc-panel-card-btn {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    padding: 0;
    cursor: pointer;
}

.cc-panel-card-btn:hover h4 {
    text-decoration: underline;
    text-decoration-color: #7ee6ff;
}

.cc-panel-collection-hint {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid rgba(126, 230, 255, .42);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0, 169, 255, .18), rgba(126, 87, 255, .18));
    color: #eaf7ff;
    font-weight: 900;
}

.cc-panel-card-detail {
    position: relative;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 18px;
    align-items: center;
    padding: 16px;
    border-radius: 12px;
    background: radial-gradient(circle at top left, rgba(126, 87, 255, .24), transparent 48%), rgba(8, 14, 29, .92);
    border: 1px solid rgba(120, 200, 255, .28);
}

.cc-panel-card-detail__close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(150, 220, 255, .65);
    border-radius: 999px;
    background: rgba(11, 18, 34, .9);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
}

.cc-panel-card-detail__close:hover {
    background: rgba(0, 169, 255, .28);
}

.cc-panel-card-detail__image {
    border: 4px solid #ff4d63;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .32);
}

.cc-panel-card-detail__image img {
    display: block;
    width: 100%;
    aspect-ratio: .72;
    object-fit: cover;
}

.cc-panel-card-detail h4 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 28px;
    line-height: 1.05;
}

.cc-panel-card-detail p {
    margin: 6px 0;
    color: #cbd8ec;
    font-weight: 800;
}

.cc-panel-card-detail strong {
    color: #7ee6ff;
}

.cc-panel-decks,
.cc-panel-challenge,
.cc-panel-moutchou {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cc-panel-decks__top,
.cc-panel-deck-editor__head,
.cc-panel-deck-editor__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cc-panel-decks__primary,
.cc-panel-deck-row button,
.cc-panel-deck-editor__actions button,
.cc-panel-moutchou__form button {
    border: 1px solid rgba(145, 225, 255, .72);
    border-radius: 8px;
    padding: 9px 13px;
    background: linear-gradient(135deg, rgba(29, 185, 150, .95), rgba(53, 139, 255, .95));
    color: #fff;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .24);
}

.cc-panel-deck-editor__actions button:nth-child(2) {
    background: linear-gradient(135deg, rgba(239, 84, 84, .94), rgba(239, 95, 170, .9));
}

.cc-panel-deck-editor__actions button:nth-child(3) {
    background: rgba(10, 18, 34, .92);
}

.cc-panel-decks__primary:disabled,
.cc-panel-deck-row button:disabled,
.cc-panel-deck-editor__actions button:disabled,
.cc-panel-moutchou__form button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.cc-panel-decks__saved {
    display: grid;
    gap: 10px;
}

.cc-panel-challenge__grid {
    display: grid;
    grid-template-columns: minmax(220px, .85fr) minmax(300px, 1.15fr);
    gap: 14px;
}

.cc-panel-challenge__members {
    display: grid;
    gap: 10px;
    align-content: start;
    max-height: min(430px, 48vh);
    overflow: auto;
    padding-right: 4px;
}

.cc-panel-challenge-player {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(120, 200, 255, .28);
    border-radius: 10px;
    background: rgba(8, 14, 29, .88);
    color: #eaf7ff;
    text-align: left;
    cursor: pointer;
}

.cc-panel-challenge-player.is-active {
    border-color: rgba(54, 230, 166, .72);
    box-shadow: 0 0 0 2px rgba(54, 230, 166, .15);
}

.cc-panel-challenge-player strong {
    color: #fff;
    font-size: 17px;
}

.cc-panel-challenge-player span {
    color: #7ee6ff;
    font-weight: 1000;
}

.cc-panel-challenge-player em {
    color: #b8c7dc;
    font-style: normal;
    font-weight: 800;
}

.cc-panel-challenge__form {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 14px;
    border: 1px solid rgba(120, 220, 255, .32);
    border-radius: 12px;
    background: radial-gradient(circle at top right, rgba(34, 206, 172, .16), transparent 45%), rgba(6, 12, 23, .94);
}

.cc-panel-challenge__form label {
    display: grid;
    gap: 6px;
    color: #8fdfff;
    font-size: 12px;
    font-weight: 1000;
    text-transform: uppercase;
}

.cc-panel-challenge__form select {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(130, 210, 255, .42);
    border-radius: 9px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-weight: 900;
    padding: 8px 10px;
}

.cc-panel-challenge__form button,
.cc-panel-challenge__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #23d18b, #1d8cff);
    color: #fff !important;
    font-weight: 1000;
    text-decoration: none !important;
    padding: 0 16px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(29, 140, 255, .24);
}

.cc-panel-challenge__form button:disabled {
    background: rgba(255, 255, 255, .12);
    color: #bdc7d8 !important;
    cursor: default;
    box-shadow: none;
}

.cc-panel-deck-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(120, 200, 255, .28);
    border-radius: 10px;
    background: rgba(8, 14, 29, .86);
}

.cc-panel-deck-row.is-ready {
    border-color: rgba(75, 225, 169, .48);
}

.cc-panel-deck-row.is-favorite {
    border-color: rgba(255, 211, 92, .86);
    box-shadow: 0 0 18px rgba(255, 211, 92, .14);
}

.cc-panel-deck-row__side .cc-panel-deck-favorite {
    border-color: rgba(255, 211, 92, .72);
    background: rgba(80, 59, 8, .88);
}

.cc-panel-deck-row__side .cc-panel-deck-favorite.is-favorite {
    color: #fff1a8;
}

.cc-panel-deck-row.is-missing {
    border: 2px solid #ff465f;
    background: linear-gradient(135deg, rgba(105, 8, 24, .92), rgba(28, 8, 18, .94));
    box-shadow: 0 0 16px rgba(255, 42, 78, .42), inset 0 0 18px rgba(255, 42, 78, .12);
}

.cc-panel-deck-row.is-missing .cc-panel-deck-row__side em {
    color: #ff9bab;
    font-weight: 900;
}

.cc-panel-card-detail{display:block}
.cc-panel-card-variants{width:100%}
.cc-panel-card-variants__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,180px));justify-content:center;gap:14px}
.cc-panel-card-variant{display:grid;gap:7px;padding:11px;border:1px solid rgba(115,220,255,.45);border-radius:12px;background:rgba(11,24,42,.96);text-align:center}
.cc-panel-card-variant .cc-panel-collection-card__visual{width:128px!important;max-width:128px!important;height:auto!important;margin:auto}
.cc-panel-card-variant .cc-panel-collection-card__board{width:128px!important;max-width:128px!important;height:172px!important;min-height:0!important}
.cc-panel-card-variant .cc-panel-collection-card__board img{width:100%!important;height:100%!important;object-fit:contain!important}
.cc-panel-card-variant>strong{color:#8fe8ff;font-size:18px}
.cc-panel-card-variant>button{padding:9px 12px;border:1px solid #72dcff;border-radius:8px;background:#126da0;color:#fff;font-weight:900;cursor:pointer}
.cc-panel-rebuy-alert{margin:8px 0;padding:10px;border:2px solid #ff526b;border-radius:9px;background:#7f1027;color:#fff;font-weight:1000;text-align:center;animation:cc-panel-rebuy-pulse 1.25s ease-in-out infinite}
@keyframes cc-panel-rebuy-pulse{50%{box-shadow:0 0 18px #ff315e;transform:scale(1.02)}}
.cc-panel-preferences{display:grid;gap:16px}.cc-panel-preference-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;padding:18px;border:1px solid rgba(115,220,255,.4);border-radius:14px;background:rgba(13,28,49,.95)}.cc-panel-preference-row>div{display:grid;gap:5px}.cc-panel-preference-row strong{color:#fff;font-size:18px}.cc-panel-preference-row small{color:#c9daea}.cc-panel-preference-row button{position:relative;display:flex;align-items:center;width:205px;height:54px;padding:0 18px;border:2px solid;border-radius:999px;color:#fff;font-size:15px;font-weight:1000;cursor:pointer;overflow:hidden;transition:.22s ease;box-shadow:inset 0 0 14px rgba(0,0,0,.35),0 5px 15px rgba(0,0,0,.3)}.cc-panel-preference-row button:after{content:"";position:absolute;top:5px;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.5);transition:.22s ease}.cc-panel-preference-row button.is-enabled{justify-content:flex-start;padding-right:62px;background:linear-gradient(90deg,#087a43,#19b96d);border-color:#66ffc0}.cc-panel-preference-row button.is-enabled:after{right:5px}.cc-panel-preference-row button.is-disabled{justify-content:flex-end;padding-left:62px;background:linear-gradient(90deg,#d8324d,#8d142a);border-color:#ff7890}.cc-panel-preference-row button.is-disabled:after{left:5px}.cc-panel-preference-row button:hover{filter:brightness(1.14);transform:translateY(-1px)}

.cc-panel-deck-row__main strong,
.cc-panel-deck-editor h4,
.cc-panel-deck-builder h4 {
    display: block;
    margin: 0 0 5px;
    color: #fff;
    font-size: 17px;
}

.cc-panel-deck-row__main span,
.cc-panel-deck-editor__status span,
.cc-panel-deck-stock,
.cc-panel-moutchou__private {
    color: #b8c7dc;
    font-weight: 800;
}

.cc-panel-deck-row__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.cc-panel-deck-row__side em {
    color: #8fe9ff;
    font-style: normal;
    font-weight: 1000;
}

.cc-panel-deck-row__cards,
.cc-panel-deck-selected,
.cc-panel-deck-pool {
    display: grid;
    gap: 8px;
}

.cc-panel-deck-row__cards {
    grid-template-columns: repeat(8, minmax(34px, 1fr));
    margin-top: 8px;
}

.cc-panel-deck-editor {
    padding: 14px;
    border: 1px solid rgba(120, 220, 255, .32);
    border-radius: 12px;
    background: radial-gradient(circle at top right, rgba(34, 206, 172, .16), transparent 45%), rgba(6, 12, 23, .94);
}

.cc-panel-deck-editor__head label {
    display: flex;
    flex: 1;
    min-width: 220px;
    flex-direction: column;
    gap: 6px;
    color: #8fdfff;
    font-size: 12px;
    font-weight: 1000;
    text-transform: uppercase;
}

.cc-panel-deck-editor__head input,
.cc-panel-moutchou__form input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(130, 210, 255, .42);
    border-radius: 9px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-weight: 900;
    padding: 10px 12px;
}

.cc-panel-deck-builder {
    display: grid;
    grid-template-columns: minmax(230px, .85fr) minmax(340px, 1.15fr);
    gap: 14px;
    margin-top: 14px;
}

.cc-panel-deck-selected {
    grid-template-columns: repeat(2, minmax(92px, 1fr));
}

.cc-panel-deck-selected button,
.cc-panel-deck-pick {
    border: 1px solid rgba(120, 200, 255, .28);
    border-radius: 10px;
    background: rgba(9, 19, 38, .9);
    color: inherit;
    padding: 8px;
    cursor: pointer;
}

.cc-panel-deck-pick.is-picked {
    outline: 2px solid rgba(55, 218, 160, .8);
}

.cc-panel-deck-pick:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.cc-panel-deck-pool {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    max-height: 520px;
    overflow: auto;
    padding-right: 4px;
}

.cc-panel-deck-card {
    display: grid;
    gap: 4px;
    text-align: center;
}

.cc-panel-deck-card__art {
    position: relative;
    display: block;
    border: 3px solid #ff4d63;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .26);
}

.cc-panel-deck-card__art img {
    display: block;
    width: 100%;
    aspect-ratio: .72;
    object-fit: cover;
}

.cc-panel-deck-dir {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, .92);
    background: radial-gradient(circle at 30% 25%, #ffffff, #73e5ff 46%, #1559a8 100%);
    color: #061225;
    font-size: 12px;
    line-height: 1;
    font-weight: 1000;
    box-shadow: 0 3px 9px rgba(0, 0, 0, .36);
}


.cc-panel-deck-dir strong {
    color: #061225 !important;
    font-weight: 1000;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}

.cc-panel-deck-dir-n { left: 50%; top: 4px; transform: translateX(-50%); }
.cc-panel-deck-dir-ne { right: 4px; top: 12px; }
.cc-panel-deck-dir-e { right: 4px; top: 50%; transform: translateY(-50%); }
.cc-panel-deck-dir-se { right: 4px; bottom: 12px; }
.cc-panel-deck-dir-s { left: 50%; bottom: 4px; transform: translateX(-50%); }
.cc-panel-deck-dir-sw { left: 4px; bottom: 12px; }
.cc-panel-deck-dir-w { left: 4px; top: 50%; transform: translateY(-50%); }
.cc-panel-deck-dir-nw { left: 4px; top: 12px; }

.cc-panel-deck-card.is-mini .cc-panel-deck-dir {
    width: 10px;
    height: 10px;
    border-width: 1px;
    font-size: 7px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .32);
}

.cc-panel-deck-card.is-mini .cc-panel-deck-dir-n { top: 1px; }
.cc-panel-deck-card.is-mini .cc-panel-deck-dir-ne { right: 1px; top: 5px; }
.cc-panel-deck-card.is-mini .cc-panel-deck-dir-e { right: 1px; }
.cc-panel-deck-card.is-mini .cc-panel-deck-dir-se { right: 1px; bottom: 5px; }
.cc-panel-deck-card.is-mini .cc-panel-deck-dir-s { bottom: 1px; }
.cc-panel-deck-card.is-mini .cc-panel-deck-dir-sw { left: 1px; bottom: 5px; }
.cc-panel-deck-card.is-mini .cc-panel-deck-dir-w { left: 1px; }
.cc-panel-deck-card.is-mini .cc-panel-deck-dir-nw { left: 1px; top: 5px; }

.cc-panel-deck-card.is-mini .cc-panel-deck-dir strong {
    transform: scale(.86);
}

.cc-panel-deck-card__name {
    color: #fff;
    font-size: 12px;
    font-weight: 1000;
    line-height: 1.15;
}

.cc-panel-deck-card__meta {
    color: #9fdcf4;
    font-size: 10px;
    font-weight: 900;
}

.cc-panel-deck-card.is-mini .cc-panel-deck-card__name,
.cc-panel-deck-card.is-mini .cc-panel-deck-card__meta {
    display: none;
}

.cc-panel-deck-stock {
    display: block;
    margin-top: 5px;
    font-size: 11px;
}

.cc-panel-deck-stock.is-used {
    color: #ffd37a;
}

.cc-panel-moutchou__stream {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 190px;
    max-height: min(340px, 42vh);
    overflow: auto;
    padding: 14px;
    border: 1px solid rgba(120, 200, 255, .28);
    border-radius: 12px;
    background: radial-gradient(circle at top left, rgba(126, 87, 255, .22), transparent 45%), rgba(6, 12, 23, .94);
}

.cc-panel-moutchou__bubble {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 78%;
    padding: 10px 12px;
    border-radius: 12px;
    color: #eaf7ff;
    font-weight: 800;
    line-height: 1.35;
    background: rgba(255, 255, 255, .09);
}

.cc-panel-moutchou__bubble img {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    object-fit: cover;
}

.cc-panel-moutchou__bubble.is-user {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(53, 139, 255, .82), rgba(29, 185, 150, .78));
}

.cc-panel-moutchou__bubble.is-bot {
    align-self: flex-start;
}

.cc-panel-moutchou__bubble.is-typing {
    opacity: .72;
}

.cc-panel-moutchou__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

@media (max-width: 980px) {
    .cc-panel-deck-builder {
        grid-template-columns: 1fr;
    }

    .cc-panel-challenge__grid {
        grid-template-columns: 1fr;
    }

    .cc-panel-deck-row {
        grid-template-columns: 1fr;
    }

    .cc-panel-deck-row__side {
        align-items: stretch;
    }
}

.cc-panel-card-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.cc-panel-card-detail__actions button,
.cc-panel-mission__claim,
.cc-panel-workshop__buy,
.cc-panel-workshop__equip {
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #23d18b, #6d5cff);
    color: #fff;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(70, 90, 255, .25);
}

.cc-panel-card-detail__actions button {
    padding: 10px 16px;
}

.cc-panel-card-detail__actions button:disabled,
.cc-panel-mission__claim:disabled,
.cc-panel-workshop__buy:disabled,
.cc-panel-workshop__equip:disabled {
    background: rgba(255, 255, 255, .12);
    color: #bdc7d8;
    cursor: default;
    box-shadow: none;
}

.cc-panel-wallet-convert {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid rgba(120, 220, 255, .35);
    border-radius: 12px;
    background: radial-gradient(circle at top right, rgba(255, 210, 95, .18), transparent 42%), linear-gradient(135deg, rgba(9, 21, 42, .96), rgba(10, 12, 27, .96));
    box-shadow: inset 0 0 28px rgba(0, 169, 255, .08);
}

.cc-panel-wallet-convert__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.cc-panel-wallet-convert h4 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 22px;
}

.cc-panel-wallet-convert p,
.cc-panel-wallet-convert__hint {
    margin: 0;
    color: #b8c7dc;
    font-weight: 800;
}

.cc-panel-wallet-convert__balance {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.cc-panel-wallet-convert__balance span {
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-weight: 1000;
}

.cc-panel-wallet-convert__form {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(130px, 180px) auto;
    align-items: end;
    gap: 10px;
}

.cc-panel-wallet-convert__form label {
    color: #eaf7ff;
    font-weight: 900;
}

.cc-panel-wallet-convert__form input {
    min-height: 38px;
    border: 1px solid rgba(120, 200, 255, .4);
    border-radius: 10px;
    background: rgba(255, 255, 255, .92);
    color: #15233b;
    font-weight: 900;
    padding: 0 12px;
}

.cc-panel-wallet-convert__form button {
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #23d18b, #6d5cff);
    color: #fff;
    font-weight: 1000;
    padding: 0 18px;
    cursor: pointer;
}

.cc-panel-wallet-convert__form button:disabled {
    background: rgba(255, 255, 255, .14);
    color: #bdc7d8;
    cursor: default;
}

.cc-panel-pack-grid,
.cc-panel-workshop-grid {
    display: grid;
    gap: 12px;
}

.cc-panel-pack-grid {
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
}

.cc-panel-workshop-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.cc-panel-pack,
.cc-panel-workshop {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(16, 28, 54, .96), rgba(8, 14, 29, .96));
    border: 1px solid rgba(120, 200, 255, .25);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

.cc-panel-pack {
    padding: 14px;
}

.cc-panel-first-pack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    align-items: center;
    margin: 0 0 16px;
    padding: 16px;
    border: 2px solid rgba(91, 225, 255, .72);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 164, 202, .2), rgba(124, 69, 225, .23)), rgba(7, 17, 35, .96);
    box-shadow: 0 0 22px rgba(60, 203, 255, .2);
    color: #fff;
}

.cc-panel-first-pack h4 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 21px;
    text-shadow: 0 2px 3px #000, 0 0 10px rgba(86, 230, 255, .65);
}

.cc-panel-first-pack p,
.cc-panel-first-pack small {
    margin: 0;
    color: #e7f8ff;
    font-weight: 800;
    text-shadow: 0 2px 3px #000;
}

.cc-panel-first-pack small,
.cc-panel-first-pack__status {
    grid-column: 1 / -1;
}

.cc-panel-pack-roulette-stage {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 220px;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 16px;
    background: radial-gradient(circle at center, rgba(54, 222, 255, .25), rgba(8, 13, 31, .98) 68%);
    border: 2px solid rgba(107, 225, 255, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cc-panel-pack-roulette-stage[hidden] { display: none; }

.cc-panel-pack-roulette-stage__card {
    width: min(360px, 86%);
    display: grid;
    justify-items: center;
    gap: 12px;
    color: #fff;
    text-align: center;
}

.cc-panel-pack-roulette-stage__card img {
    width: min(320px, 100%);
    max-height: 150px;
    object-fit: cover;
    border-radius: 18px;
    border: 3px solid rgba(255, 255, 255, .8);
    box-shadow: 0 0 32px rgba(59, 220, 255, .65), 0 15px 35px rgba(0, 0, 0, .6);
}

.cc-panel-pack-roulette-stage__card strong {
    font-size: 20px;
    text-shadow: 0 3px 4px #000, 0 0 14px #39dfff;
}

.cc-panel-pack-roulette-stage__card.is-spinning { animation: cc-panel-pack-pulse .18s ease both; }
.cc-panel-pack-roulette-stage__card.is-winner { animation: cc-panel-pack-winner .75s ease both; }
.cc-panel-pack-roulette-stage__gift { font-size: 72px; }

@keyframes cc-panel-pack-pulse {
    from { opacity: .35; transform: scale(.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes cc-panel-pack-winner {
    0% { opacity: .4; transform: scale(.75) rotate(-2deg); }
    65% { transform: scale(1.08) rotate(1deg); }
    100% { opacity: 1; transform: scale(1); }
}

.cc-panel-pack-reveal {
    scroll-margin-top: 12px;
    color: #fff;
}

.cc-panel-pack-reveal > header {
    padding: 16px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(34, 203, 232, .22), rgba(137, 76, 242, .24));
    border: 1px solid rgba(116, 226, 255, .55);
    text-align: center;
}

.cc-panel-pack-reveal > header h3,
.cc-panel-pack-reveal > header p { color: #fff; text-shadow: 0 2px 4px #000; }

.cc-panel-pack-reveal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 12px;
}

.cc-panel-pack-reveal__card {
    opacity: 0;
    transform: perspective(700px) rotateY(90deg) scale(.75);
    display: grid;
    gap: 7px;
    padding: 10px;
    border-radius: 13px;
    background: rgba(8, 18, 38, .97);
    border: 2px solid rgba(95, 218, 255, .45);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
    transition: opacity .48s ease, transform .62s cubic-bezier(.2, .9, .2, 1.2), box-shadow .5s ease;
}

.cc-panel-pack-reveal__card.is-visible {
    opacity: 1;
    transform: perspective(700px) rotateY(0) scale(1);
    box-shadow: 0 0 22px rgba(69, 220, 255, .42), 0 10px 24px rgba(0, 0, 0, .5);
}

.cc-panel-pack-reveal__card img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 9px;
}

.cc-panel-pack-reveal__card strong,
.cc-panel-pack-reveal__card small { color: #fff; text-shadow: 0 2px 3px #000; }

.cc-panel-pack-reveal__deck {
    margin-top: 20px;
    padding: 18px;
    border-radius: 15px;
    text-align: center;
    background: linear-gradient(135deg, rgba(0, 166, 119, .28), rgba(41, 132, 224, .26));
    border: 2px solid #54f0bc;
    box-shadow: 0 0 25px rgba(53, 234, 177, .28);
}

.cc-panel-pack-reveal__deck h4,
.cc-panel-pack-reveal__deck p { color: #fff; text-shadow: 0 2px 4px #000; }

.cc-panel-pack-reveal__deck button {
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 999px;
    padding: 11px 20px;
    background: linear-gradient(135deg, #00b878, #168cde);
    color: #fff;
    font-weight: 1000;
    text-shadow: 0 2px 3px #000;
    cursor: pointer;
}

.cc-panel-first-pack__draw,
.cc-panel-pack__choose {
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    padding: 10px 17px;
    background: linear-gradient(135deg, #7a4dff, #ef3f9e);
    color: #fff;
    font-weight: 1000;
    text-shadow: 0 2px 3px #000;
    cursor: pointer;
    box-shadow: 0 7px 18px rgba(126, 65, 231, .38);
}

.cc-panel-first-pack__draw:disabled {
    cursor: wait;
    opacity: .72;
}

.cc-panel-first-pack__status {
    min-height: 20px;
    color: #ffe985;
    font-weight: 1000;
    text-shadow: 0 2px 3px #000;
}

.cc-panel-pack.is-draw-active {
    border-color: #ffe75e;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 0 0 2px rgba(255, 231, 94, .3), 0 0 28px rgba(255, 203, 56, .72);
}

.cc-panel-pack.is-draw-winner {
    border-color: #5bffbe;
    box-shadow: 0 0 0 2px rgba(91, 255, 190, .35), 0 0 34px rgba(49, 226, 189, .78);
}

.cc-panel-pack__choose {
    width: 100%;
    margin-top: 14px;
    background: linear-gradient(135deg, #00b877, #18a9db);
}

.cc-panel-pack__choose[hidden] {
    display: none;
}

@media (max-width: 700px) {
    .cc-panel-first-pack {
        grid-template-columns: 1fr;
    }
    .cc-panel-first-pack small,
    .cc-panel-first-pack__status {
        grid-column: auto;
    }
}

.cc-panel-workshop {
    padding: 12px;
}

.cc-panel-pack.is-owned,
.cc-panel-workshop.is-owned {
    border-color: rgba(54, 230, 166, .72);
}

.cc-panel-workshop.is-equipped {
    border-color: rgba(255, 213, 97, .82);
    box-shadow: 0 0 0 1px rgba(255, 213, 97, .18), 0 10px 24px rgba(0, 0, 0, .26);
}

.cc-panel-pack.is-locked {
    filter: saturate(.78);
    opacity: .84;
}

.cc-panel-pack__top {
    display: flex;
    gap: 12px;
    align-items: center;
}

.cc-panel-pack__image,
.cc-panel-workshop__image {
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 169, 255, .2), rgba(126, 87, 255, .2));
    border: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cc-panel-pack__image {
    width: 74px;
    height: 74px;
    flex: 0 0 auto;
}

.cc-panel-workshop__image {
    height: 118px;
    margin-bottom: 10px;
}

.cc-panel-pack__image img,
.cc-panel-workshop__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cc-panel-workshop[data-panel-category="skins"] .cc-panel-workshop__image,
.cc-panel-workshop[data-panel-category="sounds"] .cc-panel-workshop__image,
.cc-panel-workshop[data-panel-category="animations"] .cc-panel-workshop__image {
    background: radial-gradient(circle at top, rgba(255, 255, 255, .12), transparent 62%), rgba(12, 22, 43, .92);
}

.cc-panel-workshop[data-panel-category="sounds"] .cc-panel-workshop__image {
    height: 72px;
}

.cc-panel-workshop[data-panel-category="skins"] .cc-panel-workshop__image img,
.cc-panel-workshop[data-panel-category="sounds"] .cc-panel-workshop__image img,
.cc-panel-workshop[data-panel-category="animations"] .cc-panel-workshop__image img {
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
}

.cc-panel-workshop__image span {
    font-size: 42px;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35));
}

.cc-panel-pack h4,
.cc-panel-workshop h4 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.12;
}

.cc-panel-workshop h4 {
    font-size: 17px;
}

.cc-panel-pack p,
.cc-panel-workshop p {
    margin: 7px 0 0;
    color: #b8c7dc;
    font-weight: 800;
}

.cc-panel-workshop__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}
.cc-panel-workshop__rarity{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:7px 0;color:#ffd76a}
.cc-panel-workshop__rarity strong{padding:4px 9px;border:1px solid rgba(255,215,106,.48);border-radius:999px;background:rgba(255,187,45,.12)}
.cc-panel-workshop__rarity small{color:#aee9ff;font-weight:800}

.cc-panel-workshop__price {
    font-weight: 1000;
    color: #ffe795;
}

.cc-panel-pack__badge,
.cc-panel-workshop__badge {
    display: inline-flex;
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(0, 169, 255, .18);
    color: #dff8ff;
    font-weight: 1000;
    font-size: 12px;
}

.cc-panel-pack__badge {
    margin-top: 9px;
}

.cc-panel-pack.is-owned .cc-panel-pack__badge,
.cc-panel-workshop.is-owned .cc-panel-workshop__badge {
    background: rgba(54, 230, 166, .18);
    color: #dfffee;
}

.cc-panel-workshop.is-equipped .cc-panel-workshop__badge {
    background: rgba(255, 213, 97, .18);
    color: #fff0b8;
}

.cc-panel-pack.is-locked .cc-panel-pack__badge {
    background: rgba(255, 183, 77, .16);
    color: #ffe0a6;
}

.cc-panel-pack__progress,
.cc-panel-mission__progress {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
}

.cc-panel-pack__progress {
    margin-top: 12px;
}

.cc-panel-pack__progress span,
.cc-panel-mission__progress span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #31e2bd, #4cb4ff, #835bff);
    box-shadow: 0 0 14px rgba(75, 190, 255, .45);
}

.cc-panel-shop-summary {
    display: grid;
    gap: 5px;
    padding: 13px 14px;
    margin-bottom: 12px;
    border-radius: 10px;
    border: 1px solid rgba(120, 220, 255, .28);
    background: linear-gradient(135deg, rgba(8, 25, 46, .96), rgba(8, 14, 29, .94));
    color: #eaf7ff;
}

.cc-panel-shop-summary strong {
    color: #fff;
    font-size: 18px;
}

.cc-panel-shop-summary span {
    color: #aebbd0;
    font-weight: 800;
}

.cc-panel-shop-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 10px;
}

.cc-panel-shop-tabs button {
    min-width: 0;
    white-space: normal;
    line-height: 1.05;
}

.cc-panel-shop-pack-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.cc-panel-shop-pack-tabs button {
    border: 1px solid rgba(126, 211, 255, .38);
    border-radius: 999px;
    background: rgba(5, 18, 37, .9);
    color: #eaf7ff;
    padding: 8px 12px;
    font-weight: 1000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
    cursor: pointer;
}

.cc-panel-shop-pack-tabs button.is-active,
.cc-panel-shop-pack-tabs button:hover {
    border-color: rgba(77, 213, 255, .72);
    background: linear-gradient(135deg, rgba(33, 161, 215, .92), rgba(104, 74, 201, .9));
}

.cc-panel-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 12px;
}

.cc-panel-shop-card {
    position: relative;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    min-height: 174px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(120, 200, 255, .25);
    background: linear-gradient(160deg, rgba(16, 28, 54, .96), rgba(8, 14, 29, .96));
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
    overflow: hidden;
}

.cc-panel-shop-card.is-available {
    border-color: rgba(54, 230, 166, .55);
}

.cc-panel-shop-card.is-waiting {
    border-color: rgba(255, 213, 97, .46);
}

.cc-panel-shop-card.is-owned {
    opacity: .82;
}

.cc-panel-shop-card__pack {
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    z-index: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #9fdcf4;
    font-size: 10px;
    font-weight: 1000;
    text-transform: uppercase;
}

.cc-panel-shop-card__visual {
    align-self: center;
    padding-top: 12px;
}

.cc-panel-shop-card__board {
    position: relative;
    width: 104px;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    border: 2px solid rgba(82, 190, 255, .42);
    background: rgba(3, 8, 18, .95);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .34);
    overflow: hidden;
}

.cc-panel-shop-card__board img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cc-panel-shop-card__missing {
    display: grid;
    place-items: center;
    height: 100%;
    padding: 8px;
    color: #9fb2c8;
    text-align: center;
    font-weight: 900;
}

.cc-panel-shop-card__dir {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .72);
    background: radial-gradient(circle at 30% 20%, #fff, #64d5ff 42%, #1064b0);
    color: #06111f;
    font-size: 11px;
    font-weight: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

.cc-panel-shop-card__dir-n { left: 50%; top: 4px; transform: translateX(-50%); }
.cc-panel-shop-card__dir-ne { right: 4px; top: 14px; }
.cc-panel-shop-card__dir-e { right: 4px; top: 50%; transform: translateY(-50%); }
.cc-panel-shop-card__dir-se { right: 4px; bottom: 14px; }
.cc-panel-shop-card__dir-s { left: 50%; bottom: 4px; transform: translateX(-50%); }
.cc-panel-shop-card__dir-sw { left: 4px; bottom: 14px; }
.cc-panel-shop-card__dir-w { left: 4px; top: 50%; transform: translateY(-50%); }
.cc-panel-shop-card__dir-nw { left: 4px; top: 14px; }

.cc-panel-shop-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: 14px;
}

.cc-panel-shop-card__body h4 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 17px;
    line-height: 1.1;
}

.cc-panel-shop-card__body p {
    margin: 0 0 10px;
    color: #b8c7dc;
    font-size: 12px;
    font-weight: 800;
}

.cc-panel-shop-card__line {
    display: grid;
    gap: 5px;
    margin-top: auto;
}

.cc-panel-shop-card__line span {
    color: #ffe795;
    font-size: 15px;
    font-weight: 1000;
}

.cc-panel-shop-card__line em {
    color: #d7e7f7;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.25;
}

.cc-panel-shop-card__actions {
    margin-top: 10px;
}

.cc-panel-shop-card__buy,
.cc-panel-shop-card__locked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 36px;
    border-radius: 999px;
    padding: 8px 12px;
    box-sizing: border-box;
    font-weight: 1000;
    text-align: center;
    border: 0;
}

.cc-panel-shop-card__buy {
    background: linear-gradient(135deg, #23d18b, #1d8cff);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(29, 140, 255, .24);
    cursor: pointer;
}

.cc-panel-shop-card__buy:disabled {
    background: rgba(255, 255, 255, .12);
    color: #c7d2df;
    cursor: default;
    box-shadow: none;
}

.cc-panel-shop-card__locked {
    background: rgba(255, 255, 255, .12);
    color: #c7d2df;
    font-size: 12px;
}

.cc-panel-shop-empty {
    grid-column: 1 / -1;
}

.cc-panel-workshop__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
}

.cc-panel-workshop__buy,
.cc-panel-workshop__equip,
.cc-panel-workshop__preview {
    width: 100%;
    padding: 9px 13px;
}

.cc-panel-workshop__equip {
    background: linear-gradient(135deg, #00a9ff, #f05faa);
}

.cc-panel-workshop__preview {
    border: 1px solid rgba(126, 229, 255, .82);
    border-radius: 9px;
    background: linear-gradient(135deg, #126da0, #7048c8);
    color: #fff;
    font-weight: 1000;
    cursor: pointer;
}

.cc-panel-workshop__preview.is-playing {
    border-color: #ffdc72;
    background: linear-gradient(135deg, #b94b56, #e27a35);
}

.cc-panel-missions__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.cc-panel-mission {
    position: relative;
    overflow: hidden;
    padding: 14px;
    border-radius: 10px;
    background: linear-gradient(160deg, rgba(17, 28, 53, .96), rgba(8, 14, 29, .96));
    border: 1px solid rgba(120, 200, 255, .22);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

.cc-panel-mission:before {
    content: "";
    position: absolute;
    inset: -40% auto auto -30%;
    width: 160px;
    height: 160px;
    border-radius: 999px;
    background: rgba(0, 194, 255, .12);
    filter: blur(6px);
}

.cc-panel-mission.is-ready {
    border-color: rgba(54, 230, 166, .72);
    box-shadow: 0 0 0 1px rgba(54, 230, 166, .16), 0 10px 24px rgba(0, 0, 0, .24);
}

.cc-panel-mission.is-claimed {
    border-color: rgba(155, 170, 195, .34);
    opacity: .78;
}

.cc-panel-mission__top {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.cc-panel-mission h4 {
    margin: 0;
    color: #fff;
    font-size: 17px;
    line-height: 1.12;
}

.cc-panel-mission__badge {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 5px 9px;
    background: rgba(0, 169, 255, .18);
    color: #dff8ff;
    font-weight: 900;
    font-size: 12px;
}

.cc-panel-mission p {
    position: relative;
    margin: 9px 0 12px;
    color: #b9c6da;
    font-weight: 700;
    min-height: 38px;
}

.cc-panel-mission__bottom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

.cc-panel-mission__reward {
    color: #ffe795;
    font-weight: 1000;
}

.cc-panel-mission__claim {
    padding: 8px 13px;
}

.cc-panel-mission__claim:not(:disabled):hover {
    filter: brightness(1.08);
}

.cc-panel-missions__notice {
    display: none;
    padding: 10px 12px;
    border-radius: 9px;
    background: rgba(54, 230, 166, .14);
    border: 1px solid rgba(54, 230, 166, .42);
    color: #dfffee;
    font-weight: 900;
}

.cc-panel-missions__notice.is-visible {
    display: block;
}

.cc-panel-ranking {
    padding: 14px;
    border-radius: 10px;
    background: rgba(8, 14, 29, .88);
    border: 1px solid rgba(120, 200, 255, .22);
}

.cc-panel-ranking h4 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 19px;
}

.cc-panel-ranking p {
    margin: 0 0 12px;
    color: #aebbd0;
    font-weight: 700;
}

.cc-panel-ranking__row {
    display: grid;
    grid-template-columns: 56px 1fr 110px 150px;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .055);
    color: #eaf7ff;
    font-weight: 800;
    margin-top: 7px;
}

.cc-panel-ranking__row strong {
    color: #67dfff;
}

.cc-panel-ranking__row.has-contributors {
    grid-template-columns: 56px 34px minmax(180px, 1fr) 110px 150px;
}

.cc-forum-contributors {
    display: grid;
    width: 28px;
    height: 28px;
    padding: 3px;
    place-items: center;
    border: 1px solid #7adfff;
    border-radius: 50%;
    background: #10223a;
    box-shadow: 0 0 10px rgba(68, 217, 255, .33);
    cursor: pointer;
}

.cc-forum-contributors:hover,
.cc-forum-contributors:focus {
    transform: scale(1.12);
    box-shadow: 0 0 15px rgba(255, 217, 108, .6);
}

.cc-forum-contributors img {
    display: block;
    width: 16px;
    height: 14px;
}

.cc-forum-modal {
    position: absolute;
    z-index: 50;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(2, 7, 17, .86);
}

.cc-forum-modal__dialog {
    position: relative;
    width: min(760px, 94%);
    max-height: 90%;
    padding: 24px;
    overflow: auto;
    border: 2px solid #67dfff;
    border-radius: 18px;
    background: linear-gradient(145deg, #10223a, #080e1d);
    box-shadow: 0 20px 70px #000;
    color: #eef8ff;
}

.cc-forum-modal__dialog h3 {
    margin: 0 46px 22px 0 !important;
    color: #fff !important;
    font-size: 23px;
}

.cc-forum-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border: 1px solid #7adfff;
    border-radius: 10px;
    background: #0b1728;
    color: #fff;
    font-size: 25px;
    cursor: pointer;
}

.cc-forum-modal__body {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(240px, 1fr);
    gap: 24px;
    align-items: center;
}

.cc-forum-pie {
    box-sizing: border-box;
    width: min(220px, 56vw);
    aspect-ratio: 100 / 104;
    margin: auto;
    filter: drop-shadow(0 11px 12px rgba(0, 0, 0, .55));
}

.cc-forum-pie svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cc-forum-pie__depth {
    fill: #29435d;
}

.cc-forum-pie__slices path,
.cc-forum-pie__slices circle {
    shape-rendering: geometricPrecision;
}

.cc-forum-pie__shine {
    fill: rgba(255, 255, 255, .08);
    pointer-events: none;
}

.cc-forum-pie__rim {
    fill: none;
    stroke: rgba(255, 255, 255, .30);
    stroke-width: 2;
    pointer-events: none;
}

.cc-forum-modal ul {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cc-forum-modal li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 9px 11px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
}

.cc-forum-modal li i {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.cc-forum-modal li span {
    color: #ffe08b;
    font-weight: 900;
}

.cc-panel-empty {
    padding: 16px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
    color: #c9d6e8;
    font-weight: 800;
}

#cc-games-info-content .cc-games-elements-info {
    max-width: 720px;
    margin: 0 auto;
}

#cc-games-info-content .cc-games-elements-info--clean h3 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 22px;
    line-height: 1.2;
}

#cc-games-info-content .cc-games-elements-info__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#cc-games-info-content .cc-games-element-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 54px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(99, 190, 255, .28);
    background: rgba(9, 20, 38, .92);
    box-shadow: inset 0 0 18px rgba(0, 169, 255, .07);
}

#cc-games-info-content .cc-games-element-card__side {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 1000;
}

#cc-games-info-content .cc-games-element-card__side strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#cc-games-info-content .cc-games-element-card__img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 34px;
    flex: 0 0 42px;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
}

#cc-games-info-content .cc-games-element-card__img img {
    display: block !important;
    width: 40px !important;
    height: 32px !important;
    max-width: 40px !important;
    max-height: 32px !important;
    object-fit: contain !important;
    object-position: center center !important;
}

#cc-games-info-content .cc-games-element-card__relation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(0, 169, 255, .18);
    color: #dff8ff;
    font-size: 13px;
    font-weight: 1000;
    white-space: nowrap;
}

#cc-games-info-content .cc-games-elements-info .cc-element-info__panel {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
}

#cc-games-info-content .cc-games-elements-info img {
    max-width: 44px;
    height: auto;
}

@media (max-width: 780px) {
    #cc-games-info-content .cc-games-elements-info__grid {
        grid-template-columns: 1fr;
    }
}

#cc-games-info-content .cc-match-alert-box,
#cc-games-info-content .cc-match-reward-box,
#cc-games-info-content .cc-battle-log {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
}

#cc-games-info-content .cc-match-reward-box .cc-live-card,
#cc-games-info-content #cc-match-winner-modal-card .cc-live-card,
#cc-games-info-content .cc-match-reward-choice__cardwrap .cc-live-card,
#cc-games-info-content .cc-match-reward-claimed__card .cc-live-card,
#cc-games-info-content .cc-match-reward-box .cc-live-card__inner,
#cc-games-info-content #cc-match-winner-modal-card .cc-live-card__inner,
#cc-games-info-content .cc-match-reward-choice__cardwrap .cc-live-card__inner,
#cc-games-info-content .cc-match-reward-claimed__card .cc-live-card__inner {
    width: 110px !important;
    max-width: 110px !important;
    min-height: 0 !important;
    transform: none !important;
}

#cc-games-info-content .cc-match-reward-box img,
#cc-games-info-content #cc-match-winner-modal-card img,
#cc-games-info-content .cc-match-reward-choice__cardwrap img,
#cc-games-info-content .cc-match-reward-claimed__card img {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

#cc-games-info-content #cc-match-loser-modal-card {
    width: auto !important;
    max-width: none !important;
    transform: none !important;
}

#cc-games-info-content #cc-match-loser-modal-card .cc-live-card,
#cc-games-info-content #cc-match-loser-modal-card .cc-live-card__inner {
    width: 138px !important;
    max-width: 138px !important;
    min-height: 0 !important;
    transform: none !important;
}

#cc-games-info-content #cc-match-loser-modal-card img {
    max-width: 138px !important;
    height: auto !important;
}

#cc-games-info-content .cc-match-reward-choice {
    min-width: 110px !important;
    max-width: 130px !important;
    padding: 8px !important;
}

#cc-games-info-content * {
    max-width: 100%;
}

@media (max-width: 900px) {
    .cc-panel-missions__hero {
        display: block;
    }

    .cc-panel-wallet {
        min-width: 0;
        margin-top: 12px;
    }

    .cc-panel-ranking__row {
        grid-template-columns: 44px 1fr;
    }

    .cc-panel-ranking__row.has-contributors {
        grid-template-columns: 44px 34px minmax(0, 1fr);
    }

    .cc-panel-ranking__row.has-contributors > span:nth-last-child(2),
    .cc-panel-ranking__row.has-contributors > span:last-child {
        grid-column: 3;
    }

    .cc-forum-modal__body {
        grid-template-columns: 1fr;
    }

    .cc-forum-pie {
        width: min(190px, 58vw);
    }

    .cc-panel-ranking__row span:nth-child(3),
    .cc-panel-ranking__row span:nth-child(4) {
        grid-column: 2;
    }
}

@media (max-width: 700px) {
    #cc-games-panel-v2 {
        left: 2vw;
        top: 12px;
        width: 96vw;
        height: 78vh;
        transform: none;
        min-width: 0;
        min-height: 320px;
    }

    #cc-games-panel-v2-title {
        font-size: 12px;
    }

    #cc-games-panel-v2-menu {
        gap: 4px;
    }

    #cc-games-panel-v2-menu button {
        padding: 3px 6px;
    }

    #cc-games-hub {
        grid-template-columns: 1fr;
    }

    #cc-games-hub-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-right: 0;
        border-bottom: 1px solid rgba(120, 200, 255, .22);
    }

    .cc-panel-wallet {
        grid-template-columns: 1fr;
    }
}


/* CityCards panel collection: affiche toujours les points de direction sur les cartes. */
.cc-panel-collection-card__visual {
    display: flex;
    justify-content: center;
    height: 108px;
    margin: -4px 0 10px;
}

.cc-panel-collection-card__visual.is-detail {
    height: auto;
    margin: 0;
}

.cc-panel-collection-card__board {
    position: relative;
    width: 78px;
    aspect-ratio: 3 / 4;
    border: 3px solid #ff4d63;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .26);
    overflow: hidden;
}

.cc-panel-collection-card__visual.is-detail .cc-panel-collection-card__board {
    width: 180px;
    border-width: 4px;
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .32);
}

.cc-panel-collection-card__board img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-panel-collection-card__dir {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .82);
    background: radial-gradient(circle at 30% 20%, #fff, #64d5ff 42%, #1064b0);
    color: #06111f;
    font-size: 11px;
    line-height: 1;
    font-weight: 1000;
    text-shadow: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

.cc-panel-collection-card__dir strong {
    color: #06111f;
    font-weight: 1000;
}

.cc-panel-collection-card__visual.is-detail .cc-panel-collection-card__dir {
    width: 28px;
    height: 28px;
    font-size: 15px;
}

.cc-panel-collection-card__dir-n { left: 50%; top: 3px; transform: translateX(-50%); }
.cc-panel-collection-card__dir-ne { right: 3px; top: 12px; }
.cc-panel-collection-card__dir-e { right: 3px; top: 50%; transform: translateY(-50%); }
.cc-panel-collection-card__dir-se { right: 3px; bottom: 12px; }
.cc-panel-collection-card__dir-s { left: 50%; bottom: 3px; transform: translateX(-50%); }
.cc-panel-collection-card__dir-sw { left: 3px; bottom: 12px; }
.cc-panel-collection-card__dir-w { left: 3px; top: 50%; transform: translateY(-50%); }
.cc-panel-collection-card__dir-nw { left: 3px; top: 12px; }

.cc-panel-collection-card__visual.is-detail .cc-panel-collection-card__dir-n { top: 6px; }
.cc-panel-collection-card__visual.is-detail .cc-panel-collection-card__dir-ne { right: 7px; top: 22px; }
.cc-panel-collection-card__visual.is-detail .cc-panel-collection-card__dir-e { right: 7px; }
.cc-panel-collection-card__visual.is-detail .cc-panel-collection-card__dir-se { right: 7px; bottom: 22px; }
.cc-panel-collection-card__visual.is-detail .cc-panel-collection-card__dir-s { bottom: 6px; }
.cc-panel-collection-card__visual.is-detail .cc-panel-collection-card__dir-sw { left: 7px; bottom: 22px; }
.cc-panel-collection-card__visual.is-detail .cc-panel-collection-card__dir-w { left: 7px; }
.cc-panel-collection-card__visual.is-detail .cc-panel-collection-card__dir-nw { left: 7px; top: 22px; }

/* CityCards panel collection: affiche les emplacements manquants comme sur la page collection. */
.cc-panel-collection-grid {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    align-items: stretch;
}

.cc-panel-collection-item {
    padding: 9px;
    min-height: 178px;
}

.cc-panel-collection-item:before {
    display: none;
}

.cc-panel-collection-item__no {
    position: relative;
    z-index: 2;
    display: block;
    margin: 0 0 4px;
    color: #9fd8ff;
    font-size: 11px;
    font-weight: 900;
}

.cc-panel-collection-item.is-missing {
    background: linear-gradient(160deg, rgba(232, 238, 246, .96), rgba(209, 218, 230, .96));
    border-color: rgba(128, 150, 172, .35);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
}

.cc-panel-collection-item.is-missing .cc-panel-collection-item__no,
.cc-panel-collection-item.is-missing h4,
.cc-panel-collection-item.is-missing p {
    color: #24384f;
}

.cc-panel-collection-item.is-missing h4 {
    text-align: center;
    width: 100%;
}

.cc-panel-collection-item.is-missing p {
    text-align: center;
    min-height: 18px;
    margin-bottom: 0;
}

.cc-panel-collection-item.is-missing .cc-panel-card-btn {
    cursor: default;
}

.cc-panel-collection-card__visual.is-missing .cc-panel-collection-card__board {
    border-color: rgba(255, 255, 255, .62);
    background: linear-gradient(180deg, #eef3f8, #dfe7f0);
    box-shadow: inset 0 0 16px rgba(255, 255, 255, .45), 0 7px 14px rgba(0, 0, 0, .1);
}

.cc-panel-collection-card__slotnum {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #93a9c1;
    font-size: 18px;
    font-weight: 1000;
}


/* CityCards panel collection: garde l'affichage normal des cartes inconnues sans grisé disabled. */
.cc-panel-card-btn[aria-disabled="true"] {
    cursor: default;
}


/* CityCards panel collection: les cartes inconnues gardent le fond normal du panel, sans grand cadre grisé. */
.cc-panel-collection-item.is-missing {
    background: linear-gradient(160deg, rgba(17, 28, 53, .96), rgba(8, 14, 29, .96));
    border-color: rgba(120, 200, 255, .22);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

.cc-panel-collection-item.is-missing .cc-panel-collection-item__no {
    color: #9fd8ff;
}

.cc-panel-collection-item.is-missing h4 {
    color: #fff;
}

.cc-panel-collection-item.is-missing p {
    color: #b9c6da;
}

/* Collection Desktop : même présentation claire et compacte que CityCardsLive. */
.cc-panel-collection {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.cc-panel-collection__heading {
    border-bottom: 1px solid rgba(255, 255, 255, .72);
    padding-bottom: 10px;
}

.cc-panel-collection__heading h4 {
    margin: 0 0 7px;
    color: #7ee6ff;
    font-size: 22px;
    font-weight: 1000;
    text-transform: uppercase;
}

.cc-panel-collection__heading p {
    margin: 0;
    color: #eef5ff;
    font-size: 17px;
}

.cc-panel-collection__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cc-panel-collection__stats span {
    padding: 10px 14px;
    border: 1px solid rgba(99, 199, 255, .45);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(20, 51, 83, .96), rgba(10, 26, 48, .96));
    color: #eaf5ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.cc-panel-collection__stats strong {
    color: #fff;
    font-weight: 1000;
}

.cc-panel-collection__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(230px, 1fr));
    gap: 18px 20px;
    min-width: 0;
}

.cc-panel-collection__card {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-width: 0;
    min-height: 156px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(150, 184, 218, .38);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(20, 31, 52, .98), rgba(9, 17, 32, .98));
    color: #fff;
    text-align: left;
    font: inherit;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .04);
}

button.cc-panel-collection__card {
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

button.cc-panel-collection__card:hover,
button.cc-panel-collection__card:focus-visible {
    transform: translateY(-2px);
    border-color: #67d9ff;
    box-shadow: 0 0 0 1px rgba(103, 217, 255, .28), 0 15px 32px rgba(0, 0, 0, .32);
    outline: none;
}

.cc-panel-collection__card img,
.cc-panel-collection__unknown-image {
    display: block;
    width: 96px;
    height: 120px;
    border-radius: 11px;
    object-fit: contain;
    background: rgba(2, 9, 18, .62);
}

.cc-panel-collection__number {
    position: absolute;
    z-index: 2;
    left: 12px;
    top: 10px;
    min-width: 28px;
    padding: 2px 8px;
    border: 1px solid rgba(126, 230, 255, .78);
    border-radius: 999px;
    background: #10243b;
    color: #e9fbff;
    font-weight: 1000;
    text-align: center;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
}

.cc-panel-collection__copy {
    display: grid;
    align-content: center;
    gap: 8px;
    min-width: 0;
}

.cc-panel-collection__copy strong {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 7px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, .72);
    color: #76dcff;
    font-size: 19px;
    font-weight: 1000;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.cc-panel-collection__copy em {
    color: #e5edf8;
    font-size: 16px;
    font-style: normal;
}

.cc-panel-collection__copy b {
    color: #fff;
    font-size: 14px;
}

.cc-panel-collection__card.is-missing {
    opacity: .43;
    box-shadow: none;
}

.cc-panel-collection__card.is-missing .cc-panel-collection__unknown-image {
    background: radial-gradient(circle at 50% 45%, rgba(89, 116, 147, .16), rgba(3, 9, 18, .42));
}

.cc-panel-collection__card.is-missing .cc-panel-collection__copy strong {
    color: #8290a2;
}

.cc-panel-collection__card.cc-card-rarity-legendary .cc-panel-collection__copy strong { color: #ffd65e; }
.cc-panel-collection__card.cc-card-rarity-epic .cc-panel-collection__copy strong { color: #db92ff; }
.cc-panel-collection__card.cc-card-rarity-ultra .cc-panel-collection__copy strong { color: #ff8db8; }

@media (max-width: 1500px) {
    .cc-panel-collection__grid { grid-template-columns: repeat(3, minmax(230px, 1fr)); }
}

@media (max-width: 1120px) {
    .cc-panel-collection__grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

@media (max-width: 720px) {
    .cc-panel-collection__grid { grid-template-columns: 1fr; }
}

/* CityCards panel rankings: pays et origine/forum sous le pseudo. */
.cc-panel-ranking__player {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.cc-panel-ranking__player b {
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-panel-ranking__player em {
    color: #aebbd0;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* CityCards panel rankings: drapeau du pays dans l'identité joueur. */
.cc-panel-ranking__identity {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.cc-panel-ranking__flag {
    width: 18px;
    height: 12px;
    flex: 0 0 auto;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 2px 5px rgba(0, 0, 0, .32);
}


/* CityCards panel packs : mise en valeur du pack possédé. */
.cc-panel-pack.is-owned {
    border-color: rgba(54, 230, 166, .9);
    background:
        radial-gradient(circle at 18% 20%, rgba(54, 230, 166, .18), transparent 36%),
        radial-gradient(circle at 88% 12%, rgba(126, 230, 255, .16), transparent 32%),
        linear-gradient(160deg, rgba(14, 43, 46, .98), rgba(8, 14, 29, .98));
    box-shadow:
        0 0 0 1px rgba(54, 230, 166, .22),
        0 0 26px rgba(54, 230, 166, .22),
        0 14px 30px rgba(0, 0, 0, .30);
}

.cc-panel-pack.is-owned:before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .18) 18%, transparent 34%);
    transform: translateX(-135%);
    animation: cc-panel-owned-pack-shine 4.8s ease-in-out infinite;
}

.cc-panel-pack.is-owned:after {
    content: "";
    position: absolute;
    right: 12px;
    top: 12px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #36e6a6;
    box-shadow: 0 0 16px rgba(54, 230, 166, .9), 0 0 28px rgba(54, 230, 166, .38);
    pointer-events: none;
}

.cc-panel-pack.is-owned .cc-panel-pack__image {
    border-color: rgba(54, 230, 166, .78);
    box-shadow: 0 0 0 2px rgba(54, 230, 166, .12), 0 0 20px rgba(54, 230, 166, .25);
}

.cc-panel-pack.is-owned h4 {
    text-shadow: 0 0 12px rgba(54, 230, 166, .42);
}

.cc-panel-pack.is-owned .cc-panel-pack__progress span {
    box-shadow: 0 0 18px rgba(54, 230, 166, .55);
}

@keyframes cc-panel-owned-pack-shine {
    0%, 62% {
        transform: translateX(-135%);
        opacity: 0;
    }
    72% {
        opacity: .9;
    }
    100% {
        transform: translateX(135%);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cc-panel-pack.is-owned:before {
        animation: none;
        display: none;
    }
}


/* CityCards panel boutique : met en valeur les cartes bientôt rachetables après les défis JcJ. */
.cc-panel-shop-card.is-rebuy-soon {
    border: 2px solid rgba(255, 184, 77, .92);
    background: radial-gradient(circle at 18% 10%, rgba(255, 213, 128, .22), transparent 36%), linear-gradient(160deg, rgba(35, 28, 12, .98), rgba(8, 14, 29, .96));
    box-shadow: 0 0 0 4px rgba(255, 184, 77, .13), 0 14px 34px rgba(150, 88, 0, .22);
}

.cc-panel-shop-card.is-rebuy-soon:before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 10px;
    border: 1px dashed rgba(255, 184, 77, .56);
    pointer-events: none;
    z-index: 1;
}

.cc-panel-shop-card.is-rebuy-soon:after {
    content: "";
    position: absolute;
    top: -45%;
    left: -35%;
    width: 44%;
    height: 190%;
    background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .34), transparent);
    transform: translateX(-140%) rotate(18deg);
    animation: cc-panel-rebuy-soon-shine 3.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.cc-panel-shop-card.is-rebuy-soon .cc-panel-shop-card__pack,
.cc-panel-shop-card.is-rebuy-soon .cc-panel-shop-card__visual,
.cc-panel-shop-card.is-rebuy-soon .cc-panel-shop-card__body {
    position: relative;
    z-index: 2;
}

.cc-panel-shop-card.is-rebuy-soon .cc-panel-shop-card__board {
    border-color: rgba(255, 184, 77, .86);
    filter: drop-shadow(0 0 12px rgba(255, 184, 77, .42));
}

.cc-panel-shop-card.is-rebuy-soon .cc-panel-shop-card__line em {
    display: block;
    width: fit-content;
    max-width: 100%;
    min-height: 0;
    padding: 6px 9px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 184, 77, .26), rgba(255, 103, 121, .16));
    border: 1px solid rgba(255, 184, 77, .58);
    color: #ffe3a3;
    font-weight: 1000;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: left;
    box-shadow: 0 8px 18px rgba(150, 88, 0, .16);
}

@keyframes cc-panel-rebuy-soon-shine {
    0%, 52% { transform: translateX(-140%) rotate(18deg); opacity: 0; }
    62% { opacity: .85; }
    100% { transform: translateX(420%) rotate(18deg); opacity: 0; }
}


/* CityCards panel: jouer contre IA. */
.cc-panel-ai {
    padding: 12px 0 0;
}

.cc-panel-ai__form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    align-items: end;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid rgba(126, 230, 255, .34);
    background: linear-gradient(135deg, rgba(0, 169, 255, .12), rgba(126, 87, 255, .14));
    box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
}

.cc-panel-ai__form label {
    display: grid;
    gap: 8px;
    color: #eaf7ff;
    font-weight: 900;
}

.cc-panel-ai__form select {
    width: 100%;
    min-height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(126, 230, 255, .44);
    background: rgba(6, 12, 26, .92);
    color: #fff;
    padding: 8px 10px;
    font-weight: 900;
}

.cc-panel-ai__form button {
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(126, 230, 255, .54);
    background: linear-gradient(135deg, #00a9ff, #7e57ff);
    color: #fff;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0, 169, 255, .24);
}

/* CityCards panel challenge: joueurs en ligne et amis en haut de liste. */
.cc-panel-challenge-player strong {
    display: flex;
    align-items: center;
    gap: 7px;
}

.cc-panel-challenge-player strong i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #32f08d;
    box-shadow: 0 0 0 3px rgba(50, 240, 141, .16), 0 0 12px rgba(50, 240, 141, .8);
}

.cc-panel-challenge-player small {
    margin-left: auto;
    padding: 3px 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 205, 76, .96), rgba(255, 139, 74, .92));
    color: #241102;
    font-size: 11px;
    font-weight: 1000;
}

.cc-panel-challenge-player.is-friend {
    border-color: rgba(255, 205, 76, .74);
    box-shadow: 0 0 0 1px rgba(255, 205, 76, .12), 0 10px 22px rgba(255, 180, 60, .12);
}

.cc-panel-challenge__hint {
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px dashed rgba(126, 230, 255, .38);
    background: rgba(126, 230, 255, .08);
    color: #cdeeff;
    font-weight: 900;
    font-size: 12px;
}


/* CityCards panel: descriptions des menus compactes sur une ligne horizontale. */
.cc-panel-missions__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.cc-panel-missions__hero > div:first-child {
    min-width: 0;
}

.cc-panel-missions__kicker {
    margin-bottom: 5px;
}

.cc-panel-missions__hero h3 {
    font-size: 23px;
    margin-bottom: 4px;
}

.cc-panel-missions__hero p {
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.cc-panel-missions__hero .cc-panel-wallet {
    min-width: 300px;
}

@media (max-width: 1100px) {
    .cc-panel-missions__hero {
        grid-template-columns: 1fr;
    }

    .cc-panel-missions__hero p {
        white-space: normal;
    }

    .cc-panel-missions__hero .cc-panel-wallet {
        min-width: 0;
    }
}


/* CityCards panel défi : cœur d'ajout ami discret dans la carte joueur. */
.cc-panel-challenge-player__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-panel-challenge-player__friend {
    margin-left: auto;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(255, 205, 76, .72);
    background: linear-gradient(135deg, rgba(255, 80, 132, .92), rgba(255, 205, 76, .88));
    color: #2b0714;
    font-size: 18px;
    line-height: 1;
    font-weight: 1000;
    box-shadow: 0 5px 14px rgba(255, 120, 70, .24);
}

.cc-panel-challenge-player__friend:hover,
.cc-panel-challenge-player__friend:focus {
    transform: scale(1.08);
    outline: none;
}


/* FastGil - fond de panel équipé (PNG/JPG/WEBP/GIF/SVG) */
#cc-games-panel-v2.cc-panel-theme-active,
#cc-games-info-panel.cc-panel-theme-active {
    background-image: linear-gradient(rgba(3, 8, 18, .38), rgba(3, 8, 18, .68)), var(--cc-panel-theme-bg) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
#cc-games-panel-v2.cc-panel-theme-active #cc-games-panel-v2-content,
#cc-games-info-panel.cc-panel-theme-active #cc-games-info-content,
#cc-games-info-panel.cc-panel-theme-active #cc-games-hub,
#cc-games-info-panel.cc-panel-theme-active #cc-games-hub-main {
    background-color: transparent !important;
}
#cc-games-info-panel.cc-panel-theme-active .cc-panel-missions__hero,
#cc-games-info-panel.cc-panel-theme-active .cc-panel-workshop,
#cc-games-info-panel.cc-panel-theme-active .cc-panel-ranking,
#cc-games-info-panel.cc-panel-theme-active .cc-panel-deck-row {
    backdrop-filter: blur(3px);
}

/* Progression CityCards : niveau atteint, niveau actuel et prochains paliers. */
.cc-panel-progress-current {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(111, 225, 255, .65);
    box-shadow: 0 0 20px rgba(71, 190, 255, .2);
}

.cc-panel-progress-current:after {
    content: "";
    position: absolute;
    inset: -45%;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .18) 50%, transparent 58%);
    animation: ccProgressSweep 3.2s ease-in-out infinite;
}

.cc-panel-progress-current .cc-panel-mission__progress span {
    background: linear-gradient(90deg, #1fd9b1, #45b9ff, #bd69ef);
    box-shadow: 0 0 14px rgba(69, 185, 255, .62);
    transition: width .6s ease;
}

.cc-panel-progress-tier {
    position: relative;
    transition: opacity .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.cc-panel-progress-tier.is-complete {
    border-color: rgba(45, 220, 157, .42);
}

.cc-panel-progress-tier.is-complete:after {
    content: "✓";
    position: absolute;
    top: 12px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #23c98f;
    color: #04130e;
    font-weight: 900;
}

.cc-panel-progress-tier.is-current {
    border-color: #70ddff;
    box-shadow: 0 0 0 2px rgba(112, 221, 255, .2), 0 0 24px rgba(112, 221, 255, .34);
    transform: translateY(-2px);
    animation: ccProgressCurrent 2.4s ease-in-out infinite;
}

.cc-panel-progress-tier.is-current:after {
    content: "★";
    position: absolute;
    top: 12px;
    right: 14px;
    color: #ffe077;
    font-size: 22px;
    filter: drop-shadow(0 0 7px rgba(255, 224, 119, .8));
}

.cc-panel-progress-tier.is-future {
    opacity: .56;
}

@keyframes ccProgressCurrent {
    0%, 100% { box-shadow: 0 0 0 2px rgba(112, 221, 255, .16), 0 0 18px rgba(112, 221, 255, .24); }
    50% { box-shadow: 0 0 0 3px rgba(112, 221, 255, .3), 0 0 30px rgba(112, 221, 255, .48); }
}

@keyframes ccProgressSweep {
    0%, 25% { transform: translateX(-55%); opacity: 0; }
    45%, 60% { opacity: 1; }
    80%, 100% { transform: translateX(55%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cc-panel-progress-current:after,
    .cc-panel-progress-tier.is-current {
        animation: none;
    }
}

.cc-panel-elemental-progress{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}.cc-panel-elemental-progress>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}.cc-panel-elemental-progress>div:first-child span{font-weight:800}.cc-panel-elemental-progress>div:first-child strong{font-size:18px}.cc-panel-elemental-progress em{display:block;margin:4px 0 8px;font-style:normal;opacity:.82}

/* Lisibilité des textes descriptifs dans tous les menus du panel CityCards. */
#cc-games-panel-v2 .cc-panel-missions__hero p,
#cc-games-panel-v2 .cc-panel-mission p,
#cc-games-panel-v2 .cc-panel-ranking p,
#cc-games-panel-v2 .cc-panel-empty,
#cc-games-panel-v2 .cc-panel-collection-hint,
#cc-games-panel-v2 .cc-panel-challenge__hint,
#cc-games-panel-v2 .cc-panel-wallet-convert__hint,
#cc-games-panel-v2 .cc-panel-preference-row small,
#cc-games-info-panel .cc-panel-missions__hero p,
#cc-games-info-panel .cc-panel-mission p,
#cc-games-info-panel .cc-panel-ranking p,
#cc-games-info-panel .cc-panel-empty,
#cc-games-info-panel .cc-panel-collection-hint,
#cc-games-info-panel .cc-panel-challenge__hint,
#cc-games-info-panel .cc-panel-wallet-convert__hint,
#cc-games-info-panel .cc-panel-preference-row small {
    font-size: 16px !important;
    line-height: 1.45 !important;
}

/* FAQ : grille définitive sur deux colonnes, une colonne sur petit écran. */
.cc-panel-faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 1100px;
}
.cc-panel-faq-hero { grid-column: 1 / -1; margin-bottom: 8px; }
.cc-panel-faq-topic,
.cc-panel-faq-topic + .cc-panel-faq-topic { margin: 0 !important; }
@media (max-width: 760px) {
    .cc-panel-faq { grid-template-columns: 1fr; padding: 12px; }
}

.cc-panel-faq-copy .cc-faq-important {
    padding: 14px 16px;
    border: 1px solid rgba(255, 77, 128, .9);
    border-left: 5px solid #ff3f75;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 40, 100, .18), rgba(255, 190, 50, .10));
    box-shadow: 0 0 18px rgba(255, 55, 110, .18);
    color: #fff;
}
/* Rarity icons in the embedded panel, with game-like relief. */
.cc-panel-card-variant .cc-rarity-emblem,.cc-panel-collection-item .cc-rarity-emblem,.cc-panel-deck-card__name .cc-rarity-emblem{display:inline-grid;place-items:center;width:1.15em;height:1.15em;margin-right:.35em;border-radius:50%;font-size:.78em;box-shadow:0 2px 5px #000,inset 0 1px 1px rgba(255,255,255,.65);text-shadow:0 1px 2px #000}
.cc-rarity-emblem-common{display:none!important}.cc-rarity-emblem-rare{color:#fff;background:#3b91df}.cc-rarity-emblem-rare:before{content:'★'}.cc-rarity-emblem-epic{color:#fff;background:#9143d2}.cc-rarity-emblem-epic:before{content:'◆'}.cc-rarity-emblem-legendary{color:#fff7c2;background:#d98a10}.cc-rarity-emblem-legendary:before{content:'♛'}.cc-rarity-emblem-ultra{color:#fff;background:linear-gradient(135deg,#ff4fbd,#5d57ff);box-shadow:0 0 10px #ff4fbd,0 2px 5px #000}.cc-rarity-emblem-ultra:before{content:'✦'}

/* Libellés du menu centrés sans déplacer le bouton d'aide. */
#cc-games-hub-nav button{position:relative;justify-content:center;text-align:center!important}
#cc-games-hub-nav .cc-games-hub-link--help{padding-left:42px;padding-right:42px}
#cc-games-hub-nav .cc-games-hub-link--help .cc-games-hub-link__label{display:grid;place-items:center;width:100%;text-align:center}
#cc-games-hub-nav .cc-games-hub-link--help .cc-panel-menu-help{position:absolute;right:9px;top:50%;margin:0;transform:translateY(-50%)}

/* Rareté visible dans la préparation des decks. */
.cc-panel-deck-card.cc-card-rarity-rare .cc-panel-deck-card__art{border-color:#56c8ff}.cc-panel-deck-card.cc-card-rarity-epic .cc-panel-deck-card__art{border-color:#bd55f4}.cc-panel-deck-card.cc-card-rarity-legendary .cc-panel-deck-card__art{border-color:#f6bd35}.cc-panel-deck-card.cc-card-rarity-ultra .cc-panel-deck-card__art{border-color:#ff4fbd;box-shadow:0 0 14px rgba(255,79,189,.36)}

/* Toutes les fiches de l'Atelier ont la même hauteur. */
.cc-panel-workshop-grid{align-items:stretch}
.cc-panel-workshop{display:flex;flex-direction:column;height:100%;min-width:0;box-sizing:border-box}
.cc-panel-workshop[data-panel-category="sounds"] .cc-panel-workshop__image{height:118px}
.cc-panel-workshop h4{min-height:2.25em}.cc-panel-workshop>p{min-height:3.5em}
.cc-panel-workshop__line{margin-top:auto}.cc-panel-workshop__actions{margin-top:10px}

/* Atelier : le filtre doit pouvoir masquer une carte même si sa mise en page est flex. */
.cc-panel-workshop[hidden]{display:none!important}

/* Animations envoyables : cartes compactes, homogènes et entièrement contenues dans le panel. */
.cc-panel-workshop-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))!important}
.cc-panel-workshop[data-panel-category="member_animations"]{min-height:390px!important;padding:14px!important}
.cc-panel-workshop[data-panel-category="member_animations"] .cc-panel-workshop__image{width:124px!important;height:124px!important;margin:0 auto 12px!important;flex:0 0 124px;background:#09152a!important}
.cc-panel-workshop[data-panel-category="member_animations"] .cc-panel-workshop__image img{width:100%!important;height:100%!important;padding:8px!important;box-sizing:border-box!important;object-fit:contain!important}
.cc-panel-workshop[data-panel-category="member_animations"] h4{min-height:0!important;text-align:center;font-size:18px!important}
.cc-panel-workshop[data-panel-category="member_animations"] .cc-panel-workshop__description{min-height:6.8em!important;margin:10px 0 0!important;color:#c8d7ea!important;font-size:14px!important;line-height:1.36!important;font-weight:700!important;text-align:center;overflow-wrap:anywhere}
.cc-panel-workshop[data-panel-category="member_animations"] .cc-panel-workshop__type{min-height:2.4em!important;margin:9px 0 0!important;color:#7fe7ff!important;font-size:12px!important;line-height:1.25!important;text-align:center;text-transform:uppercase}
.cc-panel-workshop[data-panel-category="member_animations"] .cc-panel-workshop__rarity{justify-content:center;margin-top:auto!important}
.cc-panel-workshop[data-panel-category="member_animations"] .cc-panel-workshop__line{flex-wrap:wrap;justify-content:center!important;text-align:center}
.cc-panel-workshop[data-panel-category="member_animations"] .cc-panel-workshop__actions{display:grid!important;grid-template-columns:1fr;width:100%;margin-top:10px!important}
@media(max-width:700px){.cc-panel-workshop-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important}.cc-panel-workshop[data-panel-category="member_animations"]{min-height:370px!important}}


/* Menu gauche compact organise par rubriques - 20260807 menu v7 */
#cc-games-hub-nav{gap:2px!important;padding:9px 8px 10px!important}
#cc-games-hub-nav .cc-games-nav-group-title{margin:7px 4px 3px;padding:0 3px 5px;border-bottom:1px solid rgba(120,200,255,.14);color:#83a8ca;font-size:10px;line-height:1.1;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;white-space:normal}
#cc-games-hub-nav .cc-games-nav-group-title:first-child{margin-top:1px}
#cc-games-hub-nav button{position:relative;justify-content:flex-start!important;min-height:33px!important;height:auto!important;padding:5px 7px!important;border-color:transparent!important;background:rgba(7,20,38,.48)!important;font-size:13px!important;line-height:1.15!important;font-weight:850!important;text-align:left!important;gap:5px!important;overflow:hidden;transition:transform .16s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
#cc-games-hub-nav button:hover,#cc-games-hub-nav button.is-active{transform:translateX(2px);background:linear-gradient(135deg,rgba(0,169,255,.20),rgba(126,87,255,.15))!important;border-color:rgba(85,207,255,.53)!important;box-shadow:inset 0 0 18px rgba(25,191,255,.08),0 0 10px rgba(0,169,255,.09)}
#cc-games-hub-nav button.is-active:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:#41dfff;box-shadow:0 0 10px #41dfff}
#cc-games-hub-nav .cc-games-hub-link--help{padding-left:7px!important;padding-right:7px!important}
#cc-games-hub-nav .cc-games-hub-link__label,#cc-games-hub-nav .cc-games-hub-link--help .cc-games-hub-link__label{display:block!important;min-width:0!important;flex:1 1 auto!important;width:auto!important;place-items:initial!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left!important}
#cc-games-hub-nav .cc-panel-menu-help{position:relative!important;right:auto!important;top:auto!important;display:inline-grid!important;flex:0 0 15px!important;width:15px!important;height:15px!important;place-items:center!important;margin-left:2px!important;transform:none!important;color:#ff6985!important;font-size:13px!important;line-height:15px!important;font-weight:1000!important;text-shadow:0 0 5px rgba(255,39,82,.71)!important}
#cc-games-hub-nav .cc-panel-menu-help:after{top:-4px!important;right:-3px!important;font-size:6px!important}
#cc-games-hub-nav .cc-panel-menu-help:hover,#cc-games-hub-nav .cc-panel-menu-help:focus-visible{transform:scale(1.08)!important}
#cc-games-hub-nav .cc-games-menu-badge{display:inline-grid;flex:0 0 auto;min-width:18px;height:18px;place-items:center;padding:0 5px;box-sizing:border-box;border:1px solid rgba(255,111,133,.66);border-radius:999px;background:#8d2034;color:#fff;font-size:10px;line-height:1;font-weight:1000;box-shadow:0 0 9px rgba(255,73,109,.33)}
#cc-games-hub-nav .cc-games-menu-badge[hidden]{display:none!important}
#cc-games-hub-nav .cc-games-menu-badge.is-claimable{border-color:rgba(94,255,190,.9);background:#087b52;color:#fff;box-shadow:0 0 12px rgba(54,230,166,.62),0 0 22px rgba(54,230,166,.25)}
#cc-games-hub-nav .cc-games-menu-status{display:block;flex:0 0 10px;width:10px;height:10px;margin-left:auto;border:1px solid rgba(255,255,255,.43);border-radius:50%;background:#687487;box-shadow:0 0 5px rgba(0,0,0,.53)}
#cc-games-hub-nav .cc-games-menu-status.is-ok{background:#22d989;border-color:#83ffd0;box-shadow:0 0 9px rgba(34,217,137,.69)}
#cc-games-hub-nav .cc-games-menu-status.is-incomplete{background:#ff4f62;border-color:#ff9aa7;box-shadow:0 0 9px rgba(255,79,98,.69)}
#cc-games-hub-nav .cc-games-menu-status.is-unknown{background:#687487;opacity:.55}
#cc-games-hub-nav .cc-games-hub-link--help[data-panel-section="ai"]{min-height:33px!important;padding-top:5px!important;padding-bottom:5px!important}
#cc-games-hub-nav .cc-games-hub-link--help[data-panel-section="ai"] .cc-games-hub-link__label{display:block!important;align-self:auto!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
@media(max-height:720px){#cc-games-hub-nav{gap:1px!important;padding-top:6px!important;padding-bottom:6px!important}#cc-games-hub-nav .cc-games-nav-group-title{margin-top:4px;padding-bottom:3px;font-size:9px}#cc-games-hub-nav button{min-height:29px!important;padding-top:4px!important;padding-bottom:4px!important;font-size:12px!important}}
/* Lecteur vidéo des démonstrations FX, ouvert sans rechargement. */
.cc-fx-video-modal{position:fixed;z-index:2147483000;inset:0;display:grid;place-items:center;padding:20px;box-sizing:border-box;background:rgba(1,7,18,.86);backdrop-filter:blur(8px)}
.cc-fx-video-dialog{width:min(960px,96vw);overflow:hidden;border:2px solid #23d7ff;border-radius:22px;background:linear-gradient(145deg,#0a315b,#031126);box-shadow:0 0 42px rgba(0,206,255,.38),0 30px 90px rgba(0,0,0,.7)}
.cc-fx-video-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid rgba(92,221,255,.38)}
.cc-fx-video-dialog h2{margin:0!important;color:#eafaff!important;font-size:21px!important}
.cc-fx-video-close{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid #62dcff;border-radius:50%;background:#0a4f85;color:#fff;font-size:30px;line-height:1;cursor:pointer}
.cc-fx-video-frame{position:relative;padding-top:56.25%;background:#000}
.cc-fx-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cc-panel-workshop__video,.cc-workshop-video{border:1px solid #26d9ff!important;background:linear-gradient(180deg,#0daed7,#0875b8)!important;color:#fff!important;font-weight:900!important;cursor:pointer}
@media(max-width:600px){.cc-fx-video-modal{padding:8px}.cc-fx-video-dialog{border-radius:14px}.cc-fx-video-dialog h2{font-size:16px!important}}
.cc-settings-privacy{display:flex;flex-direction:column;gap:14px}.cc-privacy-toggle{display:flex!important;align-items:center;gap:10px}.cc-privacy-toggle input{width:20px!important;height:20px!important}.cc-panel-challenge-player__name[data-public-profile]{cursor:pointer;text-decoration:underline;text-decoration-style:dotted}.cc-public-profile{text-align:center;padding:18px}.cc-public-profile__avatar{width:150px;height:150px;border-radius:50%;object-fit:cover;border:4px solid #24d9f5}.cc-public-profile__badges{display:flex;justify-content:center;gap:24px;margin:18px 0}.cc-public-profile__badges figure{margin:0}.cc-public-profile__badges img{width:90px;height:90px;object-fit:contain}.cc-public-profile__badges figcaption{font-weight:700}
.cc-ranking-profile-link{display:inline;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:800;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}.cc-ranking-profile-link:hover,.cc-ranking-profile-link:focus{color:#39dcff;text-shadow:0 0 8px rgba(57,220,255,.65);outline:none}

/* 2026-08-12 : menu horizontal sur téléphone, colonne conservée sur tablette. */
@media (max-width:600px), (max-height:520px) and (pointer:coarse) {
    #cc-games-panel-v2{left:1vw!important;top:max(4px,env(safe-area-inset-top))!important;width:98vw!important;height:calc(100dvh - max(8px,env(safe-area-inset-top)))!important;min-width:0!important;min-height:0!important;max-width:98vw!important;max-height:calc(100dvh - max(8px,env(safe-area-inset-top)))!important;transform:none!important;resize:none!important}
    #cc-games-panel-v2-bar{height:44px!important;padding:0 5px 0 9px!important;gap:4px!important;cursor:default!important}
    #cc-games-panel-v2-title{gap:5px!important;flex:1 1 auto!important;font-size:12px!important;overflow:hidden!important;text-overflow:ellipsis!important}
    #cc-games-panel-v2-menu{gap:3px!important}
    #cc-games-panel-v2-menu button{height:34px!important;min-width:34px!important;padding:3px 7px!important;font-size:12px!important}
    #cc-games-panel-v2-content,#cc-games-info-content{min-width:0!important;min-height:0!important;overflow:hidden!important}
    #cc-games-hub{display:flex!important;flex-direction:column!important;gap:0!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;overflow:hidden!important}
    #cc-games-hub-nav{display:flex!important;flex:0 0 auto!important;flex-direction:row!important;gap:6px!important;width:100%!important;height:auto!important;min-width:0!important;min-height:50px!important;max-height:58px!important;padding:6px 8px!important;border-right:0!important;border-bottom:1px solid rgba(120,200,255,.35)!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
    #cc-games-hub-nav .cc-games-nav-group-title{display:none!important}
    #cc-games-hub-nav>button{flex:0 0 auto!important;justify-content:flex-start!important;width:auto!important;min-width:max-content!important;min-height:38px!important;height:38px!important;padding:6px 10px!important;font-size:12px!important;line-height:1!important;scroll-snap-align:start}
    #cc-games-hub-nav .cc-games-hub-link--help[data-panel-section="ai"]{min-height:38px!important;height:38px!important;padding:6px 10px!important}
    #cc-games-hub-nav .cc-games-hub-link__label,#cc-games-hub-nav .cc-games-hub-link--help .cc-games-hub-link__label{flex:0 0 auto!important;max-width:none!important;overflow:visible!important}
    #cc-games-hub-nav .cc-panel-menu-help{display:none!important}
    #cc-games-hub-main{flex:1 1 auto!important;width:100%!important;min-width:0!important;min-height:0!important;padding:10px!important;overflow:auto!important;overflow-x:hidden!important}
    #cc-games-hub-main *,#cc-games-hub-main *:before,#cc-games-hub-main *:after{box-sizing:border-box;max-width:100%}
    #cc-games-hub-main .cc-panel-hero{padding:13px!important}
    #cc-games-hub-main h2{font-size:clamp(20px,7vw,28px)!important;line-height:1.12!important;overflow-wrap:anywhere}
    .cc-panel-grid,.cc-panel-wallet,.cc-panel-workshop-grid{grid-template-columns:1fr!important}
    .cc-panel-preference-row{grid-template-columns:minmax(0,1fr)!important;gap:12px!important;padding:14px!important}
    .cc-panel-preference-row strong{font-size:16px!important;overflow-wrap:anywhere}
    .cc-panel-preference-row small{font-size:13px!important;line-height:1.4!important;overflow-wrap:anywhere}
    .cc-panel-preference-row button{justify-self:stretch!important;width:100%!important;min-width:0!important;max-width:320px!important;height:48px!important;min-height:48px!important;font-size:14px!important}
    .cc-panel-preference-row button:after{top:4px!important;width:36px!important;height:36px!important}
}

@media (min-width:601px) and (max-width:1100px) and (min-height:521px) {
    #cc-games-hub{display:grid!important;grid-template-columns:180px minmax(0,1fr)!important;gap:12px!important}
    #cc-games-hub-nav{display:flex!important;flex-direction:column!important;width:auto!important;height:auto!important;max-height:none!important;overflow:auto!important;border-right:1px solid rgba(120,200,255,.22)!important;border-bottom:0!important}
    #cc-games-hub-nav .cc-games-nav-group-title{display:block!important}
    #cc-games-hub-main{min-width:0!important;overflow:auto!important}
}
.cc-panel-invite-card.is-outgoing{border-color:#f3c956;background:linear-gradient(135deg,rgba(243,201,86,.16),rgba(10,25,45,.96))}.cc-panel-invite-card.is-outgoing [data-invite-countdown]{font-size:1.25rem;font-weight:900;color:#ffe58a}.cc-panel-invite-card.is-outgoing .cc-panel-invite-card__actions button{background:#8e2939;border-color:#ff6d80;color:#fff}
.cc-moutchou-direct-bubble {
    position: absolute;
    z-index: 2147483647;
    top: 92px;
    left: 48px;
    width: min(440px, calc(100% - 96px));
    padding: 16px 20px;
    color: #071323;
    background: #fff;
    border: 4px solid #00bdf2;
    border-radius: 24px;
    box-shadow: 0 12px 38px rgba(0,0,0,.48);
    animation: ccMoutchouBubbleIn .25s ease-out;
}
.cc-moutchou-direct-bubble::before { content:""; position:absolute; left:34px; bottom:-22px; border:12px solid transparent; border-top-color:#00bdf2; }
.cc-moutchou-direct-bubble strong { display:block; color:#00699a; font-size:18px; margin-bottom:6px; }
.cc-moutchou-direct-bubble p { margin:0; font-size:17px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
@keyframes ccMoutchouBubbleIn { from { opacity:0; transform:translateY(-12px) scale(.96); } to { opacity:1; transform:none; } }
.cc-panel-tutorial { width:100%; max-width:1200px; margin:18px auto; aspect-ratio:16/9; border:2px solid #00bdf2; border-radius:18px; overflow:hidden; background:#000; box-shadow:0 12px 34px rgba(0,0,0,.45); }
.cc-panel-tutorial iframe { width:100%; height:100%; border:0; display:block; }