/* France Collège — Le Colisée (duels, tournois) et Mes amis. Animations désactivées avec « réduire les animations ». */
.cl-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#c3cad6;margin-right:8px;vertical-align:middle}
.cl-dot.on{background:#18a058;box-shadow:0 0 0 3px rgba(24,160,88,.18)}
.cl-bigcode{font:900 40px/1.1 ui-monospace,Consolas,monospace;letter-spacing:.18em;color:#1769d7;margin:6px 0 4px;text-align:center}
.cl-code-sm{font-family:ui-monospace,Consolas,monospace;letter-spacing:.1em}
.cl-add{grid-template-columns:1fr auto;margin-top:8px}
.cl-head{background:linear-gradient(135deg,#fff7e8,#ffe7c2)}
.cl-lock{border:2px solid #f5a524;background:#fffaf0}
.cl-me{display:flex;align-items:center;gap:16px}
.cl-me h2{margin:0 0 4px}
.cl-avatar{width:96px;height:96px;object-fit:contain;border-radius:18px;background:radial-gradient(circle,#fff3d6,#ffe0a3)}
.cl-incoming{background:#fff4e0;border-radius:14px}
.cl-create{margin-top:12px}
.cl-create summary{cursor:pointer;font-weight:800;color:#1769d7}
.cl-create .inline-form{grid-template-columns:1fr auto auto;margin-top:10px}
@media(max-width:640px){.cl-add,.cl-create .inline-form{grid-template-columns:1fr}}
.cl-shelf{display:flex;flex-wrap:wrap;gap:14px}
.cl-trophy{margin:0;width:140px;text-align:center;font-size:13.5px;line-height:1.35}
.cl-trophy img{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(180,120,0,.35))}
.cl-emoji{font-size:64px;display:inline-block;line-height:1}
.cl-champion{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#fff8dc,#ffe9a8)}
.cl-champion img{width:120px;height:120px;object-fit:contain}

/* Tableau du tournoi */
.cl-bracket{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px}
.cl-round{min-width:170px;display:flex;flex-direction:column;justify-content:space-around;gap:10px}
.cl-round h3{font-size:15px;margin:0;text-align:center;color:#5f6d85}
.cl-match{border:1px solid #dbe3ef;border-radius:12px;background:#fff;overflow:hidden;font-size:14px}
.cl-match span{display:block;padding:6px 10px;overflow-wrap:anywhere}
.cl-match span+span{border-top:1px solid #eef2f8}
.cl-match span.w{background:#e7f8ee;font-weight:900;color:#137a3e}
.cl-match.live{border-color:#f5a524;box-shadow:0 0 0 3px rgba(245,165,36,.25)}
.cl-match em{display:block;font-size:12px;color:#c2410c;padding:2px 10px 6px}

/* Arène */
.cl-arena{position:relative;border-radius:24px;overflow:hidden;background:#3a2412 var(--bg) center/cover no-repeat;padding:14px;min-height:520px;color:#fff;box-shadow:0 16px 40px rgba(0,0,0,.25)}
.cl-arena::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55));pointer-events:none}
.cl-arena>*{position:relative}
.cl-top{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.cl-round-n{font-weight:1000;background:rgba(0,0,0,.45);border-radius:999px;padding:4px 12px;font-size:14px;white-space:nowrap}
.cl-hp .cl-name{display:block;font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,.6);overflow-wrap:anywhere}
.cl-hp.opp{text-align:right}
.cl-bar{height:16px;border-radius:999px;background:rgba(0,0,0,.45);border:2px solid rgba(255,255,255,.7);overflow:hidden}
.cl-bar span{display:block;height:100%;background:linear-gradient(90deg,#18a058,#7ee08f);transition:width .5s ease}
.cl-hp.opp .cl-bar span{margin-left:auto}
.cl-bar.low span{background:linear-gradient(90deg,#d62828,#ff7b54)}
.cl-hpv{font-size:13px;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.cl-stage{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;min-height:250px;margin-top:6px}
.cl-fighter{position:relative;display:flex;justify-content:center;align-items:flex-end;height:250px}
.cl-fighter img{max-height:240px;max-width:100%;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(0,0,0,.45));transition:transform .25s ease}
.cl-fighter.opp img{transform:scaleX(-1);filter:drop-shadow(0 10px 8px rgba(0,0,0,.45)) hue-rotate(150deg) saturate(1.2)}
.cl-fighter .cl-emoji{font-size:120px}
.cl-pop{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-weight:1000;font-size:26px;white-space:nowrap;color:#fff;-webkit-text-stroke:1px #000;text-shadow:0 3px 0 #000;opacity:0;pointer-events:none}
.cl-pop.show{animation:cl-pop 1.4s ease-out both}
@keyframes cl-pop{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}15%{opacity:1;transform:translate(-50%,-4px) scale(1.15)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-40px) scale(1)}}
.cl-fighter.me.atk img{animation:cl-atk-r .5s ease-in-out}
.cl-fighter.opp.atk img{animation:cl-atk-l .5s ease-in-out}
@keyframes cl-atk-r{40%{transform:translateX(70px) rotate(8deg)}}
@keyframes cl-atk-l{40%{transform:scaleX(-1) translateX(70px) rotate(8deg)}}
.cl-fighter.hit img{animation:cl-hit .5s ease}
@keyframes cl-hit{20%,60%{filter:drop-shadow(0 0 12px #ff2d2d) brightness(1.6) sepia(1) hue-rotate(-50deg) saturate(5)}30%{translate:-10px 0}50%{translate:10px 0}}
.cl-fighter.parry::after{content:"🛡️";position:absolute;font-size:64px;bottom:90px;animation:cl-shield .7s ease-out both}
@keyframes cl-shield{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(1)}}
.cl-fighter.dodge img{animation:cl-dodge .6s ease}
@keyframes cl-dodge{40%{translate:0 -60px}}
.cl-fighter.miss img{animation:cl-miss .5s ease}
@keyframes cl-miss{50%{translate:0 6px}}
.cl-fighter.victory img{animation:cl-win 1s ease-in-out infinite}
@keyframes cl-win{50%{translate:0 -28px}}
.cl-fighter.ko img{transition:transform .8s ease,opacity .8s ease;opacity:.45;rotate:80deg;translate:0 40px}
.cl-center{display:flex;align-items:center;justify-content:center;min-width:120px}
.cl-vs{font:1000 64px/1 system-ui,sans-serif;color:#ffd166;-webkit-text-stroke:2px #7c2d12;text-shadow:0 5px 0 #7c2d12;animation:cl-vs 1.6s ease-in-out infinite}
.cl-vs.small{font-size:40px}
@keyframes cl-vs{50%{transform:scale(1.1)}}
.cl-count,.cl-banner{font:1000 30px/1.1 system-ui,sans-serif;text-align:center;color:#fff;background:rgba(0,0,0,.55);border-radius:18px;padding:10px 16px;animation:cl-zoom .6s ease-out both}
.cl-banner.win{color:#ffd166;font-size:40px;border:3px solid #ffd166}
.cl-banner.lose{color:#ffd5d5}
@keyframes cl-zoom{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
.cl-panel{background:rgba(255,255,255,.97);color:#1d2939;border-radius:20px;padding:14px 16px;margin-top:10px;min-height:120px}
.cl-wait{text-align:center;font-size:18px;margin:8px 0}
.cl-ready{font-size:20px;padding:14px 26px}
.cl-q h2{font-size:20px;line-height:1.35;margin:8px 0 12px}
.cl-q-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cl-timer{font-weight:900}
.cl-tbar{height:8px;border-radius:999px;background:#eef2f8;overflow:hidden}
.cl-tbar span{display:block;height:100%;background:#1769d7}
.cl-tbar.hurry span{background:#d62828}
.cl-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:640px){.cl-opts{grid-template-columns:1fr}.cl-arena{min-height:0}.cl-stage{min-height:170px}.cl-fighter{height:170px}.cl-fighter img{max-height:160px}.cl-vs{font-size:40px}.cl-center{min-width:60px}.cl-top{grid-template-columns:1fr 1fr}.cl-round-n{display:none}}
.cl-opt{border:2px solid #dbe3ef;background:#fff;border-radius:14px;padding:12px 14px;font:inherit;font-weight:700;text-align:left;cursor:pointer;min-height:52px;transition:transform .1s,border-color .1s}
.cl-opt:hover:not(:disabled){border-color:#1769d7;transform:translateY(-1px)}
.cl-opt.picked{border-color:#1769d7;background:#eaf3ff}
.cl-opt:disabled{cursor:default}
.cl-status{min-height:22px;margin:10px 0 0;font-weight:800;color:#c2410c;text-align:center}
.cl-result p{margin:4px 0}
.cl-result.ok{border-left:5px solid #18a058;padding-left:10px}
.cl-result.ko{border-left:5px solid #d62828;padding-left:10px}
.cl-good{background:#f3f7ff;border-radius:10px;padding:8px 10px}
@media (prefers-reduced-motion: reduce){.cl-fighter img,.cl-fighter::after,.cl-pop.show,.cl-vs,.cl-count,.cl-banner{animation:none!important}.cl-pop.show{opacity:1}}
html.a11y-reduce .cl-fighter img,html.a11y-reduce .cl-vs,html.a11y-reduce .cl-banner{animation:none!important}