/* ============================================================
   Jeux à personnages (overlay 1080 × 1920) + fonds + équipes + règles
   ============================================================ */

/* ---------- Fonds personnalisés ---------- */
#bgp, #bgimg, #bgdim { position: absolute; inset: 0; pointer-events: none; transition: opacity 1s; }
#bgp { opacity: 0; } #bgp.on { opacity: 1; }
#bgimg { background-size: cover; background-position: center; opacity: 0; } #bgimg.on { opacity: 1; }
#bgdim { background: #000; opacity: 0; }
.bgp-venise { background: radial-gradient(circle at 84% 4%, #ffe9a8 0 56px, rgba(255,233,168,.25) 58px, rgba(255,233,168,0) 110px), linear-gradient(180deg, #3b1d5c 0%, #8a3a7a 24%, #f08a4b 40%, #f7b267 46%, #2a3f7a 52%, #18234f 75%, #0c1230 100%); }
.bgp-nuit { background: radial-gradient(circle at 84% 4%, #fff6d6 0 56px, rgba(255,246,214,.2) 58px, rgba(255,246,214,0) 110px), radial-gradient(120% 60% at 50% 0%, #26327a 0%, rgba(38,50,122,0) 60%), linear-gradient(180deg, #0b1236 0%, #070b22 60%, #03050f 100%); }
.bgp-ocean { background: radial-gradient(100% 50% at 50% 0%, #5be3ff 0%, rgba(91,227,255,0) 60%), linear-gradient(180deg, #0a7bb8 0%, #075c95 40%, #04325e 75%, #021a36 100%); }
.bgp-neon { background: linear-gradient(transparent 0 96%, rgba(255,79,163,.35) 96%) 0 0 / 100% 80px, linear-gradient(90deg, transparent 0 96%, rgba(55,230,255,.3) 96%) 0 0 / 80px 100%, radial-gradient(100% 60% at 50% 100%, #ff2d8a 0%, rgba(255,45,138,0) 60%), linear-gradient(180deg, #0d0221 0%, #261447 55%, #3d0e5f 100%); }
.bgp-foret { background: radial-gradient(80% 30% at 50% 0%, #b4f28a 0%, rgba(180,242,138,0) 60%), linear-gradient(180deg, #2e7d4f 0%, #1d5a39 45%, #0f3624 80%, #071d13 100%); }
.bgp-desert { background: radial-gradient(circle at 14% 4%, #fff2b0 0 70px, rgba(255,242,176,.25) 72px, rgba(255,242,176,0) 130px), linear-gradient(180deg, #ffb563 0%, #f08a4b 30%, #d1603d 48%, #a8432f 70%, #5c2420 100%); }
.bgp-espace { background: radial-gradient(40% 20% at 20% 25%, rgba(181,138,255,.45) 0%, rgba(181,138,255,0) 70%), radial-gradient(50% 25% at 80% 70%, rgba(55,230,255,.3) 0%, rgba(55,230,255,0) 70%), linear-gradient(180deg, #05010f 0%, #0d0630 50%, #02010a 100%); }
.bgp-bonbon { background: radial-gradient(70% 40% at 20% 10%, #ffd1ec 0%, rgba(255,209,236,0) 60%), radial-gradient(70% 40% at 80% 90%, #bde7ff 0%, rgba(189,231,255,0) 60%), linear-gradient(160deg, #ff8fc8 0%, #b88cff 50%, #7fb7ff 100%); }
.bgp-arcade { background: radial-gradient(120% 60% at 50% 0%, #ffcc00 0%, rgba(255,204,0,0) 45%), repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 30px, transparent 30px 60px), linear-gradient(180deg, #e8303d 0%, #8d1a6b 45%, #2b0f4c 100%); }
body.transparent, body.transparent #stage { background: transparent !important; }
body.transparent .bg, body.transparent .glow, body.transparent #stars { display: none; }
body.transparent .glass, body.transparent .board, body.transparent .hint { background: rgba(10,4,24,.72); }

/* ---------- Plein écran (téléphone) ---------- */
#fsbtn { position: fixed; right: 12px; top: 12px; z-index: 100; padding: 12px 16px; border: 0; border-radius: 16px; font: 800 16px "Bricolage Grotesque", system-ui, sans-serif; color: #12051f; background: #ffc233; box-shadow: 0 8px 24px rgba(0,0,0,.5); cursor: pointer; transition: opacity .4s; }
#fsbtn.hide { opacity: 0; pointer-events: none; }
#fshelp { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 100; padding: 14px 16px; border-radius: 16px; background: rgba(18,5,31,.94); color: #fff; font: 600 14px/1.4 system-ui, sans-serif; border: 1px solid rgba(255,255,255,.2); }
#fshelp b { color: #ffc233; } #fshelp button { margin-top: 10px; border: 0; border-radius: 10px; padding: 8px 14px; font-weight: 800; background: #ffc233; color: #12051f; }

/* ---------- Règles ---------- */
#rules { position: absolute; left: 70px; right: 70px; top: 360px; z-index: 7; border-radius: 40px; padding: 40px 46px; background: linear-gradient(180deg, rgba(18,5,31,.94), rgba(30,10,60,.94)); border: 3px solid var(--gold); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(255,194,51,.25); opacity: 0; transform: translateY(30px) scale(.96); transition: all .5s cubic-bezier(.2, 1.2, .3, 1); pointer-events: none; }
#rules.on { opacity: 1; transform: none; }
#rules h2 { font-size: 54px; color: var(--gold); margin-bottom: 22px; text-align: center; }
#rules ol { margin: 0; padding-left: 50px; display: grid; gap: 16px; }
#rules li { font-size: 36px; font-weight: 700; line-height: 1.25; }
#rules .bar { height: 10px; border-radius: 5px; background: rgba(255,255,255,.15); margin-top: 26px; overflow: hidden; } #rules .bar i { display: block; height: 100%; background: var(--gold); width: 100%; transition: width linear; }
.w-rules { position: absolute; left: 90px; right: 90px; top: 1360px; border-radius: 30px; padding: 22px 30px; background: rgba(18,5,31,.65); border: 2px solid rgba(255,194,51,.5); }
.w-rules b { display: block; color: var(--gold); font-size: 30px; margin-bottom: 8px; }
.w-rules div { font-size: 26px; font-weight: 600; line-height: 1.35; color: rgba(255,255,255,.9); }

/* ---------- Équipes ---------- */
.tstrip { display: flex; gap: 10px; flex: none; height: 64px; }
.tstrip .tm { flex: 1; min-width: 0; position: relative; border-radius: 22px; overflow: hidden; background: rgba(18,5,31,.6); border: 2px solid rgba(255,255,255,.15); display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 24px; font-weight: 800; }
.tstrip .tm i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tc); opacity: .45; transition: width .6s; }
.tstrip .tm > span { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tstrip .tm .sc { margin-left: auto; color: var(--gold); flex: none; }
.lb-teams { position: absolute; left: 60px; right: 60px; top: 430px; display: flex; gap: 14px; justify-content: center; }
.lb-teams .tcard { flex: 1; max-width: 300px; border-radius: 26px; padding: 14px 16px; text-align: center; background: rgba(18,5,31,.55); border: 3px solid var(--tc); }
.lb-teams .tcard.first { box-shadow: 0 0 40px var(--tc); transform: scale(1.06); }
.lb-teams .tcard b { display: block; font-size: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-teams .tcard span { font-size: 38px; font-weight: 800; color: var(--gold); }
.lb-teams .tcard small { display: block; font-size: 20px; color: rgba(255,255,255,.7); }
#s-leaderboard.withteams .podium { top: 600px; height: 420px; transform: scale(.8); transform-origin: 50% 100%; }
#s-leaderboard.withteams .lb-title { top: 320px; }
#s-leaderboard.withteams .flaw { top: 395px; }
#s-leaderboard.withteams.flawon .lb-teams { top: 470px; }

/* ---------- Manche « arène » : grande zone de jeu ---------- */
#s-round.arena .segrow, #s-round.arena #q-board { display: none !important; }
#s-round.arena .qcard { padding: 14px 30px; }
#s-round.arena .qcard p { font-size: 40px !important; }
#s-round.arena .area { gap: 12px; }
.stage-box { position: relative; flex: 1; min-height: 0; border-radius: 36px; overflow: hidden; background: rgba(10,4,24,.35); border: 2px solid rgba(255,255,255,.14); }
.status { flex: none; text-align: center; font-size: 32px; font-weight: 700; color: rgba(255,255,255,.92); min-height: 42px; }
.status b { color: var(--gold); }

/* ---------- Personnage (bonhomme + photo) ---------- */
.chr { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -100%) scale(var(--sc, 1)); transform-origin: 50% 100%; transition: left .9s cubic-bezier(.3, .8, .3, 1), top .9s cubic-bezier(.3, .8, .3, 1), opacity .6s, filter .4s; will-change: left, top; }
.chr .head { position: relative; z-index: 2; border-color: var(--c) !important; border-width: 4px; }
.chr svg.body { width: calc(var(--s) * .72); height: calc(var(--s) * .95); margin-top: -4px; overflow: visible; }
.chr svg.body line { stroke: var(--c); stroke-width: 5.5; stroke-linecap: round; }
.chr .nm { margin-top: 2px; max-width: 150px; font-size: 20px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.chr.noname .nm { display: none; }
.chr .tag { position: absolute; top: -26px; z-index: 3; font-size: 26px; font-weight: 800; color: #12051f; background: var(--gold); border-radius: 12px; padding: 0 8px; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.chr.walk .leg-l { animation: legl .32s ease-in-out infinite alternate; } .chr.walk .leg-r { animation: legr .32s ease-in-out infinite alternate; }
.chr.walk .arm-l { animation: legr .32s ease-in-out infinite alternate; } .chr.walk .arm-r { animation: legl .32s ease-in-out infinite alternate; }
.chr line { transform-box: view-box; transform-origin: 20px 30px; }
.chr .arm-l, .chr .arm-r { transform-origin: 20px 12px; }
@keyframes legl { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes legr { from { transform: rotate(22deg); } to { transform: rotate(-22deg); } }
.chr.caught { filter: drop-shadow(0 0 16px #ff2d55) saturate(1.4); animation: shakeX .45s ease-in-out 3; }
.chr.caught .tag { background: #ff4d6d; color: #fff; }
.chr.out, .chr.dead { opacity: .28; filter: grayscale(1); }
.chr.win { filter: drop-shadow(0 0 18px #ffd166); }
.chr.sh .head { box-shadow: 0 0 0 6px rgba(80,200,255,.7), 0 0 26px rgba(80,200,255,.9); }
@keyframes shakeX { 25% { margin-left: -10px; } 75% { margin-left: 10px; } }
.morecount { position: absolute; right: 18px; bottom: 14px; font-size: 26px; font-weight: 800; color: rgba(255,255,255,.8); }

/* ---------- 1, 2, 3… Soleil ---------- */
.sol-top { flex: none; display: flex; gap: 16px; align-items: stretch; height: 250px; }
.doll-card { width: 300px; flex: none; border-radius: 26px; padding: 14px; text-align: center; background: rgba(18,5,31,.72); border: 2px solid rgba(255,255,255,.18); }
.doll-card .ic { font-size: 64px; line-height: 1; }
.doll-card .nm2 { font-size: 40px; font-weight: 800; color: #ff7a5c; text-transform: uppercase; letter-spacing: .02em; }
.doll-card .rg { font-size: 26px; font-weight: 700; }
.doll-card .hs { font-size: 20px; color: rgba(255,255,255,.75); margin-top: 6px; }
.doll-card .hs span { display: inline-grid; place-items: center; width: 36px; height: 36px; margin: 4px 3px 0; border-radius: 10px; background: #ffe8b0; color: #12051f; font-weight: 800; font-size: 22px; }
.guard { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.guard .g { position: relative; width: 200px; height: 240px; transition: transform .35s; zoom: .72; }
.guard .g .hd { position: absolute; left: 60px; top: 0; width: 80px; height: 80px; border-radius: 50%; background: #f5efe6; box-shadow: inset -8px -6px 0 rgba(0,0,0,.15); }
.guard .g .hd::before { content: ""; position: absolute; left: -14px; right: -14px; top: 8px; height: 20px; border-radius: 50%; background: #1d1424; }
.guard .g .eyes { position: absolute; left: 76px; top: 40px; width: 48px; display: flex; justify-content: space-between; opacity: 0; transition: opacity .2s; }
.guard .g .eyes i { width: 14px; height: 14px; border-radius: 50%; background: #ff2d55; box-shadow: 0 0 14px #ff2d55; }
.guard .g .cl { position: absolute; left: 20px; right: 20px; top: 70px; bottom: 0; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); background: linear-gradient(90deg, #6b4a26, #a77a40 50%, #6b4a26); }
.guard.look .g .eyes { opacity: 1; }
.guard.look .g { transform: scale(1.08); }
.guard.look .g .hd { background: #fff; }
.guard .count { text-align: center; font-size: 56px; font-weight: 800; line-height: 1; color: #fff; text-shadow: 0 6px 20px rgba(0,0,0,.6); white-space: nowrap; }
.guard .count.soleil { color: var(--gold); font-size: 60px; }
.sol-field { position: relative; flex: 1; min-height: 0; border-radius: 30px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.1)); }
.sol-field .grid3d { position: absolute; left: -20%; right: -20%; top: 0; bottom: -10%; background: linear-gradient(rgba(255,255,255,.18) 2px, transparent 2px) 0 0 / 100% 70px, linear-gradient(90deg, rgba(255,255,255,.14) 2px, transparent 2px) 0 0 / 90px 100%; transform: perspective(700px) rotateX(48deg); transform-origin: 50% 0; }
.sol-field .ln { position: absolute; left: 3%; right: 3%; border-top: 4px dashed rgba(255,255,255,.75); font-size: 28px; font-weight: 800; letter-spacing: .06em; }
.sol-field .ln span { position: absolute; top: -40px; left: 0; color: rgba(255,255,255,.85); }
.sol-field .ln.fin { border-color: var(--gold); } .sol-field .ln.fin span { color: var(--gold); }
.sol-pick { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sol-pick .ask { padding: 10px 30px; border-radius: 22px; background: #12051f; border: 3px solid var(--gold); font-size: 44px; font-weight: 800; letter-spacing: .02em; }
.sol-pick .ask em { font-style: normal; color: var(--gold); }
.sol-pick .nums { display: flex; gap: 12px; }
.sol-pick .nums i { width: 104px; height: 104px; border-radius: 22px; display: grid; place-items: center; font-style: normal; font-size: 68px; font-weight: 800; color: #12051f; box-shadow: inset 0 -8px 0 rgba(0,0,0,.18), 0 8px 18px rgba(0,0,0,.35); }
.sol-pick .nums i.g { background: #49e36a; } .sol-pick .nums i.y { background: #ffc233; } .sol-pick .nums i.r { background: #ff4d5e; }

/* ---------- Course ---------- */
.lanes { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; height: 100%; }
.lane { position: relative; flex: 1; max-height: 96px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); overflow: visible; }
.lane::after { content: ""; position: absolute; right: 52px; top: 0; bottom: 0; width: 18px; background: repeating-linear-gradient(0deg, #fff 0 9px, #111 9px 18px); opacity: .85; }
.lane .lbl { position: absolute; left: 12px; top: 4px; font-size: 20px; font-weight: 800; color: rgba(255,255,255,.75); z-index: 1; max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane .rk { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 30px; font-weight: 800; color: var(--gold); width: 40px; text-align: center; }
.racer { position: absolute; top: 50%; display: flex; align-items: center; gap: 2px; transform: translate(-50%, -50%); transition: left .9s cubic-bezier(.3, .8, .3, 1); z-index: 2; }
.racer .ic { font-size: 58px; line-height: 1; transform: scaleX(-1); filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.racer.run .ic { animation: gallop .3s ease-in-out infinite alternate; }
@keyframes gallop { to { transform: scaleX(-1) translateY(-6px) rotate(-4deg); } }
.racer .fl { width: 58px; height: 40px; border-radius: 6px; object-fit: cover; box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.racer .boost { position: absolute; left: -38px; font-size: 40px; animation: blink .3s infinite; }
.racer .hitfx { position: absolute; top: -40px; left: 10px; font-size: 40px; }
.racer .av { margin-right: -10px; z-index: 2; }

/* ---------- Arène ---------- */
.arena-ring { position: absolute; left: 50%; top: 48%; width: 880px; height: 880px; max-height: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.08) 0 60%, rgba(255,255,255,.02) 61%), repeating-radial-gradient(circle, transparent 0 60px, rgba(255,255,255,.05) 60px 62px); border: 6px solid rgba(255,255,255,.35); box-shadow: 0 0 60px rgba(255,79,163,.3), inset 0 0 80px rgba(0,0,0,.5); }
.arena-ring.small { box-shadow: 0 0 60px rgba(255,45,85,.6), inset 0 0 80px rgba(0,0,0,.5); border-color: rgba(255,80,110,.7); }
.ftr { position: absolute; transform: translate(-50%, -50%); transition: left 1.2s ease-in-out, top 1.2s ease-in-out, opacity .6s; display: flex; flex-direction: column; align-items: center; }
.ftr .bub { position: relative; border-radius: 50%; padding: 6px; background: conic-gradient(var(--c) calc(var(--hp) * 360deg), rgba(255,255,255,.15) 0); transition: transform .2s; }
.ftr .bub .av { border: 3px solid #12051f; }
.ftr .bub img.flag { display: block; border-radius: 50%; object-fit: cover; border: 3px solid #12051f; }
.ftr .th { position: absolute; right: -14px; bottom: -6px; font-size: 32px; }
.ftr .nm { font-size: 19px; font-weight: 800; max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 6px rgba(0,0,0,.9); }
.ftr.hit .bub { transform: scale(.86); filter: brightness(1.6) saturate(1.5); }
.ftr.atk .bub { transform: scale(1.14); }
.ftr.sh .bub { box-shadow: 0 0 0 6px rgba(80,200,255,.7), 0 0 30px rgba(80,200,255,.9); }
.ftr.dead { opacity: .18; filter: grayscale(1); }
.ftr .kl { position: absolute; top: -18px; left: -12px; font-size: 18px; font-weight: 800; background: #ff4d5e; border-radius: 10px; padding: 0 6px; }
.feed { position: absolute; left: 20px; right: 20px; bottom: 16px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.feed div { font-size: 24px; font-weight: 700; padding: 4px 16px; border-radius: 16px; background: rgba(0,0,0,.5); }
.feed div b { color: #ff7a8a; }
.bigcd { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-size: 46px; font-weight: 800; text-shadow: 0 6px 20px rgba(0,0,0,.6); }
.bigcd em { display: block; font-style: normal; font-size: 130px; color: var(--gold); }

/* ---------- Pont de verre ---------- */
.bridge { position: absolute; left: 50%; top: 20px; bottom: 20px; width: 640px; transform: translateX(-50%); display: flex; flex-direction: column-reverse; gap: 10px; }
.brow2 { flex: 1; display: flex; gap: 16px; position: relative; min-height: 0; }
.brow2 .pn { flex: 1; border-radius: 12px; background: linear-gradient(160deg, rgba(160,230,255,.45), rgba(90,170,220,.25)); border: 3px solid rgba(200,240,255,.7); box-shadow: inset 0 0 20px rgba(255,255,255,.25); position: relative; display: grid; place-items: center; font-size: 26px; font-weight: 800; color: rgba(255,255,255,.7); }
.brow2 .pn.safe { background: linear-gradient(160deg, rgba(120,255,170,.55), rgba(40,200,120,.35)); border-color: #49e36a; }
.brow2 .pn.broke { background: rgba(0,0,0,.25); border-style: dashed; border-color: rgba(255,90,110,.6); color: transparent; }
.brow2 .pn.broke::after { content: "💥"; position: absolute; font-size: 34px; opacity: .7; }
.brow2.cur .pn:not(.safe):not(.broke) { box-shadow: 0 0 30px rgba(255,194,51,.7), inset 0 0 20px rgba(255,255,255,.3); border-color: var(--gold); }
.brow2 .num { position: absolute; left: -54px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 800; color: rgba(255,255,255,.6); }
.brow2 .crowd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0; pointer-events: none; }
.brow2 .crowd .av { margin-left: -12px; } .brow2 .crowd .cnt { margin-left: 6px; font-size: 22px; font-weight: 800; background: rgba(0,0,0,.6); border-radius: 10px; padding: 0 8px; }
.bridge-land { position: absolute; left: 0; right: 0; height: 60px; text-align: center; font-size: 26px; font-weight: 800; line-height: 60px; }
.bridge-land.top { top: -2px; color: var(--gold); } .bridge-land.bot { bottom: -8px; }
.votebar { flex: none; display: flex; height: 70px; border-radius: 35px; overflow: hidden; font-size: 34px; font-weight: 800; }
.votebar div { display: grid; place-items: center; transition: flex .4s; min-width: 120px; }
.votebar .l { background: #4f8cff; } .votebar .r { background: #ff4f86; }

/* ---------- Trône, duel, boule de cristal ---------- */
.throne { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.throne .crownic { font-size: 100px; line-height: 1; animation: bob 2.4s ease-in-out infinite; margin-bottom: -30px; z-index: 2; }
.throne .seat { width: 360px; height: 120px; margin-top: -40px; border-radius: 30px 30px 10px 10px; background: linear-gradient(180deg, #b0263f, #6b1023); border: 6px solid #ffc233; }
.throne .kn { font-size: 44px; font-weight: 800; }
.throne .ks { font-size: 30px; color: var(--gold); font-weight: 800; }
.reign { width: 520px; height: 18px; border-radius: 9px; background: rgba(255,255,255,.15); overflow: hidden; } .reign i { display: block; height: 100%; background: linear-gradient(90deg, #ffc233, #ff4f86); transition: width .3s linear; }
.queue { position: absolute; left: 30px; right: 30px; bottom: 30px; }
.queue h4 { font-size: 26px; color: rgba(255,255,255,.75); margin-bottom: 10px; text-align: center; }
.queue .row2 { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.queue .q { display: flex; flex-direction: column; align-items: center; width: 92px; font-size: 17px; font-weight: 700; }
.queue .q span { max-width: 92px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toph { position: absolute; right: 24px; top: 30px; width: 260px; display: flex; flex-direction: column; gap: 8px; }
.toph div { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 16px; background: rgba(0,0,0,.4); font-size: 22px; font-weight: 700; }
.toph div span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toph div b { color: var(--gold); }
.duelring { position: absolute; left: 30px; right: 30px; top: 40px; height: 560px; border-radius: 40px; background: radial-gradient(circle at 50% 120%, rgba(255,79,134,.35), transparent 70%); border: 6px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: space-around; }
.duelist { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 360px; transition: opacity .5s, transform .5s; }
.duelist .dn { font-size: 40px; font-weight: 800; max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duelist .st { font-size: 26px; color: var(--gold); font-weight: 800; }
.duelist .pk { font-size: 110px; height: 130px; line-height: 130px; }
.duelist.lose { opacity: .35; transform: scale(.9) rotate(-6deg); filter: grayscale(1); }
.duelist.champ .av { box-shadow: 0 0 40px #ffc233; }
.vs { font-size: 90px; font-weight: 800; color: var(--gold); text-shadow: 0 6px 20px rgba(0,0,0,.6); }
.ball { position: absolute; left: 50%; top: 60px; width: 520px; height: 520px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9) 0 6%, rgba(200,170,255,.7) 20%, rgba(120,70,220,.6) 55%, rgba(40,10,90,.9) 100%); box-shadow: 0 0 90px rgba(181,138,255,.8), inset 0 0 60px rgba(255,255,255,.3); display: grid; place-items: center; animation: glowb 3s ease-in-out infinite; }
@keyframes glowb { 50% { box-shadow: 0 0 140px rgba(181,138,255,1), inset 0 0 70px rgba(255,255,255,.4); } }
.ball .av { opacity: .92; }
.prophecy { position: absolute; left: 60px; right: 60px; top: 620px; text-align: center; }
.prophecy b { display: block; font-size: 44px; color: var(--gold); }
.prophecy p { font-size: 44px; font-weight: 700; line-height: 1.25; margin-top: 10px; text-wrap: balance; }

/* ---------- Patate chaude ---------- */
.circle { position: absolute; left: 50%; top: 46%; width: 800px; height: 800px; transform: translate(-50%, -50%); }
.circle .pl2 { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; transition: opacity .6s; }
.circle .pl2 .nm { font-size: 18px; font-weight: 800; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 6px rgba(0,0,0,.9); }
.circle .pl2.out { opacity: .2; filter: grayscale(1); }
.circle .pl2.hold .av { box-shadow: 0 0 0 6px #ff4d5e, 0 0 40px #ff4d5e; }
.bomb { position: absolute; font-size: 90px; transform: translate(-50%, -110%); transition: left .35s cubic-bezier(.3, 1.4, .5, 1), top .35s cubic-bezier(.3, 1.4, .5, 1); z-index: 5; filter: drop-shadow(0 0 16px rgba(255,90,40,.9)); }
.bomb.h1 { animation: shakeX .5s infinite; } .bomb.h2 { animation: shakeX .3s infinite; } .bomb.h3 { animation: shakeX .15s infinite; font-size: 104px; }
.boom { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); font-size: 300px; animation: stamp .6s cubic-bezier(.2, 1.7, .35, 1) both; }
.center-info { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); text-align: center; font-size: 34px; font-weight: 800; }
.center-info b { display: block; font-size: 80px; color: var(--gold); }

/* ---------- Conquête ---------- */
.map { position: absolute; left: 20px; right: 20px; top: 16px; bottom: 130px; display: grid; gap: 6px; }
.cell { border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); position: relative; display: grid; place-items: center; overflow: hidden; transition: background .4s; }
.cell .no { position: absolute; left: 6px; top: 2px; font-size: 18px; font-weight: 800; color: rgba(255,255,255,.55); z-index: 2; }
.cell.own .no { color: rgba(0,0,0,.55); }
.cell img, .cell .av { width: 70%; height: auto; max-height: 80%; border-radius: 50%; opacity: .9; }
.cell img.flag { border-radius: 6px; width: 70%; }
.cell .em { font-size: 34px; }
.cell.last { animation: stamp .5s cubic-bezier(.2, 1.7, .35, 1); box-shadow: 0 0 0 4px #fff, 0 0 30px #fff; z-index: 3; }
.mlegend { position: absolute; left: 20px; right: 20px; bottom: 16px; height: 104px; display: flex; gap: 10px; }
.mlegend div { flex: 1; min-width: 0; border-radius: 18px; background: rgba(0,0,0,.45); display: flex; align-items: center; gap: 8px; padding: 0 12px; border-left: 10px solid var(--c); font-size: 22px; font-weight: 800; }
.mlegend div span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .legend div b { color: var(--gold); font-size: 30px; }

/* ---------- Tour ---------- */
.towerwrap { position: absolute; left: 50%; bottom: 30px; top: 30px; width: 380px; transform: translateX(-50%); }
.towerwrap .goal { position: absolute; left: -70px; right: -70px; top: 0; border-top: 6px dashed var(--gold); font-size: 26px; font-weight: 800; color: var(--gold); }
.towerwrap .goal span { position: absolute; right: 0; top: -38px; }
.towerwrap .stack { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column-reverse; align-items: center; }
.towerwrap .stack i { display: block; width: 300px; border-radius: 6px; border: 2px solid rgba(0,0,0,.25); box-shadow: inset 0 3px 0 rgba(255,255,255,.35); animation: drop .4s cubic-bezier(.3, 1.4, .5, 1) both; }
.towerwrap .ground { position: absolute; left: -200px; right: -200px; bottom: -20px; height: 24px; border-radius: 12px; background: linear-gradient(90deg, #6b4a26, #a77a40, #6b4a26); }
.towerwrap.quake { animation: shakeX .12s linear 10; }
.hcount { position: absolute; left: 30px; top: 30px; font-size: 34px; font-weight: 800; }
.hcount b { display: block; font-size: 90px; color: var(--gold); line-height: 1; }