/* Approved PC/mobile v54. Portraits are separate, text-free original assets. */
@font-face{font-family:PGHLegionKO;src:url('/assets/legion-v54/teaser-ko-bold.woff') format('woff');font-weight:700 900;font-display:swap}
@font-face{font-family:PGHLegionCJK;src:url('/assets/legion-v54/teaser-cjk-base.woff') format('woff');font-weight:700 900;font-display:swap}
#game-hub .pgh-content .pgh-legion{--pgh-font:PGHCJK,PGHIntl,PGHArabic,PGHThai,PGHSymbols,PGHExtra,PGHBodyExtra,PGHLegionKO,PGHLegionCJK,LegionTeaserComplete,var(--sparta-display);position:relative;isolation:isolate;margin:0 0 16px;padding:4px 12px 6px;border:2px solid #a98d47;border-radius:17px;background:#fffaf0 url('/assets/legion-v54/courtyard-1600.webp') center/cover;box-shadow:inset 0 0 0 3px #fffdf5;scroll-margin-top:110px;min-width:0;color:#112347;font-family:var(--pgh-font)}
#game-hub .pgh-legion::before{content:'';position:absolute;inset:0;z-index:-1;background:#fffdf52b;border-radius:inherit;pointer-events:none}
#game-hub .pgh-content .pgh-legion>.pgh-panel-title{margin-inline:-8px;background:linear-gradient(90deg,#22334a4d,#152541 28%,#152541 72%,#22334a4d)}
#game-hub .pgh-legion-intro{text-align:center;padding:8px 8px 5px;background:radial-gradient(ellipse,#fffdf2ed 30%,#fffdf280 65%,transparent 85%)}
#game-hub .pgh-legion-intro h3{font:900 clamp(24px,2.75cqw,40px)/1.2 var(--pgh-font);letter-spacing:-.035em;color:#0e2145;-webkit-text-stroke:.025em currentColor;paint-order:stroke fill;text-wrap:balance}
#game-hub .pgh-legion-intro h3>span{display:inline}
#game-hub .pgh-legion-intro p{margin:4px auto 0;max-width:950px;font:900 clamp(13px,1.35cqw,19px)/1.45 var(--pgh-font);text-wrap:balance}
#game-hub .pgh-legion-counts{display:flex;justify-content:center;align-items:stretch;gap:12px;max-width:590px;margin:4px auto 8px}
#game-hub .pgh-legion-counts>div{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;padding:5px 12px;min-height:38px;border:1px solid #b2d695;border-radius:12px;background:#e0f5d2ed;color:#174d30;text-align:center;font:900 clamp(13px,1.25cqw,18px)/1.35 var(--pgh-font)}
#game-hub .pgh-legion-counts>div[data-faction=enemy]{border-color:#e9b397;background:#ffe0d5ed;color:#6c1017}
#game-hub .pgh-legion-counts>div[data-faction=support]{border-color:#a8c8ee;background:#d8edffed;color:#122b55}
#game-hub .pgh-legion-counts strong{font-size:1.32em;white-space:nowrap}
#game-hub .pgh-legion-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;direction:ltr;align-items:stretch}
#game-hub .pgh-legion-card{display:flex;flex-direction:column;min-width:0;padding:5px 5px 0;border:1.5px solid #ad914a;border-radius:12px;background:#fffdf3;box-shadow:inset 0 0 0 2px #fff9df;color:#12294f;overflow:hidden;transition:box-shadow .15s}
#game-hub .pgh-legion-art{display:grid;place-items:center;position:relative;isolation:isolate;aspect-ratio:1.12;min-width:0;width:100%;border:1px solid #ddc68b;border-radius:8px 8px 3px 3px;background:linear-gradient(#fffaf03b,#fffaf01c),url('/assets/legion-v54/courtyard-640.webp') center bottom/cover;overflow:hidden}
#game-hub .pgh-legion-art::after{content:'';position:absolute;z-index:-1;bottom:6%;left:28%;width:44%;height:6%;border-radius:50%;background:#68502b30;filter:blur(4px)}
#game-hub .pgh-legion-art img{position:absolute;left:7%;top:5%;display:block;width:86%;height:90%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 2px 2px #52422123);transform:none}
#game-hub .pgh-legion-name{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 9px;min-height:42px;min-width:0;flex:1;direction:inherit;text-align:center}
#game-hub .pgh-legion-name>strong{flex:1;min-width:0;font:900 clamp(12px,1.32cqw,19px)/1.35 var(--pgh-font);overflow-wrap:anywhere;text-wrap:balance}
#game-hub .pgh-legion-tag{flex:none;max-width:35%;padding:4px 12px;border-radius:10px;background:#4e9131;color:white;font:900 clamp(11px,1.15cqw,16px)/1.25 var(--pgh-font);overflow-wrap:anywhere}
#game-hub .pgh-legion-tag[data-faction=enemy]{background:#a61621}
#game-hub .pgh-legion-chevron{flex:none;font:400 30px/1 Arial,sans-serif;color:#8d651f}
#game-hub .pgh-legion-name .pgh-legion-chevron{display:none}
#game-hub .pgh-legion-button{display:flex;align-items:center;justify-content:center;gap:24px;width:max-content;max-width:100%;min-width:min(400px,100%);min-height:48px;margin:7px auto 0;padding:6px 22px;border:2px solid #a4822c;border-radius:13px;background:linear-gradient(110deg,#233650,#101d38);box-shadow:inset 0 0 0 2px #e2c571;color:#fffbe8;text-align:center;font:900 clamp(17px,1.7cqw,24px)/1.35 var(--pgh-font)}
#game-hub .pgh-legion-button strong{min-width:0;overflow-wrap:anywhere;font-size:inherit}
#game-hub .pgh-legion-button .pgh-legion-chevron{color:#efd15d;font-size:36px}
#game-hub .pgh-legion-caption{padding:2px 4px 0;text-align:center;font:900 13px/1.4 var(--pgh-font)}
#game-hub[dir=rtl] .pgh-legion-name{direction:rtl}
#game-hub[dir=rtl] .pgh-legion-chevron{transform:scaleX(-1)}
#game-hub:lang(ar) .pgh-legion-intro h3{letter-spacing:normal;line-height:1.5;-webkit-text-stroke:0}
@media(max-width:1080px) and (min-width:761px){#game-hub .pgh-legion-name{flex-direction:column;gap:4px;padding:5px}#game-hub .pgh-legion-tag{max-width:100%}}
@media(max-width:760px){
 #game-hub .pgh-content .pgh-legion{margin:0 0 12px;padding:3px 5px 5px;border-radius:13px;background-image:url('/assets/legion-v54/courtyard-640.webp');background-size:auto 100%}
 #game-hub .pgh-content .pgh-legion>.pgh-panel-title{margin-inline:-2px;background:linear-gradient(110deg,#293650,#101b37)}
 #game-hub .pgh-legion-intro{padding:8px 5px 5px}
 #game-hub .pgh-legion-intro h3{font-size:clamp(24px,6.1cqw,38px);line-height:1.22;letter-spacing:-.035em}
 #game-hub .pgh-legion-intro h3>span{display:block}
 #game-hub .pgh-legion-intro p{font-size:clamp(12px,3.1cqw,18px);line-height:1.45;margin-top:5px}
 #game-hub .pgh-legion-counts{gap:6px;margin:3px 3px 7px}
 #game-hub .pgh-legion-counts>div{padding:4px 5px;gap:4px;min-height:33px;border-radius:9px;font-size:clamp(11px,2.9cqw,16px);flex-wrap:wrap}
 #game-hub .pgh-legion-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 #game-hub .pgh-legion-card{padding:3px 3px 0;border-radius:10px}
 #game-hub .pgh-legion-art{aspect-ratio:.96;border-radius:7px 7px 2px 2px}
 #game-hub .pgh-legion-name{gap:5px;padding:6px 3px;min-height:38px;flex-wrap:wrap}
 #game-hub .pgh-legion-name>strong{font-size:clamp(12px,3.1cqw,18px);line-height:1.35;flex-basis:60%}
 #game-hub .pgh-legion-tag{font-size:clamp(10px,2.5cqw,14px);padding:3px 7px;max-width:34%;border-radius:7px}
 #game-hub .pgh-legion-button{width:100%;min-width:0;min-height:45px;margin-top:8px;padding:7px 13px;gap:15px;font-size:clamp(15px,4.1cqw,24px);border-radius:11px}
 #game-hub .pgh-legion-button .pgh-laurel{display:none}
 #game-hub .pgh-legion-caption{font-size:clamp(11px,2.7cqw,14px);padding-top:4px}
}
@media(prefers-reduced-motion:reduce){#game-hub .pgh-legion-card{transition:none}}

#game-hub .pgh-legion-button:disabled{opacity:1;cursor:default;color:#fffbe8;-webkit-text-fill-color:#fffbe8}