/* MOBA-style hero select and VS loading screen (dist/lobby-ui.mjs).
   Original jade/gold Ayodea look: lotus mandala, temple skyline, gold-edged jade panels.
   Everything is scoped under #lobby / .versus so the older lobby rules in style.css never win. */
@property --school-glow{syntax:'<color>';inherits:true;initial-value:#dfbc7466}

#lobby{
 --lobby-top:92px;--school:#dfbc74;--school-glow:#dfbc7466;--school-faint:#dfbc7424;
 display:block;padding:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
 -webkit-backdrop-filter:none;backdrop-filter:none;color:#f1efdf;
 background:
  radial-gradient(ellipse 70% 55% at 50% 30%,var(--school-faint),transparent 72%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23dfbc74' stroke-opacity='.065'%3E%3Cpath d='M36 3 69 36 36 69 3 36Z'/%3E%3Cpath d='M36 22 50 36 36 50 22 36Z'/%3E%3Ccircle cx='36' cy='36' r='3'/%3E%3Cpath d='M0 0 7 7M72 0 65 7M0 72 7 65M72 72 65 65'/%3E%3C/g%3E%3C/svg%3E") center/72px 72px,
  radial-gradient(ellipse 90% 45% at 50% 112%,#1d5049,transparent 70%),
  linear-gradient(180deg,#05141a 0%,#0b2529 50%,#071a1e 100%);
 transition:--school-glow .6s ease;
}
#lobby .lobby-shell{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;min-height:100%;max-width:780px;margin:0 auto;padding:var(--lobby-top) 12px 0}
#lobby h1,#lobby h2{text-wrap:balance}

/* Heading */
#lobby .lobby-heading{order:-5;text-align:left;padding:0 2px}
#lobby .lobby-heading .eyebrow{display:block;font-size:12px;letter-spacing:3px;color:#cbb37a}
#lobby .lobby-heading h1{margin:2px 0;font:26px/1.3 Chonburi,serif;color:#f3d38e;background:linear-gradient(180deg,#fff4d0,#e3bf72 60%,#b98a3e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 6px #000a)}
#lobby .lobby-heading p{margin:0;font-size:13px;color:#9fb8b4}

/* Role filter and hero tiles */
#lobby .lobby-roster{order:-2;display:flex;flex-direction:column;gap:6px;min-width:0}
#lobby .role-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px 3px 6px;margin:0 -3px}
#lobby .role-tabs::-webkit-scrollbar{display:none}
@media (hover:hover) and (pointer:fine){#lobby .role-tabs{scrollbar-width:thin;scrollbar-color:#cfb27366 transparent}#lobby .role-tabs::-webkit-scrollbar{display:block;height:6px}#lobby .role-tabs::-webkit-scrollbar-thumb{border-radius:3px;background:#cfb27366}}
#lobby .role-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;margin:0;padding:6px 12px;border-radius:999px;border:1px solid #cfb27345;background:#0b262bd9;color:#cfdcd5;font-size:13px;line-height:1.25;white-space:nowrap}
#lobby .role-tab small{min-width:18px;padding:0 5px;border-radius:9px;background:#06181d;color:#8fa9a4;font-size:11px;text-align:center}
#lobby .role-tab[aria-pressed=true]{color:#16261f;font-weight:600;background:linear-gradient(180deg,#f8e2a4,#d6ad60);border-color:#fff0c0;box-shadow:0 0 14px #e0b86744}
#lobby .role-tab[aria-pressed=true] small{background:#16261f22;color:#16261f}
#lobby .hero-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:12px 8px;align-content:start;max-height:none;overflow:visible;padding:6px 4px 6px}
#lobby .hero-choice{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:5px;min-width:0;margin:0;padding:0;border:0;border-radius:10px;background:none;box-shadow:none;overflow:visible;text-align:center;color:inherit;transition:transform .18s ease}
#lobby .hero-choice:hover:not(:disabled){filter:none;transform:translateY(-3px)}
#lobby .hero-choice:focus-visible{outline-offset:3px;border-radius:10px}
#lobby .hero-choice .tile-art{position:relative;display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;font-size:0;background:radial-gradient(circle at 50% 32%,var(--tile,#3a5f5c),#0a2126 76%),#0a2126;border:1px solid #cfb27370;box-shadow:inset 0 0 0 2px #06161b,inset 0 0 0 3px #dfbc7422,0 5px 12px #0008;transition:border-color .18s ease}
#lobby .hero-choice .tile-art::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,transparent 58%,#06161bb8);pointer-events:none}
#lobby .hero-choice img{position:absolute;left:0;top:0;display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;object-position:50% 4%;transform:scale(1.16);transform-origin:50% 8%;filter:none}
/* Thumbs from hero-thumbs.mjs are framed busts: shown whole. The portrait fallback (and the naga) keeps the crop above. */
#lobby .hero-choice img[data-art=thumb]{object-position:50% 50%;transform:none}
#lobby .hero-choice strong{display:block;margin:0;font-size:12.5px;font-weight:600;line-height:1.25;color:#dfe7df;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lobby .hero-choice::after{content:none}
#lobby .hero-choice[aria-pressed=true] .tile-art{border-color:#fff0c0;box-shadow:inset 0 0 0 2px #06161b,inset 0 0 0 3px #f3d38e,0 0 0 2px #f3d38e70,0 0 20px var(--tile-glow,#f0c77b88)}
#lobby .hero-choice[aria-pressed=true] strong{color:#f6dc97}
#lobby .hero-choice[aria-pressed=true]::after{content:'';position:absolute;top:-5px;right:-5px;width:15px;height:15px;rotate:45deg;background:linear-gradient(135deg,#fff0c0,#d6ad60);border:2px solid #06161b;box-shadow:0 0 8px #f0c77b;color:transparent}

/* Stage: an ornate hero card on rays and falling petals. lobby-ui.mjs sizes the card (cardLayout) and the art
   (never more than 1.15 device px per image px); a larger stage grows the card's frame and backdrop, not the art. */
/* Single column: the stage and its info unwrap so the roster sits between the nameplate and the skills. */
#lobby .lobby-stage{--art-h:clamp(200px,38vh,380px);--mandala-y:48%;display:contents}
#lobby .stage-info{display:contents}
#lobby .stage-hero{order:-4;position:relative;isolation:isolate;height:var(--art-h);margin:0 -12px;padding:0 12px}
#lobby .stage-skills{order:-1;position:relative}
#lobby .stage-decor{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(#000 72%,#0000);mask-image:linear-gradient(#000 72%,#0000)}
#lobby .stage-rays{position:absolute;left:50%;top:var(--mandala-y);width:max(110%,540px);aspect-ratio:1;translate:-50% -50%;opacity:.55;background:repeating-conic-gradient(from 0deg,var(--school-faint) 0deg 3deg,transparent 5deg 15deg);-webkit-mask-image:radial-gradient(closest-side,#000 11%,#0000 100%);mask-image:radial-gradient(closest-side,#000 11%,#0000 100%);animation:lobby-spin 120s linear infinite}
#lobby .stage-burst{position:absolute;left:50%;top:var(--mandala-y);width:min(60%,420px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;opacity:0;border:2px solid #fff0c0;background:radial-gradient(circle,#fff6d855,var(--school-glow) 38%,#0000 70%);box-shadow:0 0 40px var(--school-glow),inset 0 0 30px #fff0c066}
#lobby .stage-petals{position:absolute;inset:0;overflow:hidden}
#lobby .petal,#lobby .mote{position:absolute;top:0;left:var(--x);width:var(--size);height:100%;animation:petal-fall var(--dur) linear var(--delay) infinite;will-change:transform}
#lobby .petal::before{content:'';display:block;width:var(--size);height:var(--size);border-radius:0 80% 0 80%;background:linear-gradient(135deg,#ffe0ea,#f59ab8 55%,#e7c67f);opacity:.85;animation:petal-turn 3.4s ease-in-out infinite alternate}
#lobby .mote{animation-name:mote-rise}
#lobby .mote::before{content:'';display:block;width:var(--size);height:var(--size);border-radius:50%;background:#fff1c4;box-shadow:0 0 8px 2px #f3d38e}
#lobby .stage-art{position:relative;display:flex;align-items:flex-end;justify-content:center;height:100%;min-width:0;min-height:0}
#lobby .hero-card{--banner-h:clamp(28px,calc(var(--card-h,0px) * .12),76px);position:relative;flex:0 0 auto;width:var(--card-w,0px);height:var(--card-h,0px);margin-bottom:var(--card-overhang,0px);perspective:1100px;pointer-events:none}
#lobby .hero-card:not(.is-ready){visibility:hidden}
#lobby .card-tilt{position:absolute;inset:0;border-radius:14px;transform:rotateX(calc(var(--tilt-y,0) * -4deg)) rotateY(calc(var(--tilt-x,0) * 5deg));transition:transform .6s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 0 1px #06161b,0 0 34px var(--card-glow,#dfbc7466),0 24px 48px #000c}
#lobby .card-back{position:absolute;inset:0;overflow:hidden;isolation:isolate;border-radius:inherit;background:#071d22}
#lobby .card-paint{position:absolute;inset:0;background:
  radial-gradient(ellipse 62% 44% at 50% 38%,var(--card-glow,#dfbc7466),transparent 72%),
  radial-gradient(ellipse 90% 60% at 18% 8%,var(--card-faint,#dfbc7424),transparent 70%),
  radial-gradient(ellipse 90% 60% at 86% 22%,#f3d38e1c,transparent 68%),
  radial-gradient(ellipse 120% 55% at 50% 108%,#1d5049,transparent 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .05' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .93 0 0 0 0 .78 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") center/160px 160px,
  linear-gradient(180deg,#0e3136,#071b20 70%,#05151a)}
#lobby .card-rays{position:absolute;left:50%;top:40%;width:190%;aspect-ratio:1;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,#fff4d014 0deg 3deg,transparent 5deg 13deg);-webkit-mask-image:radial-gradient(closest-side,#000 8%,#0000 92%);mask-image:radial-gradient(closest-side,#000 8%,#0000 92%);animation:lobby-spin 90s linear infinite}
#lobby .card-emblem{position:absolute;left:50%;top:40%;width:108%;aspect-ratio:1;translate:calc(-50% + var(--tilt-x,0) * -8px) calc(-50% + var(--tilt-y,0) * -6px);color:#f0cd83;opacity:.26;transition:translate .6s cubic-bezier(.2,.8,.2,1);animation:lobby-spin 160s linear infinite reverse}
#lobby .card-energy{position:absolute;left:50%;top:44%;width:104%;aspect-ratio:1;translate:-50% -50%;background:var(--energy,none) center/contain no-repeat;opacity:.5;mix-blend-mode:screen;mix-blend-mode:plus-lighter;animation:card-swirl 28s linear infinite}
#lobby .card-ground{position:absolute;left:8%;right:8%;bottom:9%;height:17%;border-radius:50%;background:radial-gradient(closest-side,#fff4d0a0,var(--card-glow,#dfbc7466) 42%,transparent);animation:card-glow 6s ease-in-out infinite}
#lobby .card-figure{position:absolute;left:0;right:0;top:var(--win-top,0px);width:var(--win-w,0px);height:var(--win-h,0px);margin:0 auto;transform:translate(calc(var(--tilt-x,0) * 5px),calc(var(--tilt-y,0) * 3px));transition:transform .6s cubic-bezier(.2,.8,.2,1);animation:card-breathe 6s ease-in-out infinite}
#lobby .splash-art{position:absolute;left:0;right:0;bottom:0;display:block;max-width:none;max-height:none;margin:0 auto;object-fit:contain;opacity:0;pointer-events:none;filter:drop-shadow(0 0 1px #fff4d0b0) drop-shadow(0 0 10px var(--card-glow,#dfbc7466)) drop-shadow(0 10px 12px #000a);-webkit-mask-image:linear-gradient(#000 86%,transparent);mask-image:linear-gradient(#000 86%,transparent)}
#lobby .splash-art.is-front{opacity:1}
#lobby .card-frame{position:absolute;inset:0;border-radius:inherit;border:2px solid #e2bf76;box-shadow:inset 0 0 0 3px #06161bcc,inset 0 0 0 4px #e7c67f66,inset 0 0 28px #000b}
#lobby .card-frame::before{content:'';position:absolute;inset:7px;border:5px solid transparent;border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cg fill='none' stroke='%23e7c67f' stroke-opacity='.75'%3E%3Cpath d='M2.5 0V15M12.5 0V15M0 2.5H15M0 12.5H15' stroke-width='.6'/%3E%3C/g%3E%3Cg fill='%23f3d38e'%3E%3Cpath d='M7.5 1 9 2.5 7.5 4 6 2.5ZM7.5 11 9 12.5 7.5 14 6 12.5ZM1 7.5 2.5 6 4 7.5 2.5 9ZM11 7.5 12.5 6 14 7.5 12.5 9Z'/%3E%3C/g%3E%3C/svg%3E") 5 round;opacity:.8}
#lobby .card-corner{position:absolute;width:min(26%,92px);aspect-ratio:1;filter:drop-shadow(0 2px 3px #000b)}
#lobby .card-corner.tl{left:-5px;top:-5px}
#lobby .card-corner.tr{right:-5px;top:-5px;scale:-1 1}
#lobby .card-corner.bl{left:-5px;bottom:-5px;scale:1 -1}
#lobby .card-corner.br{right:-5px;bottom:-5px;scale:-1 -1}
#lobby .card-crest{position:absolute;left:50%;top:-8px;width:15px;height:15px;translate:-50% 0;rotate:45deg;border:2px solid #06161b;background:radial-gradient(circle,var(--card-school,#dfbc74) 30%,#fff0c0 34%,#d6ad60 80%);box-shadow:0 0 0 1px #e7c67f,0 0 14px var(--card-school,#dfbc74)}
#lobby .card-banner{position:absolute;left:50%;bottom:calc(-1 * var(--card-overhang,0px));display:grid;place-items:center;width:calc(86% + 34px);height:var(--banner-h);translate:-50% 0;padding:0 10%;background:linear-gradient(90deg,#8d6425,#f6dc97 22%,#fff3cc 50%,#f6dc97 78%,#8d6425);clip-path:polygon(0 50%,7% 0,93% 0,100% 50%,93% 100%,7% 100%);filter:drop-shadow(0 6px 10px #000c)}
#lobby .card-banner::before{content:'';position:absolute;inset:2px 3px;background:linear-gradient(180deg,#154047,#081d22 70%);clip-path:polygon(0 50%,7% 0,93% 0,100% 50%,93% 100%,7% 100%)}
#lobby .card-banner::after{content:'';position:absolute;inset:6px 9%;border-top:1px solid #f3d38e55;border-bottom:1px solid #f3d38e33;pointer-events:none}
/* The name uses the display face and title fill of theme.css when it is loaded (--ay-display, --ay-title-fill, --ay-outline),
   Chonburi otherwise; font-synthesis keeps the one-weight Chonburi from a fake bold. lobby-ui.mjs shrinks long names
   (--name-fit) so they always fit, so nothing is cut with an ellipsis. */
#lobby .card-name{position:relative;overflow:hidden;max-width:100%;padding-top:.04em;font:700 calc(clamp(14px,calc(var(--card-w,300px) * .09),32px) * var(--name-fit,1))/1.25 var(--ay-display,Chonburi),serif;font-synthesis:none;white-space:nowrap;text-overflow:clip;color:#f3d38e;background:var(--ay-title-fill,linear-gradient(180deg,#fffbe8 8%,#f3d38e 55%,#c8963f));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:var(--ay-outline,) drop-shadow(0 1px 1px #0a1c1f)}
/* Difficulty pips above the banner, shown where the nameplate's difficulty line is not (landscape phones). */
#lobby .card-pips{position:absolute;left:50%;bottom:calc(var(--banner-h) - var(--card-overhang,0px) + 4px);display:none;gap:5px;translate:-50% 0}
#lobby .card-pips i{width:7px;height:7px;rotate:45deg;border:1px solid #dfbc74aa;background:#0a2126;box-shadow:0 0 0 1px #06161b99}
#lobby .card-pips i.on{background:linear-gradient(135deg,#fff0c0,#d9ae5d);border-color:#fff0c0;box-shadow:0 0 6px #f0c77b99}
/* The banner names the hero, so the nameplate title stays only for screen readers. */
#lobby #hero-detail .hero-title{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Nameplate, skills and info card */
#lobby #hero-detail{order:-3;position:relative;z-index:1;margin:6px 0 0;padding:0;border:0;background:none;font-size:14px}
/* The card banner carries the name, so the nameplate is one line of role chips and difficulty, with the lore under it. */
#lobby .hero-nameplate{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:0 2px}
#lobby #hero-detail .hero-lore{order:1;flex:1 1 100%;min-width:0}
#lobby .role-chips{display:flex;flex-wrap:wrap;gap:6px}
#lobby .role-chip{padding:2px 10px;border-radius:4px;font-size:11.5px;font-weight:600;letter-spacing:.5px;color:#10201d;background:var(--chip,#dfbc74);box-shadow:0 2px 6px #0007}
#lobby .role-chip[data-role=fighter]{--chip:#f2a765}
#lobby .role-chip[data-role=tank]{--chip:#a3dc8e}
#lobby .role-chip[data-role=mage]{--chip:#bcaeff}
#lobby .role-chip[data-role=carry]{--chip:#f5d06e}
#lobby .role-chip[data-role=assassin]{--chip:#dca2f5}
#lobby .role-chip[data-role=support]{--chip:#8ce5d2}
#lobby .hero-title{margin:6px 0 2px;font:clamp(30px,8vw,46px)/1.2 Chonburi,serif;color:#f3d38e;background:linear-gradient(180deg,#fffbe8 5%,#f3d38e 55%,#c8963f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 0 #0a1c1f) drop-shadow(0 6px 14px #000c)}
#lobby #hero-detail .hero-lore{margin:0;font-size:14px;line-height:1.5;color:#d8e4dc;text-shadow:0 1px 4px #000}
#lobby #hero-detail .hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:0;font-size:12.5px;line-height:1.4;color:#a9c1bb}
#lobby .hero-meta .hero-role-text{color:#cdb98a}
#lobby .hero-stars{display:inline-flex;gap:5px;padding:0 2px}
#lobby .hero-stars i{width:9px;height:9px;rotate:45deg;border:1px solid #dfbc74aa;background:#0a2126}
#lobby .hero-stars i.on{background:linear-gradient(135deg,#fff0c0,#d9ae5d);border-color:#fff0c0;box-shadow:0 0 6px #f0c77b99}
#lobby .skill-strip{display:flex;align-items:flex-end;column-gap:min(10px,2.2%);margin:8px 0 0;padding:12px 8px 12px;overflow:visible}
#lobby .skill-chip:focus-visible,#lobby .role-tab:focus-visible{outline-offset:1px}
#lobby .skill-chip{position:relative;flex:0 1 52px;display:grid;place-items:center;width:auto;min-width:0;height:auto;min-height:0;aspect-ratio:1;margin:0;padding:0;border-radius:50%;border:2px solid #cfb27399;background:radial-gradient(circle at 50% 35%,#1d4a4a,#08191e);box-shadow:0 0 0 3px #06161bcc,0 6px 14px #0008;transition:transform .15s ease,border-color .15s ease}
#lobby .skill-chip img{width:100%;height:100%;border-radius:50%;object-fit:cover}
#lobby .skill-chip kbd{position:absolute;bottom:-8px;left:50%;translate:-50% 0;min-width:20px;padding:0 5px;border-radius:6px;border:1px solid #cfb27388;background:#0a2126;color:#f3d38e;font-size:10.5px;font-weight:600;line-height:15px;white-space:nowrap}
#lobby .skill-chip.chip-ultimate{flex-basis:60px;border-color:#f3d38e;box-shadow:0 0 0 3px #06161bcc,0 0 0 5px #dfbc7455,0 0 18px #f0c77b66}
#lobby .skill-chip.chip-ultimate kbd{background:#e3c07a;color:#16261f}
#lobby .skill-chip.chip-passive,#lobby .skill-chip.chip-combo{flex-basis:44px;border-style:dashed}
#lobby .chip-glyph{font-size:19px;line-height:1;color:var(--school);text-shadow:0 0 10px var(--school-glow)}
#lobby .skill-chip:hover:not(:disabled){filter:brightness(1.12)}
#lobby .skill-chip[aria-pressed=true]{border-color:#fff0c0;transform:translateY(-4px)}
#lobby .skill-chip[aria-pressed=true]::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1px solid #f6dc97b0;box-shadow:0 0 14px #f0c77b80;pointer-events:none}
#lobby .skill-info{--tip-x:40px;position:relative;margin:6px 0 0;padding:10px 12px;min-height:68px;border-radius:10px;border:1px solid #cfb27366;background:linear-gradient(160deg,#10333aef,#081c22f4);box-shadow:inset 0 1px 0 #f3dca022,0 10px 24px #0007}
#lobby .skill-info::before{content:'';position:absolute;top:-7px;left:calc(var(--tip-x) - 6px);width:12px;height:12px;rotate:45deg;border-left:1px solid #cfb27366;border-top:1px solid #cfb27366;background:#10333a;transition:left .2s ease}
#lobby .skill-info header{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px}
#lobby .skill-info kbd{padding:1px 6px;border-radius:4px;background:#e3c07a;color:#16261f;font-size:11px;font-weight:600}
#lobby .skill-info strong{font-size:15px;color:#f6e7bd}
#lobby .skill-info small{margin-left:auto;font-size:12px;color:#9fd9c4;white-space:nowrap}
#lobby .stage-skills .skill-info p{margin:4px 0 0;font-size:13px;line-height:1.5;color:#cfdcd5}

/* Right panel: gold-edged jade blocks */
#lobby .lobby-panel{display:flex;flex-direction:column;gap:14px;min-width:0}
#lobby .lobby-block{position:relative;margin:0;padding:14px;border-radius:12px;border:1px solid #cfb27355;background:linear-gradient(165deg,#12383cf2,#0a2127f5);box-shadow:inset 0 1px 0 #f3dca026,inset 0 0 0 1px #06161b,0 10px 26px #0006;text-align:left}
#lobby .lobby-block::before{content:'';position:absolute;top:-5px;left:50%;width:9px;height:9px;translate:-50% 0;rotate:45deg;background:#dfbc74;box-shadow:0 0 8px #f0c77b88}
#lobby .lobby-block h2{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:17px/1.35 Chonburi,serif;color:#f3d38e}
#lobby .lobby-block h2::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,#cfb27388,transparent)}
#lobby select{min-width:0;padding:7px 28px 7px 10px;border:1px solid #cfb27366;border-radius:8px;background-color:#0a2327;color:#f1efdf;font-size:14px}
#lobby .build-options{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:0 0 10px;font-size:13px;color:#c9d7cf}
#lobby .build-options>label:first-child{display:flex;align-items:center;gap:8px}
#lobby #build-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#lobby #build-preview>span{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:0;padding:9px 4px 7px;border-radius:9px;border:1px solid #cfb27333;background:#071b20;text-align:center}
#lobby #build-preview img{width:40px;height:40px;border-radius:7px;object-fit:cover;box-shadow:0 0 0 1px #cfb27366,0 4px 10px #0007}
#lobby #build-preview b{padding:0;font-size:11.5px;font-weight:400;line-height:1.25;color:#d8e3dc}
#lobby #build-preview small{position:absolute;top:3px;left:6px;color:#f3d38e;font-size:11px}
#lobby .online-panel p{margin:6px 0;font-size:13px;color:#c5d4cd}
#lobby .online-panel>small{display:block;margin-top:8px;font-size:11.5px;line-height:1.5;color:#8fa9a4}
#lobby .online-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#lobby .secondary{border:1px solid #cfb27355;border-radius:9px;background:#0a2327;color:#e8e4d0;padding:10px 12px}
#lobby #online-start{flex:1;min-width:150px;padding:11px 16px;border-radius:10px;border:1px solid #b6f5e2;background:linear-gradient(180deg,#78e8cb,#2b9d86);color:#052321;font-size:16px;font-weight:600;box-shadow:inset 0 -2px 0 #1b6f60,0 6px 18px #2bb59a33}
#lobby .google-login{width:100%;margin:10px 0 0;padding:11px;border-radius:10px;border:1px solid #fff;background:#f4f1e6;color:#1d2a2a;font-weight:600}
#lobby .lobby-howto summary{cursor:pointer;color:#e3c98e;font-size:14px}
#lobby .lobby-help{margin:8px 0 0;text-align:left;font-size:12.5px;line-height:1.7;color:#a9c1bb}
#lobby .lobby-help br{display:revert}
#lobby #load-error{margin:0;padding:10px 12px;border-radius:9px;border:1px solid #ed827e88;background:#3a1a1ecc;color:#ffd1ca}

/* Confirm bar: bot opponent, difficulty and the big start button */
#lobby .lobby-cta{position:sticky;bottom:0;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px;margin:0 -12px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #cfb27333;background:linear-gradient(180deg,#07191e,#05141a);box-shadow:0 -14px 26px #0009}
#lobby .cta-foe{display:flex;align-items:center;gap:9px;min-width:0}
#lobby #opponent-portrait{flex:0 0 auto;width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 8%;border:1px solid #ed827e99;background:radial-gradient(circle,var(--foe,#ed827e44),#0a2126 72%);box-shadow:0 0 0 2px #06161b,0 0 12px #ed827e33}
#lobby #opponent-portrait:not([src]){visibility:hidden}
#lobby #opponent-portrait[data-art=thumb]{object-position:50% 50%}
#lobby .opponent{display:flex;flex-direction:column;gap:0;min-width:0;font-size:11px;line-height:1.3;color:#9fb8b4;text-align:left;align-self:center}
#lobby .opponent strong{overflow:hidden;font-size:14px;color:#f3b9ae;white-space:nowrap;text-overflow:ellipsis}
#lobby .cta-difficulty{display:flex;align-items:center;gap:7px;font-size:12px;color:#b9cdcd;white-space:nowrap}
#lobby .cta-difficulty select{padding:6px 26px 6px 9px;font-size:13px}
#lobby #start{grid-column:1/-1;position:relative;overflow:hidden;width:100%;min-width:0;min-height:50px;margin:0;padding:8px 20px;border-radius:12px;border:1px solid #fff0c0;background:linear-gradient(180deg,#fff0c2 0%,#eecb7d 40%,#c99a4b 100%);color:#16261f;font:20px/1.2 Chonburi,serif;letter-spacing:.5px;white-space:nowrap;text-shadow:0 1px 0 #fff7;box-shadow:inset 0 -3px 0 #9c7232,inset 0 2px 0 #fffa,0 0 0 3px #06161b,0 0 0 4px #dfbc7470,0 10px 28px #e0b86740}
#lobby #start::before{content:'';position:absolute;top:50%;left:14px;right:14px;height:10px;translate:0 -50%;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5Z' fill='%2316261f' fill-opacity='.4'/%3E%3C/svg%3E") left center/10px 10px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5Z' fill='%2316261f' fill-opacity='.4'/%3E%3C/svg%3E") right center/10px 10px no-repeat}
#lobby #start:not(:disabled)::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:28%;background:linear-gradient(100deg,transparent,#fffbe8b0,transparent);transform:skewX(-20deg);animation:cta-shine 3.4s ease-in-out infinite;pointer-events:none}
#lobby #start:disabled{opacity:.7;filter:saturate(.35) brightness(.85)}
#lobby #start:active:not(:disabled){translate:0 1px;box-shadow:inset 0 -1px 0 #9c7232,inset 0 2px 0 #fffa,0 0 0 3px #06161b,0 0 0 4px #dfbc7470,0 4px 14px #e0b86740}
/* Scrolling layouts: an opaque topbar keeps scrolled lobby content from showing through the brand. */
#game:has(#lobby:not([hidden])) .topbar{background:linear-gradient(180deg,#05141a 0%,#05141af5 80%,#05141a00)}
@media (max-width:599px){#lobby .lobby-heading p{display:none}}
@media (max-width:599px) and (max-height:700px){#lobby .lobby-heading .eyebrow{display:none}#lobby .lobby-heading h1{font-size:22px}#lobby .lobby-stage{--art-h:clamp(180px,34vh,300px)}}

/* Wider single column (tablets in portrait) */
@media (min-width:600px){
 #lobby .lobby-shell{padding-left:18px;padding-right:18px}
 #lobby .lobby-stage{--art-h:clamp(260px,40vh,440px)}
 #lobby .stage-hero{margin:0 -18px;padding:0 18px}
 #lobby .lobby-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
 #lobby .lobby-howto,#lobby #load-error{grid-column:1/-1}
 #lobby .lobby-cta{margin:0 -18px;padding-left:18px;padding-right:18px;grid-template-columns:minmax(0,1fr) auto minmax(240px,320px)}
 #lobby #start{grid-column:auto}
}

/* Desktop and large tablets in landscape: three columns like a MOBA pick screen */
@media (min-width:900px) and (min-height:600px){
 #lobby{--lobby-top:92px;overflow:hidden}
 #game:has(#lobby:not([hidden])) .topbar{background:linear-gradient(#061c25ed,#08222ac2,transparent)}
 #lobby::before{content:'';position:absolute;left:0;right:0;bottom:0;height:clamp(110px,19vh,190px);pointer-events:none;opacity:.9;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 170' preserveAspectRatio='xMidYMax meet'%3E%3Cpath fill='%23041417' fill-opacity='.9' stroke='%23dfbc74' stroke-opacity='.3' d='M0 170V158H70V128H96L150 86 204 128H230V158H330V146H338C340 128 350 116 360 112 370 116 380 128 382 146H390V158H486L490 140H496L500 110 504 140H510L514 158H548L556 132H566L571 108H580L585 84H592L596 60H599L600 26 601 60H604L608 84H615L620 108H629L634 132H644L652 158H686L690 140H696L700 110 704 140H710L714 158H810V146H818C820 128 830 116 840 112 850 116 860 128 862 146H870V158H970V128H996L1050 86 1104 128H1130V158H1200V170Z'/%3E%3Cpath fill='%23041417' fill-opacity='.9' stroke='%23dfbc74' stroke-opacity='.3' d='M112 110 150 70 188 110ZM1012 110 1050 70 1088 110ZM355 112 360 58 365 112ZM835 112 840 58 845 112Z'/%3E%3C/svg%3E") center bottom/auto 100% repeat-x}
 #lobby .lobby-shell{display:grid;max-width:none;height:100%;min-height:0;margin:0;grid-template-columns:clamp(250px,23vw,340px) minmax(0,1fr) clamp(290px,25vw,370px);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"head stage panel" "roster stage panel" "roster stage cta";gap:12px 20px;padding:var(--lobby-top) 22px 18px}
 #lobby .lobby-heading{grid-area:head}
 #lobby .lobby-heading p{display:block}
 #lobby .lobby-roster{grid-area:roster;min-height:0}
 #lobby .role-tabs{flex-wrap:wrap;overflow:visible;gap:6px 5px}
 #lobby .role-tab{padding:5px 10px;font-size:12.5px}
 #lobby .hero-choices{flex:1;min-height:0;overflow-y:auto;grid-template-columns:repeat(4,minmax(0,1fr));scrollbar-width:thin;scrollbar-color:#cfb27366 transparent}
 /* The stage is a column: the card fills everything from under the topbar down to the one-line nameplate above the
    skills, so it never covers the skill strip. The info below has a fixed height (one-line nameplate and lore, a
    two-line skill card), so every hero and every skill gets the same card. A wide stage puts the info beside the
    card instead (@container lobby-stage below). */
 #lobby .lobby-stage{--mandala-y:40%;--stage-x:clamp(10px,3%,40px);--stage-bottom:22px;container:lobby-stage/size;display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden;grid-area:stage;min-height:0;margin:calc(-1 * var(--lobby-top)) 0 -18px;padding:calc(var(--lobby-top) - 12px) var(--stage-x) var(--stage-bottom)}
 #lobby .stage-hero{position:static;display:flex;flex:1 1 0;min-height:0;height:auto;margin:0;padding:0}
 #lobby .stage-decor{-webkit-mask-image:none;mask-image:none}
 #lobby .stage-art{flex:1 1 auto;height:auto}
 #lobby .stage-info{display:block;position:relative;z-index:1;flex:0 0 auto;margin-top:8px}
 #lobby .stage-info::before{content:'';position:absolute;inset:-24px -60px -22px;z-index:-1;background:linear-gradient(180deg,#061a1f00,#061a1fa8 30%,#061a1fec);pointer-events:none}
 #lobby #hero-detail .hero-meta{flex:1 1 0;flex-wrap:nowrap;min-width:0;overflow:hidden;white-space:nowrap}
 #lobby #hero-detail .hero-meta>*{flex:0 0 auto}
 #lobby #hero-detail .hero-meta .hero-role-text{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
 #lobby #hero-detail .hero-lore{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 #lobby .skill-strip{min-height:84px}
 /* Room for a two-line description; a longer one scrolls inside, so picking skills never resizes the card above. */
 #lobby .skill-info{display:flex;flex-direction:column;height:86px}
 #lobby .skill-info header{flex:0 0 auto}
 #lobby .stage-skills .skill-info p{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cfb27366 transparent}
 #lobby #hero-detail{margin:0}
 #lobby .hero-title{font-size:clamp(34px,3.6vw,52px)}
 #lobby .lobby-panel{grid-area:panel;display:flex;min-height:0;overflow-y:auto;margin:-6px -6px 0;padding:6px 6px 8px;scrollbar-width:thin;scrollbar-color:#cfb27366 transparent}
 #lobby .lobby-cta{grid-area:cta;position:relative;grid-template-columns:minmax(0,1fr) auto;margin:0;padding:14px;border-radius:14px;border:1px solid #cfb27370;background:linear-gradient(165deg,#12383cf5,#0a2127f8);box-shadow:inset 0 1px 0 #f3dca026,0 12px 30px #0008}
 #lobby #opponent-portrait{width:40px;height:40px}
 #lobby #start{grid-column:1/-1;min-height:60px;font-size:23px}
}

/* Short desktop windows (a 1366x768 laptop minus browser chrome): the one-line lore gives its height to the hero card. */
@media (min-width:900px) and (min-height:600px) and (max-height:760px){#lobby #hero-detail .hero-lore{display:none}}

/* Phones in landscape and short desktop windows: compact three columns, no page scroll */
@media (orientation:landscape) and (max-height:599px) and (min-width:560px){
 #lobby{--lobby-top:68px;overflow:hidden}
 #game:has(#lobby:not([hidden])) .topbar{background:linear-gradient(#061c25ed,#08222ac2,transparent)}
 #lobby .lobby-shell{display:grid;max-width:none;height:100%;min-height:0;margin:0;grid-template-columns:clamp(172px,27vw,260px) minmax(0,1fr) clamp(214px,32vw,300px);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"roster stage panel" "roster stage cta";gap:8px 12px;padding:var(--lobby-top) max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left))}
 #lobby .lobby-heading{display:none}
 #lobby .lobby-roster{grid-area:roster;min-height:0}
 #lobby .role-tabs{gap:4px;padding:3px 3px 4px}
 #lobby .role-tab{padding:4px 9px;font-size:12px}
 #lobby .role-tab small{display:none}
 #lobby .hero-choices{flex:1;min-height:0;overflow-y:auto;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:9px 6px}
 #lobby .hero-choice strong{font-size:11px}
 #lobby .lobby-stage{--mandala-y:40%;--stage-x:4px;--stage-bottom:8px;container:lobby-stage/size;display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden;grid-area:stage;min-height:0;margin:calc(-1 * var(--lobby-top)) 0 -8px;padding:calc(var(--lobby-top) - 8px) var(--stage-x) var(--stage-bottom)}
 #lobby .stage-hero{position:static;display:flex;flex:1 1 0;min-height:0;height:auto;margin:0;padding:0}
 #lobby .stage-decor{-webkit-mask-image:none;mask-image:none}
 #lobby .stage-art{flex:1 1 auto;height:auto}
 #lobby .stage-info{display:block;position:relative;z-index:1;flex:0 0 auto;margin-top:2px}
 #lobby .stage-info::before{content:'';position:absolute;inset:-14px -12px -8px;z-index:-1;background:linear-gradient(180deg,#061a1f00,#061a1fc8 30%,#061a1ff2);pointer-events:none}
 #lobby #hero-detail{margin:0}
 #lobby .role-chips,#lobby #hero-detail .hero-lore,#lobby .hero-role-text{display:none}
 /* The card's pips show the difficulty here, so its text line gives its height to the card (still read by screen readers). */
 #lobby #hero-detail .hero-meta{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 #lobby .card-pips{display:flex}
 #lobby .hero-title{margin:0;font-size:23px}
 #lobby #hero-detail .hero-meta{font-size:11.5px}
 /* Heroes with six chips shrink them on narrow stages; the fixed strip height keeps the card the same for five-chip heroes. */
 #lobby .skill-strip{min-height:63px;column-gap:min(6px,2%);margin-top:0;padding:11px 4px 10px}
 #lobby .skill-chip{flex-basis:36px}
 #lobby .skill-chip.chip-ultimate{flex-basis:42px}
 #lobby .skill-chip.chip-passive,#lobby .skill-chip.chip-combo{flex-basis:32px}
 #lobby .skill-chip kbd{font-size:9.5px;line-height:13px;bottom:-7px}
 /* A fixed skill card (one header line, two description lines, the rest scrolls) keeps the card still between skills. */
 #lobby .skill-info{display:flex;flex-direction:column;height:66px;min-height:0;margin-top:4px;padding:6px 9px}
 #lobby .skill-info header{flex:0 0 auto;flex-wrap:nowrap;min-width:0;white-space:nowrap}
 #lobby .skill-info header strong{flex:0 1 auto;min-width:2em;overflow:hidden;text-overflow:ellipsis}
 #lobby .skill-info header small{flex:0 4 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
 #lobby .skill-info strong{font-size:13px}
 #lobby .stage-skills .skill-info p{flex:1 1 0;min-height:0;margin-top:2px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;font-size:12px;line-height:1.35}
 #lobby .lobby-panel{grid-area:panel;display:flex;min-height:0;overflow-y:auto;gap:12px;margin:-4px -4px 0;padding:6px 4px 6px}
 #lobby .lobby-block{padding:10px}
 #lobby .lobby-block h2{font-size:15px;margin-bottom:8px}
 #lobby .build-options>label:first-child{flex:1 1 100%;min-width:0;white-space:nowrap}
 #lobby .build-options select{flex:1 1 auto;width:0;min-width:0}
 #lobby .lobby-panel>*{min-width:0}
 #lobby #build-preview{gap:6px}
 #lobby #build-preview img{width:32px;height:32px}
 #lobby #build-preview b{font-size:10.5px}
 #lobby .lobby-cta{grid-area:cta;position:relative;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;margin:0;padding:8px;border-top:1px solid #cfb27370;border-radius:12px;border:1px solid #cfb27370;background:linear-gradient(165deg,#12383cf5,#0a2127f8);box-shadow:none}
 #lobby #opponent-portrait{width:30px;height:30px}
 #lobby .opponent{font-size:10.5px}
 #lobby .opponent strong{font-size:12.5px}
 #lobby .cta-difficulty{flex-direction:column;align-items:stretch;gap:1px;font-size:10.5px;line-height:1.3;color:#9fb8b4}
 #lobby #start{grid-column:1/-1;min-height:44px;padding:6px 12px;font-size:clamp(15px,2.3vw,18px)}
 #lobby #start::before{display:none}
}
/* Short desktop windows (mouse): every role tab visible without a hidden horizontal scroll. Phones keep one swipeable row. */
@media (orientation:landscape) and (max-height:599px) and (min-width:560px) and (hover:hover) and (pointer:fine){
 #lobby .role-tabs{flex-wrap:wrap;overflow:visible}
 #lobby .role-tab{padding:3px 8px;font-size:11.5px}
}
/* The topbar is shorter only while the lobby is open on very short landscape screens. */
@media (orientation:landscape) and (max-height:500px) and (min-width:560px){
 #game:has(#lobby:not([hidden])) .topbar{height:52px;padding-top:4px;padding-bottom:4px}
 #game:has(#lobby:not([hidden])) .brand .crest{width:34px;height:38px;font-size:21px}
 #game:has(#lobby:not([hidden])) #lobby{--lobby-top:54px}
}
/* Wide stage (most desktop windows): the hero card takes the stage's full height and the nameplate, skills and skill card
   stand in a column beside it, so the card never shares height with them and nothing in that column can resize it.
   Narrow stages (tablets, landscape phones) keep the stacked column above. Browsers without container queries stack too. */
@container lobby-stage (min-aspect-ratio:3/4) and (min-width:480px){
 /* The column scrolls if a short window cannot fit it; its side padding keeps framed boxes (theme.css draws their
    border-image a few px outside) and the pressed chip ring inside that scroll box. */
 #lobby .stage-hero,#lobby .stage-info{--side-w:clamp(176px,30cqw,300px)}
 #lobby .stage-hero{margin-right:calc(var(--side-w) + 16px)}
 #lobby .stage-info{position:absolute;top:var(--lobby-top);right:var(--stage-x);bottom:var(--stage-bottom);display:flex;flex-direction:column;width:var(--side-w);margin:0;padding:0 4px 4px;overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:none}
 #lobby .stage-art{align-items:center}
 #lobby .stage-info>#hero-detail{margin-top:auto}
 #lobby .stage-info::before{inset:0;background:linear-gradient(180deg,#061a1f00 20%,#061a1f8c 50%,#061a1fcc)}
 #lobby #hero-detail .hero-meta{flex:1 1 100%;flex-wrap:wrap;overflow:visible;white-space:normal}
 #lobby #hero-detail .hero-lore{margin-top:2px;white-space:normal}
 /* Chips in two even rows of three (passive Q E / R T combo, or Q E R / T combo). */
 #lobby .skill-strip{display:grid;grid-template-columns:repeat(3,max-content);align-items:end;gap:16px 8px;padding-left:7px;padding-right:7px}
 #lobby .skill-chip{width:46px}
 #lobby .skill-chip.chip-ultimate{width:52px}
 #lobby .skill-chip.chip-passive,#lobby .skill-chip.chip-combo{width:40px}
 #lobby .skill-info{height:auto;min-height:68px}
 #lobby .stage-skills .skill-info p{flex:0 0 auto;overflow:visible}
}
@media (max-width:650px){#lobby{--lobby-top:74px}}
#game:has(#lobby:not([hidden])) .match-score{visibility:hidden}

/* VS loading screen */
.versus{position:absolute;inset:0;z-index:40;display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;align-items:center;gap:10px;padding:max(16px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));overflow:hidden;outline:none;color:#f1efdf;background:#051519;opacity:1;transition:opacity var(--vs-fade,.35s) ease;animation:vs-enter .2s ease-out both}
.versus[hidden]{display:none}
.versus.is-passive{pointer-events:none;background:#051519e8;animation:none}
.versus.is-leaving{opacity:0;pointer-events:none}
.versus>*{position:relative}
.versus .vs-bg{position:absolute;inset:0;overflow:hidden}
.vs-half{position:absolute;inset:0}
.vs-half.ally{background:radial-gradient(ellipse 60% 75% at 22% 52%,#1f7064 0%,#0d3c38 45%,transparent 78%),linear-gradient(105deg,#0d3432,#07201f);clip-path:polygon(0 0,57% 0,43% 100%,0 100%);animation:vs-slide-l .45s cubic-bezier(.2,.8,.2,1) both}
.vs-half.enemy{background:radial-gradient(ellipse 60% 75% at 78% 52%,#6b2b2c 0%,#3b1a1f 45%,transparent 78%),linear-gradient(255deg,#331519,#190e11);clip-path:polygon(57% 0,100% 0,100% 100%,43% 100%);animation:vs-slide-r .45s cubic-bezier(.2,.8,.2,1) both}
.vs-seam{position:absolute;inset:0;background:linear-gradient(180deg,#f6dc9700,#fff3cf 30%,#f6dc97 70%,#f6dc9700);clip-path:polygon(56.75% 0,57.25% 0,43.25% 100%,42.75% 100%)}
.vs-rays{position:absolute;left:50%;top:50%;width:100vmax;aspect-ratio:1;translate:-50% -50%;background:repeating-conic-gradient(#f3d38e17 0deg 3deg,transparent 5deg 14deg);-webkit-mask-image:radial-gradient(closest-side,#000 8%,#0000 95%);mask-image:radial-gradient(closest-side,#000 8%,#0000 95%);animation:lobby-spin 60s linear infinite}
.vs-flash{position:absolute;inset:0;opacity:0;background:radial-gradient(circle at 50% 50%,#fff6d8 0,#fff6d800 42%);animation:vs-flash .7s .3s ease-out both}
.versus.is-passive .vs-flash{animation-delay:0s;animation-duration:.45s}
.vs-head{text-align:center}
.vs-head .eyebrow{display:block;font-size:12px;letter-spacing:3px;color:#cbb37a}
.vs-head strong{display:block;font:clamp(20px,3.4vw,32px)/1.35 Chonburi,serif;color:#f3d38e;background:linear-gradient(180deg,#fff4d0,#e3bf72 60%,#b98a3e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 8px #000c)}
.vs-duel{container-type:size;align-self:stretch;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(8px,3vw,48px);width:min(1100px,100%);min-height:0}
.vs-card{--vs-cap:calc(52px + 1.3 * clamp(17px,2.6vw,26px));position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;max-height:100%;margin:0}
.vs-card.ally{justify-self:end;animation:vs-card-l .55s .05s cubic-bezier(.2,.8,.2,1) both}
.vs-card.enemy{justify-self:start;animation:vs-card-r .55s .05s cubic-bezier(.2,.8,.2,1) both}
.vs-art{position:relative;flex:0 1 auto;min-height:0;height:clamp(150px,50vh,440px);height:max(80px,min(440px,56vh,calc(100cqh - var(--vs-cap))));aspect-ratio:3/4;max-width:100%;overflow:hidden;border-radius:16px;border:2px solid #e7c67f;background:radial-gradient(ellipse 80% 70% at 50% 45%,var(--school-glow,#dfbc7466),#0a2126 72%);box-shadow:0 0 0 4px #051519,0 0 0 5px #e7c67f55,0 20px 50px #000b}
.vs-card.ally .vs-art{box-shadow:0 0 0 4px #051519,0 0 0 5px #63d9c188,0 0 44px #63d9c140,0 20px 50px #000b}
.vs-card.enemy .vs-art{box-shadow:0 0 0 4px #051519,0 0 0 5px #ed827e88,0 0 44px #ed827e40,0 20px 50px #000b}
.vs-art::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,#051519e0);pointer-events:none}
.vs-art img{position:absolute;left:4%;top:6%;width:92%;height:94%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 8px 16px #000b)}
.vs-card.enemy .vs-art img{transform:scaleX(-1)}
.vs-unknown{position:absolute;inset:0;display:grid;place-items:center;font:64px Chonburi,serif;color:#e7c67f66}
.vs-card figcaption{display:flex;flex-direction:column;gap:1px;text-align:center}
.vs-card small{font-size:12px;line-height:18px;letter-spacing:2px;color:#9fe6d2}
.vs-card.enemy small{color:#f5a99f}
.vs-card strong{font:clamp(17px,2.6vw,26px)/1.3 Chonburi,serif;color:#f6e7bd;white-space:nowrap}
.vs-card figcaption span{font-size:12px;line-height:18px;color:#a9c1bb}
.vs-emblem{position:relative;justify-self:center;display:grid;place-items:center;width:clamp(80px,11vw,136px);aspect-ratio:1;animation:vs-pop .5s .22s cubic-bezier(.2,1.4,.4,1) both}
.vs-emblem svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 16px #f0c77b88)}
.vs-emblem b{position:relative;margin-top:-8%;font:clamp(28px,4.4vw,50px)/1 Chonburi,serif;color:#f3d38e;background:linear-gradient(180deg,#fffbe8,#f3d38e 55%,#c8963f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vs-emblem small{position:absolute;top:calc(100% + 2px);font-size:clamp(10px,1.3vw,13px);letter-spacing:2px;color:#e9c77f}
.vs-foot{width:min(560px,100%);text-align:center}
.vs-bar{height:6px;overflow:hidden;border-radius:4px;border:1px solid #cfb27355;background:#06181d}
.vs-bar i{display:block;height:100%;transform-origin:0 50%;background:linear-gradient(90deg,#b98a3e,#fbe7b0 70%,#fff8e0);animation:vs-fill var(--vs-hold,1.6s) linear both}
.vs-status{margin:8px 0 2px;font-size:13px;color:#e3c98e}
.vs-tip{margin:0;font-size:12.5px;line-height:1.5;color:#a9c1bb}
.vs-tip b{margin-right:4px;font-weight:600;color:#f3d38e}
.versus.is-passive .vs-half,.versus.is-passive .vs-card{animation:none}
.versus.is-passive .vs-emblem{animation-duration:.32s;animation-delay:0s}
.versus.is-passive .vs-bar i{animation:none}
@media (max-aspect-ratio:3/4){
 .vs-duel{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);width:min(440px,100%);height:100%;gap:4px}
 .vs-card{flex-direction:row;gap:14px;justify-self:stretch;min-height:0;height:100%}
 .vs-card.ally,.vs-card.enemy{justify-self:stretch}
 .vs-card.enemy{flex-direction:row-reverse}
 .vs-card.enemy figcaption{text-align:right}
 .vs-card figcaption{text-align:left}
 .vs-art{height:100%;max-height:300px;width:auto;flex:0 0 auto}
 .vs-emblem{width:78px}
}
@media (max-height:420px){.versus{gap:4px}.vs-head strong{font-size:18px}.vs-status{margin-top:5px;font-size:12px}.vs-tip{overflow:hidden;font-size:11px;white-space:nowrap;text-overflow:ellipsis}}

/* Pause and result cards share the new gold-edged jade panel */
#result .small-card,#pause-overlay .small-card{position:relative;border:1px solid #e7c67f;border-radius:16px;background:linear-gradient(165deg,#13393df5,#081d23f8);box-shadow:inset 0 1px 0 #f3dca033,0 0 0 4px #06161bcc,0 0 0 5px #dfbc7444,0 30px 80px #000a}
#result .small-card::before,#pause-overlay .small-card::before{content:'';position:absolute;top:-7px;left:50%;width:13px;height:13px;translate:-50% 0;rotate:45deg;background:#e7c67f;box-shadow:0 0 12px #f0c77b}
#result h2,#pause-overlay h2{color:#f3d38e;background:linear-gradient(180deg,#fffbe8,#f3d38e 55%,#c8963f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 10px #000a)}
#result .primary,#pause-overlay .primary{border-radius:10px;background:linear-gradient(180deg,#fff0c2,#eecb7d 40%,#c99a4b);box-shadow:inset 0 -3px 0 #9c7232,inset 0 2px 0 #fffa,0 8px 22px #e0b86733}
#result .secondary,#pause-overlay .secondary{border-radius:10px;border-color:#cfb27366;background:#0a2327}

@keyframes lobby-spin{to{rotate:360deg}}
@keyframes card-breathe{50%{translate:0 -1.1%}}
@keyframes card-glow{50%{opacity:.7}}
@keyframes card-swirl{from{transform:rotate(0) scale(.94)}50%{transform:rotate(180deg) scale(1.03)}to{transform:rotate(360deg) scale(.94)}}
@keyframes petal-fall{0%{transform:translate(0,-12%);opacity:0}8%{opacity:1}50%{transform:translate(calc(var(--dx) * -.6),44%)}92%{opacity:1}100%{transform:translate(var(--dx),100%);opacity:0}}
@keyframes petal-turn{from{transform:rotate(-30deg) scale(1,.8)}to{transform:rotate(160deg) scale(.8,1)}}
@keyframes mote-rise{0%{transform:translateY(100%);opacity:0}15%{opacity:.9}100%{transform:translateY(18%);opacity:0}}
@keyframes cta-shine{0%,55%{transform:skewX(-20deg) translateX(0)}100%{transform:skewX(-20deg) translateX(600%)}}
@keyframes vs-enter{from{opacity:0}}
@keyframes vs-slide-l{from{transform:translateX(-30%)}}
@keyframes vs-slide-r{from{transform:translateX(30%)}}
@keyframes vs-card-l{from{opacity:0;transform:translateX(-60px)}}
@keyframes vs-card-r{from{opacity:0;transform:translateX(60px)}}
@keyframes vs-pop{0%{opacity:0;transform:scale(2.1)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes vs-flash{0%{opacity:0}22%{opacity:.6}100%{opacity:0}}
@keyframes vs-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
 #lobby,#lobby *,#lobby *::before,#lobby *::after,.versus,.versus *,.versus *::before,.versus *::after{animation:none!important;transition:none!important}
 #lobby .stage-petals{display:none}
 .versus .vs-bar i{transform:none}
}
.versus.is-reduced,.versus.is-reduced *{animation:none!important}
.versus.is-reduced .vs-bar i{transform:none}