/* Public player look, all-time boards and the PvP banner (2026-10-20).
   playerAvatar / teamStrip: another player's avatar in the ring of their frame (profile.css
   .avatar--<style>) and their three strongest dragons in the skins they wear (production.css
   .skin-<style>). Art: /assets/lb/*-256.webp (Codex image_gen, PNG sources next to them). */

.avatar--row { width:34px; height:34px; padding:2px; box-shadow:0 0 0 2px #0b4a94,0 2px 0 #0a3979,0 0 8px var(--glow); }
.avatar--lg { width:72px; height:72px; padding:4px; box-shadow:0 0 0 3px #0b4a94,0 4px 0 #0a3979,0 8px 16px #001e4f88,0 0 18px var(--glow); }
.avatar__img[class*="skin-"] { object-fit:contain; }

.team-strip { display:inline-flex; align-items:center; flex:none; }
.team-strip img { width:30px; height:30px; margin-left:-7px; object-fit:contain; border-radius:50%; background:radial-gradient(circle at 50% 35%,#3d95d6,#0b3f80 72%); box-shadow:0 0 0 2px #8bdbf6,0 2px 0 #0a3979; }
.team-strip img:first-child { margin-left:0; }
.team-strip.is-row img { width:24px; height:24px; margin-left:-6px; }
.team-strip.is-row img:first-child { margin-left:0; }

/* Season tables (production.css grid): place · avatar · name over the showcase and the league
   badge · score. The old rule `.standings-list span { flex:1 }` must not stretch them. */
.standings-list > .standings-row { grid-template-columns:28px auto minmax(0,1fr) auto; }
.standings-row > .avatar { grid-column:2; grid-row:1/3; flex:none; overflow:visible; }
.standings-list .standings-row .standings-name { grid-column:3; overflow:hidden; text-overflow:ellipsis; }
.standings-list .standings-row .standings-cosmetics { grid-column:3/5; flex-wrap:wrap; }
.standings-row > strong { grid-column:4; }
.standings-list .standings-row .standings-estimate { grid-column:3/5; }
.standings-list .team-strip { flex:none; overflow:visible; }

/* --- Season | All time --------------------------------------------------------------------- */
.lb-switch { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:0 0 14px; padding:4px; border:3px solid #87dff9; border-radius:999px; background:#0a3979; box-shadow:inset 0 2px 6px #001b4a99,0 3px 0 #094d9c; }
.lb-switch button { min-height:40px; border:0; border-radius:999px; color:#bfe9ff; background:transparent; font:15px DraklyBlack,'Trebuchet MS',sans-serif; letter-spacing:-.02em; cursor:pointer; transition:background .2s,color .2s,transform .12s; }
.lb-switch button.is-on { color:#fff; background:linear-gradient(#5cc8f5,#1b78c9); box-shadow:inset 0 2px #e9ffff8c,0 2px 0 #0a478e; text-shadow:0 2px 0 #0d4f8f; }
.lb-switch button:active { transform:translateY(1px); }

.lb-kinds { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 12px; }
.lb-kind { display:grid; justify-items:center; gap:2px; padding:8px 4px 9px; border:3px solid #6fc4ea; border-radius:18px; color:#d7f3ff; background:linear-gradient(160deg,#1f6db0,#0b3f80); box-shadow:inset 0 2px #e6fbff40,0 4px 0 #083d7f; font:13px DraklyBlack,'Trebuchet MS',sans-serif; cursor:pointer; transition:transform .15s,border-color .2s,box-shadow .2s; }
.lb-kind .lb-art { width:52px; height:52px; filter:drop-shadow(0 4px 4px #001e4f88) saturate(.75); transition:transform .25s cubic-bezier(.3,1.6,.5,1),filter .2s; }
.lb-kind.is-on { color:#fff; border-color:#ffe08a; background:linear-gradient(160deg,#3a8fd4,#13529b); box-shadow:inset 0 2px #fff3c46b,0 4px 0 #8a5a12,0 0 18px #ffd36b55; }
.lb-kind.is-on .lb-art { transform:scale(1.12) rotate(-4deg); filter:drop-shadow(0 5px 6px #001e4fa0) saturate(1.1); }
.lb-kind:active { transform:translateY(2px); }

.lb-hero { display:flex; align-items:center; gap:12px; margin:0 0 12px; padding:12px 14px; border:3px solid #ffd36b; border-radius:20px; background:radial-gradient(circle at 12% 40%,#ffe08a55,transparent 45%),linear-gradient(145deg,#2a6fb8,#123f86 55%,#0a2f68); box-shadow:inset 0 2px #fff3c46b,0 5px 0 #7a4d0d,0 10px 17px #092d6277; }
.lb-hero__art { flex:none; width:84px; height:84px; filter:drop-shadow(0 6px 8px #001e4fb0); animation:lb-float 4s ease-in-out infinite; }
.lb-hero h2 { margin:2px 0 4px; font:26px/1 DraklyBlack,'Trebuchet MS',sans-serif; color:#fff; text-shadow:0 3px 0 #125390; }
.lb-hero p { margin:0; color:#e3f5ff; font-size:12.5px; line-height:1.35; }
.lb-hero .overline { color:#ffe08a; }
@keyframes lb-float { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-5px) rotate(2deg); } }

.lb-me { display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:9px 12px; border:2px dashed #ffe08a; border-radius:16px; background:#0a3979cc; }
.lb-me > span { display:grid; gap:2px; min-width:0; }
.lb-me strong { color:#fff; font:15px DraklyBlack,'Trebuchet MS',sans-serif; }
.lb-me strong small { color:#bfe9ff; font:12px DraklyBold,'Trebuchet MS',sans-serif; }
.lb-me > span > small { color:#cdeeff; font-size:12px; }
.lb-board { padding:14px 12px; }
.lb-empty { text-align:center; }

/* Podium: 2 · 1 · 3, the first one raised with a crown. */
.lb-podium { display:grid; grid-template-columns:1fr 1.15fr 1fr; align-items:end; gap:6px; margin:4px 0 12px; }
.lb-podium__spot { position:relative; display:grid; justify-items:center; gap:4px; min-width:0; padding:12px 4px 10px; border:3px solid #8bdbf6; border-radius:18px 18px 12px 12px; background:linear-gradient(#2f83c0,#0d5096); box-shadow:inset 0 2px #e9ffff69,0 4px 0 #0a478e; text-align:center; }
.lb-podium__spot.is-1 { padding-top:22px; border-color:#ffe08a; background:linear-gradient(#f0b13c,#a6600f 60%,#6d3a08); box-shadow:inset 0 2px #fff3c4aa,0 5px 0 #5a3008,0 0 22px #ffd36b66; }
.lb-podium__spot.is-2 { border-color:#e3f1ff; background:linear-gradient(#9fbfdc,#4f7298 60%,#2c4a6c); }
.lb-podium__spot.is-3 { border-color:#ffc79a; background:linear-gradient(#d68a55,#8d4c22 60%,#5a2c10); }
.lb-podium__spot.is-me { outline:3px solid #9effa5; outline-offset:2px; }
.lb-podium__spot strong { max-width:100%; overflow:hidden; color:#fff; font:13px DraklyBlack,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 2px 0 #00000055; }
.lb-podium__place { position:absolute; top:-12px; left:50%; display:grid; place-items:center; width:26px; height:26px; margin-left:-13px; border:2px solid #fff; border-radius:50%; color:#fff; background:#0d5096; font:14px DraklyBlack,'Trebuchet MS',sans-serif; box-shadow:0 2px 0 #062b5a; }
.lb-podium__spot.is-1 .lb-podium__place { left:6px; top:6px; margin-left:0; background:#c77a10; }
.lb-podium__crown { position:absolute; top:-20px; left:50%; width:34px; height:34px; margin-left:-17px; animation:lb-crown 2.6s ease-in-out infinite; }
.lb-podium__crown svg { width:100%; height:100%; fill:#ffe08a; stroke:#7a4d0d; stroke-width:1.6; filter:drop-shadow(0 0 6px #ffd36b); }
@keyframes lb-crown { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-3px) scale(1.08); } }
.lb-podium__metric { display:grid; line-height:1.05; }
.lb-podium__metric b { color:#fff; font:18px DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px 0 #0000004d; }
.lb-podium__metric b i,.lb-row__metric b i { font-style:normal; font-size:.7em; opacity:.75; }
.lb-podium__metric small { color:#ffffffc7; font-size:11px; }
.lb-podium .team-strip img { width:22px; height:22px; margin-left:-5px; }
.lb-podium .team-strip img:first-child { margin-left:0; }

.lb-list { display:grid; gap:6px; margin:0 0 12px; }
.lb-row { display:flex; align-items:center; gap:9px; padding:8px 10px; border:2px solid #8bdbf6; border-radius:14px; background:linear-gradient(#2f83c0,#0d5096); box-shadow:inset 0 2px #e9ffff69,0 3px 0 #0a478e; }
.lb-row.is-me { border-color:#9effa5; box-shadow:inset 0 2px #e9ffff69,0 3px 0 #0a478e,0 0 12px #9effa577; }
.lb-row__place { flex:none; min-width:24px; color:#ffdf9c; font:15px DraklyBlack,'Trebuchet MS',sans-serif; }
.lb-row__who { display:grid; gap:3px; flex:1; min-width:0; }
.lb-row__who strong { overflow:hidden; color:#fff; font:14px DraklyBlack,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.lb-row__who small { color:#cdeeff; font-size:11px; }
.lb-row__metric { display:grid; flex:none; text-align:right; line-height:1.05; }
.lb-row__metric b { color:#d0f8ff; font:17px DraklyBlack,'Trebuchet MS',sans-serif; }
.lb-row__metric small { color:#bfe9ff; font-size:11px; }

/* The season board (2026-10-26): the hall-of-fame rows with the prize zone, the prize line and the chase. */
.lb-hero--season { border-color:#9effa5; background:radial-gradient(circle at 12% 40%,#9effa544,transparent 45%),linear-gradient(145deg,#2a6fb8,#123f86 55%,#0a2f68); box-shadow:inset 0 2px #e8ffe96b,0 5px 0 #1d6b3a,0 10px 17px #092d6277; }
.lb-hero--season h2 .league-badge { font-size:inherit; }
.lb-podium__marks { display:flex; justify-content:center; gap:3px; flex-wrap:wrap; max-width:100%; }
.lb-podium__marks .league-badge { padding:2px 4px; }
.lb-podium__marks .league-badge__name,.lb-podium__marks .league-badge__division { display:none; }
.lb-row__marks { display:flex; align-items:center; gap:5px; min-width:0; }
.lb-pending-note { margin:0 2px 8px; color:#cfe3ff; }
.lb-row.is-prize { border-color:#ffe08a; background:linear-gradient(#3a8fd4,#13529b); box-shadow:inset 0 2px #fff3c46b,0 3px 0 #8a5a12; }
.lb-row.is-prize .lb-row__metric b { color:#ffe08a; }
.lb-row__metric .lb-row__usd,.lb-podium__spot .lb-row__usd { color:#ffe08a; font:13px DraklyBlack,'Trebuchet MS',sans-serif; white-space:nowrap; }
.lb-podium__spot .lb-row__usd { display:block; margin:2px 0; font-size:13px; }
.lb-row.is-prize.is-me { border-color:#9effa5; box-shadow:inset 0 2px #fff3c46b,0 3px 0 #8a5a12,0 0 12px #9effa577; }
.lb-cut { display:flex; align-items:center; gap:8px; margin:4px 2px; color:#ffe08a; font:12px DraklyBlack,'Trebuchet MS',sans-serif; text-transform:uppercase; letter-spacing:.02em; }
.lb-cut::before,.lb-cut::after { content:''; flex:1; height:0; border-top:2px dashed #ffe08a99; }
.lb-gap { text-align:center; color:#bfe9ff; font:16px/1 DraklyBlack,'Trebuchet MS',sans-serif; letter-spacing:.3em; opacity:.7; }
.lb-how { margin:0 0 10px; padding:8px 12px; border:2px solid #6fc4ea66; border-radius:14px; background:#0a397966; }
.lb-how summary { color:#d7f3ff; font:13px DraklyBlack,'Trebuchet MS',sans-serif; cursor:pointer; }
.lb-how[open] summary { margin-bottom:6px; }

.chase { padding:14px 12px 12px; border-color:#9effa5; background:radial-gradient(circle at 85% 0,#9effa533,transparent 45%),linear-gradient(160deg,#1f6db0,#0b3f80); }
.chase__head { display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.chase__art { flex:none; width:68px; height:68px; filter:drop-shadow(0 5px 6px #001e4fa0); animation:lb-float 3.2s ease-in-out infinite; }
.chase__head h2 { margin:2px 0 0; color:#fff; font:21px/1.05 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 2px 0 #125390; }
.chase__head .overline { color:#9effa5; }
.chase__lead { margin:0 0 10px; color:#e3f5ff; font-size:13px; }
.chase__row { display:flex; align-items:center; gap:9px; margin:0 0 8px; padding:9px 10px; border:2px solid #8bdbf6; border-radius:14px; background:#0a3979cc; }
.chase__row.is-up { border-color:#9effa5; box-shadow:0 0 12px #9effa544; }
.chase__row.is-down { border-style:dashed; border-color:#ffb4a2aa; }
.chase__who { display:grid; gap:1px; flex:1; min-width:0; }
.chase__who small { color:#bfe9ff; font-size:11px; }
.chase__who strong { overflow:hidden; color:#fff; font:14px DraklyBlack,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.chase__gap,.chase__money { display:grid; flex:none; text-align:right; line-height:1.05; }
.chase__gap b { color:#9effa5; font:19px DraklyBlack,'Trebuchet MS',sans-serif; }
.chase__row.is-down .chase__gap b { color:#ffcfbf; }
.chase__gap small,.chase__money small { color:#bfe9ff; font-size:10.5px; }
.chase__money { padding-left:9px; border-left:2px solid #ffffff22; }
.chase__money b { color:#ffe08a; font:16px DraklyBlack,'Trebuchet MS',sans-serif; }
.chase__money em { color:#9effa5; font:12px DraklyBlack,'Trebuchet MS',sans-serif; font-style:normal; }
.chase__money.is-loss b { color:#ff9f8a; }
.chase__note { margin:-2px 0 8px; color:#ffe9b0; font-size:12px; line-height:1.35; }
.chase__note + .btn { margin:0 0 8px; }
@media (max-width:380px) { .chase__row { flex-wrap:wrap; } .chase__money { flex:1 0 100%; display:flex; justify-content:space-between; align-items:baseline; padding:6px 0 0; border-left:0; border-top:2px solid #ffffff22; } }

/* Dragons: a showcase card per player — the art in its skin, rarity, stars, level, stats. */
.lb-dragons { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 12px; }
.lb-dragon { position:relative; display:grid; align-content:start; overflow:hidden; border:3px solid var(--tb,#87dff9); border-radius:18px; background:radial-gradient(circle at 50% 22%,color-mix(in srgb,var(--t1,#62c6f3) 55%,transparent),transparent 55%),linear-gradient(170deg,var(--t2,#1767bd),#0a2f68 70%); box-shadow:inset 0 2px #ffffff55,0 4px 0 var(--t3,#0b4692),0 8px 14px #00153a77; }
.lb-dragon.is-me { outline:3px solid #9effa5; outline-offset:2px; }
.lb-dragon.is-hero { grid-column:1 / -1; grid-template-columns:44% 1fr; align-items:center; }
.lb-dragon__place { position:absolute; top:6px; left:6px; z-index:3; display:inline-flex; align-items:center; gap:2px; padding:2px 8px 2px 2px; border-radius:999px; color:#fff; background:#061d45b3; font:13px DraklyBlack,'Trebuchet MS',sans-serif; }
.lb-dragon__place .item-art { width:24px; height:24px; }
.lb-dragon__place:not(:has(.item-art)) { padding-left:8px; }
.lb-dragon__stage { position:relative; display:grid; place-items:center; height:128px; }
.lb-dragon__stage::before { content:""; position:absolute; inset:6px; border-radius:50%; background:repeating-conic-gradient(from 0deg,#ffffff26 0 10deg,transparent 10deg 30deg); -webkit-mask:radial-gradient(circle,#000 25%,transparent 68%); mask:radial-gradient(circle,#000 25%,transparent 68%); }
.lb-dragon.is-top .lb-dragon__stage::before { animation:sheet-rays 24s linear infinite; }
.lb-dragon__stage img { position:relative; z-index:1; width:118px; height:118px; object-fit:contain; filter:drop-shadow(0 7px 6px #04204a99); }
.lb-dragon__stage img[class*="skin-"] { width:112px; height:112px; }
.lb-dragon.is-hero .lb-dragon__stage { height:190px; min-width:0; overflow:hidden; }
.lb-dragon.is-hero .lb-dragon__stage img { width:100%; height:100%; padding:20px 4px 6px; animation:lb-float 4.5s ease-in-out infinite; }
.lb-dragon .lb-dragon__stage .mastery-mark { position:absolute; inset:auto 8px 8px auto; z-index:2; }
.lb-dragon__body { display:grid; gap:6px; padding:0 10px 10px; }
.lb-dragon.is-hero .lb-dragon__body { padding:12px 12px 12px 0; }
.lb-dragon__tags { display:flex; flex-wrap:wrap; gap:4px; }
.lb-dragon__tags .dragon-tag { min-height:22px; padding:1px 8px; font-size:11px; }
.lb-dragon h3 { margin:0; overflow:hidden; color:#fff; font:17px/1.05 DraklyBlack,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 2px 0 var(--t3,#0b4692); }
.lb-dragon.is-hero h3 { font-size:22px; white-space:normal; }
.lb-dragon__grow { display:flex; align-items:center; justify-content:space-between; gap:6px; color:#e3f5ff; font-size:12px; }
.lb-dragon__grow .star-row i { font-size:11px; }
.lb-dragon__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.lb-dragon__stat { display:grid; padding:4px 2px; border-radius:10px; background:#061d4580; text-align:center; line-height:1.05; }
.lb-dragon__stat small { color:#bfe9ff; font-size:9.5px; }
.lb-dragon__stat b { color:#fff; font:14px DraklyBlack,'Trebuchet MS',sans-serif; }
.lb-dragon__skill { display:flex; align-items:center; gap:6px; margin:0; color:#e3f5ff; font-size:12px; }
.lb-dragon__skill img,.lb-dragon__skill .skill-art { flex:none; width:26px; height:26px; }
.lb-dragon__owner { display:flex; align-items:center; gap:7px; min-width:0; padding-top:6px; border-top:1px solid #ffffff2e; color:#fff; font:12.5px DraklyBold,'Trebuchet MS',sans-serif; }
.lb-dragon__owner span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:360px) { .lb-dragons { grid-template-columns:1fr; } .lb-dragon.is-hero { grid-template-columns:1fr; } .lb-dragon.is-hero .lb-dragon__body { padding:0 10px 10px; } }

/* --- PvP: the owner of the tower against the player ------------------------------------------ */
.rival-banner { position:relative; display:grid; gap:10px; margin:0 0 12px; padding:14px 12px 12px; overflow:hidden; border:3px solid #ffe08a; border-radius:22px; background:linear-gradient(90deg,#0a3f86e6,#0b2d5ccc 48%,#6b1730e6),url('/assets/cartoon-versus-bg.webp') center 45% / cover; box-shadow:inset 0 2px #fff3c46b,0 5px 0 #6d3a08,0 10px 18px #00153a88; }
.rival-banner__sides { display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:4px; }
.rival-side { display:grid; justify-items:center; gap:5px; min-width:0; text-align:center; }
.rival-side strong { max-width:100%; overflow:hidden; color:#fff; font:15px DraklyBlack,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 2px 0 #00000080; }
.rival-side.is-me .avatar { animation:rival-in-left .55s cubic-bezier(.2,1.4,.4,1) both; }
.rival-side.is-them .avatar { animation:rival-in-right .55s cubic-bezier(.2,1.4,.4,1) both; }
.rival-mid { position:relative; display:grid; place-items:center; width:74px; height:74px; margin-top:2px; }
.rival-mid__art { width:74px; height:74px; filter:drop-shadow(0 4px 8px #000a); animation:rival-pulse 2.2s ease-in-out infinite; }
.rival-mid b { position:absolute; bottom:-10px; color:#fff; font:20px DraklyBlack,'Trebuchet MS',sans-serif; letter-spacing:.02em; text-shadow:0 2px 0 #7a1d1d,0 0 10px #ff8a3c; }
.rival-power { display:grid; gap:4px; }
.rival-power__bar { position:relative; height:12px; overflow:hidden; border:2px solid #fff3c4; border-radius:999px; background:linear-gradient(90deg,#ff7b5b,#c81e3c); box-shadow:inset 0 2px 3px #0005; }
.rival-power__bar i { position:absolute; inset:0 auto 0 0; border-radius:999px 0 0 999px; background:linear-gradient(90deg,#8fe9ff,#2d8fe0); box-shadow:2px 0 0 #fff; transition:width .6s cubic-bezier(.2,.9,.3,1); }
.rival-power__nums { display:flex; justify-content:space-between; align-items:center; color:#e3f5ff; font:13px DraklyBlack,'Trebuchet MS',sans-serif; }
.rival-power__nums em { color:#ffe08a; font-style:normal; font-size:12px; }
.rival-facts { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.rival-facts span { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; color:#ffe7e7; background:#5a102499; font-size:12px; }
.rival-facts .lb-art { width:20px; height:20px; margin:-3px 0; }
@keyframes rival-in-left { from { opacity:0; transform:translateX(-30px) scale(.8); } }
@keyframes rival-in-right { from { opacity:0; transform:translateX(30px) scale(.8); } }
@keyframes rival-pulse { 0%,100% { transform:scale(1) rotate(0); } 50% { transform:scale(1.07) rotate(-3deg); } }

.rival-mini { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:6px; color:#e3f5ff; font:12.5px DraklyBold,'Trebuchet MS',sans-serif; }
.rival-mini b { max-width:34%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rival-mini i { color:#ffb36b; font:13px DraklyBlack,'Trebuchet MS',sans-serif; font-style:normal; text-shadow:0 0 8px #ff8a3c; }
.rival-mini .avatar { width:26px; height:26px; }
.siege-pick > .rival-mini { margin:8px 0 2px; }

/* The battle opening: both avatars fly in around the emblem, then the splash fades out. */
.vs-splash { position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; gap:4px; background:radial-gradient(circle,#061d45aa,#061d45ee 75%); pointer-events:none; animation:vs-out .35s ease-in 1.35s forwards; }
.vs-splash__side { display:grid; justify-items:center; gap:6px; width:38%; text-align:center; }
.vs-splash__side strong { max-width:100%; overflow:hidden; color:#fff; font:16px DraklyBlack,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 2px 0 #000a; }
.vs-splash__side.is-me { animation:vs-left .5s cubic-bezier(.2,1.4,.4,1) both; }
.vs-splash__side.is-them { animation:vs-right .5s cubic-bezier(.2,1.4,.4,1) .08s both; }
.vs-splash__art { width:96px; height:96px; filter:drop-shadow(0 0 16px #ffb36b); animation:vs-slam .45s cubic-bezier(.3,1.7,.5,1) .3s both; }
@keyframes vs-left { from { opacity:0; transform:translateX(-120%); } }
@keyframes vs-right { from { opacity:0; transform:translateX(120%); } }
@keyframes vs-slam { from { opacity:0; transform:scale(2.4) rotate(-20deg); } }
@keyframes vs-out { to { opacity:0; visibility:hidden; } }

.result-rival { display:flex; align-items:center; justify-content:center; gap:10px; margin:6px auto 12px; padding:8px 14px; width:fit-content; max-width:100%; border:2px solid #ffffff55; border-radius:999px; background:#061d4580; }
.result-rival__text { display:grid; min-width:0; text-align:left; line-height:1.15; }
.result-rival small { color:#cdeeff; font-size:11.5px; }
.result-rival strong { overflow:hidden; color:#fff; font:15px DraklyBlack,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; }

@media (prefers-reduced-motion:reduce) {
  .lb-hero__art,.chase__art,.lb-podium__crown,.lb-dragon.is-hero .lb-dragon__stage img,.lb-dragon.is-top .lb-dragon__stage::before,.rival-mid__art,.rival-side .avatar { animation:none; }
  .vs-splash { display:none; }
}

/* --- Public profile and the look studio (2026-10-21) ------------------------------------------
   ppHeader: banner (/assets/profile/banner-*-1024.webp), avatar in its frame, name, title ribbon
   (title-ribbon-768.webp), guild chip; the showcase stands on profile-showcase-256.webp. */
.guild-crest.tiny { width:18px; height:18px; vertical-align:-3px; }
.guild-mark { display:inline-flex; margin-right:4px; vertical-align:middle; }
.guild-mark .guild-crest { width:16px; height:16px; }
.lb-title { display:block; overflow:hidden; color:#ffe08a; font:11px DraklyBold,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
[data-action="open-profile"][role="button"] { cursor:pointer; }
[data-action="open-profile"][role="button"]:focus-visible { outline:3px solid #ffe08a; outline-offset:2px; }
.standings-row[data-action="open-profile"],.lb-row[data-action="open-profile"] { transition:transform .12s,filter .15s; }
.standings-row[data-action="open-profile"]:active,.lb-row[data-action="open-profile"]:active,.lb-podium__spot[data-action]:active { transform:scale(.985); filter:brightness(1.08); }
.rival-side.is-them[data-action],.result-rival[data-action],.lb-dragon__owner[data-action] { cursor:pointer; }

.pp-head { position:relative; display:grid; justify-items:center; gap:4px; padding:18px 12px 14px; overflow:hidden; border-radius:18px; text-align:center; isolation:isolate; }
.pp-head__bg { position:absolute; inset:0; z-index:-1; background:url('/assets/profile/banner-default-1024.webp') center 35% / cover; }
.pp-head__bg::after { content:""; position:absolute; inset:0; background:linear-gradient(#06204400 20%,#061d45cc 78%,#061d45f2); }
.pp-head--season .pp-head__bg { background-image:url('/assets/profile/banner-season-1024.webp'); background-position:center 40%; }
.pp-head--season { box-shadow:inset 0 0 0 2px #ffe08a; }
.pp-head__avatar .avatar { animation:pp-pop .5s cubic-bezier(.2,1.5,.4,1) both; }
.pp-head__name { margin:4px 0 0; color:#fff; font:24px/1.05 DraklyBlack,'Trebuchet MS',sans-serif; text-shadow:0 3px 0 #0b3367,0 0 12px #0008; overflow-wrap:anywhere; }
.pp-title { display:grid; place-items:center; width:min(250px,86%); aspect-ratio:3 / 1; margin:-8px 0 -10px; background:url('/assets/profile/title-ribbon-768.webp') center / contain no-repeat; }
.pp-title span { max-width:58%; margin-top:-6px; overflow:hidden; color:#5a3008; font:12.5px DraklyBlack,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 0 #fff3c4; }
.pp-chips { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; margin-top:4px; }
.pp-guild { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:3px 10px 3px 5px; border:2px solid #ffffff66; border-radius:999px; color:#fff; background:#061d45b3; font:12px DraklyBold,'Trebuchet MS',sans-serif; }
.pp-guild b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-guild .founder-pill { font-style:normal; }
@keyframes pp-pop { from { opacity:0; transform:scale(.6) rotate(-8deg); } }

.pp-showcase { display:flex; justify-content:center; align-items:flex-end; gap:4px; margin:10px 0 4px; padding-bottom:8px; }
.pp-showcase__item { display:flex; flex-direction:column; align-items:center; gap:2px; width:31%; margin:0; }
.pp-showcase__stage { position:relative; display:grid; place-items:end center; flex:none; width:100%; aspect-ratio:1; }
.pp-showcase__pedestal { position:absolute; inset:auto 0 0; width:100%; height:auto; opacity:.95; }
.pp-showcase__dragon { position:relative; z-index:1; width:86%; height:86%; margin-bottom:22%; object-fit:contain; filter:drop-shadow(0 6px 5px #04204a99); }
.pp-showcase__item.is-lead { width:36%; }
.pp-showcase__item.is-lead .pp-showcase__dragon { animation:lb-float 4.5s ease-in-out infinite; }
.pp-showcase__item figcaption { position:relative; z-index:2; flex:none; max-width:100%; overflow:hidden; line-height:1.3; color:#e3f5ff; font:11.5px DraklyBold,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; }

/* The sheet */
.pp-backdrop { position:fixed; inset:0; z-index:2147483000; display:grid; place-items:end center; padding-top:max(16px,calc(var(--safe-top,env(safe-area-inset-top,0px)) + 8px)); background:#020c22b3; backdrop-filter:blur(3px); }
body.pp-open { overflow:hidden; }
.pp-sheet { position:relative; width:min(520px,100%); max-height:calc(100dvh - max(16px,calc(var(--safe-top,0px) + 8px))); overflow:auto; padding:12px 12px max(18px,env(safe-area-inset-bottom)); border:3px solid #87dff9; border-bottom:0; border-radius:24px 24px 0 0; background:linear-gradient(170deg,#1d6cb4,#0d4688 40%,#082d63); box-shadow:0 -10px 30px #00153a99; animation:pp-up .32s cubic-bezier(.2,1.1,.3,1); overscroll-behavior:contain; }
.pp-close { position:absolute; top:14px; right:14px; z-index:3; }
.pp-loading { display:grid; gap:12px; padding-top:40px; }
@keyframes pp-up { from { transform:translateY(40px); } }
.pp-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:10px 0; }
.pp-stat { position:relative; display:grid; justify-items:center; gap:0; padding:6px 2px 7px; border:2px solid #8bdbf6; border-radius:14px; color:#fff; background:linear-gradient(#2f83c0,#0d5096); box-shadow:inset 0 2px #e9ffff55,0 3px 0 #0a478e; font:inherit; cursor:pointer; }
.pp-stat:disabled { cursor:default; opacity:1; }
.pp-stat .lb-art { width:34px; height:34px; margin-bottom:2px; filter:drop-shadow(0 3px 3px #001e4f88); }
.pp-stat b { font:16px DraklyBlack,'Trebuchet MS',sans-serif; line-height:1.05; }
.pp-stat b i { font-style:normal; font-size:.7em; opacity:.75; }
.pp-stat small { color:#cdeeff; font-size:10px; }
.pp-stat em { position:absolute; top:-8px; right:-4px; padding:1px 6px; border-radius:999px; color:#5a3008; background:#ffe08a; font:11px DraklyBlack,'Trebuchet MS',sans-serif; font-style:normal; box-shadow:0 2px 0 #8a5a12; }
.pp-card { margin:10px 0; padding:12px; border:2px solid #6fc4ea; border-radius:16px; background:#0a3979b3; }
.pp-card h3 { margin:0 0 8px; color:#fff; font:16px DraklyBlack,'Trebuchet MS',sans-serif; }
.pp-league { display:flex; align-items:center; gap:8px; color:#e3f5ff; font-size:13px; }
.pp-league span { flex:1; }
.pp-league b { color:#fff; font:18px DraklyBlack,'Trebuchet MS',sans-serif; }
.pp-history { display:grid; gap:4px; margin:10px 0 0; padding:0; list-style:none; }
.pp-history li { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:10px; color:#e3f5ff; background:#061d4580; font-size:12.5px; }
.pp-history li span:first-child { flex:1; }
.pp-history b { color:#ffe08a; font:14px DraklyBlack,'Trebuchet MS',sans-serif; }
.pp-history b i { font-style:normal; font-size:.75em; color:#bfe9ff; }
.pp-dragons { display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:6px; }
.pp-dragon { display:grid; justify-items:center; gap:1px; padding:4px 3px 6px; border:2px solid var(--tb,#87dff9); border-radius:12px; background:linear-gradient(170deg,var(--t2,#1767bd),#0a2f68 80%); text-align:center; }
.pp-dragon__art { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:1; }
.pp-dragon__art img { width:86%; height:86%; object-fit:contain; filter:drop-shadow(0 4px 4px #04204a99); }
.pp-dragon__art .mastery-mark { position:absolute; inset:auto 2px 2px auto; }
.pp-dragon strong { max-width:100%; overflow:hidden; color:#fff; font:12px DraklyBlack,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.pp-dragon small { color:#cdeeff; font-size:10.5px; }
.pp-dragon small b { color:#fff; }
.star-row.is-tiny i { font-size:9px; }
.pp-frames { display:flex; flex-wrap:wrap; gap:10px; }
.pp-frames figure { display:grid; justify-items:center; gap:4px; width:68px; margin:0; text-align:center; }
.pp-frames figcaption { color:#cdeeff; font-size:10.5px; line-height:1.15; }
.pp-titles { display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.pp-title-chip { padding:3px 10px; border:1px solid #ffe08a99; border-radius:999px; color:#ffe08a; background:#5a300855; font:12px DraklyBold,'Trebuchet MS',sans-serif; }
.pp-foot { display:grid; gap:10px; margin-top:12px; }
.pp-foot p { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:0; color:#cdeeff; font-size:12px; }
.pp-foot p span { display:inline-flex; align-items:center; gap:4px; }
.pp-foot p b { color:#fff; }
.pp-foot .ui-icon { width:16px; height:16px; }
.pp-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }

/* The look studio on the own profile */
.look-studio h2 { margin:2px 0 4px; }
.look-preview { margin:10px 0 12px; padding:0 0 4px; border-radius:18px; background:#061d4566; }
.look-group { margin:12px 0 0; }
.look-group__head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px; }
.look-group__head h3 { margin:0; color:#fff; font:15px DraklyBlack,'Trebuchet MS',sans-serif; }
.look-group__head small { color:#bfe9ff; font-size:11.5px; text-align:right; }
.look-row { display:flex; gap:8px; overflow-x:auto; padding:6px 2px 8px; scroll-snap-type:x proximity; scrollbar-width:thin; }
.look-opt { position:relative; display:grid; justify-items:center; align-content:start; gap:4px; flex:none; width:72px; padding:6px 4px; border:2px solid #6fc4ea; border-radius:14px; color:#d7f3ff; background:linear-gradient(160deg,#1f6db0,#0b3f80); box-shadow:0 3px 0 #083d7f; font:inherit; cursor:pointer; scroll-snap-align:start; transition:transform .15s,border-color .2s,box-shadow .2s; }
.look-opt small { max-width:100%; overflow:hidden; font:10.5px DraklyBold,'Trebuchet MS',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.look-opt em { color:#9fcbe0; font-size:9px; font-style:normal; line-height:1.1; text-align:center; }
.look-opt.is-on { border-color:#ffe08a; color:#fff; box-shadow:0 3px 0 #8a5a12,0 0 14px #ffd36b66; transform:translateY(-2px); }
.look-opt:active:not(:disabled) { transform:translateY(1px); }
.look-opt:disabled { opacity:.45; cursor:default; }
.look-opt.is-locked { cursor:default; opacity:.7; filter:saturate(.5); }
.look-opt__img { width:52px; height:52px; border-radius:50%; object-fit:cover; background:radial-gradient(circle at 50% 35%,#3d95d6,#0b3f80 72%); box-shadow:0 0 0 2px #8bdbf6; }
.look-opt__img[class*="skin-"] { object-fit:contain; }
.look-opt__auto { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; color:#fff; background:#061d4599; font:20px DraklyBlack,'Trebuchet MS',sans-serif; }
.look-opt__auto .icon { width:22px; height:22px; background:#fff; }
.look-opt .avatar--md { width:52px; height:52px; }
.look-opt--wide { width:150px; }
.look-opt__ribbon { display:grid; place-items:center; width:140px; height:46px; padding:0 22px 6px; overflow:hidden; color:#5a3008; background:url('/assets/profile/title-ribbon-768.webp') center / contain no-repeat; font:11px DraklyBlack,'Trebuchet MS',sans-serif; line-height:1.05; text-align:center; }
.look-opt__banner { width:140px; height:52px; border-radius:10px; background:url('/assets/profile/banner-default-1024.webp') center / cover; box-shadow:inset 0 0 0 2px #ffffff44; }
.look-opt__banner.is-season { background-image:url('/assets/profile/banner-season-1024.webp'); }
.look-opt--dragon .look-opt__img { object-fit:contain; border-radius:12px; }
.look-opt__n { position:absolute; top:2px; right:4px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; color:#5a3008; background:#ffe08a; font:12px DraklyBlack,'Trebuchet MS',sans-serif; box-shadow:0 2px 0 #8a5a12; }
.link-btn { padding:0; border:0; color:#ffe08a; background:none; font:11.5px DraklyBold,'Trebuchet MS',sans-serif; text-decoration:underline; cursor:pointer; }
.look-studio > .btn { margin-top:14px; }
@media (prefers-reduced-motion:reduce) {
  .pp-head__avatar .avatar,.pp-showcase__item.is-lead .pp-showcase__dragon,.pp-backdrop,.pp-sheet { animation:none; }
}
.lb-grow { margin:0 2px 10px; color:#cfe3ff; }