/* Règles générales */
:root{
    --c-bg: #0f141a;
    --c-panel: #181f2b;
    --c-fg: #e6edf3;
    --c-muted: #9fb0bf;
    --c-blue-1: #29a3ff;      /* accent clair */
    --c-blue-2: #0077ff;      /* accent principal */
    --c-blue-3: #0057c2;      /* accent sombre */
}

.wr-red { color: #ca5353; }
.wr-orange { color: #e1aa44;; }
.wr-green { color: #429f42; }
.wr-blue { color: #3d8ae1; }

.player_infos_small{
    max-width: clamp(60px, 20vw, 200px);
}

.small, small {
  font-size: .78em;
}

.bg-body {
    background-color: #212631!important;
}
.nav-link, .nav-item { position: relative; }
.nav-label {
    position: relative;
    display: inline-block; /* = largeur exacte du texte */
    padding-bottom: 13px; /* espace entre texte et trait (optionnel) */
}
.nav-link.active .nav-label::after {
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%); /* centrage parfait */
    bottom:0;
    height:3px;
    width:100%;               /* = largeur du texte */
    background:#026de7;
    border-radius:2px 2px 0 0;
}
.nav-label-with-badge {
    padding-right: 18px;
}
.nav-pronos-badge {
    position: absolute;
    top: -10px;
    right: -13px;
    min-width: 21px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    color: #101827;
    background: #ffd166;
    border: 2px solid #0f141a;
    border-radius: 999px;
    box-shadow: 0 7px 16px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.16);
    font-size: .69rem;
    font-weight: 950;
    line-height: 1;
}
#leaderboardsNav .nav-link .nav-label {
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .7px;
    color: #cfd8dc;
    font-weight: 600;
}
.live-badge{
    display:inline-block; 
    min-width:18px; 
    padding:0 6px; 
    height:18px;
    border-radius:999px; 
    font-size:.75rem; 
    line-height:18px;
    text-align:center; 
    background:#2d7cff; 
    color:#fff; 
    margin-left:.4rem;
}

.team-rank-avg {
    position: absolute;
    width: 100%;
    top: -35px;
}
/* ---------- Patchs notes : Liste ---------- */
.patch-stack {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.patch-card {
    background: linear-gradient(180deg, var(--c-panel), #13191f);
    border: 1px solid rgba(0,0,0,.35);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 0 16px rgba(0,119,255,.08);
    transition: transform .18s ease, box-shadow .18s ease;
    cursor:pointer;
}
.patch-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,119,255,.22);
}

.patch-thumb {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.patch-body {
    padding: 1rem 1.2rem 1.3rem;
}

.patch-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--c-fg);
    margin-bottom: .35rem;
}

.patch-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .8rem;
    color: var(--c-muted);
    font-size: .85rem;
}

.patch-content {
    color: var(--c-muted);
    font-size: .9rem;
    line-height: 1.5;
}

.btn-patch {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--c-blue-2), var(--c-blue-3));
    border-radius: 999px;
    padding: .5rem 1.4rem;
    font-size: .9rem;
    text-decoration: none;
    transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.btn-patch:hover {
    background: linear-gradient(135deg, var(--c-blue-1), var(--c-blue-2));
    box-shadow: 0 0 14px rgba(0,119,255,.4);
    transform: translateY(-1px);
}

/* ---------- Patchs notes : Détail ---------- */
.patch-detail {
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(180deg, var(--c-panel), #13191f);
    border: 1px solid rgba(0,0,0,.35);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 0 16px rgba(0,119,255,.08);
}

.patch-cover {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1rem;
    border: 1px solid rgba(255,255,255,.06);
}

.patch-detail-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--c-fg);
    margin-bottom: .5rem;
}

.patch-detail-meta {
    display: flex;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 1rem;
    color: var(--c-muted);
    font-size: .85rem;
}

/* ---------- Contenu structuré ---------- */
.patch-body {
    color: var(--c-fg);
    font-size: .9rem;
    line-height: 1.6;
}

/* Section (H2) */
.patch-body h2,
.patch-section {
    font-size: 1.05rem;
    font-weight: 700;
    margin-top: 1.8rem;
    margin-bottom: .6rem;
    color: #c6b070;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Champion (H3) */
.patch-body h3,
.patch-champion {
    font-size: .95rem;
    font-weight: 700;
    margin-top: 1.2rem;
    margin-bottom: .4rem;
    color: var(--c-fg);
    padding-left: .8rem;
}

/* Compétence (H4) */
.patch-body h4,
.patch-body b,
.patch-skill {
    font-size: .88rem;
    font-weight: 600;
    margin-top: .8rem;
    margin-bottom: .3rem;
    color: var(--c-muted);
    padding-left: 1.6rem;
}

/* Texte */
.patch-text {
    font-size: .88rem;
    color: var(--c-fg);
    line-height: 1.5;
    margin-bottom: .8rem;
    /* padding-left: 2rem; */
}

/* Listes */
.patch-list,
.patch-body ul {
    list-style: none;
    margin: .4rem 0 1rem;
    padding-left: 2rem;
}
.patch-list li,
.patch-body li {
    position: relative;
    font-size: .88rem;
    line-height: 1.5;
    margin-bottom: .35rem;
    padding-left: 1rem; /* respecte l’indentation */
}
.patch-list li::before,
.patch-body li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #c6b070;
    font-weight: bold;
}

/* Images */
.patch-image-wrap {
    margin: 1rem 0;
    text-align: center;
}
.patch-image,
.patch-body img {
    max-width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    cursor: zoom-in;
    transition: transform .2s ease, box-shadow .2s ease;
}
.patch-image:hover,
.patch-body img:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(0,119,255,.4);
}

/* Image dans la modale (pas d’effet hover) */
.patch-modal-content {
    max-width: 95%;
    max-height: 95%;
    border-radius: 10px;
    cursor: default;              /* plus de zoom */
    transform: none !important;   /* neutralise le hover hérité */
    box-shadow: none !important;  /* idem pour l’ombre */
}

/* ---------- Lightbox ---------- */
.patch-modal {
    display: none; /* cachée au départ */
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0,0,0,.9);
    justify-content: center;
    align-items: center;
}
.patch-modal-content {
    max-width: 95%;
    max-height: 95%;
    border-radius: 10px;
}
.patch-modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
}

/* Patchs timeline */
.patch-timeline {
    display: flex;
    justify-content: center;
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto 2rem;
}

.patch-card-mini {
    flex: 1;
    background: linear-gradient(180deg, var(--c-panel), #13191f);
    border: 1px solid rgba(0,0,0,.35);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
}

.patch-card-mini .label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--c-muted);
    margin-bottom: .3rem;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.patch-card-mini .version {
    font-size: 1.4rem;
    font-weight: 700;
    color: #bf9378;;
    margin-bottom: .3rem;
}

.patch-card-mini .date {
    font-size: .9rem;
    color: var(--c-fg);
    opacity: .85;
}
.patch-badge-pbe {
    display: inline-block;
    margin-left: .5rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ff6b6b, #c2352b);
    box-shadow: 0 0 12px rgba(220,53,69,.45);
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* ---------- Pings ------------ */
#card_ping {
    background:var(--url);
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

/* ---------- Rank emblem ----------------------- */
.rank-crop{
    --size: 40px;   /* taille rendue */
    --zoom: 4;    /* 1.0 = pas de zoom ; 1.8–2.4 recommandé pour les emblems */
    position: relative;
    display: inline-block;
    width: var(--size);
    height: var(--size);
}
.rank-crop > img{
    position: absolute;
    inset: -50px;
    margin: auto;
    width: 180%;
    height: 100%;
    transform: scale(var(--zoom));
    transform-origin: 50% 50%;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.role-icon {
  width: 22px; height: 22px;
  object-fit: contain;
  margin-right: .4rem;
  vertical-align: -2px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

/* ---------- Live games --------------- */
.p-row.is-ours .player-name a {
    font-weight:700;
    color: #c6b070;
}
.player-info{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  min-width:0;
}
.p-row--blue .player-info{ align-items:flex-end; text-align:right; }
.p-row--red  .player-info{ align-items:flex-start; text-align:left; }
.player-name a{
  color:var(--c-fg);
  font-weight:600;
  text-decoration:none;
  display:block;
  max-width:280px;
}
.player-rank{
  display:flex; align-items:center; gap:.35rem;
  color:var(--c-muted); font-size:.85rem; margin-top:.15rem;
  white-space:nowrap; min-width:0;
}
.p-row--blue .player-rank{ justify-content:flex-end; }
.p-row--red  .player-rank{ justify-content:flex-start; }
.player-rank img{ width:16px; height:16px; flex:0 0 auto; }
.live-status{display:flex;align-items:center;gap:.5rem;color:var(--c-muted);font-weight:700}
.live-status i.ok{font-size:.6rem;color:#32d296;filter:drop-shadow(0 0 6px rgba(50,210,150,.6))}
.live-status i.ko{font-size:.6rem;color:#d23232;filter:drop-shadow(0 0 6px rgba(210, 50, 50, 0.6))}
.live-check{color:var(--c-muted);font-size:.8rem;opacity:.85}
.team-col { 
    position: relative; 
    background: rgba(255,255,255,.02); 
    border:1px solid rgba(0,119,255,.08); 
    border-radius:10px; 
    padding:8px; 
}
.team-col.team-red::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    width: 4px;
    left: 0px;
    border-radius: 8px;
}
.team-col.team-red .twitch-live {
    float: right;
    position: absolute;
    right: 15px;
}
.team-col.team-blue .twitch-live {
    float: left;
    position: absolute;
    left: 15px;
}
.team-col.team-blue::after{
    content:""; 
    position:absolute;
    top:8px; 
    bottom:8px; 
    width:4px; 
    right:0px; 
    border-radius:8px;
}
.team-col.team-red::before{
    background: linear-gradient(180deg,#ff6b6b,#c2352b); 
    box-shadow:0 0 10px rgba(255,70,70,.45);
}
.team-col.team-blue::after{ 
    background: linear-gradient(180deg,#4da3ff,#0057c2); 
    box-shadow:0 0 10px rgba(0,119,255,.45); 
}
.team-symmetric{
  display:grid;
  grid-template-columns: 1fr 24px 1fr; /* blue | VS | red */
  gap:14px;
  align-items:start;
}
.team-col{position:relative;background:rgba(255,255,255,.02);border:1px solid rgba(0,119,255,.08);border-radius:10px;padding:10px}
.team-divider{display:flex;align-items:center;justify-content:center;color:var(--c-muted);font-weight:700}
.team-symmetric .p-row{display:flex;align-items:center;gap:.75rem;padding:6px 8px;border-radius:8px}
.team-symmetric .p-row + .p-row{margin-top:6px}
.team-symmetric .p-row:hover{background:rgba(255,255,255,.04)}
.team-symmetric .champ-badge{--s:34px;width:var(--s);height:var(--s);border-radius:8px;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.team-symmetric .champ-badge img{width:100%;height:100%;object-fit:cover}

/* ---------- Ranked timer ------------- */
#countdown {
    width:250px;
}

.timer-card {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    padding: .8rem 1.2rem;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--c-panel), #13191f);
    border: 1px solid rgba(0,0,0,.35);
    box-shadow: 0 0 16px rgba(0,119,255,.15);
}

.timer-seg {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
}

.timer-seg span {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 6px rgba(0,119,255,.45);
}

.timer-seg small {
    font-size: .75rem;
    color: var(--c-muted);
    letter-spacing: 0.5px;
}

.timer-sep {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-muted);
}

/* ---------- Match history ------------ */
/* cellule joueur = support du trait */
.table-score td.player-cell{ position:relative; overflow:visible !important; }
.table-score td.player-cell::before{
    content:""; display:none; position:absolute; left:-10px; top:6px; bottom:6px;
    width:15px; border-radius:4px;
}
.row-self    td.player-cell::before{ display:block; background:#f59e0b; } /* vert */
.row-premade td.player-cell::before{ display:block; background:#6b1fc2; } /* orange */

.badge-kda{
    width:100px;
    display:inline-block; padding:2px 8px; border-radius:999px;
    background:#0f1523; border:1px solid rgba(255,255,255,.08);
    font-weight:600; font-size:.9rem; color:#cfd8ea;
}
.badge-kda.good{  border-color:rgba(25,135,84,.45);  color:#9be7c4; }  /* ≥4.0 */
.badge-kda.ok{    border-color:rgba(255,193,7,.45);  color:#ffd479; }  /* 2.0–3.9 */
.badge-kda.bad{   border-color:rgba(220,53,69,.45);  color:#f3a5a8; }  /* <2.0 */
.kp-chip{
    position:relative; display:inline-block; width:92px; height:18px;
    background:#0f1523; border:1px solid rgba(255,255,255,.08);
    border-radius:999px; overflow:hidden; text-align:center; font-size:.82rem;
}
.kp-chip::before{
    content:""; position:absolute; inset:0; width:calc(var(--kp,0) * 1%);
    background:linear-gradient(90deg,#1e90ff,#00d4ff); opacity:.35;
}
.kp-chip > span{ position:relative; z-index:1; color:#cfd8ea; }

.item-grid{
    --isize: 26px;
    display:inline-grid;
    grid-template-columns: repeat(7, var(--isize));
    gap: 4px;
    vertical-align:middle;
}
.item-slot{
    width:var(--isize); height:var(--isize);
    border-radius:4px;
    background:#0e1626;            /* “trou” quand vide */
    border:1px solid rgba(255,255,255,.08);
    overflow:hidden;               /* empêche tout débordement */
    display:block;
}
.item-slot img{
    width:100%; height:100%;
    display:block; border-radius:inherit;
    object-fit:cover;
}

.match-topline{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.stat-pills{
    display:flex; 
    flex-wrap:wrap; 
    gap:5px;
    height:10px;
}
.pill{
    background:#0f1523;
    border:1px solid rgba(255,255,255,.08);
    color:#cfd8ea;
    border-radius:999px;
    padding:4px 10px;
    font-weight:600;
    line-height:1;
    display:inline-flex; align-items:center;
}
.pill i{ font-size:.9em; opacity:.85; }
.pill.good{
    background:rgba(25,135,84,.15);
    border-color:rgba(25,135,84,.35);
    color:#8be0b7;
}
.pill.bad{
    background:rgba(220,53,69,.12);
    border-color:rgba(220,53,69,.35);
    color:#f3a5a8;
}
.pill.pill-soft{
    background:#0e1626;
    color:#a9b7d7;
}
@media (max-width: 576px){
  .match-topline{ gap:6px; }
  .stat-pills{ gap:6px; }
  .pill{ padding:3px 8px; font-size:.88rem; }
  .champ-badge{ --s:34px; }
}

.meter-sm{
    --val: 0; --max: 1;
    width: 100%; height: 8px;
    background: #121a2a;
    border:1px solid rgba(255,255,255,.08);
    border-radius: 999px; overflow: hidden;
}
.meter-sm > span{
    display:block; height:100%;
    width: calc(100% * (var(--val) / max(var(--max), 1)));
    background: linear-gradient(90deg, #0dcaf0, #0d6efd);
}
.meter-sm--tank > span{
    background: linear-gradient(90deg, #ff8a80, #dc3545);
}
.champ-badge{
    --s: 40px;
    position: relative;
    display: inline-block;
    width: var(--s);
    height: var(--s);
}
.champ-badge > img{
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.champ-badge .lvl{
    position: absolute;
    right: -6px;
    bottom: -6px;
    min-width: calc(var(--s) / 2.4);
    height:    calc(var(--s) / 2.4);
    padding: 0 4px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, #212631, #141a20);
    color: #fff;
    font-weight: 700;
    font-size: calc(var(--s) / 3.1);
    line-height: 1;
    border: 2px solid #0f1523;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,.45);
    z-index: 3;
    pointer-events: none;
}
.match-detail .match-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}
.match-detail .match-scroll table{
    min-width: 1024px;
}
.table-score th, .table-score td { white-space: nowrap; }
.table-score td:first-child { white-space: normal; overflow: visible !important; }
.table-score td:first-child { overflow: visible !important; }

.match-stack { display: flex; flex-direction: column; gap: 12px; }
.match-tag{
    background: #151c2b;
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.06);
}
.match-tag.match-win { box-shadow: inset 3px 0 0 0 rgba(40,167,69,.7); }
.match-tag.match-loss{ box-shadow: inset 3px 0 0 0 rgba(220,53,69,.7); }

.match-head{ background: transparent; border: 0; padding: 0; text-align: left; }
.match-head:focus{ outline: none; }

.mates-row { display:flex; gap:6px; flex-wrap: wrap; }
.mate-pill{
    display:inline-flex; align-items:center; gap:6px;
    background:#0f1523; border:1px solid rgba(255,255,255,.06);
    border-radius: 999px; padding:2px 8px;
    font-size: .8rem; color:#cfd8ea;
}
.mate-pill img{ width:16px;height:16px;border-radius:50%; }

.items-row{ display:flex; gap:6px; flex-wrap: wrap; }
.items-row img{ width:24px;height:24px;border-radius:6px; }
.items-row .slot{ width:24px;height:24px;border-radius:6px;background:#1a2237; }

.match-detail{ background:#0f1523; border:1px solid rgba(255,255,255,.06); border-radius:10px; }

.table-score{ width:100%; border-collapse:separate; border-spacing:0 6px; }
.table-score th{ font-weight:600; color:#cfd8ea; }
.table-score td, .table-score th{ padding:6px 8px; font-size:.9rem; }
.row-blue { background: rgba(0,123,255,.06); }
.row-red  { background: rgba(220,53,69,.06); }

@media (max-width: 576px){
  .items-row img, .items-row .slot { width:22px; height:22px; }
}

/* ---------- Espace progression LP ------------- */

:root{
  --qt-bg: rgba(10,16,30,.7);
  --qt-border: rgba(80,150,255,.25);
  --qt-thumb-from: #0f2540;  /* bleu */
  --qt-thumb-to:   #08468c;  /* cyan */
  --qt-text: #cfe3ff;
  --qt-text-dim: #3c4e70;
}
.queue-toggle{
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 150px;
    height: 50px;
    padding: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgb(19, 25, 32), rgba(12,18,32,.8));
    border: 1px solid rgb(19, 25, 31);
    box-shadow: 0 6px 22px rgb(19, 25, 32), inset 0 1px 0 rgb(33, 38, 49);
    backdrop-filter: blur(6px);
}
.queue-toggle .qt-thumb{
    position: absolute;
    z-index: 0;
    top: 5px;
    left: 5px;
    width: calc(47% - 0px);
    height: calc(100% - 8px);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--qt-thumb-from), var(--qt-thumb-to));
    box-shadow: 0 8px 20px rgb(19, 25, 31), inset 0 1px 0 rgba(255,255,255,.2);
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
}
.queue-toggle[data-q="flex"] .qt-thumb{
    transform: translateX(100%);
}
.queue-toggle .qt-option{
    position: relative;
    z-index: 1;
    appearance: none;
    background: transparent;
    border: 0;
    padding: .45rem 0;
    border-radius: 999px;
    color: var(--qt-text-dim);
    font-weight: 600;
    letter-spacing: .2px;
}
.queue-toggle .qt-option[aria-selected="true"]{
    color: #fff;
    text-shadow: 0 0 16px rgba(160,220,255,.5);
}
.queue-toggle .qt-option:focus-visible{
    outline: 0;
    box-shadow: 0 0 0 2px rgba(60,130,255,.5);
    border-radius: 999px;
}
@media (prefers-reduced-motion: reduce){
    .queue-toggle .qt-thumb{ transition: none; }
}

/* ---------- Tank bar ------------ */
.meter-wrap {
    max-width: 100%;
    flex: 0 0 auto;
    margin-left: 16px;
}
.meter{
    position: relative;
    width: 100%;
    height: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    overflow: hidden;
}
.meter-fill{
    position:absolute; inset:0 auto 0 0;
    width: calc(100% * var(--scale, 1));            /* var(--scale) = 0..1 */
    background: linear-gradient(90deg, #1e6fff, #00b2ff);
    transition: width .25s ease;
}
.meter-seg{ position:absolute; top:0; bottom:0; z-index:1; transition: width .25s ease; }
.meter-mit{
    left:0;
    width: calc(100% * var(--scale, 1) * (var(--mit, 50) / 100));
    background: linear-gradient(90deg, #26a0ff, #6ad0ff);
}
.meter-tak{
    left: calc(100% * var(--scale, 1) * (var(--mit, 50) / 100));
    width: calc(100% * var(--scale, 1) * (1 - (var(--mit, 50) / 100)));
    background: linear-gradient(90deg, #ff5f6d, #ffc371);
}
.meter-foot{
    display:flex; 
    justify-content:space-between;
    gap:.5rem;
    margin-top:.105rem;
    color: var(--bs-secondary-color, #9aa3b2);
    font-style: italic;
    font-size: .75rem;
    letter-spacing: 0.5px;
}

/* ---------- Champ list ---------- */
.champ-strip{
    background: linear-gradient(180deg, var(--c-panel), #11161c);
    border: 1px solid rgba(0,0,0,.35);
    border-radius: 16px;
}
.champ-track{
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 15px;
    -webkit-overflow-scrolling: touch;
}
.champ-track::-webkit-scrollbar{ height: 8px; }
.champ-track::-webkit-scrollbar-thumb{
    background: rgba(0,119,255,.35);
    border-radius: 8px;
}
.champ-track-inner{ 
    width: max-content;
    gap: 0.7rem;
    margin-top: 5px;
}
.champ-item{
    min-width: 80px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(0,119,255,.14);
    border-radius: 14px;
    padding: .6rem .65rem;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.champ-item:hover{
    transform: translateY(-2px);
    border-color: rgba(0,119,255,.28);
    box-shadow: 0 8px 22px rgba(0,0,0,.25);
}

.champ-icon{
    width: 90px; height: 90px;  /* 80 -> 64 pour caser plus serré */
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(0,119,255,.18);
}

.champ-meta .champ-name,
.champ-name{ color: var(--c-fg); line-height:1.15; max-width: 100px; }
.champ-sub{ color: var(--c-muted); }

.pill{
    width: 90px;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .76rem;
    white-space: nowrap;
}
.pill-black{
    color:#e8f3ff;
    background: linear-gradient(180deg, rgba(92, 92, 92, 0.25), rgba(0,119,255,.12));
    border: 1px solid rgba(95, 95, 95, 0.26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 2px rgba(0, 0, 0, 0.08);
}
.pill-red{
    color:#e8f3ff;
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.25), rgba(255, 0, 0, 0.12));
    border: 1px solid rgba(255, 120, 120, 0.26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 2px rgba(255, 0, 0, 0.08);
}
.pill-green{
    color:#e8f3ff;
    background: linear-gradient(180deg, rgba(51, 255, 0, 0.25), rgba(51, 255, 0, 0.12));
    border: 1px solid rgba(143, 255, 120, 0.26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 2px rgba(51, 255, 0, 0.08);
}
.pill-orange{
    color:#e8f3ff;
    background: linear-gradient(180deg, rgba(255, 136, 0, 0.25), rgba(255, 123, 0, 0.12));
    border: 1px solid rgba(255, 197, 120, 0.26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 2px rgba(255, 115, 0, 0.08);
}
.pill-blue{
    color:#e8f3ff;
    background: linear-gradient(180deg, rgba(0,119,255,.25), rgba(0,119,255,.12));
    border: 1px solid rgba(120,175,255,.26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 2px rgba(0,119,255,.08);
}
.pill-glass{
    color: var(--c-fg);
    background: linear-gradient(180deg, rgba(12,25,35,.35), rgba(12,25,35,.15));
    border: 1px solid rgba(120,175,255,.16);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pill-rank{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .6rem}
.pill-rank .rank-mini{width:18px;height:18px;object-fit:contain;filter:drop-shadow(0 0 2px rgba(0,0,0,.5))}

/* ---------- Rank badge ---------- */
.rank-badge {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;   /* ajuste taille du chiffre */
    color: var(--c-muted, #9fb0bf);
}

.rank-badge i {
    font-size: 1.1rem;   /* taille uniforme de l’icône */
    line-height: 1;
}

.trophy-gold {
    background: linear-gradient(180deg,#ffd700,#d4af37);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.trophy-silver {
    background: linear-gradient(180deg,#c0c0c0,#8d9093);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.trophy-bronze {
    background: linear-gradient(180deg,#cd7f32,#8a4f24);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- Card panel ---------- */
.leaderboard-card {
    background: linear-gradient(180deg, var(--c-panel), #13191f);
    border: 1px solid rgba(0,0,0,.35);
    border-radius: 10px;
    padding-bottom: 10px;
    height: 100%;
}

.lb-title {
    position: relative;
    display: inline-block;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .9rem;
    color: var(--c-fg);
    opacity: .95;
}

.lb-title::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-10px;
    height:3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--c-blue-2), transparent);
    box-shadow: 0 0 18px rgba(0,119,255,.45);
}

@media (max-width: 576px){
    .lb-title::after{ opacity:.8; }
}

/* ---------- Toasts ---------- */
.app-toast-zone {
    z-index: 1090;
    width: min(420px, calc(100vw - 1rem));
    pointer-events: none;
}
.app-toast {
    width: 100%;
    color: #e8f3ff;
    background: rgba(16, 24, 39, .96);
    border: 1px solid rgba(120,175,255,.18);
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(0,0,0,.32);
    overflow: hidden;
    pointer-events: auto;
}
.app-toast::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, #21b67a, #7bd9b1);
}
.app-toast-danger::before {
    background: linear-gradient(90deg, #ff5f68, #ffb15f);
}
.app-toast-warning::before {
    background: linear-gradient(90deg, #ffc107, #ffe08a);
}
.app-toast-info::before {
    background: linear-gradient(90deg, #78afff, #9fd2ff);
}
.app-toast .toast-body {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .82rem .9rem;
    font-size: .94rem;
    font-weight: 750;
}
.app-toast .toast-body > i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    color: #9df0cd;
    background: rgba(33,182,122,.12);
    border: 1px solid rgba(33,182,122,.24);
    border-radius: 8px;
}
.app-toast-danger .toast-body > i {
    color: #ffc4c8;
    background: rgba(255,95,104,.12);
    border-color: rgba(255,95,104,.26);
}
.app-toast-warning .toast-body > i {
    color: #ffe8a8;
    background: rgba(255,193,7,.12);
    border-color: rgba(255,193,7,.28);
}
.app-toast-info .toast-body > i {
    color: #cfe0ff;
    background: rgba(120,175,255,.12);
    border-color: rgba(120,175,255,.28);
}
.app-toast .toast-body span {
    min-width: 0;
}

/* ---------- Badge moderne ---------- */
.lv-badge{
    --bg: 12, 25, 35;         /* base glass bg (rgb) */
    --glow: 0, 119, 255;      /* glow bleu */
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.22rem .5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .78rem;
    color: var(--c-fg);
    background: linear-gradient(
        180deg,
        rgba(var(--bg), .35),
        rgba(var(--bg), .15)
    );
    border: 1px solid rgba(120, 175, 255, .18);
    backdrop-filter: blur(6px);
    white-space: nowrap;
    -webkit-backdrop-filter: blur(6px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 0 2px rgba(0,119,255,.08),
        0 6px 16px rgba(var(--glow), .16);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lv-badge:hover{
    transform: translateY(-1px);
    border-color: rgba(120,175,255,.28);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 0 2px rgba(0,119,255,.16),
        0 10px 24px rgba(var(--glow), .22);
}
.lv-dot{
    width:.55rem; height:.55rem; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, var(--c-blue-1), var(--c-blue-3));
    box-shadow: 0 0 8px rgba(0,119,255,.55);
}

/* ---------- Navbar ---------- */
.nav-wrap {
    background: #121c28;;
    border-bottom: 1px solid #2b313a;
}
.navbar-brand {
    margin-left: 15px;
    font-weight: 700;
    letter-spacing: .2px;
}
.main-nav .nav-link {
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .6px;
    color: #cfd8dc;
    padding: .75rem .9rem;
    position: relative;
}
.main-nav .nav-link:hover, .main-nav .nav-link.active {
    color: #fff;
}
.main-nav .league-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .28rem;
}
.main-nav .league-nav-toggle .nav-label {
    padding-bottom: 0;
    position: static;
}
.main-nav .league-nav-toggle.active .nav-label::after {
    display: none;
}
.main-nav .league-nav-toggle.active::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: calc(100% - 1.5rem);
    height: 3px;
    transform: translateX(-50%);
    background: #026de7;
    border-radius: 2px 2px 0 0;
}
.main-nav .league-nav-toggle::after {
    margin-left: 0;
    transform: translateY(1px);
}
.main-nav .league-nav-menu {
    min-width: 230px;
    margin-top: .35rem;
    padding: .45rem;
    background: linear-gradient(180deg, #172232, #101827);
    border: 1px solid rgba(120,175,255,.18);
    border-radius: 10px;
    box-shadow: 0 16px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.main-nav .league-nav-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .78rem;
    padding: .58rem .66rem;
    color: #cfd8dc;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.main-nav .league-nav-menu .dropdown-item i {
    width: 1.12rem;
    color: #78afff;
    font-size: .92rem;
    text-align: center;
}
.main-nav .league-nav-menu .dropdown-item:hover,
.main-nav .league-nav-menu .dropdown-item:focus {
    color: #fff;
    background: rgba(120,175,255,.08);
}
.main-nav .league-nav-menu .dropdown-item.active {
    color: #fff;
    background: rgba(0,119,255,.16);
}
.main-nav .league-nav-menu .dropdown-item.active i {
    color: #a9c9ff;
}
.live-badge-nav {
    height: 22px;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .48rem;
    color: #d9f7eb;
    background: rgba(33,182,122,.12);
    border: 1px solid rgba(33,182,122,.3);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    font-size: .66rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    transform: translateY(-1px);
}
.nav-auth-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    padding: .42rem .78rem;
    color: #dce8f7;
    text-decoration: none;
    border: 1px solid rgba(120,175,255,.18);
    border-radius: 999px;
    background: linear-gradient(180deg, #172232, #101827);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
    transition: transform .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.nav-auth-btn i {
    font-size: .95rem;
    line-height: 1;
}
.nav-auth-btn:hover {
    color: #fff;
    transform: translateY(-1px);
    border-color: rgba(41,163,255,.4);
    box-shadow: 0 8px 20px rgba(0,119,255,.14), inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-auth-btn-login {
    color: #fff;
    background: linear-gradient(135deg, #0f2540, #08468c);
    border-color: rgba(41,163,255,.34);
}
.nav-auth-btn-logout:hover {
    border-color: rgba(218,78,78,.38);
    background: linear-gradient(180deg, rgba(80,30,36,.72), #101827);
    box-shadow: 0 8px 20px rgba(218,78,78,.12), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---------- Auth ---------- */
.auth-shell {
    min-height: calc(100vh - 190px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}
.auth-card {
    width: min(100%, 430px);
    padding: 1.4rem;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--c-panel), #13191f);
    border: 1px solid rgba(0,0,0,.35);
    box-shadow: 0 16px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
}
.auth-card-wide {
    width: min(100%, 500px);
}
.auth-brand {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.35rem;
}
.auth-logo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(0,119,255,.22), 0 8px 22px rgba(0,0,0,.25);
}
.auth-kicker {
    color: var(--c-muted);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .16em;
}
.auth-brand h1 {
    margin: 0;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.auth-form .form-label {
    color: #cfd8ea;
    font-size: .86rem;
    font-weight: 700;
    margin-bottom: .35rem;
}
.auth-input {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    border-radius: 8px;
    background: #101827;
    border: 1px solid rgba(120,175,255,.14);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-input:focus-within {
    border-color: rgba(0,119,255,.42);
    box-shadow: 0 0 0 3px rgba(0,119,255,.12);
}
.auth-input i,
.auth-input span {
    color: var(--c-muted);
    text-align: center;
    font-weight: 800;
}
.auth-input .form-control {
    height: 42px;
    color: #fff;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-left: 0;
}
.auth-input .form-control:focus {
    background: transparent;
    color: #fff;
    box-shadow: none;
}
.auth-riot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 8px;
}
.auth-tag-input {
    grid-template-columns: 30px 1fr;
}
.auth-help {
    margin-top: .45rem;
    color: var(--c-muted);
    font-size: .78rem;
}
.auth-check {
    color: #cfd8ea;
    font-size: .88rem;
}
.auth-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 42px;
    font-weight: 800;
    border-radius: 8px;
}
.auth-alt {
    margin-top: 1.15rem;
    text-align: center;
}
.auth-alt a {
    color: #9ecbff;
    text-decoration: none;
    font-weight: 700;
}
.auth-alt a:hover {
    color: #fff;
}
@media (max-width: 576px) {
    .auth-shell {
        min-height: 0;
        padding: 1rem 0;
    }
    .auth-card,
    .auth-card-wide {
        width: 100%;
        padding: 1rem;
    }
    .auth-riot-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Achievements ---------- */
.achievements-page {
    color: var(--c-fg);
}
.achievement-profile-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(0,119,255,.22), 0 8px 22px rgba(0,0,0,.25);
}
.achievement-account-switch {
    width: min(100%, 380px);
}
.achievement-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.achievement-stats-link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .55rem 1rem;
    color: #fff;
    border-color: rgba(41,163,255,.36);
    border-radius: 10px;
    background: linear-gradient(135deg, #0f2540, #08468c);
    box-shadow: 0 10px 24px rgba(0,119,255,.15), inset 0 1px 0 rgba(255,255,255,.08);
    font-size: .82rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.achievement-stats-link i {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.achievement-stats-link:hover,
.achievement-stats-link:focus {
    color: #fff;
    transform: translateY(-1px);
    border-color: rgba(120,175,255,.52);
    background: linear-gradient(135deg, #13335a, #0a56aa);
    box-shadow: 0 14px 30px rgba(0,119,255,.22), inset 0 1px 0 rgba(255,255,255,.1);
}
.achievement-summary-card {
    display: block;
    height: 100%;
    padding: 1rem;
    color: inherit;
    text-decoration: none;
    background: linear-gradient(180deg, #182131, #13191f);
    border: 1px solid rgba(120,175,255,.14);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.achievement-summary-card:hover,
.achievement-summary-card.is-active {
    color: inherit;
    transform: translateY(-1px);
    border-color: rgba(0,119,255,.35);
    box-shadow: 0 8px 24px rgba(0,119,255,.13), inset 0 1px 0 rgba(255,255,255,.06);
}
.achievement-summary-card.is-active {
    background: linear-gradient(180deg, #1b2940, #141b25);
}
.achievement-summary-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    margin-bottom: .9rem;
}
.achievement-summary-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d7e8ff;
    background: #101827;
    border: 1px solid rgba(120,175,255,.16);
}
.achievement-summary-title {
    color: #fff;
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.achievement-summary-sub {
    color: var(--c-muted);
    font-size: .82rem;
    margin-top: .25rem;
}
.achievement-summary-percent {
    color: #fff;
    font-weight: 800;
    font-size: 1.25rem;
    white-space: nowrap;
}
.achievement-progress {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #101827;
    border: 1px solid rgba(255,255,255,.08);
}
.achievement-progress > span {
    display: block;
    height: 100%;
    width: var(--p, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, #0d6efd, #21b67a);
    box-shadow: 0 0 12px rgba(0,119,255,.35);
}
.achievement-form .form-label {
    color: #cfd8ea;
    font-weight: 600;
    font-size: .86rem;
}
.achievement-champion-select {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 8px;
    align-items: center;
}
.achievement-champion-preview {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #8795aa;
    background: #101827;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 0 0 2px rgba(255,255,255,.04);
}
.achievement-champion-preview img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}
.achievement-champion-preview i {
    display: none;
    font-size: 1rem;
}
.achievement-champion-select.is-empty .achievement-champion-preview i {
    display: block;
}
.achievement-switch {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: 3rem;
}
.achievement-optional-range {
    display: grid;
    gap: .35rem;
}
.achievement-win-fields {
    padding: .95rem;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(0,119,255,.12);
}
.achievement-difficulty-group,
.achievement-placement-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.achievement-placement-group {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.achievement-difficulty-group .btn,
.achievement-placement-group .btn {
    font-size: .84rem;
    font-weight: 700;
    padding: .45rem .3rem;
}
.achievement-placement-group .btn {
    font-size: .78rem;
    padding-left: .18rem;
    padding-right: .18rem;
    white-space: nowrap;
}
.achievement-difficulty-option {
    --difficulty-rgb: 120, 175, 255;
    --difficulty-color: #cfd8ea;
    color: #dce8f7;
    border-color: rgba(var(--difficulty-rgb), .22);
    background: rgba(var(--difficulty-rgb), .08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.achievement-difficulty-option:hover {
    color: #fff;
    border-color: rgba(var(--difficulty-rgb), .38);
    background: rgba(var(--difficulty-rgb), .13);
}
.achievement-difficulty-option-easy {
    --difficulty-rgb: 33, 182, 122;
}
.achievement-difficulty-option-medium {
    --difficulty-rgb: 238, 164, 64;
}
.achievement-difficulty-option-hard {
    --difficulty-rgb: 218, 78, 78;
}
.achievement-difficulty-group .btn-check:checked + .achievement-difficulty-option {
    color: #fff;
    border-color: rgba(var(--difficulty-rgb), .48);
    background: linear-gradient(180deg, rgba(var(--difficulty-rgb), .24), rgba(var(--difficulty-rgb), .12));
    box-shadow: 0 8px 18px rgba(var(--difficulty-rgb), .12), inset 0 1px 0 rgba(255,255,255,.08);
}
.achievement-placement-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.achievement-placement-empty i {
    font-size: .92rem;
    line-height: 1;
}
.achievement-save-btn {
    color: #dce8f7;
    border: 1px solid rgba(120,175,255,.24);
    background: linear-gradient(180deg, #1a2839, #131d2b);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    font-weight: 800;
}
.achievement-save-btn:hover,
.achievement-save-btn:focus {
    color: #fff;
    border-color: rgba(120,175,255,.4);
    background: linear-gradient(180deg, #20334a, #16253a);
    box-shadow: 0 8px 20px rgba(0,119,255,.12), inset 0 1px 0 rgba(255,255,255,.07);
}
.achievement-empty {
    width: 100%;
    padding: 1.4rem;
    text-align: center;
    color: var(--c-muted);
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
}
.achievement-complete-state {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    text-align: center;
    padding: 2rem 1rem;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(33,182,122,.08), rgba(255,255,255,.025));
    border: 1px solid rgba(33,182,122,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.achievement-complete-trophy {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffe28a;
    background: rgba(255,205,77,.1);
    border: 1px solid rgba(255,205,77,.24);
    box-shadow: 0 16px 35px rgba(0,0,0,.28), 0 0 24px rgba(255,205,77,.12);
    font-size: 2rem;
}
.achievement-complete-title {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
}
.achievement-complete-copy {
    color: #dce6f7;
    font-weight: 600;
}
.achievement-complete-sub {
    color: var(--c-muted);
    font-size: .9rem;
}
.achievement-mode-indicators {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 1.35rem 0 1.45rem;
}
.achievement-mode-indicator {
    --indicator: #78afff;
    --indicator-rgb: 120, 175, 255;
    position: relative;
    overflow: hidden;
    padding: .95rem;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(var(--indicator-rgb), .08), rgba(255,255,255,.025));
    border: 1px solid rgba(var(--indicator-rgb), .2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.achievement-mode-indicator::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--indicator);
    box-shadow: 0 0 18px rgba(var(--indicator-rgb), .38);
}
.achievement-mode-indicator-winrate {
    --indicator: #21b67a;
    --indicator-rgb: 33, 182, 122;
}
.achievement-mode-indicator-fun {
    --indicator: #ffd166;
    --indicator-rgb: 255, 209, 102;
}
.achievement-mode-indicator-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
}
.achievement-mode-indicator-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--indicator);
    background: rgba(var(--indicator-rgb), .1);
    border: 1px solid rgba(var(--indicator-rgb), .25);
    font-size: 1.15rem;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.achievement-mode-indicator-label {
    color: #fff;
    font-size: .9rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.1;
}
.achievement-mode-indicator-sub {
    color: var(--c-muted);
    font-size: .78rem;
    margin-top: .25rem;
}
.achievement-mode-indicator-value {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 850;
    white-space: nowrap;
    text-shadow: 0 0 16px rgba(var(--indicator-rgb), .18);
}
.achievement-mode-indicator-progress {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #101827;
    border: 1px solid rgba(255,255,255,.08);
    margin-top: .85rem;
}
.achievement-mode-indicator-progress > span {
    display: block;
    height: 100%;
    width: var(--p, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(var(--indicator-rgb), .72), var(--indicator));
    box-shadow: 0 0 14px rgba(var(--indicator-rgb), .28);
}
.achievement-arena-medals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: .75rem 0 1.75rem;
}
.achievement-arena-medal {
    --medal: #dce6f7;
    --medal-rgb: 220, 230, 247;
    position: relative;
    overflow: hidden;
    padding: .95rem;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(var(--medal-rgb), .08), rgba(255,255,255,.025));
    border: 1px solid rgba(var(--medal-rgb), .22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.achievement-arena-medal::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--medal);
    box-shadow: 0 0 18px rgba(var(--medal-rgb), .45);
}
.achievement-arena-medal-gold {
    --medal: #ffd166;
    --medal-rgb: 255, 209, 102;
}
.achievement-arena-medal-silver {
    --medal: #dce6f7;
    --medal-rgb: 220, 230, 247;
}
.achievement-arena-medal-bronze {
    --medal: #d7915a;
    --medal-rgb: 215, 145, 90;
}
.achievement-arena-medal-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    margin-bottom: .85rem;
}
.achievement-arena-medal-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--medal);
    background: rgba(var(--medal-rgb), .1);
    border: 1px solid rgba(var(--medal-rgb), .25);
    font-size: 1.15rem;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.achievement-arena-medal-label {
    color: #fff;
    font-size: .9rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.1;
}
.achievement-arena-medal-sub {
    color: var(--c-muted);
    font-size: .78rem;
    margin-top: .25rem;
}
.achievement-arena-medal-percent {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 850;
    white-space: nowrap;
    text-shadow: 0 0 16px rgba(var(--medal-rgb), .18);
}
.achievement-arena-medal-progress {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #101827;
    border: 1px solid rgba(255,255,255,.08);
}
.achievement-arena-medal-progress > span {
    display: block;
    height: 100%;
    width: var(--p, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(var(--medal-rgb), .72), var(--medal));
    box-shadow: 0 0 14px rgba(var(--medal-rgb), .28);
}
.achievement-stats-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #a9c9ff;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .35rem;
}
.achievement-stats-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.achievement-stats-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(96px, 1fr));
    gap: 5px;
    padding: 5px;
    border-radius: 10px;
    background: #101827;
    border: 1px solid rgba(255,255,255,.08);
}
.achievement-stats-mode-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 34px;
    padding: .35rem .7rem;
    color: var(--c-muted);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 800;
    font-size: .84rem;
    white-space: nowrap;
}
.achievement-stats-mode-switch a.active {
    color: #fff;
    background: linear-gradient(135deg, #0f2540, #08468c);
    box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.achievement-stats-back {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    padding: .45rem .85rem;
    color: #dce8f7;
    text-decoration: none;
    border-color: rgba(120,175,255,.2);
    border-radius: 10px;
    background: linear-gradient(180deg, #172232, #101827);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}
.achievement-stats-back:hover,
.achievement-stats-back:focus {
    color: #fff;
    transform: translateY(-1px);
    border-color: rgba(120,175,255,.38);
    background: linear-gradient(180deg, #1d2d42, #111c2c);
    box-shadow: 0 8px 20px rgba(0,119,255,.12), inset 0 1px 0 rgba(255,255,255,.06);
}
.achievement-stats-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}
.achievement-stat-kpi {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: .8rem;
    min-height: 86px;
    padding: .95rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #182131, #13191f);
    border: 1px solid rgba(120,175,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.achievement-stat-kpi-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #d7e8ff;
    background: #101827;
    border: 1px solid rgba(120,175,255,.16);
    border-radius: 10px;
}
.achievement-stat-kpi-value {
    color: #fff;
    font-size: 1.32rem;
    font-weight: 850;
    line-height: 1.05;
}
.achievement-stat-kpi-label,
.achievement-stat-count,
.achievement-stat-sub,
.achievement-stat-note {
    color: var(--c-muted);
    font-size: .8rem;
}
.achievement-stat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 26px;
    padding: .25rem .62rem;
    border-radius: 999px;
    background: #101827;
    border: 1px solid rgba(255,255,255,.08);
    font-weight: 750;
    white-space: nowrap;
}
.achievement-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.achievement-stats-widget .card-body {
    padding: 1.1rem;
}
.achievement-stat-widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1rem;
}
.achievement-player-stat-list,
.achievement-stat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.achievement-player-stat-row,
.achievement-stat-row {
    display: grid;
    align-items: center;
    gap: 12px;
    padding: .72rem .85rem;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(0,119,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.achievement-player-stat-row {
    grid-template-columns: 42px minmax(220px, 1.15fr) minmax(170px, auto) minmax(220px, .8fr) 34px;
}
.achievement-stat-row {
    grid-template-columns: 34px 42px minmax(0, 1fr) auto;
}
.achievement-stats-compact-grid .achievement-stat-row {
    min-height: 70px;
}
.achievement-stats-compact-grid .achievement-stat-main {
    display: grid;
    gap: .18rem;
}
.achievement-stats-compact-grid .achievement-stat-sub {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.achievement-stat-subline {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}
.achievement-stat-subline > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.achievement-stat-contributor {
    flex: 0 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .26rem;
    padding: .12rem .42rem;
    color: #ffd7d7;
    background: rgba(218,78,78,.1);
    border: 1px solid rgba(218,78,78,.24);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.15;
}
.achievement-stat-contributor > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.achievement-stat-contributor strong {
    color: #fff;
    font-weight: 850;
}
.achievement-player-rank,
.achievement-stat-rank {
    color: #7f96b8;
    font-weight: 850;
    text-align: center;
}
.achievement-stat-icon,
.achievement-hardest-chip img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}
.achievement-stat-title {
    color: #fff;
    font-weight: 800;
}
.achievement-stat-progress {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #101827;
    border: 1px solid rgba(255,255,255,.08);
}
.achievement-stat-progress > span {
    display: block;
    height: 100%;
    width: var(--p, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, #0d6efd, #21b67a);
    box-shadow: 0 0 12px rgba(0,119,255,.35);
}
.achievement-player-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(76px, 1fr));
    gap: 8px;
}
.achievement-player-metrics > div {
    padding: .5rem .65rem;
    border-radius: 8px;
    background: #101827;
    border: 1px solid rgba(255,255,255,.07);
    text-align: center;
}
.achievement-player-metrics strong,
.achievement-player-metrics span,
.achievement-hardest-chip strong,
.achievement-hardest-chip span {
    display: block;
}
.achievement-player-metrics strong {
    color: #fff;
    font-size: 1rem;
    line-height: 1.05;
}
.achievement-player-metrics span,
.achievement-hardest-chip span {
    color: var(--c-muted);
    font-size: .76rem;
}
.achievement-hardest-chip {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    min-width: 0;
}
.achievement-hardest-chip strong {
    color: #dce6f7;
    font-size: .78rem;
    line-height: 1.1;
}
.achievement-player-link {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.achievement-stat-value {
    min-width: 74px;
    color: #fff;
    font-weight: 850;
    font-size: 1rem;
    text-align: center;
    white-space: nowrap;
}
.achievement-stat-note {
    margin-top: .12rem;
}
.achievement-stat-empty {
    padding: 1.1rem;
    color: var(--c-muted);
    text-align: center;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
}
.achievement-search {
    position: relative;
    width: min(100%, 300px);
}
.achievement-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-muted);
    pointer-events: none;
}
.achievement-search .form-control {
    padding-left: 2.15rem;
}
.achievement-list-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.achievement-status-filter {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: #101827;
    border: 1px solid rgba(255,255,255,.08);
}
.achievement-status-filter button {
    border: 0;
    border-radius: 999px;
    padding: .42rem .8rem;
    color: var(--c-muted);
    background: transparent;
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}
.achievement-status-filter button.active {
    color: #fff;
    background: linear-gradient(135deg, #0f2540, #08468c);
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
.achievement-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.achievement-champion-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) minmax(220px, 1fr) minmax(120px, auto);
    align-items: center;
    gap: 14px;
    padding: .72rem .85rem;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(0,119,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.achievement-champion-row:hover {
    background: rgba(255,255,255,.035);
    border-color: rgba(0,119,255,.22);
}
.achievement-champion-row.is-complete {
    border-color: rgba(33,182,122,.35);
    box-shadow: inset 3px 0 0 rgba(33,182,122,.75), inset 0 1px 0 rgba(255,255,255,.04);
}
.achievement-row-main {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}
.achievement-row-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    margin-bottom: .35rem;
}
.achievement-row-details {
    min-width: 0;
}
.achievement-row-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
}
.achievement-attempts {
    min-width: 76px;
    text-align: right;
}
.achievement-attempts strong {
    display: block;
    color: #fff;
    line-height: 1;
}
.achievement-attempts span {
    color: var(--c-muted);
    font-size: .75rem;
}
.achievement-champion-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}
.achievement-champion-name {
    color: #fff;
    font-weight: 700;
    min-width: 0;
}
.achievement-complete-icon {
    color: #21b67a;
    filter: drop-shadow(0 0 8px rgba(33,182,122,.45));
}
.achievement-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.achievement-card-meta .pill {
    width: auto;
    min-width: max-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    padding: .26rem .62rem;
}
.achievement-difficulty-pill {
    color: #eef5ff;
    border: 1px solid rgba(255,255,255,.13);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.achievement-difficulty-easy {
    background: rgba(33,182,122,.13);
    border-color: rgba(33,182,122,.28);
}
.achievement-difficulty-medium {
    background: rgba(238,164,64,.14);
    border-color: rgba(238,164,64,.3);
}
.achievement-difficulty-hard {
    background: rgba(218,78,78,.14);
    border-color: rgba(218,78,78,.3);
}
.achievement-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    color: var(--c-muted);
    font-size: .82rem;
}
.achievement-comment {
    color: #cfd8ea;
    font-size: .84rem;
    padding: .45rem .6rem;
    border-radius: 8px;
    background: #101827;
    border: 1px solid rgba(255,255,255,.06);
}
.achievement-card-actions {
    display: flex;
    gap: 6px;
}
.achievement-card-actions .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.min-w-0 {
    min-width: 0;
}
@media (max-width: 992px) {
    .achievement-mode-indicators,
    .achievement-arena-medals {
        grid-template-columns: 1fr;
    }
    .achievement-stats-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .achievement-stats-grid {
        grid-template-columns: 1fr;
    }
    .achievement-player-stat-row {
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: start;
    }
    .achievement-player-metrics,
    .achievement-hardest-chip {
        grid-column: 2;
    }
    .achievement-player-link {
        grid-column: 2;
        justify-self: start;
    }
    .achievement-champion-row {
        grid-template-columns: 1fr;
        align-items: start;
        gap: .65rem;
    }
    .achievement-row-side {
        justify-content: space-between;
        width: 100%;
    }
    .achievement-attempts {
        text-align: left;
    }
}
@media (max-width: 576px) {
    .achievement-header-actions,
    .achievement-stats-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }
    .achievement-account-switch,
    .achievement-search {
        width: 100%;
    }
    .achievement-stats-link,
    .achievement-stats-back {
        width: 100%;
    }
    .achievement-stats-kpis {
        grid-template-columns: 1fr;
    }
    .achievement-stats-mode-switch {
        width: 100%;
    }
    .achievement-stat-row {
        grid-template-columns: 28px 38px minmax(0, 1fr);
    }
    .achievement-stat-value {
        grid-column: 3;
        justify-self: start;
    }
    .achievement-summary-head {
        grid-template-columns: 36px minmax(0, 1fr);
    }
    .achievement-summary-icon {
        width: 36px;
        height: 36px;
    }
    .achievement-summary-percent {
        grid-column: 1 / -1;
        font-size: 1.05rem;
    }
    .achievement-list-tools {
        align-items: stretch;
        flex-direction: column;
    }
    .achievement-status-filter {
        grid-template-columns: repeat(3, 1fr);
    }
    .achievement-status-filter button {
        padding-left: .55rem;
        padding-right: .55rem;
    }
}

/* ------------ Media Queries -------------- */
@media (min-width: 1px) {
    .hidden_if_less_than_320 {
        display: none;
    }

    .meter-wrap {
        width: 90px;
    }
}

@media (min-width: 320px) {
    .meter-wrap {
        width: 90px;
    }
}

@media (min-width: 400px) {
    .hidden_if_less_than_320 {
        display: block;
    }

    .meter-wrap {
        width: 130px;
    }
}

@media (min-width: 480px) {
    .meter-wrap {
        width: 160px;
    }
}

@media (min-width: 576px) {
    .meter-wrap {
        width: 200px;
    }
}

@media (min-width: 768px) {
    .meter-wrap {
        width: 350px;
    }
}

@media (min-width: 992px) {
    .meter-wrap {
        width: 200px;
    }
}

@media (min-width: 1200px) {
    .meter-wrap {
        width: 250px;
    }
}

@media (min-width: 1400px) {
    .meter-wrap {
        width: 350px;
    }
}

@media (max-width: 768px) {
    .team-rank-avg {
        position: initial;
        width: 100%;
        margin-bottom:10px;
    }

    /* En-tête plus compacte */
    .live-top { gap: .5rem; flex-wrap: wrap; }
    .live-top .pill { padding: .15rem .55rem; }
    .live-elapsed { font-size: .95rem; }

    /* Grille -> stack (1 seule colonne) */
    .team-symmetric{
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .team-divider{ display: none; } /* plus de VS au centre */

    /* Colonnes plus denses + rails latéraux conservés (gauche) */
    .team-col { padding: 8px; }
    .team-col.team-blue::after{ left: 0; right: auto; width: 3px; }
    .team-col.team-red::before{ left: 0; width: 3px; }
    .team-col.team-red{ 
        margin-left:10px!important;
    }
    .team-col.team-blue{ 
        margin-right:10px!important;
    }

    .team-col.team-red .twitch-live {
        float: right;
        position: absolute;
        right: 15px;
    }

    .team-col.team-blue .twitch-live {
        float: right;
        position: absolute;
        right: 15px;
        left: unset;
    }

    /* Lignes joueurs : icône à GAUCHE pour les deux équipes */
    .team-symmetric .p-row { 
        padding: 8px;
        gap: .6rem;
        justify-content: start !important;
    }
    .team-symmetric .champ-badge{ --s: 30px; }  /* 34 -> 30 */
    .p-row--blue { justify-content: flex-start; text-align: left; }
    .p-row--blue .player-info{ align-items: flex-start; text-align: left; }
    .p-row--blue .champ-badge{ order: 0; }      /* icône d’abord */
    .p-row--blue .player-info{ order: 1; }

    /* Texte : mieux gérer les longueurs */
    .player-name a{
        max-width: 100%;
        font-size: .98rem;
    }
    .player-rank{
        font-size: .8rem;
        max-width: 100%;
    }
}

/* Petits mobiles (iPhone SE & co) */
@media (max-width: 420px) {
    .live-top { font-size: .95rem; }
    .team-symmetric .champ-badge{ --s: 26px; }
    .team-symmetric .p-row{ padding: 6px; }

    /* Rang très compact : on garde le texte, on masque le blason si trop serré */
    .player-rank img{ display: none; }
    .player-name a{ font-size: .95rem; }
}

/* Très étroit (sécurise les ellipses) */
@media (max-width: 340px) {
    .player-name a, .player-rank{
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
}

/* ---------- Quizz ------------- */
.quizz-page {
    --quiz-panel: #182131;
    --quiz-panel-soft: #101827;
    --quiz-border: rgba(120,175,255,.14);
    color: var(--c-fg);
}
.quizz-page .leaderboard-card {
    height: auto;
}
.quizz-room-layout {
    align-items: start;
}
.quizz-player-head {
    align-items: flex-start;
}
.quizz-player-heading {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
}
.quizz-player-head-actions {
    margin-left: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px;
}
.quizz-player-identity {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    margin-top: .38rem;
    color: var(--c-muted);
    font-size: .84rem;
    font-weight: 750;
}
.quizz-player-identity i {
    color: #a9c9ff;
}
.quizz-player-phase {
    width: 330px;
    flex: 0 1 330px;
    padding: .72rem .82rem;
    border-radius: 10px;
    color: #dce8f7;
    background: linear-gradient(180deg, #1a2839, #131d2b);
    border: 1px solid rgba(120,175,255,.22);
    box-shadow: inset 3px 0 0 rgba(120,175,255,.55);
}
.quizz-player-phase-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
}
.quizz-player-phase-top > span:first-child,
.quizz-player-phase small {
    display: block;
    color: var(--c-muted);
    font-size: .74rem;
    font-weight: 850;
    line-height: 1.25;
}
.quizz-player-phase-top > span:first-child {
    letter-spacing: .08em;
    text-transform: uppercase;
}
.quizz-player-phase strong {
    display: block;
    margin-top: .16rem;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 950;
    line-height: 1.15;
}
.quizz-player-phase small {
    margin-top: .22rem;
    font-weight: 700;
}
.quizz-anticheat-badge {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    flex: 0 0 auto;
    padding: .24rem .42rem;
    color: #ffd98a;
    background: rgba(255,193,7,.08);
    border: 1px solid rgba(255,193,7,.22);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}
.quizz-anticheat-badge i {
    font-size: .78rem;
}
.quizz-owner-statusline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .38rem;
}
.quizz-player-phase[data-phase="playing"] {
    border-color: rgba(33,182,122,.28);
    box-shadow: inset 3px 0 0 rgba(33,182,122,.68);
}
.quizz-player-phase[data-phase="preparing"] {
    border-color: rgba(120,175,255,.3);
    box-shadow: inset 3px 0 0 rgba(120,175,255,.68);
}
.quizz-player-phase[data-phase="reviewing"],
.quizz-player-phase[data-phase="revealed"] {
    border-color: rgba(255,193,7,.28);
    box-shadow: inset 3px 0 0 rgba(255,193,7,.55);
}
.quizz-room-card {
    height: auto;
}
.quizz-owner-actions .btn:disabled,
.quizz-owner-actions .btn.disabled {
    cursor: not-allowed;
    pointer-events: auto;
}
.quizz-owner-utility-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.quizz-owner-utility-actions form {
    margin: 0;
}
.quizz-owner-utility-btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .46rem .72rem;
    color: #cfd8ea;
    text-decoration: none;
    white-space: nowrap;
    background: #101827;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    font-size: .84rem;
    font-weight: 820;
    line-height: 1.1;
    transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.quizz-owner-utility-btn:hover,
.quizz-owner-utility-btn:focus {
    color: #fff;
    border-color: rgba(120,175,255,.32);
    background: #172338;
    box-shadow: 0 8px 18px rgba(0,119,255,.08);
}
.quizz-owner-utility-btn.is-copied {
    color: #d9f7eb;
    border-color: rgba(33,182,122,.34);
    background: rgba(33,182,122,.1);
}
.quizz-owner-utility-btn.is-restart {
    color: #d7e6ff;
    border-color: rgba(84,147,255,.24);
    background: rgba(84,147,255,.08);
}
.quizz-owner-utility-btn.is-restart:hover,
.quizz-owner-utility-btn.is-restart:focus {
    color: #ffffff;
    border-color: rgba(84,147,255,.42);
    background: rgba(84,147,255,.13);
}
.quizz-owner-utility-btn.is-danger {
    color: #ffb8c0;
    border-color: rgba(255,105,125,.24);
}
.quizz-owner-utility-btn.is-danger:hover,
.quizz-owner-utility-btn.is-danger:focus {
    color: #ffdce1;
    border-color: rgba(255,105,125,.42);
    background: rgba(255,105,125,.08);
}
.quizz-admin-controls {
    padding: 1rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #182131, #13191f);
    border: 1px solid var(--quiz-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.quizz-admin-controls-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: .85rem;
}
.quizz-admin-status-pill {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .22rem .62rem;
    color: #dce8f7;
    background: #101827;
    border: 1px solid rgba(120,175,255,.16);
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 850;
    white-space: nowrap;
}
.quizz-admin-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}
.quizz-admin-action-card {
    margin: 0;
}
.quizz-admin-action-card[hidden] {
    display: none !important;
}
.quizz-admin-action-btn,
.quizz-admin-action-info {
    width: 100%;
    min-height: 74px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: .72rem;
    padding: .76rem .84rem;
    text-align: left;
    color: #dce8f7;
    background: #101827;
    border: 1px solid rgba(120,175,255,.18);
    border-radius: 10px;
}
.quizz-admin-action-btn {
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.quizz-admin-action-btn:hover,
.quizz-admin-action-btn:focus {
    color: #fff;
    border-color: rgba(120,175,255,.42);
    background: #172338;
    box-shadow: 0 10px 22px rgba(0,119,255,.1);
}
.quizz-admin-action-btn:disabled {
    opacity: .56;
    cursor: not-allowed;
    box-shadow: none;
}
.quizz-admin-action-btn.is-primary {
    border-color: rgba(120,175,255,.32);
    background: linear-gradient(180deg, #1a2839, #131d2b);
    box-shadow: inset 3px 0 0 rgba(120,175,255,.58);
}
.quizz-admin-action-btn.is-secondary {
    border-color: rgba(255,193,7,.24);
    background: linear-gradient(180deg, #1b2534, #121b29);
    box-shadow: inset 3px 0 0 rgba(255,193,7,.46);
}
.quizz-admin-action-info {
    border-style: dashed;
    color: #cfd8ea;
}
.quizz-admin-action-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #a9c9ff;
    background: rgba(120,175,255,.08);
    border: 1px solid rgba(120,175,255,.16);
    border-radius: 10px;
    font-size: 1.02rem;
}
.quizz-admin-action-btn.is-secondary .quizz-admin-action-icon {
    color: #ffe8a8;
    background: rgba(255,193,7,.08);
    border-color: rgba(255,193,7,.18);
}
.quizz-admin-action-card strong {
    display: block;
    color: #fff;
    font-size: .92rem;
    font-weight: 900;
    line-height: 1.15;
}
.quizz-admin-action-card small {
    display: block;
    margin-top: .18rem;
    color: var(--c-muted);
    font-size: .76rem;
    line-height: 1.25;
}
.quizz-question-card {
    min-height: 360px;
}
.quizz-player-panel .card-body {
    display: grid;
    gap: 14px;
}
.quizz-player-score {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: .85rem;
    border-radius: 10px;
    background: rgba(33,182,122,.08);
    border: 1px solid rgba(33,182,122,.24);
    box-shadow: inset 3px 0 0 rgba(33,182,122,.7);
}
.quizz-player-score > div > span {
    display: block;
    color: var(--c-muted);
    font-size: .76rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.quizz-player-score strong {
    display: block;
    margin-top: .12rem;
    color: #fff;
    font-size: 1.55rem;
    line-height: 1;
}
.quizz-player-score i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #95efc8;
    background: rgba(16,24,39,.68);
    border: 1px solid rgba(33,182,122,.22);
    border-radius: 9px;
}
.quizz-panel-section {
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.07);
}
.quizz-player-score.d-none + .quizz-panel-section {
    padding-top: 0;
    border-top: 0;
}
.quizz-panel-section-title {
    margin-bottom: .55rem;
    color: #dce8f7;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.quizz-chat-panel,
.quizz-chat-card .card-body {
    display: grid;
}
.quizz-chat-panel {
    gap: .65rem;
}
.quizz-chat-card .card-body {
    gap: .75rem;
}
.quizz-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 340px;
    min-height: 146px;
    overflow-y: auto;
    padding: .5rem;
    border-radius: 10px;
    background: rgba(16,24,39,.58);
    border: 1px solid rgba(120,175,255,.12);
}
.quizz-chat-message {
    padding: .42rem .55rem;
    color: #dce8f7;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.075);
    border-left: 3px solid rgba(120,175,255,.55);
    border-radius: 9px;
}
.quizz-chat-message.is-admin {
    border-left-color: rgba(255,209,102,.85);
    background: rgba(255,209,102,.055);
}
.quizz-chat-message-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: .12rem;
}
.quizz-chat-message-head strong {
    min-width: 0;
    color: #fff;
    font-size: .8rem;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quizz-chat-message-head span {
    flex: 0 0 auto;
    color: var(--c-muted);
    font-size: .68rem;
    font-weight: 800;
}
.quizz-chat-message-body {
    color: #dce8f7;
    font-size: .8rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.quizz-chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 8px;
    margin: 0;
}
.quizz-chat-form .form-control {
    min-height: 38px;
    color: #e7edf8;
    background: #101827;
    border-color: rgba(120,175,255,.18);
}
.quizz-chat-form button {
    width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #dce8f7;
    background: linear-gradient(180deg, #1a2839, #131d2b);
    border: 1px solid rgba(120,175,255,.24);
    border-radius: 8px;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}
.quizz-chat-form button:hover,
.quizz-chat-form button:focus {
    color: #fff;
    border-color: rgba(120,175,255,.42);
    background: linear-gradient(180deg, #20334a, #16253a);
    box-shadow: 0 8px 18px rgba(0,119,255,.1), inset 0 1px 0 rgba(255,255,255,.07);
}
.quizz-chat-form button:disabled {
    cursor: not-allowed;
    opacity: .62;
}
.quizz-chat-lock-note {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--c-muted);
    font-size: .78rem;
    font-weight: 800;
}
.quizz-answer-summary {
    width: 100%;
    padding: .62rem .7rem;
    border-radius: 9px;
    color: #dce8f7;
    background: #101827;
    border: 1px solid rgba(255,255,255,.08);
    font-size: .84rem;
}
.quizz-answer-summary.is-typing {
    border-color: rgba(255,193,7,.24);
    background: rgba(255,193,7,.07);
}
.quizz-answer-summary.is-expired {
    border-color: rgba(255,193,7,.24);
    background: rgba(255,193,7,.07);
}
.quizz-answer-summary strong,
.quizz-answer-summary span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quizz-answer-summary span {
    margin-top: .14rem;
    color: var(--c-muted);
    font-size: .76rem;
}
.quizz-compact-score-list {
    max-height: 340px;
    overflow-y: auto;
    padding-right: 2px;
}
.quizz-player-score-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}
.quizz-hero {
    position: relative;
    overflow: hidden;
    min-height: 240px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    border-radius: 10px;
    border: 1px solid var(--quiz-border);
    background: #101827;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 38px rgba(0,0,0,.18);
}
.quizz-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .78;
    filter: saturate(1.06) contrast(1.08) brightness(.9);
    transform: scale(1.01);
}
.quizz-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(9,14,25,.94) 0%, rgba(9,14,25,.68) 46%, rgba(9,14,25,.28) 78%, rgba(9,14,25,.5) 100%),
        linear-gradient(180deg, rgba(9,14,25,.08) 0%, rgba(9,14,25,.1) 48%, rgba(9,14,25,.86) 100%);
}
.quizz-hero-content,
.quizz-hero-actions,
.quizz-hero .quizz-eyebrow {
    position: relative;
    z-index: 1;
}
.quizz-hero-content {
    max-width: 720px;
}
.quizz-hero h2 {
    font-size: 2rem;
    font-weight: 950;
    letter-spacing: 0;
}
.quizz-hero-copy {
    max-width: 720px;
    color: #d8e2ef;
    font-size: .95rem;
    line-height: 1.45;
}
.quizz-hero-actions,
.quizz-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.quizz-create-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .38rem .72rem;
    border-radius: 8px;
    font-size: .875rem;
    line-height: 1.2;
    white-space: nowrap;
}
.quizz-top-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.quizz-top-actions form,
.quizz-row-actions form {
    margin: 0;
}
.quizz-header-action,
.quizz-action-btn,
.quizz-icon-action,
.quizz-primary-btn,
.quizz-danger-btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border-radius: 8px;
    font-size: .86rem;
    font-weight: 800;
    line-height: 1.15;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}
.quizz-header-action,
.quizz-action-btn {
    padding: .48rem .78rem;
    color: #dce8f7;
    border: 1px solid rgba(120,175,255,.24);
    background: linear-gradient(180deg, #1a2839, #131d2b);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.quizz-header-action:hover,
.quizz-header-action:focus,
.quizz-action-btn:hover,
.quizz-action-btn:focus {
    color: #fff;
    border-color: rgba(120,175,255,.42);
    background: linear-gradient(180deg, #20334a, #16253a);
    box-shadow: 0 8px 20px rgba(0,119,255,.12), inset 0 1px 0 rgba(255,255,255,.07);
}
.quizz-action-btn-owner {
    color: #f3d88a;
    border-color: rgba(255,204,92,.34);
    background: linear-gradient(180deg, #1a2839, #131d2b);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.quizz-action-crown {
    display: inline-block;
    font-size: .98rem;
    line-height: 1;
    transform: translateY(-1px);
}
.quizz-action-btn-owner:hover,
.quizz-action-btn-owner:focus {
    color: #ffe6a1;
    border-color: rgba(255,221,128,.56);
    background: linear-gradient(180deg, #20334a, #16253a);
    box-shadow: 0 8px 20px rgba(240,179,59,.1), inset 0 1px 0 rgba(255,255,255,.07);
}
.quizz-header-action-room {
    border-color: rgba(33,182,122,.28);
}
.quizz-header-action-room i,
.quizz-icon-action-play i {
    color: #64d6a6;
}
.quizz-header-action-back {
    color: #c7d3e4;
    border-color: rgba(255,255,255,.1);
    background: #101827;
}
.quizz-header-action:disabled,
.quizz-icon-action:disabled {
    opacity: .52;
    cursor: not-allowed;
    box-shadow: none;
}
.quizz-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.quizz-icon-action {
    width: 36px;
    height: 36px;
    padding: 0;
    color: #dce8f7;
    border: 1px solid rgba(120,175,255,.18);
    background: #101827;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.quizz-icon-action:hover,
.quizz-icon-action:focus {
    color: #fff;
    border-color: rgba(120,175,255,.36);
    background: #172338;
    box-shadow: 0 8px 18px rgba(0,119,255,.1), inset 0 1px 0 rgba(255,255,255,.06);
}
.quizz-icon-action.is-locked {
    color: #f3d88a;
    border-color: rgba(255,204,92,.26);
}
.quizz-icon-action-edit i {
    color: #a9c9ff;
}
.quizz-icon-action-edit.is-locked i {
    color: #f3d88a;
}
.quizz-primary-btn {
    padding: .42rem .72rem;
    color: #dce8f7;
    border: 1px solid rgba(120,175,255,.28);
    background: linear-gradient(180deg, #1a2839, #131d2b);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.quizz-primary-btn:hover,
.quizz-primary-btn:focus {
    color: #fff;
    border-color: rgba(120,175,255,.44);
    background: linear-gradient(180deg, #20334a, #16253a);
    box-shadow: 0 8px 18px rgba(0,119,255,.1), inset 0 1px 0 rgba(255,255,255,.07);
}
.quizz-danger-btn {
    padding: .42rem .72rem;
    color: #ffb8c0;
    border: 1px solid rgba(255,105,125,.26);
    background: rgba(255,105,125,.06);
}
.quizz-danger-btn:hover,
.quizz-danger-btn:focus {
    color: #fff;
    border-color: rgba(255,105,125,.42);
    background: rgba(255,105,125,.12);
    box-shadow: 0 8px 18px rgba(255,105,125,.08);
}
.quizz-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    color: #a9c9ff;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .35rem;
}
.quizz-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.quizz-kpi {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .8rem;
    align-items: center;
    min-height: 82px;
    padding: .95rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #182131, #13191f);
    border: 1px solid var(--quiz-border);
}
.quizz-kpi > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #d7e8ff;
    background: var(--quiz-panel-soft);
    border: 1px solid rgba(120,175,255,.16);
    border-radius: 10px;
}
.quizz-kpi strong {
    display: block;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.05;
}
.quizz-kpi span,
.quizz-row-meta,
.quizz-empty {
    color: var(--c-muted);
    font-size: .82rem;
}
.quizz-personal-stats {
    display: grid;
    gap: 12px;
}
.quizz-personal-stats-row {
    display: grid;
    gap: 12px;
}
.quizz-personal-stats-row.is-podium-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.quizz-personal-stats-row.is-summary-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.quizz-personal-stat {
    --stat: #78afff;
    --stat-rgb: 120, 175, 255;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: .8rem;
    min-height: 86px;
    padding: .95rem;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(var(--stat-rgb), .08), rgba(255,255,255,.025));
    border: 1px solid rgba(var(--stat-rgb), .22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.quizz-personal-stat::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--stat);
    box-shadow: 0 0 18px rgba(var(--stat-rgb), .45);
}
.quizz-personal-stat.is-gold {
    --stat: #ffd166;
    --stat-rgb: 255, 209, 102;
}
.quizz-personal-stat.is-silver {
    --stat: #dce6f7;
    --stat-rgb: 220, 230, 247;
}
.quizz-personal-stat.is-bronze {
    --stat: #d7915a;
    --stat-rgb: 215, 145, 90;
}
.quizz-personal-stat.is-blue {
    --stat: #78afff;
    --stat-rgb: 120, 175, 255;
}
.quizz-personal-stat.is-green {
    --stat: #21b67a;
    --stat-rgb: 33, 182, 122;
}
.quizz-personal-stat.is-violet {
    --stat: #b79cff;
    --stat-rgb: 183, 156, 255;
}
.quizz-personal-stat.is-mj {
    --stat: #f0b33b;
    --stat-rgb: 240, 179, 59;
}
.quizz-personal-stat-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--stat);
    background: rgba(var(--stat-rgb), .1);
    border: 1px solid rgba(var(--stat-rgb), .25);
    border-radius: 10px;
    font-size: 1.08rem;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.quizz-personal-stat strong {
    display: block;
    color: #fff;
    font-size: 1.34rem;
    font-weight: 900;
    line-height: 1.05;
    text-shadow: 0 0 16px rgba(var(--stat-rgb), .18);
}
.quizz-personal-stat .pronos-bonus-stat-value {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    width: auto;
    min-height: 42px;
    padding: 0;
    color: #ffe8a8;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.quizz-personal-stat .pronos-bonus-stat-main,
.quizz-personal-stat .pronos-bonus-stat-total,
.quizz-personal-stat .pronos-bonus-stat-total span {
    display: inline;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}
.quizz-personal-stat .pronos-bonus-stat-main {
    color: #fff;
    font-size: 1.68rem;
    font-weight: 950;
    line-height: .95;
    text-shadow: 0 0 18px rgba(255,209,102,.22);
}
.quizz-personal-stat .pronos-bonus-stat-total {
    display: grid;
    gap: .02rem;
    padding-left: .42rem;
    border-left: 1px solid rgba(255,209,102,.22);
    line-height: 1;
}
.quizz-personal-stat .pronos-bonus-stat-total span:first-child {
    color: rgba(255,232,168,.7);
    font-size: .58rem;
    font-weight: 900;
    text-transform: uppercase;
}
.quizz-personal-stat .pronos-bonus-stat-total [data-prono-bonus-total] {
    color: #ffe8a8;
    font-size: .95rem;
    font-weight: 950;
}
.quizz-personal-stat span {
    display: block;
    margin-top: .2rem;
    color: var(--c-muted);
    font-size: .78rem;
    font-weight: 850;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.quizz-list,
.quizz-score-list,
.quizz-question-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.quizz-row,
.quizz-score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: .72rem .85rem;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(0,119,255,.12);
}
.quizz-row-title {
    color: #fff;
    font-weight: 800;
}
.quizz-history-list {
    display: grid;
    gap: 9px;
}
.quizz-history-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: .78rem .85rem;
    color: inherit;
    text-decoration: none;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(0,119,255,.12);
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.quizz-history-content {
    min-width: 0;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 184px;
    align-items: center;
    gap: 16px;
    color: inherit;
    text-decoration: none;
}
.quizz-history-content:hover,
.quizz-history-content:focus {
    color: inherit;
    text-decoration: none;
}
.quizz-history-row {
    min-width: 0;
}
.quizz-history-row:hover,
.quizz-history-row:focus-within {
    color: inherit;
    text-decoration: none;
    background: rgba(120,175,255,.055);
    border-color: rgba(120,175,255,.28);
    transform: translateY(-1px);
}
.quizz-history-rank,
.quizz-history-main,
.quizz-history-stats,
.quizz-history-actions,
.quizz-history-open {
    min-width: 0;
    display: inline-flex;
    align-items: center;
}
.quizz-history-rank {
    width: 104px;
    gap: .45rem;
    color: #dce8f7;
    font-weight: 900;
}
.quizz-history-admin-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    color: #ffd166;
    background: rgba(255,209,102,.12);
    border: 1px solid rgba(255,209,102,.3);
    border-radius: 8px;
    font-size: .9rem;
}
.quizz-history-main {
    flex-direction: column;
    align-items: flex-start;
    gap: .12rem;
}
.quizz-history-main strong {
    max-width: 100%;
    color: #fff;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quizz-history-main small,
.quizz-history-stats small {
    color: var(--c-muted);
    font-size: .76rem;
}
.quizz-history-stats {
    width: 184px;
    justify-content: flex-end;
    gap: 10px;
}
.quizz-history-stats > span {
    width: 86px;
    min-width: 0;
    display: grid;
    gap: .06rem;
    text-align: right;
}
.quizz-history-stats strong {
    max-width: 86px;
    color: #fff;
    font-size: .94rem;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quizz-history-actions {
    justify-content: flex-end;
    gap: 8px;
}
.quizz-history-open {
    width: 104px;
    min-height: 36px;
    justify-content: center;
    gap: .45rem;
    color: #dce8f7;
    text-decoration: none;
    background: linear-gradient(180deg, #1a2839, #131d2b);
    border: 1px solid rgba(120,175,255,.24);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    font-size: .86rem;
    font-weight: 800;
    line-height: 1.15;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}
.quizz-history-open:hover,
.quizz-history-open:focus,
.quizz-history-open:active,
.quizz-history-open:visited {
    color: #fff;
    text-decoration: none;
    background: linear-gradient(180deg, #20334a, #16253a);
    border-color: rgba(120,175,255,.42);
    box-shadow: 0 8px 20px rgba(0,119,255,.12), inset 0 1px 0 rgba(255,255,255,.07);
}
.quizz-history-delete-form {
    display: flex;
    margin: 0;
}
.quizz-history-delete {
    width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffb8c0;
    border: 1px solid rgba(255,105,125,.22);
    border-radius: 10px;
    background: rgba(255,105,125,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}
.quizz-history-delete:hover,
.quizz-history-delete:focus {
    color: #fff;
    border-color: rgba(255,105,125,.42);
    background: rgba(255,105,125,.12);
    box-shadow: 0 8px 18px rgba(255,105,125,.08), inset 0 1px 0 rgba(255,255,255,.06);
    transform: translateY(-1px);
}
.quizz-score-row.is-me {
    border-color: rgba(33,182,122,.38);
    box-shadow: inset 3px 0 0 rgba(33,182,122,.75);
}
.quizz-score-player {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #dce8f7;
    font-weight: 800;
}
.quizz-score-player > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quizz-presence-icon,
.quizz-score-lock {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    font-size: .82rem;
}
.quizz-presence-icon {
    color: #a9c9ff;
    background: rgba(120,175,255,.08);
    border: 1px solid rgba(120,175,255,.16);
}
.quizz-score-lock {
    color: #ffe8a8;
    background: rgba(255,193,7,.08);
    border: 1px solid rgba(255,193,7,.2);
}
.quizz-score-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: .48rem;
    padding: .58rem .68rem;
    color: var(--c-muted);
    background: rgba(120,175,255,.045);
    border: 1px solid rgba(120,175,255,.13);
    border-radius: 9px;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.35;
}
.quizz-score-disclaimer i {
    flex: 0 0 auto;
    color: #a9c9ff;
}
.quizz-rank-icon,
.quizz-rank-number {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 900;
}
.quizz-rank-icon {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}
.quizz-rank-gold {
    color: #ffd166;
    background: rgba(255,209,102,.12);
    border-color: rgba(255,209,102,.3);
}
.quizz-rank-silver {
    color: #dce6f7;
    background: rgba(220,230,247,.1);
    border-color: rgba(220,230,247,.26);
}
.quizz-rank-bronze {
    color: #d7915a;
    background: rgba(215,145,90,.12);
    border-color: rgba(215,145,90,.28);
}
.quizz-rank-number {
    color: var(--c-muted);
    background: #101827;
    border: 1px solid rgba(255,255,255,.08);
}
.quizz-final-screen {
    display: grid;
    gap: 18px;
}
.quizz-final-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border-radius: 10px;
    background: linear-gradient(180deg, #182131, #13191f);
    border: 1px solid var(--quiz-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.quizz-final-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.quizz-final-actions form {
    margin: 0;
}
.quizz-room-delete-btn {
    min-height: 36px;
}
.quizz-final-list {
    display: grid;
    gap: 9px;
}
.quizz-final-rank-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: .72rem .85rem;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(0,119,255,.12);
}
.quizz-final-rank-row.is-me {
    border-color: rgba(33,182,122,.38);
    box-shadow: inset 3px 0 0 rgba(33,182,122,.75);
}
.quizz-final-rank-link {
    color: inherit;
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.quizz-final-rank-link:hover,
.quizz-final-rank-link:focus {
    color: inherit;
    text-decoration: none;
    background: rgba(120,175,255,.055);
    border-color: rgba(120,175,255,.28);
    transform: translateY(-1px);
}
.quizz-final-rank-row.is-selected {
    border-color: rgba(120,175,255,.44);
    background: rgba(120,175,255,.075);
}
.quizz-final-metrics {
    flex: 0 0 auto;
    display: grid;
    gap: .08rem;
    text-align: right;
}
.quizz-final-metrics strong {
    color: #fff;
    font-size: .95rem;
    line-height: 1.1;
}
.quizz-final-metrics small {
    color: var(--c-muted);
    font-size: .76rem;
    line-height: 1.25;
}
.quizz-results-player-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.quizz-results-player-rank {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: .16rem .5rem;
    text-align: right;
}
.quizz-results-player-rank .quizz-rank-icon,
.quizz-results-player-rank .quizz-rank-number {
    grid-row: span 2;
}
.quizz-results-player-rank strong {
    color: #fff;
    font-size: 1rem;
    line-height: 1.1;
}
.quizz-results-player-rank small {
    color: var(--c-muted);
    font-size: .78rem;
    font-weight: 800;
}
.quizz-final-question-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .75rem;
    padding: .78rem .85rem;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(0,119,255,.12);
}
.quizz-final-question-index {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #a9c9ff;
    background: rgba(120,175,255,.08);
    border: 1px solid rgba(120,175,255,.16);
    border-radius: 9px;
    font-size: .8rem;
    font-weight: 900;
}
.quizz-final-question-index.is-correct {
    color: #d9f7eb;
    background: rgba(33,182,122,.16);
    border-color: rgba(33,182,122,.42);
    box-shadow: 0 0 0 2px rgba(33,182,122,.08);
}
.quizz-final-question-index.is-wrong {
    color: #ffd7dc;
    background: rgba(255,105,125,.11);
    border-color: rgba(255,105,125,.36);
    box-shadow: 0 0 0 2px rgba(255,105,125,.06);
}
.quizz-final-question-index.is-missed {
    color: #ffe8a8;
    background: rgba(255,193,7,.1);
    border-color: rgba(255,193,7,.3);
    box-shadow: 0 0 0 2px rgba(255,193,7,.06);
}
.quizz-final-question-row strong {
    display: block;
    color: #fff;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.quizz-final-question-answer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .38rem .55rem;
    margin-top: .32rem;
    color: #dce8f7;
    font-size: .86rem;
    line-height: 1.35;
}
.quizz-final-answer-text {
    min-width: min(100%, 220px);
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}
.quizz-final-player-answer {
    flex: 1 0 100%;
    display: inline-flex;
    align-items: flex-start;
    gap: .4rem;
    min-width: 0;
    padding: .34rem .5rem;
    color: #dce8f7;
    background: rgba(120,175,255,.055);
    border: 1px solid rgba(120,175,255,.16);
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 800;
    line-height: 1.3;
}
.quizz-final-player-answer i {
    flex: 0 0 auto;
    margin-top: .08rem;
    color: #a9c9ff;
}
.quizz-final-player-answer span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.quizz-final-result-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: .14rem .45rem;
    border-radius: 999px;
    color: var(--c-muted);
    background: #101827;
    border: 1px solid rgba(255,255,255,.08);
    font-size: .7rem;
    font-weight: 850;
    line-height: 1;
}
.quizz-final-result-badge.is-correct {
    color: #d9f7eb;
    background: rgba(33,182,122,.13);
    border-color: rgba(33,182,122,.3);
}
.quizz-final-result-badge.is-wrong {
    color: #ffd7dc;
    background: rgba(255,105,125,.09);
    border-color: rgba(255,105,125,.26);
}
.quizz-final-result-badge.is-missed {
    color: #ffe8a8;
    background: rgba(255,193,7,.09);
    border-color: rgba(255,193,7,.24);
}
.quizz-final-points-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: .14rem .48rem;
    border-radius: 999px;
    color: #a9c9ff;
    background: rgba(120,175,255,.08);
    border: 1px solid rgba(120,175,255,.2);
    font-size: .7rem;
    font-weight: 900;
    line-height: 1;
}
.quizz-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
    gap: 16px;
}
.quizz-form-main,
.quizz-form-actions {
    grid-column: 1 / -1;
}
.quizz-settings {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.quizz-settings-inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
.quizz-check {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 38px;
    padding: .45rem .7rem;
    color: #dce8f7;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: var(--quiz-panel-soft);
    font-weight: 700;
}
.quizz-check input {
    width: 16px;
    height: 16px;
}
.quizz-check.is-disabled {
    color: rgba(220,232,247,.55);
    background: rgba(255,255,255,.025);
    border-color: rgba(255,255,255,.06);
    cursor: not-allowed;
}
.quizz-check.is-disabled input {
    cursor: not-allowed;
}
.quizz-save-btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.quizz-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1.05rem;
}
.quizz-card-head-start {
    align-items: flex-start;
    justify-content: flex-start;
}
.quizz-page .lb-title {
    padding-bottom: .54rem;
    letter-spacing: .12em;
}
.quizz-page .lb-title::after {
    right: auto;
    bottom: 0;
    width: 52px;
    background: linear-gradient(90deg, var(--c-blue-2), rgba(0,119,255,0));
}
.quizz-section-subtitle {
    /* max-width: 625px; */
    margin-top: .26rem;
    color: var(--c-muted);
    font-size: .82rem;
    line-height: 1.35;
}
.quizz-muted-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: .25rem .65rem;
    border-radius: 999px;
    color: var(--c-muted);
    background: #101827;
    border: 1px solid rgba(255,255,255,.08);
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}
.quizz-lock-banner {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1rem;
    border-radius: 10px;
    color: #f4d897;
    background: rgba(240,179,59,.08);
    border: 1px solid rgba(240,179,59,.26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.quizz-lock-banner > i {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(240,179,59,.11);
    border: 1px solid rgba(240,179,59,.22);
}
.quizz-lock-banner strong {
    display: block;
    color: #ffe6a1;
    font-weight: 900;
}
.quizz-lock-banner span {
    display: block;
    color: #d8c391;
    font-size: .9rem;
}
.quizz-lock-banner .quizz-header-action {
    flex: 0 0 auto;
}
.quizz-form-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.quizz-form-fieldset:disabled {
    opacity: .72;
}
.quizz-form-fieldset:disabled .form-control,
.quizz-form-fieldset:disabled .form-select,
.quizz-form-fieldset:disabled .quizz-toggle-card,
.quizz-form-fieldset:disabled .quizz-primary-btn {
    cursor: not-allowed;
}
.quizz-settings-form {
    display: grid;
    gap: 14px;
}
.quizz-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: 16px;
    align-items: stretch;
}
.quizz-settings-main,
.quizz-options-panel {
    padding: .95rem;
    border-radius: 10px;
    background: rgba(255,255,255,.022);
    border: 1px solid rgba(0,119,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.quizz-section-label {
    margin-bottom: .75rem;
    color: #a9c9ff;
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.quizz-meta-grid {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(180px, 240px);
    gap: 12px;
}
.quizz-options-panel {
    display: flex;
    flex-direction: column;
}
.quizz-toggle-card {
    position: relative;
    display: grid;
    grid-template-columns: 18px 38px minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
    min-height: 62px;
    margin: 0;
    padding: .7rem .75rem;
    color: #dce8f7;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: #101827;
    cursor: pointer;
}
.quizz-toggle-card + .quizz-toggle-card {
    margin-top: 8px;
}
.quizz-toggle-card:hover {
    border-color: rgba(120,175,255,.28);
    background: #121d2d;
}
.quizz-toggle-card:has(input:checked) {
    border-color: rgba(33,182,122,.34);
    background: rgba(33,182,122,.08);
    box-shadow: inset 3px 0 0 rgba(33,182,122,.7);
}
.quizz-toggle-card input {
    width: 16px;
    height: 16px;
    margin: 0;
}
.quizz-toggle-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #d7e8ff;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
}
.quizz-toggle-card strong {
    display: block;
    color: #fff;
    font-size: .88rem;
    line-height: 1.1;
}
.quizz-toggle-card small {
    display: block;
    margin-top: .22rem;
    color: var(--c-muted);
    font-size: .76rem;
    line-height: 1.25;
}
.quizz-settings-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.07);
}
.quizz-empty-state {
    min-height: 126px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .36rem;
    padding: 1.2rem;
    text-align: center;
    border-radius: 10px;
    border: 1px dashed rgba(120,175,255,.2);
    background: rgba(255,255,255,.02);
}
.quizz-empty-state i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    margin-bottom: .15rem;
    color: #a9c9ff;
    background: #101827;
    border: 1px solid rgba(120,175,255,.16);
    border-radius: 9px;
    font-size: 1rem;
}
.quizz-empty-state strong {
    color: #fff;
    font-size: .92rem;
    line-height: 1.2;
}
.quizz-empty-state span {
    max-width: 430px;
    line-height: 1.4;
}
.quizz-question-item {
    padding: .78rem .85rem;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(0,119,255,.12);
    transition: border-color .16s ease, background .16s ease, opacity .16s ease, transform .16s ease;
}
.quizz-question-item summary {
    display: grid;
    grid-template-columns: 34px 42px 132px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
}
.quizz-question-item summary::-webkit-details-marker {
    display: none;
}
.quizz-question-list.is-drag-active .quizz-question-item {
    border-color: rgba(120,175,255,.18);
}
.quizz-question-list.is-saving .quizz-question-item {
    pointer-events: none;
}
.quizz-question-list.is-saved .quizz-question-item {
    border-color: rgba(33,182,122,.22);
}
.quizz-question-item.is-dragging {
    opacity: .62;
    background: rgba(120,175,255,.08);
    border-color: rgba(120,175,255,.42);
    transform: scale(.995);
}
.quizz-question-drag {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    color: #a9c9ff;
    background: rgba(120,175,255,.08);
    border: 1px solid rgba(120,175,255,.16);
    border-radius: 8px;
    cursor: grab;
}
.quizz-question-drag:active {
    cursor: grabbing;
}
.quizz-question-drag.is-disabled {
    color: rgba(220,232,247,.35);
    background: rgba(255,255,255,.02);
    border-color: rgba(255,255,255,.06);
    cursor: not-allowed;
}
.quizz-question-side-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}
.quizz-question-points {
    gap: .28rem;
}
.quizz-question-points-bonus {
    color: #ffc857;
    font-size: .82rem;
}
.quizz-question-points-bonus.is-penalty {
    color: #ff7d8f;
}
.quizz-question-rank,
.quizz-question-type,
.quizz-question-points,
.quizz-question-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--quiz-panel-soft);
    border: 1px solid rgba(255,255,255,.08);
    color: #dce8f7;
    font-size: .76rem;
    font-weight: 850;
    white-space: nowrap;
}
.quizz-player-question-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: .25rem;
}
.quizz-player-question-type,
.quizz-player-question-points,
.quizz-player-question-bonus {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    border-radius: 10px;
    white-space: nowrap;
}
.quizz-player-question-type {
    gap: .5rem;
    padding: .42rem .72rem;
    color: #dce8f7;
    background: linear-gradient(180deg, #1a2839, #131d2b);
    border: 1px solid rgba(120,175,255,.24);
    font-size: .82rem;
    font-weight: 850;
}
.quizz-player-question-type i {
    color: #a9c9ff;
    font-size: .98rem;
}
.quizz-player-question-bonus {
    gap: .42rem;
    padding: .42rem .7rem;
    color: #ffe8a8;
    background: linear-gradient(180deg, #1a2839, #131d2b);
    border: 1px solid rgba(255,193,7,.28);
    box-shadow: inset 3px 0 0 rgba(255,193,7,.48);
    font-size: .8rem;
    font-weight: 900;
}
.quizz-player-question-bonus i {
    color: #ffc857;
}
.quizz-player-question-bonus.is-penalty {
    color: #ffd3d9;
    border-color: rgba(255,105,125,.32);
    background: linear-gradient(180deg, #251b24, #1d151c);
    box-shadow: inset 3px 0 0 rgba(255,105,125,.58);
}
.quizz-player-question-bonus.is-penalty i {
    color: #ff7d8f;
}
.quizz-player-question-points {
    gap: .38rem;
    padding: .34rem .72rem .34rem .58rem;
    color: #dce8f7;
    background: linear-gradient(180deg, #1a2839, #131d2b);
    border: 1px solid rgba(120,175,255,.32);
    box-shadow: inset 3px 0 0 rgba(120,175,255,.55);
}
.quizz-player-question-points strong {
    color: #fff;
    font-size: 1.18rem;
    font-weight: 950;
    line-height: 1;
}
.quizz-player-question-points span {
    color: #a9c9ff;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.quizz-question-tooltip {
    position: relative;
    cursor: help;
}
.quizz-question-tooltip::before,
.quizz-question-tooltip::after {
    position: absolute;
    left: 50%;
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 6px);
    transition: opacity .16s ease, transform .16s ease;
}
.quizz-question-tooltip::before {
    content: "";
    bottom: calc(100% + 4px);
    border: 6px solid transparent;
    border-top-color: #dce8f7;
}
.quizz-question-tooltip::after {
    content: attr(data-quizz-tooltip);
    bottom: calc(100% + 15px);
    width: max-content;
    max-width: min(280px, calc(100vw - 32px));
    padding: .62rem .7rem;
    color: #101827;
    background: #dce8f7;
    border: 1px solid rgba(120,175,255,.42);
    border-radius: 9px;
    box-shadow: 0 16px 32px rgba(0,0,0,.28);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
}
.quizz-question-tooltip:hover::before,
.quizz-question-tooltip:hover::after,
.quizz-question-tooltip:focus-visible::before,
.quizz-question-tooltip:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}
.quizz-player-question-title {
    margin: .95rem 0 1rem;
    padding: .15rem 0 .15rem .85rem;
    color: #fff;
    border-left: 3px solid rgba(120,175,255,.72);
    font-size: clamp(1.35rem, 1.35rem, 1.7rem);
    font-weight: 900;
    line-height: 1.28;
    overflow-wrap: anywhere;
}
.quizz-question-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-weight: 800;
}
.quizz-question-preview {
    margin-top: .8rem;
    padding: .75rem;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(120,175,255,.14);
}
.quizz-question-preview-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .55rem;
    color: #dce8f7;
    font-size: .82rem;
    font-weight: 850;
}
.quizz-question-preview .quizz-question-media-img {
    max-height: 220px;
}
.quizz-image-progressive-box {
    padding: .75rem;
    border-radius: 10px;
    background: rgba(120,175,255,.045);
    border: 1px solid rgba(120,175,255,.14);
}
.quizz-join {
    width: min(100%, 560px);
    margin: 0 auto;
}
.quizz-live-question h3,
.quizz-live-question h4 {
    color: #fff;
    line-height: 1.25;
}
.quizz-timebar {
    padding: .7rem .75rem;
    border-radius: 10px;
    background: rgba(255,255,255,.022);
    border: 1px solid rgba(120,175,255,.14);
}
.quizz-timebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: .48rem;
    color: var(--c-muted);
    font-size: .78rem;
    font-weight: 800;
}
.quizz-timebar-head strong {
    color: #fff;
    font-size: .86rem;
}
.quizz-timebar-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #101827;
    border: 1px solid rgba(255,255,255,.07);
}
.quizz-timebar-track span {
    width: 0%;
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #21b67a, #78afff);
    transition: width .28s ease, background .18s ease;
}
.quizz-timebar[data-state="urgent"] .quizz-timebar-track span {
    background: linear-gradient(90deg, #ff6b7c, #ffc107);
}
.quizz-timebar[data-state="preparing"] {
    background: rgba(120,175,255,.045);
    border-color: rgba(120,175,255,.18);
}
.quizz-timebar[data-state="preparing"] .quizz-timebar-track span {
    background: linear-gradient(90deg, #78afff, #a9c9ff);
}
.quizz-timebar-expired {
    display: none;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.quizz-timebar-expired span {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    min-height: 30px;
    padding: .28rem .62rem;
    color: #ffe8a8;
    background: rgba(255,193,7,.1);
    border: 1px solid rgba(255,193,7,.28);
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 900;
    white-space: nowrap;
}
.quizz-timebar-expired small {
    color: var(--c-muted);
    font-size: .78rem;
    line-height: 1.3;
    text-align: right;
}
.quizz-timebar[data-state="expired"] {
    background: rgba(255,193,7,.055);
    border-color: rgba(255,193,7,.2);
}
.quizz-timebar[data-state="expired"] .quizz-timebar-head,
.quizz-timebar[data-state="expired"] .quizz-timebar-track {
    display: none;
}
.quizz-timebar[data-state="expired"] .quizz-timebar-expired {
    display: flex;
}
.quizz-media-current {
    padding: .75rem;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(120,175,255,.14);
}
.quizz-question-prestart {
    position: relative;
    display: grid;
    place-items: center;
    gap: .38rem;
    min-height: 220px;
    padding: 1.2rem;
    text-align: center;
    color: #dce8f7;
    background: rgba(120,175,255,.045);
    border: 1px solid rgba(120,175,255,.16);
    border-radius: 12px;
}
.quizz-question-prestart > span {
    color: var(--c-muted);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.quizz-question-prestart > strong {
    color: #fff;
    font-size: clamp(1.35rem, 2.6vw, 2.1rem);
    line-height: 1.1;
}
.quizz-question-prestart small {
    max-width: 460px;
    color: var(--c-muted);
    font-size: .86rem;
    line-height: 1.35;
}
.quizz-question-preload {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.quizz-question-media-img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    border-radius: 10px;
    background: #101827;
    border: 1px solid rgba(255,255,255,.08);
}
.quizz-progressive-image {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #101827;
}
.quizz-progressive-image .quizz-question-media-img {
    margin: 0;
    filter: blur(34px);
    transition: filter .45s linear;
    transform: scale(1.012);
    will-change: filter;
}
.quizz-progressive-image-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: .22rem .58rem;
    color: #dce8f7;
    background: rgba(16,24,39,.82);
    border: 1px solid rgba(120,175,255,.24);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
    backdrop-filter: blur(6px);
}
.quizz-youtube-player {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #101827;
    border: 1px solid rgba(255,255,255,.08);
}
.quizz-youtube-player.is-audio-only {
    background: linear-gradient(180deg, #101827, #0d1522);
    border-color: rgba(120,175,255,.18);
}
.quizz-youtube-audio-shell {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem .9rem .15rem;
    color: #dce8f7;
    font-weight: 900;
}
.quizz-youtube-audio-shell i {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    color: #a9c9ff;
    background: rgba(120,175,255,.1);
    border: 1px solid rgba(120,175,255,.2);
    border-radius: 9px;
}
.quizz-youtube-viewport {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #050914;
}
.quizz-youtube-player.is-audio-only .quizz-youtube-viewport {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    aspect-ratio: auto;
    opacity: 0;
}
.quizz-youtube-player.is-audio-only .quizz-youtube-cover {
    display: none;
}
.quizz-youtube-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #050914;
    pointer-events: none;
    user-select: none;
}
.quizz-youtube-cover {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #050914;
    pointer-events: none;
    user-select: none;
    opacity: 1;
    transition: opacity .14s ease, visibility .14s ease;
}
.quizz-youtube-player.is-playing .quizz-youtube-cover {
    opacity: 0;
    visibility: hidden;
}
.quizz-youtube-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: .72rem;
    border-top: 1px solid rgba(255,255,255,.07);
    background: rgba(16,24,39,.92);
}
.quizz-youtube-controls button {
    min-width: 96px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    padding: .48rem .72rem;
    color: #dce8f7;
    background: linear-gradient(180deg, #1a2839, #131d2b);
    border: 1px solid rgba(120,175,255,.22);
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1;
}
.quizz-youtube-controls button i {
    font-size: 1rem;
}
.quizz-youtube-controls button[data-youtube-command="play"] {
    color: #fff;
    background: linear-gradient(180deg, #1d4f7a, #163b60);
    border-color: rgba(120,175,255,.42);
    box-shadow: 0 10px 22px rgba(13,110,253,.15);
}
.quizz-youtube-controls button:hover,
.quizz-youtube-controls button:focus {
    color: #fff;
    border-color: rgba(120,175,255,.42);
    background: linear-gradient(180deg, #20334a, #16253a);
}
.quizz-answer-form {
    display: grid;
    gap: 12px;
}
.quizz-answer-input {
    min-height: 46px;
    padding: .7rem .82rem;
    border-radius: 10px;
    color: #fff;
    background: #101827;
    border: 1px solid rgba(120,175,255,.18);
    font-size: .98rem;
}
.quizz-answer-input:focus {
    color: #fff;
    background: #101827;
    border-color: rgba(120,175,255,.5);
    box-shadow: 0 0 0 .2rem rgba(0,119,255,.12);
}
.quizz-answer-submit {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    gap: .5rem;
    padding: .55rem .9rem;
    color: #e8f3ff;
    background: linear-gradient(180deg, #1d6fd6, #1657ac);
    border: 1px solid rgba(120,175,255,.36);
    border-radius: 9px;
    font-size: .92rem;
    font-weight: 850;
    line-height: 1.1;
    box-shadow: 0 10px 22px rgba(0,119,255,.16), inset 0 1px 0 rgba(255,255,255,.12);
}
.quizz-answer-submit:hover,
.quizz-answer-submit:focus {
    color: #fff;
    background: linear-gradient(180deg, #2682f2, #1a63c4);
    border-color: rgba(158,202,255,.58);
}
.quizz-answer-submit:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}
.quizz-option-list,
.quizz-answer-options {
    display: grid;
    gap: 8px;
}
.quizz-answer-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.quizz-option,
.quizz-answer-option {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    min-height: 46px;
    padding: .62rem .72rem;
    border-radius: 10px;
    background: var(--quiz-panel-soft);
    border: 1px solid rgba(255,255,255,.08);
    color: #dce8f7;
}
.quizz-answer-option {
    position: relative;
    grid-template-columns: 34px minmax(0, 1fr) 28px;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.quizz-answer-option:hover {
    border-color: rgba(120,175,255,.32);
    background: #121d2d;
}
.quizz-answer-option:has(input:checked) {
    border-color: rgba(33,182,122,.48);
    background: rgba(33,182,122,.1);
    color: #fff;
    box-shadow: inset 3px 0 0 rgba(33,182,122,.82);
}
.quizz-answer-option-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.quizz-option-index,
.quizz-answer-option-index {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #a9c9ff;
    background: rgba(120,175,255,.08);
    border: 1px solid rgba(120,175,255,.16);
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 900;
}
.quizz-answer-option:has(input:checked) .quizz-answer-option-index {
    color: #d9f7eb;
    background: rgba(33,182,122,.16);
    border-color: rgba(33,182,122,.34);
}
.quizz-answer-option-text,
.quizz-option span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 750;
}
.quizz-answer-option-check {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: transparent;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}
.quizz-answer-option:has(input:checked) .quizz-answer-option-check {
    color: #fff;
    background: rgba(33,182,122,.75);
    border-color: rgba(33,182,122,.85);
}
.quizz-qcm-picker {
    display: grid;
    gap: 8px;
}
.quizz-qcm-choice {
    width: 100%;
    min-height: 42px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    padding: .52rem .62rem;
    color: #dce8f7;
    text-align: left;
    background: #101827;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    font-weight: 760;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.quizz-qcm-choice:hover,
.quizz-qcm-choice:focus {
    color: #fff;
    border-color: rgba(120,175,255,.34);
    background: #121d2d;
}
.quizz-qcm-choice.is-selected {
    color: #fff;
    border-color: rgba(33,182,122,.44);
    background: rgba(33,182,122,.09);
    box-shadow: inset 3px 0 0 rgba(33,182,122,.78);
}
.quizz-qcm-choice-index {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #a9c9ff;
    background: rgba(120,175,255,.08);
    border: 1px solid rgba(120,175,255,.14);
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 900;
}
.quizz-qcm-choice.is-selected .quizz-qcm-choice-index {
    color: #d9f7eb;
    background: rgba(33,182,122,.16);
    border-color: rgba(33,182,122,.32);
}
.quizz-qcm-choice span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}
.quizz-qcm-picker-empty {
    padding: .65rem .72rem;
    color: var(--c-muted);
    background: rgba(255,255,255,.02);
    border: 1px dashed rgba(120,175,255,.2);
    border-radius: 9px;
    font-size: .82rem;
}
.quizz-correct {
    padding: .75rem .85rem;
    border-radius: 10px;
    color: #dce8f7;
    background: rgba(33,182,122,.1);
    border: 1px solid rgba(33,182,122,.28);
}
.quizz-review-banner,
.quizz-review-panel {
    padding: .75rem .85rem;
    border-radius: 10px;
    color: #dce8f7;
    background: rgba(13,110,253,.1);
    border: 1px solid rgba(13,110,253,.25);
}
.quizz-review-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .65rem;
    color: #fff;
    font-weight: 850;
}
.quizz-review-row {
    width: 100%;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) 116px 96px;
    align-items: center;
    gap: 10px;
    padding: .55rem .65rem;
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.06);
}
.quizz-review-row + .quizz-review-row {
    margin-top: 6px;
}
.quizz-review-row > strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quizz-review-player {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #dce8f7;
    font-weight: 850;
}
.quizz-review-answer {
    color: #fff;
}
.quizz-review-row.is-rejected .quizz-review-answer {
    color: #dce8f7;
}
.quizz-review-points,
.quizz-review-status {
    justify-self: end;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--c-muted);
    font-size: .76rem;
    font-weight: 850;
    text-align: right;
}
.quizz-review-status {
    justify-content: center;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: .16rem .48rem;
    border-radius: 999px;
    background: #101827;
    border: 1px solid rgba(255,255,255,.08);
}
.quizz-review-status.is-accepted {
    color: #d9f7eb;
    background: rgba(33,182,122,.1);
    border-color: rgba(33,182,122,.26);
}
.quizz-review-status.is-rejected {
    color: #ffd7dc;
    background: rgba(255,105,125,.08);
    border-color: rgba(255,105,125,.24);
}
.quizz-review-status.is-missed {
    color: #ffe8a8;
    background: rgba(255,193,7,.08);
    border-color: rgba(255,193,7,.24);
}
.quizz-owner-table td,
.quizz-owner-table th {
    vertical-align: middle;
}
.quizz-owner-table-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1.05rem;
}
.quizz-owner-table-wrap {
    overflow-x: visible;
}
.quizz-owner-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0 8px;
    table-layout: fixed;
}
.quizz-owner-table.has-flags-column .quizz-owner-col-player {
    width: 24%;
}
.quizz-owner-table.has-flags-column .quizz-owner-col-answer {
    width: 50%;
}
.quizz-owner-table.has-flags-column .quizz-owner-col-score {
    width: 14%;
}
.quizz-owner-table.has-flags-column .quizz-owner-col-flags {
    width: 12%;
}
.quizz-owner-table.has-no-flags-column .quizz-owner-col-player {
    width: 28%;
}
.quizz-owner-table.has-no-flags-column .quizz-owner-col-answer {
    width: 56%;
}
.quizz-owner-table.has-no-flags-column .quizz-owner-col-score {
    width: 16%;
}
.quizz-owner-table thead th {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    color: var(--c-muted);
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0;
    padding: 0 .8rem .5rem;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}
.quizz-owner-th {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    min-height: 28px;
    padding: .3rem .55rem;
    color: #cfe0f5;
    background: rgba(120,175,255,.07);
    border: 1px solid rgba(120,175,255,.13);
    border-radius: 8px;
    line-height: 1;
    white-space: nowrap;
}
.quizz-owner-th i {
    color: #78afff;
    font-size: .82rem;
}
.quizz-owner-table tbody tr {
    background: rgba(255,255,255,.025);
}
.quizz-owner-table tbody td {
    padding: .75rem .8rem;
    color: #dce8f7;
    border-top: 1px solid rgba(120,175,255,.12);
    border-bottom: 1px solid rgba(120,175,255,.12);
}
.quizz-owner-table tbody td:first-child {
    border-left: 1px solid rgba(120,175,255,.12);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.quizz-owner-table tbody td:last-child {
    border-right: 1px solid rgba(120,175,255,.12);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.quizz-owner-player-cell {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 160px;
}
.quizz-owner-player-cell .min-w-0 {
    flex: 1 1 auto;
}
.quizz-owner-player-cell strong {
    display: block;
    color: #fff;
    line-height: 1.15;
}
.quizz-owner-player-cell small,
.quizz-live-answer small {
    display: block;
    margin-top: .18rem;
    color: var(--c-muted);
    font-size: .74rem;
    line-height: 1.2;
}
.quizz-kick-btn {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ff9aa8;
    background: rgba(255,88,113,.08);
    border: 1px solid rgba(255,88,113,.22);
    border-radius: 8px;
    opacity: .86;
    transition: color .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease;
}
.quizz-kick-btn:hover,
.quizz-kick-btn:focus {
    color: #fff;
    background: rgba(255,88,113,.16);
    border-color: rgba(255,88,113,.4);
    opacity: 1;
}
.quizz-kick-btn:disabled {
    cursor: wait;
    opacity: .45;
}
.quizz-live-answer {
    padding: .55rem .62rem;
    border-radius: 9px;
    background: #101827;
    border: 1px solid rgba(255,255,255,.08);
}
.quizz-live-answer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.quizz-live-answer strong,
.quizz-live-answer > span {
    color: #fff;
    font-weight: 850;
}
.quizz-live-answer-main strong,
.quizz-live-answer > span {
    min-width: 0;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quizz-live-answer-main span {
    flex: 0 0 auto;
    padding: .12rem .42rem;
    color: #d9f7eb;
    background: rgba(33,182,122,.14);
    border: 1px solid rgba(33,182,122,.24);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 850;
}
.quizz-live-answer-lock {
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: #d9f7eb;
    background: rgba(33,182,122,.14);
    border: 1px solid rgba(33,182,122,.24);
    border-radius: 8px;
    font-size: .78rem;
}
.quizz-live-answer-lock.is-rejected {
    color: #ffd7dc;
    background: rgba(255,105,125,.1);
    border-color: rgba(255,105,125,.24);
}
.quizz-live-answer.is-empty {
    color: var(--c-muted);
    background: rgba(255,255,255,.018);
    border-style: dashed;
}
.quizz-live-answer.is-typing {
    border-color: rgba(255,193,7,.24);
    background: rgba(255,193,7,.07);
}
.quizz-live-answer.is-expired {
    color: #ffe8a8;
    border-color: rgba(255,193,7,.26);
    background: rgba(255,193,7,.07);
}
.quizz-live-answer.is-correct {
    border-color: rgba(33,182,122,.3);
}
.quizz-live-answer.is-wrong {
    border-color: rgba(255,105,125,.26);
}
.quizz-live-answer.is-rejected {
    opacity: .72;
    border-color: rgba(255,105,125,.3);
}
.quizz-live-answer.is-rejected strong {
    color: var(--c-muted);
}
.quizz-live-answer.is-rejected .quizz-live-answer-main span {
    color: #ffd7dc;
    background: rgba(255,105,125,.1);
    border-color: rgba(255,105,125,.24);
}
.quizz-review-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: .55rem;
}
.quizz-review-btn {
    min-height: 28px;
    padding: .22rem .52rem;
    border-radius: 7px;
    font-size: .75rem;
    font-weight: 850;
    background: transparent;
}
.quizz-review-btn.is-accept {
    color: #95efc8;
    border: 1px solid rgba(33,182,122,.3);
}
.quizz-review-btn.is-reject {
    color: #ffb8c0;
    border: 1px solid rgba(255,105,125,.3);
}
.quizz-review-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.quizz-score-pill,
.quizz-flag-pill {
    min-width: 42px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .55rem;
    border-radius: 999px;
    color: #fff;
    background: #101827;
    border: 1px solid rgba(255,255,255,.08);
    font-size: .8rem;
    font-weight: 900;
}
.quizz-flag-pill {
    color: var(--c-muted);
}
.quizz-flag-pill.has-flags {
    color: #ffd98a;
    border-color: rgba(255,193,7,.26);
    background: rgba(255,193,7,.08);
}
.quizz-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 999px;
    background: #58657a;
}
.quizz-dot-on {
    background: #21b67a;
    box-shadow: 0 0 10px rgba(33,182,122,.5);
}
.quizz-anti-note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .85rem;
    color: #cfd8ea;
    background: rgba(255,193,7,.08);
    border: 1px solid rgba(255,193,7,.18);
    border-radius: 10px;
    font-size: .82rem;
}
@media (max-width: 992px) {
    .quizz-hero {
        align-items: stretch;
        flex-direction: column;
    }
    .quizz-final-hero {
        align-items: stretch;
        flex-direction: column;
    }
    .quizz-question-card {
        min-height: 0;
    }
    .quizz-player-heading,
    .quizz-player-head-actions,
    .quizz-player-phase {
        width: 100%;
    }
    .quizz-player-head-actions {
        margin-left: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .quizz-player-phase {
        min-width: 0;
        flex-basis: auto;
    }
    .quizz-kpis,
    .quizz-personal-stats-row.is-podium-row,
    .quizz-personal-stats-row.is-summary-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .quizz-form-grid {
        grid-template-columns: 1fr;
    }
    .quizz-top-actions {
        justify-content: flex-start;
    }
    .quizz-settings-layout,
    .quizz-meta-grid {
        grid-template-columns: 1fr;
    }
    .quizz-question-item summary {
        grid-template-columns: 34px 38px minmax(0, 1fr) auto;
    }
    .quizz-question-type {
        display: none;
    }
}
@media (max-width: 576px) {
    .quizz-hero {
        min-height: 260px;
        padding: 18px;
    }
    .quizz-hero-bg {
        object-position: center;
    }
    .quizz-kpis,
    .quizz-personal-stats-row.is-podium-row,
    .quizz-personal-stats-row.is-summary-row {
        grid-template-columns: 1fr;
    }
    .quizz-row {
        align-items: stretch;
        flex-direction: column;
    }
    .quizz-row .btn,
    .quizz-action-btn,
    .quizz-row form,
    .quizz-row form .btn {
        width: 100%;
    }
    .quizz-top-actions,
    .quizz-final-actions,
    .quizz-owner-utility-actions,
    .quizz-top-actions form,
    .quizz-final-actions form,
    .quizz-owner-utility-actions form,
    .quizz-owner-utility-btn,
    .quizz-room-delete-btn,
    .quizz-header-action,
    .quizz-final-hero .quizz-header-action {
        width: 100%;
    }
    .quizz-history-row {
        grid-template-columns: 1fr;
    }
    .quizz-history-content {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .quizz-history-delete-form,
    .quizz-history-delete {
        width: auto;
    }
    .quizz-history-actions {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: flex-start;
    }
    .quizz-history-rank,
    .quizz-history-stats,
    .quizz-history-open {
        width: auto;
    }
    .quizz-history-stats,
    .quizz-history-open {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
    .quizz-history-open {
        width: auto;
        flex: 1 1 auto;
        justify-content: center;
    }
    .quizz-history-stats > span {
        width: 96px;
        text-align: left;
    }
    .quizz-admin-controls-head {
        align-items: stretch;
        flex-direction: column;
    }
    .quizz-admin-actions-grid {
        grid-template-columns: 1fr;
    }
    .quizz-final-rank-row {
        align-items: flex-start;
        flex-direction: column;
    }
    .quizz-final-metrics {
        text-align: left;
    }
    .quizz-final-question-row {
        grid-template-columns: 34px minmax(0, 1fr);
    }
    .quizz-row-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .quizz-row-actions form,
    .quizz-icon-action {
        width: 100%;
    }
    .quizz-card-head,
    .quizz-settings-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .quizz-settings-actions .btn,
    .quizz-settings-actions .quizz-danger-btn,
    .quizz-settings-actions form {
        width: 100%;
    }
    .quizz-answer-submit {
        width: 100%;
        justify-self: stretch;
    }
    .quizz-answer-options {
        grid-template-columns: 1fr;
    }
    .quizz-timebar-expired {
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }
    .quizz-timebar-expired small {
        text-align: left;
    }
    .quizz-review-row {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .quizz-compact-score-list {
        max-height: none;
        overflow: visible;
    }
}

/* ---------- Pronos ------------- */
.pronos-page {
    --prono-panel: #182131;
    --prono-soft: #101827;
    --prono-border: rgba(120,175,255,.14);
    --prono-green: #21b67a;
    --prono-gold: #ffd166;
    --prono-red: #ff7d8f;
}
.pronos-hero {
    position: relative;
    overflow: hidden;
    min-height: 240px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.1);
    background: #13191f;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.pronos-competition-hero {
    min-height: 240px;
    background: #101827;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 38px rgba(0,0,0,.18);
}
.pronos-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .58;
}
.pronos-home-hero .pronos-hero-bg {
    opacity: .72;
}
.pronos-competition-hero .pronos-hero-bg {
    opacity: .76;
    filter: saturate(1.06) contrast(1.08) brightness(.9);
    object-position: center;
    transform: scale(1.015);
}
.pronos-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10,16,30,.94), rgba(10,16,30,.65) 48%, rgba(10,16,30,.42));
}
.pronos-competition-hero .pronos-hero-overlay {
    background:
        linear-gradient(90deg, rgba(10,16,30,.92) 0%, rgba(10,16,30,.66) 42%, rgba(10,16,30,.2) 72%, rgba(10,16,30,.38) 100%),
        linear-gradient(180deg, rgba(10,16,30,.14) 0%, rgba(10,16,30,.06) 42%, rgba(10,16,30,.84) 100%);
}
.pronos-hero-content,
.pronos-hero-actions,
.pronos-hero .quizz-header-action,
.pronos-hero-badge {
    position: relative;
    z-index: 1;
}
.pronos-hero-content {
    max-width: 720px;
}
.pronos-hero h2 {
    font-size: clamp(1.65rem, 1.65rem, 2.15rem);
    font-weight: 950;
    letter-spacing: 0;
}
.pronos-hero-copy {
    max-width: 720px;
    color: #d8e2ef;
    font-size: .95rem;
    line-height: 1.45;
}
.pronos-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.pronos-hero-actions form {
    margin: 0;
}
.pronos-hero-badge {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .48rem .78rem;
    color: #d9f7eb;
    background: rgba(33,182,122,.12);
    border: 1px solid rgba(33,182,122,.3);
    border-radius: 8px;
    font-size: .86rem;
    font-weight: 850;
}
.pronos-competition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
.pronos-competition-card {
    overflow: hidden;
    min-height: 204px;
    display: grid;
    position: relative;
    isolation: isolate;
    color: #dce8f7;
    text-decoration: none;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(120,175,255,.14);
    border-radius: 10px;
    transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.pronos-competition-card:hover,
.pronos-competition-card:focus {
    color: #fff;
    border-color: rgba(120,175,255,.36);
    background: rgba(120,175,255,.055);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    transform: translateY(-1px);
}
.pronos-competition-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #101827;
}
.pronos-competition-media::before,
.pronos-competition-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.pronos-competition-media::before {
    background:
        linear-gradient(180deg, rgba(10,16,30,.08) 0%, rgba(10,16,30,.18) 32%, rgba(10,16,30,.7) 74%, rgba(10,16,30,.94) 100%),
        linear-gradient(90deg, rgba(10,16,30,.58), rgba(10,16,30,.16) 52%, rgba(10,16,30,.24));
}
.pronos-competition-media::after {
    inset: 0;
    background: linear-gradient(0deg, rgba(16,24,39,.5), transparent 42%);
}
.pronos-competition-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: .9;
    transition: opacity .16s ease, transform .16s ease;
}
.pronos-competition-card:hover .pronos-competition-media img,
.pronos-competition-card:focus .pronos-competition-media img {
    opacity: 1;
    transform: scale(1.03);
}
.pronos-competition-body {
    position: relative;
    z-index: 1;
    align-self: end;
    min-width: 0;
    display: grid;
    gap: .45rem;
    padding: 4.8rem 1rem 1rem;
    text-shadow: 0 1px 12px rgba(0,0,0,.55);
}
.pronos-competition-body strong {
    color: #fff;
    font-size: 1.14rem;
    line-height: 1.18;
}
.pronos-competition-body small {
    color: #cfe0f2;
    font-size: .82rem;
    line-height: 1.3;
}
.pronos-competition-topline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pronos-competition-open {
    position: absolute;
    z-index: 2;
    right: 10px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #a9c9ff;
    background: rgba(16,24,39,.82);
    border: 1px solid rgba(120,175,255,.18);
    border-radius: 8px;
}
.pronos-status-pill,
.pronos-joined-pill {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .18rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 850;
    line-height: 1;
}
.pronos-status-pill {
    color: #dce8f7;
    background: rgba(120,175,255,.08);
    border: 1px solid rgba(120,175,255,.18);
}
.pronos-joined-pill {
    color: #d9f7eb;
    background: rgba(33,182,122,.1);
    border: 1px solid rgba(33,182,122,.24);
}
.pronos-todo-pill {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .18rem .5rem;
    color: #ffe8a8;
    background: rgba(255,193,7,.1);
    border: 1px solid rgba(255,193,7,.26);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
}
.pronos-todo-pill.is-clear {
    color: #d9f7eb;
    background: rgba(33,182,122,.08);
    border-color: rgba(33,182,122,.22);
}
.pronos-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}
.pronos-main,
.pronos-side {
    min-width: 0;
}
.pronos-join-panel {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: .95rem;
    color: #dce8f7;
    background: rgba(255,193,7,.08);
    border: 1px solid rgba(255,193,7,.22);
    border-radius: 10px;
}
.pronos-join-panel > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #ffe8a8;
    background: rgba(255,193,7,.08);
    border: 1px solid rgba(255,193,7,.18);
    border-radius: 10px;
}
.pronos-join-panel strong,
.pronos-join-panel span {
    display: block;
}
.pronos-join-panel strong {
    color: #fff;
    font-weight: 900;
}
.pronos-join-panel span {
    margin-top: .12rem;
    color: var(--c-muted);
    font-size: .82rem;
    line-height: 1.35;
}
.pronos-join-panel form {
    margin: 0;
}
.pronos-viewer-panel {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: .72rem;
    padding: .82rem .9rem;
    color: #dce8f7;
    background: rgba(120,175,255,.055);
    border: 1px solid rgba(120,175,255,.2);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.pronos-viewer-panel.is-own {
    background: rgba(33,182,122,.06);
    border-color: rgba(33,182,122,.22);
}
.pronos-viewer-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #cfe0ff;
    background: rgba(120,175,255,.1);
    border: 1px solid rgba(120,175,255,.22);
    border-radius: 10px;
}
.pronos-viewer-panel.is-own .pronos-viewer-icon {
    color: #d9f7eb;
    background: rgba(33,182,122,.1);
    border-color: rgba(33,182,122,.22);
}
.pronos-viewer-copy {
    display: grid;
    gap: .12rem;
}
.pronos-viewer-copy strong {
    color: #fff;
    font-size: .95rem;
    font-weight: 950;
    line-height: 1.15;
}
.pronos-viewer-copy span {
    color: var(--c-muted);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.25;
}
.pronos-viewer-score {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: .48rem;
    color: #d9f7eb;
    font-size: .86rem;
    font-weight: 950;
    white-space: nowrap;
}
.pronos-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}
.pronos-spectator-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}
.pronos-spectator-note {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .5rem .68rem;
    color: #cfe0ff;
    background: rgba(120,175,255,.07);
    border: 1px solid rgba(120,175,255,.18);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 850;
    line-height: 1.2;
}
.pronos-spectator-note i {
    color: #a9c9ff;
    font-size: .86rem;
}
.pronos-filter-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}
.pronos-filter-bar .pronos-filter-tabs {
    margin: 0;
}
.pronos-filter-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    padding: .42rem .72rem;
    color: #dce8f7;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(120,175,255,.14);
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 900;
    line-height: 1;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.pronos-filter-btn:hover,
.pronos-filter-btn:focus,
.pronos-filter-btn.is-active {
    color: #fff;
    background: rgba(120,175,255,.1);
    border-color: rgba(120,175,255,.34);
}
.pronos-filter-btn.is-active {
    box-shadow: inset 0 -2px 0 rgba(120,175,255,.72);
}
.pronos-filter-count {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .34rem;
    padding: .38rem .62rem;
    color: #d9f7eb;
    background: rgba(33,182,122,.08);
    border: 1px solid rgba(33,182,122,.22);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
    white-space: nowrap;
}
.pronos-filter-count[data-prono-filter-count="open"] {
    color: #ffe8a8;
    background: rgba(255,193,7,.09);
    border-color: rgba(255,193,7,.24);
}
.pronos-filter-count[data-prono-filter-count="bet"] {
    color: #cfe0ff;
    background: rgba(120,175,255,.09);
    border-color: rgba(120,175,255,.24);
}
.pronos-filter-count[data-prono-filter-count="unavailable"] {
    color: #dce8f7;
    background: rgba(255,255,255,.055);
    border-color: rgba(255,255,255,.14);
}
.pronos-filter-count[data-prono-filter-count="finished"] {
    color: #cfd8e6;
    background: rgba(148,163,184,.1);
    border-color: rgba(148,163,184,.24);
}
.pronos-filter-count.is-spectator-count {
    color: #d9f7eb;
    background: rgba(33,182,122,.09);
    border-color: rgba(33,182,122,.24);
}
.pronos-filter-count strong {
    color: #fff;
    font-size: .86rem;
    font-weight: 950;
    line-height: 1;
}
.pronos-filter-count span {
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
}
.pronos-match-list {
    max-height: min(980px, 76svh);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 12px;
    padding-right: .25rem;
    scrollbar-color: rgba(120,175,255,.36) rgba(255,255,255,.04);
    scrollbar-width: thin;
}
.pronos-match-list::-webkit-scrollbar {
    width: 8px;
}
.pronos-match-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,.04);
    border-radius: 999px;
}
.pronos-match-list::-webkit-scrollbar-thumb {
    background: rgba(120,175,255,.34);
    border-radius: 999px;
}
.pronos-match-card {
    position: relative;
    padding: .95rem;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(120,175,255,.14);
}
.pronos-match-card.is-locked {
    opacity: .76;
}
.pronos-match-card.is-live {
    border-color: rgba(255,75,105,.42);
    box-shadow: 0 0 0 1px rgba(255,75,105,.08), 0 10px 28px rgba(255,75,105,.08);
}
.pronos-match-card.is-finished {
    border-color: rgba(148,163,184,.16);
    background: rgba(148,163,184,.035);
}
.pronos-match-card.has-no-odds {
    border-color: rgba(255,193,7,.16);
    background: rgba(255,193,7,.025);
}
.pronos-match-card.has-score-error {
    border-color: rgba(255,75,105,.68);
    box-shadow: 0 0 0 1px rgba(255,75,105,.18), 0 0 0 .18rem rgba(255,75,105,.1);
}
.pronos-finished-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: .42rem 0 .06rem;
    color: #cfd8e6;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pronos-finished-divider::before,
.pronos-finished-divider::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    background: rgba(148,163,184,.2);
}
.pronos-match-datebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: -.2rem 0 .34rem;
    color: #fff;
    font-size: .86rem;
    font-weight: 900;
    text-align: center;
}
.pronos-match-datebar::before {
    content: none;
}
.pronos-match-datebar span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pronos-match-live-pill {
    position: absolute;
    top: .64rem;
    right: .64rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .2rem .48rem;
    color: #fff;
    font-size: .68rem;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
    background: rgba(255,75,105,.92);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    box-shadow: 0 0 16px rgba(255,75,105,.24);
}
.pronos-match-live-pill i {
    font-size: .72rem;
}
.pronos-match-datebar small {
    grid-column: 3;
    justify-self: end;
    color: var(--c-muted);
    font-size: .72rem;
    font-weight: 850;
    white-space: nowrap;
}
.pronos-match-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 122px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: .18rem;
}
.pronos-team-side {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: .38rem;
    text-align: center;
}
.pronos-team-flag {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    overflow: hidden;
    font-size: 2rem;
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.pronos-team-flag img {
    width: 44px;
    height: 30px;
    display: block;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.pronos-team-flag img.pronos-team-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    padding: 4px;
    background: rgba(255,255,255,.92);
    border-radius: 10px;
}
.pronos-team-initials {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: #d9f7eb;
    background: rgba(33,182,122,.1);
    border: 1px solid rgba(33,182,122,.24);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.16);
    font-size: .9rem;
    font-weight: 950;
    letter-spacing: .03em;
}
.pronos-team-side strong {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.15;
}
.pronos-player-name {
    width: 100%;
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: .08rem;
    line-height: 1.08;
}
.pronos-team-side .pronos-player-name strong {
    display: block;
}
.pronos-player-name > span {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    color: var(--c-muted);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pronos-score-zone {
    display: grid;
    justify-items: center;
    gap: .28rem;
    padding-bottom: .14rem;
}
.pronos-score-zone small {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--c-muted);
    font-size: .72rem;
    font-weight: 850;
}
.pronos-score-zone small::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #ffd166;
    box-shadow: 0 0 10px rgba(255,209,102,.5);
}
.pronos-score-inputs {
    display: grid;
    grid-template-columns: 46px 16px 46px;
    align-items: center;
    gap: 5px;
}
.pronos-score-inputs span {
    color: var(--c-muted);
    font-weight: 900;
    text-align: center;
}
.pronos-score-inputs .form-control {
    width: 46px;
    height: 48px;
    min-height: 48px;
    padding: .2rem;
    color: #fff;
    text-align: center;
    background: #101827;
    border: 1px solid rgba(255,209,102,.42);
    border-radius: 8px;
    font-size: 1.16rem;
    font-weight: 950;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.pronos-score-inputs .form-control.is-invalid {
    border-color: rgba(255,75,105,.86);
    box-shadow: 0 0 0 .16rem rgba(255,75,105,.16);
}
.pronos-page input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}
.pronos-page input[type="number"]::-webkit-outer-spin-button,
.pronos-page input[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}
.pronos-score-inputs .form-control:focus {
    color: #fff;
    background: #101827;
    border-color: rgba(255,209,102,.72);
    box-shadow: 0 0 0 .16rem rgba(255,209,102,.12);
}
.pronos-score-options {
    width: min(132px, 100%);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}
.pronos-score-option {
    min-width: 0;
    height: 28px;
    padding: 0 .18rem;
    color: #dfe8f6;
    background: #101827;
    border: 1px solid rgba(255,209,102,.28);
    border-radius: 7px;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.pronos-score-option:hover:not(:disabled),
.pronos-score-option:focus-visible {
    color: #fff;
    background: rgba(255,209,102,.14);
    border-color: rgba(255,209,102,.68);
}
.pronos-score-option.is-selected {
    color: #17202f;
    background: linear-gradient(135deg, #ffe08a, #f3b63f);
    border-color: rgba(255,224,138,.92);
}
.pronos-score-option:disabled {
    cursor: not-allowed;
    opacity: .46;
}
.pronos-score-option.is-outcome-locked:not(.is-selected) {
    cursor: not-allowed;
    opacity: .54;
}
.pronos-market-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(max-content, 1fr));
    gap: 6px;
    width: min(252px, 100%);
    justify-self: center;
}
.pronos-market-row.has-two-options {
    grid-template-columns: repeat(2, minmax(max-content, 1fr));
    width: min(168px, 100%);
}
.pronos-market-option {
    position: relative;
    min-width: 72px;
    min-height: 44px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    column-gap: 4px;
    row-gap: 1px;
    padding: .34rem .38rem;
    color: #dce8f7;
    background: #101827;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 7px;
    cursor: pointer;
}
.pronos-market-option:has(input:checked),
.pronos-market-option.is-selected {
    color: #fff;
    border-color: rgba(255,209,102,.62);
    background: rgba(255,209,102,.1);
    box-shadow: inset 0 -2px 0 rgba(255,209,102,.82);
}
.pronos-market-option.is-readonly {
    cursor: default;
}
.pronos-market-option.is-disabled {
    cursor: not-allowed;
    opacity: .45;
}
.pronos-market-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pronos-market-option span {
    color: var(--c-muted);
    font-size: .68rem;
    font-weight: 950;
    line-height: 1;
    text-align: center;
}
.pronos-market-option strong {
    min-width: max-content;
    overflow: visible;
    color: #fff;
    font-size: .78rem;
    font-weight: 950;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}
.pronos-market-option small {
    grid-column: 1 / -1;
    min-width: max-content;
    overflow: visible;
    color: #ffe8a8;
    font-size: .62rem;
    font-weight: 850;
    line-height: 1.05;
    text-align: center;
    white-space: nowrap;
}
.pronos-odds-pending {
    display: flex;
    align-items: flex-start;
    gap: .46rem;
    padding: .5rem .58rem;
    color: #ffe8a8;
    background: rgba(255,193,7,.08);
    border: 1px solid rgba(255,193,7,.18);
    border-radius: 8px;
    font-size: .76rem;
    font-weight: 820;
    line-height: 1.3;
}
.pronos-odds-pending i {
    flex: 0 0 auto;
    margin-top: .08rem;
}
.pronos-match-actions {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 92px 26px;
    align-items: center;
    gap: 8px;
}
.pronos-match-actions.has-locked-odd {
    grid-template-columns: 26px 92px minmax(0, 1fr) 92px 26px;
}
.pronos-match-actions.is-settled {
    grid-template-columns: minmax(0, 1fr) 108px;
}
.pronos-match-actions.is-empty-bet {
    grid-template-columns: 1fr;
}
.pronos-action-gutter {
    width: 26px;
    min-height: 38px;
}
.pronos-locked-ticket {
    min-height: 38px;
    display: grid;
    align-content: center;
    justify-items: center;
    padding: .32rem .46rem;
    color: #d7e6ff;
    background: rgba(120,175,255,.08);
    border: 1px solid rgba(120,175,255,.22);
    border-radius: 8px;
}
.pronos-locked-ticket[hidden] {
    display: none !important;
}
.pronos-locked-ticket span,
.pronos-locked-ticket strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .22rem;
    line-height: 1.05;
    text-align: center;
    white-space: nowrap;
}
.pronos-locked-ticket span {
    color: var(--c-muted);
    font-size: .58rem;
    font-weight: 850;
}
.pronos-locked-ticket span i {
    color: #a9c9ff;
    font-size: .58rem;
}
.pronos-locked-ticket strong {
    margin-top: .14rem;
    color: #fff;
    font-size: .78rem;
    font-weight: 950;
}
.pronos-ticket-meta {
    min-width: 0;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: .42rem;
    flex-wrap: wrap;
    padding: .38rem .52rem;
    color: #dce8f7;
    background: #101827;
    border: 1px solid rgba(120,175,255,.16);
    border-radius: 8px;
}
.pronos-ticket-meta > span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    overflow: hidden;
    color: var(--c-muted);
    font-size: .68rem;
    font-weight: 900;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pronos-ticket-meta > span i {
    color: #a9c9ff;
}
.pronos-ticket-meta > strong {
    color: #fff;
    font-size: .94rem;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
}
.pronos-ticket-meta > em {
    display: inline-flex;
    align-items: center;
    gap: .24rem;
    padding: .15rem .36rem;
    color: #ffe8a8;
    background: rgba(255,193,7,.09);
    border: 1px solid rgba(255,193,7,.22);
    border-radius: 999px;
    font-size: .62rem;
    font-style: normal;
    font-weight: 950;
    line-height: 1;
}
.pronos-no-bet-message {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    padding: .46rem .58rem;
    color: var(--c-muted);
    background: rgba(148,163,184,.07);
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 900;
}
.pronos-no-bet-message i {
    color: #a9b7c8;
}
.pronos-potential-box {
    min-height: 38px;
    display: grid;
    align-content: center;
    padding: .32rem .52rem;
    border-radius: 8px;
    color: #d9f7eb;
    background: rgba(33,182,122,.08);
    border: 1px solid rgba(33,182,122,.22);
}
.pronos-potential-box span,
.pronos-potential-box strong {
    display: block;
    text-align: center;
    line-height: 1.05;
}
.pronos-potential-box span {
    color: var(--c-muted);
    font-size: .62rem;
    font-weight: 850;
}
.pronos-potential-box strong {
    margin-top: .15rem;
    color: #d9f7eb;
    font-size: .8rem;
    font-weight: 950;
    white-space: nowrap;
}
.pronos-result-box.is-result-exact {
    color: #d9f7eb;
    background: rgba(33,182,122,.1);
    border-color: rgba(33,182,122,.34);
}
.pronos-result-box.is-result-exact strong {
    color: #d9f7eb;
}
.pronos-result-box.is-result-partial {
    color: #fff4c7;
    background: rgba(255,193,7,.1);
    border-color: rgba(255,209,102,.34);
}
.pronos-result-box.is-result-partial strong {
    color: #fff4c7;
}
.pronos-result-box.is-result-missed {
    color: #ffd5dd;
    background: rgba(255,75,105,.1);
    border-color: rgba(255,75,105,.34);
}
.pronos-result-box.is-result-missed strong {
    color: #ffd5dd;
}
.pronos-result-box.is-result-cancelled {
    color: #d9e4f2;
    background: rgba(148,163,184,.1);
    border-color: rgba(148,163,184,.3);
}
.pronos-result-box.is-result-cancelled strong {
    color: #d9e4f2;
}
.pronos-gain-tooltip .tooltip-inner {
    max-width: 230px;
    padding: .55rem .62rem;
    text-align: left;
    color: #e8f2ff;
    background: #0d1524;
    border: 1px solid rgba(120,175,255,.22);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.pronos-gain-tooltip-content {
    display: grid;
    gap: .26rem;
    min-width: 178px;
    font-size: .72rem;
    line-height: 1.18;
}
.pronos-gain-tooltip-content > span,
.pronos-gain-tooltip-content > strong {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
}
.pronos-gain-tooltip-content b {
    color: #fff;
    font-weight: 900;
}
.pronos-gain-tooltip-content em {
    color: #d9f7eb;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}
.pronos-gain-tooltip-content > strong {
    margin-top: .16rem;
    padding-top: .36rem;
    border-top: 1px solid rgba(255,255,255,.12);
}
.pronos-bonus-toggle span strong {
    color: #ffd166;
}
.pronos-bonus-toggle:has(input:checked) span strong {
    color: #101827;
}
.pronos-match-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: .85rem;
}
.pronos-match-head > div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pronos-match-head strong {
    color: #fff;
    font-weight: 900;
}
.pronos-odds-sync {
    display: inline-flex;
    align-items: center;
    gap: .36rem;
    color: var(--c-muted);
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
}
.pronos-odds-sync i {
    color: #a9c9ff;
}
.pronos-match-form {
    display: grid;
    gap: 12px;
}
.pronos-outcome-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.pronos-outcome-option {
    position: relative;
    min-width: 0;
    min-height: 78px;
    display: grid;
    align-content: center;
    gap: .34rem;
    padding: .78rem;
    cursor: pointer;
    color: #dce8f7;
    background: #101827;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.pronos-outcome-option:hover {
    border-color: rgba(120,175,255,.32);
    background: #121d2d;
}
.pronos-outcome-option:has(input:checked) {
    color: #fff;
    border-color: rgba(33,182,122,.45);
    background: rgba(33,182,122,.09);
    box-shadow: inset 3px 0 0 rgba(33,182,122,.78);
}
.pronos-outcome-option.is-disabled {
    cursor: not-allowed;
    opacity: .48;
}
.pronos-outcome-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pronos-outcome-team {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: .94rem;
    font-weight: 900;
    line-height: 1.15;
}
.pronos-outcome-odds {
    display: flex;
    align-items: baseline;
    gap: .38rem;
    color: #ffe8a8;
    font-size: 1.18rem;
    font-weight: 950;
    line-height: 1;
}
.pronos-outcome-odds small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--c-muted);
    font-size: .72rem;
    font-weight: 800;
}
.pronos-score-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 10px;
}
.pronos-score-row label {
    min-width: 0;
}
.pronos-score-row > label:not(.pronos-bonus-toggle) > span {
    display: block;
    margin-bottom: .32rem;
    color: var(--c-muted);
    font-size: .74rem;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pronos-score-row .form-control,
.pronos-global-card .form-control {
    min-height: 38px;
    color: #fff;
    background: #101827;
    border: 1px solid rgba(120,175,255,.18);
    border-radius: 8px;
}
.pronos-score-row .form-control:focus,
.pronos-global-card .form-control:focus {
    color: #fff;
    background: #101827;
    border-color: rgba(120,175,255,.5);
    box-shadow: 0 0 0 .2rem rgba(0,119,255,.12);
}
.pronos-score-separator {
    align-self: center;
    color: var(--c-muted);
    font-weight: 900;
    padding-top: 1.4rem;
    text-align: center;
}
.pronos-bonus-toggle {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #ffe8a8;
    background: rgba(255,193,7,.08);
    border: 1px solid rgba(255,193,7,.24);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.pronos-bonus-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pronos-bonus-toggle span {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .45rem .52rem;
    font-size: .78rem;
    font-weight: 900;
}
.pronos-bonus-toggle:has(input:checked) {
    color: #101827;
    background: #ffd166;
    border-color: #ffd166;
}
.pronos-bonus-toggle:has(input:disabled) {
    cursor: not-allowed;
    opacity: .5;
}
.pronos-autosave-state {
    width: 26px;
    min-height: 38px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    justify-self: center;
    color: var(--c-muted);
    font-size: .88rem;
    font-weight: 950;
    line-height: 1;
}
.pronos-autosave-state i {
    display: block;
    line-height: 1;
}
.pronos-autosave-state[data-state="saving"] {
    color: #a9c9ff;
}
.pronos-autosave-state[data-state="saved"] {
    color: #33d17a;
}
.pronos-autosave-state[data-state="error"] {
    color: #ff8aa1;
}
.pronos-prediction-summary {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    padding: .55rem .62rem;
    color: #dce8f7;
    background:
        linear-gradient(90deg, rgba(33,182,122,.11), rgba(120,175,255,.035)),
        rgba(255,255,255,.018);
    border: 1px solid rgba(33,182,122,.24);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.pronos-prediction-summary.is-global {
    grid-template-columns: 30px minmax(0, 1fr);
}
.pronos-prediction-summary.is-empty {
    color: #cfd8e6;
    background: rgba(148,163,184,.055);
    border-color: rgba(148,163,184,.2);
}
.pronos-prediction-summary.is-empty .pronos-prediction-summary-icon {
    color: #cfd8e6;
    background: rgba(148,163,184,.1);
    border-color: rgba(148,163,184,.24);
}
.pronos-prediction-summary.is-result-exact {
    color: #d9f7eb;
    background:
        linear-gradient(90deg, rgba(33,182,122,.2), rgba(33,182,122,.055)),
        rgba(33,182,122,.035);
    border-color: rgba(33,182,122,.42);
}
.pronos-prediction-summary.is-result-partial {
    color: #fff4c7;
    background:
        linear-gradient(90deg, rgba(255,209,102,.2), rgba(255,209,102,.055)),
        rgba(255,193,7,.035);
    border-color: rgba(255,209,102,.44);
}
.pronos-prediction-summary.is-result-missed {
    color: #ffd5dd;
    background:
        linear-gradient(90deg, rgba(255,75,105,.18), rgba(255,75,105,.045)),
        rgba(255,75,105,.03);
    border-color: rgba(255,75,105,.42);
}
.pronos-prediction-summary.is-result-cancelled {
    color: #d9e4f2;
    background:
        linear-gradient(90deg, rgba(148,163,184,.18), rgba(148,163,184,.045)),
        rgba(148,163,184,.03);
    border-color: rgba(148,163,184,.4);
}
.pronos-prediction-summary-icon {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    color: #d9f7eb;
    background: rgba(33,182,122,.1);
    border: 1px solid rgba(33,182,122,.26);
    border-radius: 8px;
    font-size: .95rem;
}
.pronos-prediction-summary.is-result-exact .pronos-prediction-summary-icon {
    color: #d9f7eb;
    background: rgba(33,182,122,.13);
    border-color: rgba(33,182,122,.34);
}
.pronos-prediction-summary.is-result-partial .pronos-prediction-summary-icon {
    color: #fff4c7;
    background: rgba(255,209,102,.12);
    border-color: rgba(255,209,102,.34);
}
.pronos-prediction-summary.is-result-missed .pronos-prediction-summary-icon {
    color: #ffd5dd;
    background: rgba(255,75,105,.12);
    border-color: rgba(255,75,105,.34);
}
.pronos-prediction-summary.is-result-cancelled .pronos-prediction-summary-icon {
    color: #d9e4f2;
    background: rgba(148,163,184,.12);
    border-color: rgba(148,163,184,.34);
}
.pronos-prediction-summary-main {
    min-width: 0;
    display: grid;
    gap: .12rem;
}
.pronos-prediction-summary-main strong,
.pronos-prediction-summary-main span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pronos-prediction-summary-main strong {
    color: #fff;
    font-size: .82rem;
    font-weight: 950;
    line-height: 1.1;
}
.pronos-prediction-summary-main span {
    color: var(--c-muted);
    font-size: .7rem;
    font-weight: 850;
    line-height: 1.1;
}
.pronos-prediction-summary-bonus {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    padding: 0 .48rem;
    color: #ffe8a8;
    background: rgba(255,193,7,.09);
    border: 1px solid rgba(255,193,7,.22);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 950;
    white-space: nowrap;
}
.pronos-prediction-summary-bonus i {
    font-size: .76rem;
}
.pronos-prediction-summary-badge {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .52rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 950;
    white-space: nowrap;
}
.pronos-prediction-summary.is-result-exact .pronos-prediction-summary-badge {
    color: #d9f7eb;
    background: rgba(33,182,122,.11);
    border: 1px solid rgba(33,182,122,.26);
}
.pronos-prediction-summary.is-result-partial .pronos-prediction-summary-badge {
    color: #fff4c7;
    background: rgba(255,209,102,.11);
    border: 1px solid rgba(255,209,102,.28);
}
.pronos-prediction-summary.is-result-missed .pronos-prediction-summary-badge {
    color: #ffd5dd;
    background: rgba(255,75,105,.11);
    border: 1px solid rgba(255,75,105,.28);
}
.pronos-prediction-summary.is-result-cancelled .pronos-prediction-summary-badge {
    color: #d9e4f2;
    background: rgba(148,163,184,.11);
    border: 1px solid rgba(148,163,184,.28);
}
.pronos-prediction-summary-points {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .52rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 950;
    white-space: nowrap;
}
.pronos-prediction-summary.is-result-exact .pronos-prediction-summary-points {
    color: #d9f7eb;
    background: rgba(33,182,122,.11);
    border: 1px solid rgba(33,182,122,.26);
}
.pronos-prediction-summary.is-result-partial .pronos-prediction-summary-points {
    color: #fff4c7;
    background: rgba(255,209,102,.11);
    border: 1px solid rgba(255,209,102,.28);
}
.pronos-prediction-summary.is-result-missed .pronos-prediction-summary-points {
    color: #ffd5dd;
    background: rgba(255,75,105,.11);
    border: 1px solid rgba(255,75,105,.28);
}
.pronos-global-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
.pronos-global-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-rows: minmax(52px, auto) minmax(54px, 1fr) auto auto;
    gap: 10px;
    margin: 0;
    padding: 1rem;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,209,102,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.pronos-global-card::before {
    content: "";
    position: absolute;
    top: -42px;
    right: -42px;
    width: 112px;
    height: 112px;
    border-radius: 999px;
    background: rgba(255,209,102,.09);
    pointer-events: none;
}
.pronos-global-card.has-prediction {
    border-color: rgba(33,182,122,.34);
    background: rgba(33,182,122,.055);
}
.pronos-global-card.is-readonly {
    border-color: rgba(120,175,255,.14);
}
.pronos-global-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: .7rem;
    padding-right: 74px;
}
.pronos-market-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #a9c9ff;
    background: #101827;
    border: 1px solid rgba(120,175,255,.16);
    border-radius: 10px;
}
.pronos-global-points {
    top: 0.55rem;
    right: 0.55rem;
    position: absolute;
    min-width: 58px;
    display: grid;
    justify-items: end;
    color: #ffe8a8;
    line-height: 1;
}
.pronos-global-points strong,
.pronos-global-points small {
    display: block;
}
.pronos-global-points strong {
    font-size: 1.22rem;
    font-weight: 950;
    letter-spacing: 0;
}
.pronos-global-points small {
    margin-top: .08rem;
    color: rgba(255,232,168,.82);
    font-size: .62rem;
    font-weight: 900;
}
.pronos-global-head strong {
    display: block;
    min-width: 0;
}
.pronos-global-head strong {
    color: #fff;
    font-size: .95rem;
    font-weight: 900;
    line-height: 1.15;
}
.pronos-global-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--c-muted);
    font-size: .82rem;
    line-height: 1.35;
}
.pronos-global-entry {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: center;
    gap: 8px;
}
.pronos-global-entry.is-readonly {
    grid-template-columns: minmax(0, 1fr);
}
.pronos-global-card.is-readonly .form-control:disabled {
    opacity: 1;
    color: #dce8f7;
    background: rgba(16,24,39,.82);
    border-color: rgba(120,175,255,.12);
}
.pronos-global-card .form-control,
.pronos-global-card .quizz-action-btn,
.pronos-global-card .pronos-prediction-summary {
    position: relative;
    z-index: 1;
}
.pronos-global-save-btn {
    width: 40px;
    height: 38px;
    min-height: 38px;
    padding: 0;
}
.pronos-global-save-btn i {
    margin: 0;
}
.pronos-global-card .quizz-action-btn,
.pronos-match-form .quizz-action-btn {
    border-color: rgba(33,182,122,.26);
}
.pronos-settled-podium-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}
.pronos-settled-podium-slot {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: .64rem;
    padding: .66rem .72rem;
    overflow: hidden;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 9px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.pronos-settled-podium-slot.is-placeholder {
    border-style: dashed;
    background: rgba(255,255,255,.018);
}
.pronos-settled-podium-slot.is-missed {
    border-color: rgba(255,75,105,.18);
}
.pronos-settled-podium-slot.is-global {
    border-color: rgba(120,175,255,.18);
}
.pronos-settled-podium-slot > .pronos-rank-icon {
    align-self: start;
    margin-top: .08rem;
}
.pronos-settled-podium-main {
    display: grid;
    gap: .18rem;
    min-width: 0;
}
.pronos-settled-podium-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .44rem;
}
.pronos-settled-podium-main strong,
.pronos-settled-podium-main span,
.pronos-settled-podium-main small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pronos-settled-podium-main strong {
    color: #fff;
    font-size: .9rem;
    font-weight: 950;
    line-height: 1.12;
}
.pronos-settled-podium-main > span:not(.pronos-settled-podium-type) {
    color: #cfd8e6;
    font-size: .76rem;
    font-weight: 850;
    line-height: 1.2;
}
.pronos-settled-podium-main small {
    color: var(--c-muted);
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.12;
}
.pronos-settled-podium-type {
    min-width: 0;
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .16rem .38rem;
    color: #d9f7eb;
    background: rgba(33,182,122,.08);
    border: 1px solid rgba(33,182,122,.22);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 950;
    line-height: 1;
}
.pronos-settled-podium-type i {
    flex: 0 0 auto;
    font-size: .7rem;
}
.pronos-settled-podium-type.is-empty {
    color: #cfd8e6;
    background: rgba(148,163,184,.08);
    border-color: rgba(148,163,184,.18);
}
.pronos-settled-podium-slot.is-missed .pronos-settled-podium-type {
    color: #ffd5dd;
    background: rgba(255,75,105,.1);
    border-color: rgba(255,75,105,.24);
}
.pronos-settled-podium-slot.is-global .pronos-settled-podium-type {
    color: #cfe0ff;
    background: rgba(120,175,255,.09);
    border-color: rgba(120,175,255,.24);
}
.pronos-settled-podium-points {
    flex: 0 0 auto;
    min-height: 28px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .18rem .48rem;
    color: #ffe8a8;
    background: rgba(255,193,7,.1);
    border: 1px solid rgba(255,193,7,.28);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    font-size: .7rem;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
}
.pronos-settled-podium-points strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 950;
}
.pronos-admin-modal .modal-content {
    color: #dce8f7;
    background: #101827;
    border: 1px solid rgba(120,175,255,.18);
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.pronos-admin-modal .modal-header {
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.pronos-admin-modal .modal-title {
    color: #fff;
    font-weight: 950;
}
.pronos-admin-modal .modal-header small {
    color: var(--c-muted);
    font-size: .78rem;
    font-weight: 800;
}
.pronos-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.pronos-admin-grid > section {
    min-width: 0;
}
.pronos-admin-grid > section:last-child {
    grid-column: 1 / -1;
}
.pronos-admin-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.pronos-admin-section-head strong {
    color: #fff;
    font-size: .9rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.pronos-admin-section-head span,
.pronos-admin-market-title span {
    color: #ffe8a8;
    font-size: .74rem;
    font-weight: 900;
    white-space: nowrap;
}
.pronos-admin-result-list,
.pronos-admin-global-form,
.pronos-admin-log-list {
    display: grid;
    gap: 10px;
}
.pronos-admin-result-list,
.pronos-admin-global-form {
    max-height: min(520px, 58vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}
.pronos-admin-result-form {
    display: grid;
    gap: .62rem;
    padding: .82rem;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
}
.pronos-admin-result-meta strong,
.pronos-admin-result-meta small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pronos-admin-result-meta strong {
    color: #fff;
    font-size: .86rem;
    font-weight: 950;
}
.pronos-admin-result-meta small {
    margin-top: .12rem;
    color: var(--c-muted);
    font-size: .72rem;
    font-weight: 800;
}
.pronos-admin-result-score {
    display: grid;
    grid-template-columns: 70px 12px 70px minmax(92px, auto);
    align-items: center;
    gap: 8px;
}
.pronos-admin-result-score .form-control {
    height: 38px;
    color: #fff;
    text-align: center;
    font-weight: 950;
    background: rgba(16,24,39,.78);
    border-color: rgba(120,175,255,.16);
}
.pronos-admin-result-score span {
    color: var(--c-muted);
    text-align: center;
    font-weight: 950;
}
.pronos-admin-result-score .quizz-action-btn {
    min-height: 38px;
    padding-inline: .72rem;
}
.pronos-admin-market,
.pronos-admin-log {
    padding: .82rem;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
}
.pronos-admin-market-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: .58rem;
}
.pronos-admin-market-title strong {
    min-width: 0;
    color: #fff;
    font-size: .88rem;
    font-weight: 950;
}
.pronos-admin-prediction-list {
    display: grid;
    gap: 7px;
}
.pronos-admin-prediction-option {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: .58rem .62rem;
    background: rgba(16,24,39,.78);
    border: 1px solid rgba(120,175,255,.12);
    border-radius: 8px;
    cursor: pointer;
}
.pronos-admin-prediction-option:has(input:checked) {
    background: rgba(33,182,122,.09);
    border-color: rgba(33,182,122,.34);
}
.pronos-admin-prediction-option input {
    accent-color: #21b67a;
}
.pronos-admin-prediction-option strong,
.pronos-admin-prediction-option small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pronos-admin-prediction-option strong {
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
}
.pronos-admin-prediction-option small {
    margin-top: .1rem;
    color: var(--c-muted);
    font-size: .72rem;
    font-weight: 800;
}
.pronos-admin-prediction-option em {
    color: #d9f7eb;
    font-style: normal;
    font-size: .72rem;
    font-weight: 950;
    white-space: nowrap;
}
.pronos-admin-actions {
    display: flex;
    justify-content: flex-end;
}
.pronos-admin-log {
    padding: 0;
    overflow: hidden;
}
.pronos-admin-log summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: .68rem .76rem;
    cursor: pointer;
}
.pronos-admin-log summary::-webkit-details-marker {
    display: none;
}
.pronos-admin-log summary strong,
.pronos-admin-log summary small {
    display: block;
}
.pronos-admin-log summary strong {
    color: #fff;
    font-size: .78rem;
    font-weight: 950;
}
.pronos-admin-log summary small {
    margin-top: .08rem;
    color: var(--c-muted);
    font-size: .68rem;
    font-weight: 800;
}
.pronos-admin-log summary i {
    color: #d9f7eb;
}
.pronos-admin-log pre {
    margin: 0;
    padding: .68rem .76rem;
    color: #dce8f7;
    background: #0c1320;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: .72rem;
    line-height: 1.32;
    white-space: pre-wrap;
}
.pronos-admin-empty {
    padding: .62rem .68rem;
    color: var(--c-muted);
    background: rgba(255,255,255,.025);
    border: 1px dashed rgba(255,255,255,.12);
    border-radius: 8px;
    font-size: .76rem;
    font-weight: 800;
}
.pronos-ranking-list,
.pronos-nav-list {
    display: grid;
    gap: 8px;
}
.pronos-ranking-head {
    align-items: flex-start;
}
.pronos-ranking-head > div:first-child {
    min-width: 0;
}
.pronos-ranking-switch {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(120,175,255,.14);
    border-radius: 9px;
}
.pronos-ranking-switch-btn {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .32rem;
    padding: .34rem .48rem;
    color: #dce8f7;
    text-decoration: none;
    border-radius: 7px;
    font-size: .72rem;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.pronos-ranking-switch-btn:hover,
.pronos-ranking-switch-btn:focus,
.pronos-ranking-switch-btn.is-active {
    color: #fff;
    text-decoration: none;
    background: rgba(120,175,255,.12);
}
.pronos-ranking-switch-btn.is-active {
    box-shadow: inset 0 -2px 0 rgba(120,175,255,.78);
}
.pronos-ranking-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: .82rem;
    padding: .64rem .68rem;
    color: #dce8f7;
    text-decoration: none;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 9px;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.pronos-ranking-row:hover,
.pronos-ranking-row:focus {
    color: #fff;
    text-decoration: none;
    background: rgba(120,175,255,.055);
    border-color: rgba(120,175,255,.28);
    transform: translateY(-1px);
}
.pronos-ranking-row.is-podium {
    border-color: rgba(255,255,255,.11);
    background: rgba(255,255,255,.035);
}
.pronos-ranking-row.is-me {
    border-color: rgba(33,182,122,.28);
    background: rgba(33,182,122,.07);
}
.pronos-ranking-row.is-selected {
    border-color: rgba(120,175,255,.44);
    background:
        linear-gradient(90deg, rgba(120,175,255,.1), rgba(33,182,122,.035)),
        rgba(255,255,255,.03);
    box-shadow: inset 3px 0 0 rgba(120,175,255,.72);
}
.pronos-ranking-place {
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pronos-rank-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: .92rem;
}
.pronos-rank-number {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #ffe8a8;
    background: rgba(255,193,7,.08);
    border: 1px solid rgba(255,193,7,.18);
    border-radius: 9px;
    font-size: .78rem;
    font-weight: 950;
}
.pronos-ranking-main > strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pronos-ranking-main > strong {
    color: #fff;
    font-size: .86rem;
    font-weight: 900;
}
.pronos-ranking-meta {
    display: flex;
    align-items: center;
    gap: .56rem;
    flex-wrap: wrap;
    min-width: 0;
    margin-top: .28rem;
    color: var(--c-muted);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.15;
}
.pronos-ranking-hit {
    display: inline-flex;
    align-items: center;
    gap: .24rem;
    min-height: 22px;
    padding: .16rem .38rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 950;
    white-space: nowrap;
}
.pronos-ranking-hit i {
    font-size: .76rem;
}
.pronos-ranking-hit.is-perfect {
    color: #d9f7eb;
    background: rgba(33,182,122,.09);
    border: 1px solid rgba(33,182,122,.24);
}
.pronos-ranking-hit.is-ok {
    color: #fff4c7;
    background: rgba(255,209,102,.09);
    border: 1px solid rgba(255,209,102,.24);
}
.pronos-ranking-hit strong {
    color: #fff;
    font-size: .76rem;
    line-height: 1;
}
.pronos-ranking-side {
    display: grid;
    justify-items: end;
    gap: .42rem;
}
.pronos-bonus-chip {
    display: inline-flex;
    align-items: center;
    gap: .18rem;
    min-height: 22px;
    padding: .16rem .42rem;
    color: #ffe8a8;
    background: rgba(255,193,7,.08);
    border: 1px solid rgba(255,193,7,.22);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    font-size: .7rem;
    font-weight: 950;
    white-space: nowrap;
}
.pronos-bonus-chip i {
    font-size: .72rem;
}
.pronos-bonus-chip strong {
    color: #fff;
    font-size: .76rem;
    line-height: 1;
}
.pronos-bonus-chip em {
    color: rgba(255,232,168,.76);
    font-style: normal;
    font-size: .66rem;
}
.pronos-ranking-points {
    color: #d9f7eb;
    font-size: .86rem;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
}
.pronos-nav-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: .62rem .68rem;
    color: #dce8f7;
    text-decoration: none;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 9px;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.pronos-nav-list a:hover,
.pronos-nav-list a:focus,
.pronos-nav-list a.is-active {
    color: #fff;
    border-color: rgba(120,175,255,.3);
    background: rgba(120,175,255,.07);
}
.pronos-nav-list span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .86rem;
    font-weight: 900;
}
.pronos-nav-list small {
    flex: 0 0 auto;
    color: var(--c-muted);
    font-size: .72rem;
    font-weight: 800;
}
@media (max-width: 992px) {
    .pronos-layout {
        grid-template-columns: 1fr;
    }
    .pronos-admin-grid {
        grid-template-columns: 1fr;
    }
    .pronos-hero {
        align-items: flex-start;
        flex-direction: column;
    }
    .pronos-competition-hero {
        min-height: 240px;
    }
    .pronos-hero-actions {
        justify-content: flex-start;
    }
}
@media (min-width: 769px) and (max-width: 991.98px) {
    .pronos-match-list {
        max-height: 72svh;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pronos-match-card {
        padding: .78rem;
    }
    .pronos-match-board {
        grid-template-columns: minmax(0, 1fr) 106px minmax(0, 1fr);
        gap: 8px;
    }
    .pronos-team-flag {
        width: 42px;
        height: 42px;
        font-size: 1.78rem;
    }
    .pronos-team-flag img.pronos-team-logo {
        width: 42px;
        height: 42px;
    }
    .pronos-team-side strong {
        font-size: .76rem;
    }
    .pronos-score-inputs {
        grid-template-columns: 38px 12px 38px;
        gap: 4px;
    }
    .pronos-score-inputs .form-control {
        width: 38px;
        height: 40px;
        min-height: 40px;
        font-size: 1rem;
    }
    .pronos-market-row {
        width: 100%;
    }
    .pronos-market-option {
        padding: .32rem .3rem;
    }
    .pronos-match-actions {
        grid-template-columns: 24px minmax(0, 1fr) 84px 24px;
        gap: 6px;
    }
    .pronos-match-actions.has-locked-odd {
        grid-template-columns: 24px 84px minmax(0, 1fr) 84px 24px;
    }
    .pronos-action-gutter,
    .pronos-autosave-state {
        width: 24px;
    }
    .pronos-bonus-toggle span {
        padding: .42rem .48rem;
        font-size: .74rem;
    }
}
@media (max-width: 768px) {
    .pronos-outcome-grid,
    .pronos-score-row,
    .pronos-join-panel {
        grid-template-columns: 1fr;
    }
    .pronos-score-separator {
        display: none;
    }
    .pronos-score-row .quizz-action-btn,
    .pronos-match-actions,
    .pronos-bonus-toggle,
    .pronos-join-panel .quizz-header-action,
    .pronos-join-panel form,
    .pronos-hero-actions,
    .pronos-hero-actions form,
    .pronos-hero-actions .quizz-header-action,
    .pronos-hero-badge {
        width: 100%;
    }
    .pronos-match-head {
        flex-direction: column;
    }
    .pronos-odds-sync {
        white-space: normal;
    }
    .pronos-match-actions {
        grid-template-columns: 22px minmax(0, 1fr) 84px 22px;
        gap: 6px;
    }
    .pronos-match-actions.has-locked-odd {
        grid-template-columns: 22px 84px minmax(0, 1fr) 84px 22px;
    }
    .pronos-match-actions.is-settled,
    .pronos-match-actions.is-empty-bet {
        grid-template-columns: 1fr;
    }
    .pronos-action-gutter,
    .pronos-autosave-state {
        width: 22px;
    }
    .pronos-viewer-panel {
        grid-template-columns: 38px minmax(0, 1fr);
    }
    .pronos-viewer-icon {
        width: 38px;
        height: 38px;
    }
    .pronos-viewer-score {
        grid-column: 2;
        justify-self: start;
    }
    .pronos-settled-podium-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 576px) {
    .pronos-hero {
        min-height: 260px;
        padding: 18px;
    }
    .pronos-competition-grid,
    .pronos-global-grid {
        grid-template-columns: 1fr;
    }
    .pronos-admin-result-score {
        grid-template-columns: 1fr 12px 1fr;
    }
    .pronos-admin-result-score .quizz-action-btn {
        grid-column: 1 / -1;
        width: 100%;
    }
    .pronos-ranking-row {
        grid-template-columns: 34px minmax(0, 1fr) auto;
    }
    .pronos-ranking-side {
        justify-self: end;
    }
    .pronos-match-list {
        max-height: 66svh;
        grid-template-columns: 1fr;
        padding-right: .15rem;
    }
    .pronos-match-board {
        grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
        gap: 8px;
    }
    .pronos-settled-podium-slot {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: .64rem;
        padding: .72rem;
    }
    .pronos-team-flag {
        width: 44px;
        height: 44px;
        font-size: 1.82rem;
    }
    .pronos-team-flag img {
        width: 42px;
        height: 28px;
    }
    .pronos-team-flag img.pronos-team-logo {
        width: 42px;
        height: 42px;
    }
    .pronos-score-inputs {
        grid-template-columns: 42px 14px 42px;
    }
    .pronos-score-inputs .form-control {
        width: 42px;
        height: 44px;
        min-height: 44px;
    }
    .pronos-market-row {
        width: 100%;
    }
}

/* ---------- Undercover ------------- */
.undercover-page {
    --undercover-panel: #182131;
    --undercover-soft: #101827;
    --undercover-border: rgba(120,175,255,.16);
    --undercover-green: #21b67a;
    --undercover-gold: #ffd166;
    --undercover-red: #ff7d8f;
}
.undercover-hero {
    position: relative;
    overflow: hidden;
    min-height: 240px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.1);
    background: #101827;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 38px rgba(0,0,0,.18);
}
.undercover-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .78;
    filter: saturate(1.06) contrast(1.08) brightness(.9);
    transform: scale(1.01);
}
.undercover-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(9,14,25,.94) 0%, rgba(9,14,25,.72) 44%, rgba(9,14,25,.34) 76%, rgba(9,14,25,.52) 100%),
        linear-gradient(180deg, rgba(9,14,25,.08) 0%, rgba(9,14,25,.12) 48%, rgba(9,14,25,.86) 100%);
}
.undercover-hero-content,
.undercover-hero-stats,
.undercover-hero .quizz-eyebrow {
    position: relative;
    z-index: 1;
}
.undercover-hero-content {
    max-width: 720px;
}
.undercover-hero h2 {
    font-size: 2rem;
    font-weight: 950;
    letter-spacing: 0;
}
.undercover-hero-copy {
    max-width: 720px;
    color: #d8e2ef;
    font-size: .95rem;
    line-height: 1.45;
}
.undercover-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(112px, 1fr));
    gap: 10px;
}
.undercover-hero-stats span,
.undercover-room-metrics span,
.undercover-final-summary > span {
    display: grid;
    gap: 2px;
    padding: .72rem .82rem;
    border-radius: 8px;
    border: 1px solid rgba(120,175,255,.18);
    background: rgba(16,24,39,.76);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.undercover-hero-stats strong,
.undercover-room-metrics strong,
.undercover-final-summary strong {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 950;
    line-height: 1.1;
}
.undercover-hero-stats small,
.undercover-room-metrics small,
.undercover-final-summary small {
    color: var(--c-muted);
    font-size: .72rem;
    font-weight: 850;
    line-height: 1.1;
    text-transform: uppercase;
}
.undercover-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
    gap: 16px;
    align-items: stretch;
}
.undercover-create-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(160px, .75fr);
    gap: 12px;
    align-items: end;
}
.undercover-create-form label {
    display: grid;
    gap: 6px;
    color: #dce8f7;
    font-size: .78rem;
    font-weight: 850;
}
.undercover-create-form .form-select,
.undercover-create-form .form-control {
    min-height: 40px;
    border-color: rgba(120,175,255,.16);
    background-color: #101827;
}
.undercover-toggle {
    grid-column: span 2;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 8px !important;
    color: var(--c-muted) !important;
}
.undercover-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--undercover-green);
}
.undercover-create-form .quizz-header-action {
    grid-column: span 2;
    width: 100%;
}
.undercover-login-panel {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: .85rem;
    border: 1px solid rgba(120,175,255,.14);
    border-radius: 8px;
    background: rgba(16,24,39,.64);
}
.undercover-login-panel > i {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffd166;
    background: rgba(255,209,102,.08);
    border: 1px solid rgba(255,209,102,.18);
    border-radius: 8px;
}
.undercover-login-panel strong,
.undercover-login-panel span {
    display: block;
}
.undercover-login-panel span {
    color: var(--c-muted);
    font-size: .82rem;
}
.undercover-rules-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.undercover-rules-list span {
    display: flex;
    align-items: flex-start;
    gap: .52rem;
    min-height: 48px;
    padding: .7rem;
    color: #dce8f7;
    border-radius: 8px;
    border: 1px solid rgba(120,175,255,.12);
    background: rgba(16,24,39,.55);
    font-size: .84rem;
    font-weight: 760;
    line-height: 1.3;
}
.undercover-rules-list i {
    color: #a9c9ff;
}
.undercover-secret-panel {
    min-height: 154px;
}
.undercover-secret-empty {
    min-height: 154px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    color: var(--c-muted);
    text-align: center;
    border: 1px dashed rgba(120,175,255,.18);
    border-radius: 8px;
    background: rgba(16,24,39,.42);
}
.undercover-secret-empty i {
    color: #a9c9ff;
    font-size: 1.5rem;
}
.undercover-secret-empty strong {
    color: #fff;
    font-weight: 900;
}
.undercover-secret-empty span {
    max-width: 320px;
    font-size: .84rem;
}
.undercover-secret-words,
.undercover-final-summary {
    display: grid;
    gap: 10px;
}
.undercover-secret-words {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.undercover-secret-words.is-without-mr-white {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.undercover-final-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.undercover-secret-words span,
.undercover-final-summary > span {
    min-height: 92px;
}
.undercover-secret-words .is-civilian,
.undercover-final-summary .is-civilian {
    border-color: rgba(33,182,122,.24);
    background: rgba(33,182,122,.08);
}
.undercover-secret-words .is-undercover,
.undercover-final-summary .is-undercover {
    border-color: rgba(255,125,143,.28);
    background: rgba(255,125,143,.08);
}
.undercover-secret-words .is-mr-white,
.undercover-final-summary .is-mr-white {
    border-color: rgba(220,230,247,.3);
    background: rgba(220,230,247,.08);
}
.undercover-room-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.undercover-winner-banner {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 10px;
    padding: .72rem .82rem;
    color: #fff2ca;
    border: 1px solid rgba(255,209,102,.24);
    border-radius: 8px;
    background: rgba(255,209,102,.08);
    font-size: .88rem;
    font-weight: 780;
}
.undercover-winner-banner i {
    color: #ffd166;
}
.undercover-winner-banner.is-mr-white {
    color: #eef4ff;
    border-color: rgba(220,230,247,.28);
    background: rgba(220,230,247,.08);
}
.undercover-winner-banner.is-mr-white i {
    color: #dce8f7;
}
.undercover-role-card {
    min-height: 154px;
    display: grid;
    grid-template-columns: 68px minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 14px;
    align-items: center;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(120,175,255,.16);
    background: linear-gradient(180deg, #182131, #101827);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.undercover-role-card.is-civilian {
    border-color: rgba(33,182,122,.28);
    box-shadow: inset 3px 0 0 rgba(33,182,122,.68);
}
.undercover-role-card.is-word-holder {
    border-color: rgba(255,209,102,.3);
    box-shadow: inset 3px 0 0 rgba(255,209,102,.68);
}
.undercover-role-card.is-undercover {
    border-color: rgba(255,125,143,.34);
    box-shadow: inset 3px 0 0 rgba(255,125,143,.72);
}
.undercover-role-card.is-mr-white {
    border-color: rgba(220,230,247,.34);
    box-shadow: inset 3px 0 0 rgba(220,230,247,.62);
}
.undercover-role-card.is-out {
    opacity: .76;
}
.undercover-role-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 8px;
    background: rgba(120,175,255,.12);
    border: 1px solid rgba(120,175,255,.2);
    font-size: 1.65rem;
}
.undercover-role-card small {
    display: block;
    color: var(--c-muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}
.undercover-role-card strong {
    display: block;
    color: #fff;
    font-size: 1.28rem;
    font-weight: 950;
    line-height: 1.12;
    overflow-wrap: anywhere;
}
.undercover-player-list {
    display: grid;
    gap: 10px;
}
.undercover-player-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: .74rem .82rem;
    border-radius: 8px;
    border: 1px solid rgba(120,175,255,.14);
    background: rgba(16,24,39,.62);
}
.undercover-player-row.is-me {
    border-color: rgba(33,182,122,.26);
    background: rgba(33,182,122,.06);
}
.undercover-player-row.is-out {
    opacity: .74;
}
.undercover-player-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.undercover-player-main strong,
.undercover-player-main small {
    display: block;
}
.undercover-player-main strong {
    color: #fff;
    font-size: .95rem;
    font-weight: 900;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.undercover-player-main small {
    color: var(--c-muted);
    font-size: .75rem;
    font-weight: 780;
}
.undercover-player-tags {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}
.undercover-turn-panel {
    display: grid;
    gap: 10px;
}
.undercover-turn-current {
    display: grid;
    gap: 2px;
    padding: .76rem .82rem;
    border-radius: 8px;
    border: 1px solid rgba(33,182,122,.24);
    background: rgba(33,182,122,.08);
}
.undercover-turn-current small,
.undercover-turn-progress,
.undercover-turn-order small {
    color: var(--c-muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}
.undercover-turn-current strong {
    color: #fff;
    font-size: 1.02rem;
    font-weight: 950;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.undercover-turn-progress {
    padding-inline: .2rem;
}
.undercover-turn-order {
    display: grid;
    gap: 7px;
}
.undercover-turn-order span {
    min-height: 38px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: .42rem .55rem;
    border-radius: 8px;
    border: 1px solid rgba(120,175,255,.14);
    background: rgba(16,24,39,.55);
}
.undercover-turn-order span.is-current {
    border-color: rgba(255,209,102,.3);
    background: rgba(255,209,102,.08);
}
.undercover-turn-order span.is-done {
    opacity: .72;
}
.undercover-turn-order small {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(120,175,255,.12);
}
.undercover-turn-order strong {
    min-width: 0;
    color: #dce8f7;
    font-size: .82rem;
    font-weight: 880;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.undercover-next-turn-btn {
    width: 100%;
    justify-content: center;
}
.undercover-presence {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    box-shadow: 0 0 0 3px rgba(255,255,255,.04);
}
.undercover-presence.is-on {
    background: var(--undercover-green);
    box-shadow: 0 0 0 3px rgba(33,182,122,.12);
}
.undercover-life,
.undercover-role-pill,
.undercover-player-word,
.undercover-vote-count,
.undercover-voted-dot,
.undercover-state-note {
    display: inline-flex;
    align-items: center;
    gap: .34rem;
    min-height: 26px;
    padding: .25rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 860;
    line-height: 1.1;
    white-space: nowrap;
}
.undercover-life.is-alive,
.undercover-state-note.is-alive {
    color: #d9f7eb;
    border: 1px solid rgba(33,182,122,.24);
    background: rgba(33,182,122,.08);
}
.undercover-life.is-out,
.undercover-state-note.is-out {
    color: #ffc8d0;
    border: 1px solid rgba(255,125,143,.26);
    background: rgba(255,125,143,.08);
}
.undercover-state-note.is-mr-white {
    color: #eef4ff;
    border: 1px solid rgba(220,230,247,.26);
    background: rgba(220,230,247,.08);
}
.undercover-role-pill.is-civilian {
    color: #d9f7eb;
    border: 1px solid rgba(33,182,122,.26);
    background: rgba(33,182,122,.1);
}
.undercover-role-pill.is-word-holder {
    color: #fff2ca;
    border: 1px solid rgba(255,209,102,.24);
    background: rgba(255,209,102,.08);
}
.undercover-role-pill.is-undercover {
    color: #ffc8d0;
    border: 1px solid rgba(255,125,143,.3);
    background: rgba(255,125,143,.1);
}
.undercover-role-pill.is-mr-white {
    color: #eef4ff;
    border: 1px solid rgba(220,230,247,.3);
    background: rgba(220,230,247,.1);
}
.undercover-player-word {
    color: #fff2ca;
    border: 1px solid rgba(255,209,102,.24);
    background: rgba(255,209,102,.08);
    overflow-wrap: anywhere;
    white-space: normal;
}
.undercover-player-word.is-none,
.undercover-player-word.is-mr-white {
    color: #eef4ff;
    border-color: rgba(220,230,247,.24);
    background: rgba(220,230,247,.08);
}
.undercover-vote-count,
.undercover-voted-dot {
    color: #dce8f7;
    border: 1px solid rgba(120,175,255,.18);
    background: rgba(120,175,255,.08);
}
.undercover-vote-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .38rem .62rem;
    color: #dce8f7;
    border: 1px solid rgba(120,175,255,.24);
    border-radius: 8px;
    background: linear-gradient(180deg, #1a2839, #131d2b);
    font-size: .8rem;
    font-weight: 850;
    line-height: 1.1;
}
.undercover-vote-btn:hover,
.undercover-vote-btn:focus,
.undercover-vote-btn.is-selected {
    color: #fff;
    border-color: rgba(33,182,122,.38);
    background: rgba(33,182,122,.14);
}
.undercover-vote-details {
    display: grid;
    gap: 6px;
}
.undercover-vote-details span {
    display: block;
    padding: .5rem .6rem;
    color: #dce8f7;
    border-radius: 8px;
    border: 1px solid rgba(120,175,255,.12);
    background: rgba(16,24,39,.55);
    font-size: .8rem;
}
.undercover-mr-white-guess {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin-top: 10px;
    padding: .82rem;
    border: 1px solid rgba(220,230,247,.18);
    border-radius: 8px;
    background: rgba(220,230,247,.06);
}
.undercover-mr-white-guess label {
    display: grid;
    gap: 6px;
    margin: 0;
    color: #dce8f7;
    font-size: .78rem;
    font-weight: 850;
}
.undercover-mr-white-guess .form-control {
    min-height: 40px;
    border-color: rgba(220,230,247,.2);
    background-color: #101827;
}
.quizz-chat-message.is-system {
    border-color: rgba(255,209,102,.24);
    background: rgba(255,209,102,.07);
}
.quizz-chat-message.is-system .quizz-chat-message-head strong {
    color: #ffe29a;
}
.undercover-final-summary {
    grid-template-columns: minmax(0, .7fr) minmax(0, .7fr) minmax(0, 1.4fr);
}
@media (max-width: 992px) {
    .undercover-dashboard-grid {
        grid-template-columns: 1fr;
    }
    .undercover-hero {
        align-items: flex-start;
        flex-direction: column;
    }
    .undercover-hero-stats {
        width: 100%;
    }
}
@media (max-width: 768px) {
    .undercover-create-form,
    .undercover-secret-words,
    .undercover-room-metrics,
    .undercover-final-summary {
        grid-template-columns: 1fr;
    }
    .undercover-toggle,
    .undercover-create-form .quizz-header-action {
        grid-column: auto;
    }
    .undercover-login-panel {
        grid-template-columns: 42px minmax(0, 1fr);
    }
    .undercover-login-panel .quizz-header-action {
        grid-column: 1 / -1;
        width: 100%;
    }
    .undercover-rules-list {
        grid-template-columns: 1fr;
    }
    .undercover-role-card {
        grid-template-columns: 54px minmax(0, 1fr);
    }
    .undercover-role-card > span:last-child {
        grid-column: 1 / -1;
    }
    .undercover-player-row {
        grid-template-columns: 1fr;
    }
    .undercover-player-tags {
        justify-content: flex-start;
    }
    .undercover-mr-white-guess {
        grid-template-columns: 1fr;
    }
    .undercover-mr-white-guess .quizz-header-action {
        width: 100%;
    }
}
@media (max-width: 576px) {
    .undercover-hero {
        min-height: 260px;
        padding: 18px;
    }
    .undercover-hero-stats {
        grid-template-columns: 1fr;
    }
    .undercover-hero-bg {
        object-position: center;
    }
}