/* Both sides occupy one grid cell, so flipping never moves the chat below it. */
.leader-flip { position: relative; min-width: 0; perspective: 1100px; }
.leader-flip-rotor { display: grid; min-width: 0; transform-style: preserve-3d; transition: transform .64s cubic-bezier(.22, .8, .2, 1); }
.leader-flip.is-flipped .leader-flip-rotor { transform: rotateY(180deg); }
.leader-flip-face { position: relative; grid-area: 1 / 1; width: 100%; min-width: 0; height: 100%; display: flex; flex-direction: column; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: rotateY(0deg); }
.leader-flip-back { transform: rotateY(180deg); background: linear-gradient(150deg, #eef9f5, #fffdf5 85%); }
.leader-flip--arena .leader-flip-back { background: linear-gradient(145deg, #edf6ff, #fffdf5 90%); }
.leader-flip-face > .section-heading, .leader-flip-face > .arena-card-heading { padding-right: 38px; min-height: 38px; }
.leader-flip-face > .leaderboard { flex: 1; }
.leader-flip .leader-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-flip .leader-body { min-width: 0; }
.leader-flip-face > .session-stats { flex: none; }
.leader-flip-button { position: absolute; z-index: 4; top: 20px; right: 17px; width: 31px; height: 31px; display: grid; place-items: center; border: 1.5px solid #29334c; border-radius: 10px; background: #fffef4; color: #526e75; box-shadow: 0 3px 0 #d4d8c7; cursor: pointer; transition: background .16s, transform .16s, box-shadow .16s; }
.leader-flip-button svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.leader-flip-button:hover { background: #ffdf82; color: #29334c; transform: translateY(-1px); box-shadow: 0 4px 0 #c7b66d; }
.leader-flip-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #d4d8c7; }
.leader-flip-button:focus-visible { outline: 3px solid #3775e7; outline-offset: 4px; }
.leader-flip-button[aria-pressed="true"] { background: #d9f4e9; color: #2d7263; }
.flip-heading-period { font-size: 7px; font-weight: 1000; letter-spacing: .14em; color: #89988a; margin: 0 0 4px; line-height: 1.3; }
.leader-flip--raid .leader-flip-back .section-heading h2 > .icon { color: #408a8a; }
.leader-flip--raid .leaderboard { margin-top: 13px; }
.leader-flip--arena .leader-flip-button { top: 22px; right: 16px; background: #f9fbff; color: #4a7395; box-shadow: 0 3px 0 #c4d8e8; }
.leader-flip--arena .leader-flip-button:hover { background: #ffdf82; color: #29334c; box-shadow: 0 4px 0 #d9c78a; }
.leader-flip--arena .leader-flip-button[aria-pressed="true"] { background: #dbecff; }
.leader-flip--arena .leader-flip-back .heading-mark { background: #d8ecfe; border-color: #96b8d7; color: #5182b0; box-shadow: 0 3px 0 #c4dff4; }
.leader-flip--arena .leader-flip-back .arena-card-heading h2 { font-size: 17px; line-height: 1.3; }
.flip-round-status { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e9e4d4; margin-top: 13px; padding-top: 12px; gap: 8px; }
.flip-round-status > span:first-child { color: #a0a38e; font-size: 7px; font-weight: 1000; letter-spacing: .11em; }
.flip-round-status .live-badge { margin-left: auto; }
.leader-flip .flip-session-stats { grid-template-columns: repeat(2, 1fr); }
.leader-flip .flip-session-stats span { font-size: 17px; }
.leader-flip--arena .flip-session-leaderboard .leader-empty { min-height: 195px; }
.leader-flip--arena .ranking-note { margin-top: 13px; }
@media(max-width:1150px) { .leader-flip--raid .leader-flip-button { top: 19px; right: 13px; } }
@media(max-width:1000px) { .leader-flip--arena .leader-flip-button { right: 12px; top: 19px; } .leader-flip--arena .leader-flip-face > .arena-card-heading { gap: 8px; } }
@media(max-width:740px) { .leader-flip--raid .leader-flip-button { top: 19px; right: 12px; } }
@media(prefers-reduced-motion:reduce) { .leader-flip-rotor, .leader-flip-button { transition: none !important; } }
.reduced-motion .leader-flip-rotor, .reduced-motion .leader-flip-button { transition: none !important; }
