/* Warfront 4.09 preview · Royal Fantasy player account, scoped to this overlay */
#wf409-account[hidden]{display:none!important}
#wf409-account{position:fixed;inset:0;z-index:2147483620;display:grid;place-items:center;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  box-sizing:border-box;background:#05050ccf;backdrop-filter:blur(7px);color:#f6e8cc;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
#wf409-account *{box-sizing:border-box}
#wf409-account .wf409-dialog{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);width:min(960px,100%);max-height:100%;min-height:0;
  border:2px solid #c9a46a;border-radius:15px;overflow:hidden;box-shadow:0 22px 72px #000e,inset 0 0 0 2px #4a2c54;
  background:linear-gradient(135deg,#30183df5,#140f27fa 48%,#0d1225fc)}
#wf409-account .wf409-dialog:before{content:"";position:absolute;inset:0;pointer-events:none;background:url('/royal-v356-hero.webp') center/cover;opacity:.09}
#wf409-account .wf409-header,#wf409-account .wf409-main{position:relative}
#wf409-account .wf409-header{padding:16px 64px 13px 23px;border-bottom:1px solid #ae8659;
  background:linear-gradient(90deg,#4d215ed9,#251636e8);display:flex;align-items:center;justify-content:space-between;gap:20px}
#wf409-account .wf409-eyebrow{text-transform:uppercase;font:700 10px system-ui;letter-spacing:3px;color:#f0c783}
#wf409-account h2{margin:2px 0 0;color:#f4d99b;font:700 clamp(21px,3.7vw,29px) Georgia,serif}
#wf409-account .wf409-header small{color:#d9c7e6}
#wf409-account .wf409-close{position:absolute;right:15px;top:13px;width:39px;height:39px;font:700 24px system-ui;padding:0;border-radius:7px}
#wf409-account .wf409-main{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:0;overflow-y:auto}
#wf409-account .wf409-side{padding:16px;border-right:1px solid #835f66;background:#100c1c88}
#wf409-account .wf409-emblem{height:54px;width:54px;display:grid;place-items:center;border:2px solid #dfbc7f;
  border-radius:50%;background:linear-gradient(#613879,#261b3e);font-size:28px;box-shadow:0 3px 12px #0008;margin:0 auto 8px}
#wf409-account .wf409-player{text-align:center;font:700 17px Georgia,serif;color:#fff1c4;overflow-wrap:anywhere}
#wf409-account .wf409-sub{text-align:center;font:12px system-ui;color:#cbbad9;margin-top:4px}
#wf409-account .wf409-nav{border-top:1px solid #665068;margin-top:15px;padding-top:13px;display:grid;gap:7px}
#wf409-account button{cursor:pointer;color:#f8e5c8;border:1px solid #9d7b76;border-radius:7px;padding:10px 12px;
  background:linear-gradient(#57306a,#341d4e);font:700 13px Georgia,serif}
#wf409-account button:hover,#wf409-account button:focus-visible{border-color:#f0d094;background:linear-gradient(#7c43a2,#4d286b)}
#wf409-account button:focus-visible{outline:2px solid #ffdea1;outline-offset:2px}
#wf409-account .wf409-nav button{text-align:left;width:100%;min-height:40px}
#wf409-account .wf409-nav button[aria-selected="true"]{background:linear-gradient(#8648ae,#4f226f);border-color:#f0c78a}
#wf409-account .wf409-pane-group{display:block!important;visibility:visible!important;opacity:1!important;
  position:relative;min-width:0;min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;background:#120e23b0}
#wf409-account .wf409-pane{display:block!important;visibility:visible!important;opacity:1!important;
  position:relative;padding:19px 22px;min-width:0;min-height:0;overflow:visible}
#wf409-account .wf409-pane[hidden]{display:none!important}
#wf409-account h3{font:700 20px Georgia,serif;color:#f5d99d;margin:0 0 10px}
#wf409-account p{font:13px/1.55 system-ui;color:#d9cbe0;margin:8px 0 15px}
#wf409-account .wf409-card{padding:12px 14px;border:1px solid #806382;border-radius:9px;background:#0d1025bb;margin:0 0 12px}
#wf409-account .wf409-statline{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:6px 0;border-bottom:1px solid #66527266;font-size:13px}
#wf409-account .wf409-statline:last-child{border:0}
#wf409-account .wf409-statline b{font:700 14px Georgia,serif;color:#f6d9a3;overflow-wrap:anywhere;text-align:right}
#wf409-account .wf409-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#wf409-account .wf409-faction{padding:11px 13px;border:1px solid #7f6379;background:linear-gradient(#291b3d,#141528);border-radius:8px;min-width:0}
#wf409-account .wf409-faction h4{font:700 14px Georgia,serif;color:#f6dbaa;margin:0 0 8px}
#wf409-account .wf409-faction span{font:12px system-ui;color:#d2c1d7}
#wf409-account .wf409-meter{height:6px;margin:9px 0;background:#12131c;border-radius:20px;overflow:hidden;border:1px solid #5e4965}
#wf409-account .wf409-fill{height:100%;display:block;background:linear-gradient(90deg,#b17bd1,#f4cb83)}
#wf409-account .wf409-actions{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0}
#wf409-account .wf409-hint{font:12px/1.5 system-ui;color:#ccb9d7}
#wf409-account .wf409-message{min-height:22px;color:#f4d5a0;font-size:12px;margin:9px 0}
#wf409-account .wf409-loading{color:#dfcbdf}
@media(max-width:700px),(max-height:430px){
 #wf409-account{padding:6px}
 #wf409-account .wf409-header{padding:8px 49px 7px 13px}
 #wf409-account .wf409-close{top:5px;right:7px;width:34px;height:34px}
 #wf409-account .wf409-main{grid-template-columns:148px minmax(0,1fr)}
 #wf409-account .wf409-side{padding:9px}
 #wf409-account .wf409-emblem{height:34px;width:34px;font-size:20px;margin-bottom:3px}
 #wf409-account .wf409-player{font-size:13px}
 #wf409-account .wf409-nav{margin-top:7px;padding-top:8px;gap:5px}
 #wf409-account .wf409-nav button{padding:7px;font-size:12px;min-height:33px}
 #wf409-account .wf409-pane{padding:10px 13px}
 #wf409-account .wf409-faction{padding:7px 9px}
 #wf409-account .wf409-faction h4{font-size:12px;margin-bottom:4px}
 #wf409-account .wf409-grid{gap:7px}
 #wf409-account h3{font-size:17px}
}
@media(max-width:490px) and (orientation:portrait){
 #wf409-account .wf409-main{display:block}
 #wf409-account .wf409-side{display:flex;align-items:center;gap:8px;border-right:0;border-bottom:1px solid #835f66}
 #wf409-account .wf409-emblem{display:none}
 #wf409-account .wf409-player,#wf409-account .wf409-sub{display:none}
 #wf409-account .wf409-nav{display:flex;flex:1;overflow-x:auto;margin:0;padding:0;border:0}
 #wf409-account .wf409-nav button{min-width:max-content}
 #wf409-account .wf409-grid{grid-template-columns:1fr}
}