:root{--entry-ink:#3c281b;--entry-font:"DFKai-SB","標楷體","BiauKai","KaiTi","STKaiti",serif;--entry-wood:url('/assets/rustic-v1045/button.webp');--entry-plaque:url('/assets/rustic-v1045/title.webp')}
body.entry-page{background:linear-gradient(#14171055,#151712bb),url('/assets/map-v1142/landscape.webp') center/cover fixed;color:var(--entry-ink);font-family:var(--entry-font)}
.entry-page .wrap,#playerIdGate .pid-card,#factionEntryGate .faction-confirm-box{box-sizing:border-box;background:#ead8b7;border:12px solid transparent;border-image:url('/assets/rustic-v1045/production.webp') 14 18 14 18 stretch;border-radius:0;padding:24px;color:var(--entry-ink);box-shadow:0 16px 55px #0009}
.entry-page .logo{width:min(238px,75%);margin-bottom:16px}
.entry-page h1,#playerIdGate h2,#factionEntryGate h3{background:var(--entry-plaque) center/100% 100% no-repeat;color:#fff1cd;padding:10px 18px;margin:0 auto 12px;font-family:var(--entry-font);font-size:clamp(20px,4vw,26px);text-shadow:0 1px 2px #281309}
.entry-page :is(.sub,.note,.or,label,.status),#playerIdGate label{color:var(--entry-ink)}
.entry-page .status.error,#playerIdGate .pid-error{color:#92291b}
.entry-page input,#playerIdGate input{box-sizing:border-box;width:100%;padding:10px 12px;color:var(--entry-ink);background:#fff4da;border:1px solid #937150;border-radius:2px;box-shadow:inset 0 2px 5px #76553730;font:inherit;font-size:16px}
.entry-page button,#playerIdGate button,#factionEntryGate .faction-confirm-box button,#factionEntryGate .faction-hotspot{background:var(--entry-wood) center/100% 100% no-repeat;color:#fff1d2;border:0;border-radius:0;font-family:var(--entry-font);font-weight:700;text-shadow:0 1px 2px #281309;cursor:pointer}
.entry-page .entry-tabs{display:flex;gap:8px;margin:0 0 16px}.entry-page .entry-tabs button{min-height:42px}
.entry-page .entry-tabs button[aria-pressed=true],#factionEntryGate .faction-hotspot:focus-visible{background-image:url('/assets/rustic-v1045/button-selected.webp')}
#playerIdGate{
 position:fixed;inset:0;z-index:999998;display:grid;place-items:safe center;
 padding:clamp(8px,3vw,16px);overflow:auto;background:#000b;
}
#playerIdGate[hidden]{display:none!important}
#playerIdGate .pid-card{
 width:min(400px,100%);min-width:0;margin:0;padding:clamp(12px,4vw,22px);
 background-clip:padding-box;border-image-outset:0;
 font-family:var(--entry-font);text-align:center;color:var(--entry-ink);
}
#playerIdGate .pid-card p{line-height:1.55;overflow-wrap:anywhere}
#playerIdGate label{display:block;text-align:left;font-weight:700;color:#3c281b}
#playerIdGate #newPlayerGameId{
 margin:6px 0 0;background:#fff4da;color:#2b1b12;caret-color:#2b1b12;
}
#playerIdGate #newPlayerGameId::placeholder{color:#695140;opacity:1}
#playerIdGate #newPlayerGameId:focus-visible{outline:2px solid #805829;outline-offset:2px}
#playerIdGate .pid-error{min-height:20px;margin:6px 0}
#playerIdGate .pid-card button{
 width:min(100%,200px);min-height:40px;padding:8px 12px;margin:0 auto;
 background:var(--entry-wood) center/100% 100% no-repeat;color:#fff1d2;font-size:16px;
}
#playerIdGate .pid-card button:hover:enabled{background-image:url('/assets/rustic-v1045/button-hover.webp')}
#playerIdGate .pid-card button:disabled{opacity:.55;cursor:wait}
#factionEntryGate[hidden],#factionEntryGate .faction-confirm[hidden]{display:none!important}
#factionEntryGate{position:fixed;inset:0;display:grid;place-items:center;padding:14px;background:#181b16;overflow:auto;color:#f8e9ca;font-family:var(--entry-font)}
#factionEntryGate *{box-sizing:border-box}
.faction-board{width:min(1200px,100%);min-height:min(620px,90dvh);display:flex;flex-direction:column;justify-content:center;gap:clamp(8px,2vw,24px);padding:clamp(10px,3vw,36px);border:9px solid transparent;border-image:url('/assets/rustic-v1045/production.webp') 14 18 14 18 stretch;background:linear-gradient(#17180f44,#211b1370 50%,#231b15e8),url('/assets/map-v1142/landscape.webp') center/cover;box-shadow:0 12px 48px #0009;text-align:center}
.faction-board header{display:grid;justify-items:center;gap:7px}.faction-board .faction-logo{width:clamp(110px,18vw,220px);max-height:74px;object-fit:contain}.faction-board h1{margin:0;background:var(--entry-plaque) center/100% 100% no-repeat;padding:.25em 1em;font-size:clamp(24px,4vw,48px);text-shadow:0 2px 3px #24160d}.faction-board header p,.faction-status{margin:0;min-height:1.2em;text-shadow:0 1px 3px #111}
.faction-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(3px,2vw,24px);align-items:end}
.faction-option{--faction-light:#94b17a;--sprite-position:0%;display:grid;justify-items:center;gap:4px;min-width:0;padding:0 0 7px}.faction-option.wei{--faction-light:#88b5da;--sprite-position:50%}.faction-option.wu{--faction-light:#da896e;--sprite-position:100%}
.faction-mascot{display:block;width:min(100%,320px);aspect-ratio:1;background:url('/assets/onboarding/faction-mascots.webp') var(--sprite-position) center/300% 100% no-repeat;filter:drop-shadow(0 6px 8px #171710a0)}
.faction-option strong{font-size:clamp(20px,3vw,32px);color:var(--faction-light);text-shadow:0 2px 2px #171510}.faction-option small{font-size:clamp(11px,1.5vw,16px);text-shadow:0 1px 2px #171510}
#factionEntryGate .faction-hotspot{width:min(160px,98%);min-height:42px;padding:6px 4px;font-size:clamp(13px,2vw,20px)}#factionEntryGate button:disabled{opacity:.55}
#factionEntryGate .faction-confirm{
 position:fixed;inset:0;z-index:2;display:grid;place-items:safe center;
 padding:clamp(8px,3vw,16px);overflow:auto;background:#000b;
}
#factionEntryGate .faction-confirm-box{
 width:min(400px,100%);min-width:0;max-width:100%;margin:0;
 padding:clamp(10px,4vw,22px);text-align:center;
 background-clip:padding-box;border-image-outset:0;
}
#factionEntryGate .faction-confirm-box h3{
 width:100%;min-width:0;padding-inline:12px;overflow-wrap:anywhere;
}
#factionEntryGate .faction-confirm-box p{
 margin:0 0 16px;line-height:1.55;overflow-wrap:anywhere;
}
#factionEntryGate .faction-confirm-actions{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
 width:min(100%,240px);margin-inline:auto;
}
#factionEntryGate .faction-confirm-actions button{
 min-width:0;min-height:40px;padding:8px 4px;margin:0;font-size:clamp(13px,3vw,16px);overflow-wrap:anywhere;
}
@media(max-width:560px){#factionEntryGate{padding:4px}.faction-board{padding:10px 5px;min-height:0}.faction-board header p{font-size:13px}.faction-option{gap:2px}}
/* Keep the landscape inside the frame's inner edge. */
#factionEntryGate .faction-board{background-origin:padding-box;background-clip:padding-box;border-image-outset:0;overflow:hidden}
.faction-option{position:relative;isolation:isolate;--selection-glow:#85ff69}
.faction-option.wei{--selection-glow:#52b9ff}
.faction-option.wu{--selection-glow:#ff6255}
.faction-mascot-stage{position:relative;display:block;width:min(100%,320px)}
.faction-mascot-stage .faction-mascot{position:relative;z-index:1;width:100%}
/* Broken luminous arcs sit around the feet, with open space inside. */
.faction-mascot-stage::before{
 content:'';position:absolute;z-index:0;pointer-events:none;
 left:8%;right:8%;bottom:1%;height:23%;opacity:0;
 transform-origin:50% 75%;
 background:linear-gradient(104deg,var(--selection-glow),#fff 43%,var(--selection-glow) 68%,#fff 87%,var(--selection-glow));
 mask:url('/assets/onboarding/foot-arcs-v1164.svg') center bottom/100% 100% no-repeat;
 filter:drop-shadow(0 0 5px var(--selection-glow));
 transition:opacity .14s ease;
}
.faction-option:is(.is-selected,:has(.faction-hotspot:enabled:is(:hover,:focus-visible))) .faction-mascot-stage::before{
 opacity:.9;
}
#factionEntryGate .faction-hotspot{position:relative;z-index:1;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
#factionEntryGate .faction-hotspot:is(:hover,:focus-visible,[aria-pressed=true]){filter:brightness(1.16);box-shadow:0 0 12px #eed5a650}
#factionEntryGate .faction-hotspot:active{transform:translateY(2px) scale(.97)}
@keyframes faction-arcs-breathe{
 0%,100%{opacity:.48;transform:scale(.96,.98)}
 36%{opacity:1;transform:scale(1.02,1.02)}
 64%{opacity:.76;transform:scale(.99,1)}
}
@media(prefers-reduced-motion:no-preference){
 .faction-option:is(.is-selected,:has(.faction-hotspot:enabled:is(:hover,:focus-visible))) .faction-mascot-stage::before{
  animation:faction-arcs-breathe .9s ease-in-out infinite;
 }
}
@media(prefers-reduced-motion:reduce){#factionEntryGate .faction-hotspot,.faction-mascot-stage::before{transition:none}}
#factionEntryGate #factionBackToLogin{
 align-self:center;width:min(155px,90%);min-height:38px;padding:6px 12px;
 background:var(--entry-wood) center/100% 100% no-repeat;color:#fff1d2;border:0;
}
#factionEntryGate #factionBackToLogin:is(:hover,:focus-visible){filter:brightness(1.15)}
/* A soft wash rises from the ground behind the mascot and the foot arc. */
.faction-mascot-stage::after{
 content:'';position:absolute;z-index:-1;pointer-events:none;
 left:-14%;right:-14%;bottom:6%;height:53%;opacity:0;
 background:radial-gradient(ellipse 49% 95% at 50% 93%,
  color-mix(in srgb,var(--selection-glow) 55%,transparent) 0%,
  color-mix(in srgb,var(--selection-glow) 34%,transparent) 34%,
  color-mix(in srgb,var(--selection-glow) 13%,transparent) 65%,
  transparent 100%);
 transform-origin:center 93%;
 transition:opacity .18s ease;
}
.faction-option:is(.is-selected,:has(.faction-hotspot:enabled:is(:hover,:focus-visible))) .faction-mascot-stage::after{opacity:.78}
@keyframes faction-soft-uplight{
 0%,100%{opacity:.68;transform:scaleY(.9)}
 50%{opacity:.97;transform:scaleY(1)}
}
@media(prefers-reduced-motion:no-preference){
 .faction-option:is(.is-selected,:has(.faction-hotspot:enabled:is(:hover,:focus-visible))) .faction-mascot-stage::after{
  animation:faction-soft-uplight .9s ease-in-out infinite;
 }
}
@media(prefers-reduced-motion:reduce){.faction-mascot-stage::after{transition:none}}