:where(.ail-leader-lobby, .ail-leader-lobby *) { box-sizing: border-box; }
.ail-leader-lobby {
  --paper: #fff0df;
  --lobby-accent: #f3c48e;
  color: var(--paper);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  background: #14141b;
}
.ail-stage {
  display: grid; grid-template-columns: minmax(370px, .92fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto; align-items: end;
  position: relative; isolation: isolate; overflow: hidden; min-height: clamp(560px, calc(100svh - 110px), 860px);
  padding: 0 clamp(26px, 5vw, 82px) clamp(25px, 4vh, 56px);
  border-radius: 14px; margin-top: 18px;
  column-gap: 24px;
}
.ail-scene { position: absolute; inset: 0; overflow: hidden; container-type: size; z-index: -3; }
.ail-backdrop {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100cqw, calc(100cqh * 16 / 9)); aspect-ratio: 16 / 9; overflow: hidden;
}
.ail-backdrop > img { display: block; width: 100%; height: 100%; }
.ail-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(90deg, #101019fa 0%, #15131de8 22%, #1b1724a8 43%, #1214211a 74%),
              linear-gradient(0deg, #14141b 0%, #14141b00 33%);
}
.ail-glow {
  position: absolute; left: 14%; top: 11%; width: 23%; height: 41%;
  background: radial-gradient(ellipse, #ffbc5f85 0%, #ffac392b 38%, transparent 69%);
  mix-blend-mode: screen; animation: ail-glow 5.7s ease-in-out infinite alternate;
}
.ail-rain { position: absolute; overflow: hidden; }
.ail-rain-window { inset: 13% 56% 43% 32%; clip-path: polygon(0 18%, 24% 2%, 62% 0, 96% 20%, 100% 100%, 0 100%); }
.ail-rain-door { inset: 9% 22% 22% 51%; clip-path: polygon(0 22%, 22% 7%, 44% 0, 70% 3%, 100% 24%, 100% 100%, 0 100%); }
.ail-rain i {
  position: absolute; top: -36px; left: var(--left); width: 1px; height: var(--length);
  background: linear-gradient(transparent, #c5e8fa80, transparent);
  animation: ail-rain var(--speed) linear var(--delay) infinite;
}
.ail-portrait {
  position: absolute; right: clamp(10px, 2vw, 42px); bottom: -4px;
  width: min(54vw, 700px, calc(85svh - 10px)); z-index: -1;
  transform-origin: 50% 100%; animation: ail-breathe 4.9s ease-in-out infinite;
  mask-image: linear-gradient(#000 78%, transparent 100%);
  filter: drop-shadow(0 4px 26px #110d19a0);
}
.ail-base { display: block; width: 100%; height: auto; }
.ail-face { position: absolute; inset: 0; width: 100%; height: auto; }
/* Coordinates match each mouth's center in the shared 475 × 510 portrait frame. */
.ail-stage[data-leader="gpt"] { --smile-origin: 55.4% 53%; }
.ail-stage[data-leader="gem"] { --smile-origin: 56% 46%; }
.ail-stage[data-leader="cla"] { --smile-origin: 51.8% 46%; }
.ail-stage[data-leader="gro"] { --smile-origin: 52.5% 44.4%; }
.ail-stage[data-leader="dep"] { --smile-origin: 48% 38.7%; }
.ail-stage[data-leader="qwen"] { --smile-origin: 50% 30.3%; }
.ail-smile {
  transform-origin: var(--smile-origin);
  animation: var(--smile-animation, ail-smile) 1.8s ease-in-out .48s both;
}
/* Gemini's resting mouth already curves into a smile. Give it a small lift. */
.ail-stage[data-leader="gem"] { --smile-animation: ail-gemini-smile; }
@keyframes ail-gemini-smile {
  0%, 100% { transform: none; }
  38%, 62% { transform: translateY(-.14%) rotate(-1deg) scaleX(1.035); }
}
@keyframes ail-smile {
  0%, 100% { transform: none; }
  31%, 61% { transform: translateY(-.3%) scale(1.15, 1.22); }
}
/* Each split runs between the eyes in its portrait's 475 px source frame. */
.ail-stage[data-leader="gpt"] { --wink-split: 53.5%; }
.ail-stage[data-leader="gem"] { --wink-split: 58.4%; }
.ail-stage[data-leader="cla"] { --wink-split: 50%; }
.ail-stage[data-leader="gro"] { --wink-split: 50.5%; }
.ail-stage[data-leader="dep"] { --wink-split: 43.15%; }
.ail-stage[data-leader="qwen"] { --wink-split: 47.5%; }
.ail-eye-open {
  animation: ail-open 9.4s step-end infinite, ail-wink-open .22s step-end .99s;
}
.ail-eye-closed {
  visibility: hidden;
  animation: ail-closed 9.4s step-end infinite, ail-wink-closed .22s step-end .99s;
}
@keyframes ail-wink-open {
  from, to { clip-path: inset(0 0 0 var(--wink-split)); }
}
@keyframes ail-wink-closed {
  from, to { clip-path: inset(0 calc(100% - var(--wink-split)) 0 0); visibility: visible; }
}

.ail-copy { grid-column: 1; align-self: end; padding-bottom: clamp(18px, 4vh, 43px); }
.ail-role { margin: 0 0 8px; color: var(--lobby-accent); font-size: 14px; letter-spacing: .24em; }
.ail-copy h1 { font: 400 clamp(64px, 9vw, 144px)/.95 Georgia, serif; margin: 0; letter-spacing: -.055em; }
.ail-copy blockquote { margin: 22px 0 0 -7px; font: 400 clamp(19px, 2.15vw, 30px)/1.55 Georgia, "Noto Serif CJK TC", "PMingLiU", serif; }
.ail-controls { grid-column: 1; width: min(100%, 470px); }
.ail-leaders { padding: 0; margin: 0 0 20px; border: 0; min-inline-size: 0; }
.ail-leaders legend { color: #f2d6bd; font-size: 12px; margin-bottom: 10px; }
.ail-roster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(4px, 1vw, 9px); }
.ail-roster button {
  position: relative; min-width: 0; display: grid; grid-template-rows: auto 21px;
  text-align: center; cursor: pointer; padding: 0; margin: 0; color: #ebddd3; background: #211d29;
  border: 1px solid #d2b69942; border-radius: 7px; overflow: hidden;
}
.ail-roster button[aria-pressed="true"] { border-color: var(--lobby-accent); color: #fff0df; background: color-mix(in srgb, var(--lobby-accent) 26%, #211d29); box-shadow: 0 0 13px color-mix(in srgb, var(--lobby-accent) 28%, transparent); }
.ail-roster button:focus-visible, .ail-leader-lobby button:focus-visible { outline: 2px solid #fff1ca; outline-offset: 3px; }
.ail-roster img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: radial-gradient(ellipse, #744c46, #252235); }
.ail-roster span { align-self: center; font-size: clamp(9px, 1.5vw, 11px); white-space: nowrap; }
.ail-start {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  color: #301d17; background: linear-gradient(110deg, color-mix(in srgb, var(--lobby-accent) 55%, white), var(--lobby-accent));
  border: 1px solid color-mix(in srgb, var(--lobby-accent) 55%, white); border-radius: 7px; min-height: 52px; padding: 11px 16px;
  font-weight: 700;
}
.ail-start:hover { background: color-mix(in srgb, var(--lobby-accent) 55%, white); }
@keyframes ail-breathe { 0%,100% { transform: none; } 50% { transform: translateY(-2px) scale(1.005, 1.012); } }
@keyframes ail-open { 0%, 29.5%, 77% { visibility: visible; } 28%, 75.5% { visibility: hidden; } }
@keyframes ail-closed { 0%, 29.5%, 77% { visibility: hidden; } 28%, 75.5% { visibility: visible; } }
@keyframes ail-glow { from { opacity: .47; } to { opacity: .84; } }
@keyframes ail-rain { to { transform: translate(-24px, 52cqh); } }
@media (max-width: 760px) {
  .ail-stage {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto;
    align-content: end; min-height: 0; margin-top: 8px; padding: clamp(225px, 63vw, 390px) 16px 32px;
  }
  .ail-scene { bottom: auto; height: clamp(330px, 96vw, 510px); }
  .ail-backdrop { left: 40%; }
  .ail-stage::before {
    background: linear-gradient(0deg, #14141b 0%, #14141b 23%, #14141bef 35%, #14141b00 78%),
                linear-gradient(90deg, #17131b39, transparent 90%);
  }
  .ail-portrait {
    top: 0; right: auto; bottom: auto; justify-self: center;
    width: min(100%, 460px); mask-image: linear-gradient(#000 62%, transparent 94%);
  }
  .ail-copy { text-align: center; padding-bottom: 20px; }
  .ail-role { font-size: 12px; margin-bottom: 4px; }
  .ail-copy h1 { font-size: clamp(42px, 12vw, 67px); }
  .ail-copy blockquote { margin: 7px 0 0; font-size: clamp(17px, 4.7vw, 22px); }
  .ail-controls { justify-self: center; }
  .ail-leaders { margin-bottom: 12px; }
}

.ail-opponent { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 0 0 10px; }
.ail-opponent select { width: 100%; min-width: 0; color: #fff0df; background: #221d29; }
.ail-leader-lobby .ail-match-info { margin: 6px 0 0; color: #dcc1ad; font-size: 11px; }
.ail-lobby-links { padding: 16px 0 12px; }
.ail-lobby-links .lobby-actions { flex-wrap: wrap; }
.ail-lobby-details { margin: 0 0 26px; }
.ail-lobby-details summary { cursor: pointer; color: var(--gold); margin-bottom: 10px; }
body.motion-off .ail-stage :is(.ail-rain i, .ail-glow, .ail-portrait, .ail-eye, .ail-smile, .ail-particles i, .ail-tide, .ail-compass) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .ail-stage :is(.ail-rain i, .ail-glow, .ail-portrait, .ail-eye, .ail-smile, .ail-particles i, .ail-tide, .ail-compass) { animation: none; }
}
@media (max-width: 760px) {
  .ail-scene { mask-image: linear-gradient(#000 79%, transparent 100%); }
}
@media (max-width: 360px) {
  .ail-stage { padding-top: 193px; }
  .ail-copy { padding-bottom: 14px; }
}

.ail-visual { display: contents; }
.ail-stage:not([data-leader="cla"]) .ail-backdrop { inset: 0; width: auto; transform: none; aspect-ratio: auto; }
.ail-stage:not([data-leader="cla"]) .ail-backdrop > img { object-fit: cover; object-position: center 48%; }
.ail-stage:not([data-leader="cla"]) .ail-glow {
  inset: 0; width: auto; height: auto;
  background: radial-gradient(ellipse at 74% 34%, color-mix(in srgb, var(--lobby-accent) 50%, transparent), transparent 65%);
}
.ail-stage[data-leader="gpt"] h1,
.ail-stage[data-leader="dep"] h1,
.ail-stage[data-leader="qwen"] h1 { font-size: clamp(54px, 7vw, 113px); }
.ail-particles, .ail-tide, .ail-compass { position: absolute; pointer-events: none; }
.ail-particles { inset: 0; }
.ail-particles i {
  position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size);
  border-radius: 50%; background: var(--lobby-accent); box-shadow: 0 0 9px var(--lobby-accent);
  opacity: .24; animation: ail-drift var(--time) ease-in-out var(--delay) infinite;
}
.ail-stars i { border-radius: 0; transform: rotate(45deg); animation-name: ail-twinkle; }
.ail-embers i { animation-name: ail-ember; }
.ail-tide {
  inset: 24% -45% 0;
  background: repeating-linear-gradient(166deg, transparent 0 13%, #87eaff36 16%, transparent 20%);
  mask-image: radial-gradient(ellipse, #000, transparent 68%);
  animation: ail-swell 8s ease-in-out infinite alternate;
}
.ail-compass {
  left: 66%; top: 30%; width: min(48cqw, 470px); aspect-ratio: 1;
  border: 1px dashed #efeaff90; border-radius: 50%; opacity: .55;
  box-shadow: 0 0 40px #b6a0ff45, inset 0 0 40px #b6a0ff45;
  animation: ail-compass-turn 35s linear infinite;
}
.ail-compass::after {
  content: ""; position: absolute; inset: 15%; border: 1px solid #efeaff70;
  transform: rotate(45deg);
}
@keyframes ail-drift { 0%,100% { opacity: .16; transform: translateY(0); } 50% { opacity: .78; transform: translateY(-17px); } }
@keyframes ail-twinkle { 0%,100% { opacity: .16; transform: rotate(45deg) scale(.7); } 50% { opacity: .96; transform: rotate(45deg) scale(1.45); } }
@keyframes ail-ember { 0%,100% { opacity: 0; transform: translate(0, 18px); } 48% { opacity: .72; } 90% { transform: translate(19px, -36px); } }
@keyframes ail-swell { from { transform: translate(-6%, 8%); opacity: .30; } to { transform: translate(8%, -3%); opacity: .86; } }
@keyframes ail-compass-turn { to { transform: rotate(1turn); } }
@media (max-width: 760px) {
  .ail-stage[data-leader] h1 { font-size: clamp(42px, 12vw, 67px); }
  .ail-compass { left: 59%; top: 17%; }
}