/*
 * Shattered Utopia restoration launcher.
 * STRUCTURE: brand hero -> three-column command deck -> live dispatch -> quick nav.
 * To add a town preview, duplicate .su-town in ModernLanding.php. Percent and meter
 * width must match. Authentication styling is isolated under .su-login.
 */
:root{--gold:#d7aa52;--gold-hi:#f3d187;--gold-dim:#86652f;--ink:#090b0b;--panel:rgba(7,10,10,.91);--panel2:rgba(18,20,18,.94);--green:#91c85a;--red:#b85943;--paper:#c8ad75;--serif:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#050706;color:#eee7d7;font-family:var(--serif)}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit}
[hidden]{display:none!important}
.su-landing{position:relative;min-height:100vh;padding:16px 2vw 86px;background:#080a09 url("brightstone-restoration-login-background-v10.png") center top/cover fixed no-repeat;isolation:isolate;overflow:hidden}
.su-landing__veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,4,4,.34),rgba(3,4,4,.08) 27%,rgba(3,4,4,.35) 66%,rgba(3,4,4,.92)),radial-gradient(ellipse at center,transparent 15%,rgba(0,0,0,.56) 100%)}
.su-landing:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0,transparent 19.8%,rgba(215,170,82,.025) 20%)}

/* Brand hero */
.su-brand-hero{position:relative;width:min(820px,58vw);min-height:225px;margin:0 auto 4px;text-align:center;filter:drop-shadow(0 12px 18px #000)}
.su-brand-hero__mark{display:block;margin:auto;width:min(620px,46vw)}
.su-brand-hero__mark img{display:block;width:100%;max-height:154px;object-fit:contain}
.su-brand-hero__tools{position:absolute;left:50%;top:14px;z-index:-1;transform:translateX(-50%);font-size:116px;color:#2b2b29;text-shadow:0 0 2px var(--gold),0 8px 14px #000;opacity:.72}
.su-brand-hero__tagline{margin:-3px 0 5px;color:var(--gold-hi);font-size:clamp(16px,1.35vw,23px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 2px 5px #000}
.su-brand-hero__tagline:before,.su-brand-hero__tagline:after{content:"◆";margin:0 15px;color:var(--gold-dim);font-size:.65em}
.su-brand-hero__copy{margin:0;color:#d7d0c2;font-size:clamp(13px,1vw,17px);letter-spacing:.025em}.su-partner-build{position:absolute;right:-14vw;top:4px;padding:5px 10px;border:1px solid #6e562b;background:#090b0be8;color:#bda36e;font-size:10px;letter-spacing:.16em;text-transform:uppercase}

/* Shared forged panels */
.su-command-deck{width:min(1600px,96vw);margin:0 auto;display:grid;grid-template-columns:minmax(310px,1.05fr) minmax(310px,.85fr) minmax(330px,1fr);gap:18px;align-items:start}
.su-panel,.su-governance{position:relative;border:1px solid #8f6a31;border-radius:4px;background:linear-gradient(145deg,var(--panel2),var(--panel));box-shadow:0 18px 42px #000b,inset 0 0 34px #0008}
.su-panel:before,.su-governance:before{content:"";position:absolute;inset:5px;pointer-events:none;border:1px solid rgba(215,170,82,.18)}
.su-panel__heading{display:flex;gap:12px;align-items:center;padding:16px 18px 11px;border-bottom:1px solid #5d4829}.su-panel__icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--gold-dim);transform:rotate(45deg);color:var(--gold-hi);font-size:20px}.su-panel__icon::first-letter{transform:rotate(-45deg)}
.su-panel__heading small,.su-governance small{display:block;color:#9f916f;font-size:10px;letter-spacing:.2em;text-transform:uppercase}.su-panel h2,.su-governance h2{margin:2px 0 0;color:var(--gold-hi);font-size:22px;letter-spacing:.08em;text-transform:uppercase}.su-panel__intro{margin:12px 18px;color:#aaa18f;font-size:12px;line-height:1.45}

/* Restoration Atlas */
.su-atlas{min-height:490px}.su-town-list{padding:0 14px}.su-town{position:relative;margin:9px 0;padding:10px 12px;border:1px solid #51442c;background:linear-gradient(90deg,#111411ed,#171714e8)}.su-town--dim{opacity:.82}.su-town__title{display:flex;justify-content:space-between;align-items:baseline}.su-town h3{margin:0;color:#e9dec7;font-size:15px;letter-spacing:.12em;text-transform:uppercase}.su-town__title strong{color:var(--gold-hi);font-size:15px}.su-meter{height:5px;margin:6px 0 7px;border:1px solid #4f493a;background:#080909}.su-meter i{display:block;height:100%;background:linear-gradient(90deg,#806427,#e0b34d);box-shadow:0 0 8px #d3a74599}.su-town--complete .su-meter i{background:linear-gradient(90deg,#53763d,#a7cf67)}.su-town p{margin:0 0 6px;color:#aaa28f;font-size:11px}.su-town dl{display:flex;gap:22px;margin:0}.su-town dl div{display:flex;gap:5px}.su-town dt{color:#756f63;font-size:10px}.su-town dd{margin:0;color:#d7c8a6;font-size:10px}.su-town__directive,.su-town__locked{display:block;margin:8px -4px -3px;padding:5px 7px;border-left:2px solid #9f7b35;background:#242016;color:#d9bd76;font-size:9px;letter-spacing:.09em;text-transform:uppercase}.su-town__locked{border-color:#744239;background:#201614;color:#b9887d}.su-atlas__button{display:flex;justify-content:space-between;margin:13px 14px 15px;padding:10px 13px;border:1px solid var(--gold-dim);background:#15130f;color:var(--gold-hi);font-size:12px;letter-spacing:.12em;text-transform:uppercase}.su-atlas__button:hover{background:#2b2314}
.su-town-empty{margin:18px 0;padding:45px 24px;border:1px solid #51442c;background:#111411e8;color:#b8ad98;text-align:center;font-size:13px;line-height:1.6}

/* World quest and governance */
.su-center-stack{display:grid;gap:14px}.su-parchment{position:relative;min-height:307px;padding:36px 36px 23px;text-align:center;color:#332414;background:linear-gradient(95deg,rgba(109,83,46,.12),transparent 10% 90%,rgba(109,83,46,.15)),linear-gradient(#d3bb85,#bca36d);clip-path:polygon(3% 0,97% 0,100% 4%,98% 50%,100% 96%,97% 100%,3% 100%,0 96%,2% 50%,0 4%);filter:drop-shadow(0 14px 18px #000a)}.su-parchment:before{content:"";position:absolute;inset:8px;border:1px solid #6f542d80;pointer-events:none}.su-parchment__date{position:absolute;left:24px;top:18px;text-align:left}.su-parchment__date span{display:block;font-weight:700}.su-parchment__date small{text-transform:uppercase;letter-spacing:.13em}.su-limited{position:absolute;right:26px;top:22px;padding:4px 7px;background:#783b25;color:#ffe2a8;font-size:9px;letter-spacing:.12em;text-transform:uppercase}.su-quest-icon{margin:0 auto -2px;width:46px;height:46px;display:grid;place-items:center;border:2px solid #725126;border-radius:50%;color:#4a6628;font-size:25px}.su-parchment h2{margin:5px 0;color:#392615;font-size:25px}.su-parchment>p{margin:5px auto;max-width:330px;font-size:12px;line-height:1.35}.su-countdown{margin:13px auto 7px;padding:8px;border-block:1px solid #836633}.su-countdown small{margin-right:9px;text-transform:uppercase}.su-countdown strong{font-size:20px;letter-spacing:.12em}.su-parchment .su-parchment__warning{font-weight:700;color:#71351e}.su-parchment .su-parchment__foot{margin-top:13px;font-size:10px;font-style:italic}
.su-governance{min-height:168px;padding:16px;display:flex;gap:14px}.su-governance__crest{flex:0 0 52px;height:64px;display:grid;place-items:center;border:1px solid var(--gold-dim);color:var(--gold);font-size:30px;clip-path:polygon(50% 0,100% 19%,92% 76%,50% 100%,8% 76%,0 19%);background:#16140f}.su-governance h2{font-size:17px}.su-governance ul{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin:9px 0;padding:0;list-style:none}.su-governance li{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dotted #5f533d;color:#9e9686;font-size:10px}.su-governance li strong{color:#d5bd87}.su-governance p{margin:8px 0 0;color:#8f887b;font-size:9px;line-height:1.45}

/* Login and remembered identity */
.su-login{padding-bottom:14px}.su-login-platform{padding:14px 18px;border-bottom:1px solid #5b4625;color:#ddd1b9;font-size:13px}.su-steam-mark,.su-identity__icon{display:inline-grid;place-items:center;border:2px solid #cfcfcf;border-radius:50%;font-family:Arial,sans-serif;font-weight:700}.su-steam-mark{width:24px;height:24px;margin-right:9px}.su-identity{display:flex;align-items:center;gap:12px;margin:13px 15px;padding:13px;border:1px solid #5d5b4b;background:linear-gradient(90deg,#1a211ce6,#151714ed)}.su-identity__icon{width:50px;height:50px;font-size:24px}.su-identity__copy{min-width:0;flex:1}.su-identity__copy>span,.su-identity__copy>strong{display:block}.su-identity__copy>span{color:#958d7e;font-size:9px;text-transform:uppercase;letter-spacing:.12em}.su-identity__copy>strong{overflow:hidden;color:#f1eadc;font-size:19px;text-overflow:ellipsis}.su-identity__copy .su-identity__ready{color:var(--green);font-size:12px;text-transform:none}.su-identity__actions{text-align:center}.su-security-shield{display:block;color:var(--green);font-size:28px}.su-session-action{margin-top:3px;border:0;background:none;color:#d9b86f;font-size:10px;cursor:pointer}.su-login__intro{padding:7px 25px 11px;text-align:center}.su-ornament{display:block;color:var(--gold);font-size:10px}.su-login__intro h2{margin:4px 0;color:var(--gold-hi);font-size:25px;text-transform:none}.su-login__intro p{margin:0;color:#bdb4a4;font-size:12px;line-height:1.45}.su-alert{margin:6px 16px;padding:8px;border:1px solid #873f35;background:#2f1714;color:#f2b4a6;font-size:11px}.su-play{display:block;width:calc(100% - 30px);margin:8px 15px;padding:13px 16px;border:1px solid #f1cd78;outline:3px double #8a6129;background:linear-gradient(#d4ac59,#8b5e23);color:#221608;text-shadow:0 1px #f5d998;cursor:pointer;text-transform:uppercase;box-shadow:inset 0 0 17px #ffe3a465,0 5px 18px #000}.su-play span{display:block;font-size:24px;font-weight:700}.su-play small{display:block;margin-top:2px;font-size:9px;letter-spacing:.08em}.su-play:hover{filter:brightness(1.15)}.su-login__separator{margin:13px 20px 8px;border-top:1px solid #5e4a2e;text-align:center}.su-login__separator span{position:relative;top:-8px;padding:0 9px;background:#0c0e0d;color:#978d79;font-size:10px}.su-secondary{display:block;width:calc(100% - 50px);margin:0 25px;padding:9px;border:1px solid #9e7637;background:#101210;color:#d8b86e;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.su-legacy-toggle{display:block;margin:10px;text-align:center;color:#a89b82;font-size:10px}.su-world-pulse{margin:12px 15px 0;padding:8px 10px;border-block:1px solid #443a2b;display:flex;justify-content:space-between;color:#999181;font-size:10px}.su-world-pulse a{color:#b9d882}.su-status-dot{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#79b84a;box-shadow:0 0 7px #7fc34f}.su-legal{margin:11px 20px;color:#716d65;font-size:8px;text-align:center}.su-legal a{color:#ba9450}.su-security-footer{display:flex;gap:10px;align-items:center;margin:0 15px;color:#9e8a63}.su-security-footer p,.su-security-footer strong,.su-security-footer span{display:block;margin:0}.su-security-footer p span{color:#706b62;font-size:9px}.su-security-footer strong{font-size:10px}

/* Live strip and navigation */
.su-dispatch{width:min(980px,76vw);margin:14px auto 0;padding:8px 15px;display:grid;grid-template-columns:1fr 1.4fr;gap:18px;border:1px solid #5d4829;background:#080a09e8;box-shadow:0 8px 22px #000}.su-dispatch>div{min-width:0}.su-dispatch small{color:#aa884c;text-transform:uppercase;letter-spacing:.12em}.su-dispatch ol{display:flex;gap:12px;margin:4px 0 0;padding:0;list-style:none;font-size:10px}.su-dispatch ol li span{display:flex;gap:5px}.su-dispatch em{color:#8fbe65;font-style:normal}.su-dispatch #SuLatestNews{display:flex;gap:14px}.su-dispatch article h3{margin:4px 0 0;max-width:260px;overflow:hidden;color:#bdb4a4;font-size:10px;white-space:nowrap;text-overflow:ellipsis}.su-dispatch time{color:#70695c;font-size:9px}
.su-quick-nav{position:absolute;left:0;right:0;bottom:0;z-index:10;min-height:62px;display:flex;justify-content:center;border-top:1px solid #84632f;background:linear-gradient(#101310f5,#060807fc);box-shadow:0 -12px 35px #000}.su-quick-nav>a,.su-quick-nav>button{position:relative;min-width:150px;padding:18px 18px 15px;border:0;border-right:1px solid #2b2a24;background:none;color:#c6ae7b;text-align:center;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}.su-quick-nav a span,.su-quick-nav button span{margin-right:7px;color:var(--gold);font-size:19px}.su-quick-nav .is-active{color:var(--gold-hi)}.su-quick-nav .is-active:after{content:"";position:absolute;left:22%;right:22%;bottom:0;height:2px;background:var(--gold)}.su-more-menu{position:absolute;right:3vw;bottom:58px;display:grid;width:190px;border:1px solid #80602e;background:#0a0d0bf8;box-shadow:0 10px 26px #000}.su-more-menu a{padding:10px 14px;border-bottom:1px solid #29271f;color:#c6b58f;font-size:12px}.su-more-menu a:hover{background:#252016}

/* Dialogs and loading */
.su-link-dialog,.su-loading{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#000b}.su-link-dialog__surface{position:relative;width:min(540px,92vw);padding:28px;border:1px solid var(--gold-dim);background:#0d100ff5;box-shadow:0 22px 60px #000}.su-link-dialog__surface h2{color:var(--gold-hi)}.su-link-dialog__close{position:absolute;right:10px;top:8px;border:0;background:none;color:#d5c49f;font-size:25px;cursor:pointer}.su-provider-row{width:100%;display:grid;grid-template-columns:70px 1fr auto;gap:10px;margin:8px 0;padding:11px;border:1px solid #4f4635;background:#151816;color:#ddd}.su-provider-row em{color:var(--green)}.su-provider-row--button{cursor:pointer}.su-link-dialog__actions{display:flex;gap:10px;margin-top:17px}.su-link-dialog__actions>*{flex:1;margin:0;width:auto}.su-play--compact{padding:9px;text-align:center}.su-loading{z-index:60;color:var(--gold-hi)}.su-loading span{width:35px;height:35px;border:3px solid #594523;border-top-color:var(--gold);border-radius:50%;animation:su-spin .8s linear infinite}@keyframes su-spin{to{transform:rotate(360deg)}}

/* Responsive: panels stack without turning the page into a flattened screenshot. */
@media(max-width:1180px){.su-brand-hero{width:72vw}.su-brand-hero__mark{width:56vw}.su-command-deck{grid-template-columns:1fr 1fr}.su-login{grid-column:2}.su-center-stack{grid-column:1;grid-row:2}.su-atlas{grid-column:1;grid-row:1}.su-login{grid-row:1}.su-dispatch{width:92vw}.su-quick-nav>a,.su-quick-nav>button{min-width:0;flex:1;padding-inline:7px;font-size:10px}}
@media(max-width:760px){.su-landing{padding:8px 10px 72px;background-attachment:scroll}.su-brand-hero{width:100%;min-height:160px}.su-brand-hero__mark{width:min(94vw,520px)}.su-brand-hero__mark img{max-height:105px}.su-brand-hero__tools{font-size:76px}.su-brand-hero__copy{padding:0 12px}.su-partner-build{display:none}.su-command-deck{width:100%;display:flex;flex-direction:column}.su-command-deck>*{width:100%}.su-login{order:-1}.su-atlas{min-height:0}.su-parchment{min-height:292px}.su-dispatch{width:100%;grid-template-columns:1fr}.su-quick-nav{overflow-x:auto;justify-content:flex-start}.su-quick-nav>a,.su-quick-nav>button{flex:0 0 118px;padding:16px 6px;font-size:9px}.su-quick-nav a span{display:block;margin:0 0 2px}.su-governance ul{grid-template-columns:1fr}.su-world-pulse{gap:12px;flex-wrap:wrap}}
@media(max-width:420px){.su-brand-hero__tagline:before,.su-brand-hero__tagline:after{display:none}.su-parchment{padding-inline:24px}.su-parchment__date{position:relative;left:auto;top:auto;text-align:center}.su-limited{position:static;display:inline-block;margin:8px}.su-governance{display:block}.su-governance__crest{margin:0 auto 8px}.su-town dl{gap:9px;flex-wrap:wrap}}

/*
 * Approved desktop composition (reference: restoration-rules preview).
 * The desktop uses a staged lower command deck; tablet/mobile retain the
 * responsive stacked layout above so the controls remain usable.
 */
@media(min-width:1181px){
 .su-landing{min-height:940px;padding:0 20px 92px;background-position:center top;background-size:100% auto}
 .su-landing__veil{background:linear-gradient(180deg,rgba(20,17,12,.04),rgba(15,13,9,.02) 42%,rgba(3,4,4,.32) 73%,rgba(2,3,3,.8)),radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.26) 100%)}
 .su-brand-hero{width:630px;min-height:303px;margin:0 0 0 28px;padding-top:0;text-align:center}
 .su-brand-hero__mark{width:600px;margin:0}
 .su-brand-hero__mark img{max-height:224px;object-fit:contain;filter:drop-shadow(0 8px 10px #000b)}
 .su-brand-hero__tools{display:none}
 .su-brand-hero__tagline{margin:-3px 0 4px;font-size:20px;letter-spacing:.14em}
 .su-brand-hero__copy{font-size:15px}
 .su-partner-build{display:none}

 .su-command-deck{position:absolute;left:20px;right:20px;top:305px;bottom:98px;width:auto;margin:0;grid-template-columns:34fr 39fr 27fr;gap:15px;align-items:end}
 .su-atlas{height:540px;min-height:540px;align-self:end}
 .su-atlas .su-panel__heading{height:64px;justify-content:center}
 .su-atlas .su-panel__heading small,.su-atlas .su-panel__icon{display:none}
 .su-atlas .su-panel__heading h2{font-size:27px;letter-spacing:.14em}
 .su-atlas .su-panel__intro{position:absolute;left:0;right:0;bottom:55px;margin:0;text-align:center}
 .su-town-list{padding:0 14px}
 .su-town{height:120px;margin:6px 0;padding:9px 10px 8px 184px;overflow:hidden}
 .su-town:before{content:"";position:absolute;left:7px;top:7px;bottom:7px;width:164px;border:2px solid #765b31;background-image:linear-gradient(rgba(20,16,11,.18),rgba(20,16,11,.38)),url("shattered-utopia-login-valley-exact-v8.png");background-size:520px auto;background-position:22% 69%;filter:sepia(.18) contrast(1.08)}
 .su-town:nth-child(2):before{background-position:53% 67%}.su-town:nth-child(3):before{background-position:82% 70%}
 .su-town h3{font-size:18px}.su-town__title strong{font-size:13px}.su-town p{font-size:10px}.su-town dl{display:block}.su-town dl div{margin-bottom:1px}.su-town__directive,.su-town__locked{margin-top:4px;white-space:nowrap;font-size:8px}
 .su-atlas__button{position:absolute;left:13px;right:13px;bottom:12px;margin:0;height:39px;align-items:center;padding-inline:25px;font-size:15px}

 .su-center-stack{height:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:25px;align-items:end;padding:130px 0 0}
 .su-parchment{min-height:365px;padding:42px 32px 24px;align-self:end}
 .su-parchment h2{font-size:22px}.su-parchment>p{font-size:13px}.su-quest-icon{margin-top:24px}
 .su-governance{min-height:300px;padding:25px 22px;display:block;text-align:center;align-self:end}
 .su-governance__crest{margin:4px auto 13px;width:68px;height:78px}
 .su-governance h2{font-size:17px}.su-governance ul{display:block;margin:16px 5px}.su-governance li{margin:7px 0;font-size:12px}.su-governance p{border-top:1px solid #695437;padding-top:12px;font-size:10px;color:#c2b18e}

 .su-login{height:490px;align-self:end;padding-bottom:10px}
 .su-login-platform{display:none}
 .su-login:after{content:"Remembered account";position:absolute;left:0;right:0;top:20px;color:#cfb783;text-align:center;text-transform:uppercase;letter-spacing:.14em}
 .su-identity{margin:55px 28px 5px;padding:0;border:0;background:none;display:block;text-align:center}
 .su-identity__icon{width:52px;height:52px;margin:auto}.su-identity__copy>span:first-child{display:none}.su-identity__copy>strong{margin-top:7px;font-size:24px}.su-identity__copy .su-identity__ready{font-size:14px;text-transform:none}.su-identity__actions{position:static}.su-security-shield{display:none}.su-session-action{font-size:12px;text-decoration:underline}
 .su-login__intro{display:none}
 .su-play{height:102px;margin-top:13px;display:grid;place-content:center}.su-play span{font-size:34px}.su-play small{display:none}
 .su-login__separator{margin-top:20px}.su-secondary{font-size:11px}.su-legacy-toggle{margin:10px 25px;padding:9px;border:1px solid #544b3b;text-transform:uppercase;color:#c9b78f}
 .su-world-pulse{display:none}.su-legal{display:none}.su-security-footer{position:absolute;left:20px;right:20px;bottom:15px;justify-content:center;border-top:1px solid #4c402e;padding-top:10px}

 .su-dispatch{position:absolute;z-index:12;right:18px;bottom:8px;width:560px;height:76px;margin:0;grid-template-columns:210px 1fr;align-items:center;border-color:#715631;background:#0a0b0aec}
 .su-dispatch ol{display:none}.su-dispatch>div:first-child small{font-size:12px;color:#9cc66b}
 .su-dispatch #SuLatestNews article:not(:first-child){display:none}
 .su-quick-nav{height:92px;min-height:92px;padding:0 590px 0 20px;justify-content:flex-start}
 .su-quick-nav>a,.su-quick-nav>button{min-width:135px;padding:31px 13px 18px;font-size:14px}
 .su-quick-nav a span,.su-quick-nav button span{display:none}
}

/* Web-only login review: 400px × 1.5 = 600px. Keep every native and mobile
   presentation on its existing geometry. */
@media(min-width:1181px){
 .su-landing[data-entry-platform="web"]:not(.su-native-app) .su-login{
  height:600px;
  min-height:600px;
 }
}

/*
 * FORGED UI CHROME — approved Restoration Atlas presentation.
 * Keep these rules at the end of the file: they provide the shared iron frame,
 * gold corner fasteners, engraved headings, and integrated footer navigation.
 * New dashboard panels should use .su-panel (or .su-governance) to inherit it.
 */
.su-panel,.su-governance{
 overflow:hidden;
 border:3px solid #171916;
 outline:1px solid #6f542b;
 border-radius:2px;
 background:
  linear-gradient(135deg,rgba(212,156,54,.16),transparent 28px) top left/46px 46px no-repeat,
  linear-gradient(225deg,rgba(212,156,54,.16),transparent 28px) top right/46px 46px no-repeat,
  linear-gradient(45deg,rgba(212,156,54,.12),transparent 28px) bottom left/46px 46px no-repeat,
  linear-gradient(315deg,rgba(212,156,54,.12),transparent 28px) bottom right/46px 46px no-repeat,
  linear-gradient(145deg,rgba(18,21,19,.97),rgba(5,7,7,.97));
 box-shadow:0 0 0 2px #050606,0 0 0 3px #4f3d24,0 18px 42px #000d,inset 0 0 0 2px #090a09,inset 0 0 42px #000;
}
.su-panel:before,.su-governance:before{
 z-index:3;inset:7px;border:1px solid #554226;
 box-shadow:inset 0 0 0 2px #080a09,inset 0 0 16px #000b;
}
.su-panel:after,.su-governance:after{
 content:"";position:absolute;z-index:4;inset:0;pointer-events:none;
 background:
  radial-gradient(circle at 13px 13px,#dfaa4b 0 1px,#60441e 2px,transparent 3px),
  radial-gradient(circle at calc(100% - 13px) 13px,#dfaa4b 0 1px,#60441e 2px,transparent 3px),
  radial-gradient(circle at 13px calc(100% - 13px),#dfaa4b 0 1px,#60441e 2px,transparent 3px),
  radial-gradient(circle at calc(100% - 13px) calc(100% - 13px),#dfaa4b 0 1px,#60441e 2px,transparent 3px),
  linear-gradient(135deg,transparent 0 12px,#9f722d 13px,#332417 14px,transparent 15px) top left/34px 34px no-repeat,
  linear-gradient(225deg,transparent 0 12px,#9f722d 13px,#332417 14px,transparent 15px) top right/34px 34px no-repeat,
  linear-gradient(45deg,transparent 0 12px,#9f722d 13px,#332417 14px,transparent 15px) bottom left/34px 34px no-repeat,
  linear-gradient(315deg,transparent 0 12px,#9f722d 13px,#332417 14px,transparent 15px) bottom right/34px 34px no-repeat;
}
.su-panel__heading{
 border-bottom:3px double #594528;
 background:linear-gradient(180deg,rgba(33,34,29,.76),rgba(8,10,9,.42));
 box-shadow:0 5px 14px #0008,inset 0 -1px #17130d;
}
.su-panel h2,.su-governance h2,.su-panel__heading h2{
 color:#d7c49b;font-variant:small-caps;font-weight:500;letter-spacing:.13em;
 text-shadow:0 2px 2px #000,0 0 8px rgba(201,151,61,.2);
}
.su-town{border:1px solid #3e3526;box-shadow:inset 0 0 0 1px #080a09,inset 0 0 18px #0008}.su-town:after{content:"";position:absolute;inset:3px;border:1px solid rgba(132,99,48,.2);pointer-events:none}.su-town h3{font-variant:small-caps;font-weight:500;color:#d8c6a2}
.su-atlas__button,.su-secondary,.su-legacy-toggle{box-shadow:inset 0 0 0 2px #080908,inset 0 0 12px #000;border:1px solid #765a31;text-shadow:0 2px 2px #000}

.su-parchment{
 outline:2px solid #17140e;
 box-shadow:0 0 0 1px #7b5d31,0 0 0 5px #11120f,0 0 0 6px #5b472b,0 16px 28px #000c,inset 0 0 42px rgba(79,49,17,.2);
}
.su-parchment:after{content:"";position:absolute;inset:14px;border:1px solid rgba(92,62,27,.55);pointer-events:none;clip-path:polygon(0 0,42% 0,50% 8px,58% 0,100% 0,100% 100%,58% 100%,50% calc(100% - 8px),42% 100%,0 100%)}

.su-quick-nav{
 border-top:3px solid #121411;
 outline:1px solid #69502e;
 background:
  repeating-linear-gradient(115deg,transparent 0 34px,rgba(188,144,64,.025) 35px,transparent 37px),
  linear-gradient(180deg,#1b1d19 0,#0c0e0c 25%,#060807 100%);
 box-shadow:0 -1px 0 #9a7339,0 -5px 0 #050606,0 -6px 0 #3f3423,0 -15px 34px #000b,inset 0 2px 0 #292a24,inset 0 0 26px #000;
}
.su-quick-nav:before,.su-quick-nav:after{content:"";position:absolute;top:8px;bottom:8px;width:24px;border-block:1px solid #7a5a2d;opacity:.7}.su-quick-nav:before{left:9px;border-left:1px solid #7a5a2d}.su-quick-nav:after{right:9px;border-right:1px solid #7a5a2d}
.su-quick-nav>a,.su-quick-nav>button{
 border-right:1px solid #29271f;color:#bda980;font-variant:small-caps;font-weight:500;letter-spacing:.075em;
 text-shadow:0 2px 2px #000;transition:color .15s,background .15s;
}
.su-quick-nav>a:hover,.su-quick-nav>button:hover{color:#ead296;background:linear-gradient(180deg,rgba(150,105,42,.11),transparent)}
.su-quick-nav .is-active{color:#e2c177}.su-quick-nav .is-active:after{left:16%;right:16%;height:2px;bottom:4px;background:linear-gradient(90deg,transparent,#d9a743 22%,#f1d185 50%,#d9a743 78%,transparent);box-shadow:0 0 7px #bd812c}.su-quick-nav .is-active:before{content:"◆";position:absolute;left:50%;bottom:-1px;z-index:2;transform:translateX(-50%);color:#edc86a;font-size:8px}
.su-more-menu{border:3px solid #171916;outline:1px solid #72552d;background:linear-gradient(145deg,#171916fa,#070908fa);box-shadow:0 0 0 2px #050606,0 12px 30px #000}.su-more-menu a{font-variant:small-caps;letter-spacing:.08em}
.su-dispatch{
 border:3px solid #161815;outline:1px solid #72552d;
 background:linear-gradient(145deg,rgba(21,23,20,.98),rgba(5,7,6,.98));
 box-shadow:0 0 0 2px #050606,0 0 0 3px #483820,inset 0 0 18px #000,0 8px 22px #000;
}
.su-dispatch small{font-variant:small-caps;letter-spacing:.14em}.su-dispatch>div+div{border-left:1px solid #3d3324;padding-left:18px}

@media(max-width:760px){.su-quick-nav:before,.su-quick-nav:after{display:none}.su-dispatch>div+div{border-left:0;padding-left:0}}

/*
 * FORGED UI CHROME — second-pass reference match.
 * This layer deepens the rails and bevels without changing live-data markup.
 * Gold is intentionally aged rather than bright so copy remains the focus.
 */
:root{--display-serif:"Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;--aged-gold:#aa8750;--aged-gold-hi:#d2b77e}
.su-panel,.su-governance{
 border-width:7px;
 border-color:#080a09;
 outline-color:#75582f;
 background:
  linear-gradient(135deg,rgba(204,145,45,.24) 0 1px,transparent 2px 11px,rgba(124,82,29,.23) 12px 13px,transparent 14px) top left/52px 52px no-repeat,
  linear-gradient(225deg,rgba(204,145,45,.24) 0 1px,transparent 2px 11px,rgba(124,82,29,.23) 12px 13px,transparent 14px) top right/52px 52px no-repeat,
  linear-gradient(45deg,rgba(204,145,45,.18) 0 1px,transparent 2px 11px,rgba(124,82,29,.18) 12px 13px,transparent 14px) bottom left/52px 52px no-repeat,
  linear-gradient(315deg,rgba(204,145,45,.18) 0 1px,transparent 2px 11px,rgba(124,82,29,.18) 12px 13px,transparent 14px) bottom right/52px 52px no-repeat,
  radial-gradient(ellipse at 50% 0,rgba(47,46,36,.2),transparent 55%),
  linear-gradient(145deg,#111411f7,#050707fa);
 box-shadow:
  0 0 0 1px #221b12,0 0 0 3px #050606,0 0 0 4px #634a29,
  0 16px 38px #000e,
  inset 0 0 0 1px #8b6834,inset 0 0 0 3px #050606,inset 0 0 0 5px #2e281d,inset 0 0 48px #000;
}
.su-panel:before,.su-governance:before{inset:8px;border-color:#6f532e;box-shadow:0 0 0 1px #050605,inset 0 0 0 1px #141510,inset 0 0 20px #000}
.su-panel:after,.su-governance:after{
 background:
  radial-gradient(circle at 15px 15px,#17120b 0 2px,#bf8b38 3px,#3d2b17 4px,transparent 5px),
  radial-gradient(circle at calc(100% - 15px) 15px,#17120b 0 2px,#bf8b38 3px,#3d2b17 4px,transparent 5px),
  radial-gradient(circle at 15px calc(100% - 15px),#17120b 0 2px,#bf8b38 3px,#3d2b17 4px,transparent 5px),
  radial-gradient(circle at calc(100% - 15px) calc(100% - 15px),#17120b 0 2px,#bf8b38 3px,#3d2b17 4px,transparent 5px),
  linear-gradient(126deg,transparent 0 10px,#8b6228 11px 12px,transparent 13px 17px,#4a341b 18px 19px,transparent 20px) top left/49px 49px no-repeat,
  linear-gradient(234deg,transparent 0 10px,#8b6228 11px 12px,transparent 13px 17px,#4a341b 18px 19px,transparent 20px) top right/49px 49px no-repeat,
  linear-gradient(54deg,transparent 0 10px,#795523 11px 12px,transparent 13px 17px,#402d19 18px 19px,transparent 20px) bottom left/49px 49px no-repeat,
  linear-gradient(306deg,transparent 0 10px,#795523 11px 12px,transparent 13px 17px,#402d19 18px 19px,transparent 20px) bottom right/49px 49px no-repeat;
}
.su-panel__heading{padding-top:14px;background:linear-gradient(180deg,#20221dde,#0a0c0adf);border-bottom:4px double #4d3a22;box-shadow:0 2px 0 #090a08,0 7px 17px #000a,inset 0 1px #4b4434}
.su-panel__heading h2,.su-governance h2{font-family:var(--display-serif);color:#c7b083;font-weight:400;letter-spacing:.16em;text-shadow:0 1px #000,0 2px 3px #000}
.su-panel__heading h2{white-space:nowrap}.su-panel__heading h2:before,.su-panel__heading h2:after{display:none}
.su-town-empty{border:1px solid #302c22;background:linear-gradient(145deg,#0d100e,#080a09);box-shadow:inset 0 0 0 2px #050606,inset 0 0 26px #000;color:#aa9b7e}
.su-atlas__button,.su-secondary,.su-legacy-toggle{font-family:var(--display-serif);font-variant:small-caps;color:#cbb17a;letter-spacing:.12em;background:linear-gradient(#1b1a15,#0b0d0b);border:3px double #775a30;outline:1px solid #090a08}
.su-play{border:3px double #f0cf79;outline:3px solid #362713;background:linear-gradient(180deg,#c69a4d 0,#936525 47%,#6d481c 52%,#ad7b32 100%);box-shadow:inset 0 0 0 2px #3a2712,inset 0 0 19px #ffe39a52,0 5px 18px #000}.su-play span{font-family:var(--display-serif);font-weight:400;letter-spacing:.04em}
.su-login:after{content:"Remembered account";position:absolute;left:0;right:0;top:19px;z-index:5;color:#bba77e;text-align:center;text-transform:uppercase;letter-spacing:.16em;font-family:var(--display-serif);font-size:11px;text-shadow:0 2px 2px #000;pointer-events:none}

.su-parchment{background:linear-gradient(90deg,rgba(70,44,20,.15),transparent 12% 88%,rgba(70,44,20,.17)),linear-gradient(#d0b985,#b99e68);outline:5px solid #080908;box-shadow:0 0 0 1px #72552d,0 0 0 7px #151713,0 0 0 8px #594329,0 16px 30px #000d,inset 0 0 45px rgba(61,39,17,.25)}
.su-parchment:before{inset:11px;border:1px solid #76572f;box-shadow:0 0 0 2px rgba(51,35,18,.18),inset 0 0 20px rgba(74,45,14,.18)}
.su-parchment h2,.su-parchment__date{font-family:var(--display-serif)}

.su-quick-nav{
 border-top-width:7px;outline-color:#674d2b;
 background:
  linear-gradient(90deg,transparent,rgba(190,144,64,.04) 18%,transparent 37%),
  repeating-linear-gradient(105deg,transparent 0 42px,rgba(181,136,57,.025) 43px,transparent 45px),
  linear-gradient(#181a17,#090b09 42%,#050706);
 box-shadow:0 -1px 0 #3c2e1c,0 -3px 0 #070807,0 -5px 0 #8a6735,0 -8px 0 #070807,0 -10px 0 #3e3323,0 -18px 35px #000c,inset 0 2px #313028,inset 0 -2px #1b1b17,inset 0 0 28px #000;
}
.su-quick-nav>a,.su-quick-nav>button{font-family:var(--display-serif);font-size:13px;color:#ab9874;letter-spacing:.065em;border-right:1px solid #343027;box-shadow:inset -1px 0 #070807}
.su-quick-nav>a:first-of-type{border-left:1px solid #343027}.su-quick-nav .is-active{color:#d8bd83}.su-quick-nav .is-active:after{bottom:2px;height:2px}.su-quick-nav .is-active:before{bottom:-3px}
.su-dispatch{border-width:6px;border-color:#090a08;outline-color:#624b2c;box-shadow:0 0 0 1px #35291a,0 0 0 3px #050605,inset 0 0 0 1px #594426,inset 0 0 20px #000,0 8px 22px #000}.su-dispatch small{font-family:var(--display-serif);color:#a99061}

@media(max-width:760px){.su-panel,.su-governance{border-width:5px}.su-login:after{display:none}.su-quick-nav{border-top-width:5px}}

/*
 * RESTORATION FRAME — fracture-lightning border study.
 * The four repeating gradients form independent jagged gold traces along each
 * rail. Adjust --fracture-gold to retint every panel without touching layout.
 */
:root{--fracture-gold:#b98632;--fracture-glow:rgba(222,165,61,.28)}
.su-panel,.su-governance{
 border-color:#050706;
 outline:2px solid #76582e;
 background-image:url("forged-lightning-frame.svg"),radial-gradient(ellipse at 50% 0,rgba(47,46,36,.2),transparent 55%),linear-gradient(145deg,#111411f7,#050707fa);
 background-position:center,center,center;
 background-size:100% 100%,100% 100%,100% 100%;
 background-repeat:no-repeat;
 box-shadow:0 0 0 1px #b08443,0 0 0 4px #070908,0 0 0 6px #332718,0 17px 40px #000e,inset 0 0 0 1px #ae8240,inset 0 0 0 4px #050706,inset 0 0 0 6px #352a1b,inset 0 0 44px #000;
}
.su-panel:after,.su-governance:after{
 display:none;
}
.su-login:after{display:block}
.su-panel:before,.su-governance:before{inset:10px;border:1px solid #9a7338;box-shadow:0 0 0 2px #060706,0 0 0 3px #3c2e1b,inset 0 0 0 1px #171811,inset 0 0 24px #000}
.su-parchment{outline-color:#070807;box-shadow:0 0 0 2px #a77d3d,0 0 0 5px #070807,0 0 0 8px #302417,0 16px 30px #000d,inset 0 0 45px rgba(61,39,17,.25)}

.su-town__title{gap:10px}.su-town__title h3{min-width:0;font-size:15px;letter-spacing:.08em}.su-town__title strong{flex:none;margin-left:auto;font-size:12px}

/*
 * PANEL MATERIAL — shared text-free forged-stone surface.
 * New dark table-like surfaces should join this selector so the visual system
 * remains consistent. Parchment intentionally stays separate and light.
 */
.su-panel,.su-governance{
 background-image:url("forged-lightning-frame.svg"),linear-gradient(rgba(4,6,5,.6),rgba(4,6,5,.77)),url("forged-panel-texture-v2.png");
 background-position:center,center,center;
 background-size:100% 100%,100% 100%,420px 420px;
 background-repeat:no-repeat,no-repeat,repeat;
}

/*
 * SELECTED OPTION 8 PANEL FRAME — ruined iron, aged gold, restoration seams.
 * The PNG is a transparent overlay, so live panel content and the shared forged
 * texture remain HTML/CSS rather than becoming part of a screenshot.
 * To change the frame later, replace only the URL below. Keep the overlay on
 * ::after so links, forms, and dynamic town data remain fully interactive.
 */
.su-panel:after,.su-governance:after{
 display:block;
 content:"";
 position:absolute;
 z-index:4;
 /* The production art deliberately extends past the panel edge. Clipping the
    outer twelve pixels keeps the rails thin like the approved reference. */
 inset:-12px;
 pointer-events:none;
 background:url("restoration-frame-option-08.png") center/100% 100% no-repeat;
}
.su-town,.su-town-empty,.su-dispatch,.su-quick-nav,.su-more-menu{
 background-image:linear-gradient(rgba(5,7,6,.78),rgba(4,6,5,.9)),url("forged-panel-texture-v2.png");
 background-size:100% 100%,360px 360px;
 background-repeat:no-repeat,repeat;
 background-blend-mode:normal,multiply;
}
.su-town{box-shadow:inset 0 0 0 1px #090a08,inset 0 0 22px #000b,0 1px #3c3020}
.su-dispatch,.su-quick-nav{background-position:center,center}

/*
 * OPTION 8 COMPONENT SYSTEM.
 * The Restoration Atlas, daily quest, and login share one frame. Buttons use
 * the matching empty plaque so their labels stay accessible live HTML text.
 * Town Governance was removed from ModernLanding.php; the center stack is now
 * intentionally a single quest column at every breakpoint.
 */
.su-center-stack{grid-template-columns:1fr}
.su-daily-quest{
 clip-path:none;
 filter:none;
 min-height:490px;
 padding:78px 52px 46px;
 color:#c9bda8;
 background-image:linear-gradient(rgba(4,6,5,.72),rgba(4,6,5,.86)),url("forged-panel-texture-v2.png");
 background-size:100% 100%,420px 420px;
 background-repeat:no-repeat,repeat;
 box-shadow:0 18px 42px #000d,inset 0 0 46px #000;
}
.su-daily-quest:before{inset:10px;border-color:#604a2b}
.su-daily-quest .su-parchment__date{left:42px;top:42px;color:#bca77e}
.su-daily-quest .su-parchment__date small{color:#756b59}
.su-daily-quest .su-limited{right:42px;top:42px;border:1px solid #77582e;background:#17140f;color:#d5b878}
.su-daily-quest .su-quest-icon{margin-top:48px;border-color:#76592f;color:#86a95a;background:#0b0e0c}
.su-daily-quest h2{margin-top:17px;color:#d7c49b;font-family:var(--display-serif);font-size:25px;font-weight:400}
.su-daily-quest>p{color:#a99f8d}
.su-daily-quest .su-countdown{border-color:#59462d;color:#d3b273}
.su-daily-quest .su-parchment__warning{color:#b86a55}
.su-daily-quest .su-parchment__foot{color:#71695d}
.su-daily-quest:after{clip-path:none}

.su-atlas__button,.su-play,.su-secondary,.su-legacy-toggle{
 position:relative;
 border:0;
 outline:0;
 background:transparent url("restoration-button-option-08-trimmed.png") center/100% 100% no-repeat;
 color:#d7ba7a;
 box-shadow:none;
 text-shadow:0 2px 3px #000;
}
.su-atlas__button:hover,.su-play:hover,.su-secondary:hover,.su-legacy-toggle:hover{
 background-color:transparent;
 filter:brightness(1.16);
}
.su-atlas__button{padding:12px 27px}
.su-play{min-height:100px;padding:20px 34px;color:#e0c384}
.su-secondary,.su-legacy-toggle{min-height:48px;padding:12px 28px}

/*
 * INDIVIDUAL DAMAGE MAPS.
 * Every major panel uses the same Option 8 manufactured frame, but each asset
 * has its own chipped-stone and gold-repair layout. Add future variants here
 * instead of reusing one crack map across the whole interface.
 */
.su-atlas:after{
 background-image:url("restoration-frame-option-08.png");
}
.su-daily-quest:after{
 background-image:url("restoration-frame-option-08-quest.png");
}
.su-login:after{
 display:block;
 content:"";
 background-image:url("restoration-frame-option-08-login.png");
}

/* Matching button construction with intentionally different repair paths. */
.su-play{
 background-image:url("restoration-button-option-08-b.png");
}
.su-secondary,.su-legacy-toggle{
 background-image:url("restoration-button-option-08-c.png");
}

/* Content clearance for Option 8's heavier physical rails. */
.su-atlas{padding-top:46px}
.su-atlas .su-panel__heading{padding-left:44px;padding-right:44px}
.su-atlas .su-panel__intro{margin-left:44px;margin-right:44px}
.su-atlas .su-town-list{padding-left:42px;padding-right:42px}
.su-atlas .su-town{padding-left:150px}
.su-atlas .su-town:before{width:122px}
.su-atlas .su-town h3{font-size:16px}
.su-atlas .su-town__title strong{margin-left:8px;font-size:12px}
.su-atlas .su-atlas__button{min-height:58px;margin-left:38px;margin-right:38px;padding:16px 32px}
.su-login .su-login-platform{padding-left:42px;padding-right:42px}
.su-login .su-identity{margin-left:36px;margin-right:36px}
.su-login .su-play{width:calc(100% - 64px);margin-left:32px;margin-right:32px}
.su-login .su-secondary{width:calc(100% - 72px);min-height:54px;margin-left:36px;margin-right:36px}
.su-login .su-legacy-toggle{min-height:54px;margin-left:36px;margin-right:36px}

@media(min-width:1181px){
 .su-atlas{height:570px;min-height:570px}
 .su-atlas .su-town{height:108px}
 .su-atlas .su-atlas__button{left:38px;right:38px;width:auto;height:58px;margin:0}
}

@media(max-width:420px){
 .su-atlas .su-panel__heading{padding-left:34px;padding-right:34px}
 .su-atlas .su-panel__intro{margin-left:34px;margin-right:34px}
 .su-atlas .su-town-list{padding-left:32px;padding-right:32px}
 .su-atlas .su-atlas__button{margin-left:30px;margin-right:30px}
 .su-login .su-identity{margin-left:30px;margin-right:30px}
}

@media(min-width:1181px){
 .su-center-stack{display:block;padding:130px 0 0}
 .su-daily-quest{width:100%;height:490px;min-height:490px}
}

/*
 * COMPACT DESKTOP COMPOSITION
 * Keeps the launcher at the proportions of the approved reference instead of
 * scaling each panel to fill the entire available column. The footer remains
 * unobstructed at normal 100% browser zoom on 1080p and taller displays.
 */
@media(min-width:1181px){
 .su-command-deck{
  left:50%;right:auto;top:348px;bottom:104px;
  width:min(1680px,calc(100vw - 56px));
  transform:translateX(-50%);
  grid-template-columns:minmax(450px,36fr) minmax(340px,28fr) minmax(390px,30fr);
  gap:18px;
 }

 /* The approved composition places the Atlas close to the left viewport rail. */
 /* Anchor only the Atlas to a consistent 20px page gutter. The calculation
    cancels the centered deck margin on wide screens without moving siblings. */
 .su-atlas{
  transform:translateX(calc(20px - max(20px, calc((100vw - 1680px)/2))));
 }

 .su-atlas{height:470px;min-height:470px;padding-top:30px}
 .su-atlas .su-panel__heading{height:52px;padding-left:32px;padding-right:32px}
 .su-atlas .su-panel__heading h2{font-size:23px}
 .su-atlas .su-town-list{padding-left:32px;padding-right:32px}
 .su-atlas .su-town{height:88px;margin:5px 0;padding-top:6px;padding-bottom:5px;padding-left:138px}
 .su-atlas .su-town:before{left:6px;top:6px;bottom:6px;width:118px}
 .su-atlas .su-town h3{font-size:15px}
 .su-atlas .su-town p{margin-bottom:3px;font-size:9px}
 .su-atlas .su-town dl{font-size:9px}
 .su-atlas .su-town__directive,.su-atlas .su-town__locked{margin-top:2px;padding:3px 6px;font-size:7px}
 .su-atlas .su-panel__intro{display:none}
 .su-atlas .su-atlas__button{left:32px;right:32px;bottom:20px;height:48px;min-height:48px;padding:11px 25px;font-size:13px}

 .su-center-stack{height:auto;padding:0;align-self:end}
 .su-daily-quest{height:350px;min-height:350px;padding:58px 42px 32px}
 .su-daily-quest .su-parchment__date{left:34px;top:31px}
 .su-daily-quest .su-limited{right:34px;top:31px}
 .su-daily-quest .su-quest-icon{width:40px;height:40px;margin-top:36px;font-size:21px}
 .su-daily-quest h2{margin-top:12px;font-size:21px}
 .su-daily-quest>p{font-size:11px}

 .su-login{height:400px;min-height:400px;padding-bottom:8px}
 .su-login:after{top:14px}
 .su-login .su-identity{margin-top:42px}
 .su-login .su-identity__icon{width:46px;height:46px}
 .su-login .su-identity__copy>strong{font-size:21px}
 .su-login .su-play{height:84px;min-height:84px;margin-top:8px}
 .su-login .su-play span{font-size:28px}
 .su-login .su-login__separator{margin-top:14px}
 .su-login .su-secondary{min-height:46px}
 .su-login .su-legacy-toggle{min-height:44px;margin-top:5px}
 .su-login .su-security-footer{bottom:10px;padding-top:6px}
}
@media(max-width:760px){
 .su-daily-quest{min-height:390px;padding:72px 28px 38px}
 .su-daily-quest .su-parchment__date{position:absolute;left:30px;top:34px;text-align:left}
 .su-daily-quest .su-limited{position:absolute;right:30px;top:34px;margin:0}
}

/*
 * QUEST TYPOGRAPHY — follows the approved parchment reference.
 * The heading hierarchy uses traditional book typography instead of the
 * interface-wide uppercase treatment.  The calendar caption is displayed
 * above the weekday to match the sample while the underlying live DOM stays
 * unchanged for the world-event loader.
 */
.su-daily-quest .su-parchment__date{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:2px;
 font-family:var(--display-serif);
 text-shadow:0 1px rgba(255,239,192,.38);
}
.su-daily-quest .su-parchment__date small{
 order:-1;
 margin:0;
 color:#4c3824;
 font-size:14px;
 font-weight:400;
 line-height:1;
 letter-spacing:.035em;
 text-transform:none;
}
.su-daily-quest .su-parchment__date span{
 color:#4b3724;
 font-size:12px;
 font-weight:400;
 line-height:1.05;
}
.su-daily-quest .su-limited{
 font-family:var(--display-serif);
 font-size:10px;
 font-variant:small-caps;
 letter-spacing:.11em;
 text-transform:none;
}
.su-daily-quest h2{
 max-width:260px;
 color:#382617;
 font-family:var(--display-serif);
 font-size:21px;
 font-weight:400;
 line-height:1.08;
 letter-spacing:0;
 text-transform:none;
}
.su-daily-quest>p{
 color:#493421;
 font-family:Georgia,"Times New Roman",serif;
 font-size:12px;
 font-weight:400;
 line-height:1.28;
 letter-spacing:0;
 text-transform:none;
}
.su-daily-quest .su-countdown{
 font-family:Georgia,"Times New Roman",serif;
}
.su-daily-quest .su-countdown small{
 margin-right:4px;
 color:#8a3829;
 font-size:14px;
 letter-spacing:0;
 text-transform:none;
}
.su-daily-quest .su-countdown strong{
 color:#8a3829;
 font-size:15px;
 font-weight:400;
 letter-spacing:.045em;
}
.su-daily-quest .su-parchment__warning{
 color:#893a2c;
 font-size:12px;
 font-weight:700;
}
.su-daily-quest .su-parchment__foot{
 color:#5a4631;
 font-family:Georgia,"Times New Roman",serif;
 font-size:10px;
 font-style:normal;
 line-height:1.2;
}

/*
 * TRUE SITE COMPONENT CONSTRUCTION
 * --------------------------------
 * The landscape is the only page-sized background artwork. Panels are normal
 * HTML surfaces with a repeating forged texture. The approved Option 8 art is
 * used as a nine-slice border, so corners and rails resize independently and
 * the center is never a stretched screenshot. Dynamic cracks remain unique by
 * assigning a different border source to each component.
 */
.su-panel{
 border:26px solid transparent;
 border-image-source:url("restoration-frame-option-08.png");
 border-image-slice:96;
 border-image-width:26px;
 border-image-outset:0;
 border-image-repeat:stretch;
 border-radius:0;
 overflow:hidden;
 background:
  radial-gradient(ellipse at 50% 18%,rgba(75,62,39,.12),transparent 55%),
  linear-gradient(rgba(4,6,5,.78),rgba(4,6,5,.92)),
  url("forged-panel-texture-v2.png") center/420px 420px repeat;
 box-shadow:0 18px 42px #000d,inset 0 0 42px #000c;
}
.su-atlas{border-image-source:url("restoration-frame-option-08.png")}
.su-daily-quest{border-image-source:url("restoration-frame-option-08-quest.png")}
.su-login{border-image-source:url("restoration-frame-option-08-login.png")}

/* Disable the former full-panel overlay; the rails above now provide the art. */
.su-panel:after{display:none!important}
.su-panel:before{inset:0;border:1px solid rgba(198,148,62,.23);box-shadow:inset 0 0 0 1px #050605,inset 0 0 22px #000}

/*
 * Real buttons: live text, focus states, hover states, and independently placed
 * repair seams. No complete button image is stretched behind the controls.
 */
.su-atlas__button,.su-play,.su-secondary,.su-legacy-toggle{
 border:1px solid #8b672e;
 outline:1px solid #22180c;
 background-color:#171611;
 background-image:
  linear-gradient(115deg,transparent 0 74%,rgba(210,139,37,.7) 74.4%,transparent 75.1%),
  linear-gradient(180deg,#29261c 0%,#171611 48%,#0c0d0b 100%),
  url("forged-panel-texture-v2.png");
 background-size:100% 100%,100% 100%,280px 280px;
 color:#e0bd76;
 box-shadow:inset 0 0 0 3px #090a08,inset 0 0 0 4px #59431f,inset 0 0 18px #000,0 3px 10px #000b;
 text-shadow:0 2px 3px #000;
}
.su-play{
 background-image:
  linear-gradient(68deg,transparent 0 18%,rgba(221,148,39,.72) 18.4%,transparent 19.2%),
  linear-gradient(180deg,#332c1d 0%,#1d1912 50%,#0d0e0c 100%),
  url("forged-panel-texture-v2.png");
}
.su-secondary,.su-legacy-toggle{
 background-image:
  linear-gradient(128deg,transparent 0 84%,rgba(205,130,30,.66) 84.4%,transparent 85.1%),
  linear-gradient(180deg,#252219 0%,#14140f 52%,#0a0b09 100%),
  url("forged-panel-texture-v2.png");
}
.su-atlas__button:hover,.su-play:hover,.su-secondary:hover,.su-legacy-toggle:hover{
 border-color:#c49742;
 filter:brightness(1.14);
}
.su-atlas__button:focus-visible,.su-play:focus-visible,.su-secondary:focus-visible,.su-legacy-toggle:focus-visible{
 outline:2px solid #e0b765;
 outline-offset:3px;
}

@media(max-width:760px){
 .su-panel{border-width:18px;border-image-width:18px}
}

/*
 * SITE-WIDE CRACKED FORGE THEME
 * Uses the approved frame and button references as reusable nine-slice UI
 * parts. Every label remains HTML and every surface can resize independently.
 */
.su-panel{
 border-image-source:url("site-frame-cracked.png");
 border-image-slice:96;
 border-image-width:26px;
}
.su-daily-quest{border-image-source:url("site-frame-cracked-quest.png")}
.su-login{border-image-source:url("site-frame-cracked-login.png")}

/* Smaller framed surfaces inherit the same material without oversized rails. */
.su-town,.su-town-empty,.su-dispatch,.su-more-menu,.su-link-dialog__surface{
 border-style:solid;
 border-color:transparent;
 border-image-source:url("site-frame-cracked.png");
 border-image-slice:96;
 border-image-repeat:stretch;
 background-color:#0b0d0b;
 background-image:linear-gradient(rgba(5,7,6,.72),rgba(3,5,4,.9)),url("forged-panel-texture-v2.png");
 background-size:100% 100%,360px 360px;
}
.su-town,.su-town-empty{border-width:8px;border-image-width:8px}
.su-dispatch,.su-more-menu{border-width:12px;border-image-width:12px}
.su-link-dialog__surface{border-width:22px;border-image-width:22px}

/* Footer and navigation are constructed surfaces rather than a flat bar. */
.su-quick-nav{
 border:12px solid transparent;
 border-image:url("site-frame-cracked.png") 96 / 12px stretch;
 background:linear-gradient(rgba(7,9,7,.88),rgba(2,4,3,.98)),url("forged-panel-texture-v2.png") center/360px 360px repeat;
 box-shadow:0 -10px 28px #000c;
}
.su-quick-nav>a,.su-quick-nav>button{
 border:8px solid transparent;
 border-image:url("site-button-cracked.png") 112 160 / 8px 13px stretch;
 background:linear-gradient(180deg,rgba(42,38,28,.7),rgba(10,11,9,.92)),url("forged-panel-texture-v2.png") center/240px 240px repeat;
 color:#d7b875;
 text-shadow:0 2px 3px #000;
}
.su-quick-nav>a:hover,.su-quick-nav>button:hover{filter:brightness(1.16);color:#f0d291}

/* Approved plaque construction for every primary and secondary action. */
.su-atlas__button,.su-play,.su-secondary,.su-legacy-toggle,
.su-provider-row--button,.su-link-dialog__actions button{
 border-style:solid;
 border-color:transparent;
 border-image-source:url("site-button-cracked.png");
 border-image-slice:112 160;
 border-image-width:12px 18px;
 border-image-repeat:stretch;
 outline:0;
 background:linear-gradient(180deg,rgba(48,43,31,.82),rgba(12,13,10,.94)),url("forged-panel-texture-v2.png") center/280px 280px repeat;
 color:#e2c27d;
 box-shadow:inset 0 0 24px #000c,0 4px 13px #000a;
 text-shadow:0 2px 3px #000;
}
.su-atlas__button:hover,.su-play:hover,.su-secondary:hover,.su-legacy-toggle:hover,
.su-provider-row--button:hover,.su-link-dialog__actions button:hover{
 filter:brightness(1.16);
 color:#f4d797;
}
.su-atlas__button:focus-visible,.su-play:focus-visible,.su-secondary:focus-visible,
.su-legacy-toggle:focus-visible,.su-provider-row--button:focus-visible,
.su-link-dialog__actions button:focus-visible{
 outline:2px solid #e2b95f;
 outline-offset:3px;
}

/* Inputs, alerts, separators and status strips use the same restrained palette. */
.su-identity,.su-alert,.su-provider-row,.su-login__separator,.su-world-pulse{
 border-color:#5f4724;
 background-color:rgba(8,10,8,.82);
 color:#cbb991;
}
.su-google-button{display:flex;justify-content:center;min-height:44px;margin:8px auto 0}
.su-google-button[hidden]{display:none}
.su-panel__heading,.su-login-platform,.su-security-footer{
 border-color:#72552b;
}

@media(max-width:760px){
 .su-panel{border-image-width:18px}
 .su-quick-nav{border-width:8px;border-image-width:8px}
 .su-quick-nav>a,.su-quick-nav>button{border-width:6px;border-image-width:6px 9px}
}

/*
 * DESKTOP BRAND SCALE
 * The logo PNG contains generous transparent margins, so its element must be
 * wider than the visible crest. This matches the approved sample without
 * changing the scale of the dashboard beneath it.
 */
@media(min-width:1181px){
 .su-brand-hero{width:850px;min-height:340px;margin-left:18px}
 .su-brand-hero__mark{width:850px}
 .su-brand-hero__mark img{max-height:292px}
 .su-brand-hero__tagline{margin-top:0}
}

/*
 * RESTORATION ATLAS REFERENCE LAYOUT
 * Larger settlement art, text-led restoration status, compass seals, and the
 * discovery note/button hierarchy from the approved Atlas sample.
 */
.su-atlas{
 color:#cbbd9f;
 background:
  radial-gradient(ellipse at 40% 15%,rgba(84,67,37,.12),transparent 52%),
  linear-gradient(rgba(7,9,8,.86),rgba(3,5,4,.96)),
  url("forged-panel-texture-v2.png") center/380px 380px repeat;
}
.su-atlas .su-panel__heading h2{color:#d3be91;font-weight:400}
.su-atlas .su-town-list{position:relative;z-index:1}
.su-atlas .su-town{
 --town-accent:#c69a47;
 opacity:1;
 border-width:1px;
 border-image:none;
 border-color:#4a402e;
 background:linear-gradient(90deg,rgba(13,16,14,.98),rgba(8,11,10,.96));
 box-shadow:inset 0 0 18px #0008,0 1px 0 #29251d;
}
.su-atlas .su-town:before{
 border:2px solid #6e5631;
 filter:sepia(.24) saturate(.82) contrast(1.08) brightness(.78);
 box-shadow:inset 0 0 15px #0008;
}
.su-atlas .su-town__title{padding-right:34px}
.su-atlas .su-town h3{color:#d8c7a6;font-weight:400;letter-spacing:.1em}
.su-atlas .su-town__seal{
 position:absolute;right:10px;top:8px;
 display:grid;place-items:center;width:28px;height:28px;
 border:1px solid color-mix(in srgb,var(--town-accent) 75%,#171711);
 border-radius:50%;color:var(--town-accent);
 font-size:19px;line-height:1;
 box-shadow:0 0 7px color-mix(in srgb,var(--town-accent) 28%,transparent),inset 0 0 6px #000;
}
.su-atlas .su-town__restoration{
 display:block;margin:1px 0 2px;color:var(--town-accent);
 font-size:13px;font-weight:700;
}
.su-atlas .su-town--complete .su-town__restoration{color:#86b454}
.su-atlas .su-town p{color:#c0b399}
.su-atlas .su-town dt{color:#8e8370}
.su-atlas .su-town dd{color:#d2c19e}
.su-atlas .su-town__directive,.su-atlas .su-town__locked{
 margin-left:0;margin-right:0;border:0;background:none;
 color:var(--town-accent);font-weight:700;
}
.su-atlas .su-town__locked{color:#8d8370}

@media(min-width:1181px){
 .su-atlas{height:500px;min-height:500px}
 .su-atlas .su-town{height:105px;padding:7px 44px 6px 166px}
 .su-atlas .su-town:before{width:146px}
 .su-atlas .su-town h3{font-size:17px}
 .su-atlas .su-town p{font-size:10px}
 .su-atlas .su-town__restoration{font-size:13px}
 .su-atlas .su-town__directive,.su-atlas .su-town__locked{font-size:8px;white-space:nowrap}
 .su-atlas .su-panel__intro{
  display:block;bottom:60px;color:#a99c81;font-size:11px;
 }
 .su-atlas .su-atlas__button{bottom:13px}
}

/* Keep the wordmark centered over the first command-deck column at every
   desktop width. The Atlas is intentionally anchored 80px beyond the left
   viewport rail, so the logo receives the same horizontal offset. */
@media(min-width:1181px){
 .su-brand-hero{transform:translateX(-10px)}
 /* Match the narrow Atlas-to-page gutter on the opposite viewport edge. */
 .su-login{transform:translateX(15px)}
}
@media(min-width:1181px) and (max-width:1735px){
 .su-brand-hero{
  width:640px;min-height:300px;
  margin-left:calc(19.15vw - 340px);
 }
 .su-brand-hero__mark{width:640px}
 .su-brand-hero__mark img{max-height:230px}
 .su-brand-hero__tagline{font-size:17px}
}
@media(min-width:1736px){
 .su-brand-hero{margin-left:calc(50vw - 950px)}
}

@media(max-width:760px){
 .su-atlas .su-town__seal{width:24px;height:24px;font-size:16px}
 .su-atlas .su-town__restoration{font-size:12px}
}

/*
 * ATLAS TITLE — integrated engraved heading from the approved reference.
 * It belongs to the panel surface instead of appearing as another boxed card.
 */
.su-atlas .su-panel__heading{
 position:relative;
 justify-content:center;
 border:0;
 background:transparent;
 box-shadow:none;
 text-align:center;
}
.su-atlas .su-panel__heading:after{
 content:"";
 position:absolute;left:9%;right:9%;bottom:0;height:1px;
 background:linear-gradient(90deg,transparent,#5d4a2d 18%,#82663a 50%,#5d4a2d 82%,transparent);
 box-shadow:0 1px #050605;
}
.su-atlas .su-panel__heading>div{
 display:flex;align-items:center;justify-content:center;
}
.su-atlas .su-panel__heading>div:before,
.su-atlas .su-panel__heading>div:after{
 color:#756443;
 font-size:15px;
 line-height:1;
 text-shadow:0 1px #000;
 opacity:.9;
}
.su-atlas .su-panel__heading>div:before{content:"❧";margin-right:13px;transform:scaleX(-1)}
.su-atlas .su-panel__heading>div:after{content:"❧";margin-left:13px}
.su-atlas .su-panel__heading h2{
 margin:0;
 color:#cbb78f;
 font-family:var(--display-serif);
 font-size:24px;
 font-weight:400;
 letter-spacing:.13em;
 text-shadow:0 1px #000,0 2px 4px #000;
}

@media(min-width:1181px){
 .su-atlas .su-panel__heading{height:58px;padding-top:9px;padding-bottom:10px}
 .su-atlas .su-panel__heading h2{font-size:24px}
}
@media(max-width:760px){
 .su-atlas .su-panel__heading h2{font-size:20px;letter-spacing:.1em}
 .su-atlas .su-panel__heading>div:before{margin-right:8px}
 .su-atlas .su-panel__heading>div:after{margin-left:8px}
}

/*
 * INTEGRATED RESTORATION FOOTER
 * A single cracked-stone foundation holds flat engraved navigation and the
 * live realm dispatch, matching the approved sample instead of using a row of
 * unrelated plaque buttons.
 */
.su-site-footer{
 position:absolute;left:0;right:0;bottom:0;z-index:20;
 height:94px;display:flex;align-items:stretch;
 border:12px solid transparent;
 border-image:url("site-frame-cracked.png") 96 / 12px stretch;
 background:linear-gradient(rgba(9,11,9,.94),rgba(3,5,4,.99)),url("forged-panel-texture-v2.png") center/360px 360px repeat;
 box-shadow:0 -12px 34px #000d,inset 0 1px #6f532d;
}
.su-site-footer .su-quick-nav{
 position:static;left:auto;right:auto;bottom:auto;
 flex:1;min-width:0;height:auto;min-height:0;
 display:flex;justify-content:flex-start;padding:0;
 border:0;border-image:none;background:none;box-shadow:none;
}
.su-site-footer .su-quick-nav>a,.su-site-footer .su-quick-nav>button{
 position:relative;min-width:135px;
 display:flex;align-items:center;justify-content:center;
 padding:20px 18px 16px;
 border:0;border-right:1px solid #302b20;border-image:none;
 background:linear-gradient(180deg,rgba(35,31,23,.2),rgba(4,6,5,.12));
 color:#bda97d;font-size:13px;letter-spacing:.045em;text-transform:uppercase;
 text-shadow:0 1px 2px #000;box-shadow:inset -1px 0 #070807;
}
.su-site-footer .su-quick-nav>a:hover,.su-site-footer .su-quick-nav>button:hover{
 color:#e2c583;filter:none;background:linear-gradient(180deg,rgba(91,69,36,.18),rgba(7,8,6,.2));
}
.su-site-footer .su-quick-nav a span,.su-site-footer .su-quick-nav button span{display:none}
.su-site-footer .su-quick-nav .is-active{color:#e0c17e}
.su-site-footer .su-quick-nav .is-active:after{
 content:"";position:absolute;left:18%;right:18%;bottom:1px;height:2px;
 background:linear-gradient(90deg,transparent,#d0a64e 18%,#edc76c 50%,#d0a64e 82%,transparent);
 box-shadow:0 0 7px #c69137;
}
.su-site-footer .su-quick-nav .is-active:before{
 content:"◆";position:absolute;left:50%;bottom:-6px;z-index:2;transform:translateX(-50%);
 color:#edc76c;font-size:9px;text-shadow:0 0 5px #c69137;
}
.su-site-footer .su-dispatch{
 position:static;right:auto;bottom:auto;z-index:auto;
 flex:0 0 560px;width:560px;height:auto;margin:0;
 display:grid;grid-template-columns:210px 1fr;align-items:center;gap:16px;padding:8px 20px;
 border:8px solid transparent;border-image:url("site-frame-cracked.png") 96 / 8px stretch;
 background:linear-gradient(180deg,rgba(12,15,12,.9),rgba(4,6,5,.98)),url("forged-panel-texture-v2.png") center/300px 300px repeat;
 box-shadow:inset 0 0 20px #000a;
 }
.su-site-footer .su-dispatch>div+div{padding-left:18px;border-left:1px solid #4b3c26}
.su-site-footer .su-dispatch small{color:#b49b68;font-size:10px;letter-spacing:.11em}
.su-site-footer .su-dispatch>div:first-child small{color:#8fbd5f;font-size:11px}
.su-site-footer .su-dispatch #SuLatestNews{display:block}
.su-site-footer .su-dispatch article:not(:first-child),.su-site-footer .su-dispatch ol{display:none}
.su-site-footer .su-dispatch article h3{max-width:260px;margin:4px 0 0;color:#c9b78e;font-size:10px}
.su-site-footer .su-dispatch time{font-size:8px;color:#776c58}
.su-site-footer .su-more-menu{right:auto;left:auto;bottom:72px}

@media(max-width:1180px){
 .su-site-footer .su-quick-nav>a,.su-site-footer .su-quick-nav>button{min-width:0;flex:1;padding-inline:8px;font-size:10px}
 .su-site-footer .su-dispatch{flex-basis:390px;width:390px;grid-template-columns:130px 1fr;padding-inline:12px}
}
@media(min-width:1181px) and (max-width:1450px){
 .su-site-footer .su-quick-nav>a,.su-site-footer .su-quick-nav>button{
  min-width:0;flex:1;padding-inline:7px;font-size:10px;
 }
 .su-site-footer .su-dispatch{
  flex-basis:460px;width:460px;grid-template-columns:145px 1fr;padding-inline:12px;
 }
 .su-site-footer .su-dispatch>div+div{padding-left:12px}
}
@media(max-width:760px){
 .su-landing{padding-bottom:12px}
 .su-site-footer{
  position:relative;left:auto;right:auto;bottom:auto;height:auto;margin-top:15px;
  flex-direction:column;border-width:8px;border-image-width:8px;
 }
 .su-site-footer .su-quick-nav{order:2;overflow-x:auto;min-height:62px}
 .su-site-footer .su-quick-nav>a,.su-site-footer .su-quick-nav>button{flex:0 0 118px;padding:17px 8px 14px}
 .su-site-footer .su-dispatch{order:1;width:100%;flex:0 0 auto;min-height:68px;grid-template-columns:1fr 1.5fr}
}

/*
 * LIMITED QUEST NOTICE — parchment mounted in the restoration frame.
 * Matches the compact notice-board proportions and hierarchy of the approved
 * sample while keeping all event text and countdown values live.
 */
.su-center-stack{
 display:flex;
 align-items:flex-end;
 justify-content:center;
 padding:0;
}
.su-daily-quest{
 width:min(390px,100%);
 height:370px;
 min-height:370px;
 align-self:flex-end;
 padding:64px 42px 35px;
 border-width:18px;
 border-image-source:url("site-frame-cracked-quest.png");
 border-image-slice:96;
 border-image-width:18px;
 border-image-repeat:stretch;
 color:#352616;
 background:
  radial-gradient(circle at 28% 16%,rgba(255,244,191,.42),transparent 35%),
  radial-gradient(circle at 78% 74%,rgba(100,61,27,.15),transparent 42%),
  repeating-linear-gradient(4deg,rgba(92,61,28,.035) 0 1px,transparent 1px 5px),
  linear-gradient(100deg,#bda36f 0%,#ddc894 16%,#cdb47f 52%,#dbc48f 84%,#b69a65 100%);
 box-shadow:0 18px 36px #000d,inset 0 0 34px rgba(73,43,18,.38);
 filter:none;
 clip-path:none;
}
.su-daily-quest:before{
 display:block;content:"";position:absolute;inset:8px;z-index:0;
 border:1px solid rgba(90,61,31,.58);
 box-shadow:inset 0 0 0 1px rgba(239,216,157,.25),inset 0 0 24px rgba(73,43,18,.22);
 pointer-events:none;
}
.su-daily-quest>*{position:relative;z-index:1}
.su-daily-quest .su-parchment__date{
 position:absolute;left:50%;top:24px;transform:translateX(-50%);
 width:80%;text-align:center;color:#302217;
}
.su-daily-quest .su-parchment__date span{
 display:block;font-size:15px;font-weight:400;
}
.su-daily-quest .su-parchment__date small{
 display:block;margin-top:2px;color:#655039;font-size:9px;letter-spacing:.13em;
}
.su-daily-quest .su-limited{
 position:absolute;left:50%;right:auto;top:54px;transform:translateX(-50%);
 min-width:142px;padding:5px 16px;
 border:1px solid #6e4822;
 background:linear-gradient(180deg,#27475a,#142a36);
 color:#d9c99e;text-align:center;font-size:9px;letter-spacing:.14em;
 box-shadow:0 2px 5px #0007,inset 0 0 0 1px #8a6a3a;
}
.su-daily-quest .su-quest-icon{
 width:50px;height:50px;margin:25px auto 4px;
 border:2px solid #725527;
 background:rgba(72,51,25,.18);
 color:#425b25;font-size:25px;
 box-shadow:inset 0 0 10px rgba(66,40,18,.28);
}
.su-daily-quest h2{
 margin:8px auto 5px;max-width:280px;
 color:#352416;font-family:var(--display-serif);
 font-size:22px;font-weight:400;line-height:1.1;letter-spacing:.02em;
 text-shadow:0 1px rgba(255,239,192,.45);
}
.su-daily-quest>p{
 margin:5px auto;max-width:280px;
 color:#493421;font-size:12px;line-height:1.3;
}
.su-daily-quest .su-countdown{
 margin:10px auto 6px;padding:6px 0;
 border-top:1px solid rgba(106,74,36,.55);
 border-bottom:1px solid rgba(106,74,36,.55);
 color:#8a3829;
}
.su-daily-quest .su-countdown small{color:#5d4430;font-size:9px}
.su-daily-quest .su-countdown strong{font-size:17px}
.su-daily-quest .su-parchment__warning{color:#8f3d2d;font-weight:700}
.su-daily-quest .su-parchment__foot{
 position:absolute;left:36px;right:36px;bottom:21px;
 margin:0;padding-top:9px;
 border-top:1px solid rgba(106,74,36,.48);
 color:#5f4a34;font-size:10px;font-style:normal;
}

@media(min-width:1181px){
 .su-center-stack{height:auto;align-self:end}
 .su-daily-quest{width:390px;height:370px;min-height:370px}
}
@media(max-width:760px){
 .su-center-stack{width:100%}
 .su-daily-quest{
  width:min(390px,100%);height:355px;min-height:355px;
  padding:60px 30px 33px;border-width:14px;border-image-width:14px;
 }
 .su-daily-quest h2{font-size:20px}
 .su-daily-quest .su-parchment__foot{left:26px;right:26px}
}

/* Final quest type hierarchy; kept last so it overrides shared panel headings. */
.su-daily-quest .su-parchment__date{
 display:flex;flex-direction:column;align-items:center;gap:2px;
 font-family:var(--display-serif);text-shadow:0 1px rgba(255,239,192,.38);
}
.su-daily-quest .su-parchment__date small{
 order:-1;margin:0;color:#3b2818;font-size:18px;font-weight:600;
 line-height:1.05;letter-spacing:.055em;text-transform:uppercase;
 text-shadow:0 1px rgba(255,244,205,.72),0 2px 3px rgba(56,31,10,.18);
}
.su-daily-quest .su-parchment__date span{
 color:#65472b;font-size:13px;font-weight:400;line-height:1.1;
}
.su-daily-quest .su-limited{
 font-family:var(--display-serif);font-size:10px;font-variant:small-caps;
 letter-spacing:.11em;text-transform:none;
}

/*
 * LIMITED QUEST ART — selected weathered scroll-tab option.
 * The live span remains in the DOM for accessibility. The artwork is the
 * permanent quest-panel banner, including days without an active quest.
 */
.su-daily-quest .su-limited.su-limited--art{
 width:196px;
 min-width:196px;
 height:65px;
 padding:0;
 border:0;
 background:transparent url("limited-quest-banner-choice-04-scroll-tab.png") center/contain no-repeat;
 color:transparent;
 font-size:0;
 letter-spacing:0;
 text-shadow:none;
 box-shadow:none;
 overflow:hidden;
 white-space:nowrap;
}

/*
 * LOGIN REFERENCE GEOMETRY
 * On wide desktop screens the command deck has a deliberate empty track for
 * the in-world Brightstone sign: Atlas | quest | sign gap | login. Removing
 * the Atlas's old -80px visual offset closes the unintended Atlas/quest gap.
 */
@media(min-width:1181px){
 .su-command-deck{
  left:0;
  right:0;
  grid-template-columns:520px clamp(300px,19vw,320px) minmax(0,1fr) 405px;
  column-gap:16px;
 }
 .su-atlas{transform:none}
 .su-center-stack{grid-column:2;width:100%;min-width:0;justify-self:start;transform:translateY(-50px)}
 .su-login{
  position:absolute;
  right:0;
  bottom:-12px;
  width:405px;
  min-width:0;
 }
 .su-daily-quest{width:100%;height:350px;min-height:350px}
 .su-daily-quest .su-limited.su-limited--art{
  left:50%;right:auto;top:47px;
  transform:translateX(-50%);
 }
}

@media(max-width:760px){
 .su-daily-quest .su-limited.su-limited--art{
  width:176px;min-width:176px;height:59px;
  left:50%;right:auto;top:48px;
  transform:translateX(-50%);
 }
}

/*
 * WEB EDGE ANCHORS
 * The web deck spans the viewport itself. The Atlas occupies its left edge
 * and the login panel occupies its right edge without guessed pixel offsets.
 * Native app screens use their own compact, tabbed layout farther below.
 */
.su-landing:not(.su-native-app) .su-command-deck{
 width:100vw;
 max-width:none;
 margin-left:0;
 margin-right:0;
 transform:none !important;
}
.su-landing:not(.su-native-app) .su-atlas{
 position:relative;
 left:0 !important;
 justify-self:start;
 transform:none !important;
}
.su-landing:not(.su-native-app) .su-login{
 justify-self:end;
 transform:none !important;
}
@media(min-width:1181px){
 .su-landing:not(.su-native-app) .su-center-stack{
  transform:translateY(-50px) !important;
 }
}

/* Final desktop-web viewport anchors. These panels intentionally bypass the
   centered command-deck width so their frame edges are true screen edges. */
@media(min-width:1181px){
 .su-landing:not(.su-native-app) .su-site-footer{
  left:0;
  right:0;
  bottom:10px;
  width:auto;
  height:78px;
 }
 .su-landing:not(.su-native-app) .su-site-footer .su-dispatch{
  flex:0 0 35%;
  width:35%;
 }
 .su-landing:not(.su-native-app) .su-site-footer .su-quick-nav>a,
 .su-landing:not(.su-native-app) .su-site-footer .su-quick-nav>button{
  font-family:Georgia,"Times New Roman",serif;
  font-size:15px;
  font-variant:small-caps;
  font-weight:400;
  letter-spacing:.035em;
  text-transform:none;
  padding-top:10px;
  padding-bottom:8px;
 }
 .su-landing:not(.su-native-app) .su-site-footer .su-dispatch{
  gap:12px;
  padding-top:2px;
  padding-bottom:2px;
  text-align:center;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:0;
  border-image:none;
  background:#070908;
  box-shadow:none;
 }
 .su-landing:not(.su-native-app) .su-site-footer .su-dispatch:before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  background-image:url("dispatch-frame-pointed-split-v2-transparent.png");
  background-repeat:no-repeat;
  background-size:107.7% 176%;
  background-position:-8px -18px;
  pointer-events:none;
 }
 .su-landing:not(.su-native-app) .su-site-footer .su-dispatch:after{
  content:"";
  position:absolute;
  z-index:-1;
  left:8.4%;right:3.1%;top:16%;bottom:16%;
  background:
   linear-gradient(90deg,#080a09 0 32.6%,transparent 33.1% 34.5%,#080a09 35% 100%),
   linear-gradient(180deg,rgba(12,15,12,.98),rgba(4,6,5,.995)),
   url("forged-panel-texture-v2.png") center/300px 300px repeat;
  box-shadow:inset 0 0 18px #000b;
  pointer-events:none;
 }
 .su-landing:not(.su-native-app) .su-site-footer .su-dispatch>div{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
 }
 .su-landing:not(.su-native-app) .su-site-footer .su-dispatch>div+div{
  padding-left:0;
 }
 .su-landing:not(.su-native-app) .su-site-footer .su-dispatch,
 .su-landing:not(.su-native-app) .su-site-footer .su-dispatch small,
 .su-landing:not(.su-native-app) .su-site-footer .su-dispatch article h3{
  font-family:Georgia,"Times New Roman",serif;
 }
 .su-landing:not(.su-native-app) .su-site-footer .su-dispatch small{
  font-size:11px;
  font-variant:small-caps;
  font-weight:400;
  letter-spacing:.055em;
  text-transform:none;
 }
 .su-landing:not(.su-native-app) .su-site-footer .su-dispatch article h3{
  font-size:11px;
  font-weight:400;
  letter-spacing:.01em;
  margin:1px auto 0;
  text-align:center;
 }
 .su-landing:not(.su-native-app) .su-atlas{
  position:fixed !important;
  z-index:21;
  left:30px !important;
  bottom:52px !important;
  width:520px;
  transform:none !important;
 }
 .su-landing:not(.su-native-app) .su-center-stack{
  position:fixed !important;
  z-index:8;
  left:566px !important;
  bottom:122px !important;
  width:318px !important;
  height:350px !important;
  transform:none !important;
 }
 .su-landing:not(.su-native-app) .su-login{
  position:fixed !important;
  z-index:8;
  right:30px !important;
  bottom:92px !important;
  width:405px;
  transform:none !important;
 }
 .su-landing:not(.su-native-app) .su-daily-quest{
  width:318px !important;
  height:350px !important;
  min-height:350px !important;
  padding:60px 38px 54px;
 }
 .su-landing:not(.su-native-app) .su-daily-quest .su-quest-icon{
  width:46px;height:46px;margin:20px auto 3px;font-size:22px;
 }
 .su-landing:not(.su-native-app) .su-daily-quest h2{
  margin:4px auto 3px;font-size:20px;line-height:1.04;
 }
 .su-landing:not(.su-native-app) .su-daily-quest>p{
  margin:3px auto;font-size:11px;line-height:1.18;
 }
 .su-landing:not(.su-native-app) .su-daily-quest .su-countdown{
  margin:5px auto 3px;padding:3px 0;
 }
 .su-landing:not(.su-native-app) .su-daily-quest .su-parchment__warning{
  margin:2px auto;font-size:10px;line-height:1.1;
 }
 .su-landing:not(.su-native-app) .su-daily-quest .su-parchment__foot{
  left:34px;right:34px;bottom:15px;padding-top:5px;font-size:9px;line-height:1.1;
 }
}
.su-daily-quest h2{
 max-width:260px;color:#382617;font-family:var(--display-serif);
 font-size:21px;font-variant:normal;font-weight:400;line-height:1.08;letter-spacing:0;
 text-transform:none;
}
.su-daily-quest>p{
 color:#493421;font-family:Georgia,"Times New Roman",serif;
 font-size:12px;font-weight:400;line-height:1.28;letter-spacing:0;
 text-transform:none;
}
.su-daily-quest .su-countdown{font-family:Georgia,"Times New Roman",serif}
.su-daily-quest .su-countdown small{
 margin-right:4px;color:#8a3829;font-size:14px;letter-spacing:0;text-transform:none;
}
.su-daily-quest .su-countdown strong{
 color:#8a3829;font-size:15px;font-weight:400;letter-spacing:.045em;
}
.su-daily-quest .su-parchment__warning{color:#893a2c;font-size:12px;font-weight:700}
.su-daily-quest .su-parchment__foot{
 color:#5a4631;font-family:Georgia,"Times New Roman",serif;
 font-size:10px;font-style:normal;line-height:1.2;
}

/* ========================================================================== 
   NATIVE MOBILE LAUNCHER
   --------------------------------------------------------------------------
   The installed Capacitor app uses a true one-screen launcher rather than a
   squeezed desktop page. The four views share the existing live DOM and APIs,
   so Atlas, Quest, account, and realm data stay current without page scrolling.

   ADDING A VIEW: add its button to #SuMobileAppNav, add the view name to
   setMobileView() in landing.js, then expose the corresponding panel below.
   Ordinary web/mobile-browser layouts are unaffected because every override
   is scoped under .su-native-app / .su-native-app-shell.
   ========================================================================== */
.su-mobile-app-nav{display:none}
html.su-native-app-shell,body.su-native-app-shell{
 width:100%;height:100%;min-height:0;overflow:hidden;overscroll-behavior:none;
}
.su-landing.su-native-app{
 position:relative;width:100%;height:100dvh;min-height:100dvh;max-height:100dvh;
 padding:0;overflow:hidden;background-position:center;background-size:cover;
}
.su-native-app .su-landing__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,5,5,.1),rgba(2,3,3,.58) 42%,rgba(2,3,3,.9))}
.su-native-app .su-brand-hero{
 position:absolute;z-index:5;left:50%;top:max(6px,env(safe-area-inset-top));
 width:calc(100% - 28px);height:112px;min-height:0;margin:0;transform:translateX(-50%);
 display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;
}
.su-native-app .su-brand-hero__mark{position:static;width:auto;height:73px;transform:none}
.su-native-app .su-brand-hero__mark img{display:block;width:auto;height:73px;max-width:90vw;object-fit:contain}
.su-native-app .su-brand-hero__tools,.su-native-app .su-partner-build{display:none}
.su-native-app .su-brand-hero__tagline{margin:-2px 0 0;font-size:12px;line-height:1.1;letter-spacing:.14em}
.su-native-app .su-brand-hero__copy{margin:3px 0 0;font-size:9px;line-height:1.15;white-space:nowrap}

/* The command stage holds one selected full-height panel at a time. */
.su-native-app .su-command-deck{
 position:absolute;z-index:6;left:10px;right:10px;top:116px;bottom:68px;
 width:auto;height:auto;min-height:0;margin:0;display:block;transform:none;
}
.su-native-app .su-command-deck>.su-atlas,
.su-native-app .su-command-deck>.su-center-stack,
.su-native-app .su-command-deck>.su-login{
 display:none;position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;
 margin:0;transform:none;overflow:hidden;
}
.su-native-app.su-mobile-view-account .su-command-deck>.su-login{display:flex}
.su-native-app.su-mobile-view-atlas .su-command-deck>.su-atlas{display:flex}
.su-native-app.su-mobile-view-quest .su-command-deck>.su-center-stack{display:flex}

/* Account view: all account/security actions fit above the persistent dock. */
.su-native-app .su-login{
 padding:20px 20px 13px;border-width:10px;border-image-width:10px;
 flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;
}
.su-native-app .su-login-platform{position:static;margin:0;font-size:10px;min-height:18px}
.su-native-app .su-steam-mark{width:18px;height:18px;font-size:10px}
.su-native-app .su-identity{width:100%;min-height:54px;margin:0;padding:5px 8px;gap:8px}
.su-native-app .su-identity__icon{width:38px;height:38px;font-size:18px}
.su-native-app .su-identity__copy strong{font-size:17px;line-height:1.05}
.su-native-app .su-identity__copy span{font-size:8px}
.su-native-app .su-security-shield{font-size:18px}
.su-native-app .su-session-action{font-size:9px}
.su-native-app .su-login__intro{margin:0;padding:2px 0}
.su-native-app .su-login__intro .su-ornament{display:none}
.su-native-app .su-login__intro h2{margin:0;font-size:18px}
.su-native-app .su-login__intro p{max-width:310px;margin:3px auto 0;font-size:9px;line-height:1.25}
.su-native-app .su-alert{margin:0;padding:4px 8px;font-size:9px}
.su-native-app .su-play{width:100%;min-height:58px;margin:2px 0;padding:8px 16px}
.su-native-app .su-play span{font-size:25px}
.su-native-app .su-play small{font-size:8px}
.su-native-app .su-login__separator{width:100%;margin:0;font-size:8px}
.su-native-app .su-secondary{width:100%;min-height:34px;padding:5px 10px;font-size:10px}
.su-native-app .su-legacy-toggle{font-size:9px}
.su-native-app .su-world-pulse{width:100%;margin:1px 0;padding:4px 8px;font-size:8px}
.su-native-app .su-legal{margin:0;font-size:7px;line-height:1.15}
.su-native-app .su-security-footer{width:100%;margin:0;padding:4px 7px;gap:6px}
.su-native-app .su-security-footer>span{font-size:12px}
.su-native-app .su-security-footer p,.su-native-app .su-security-footer strong,.su-native-app .su-security-footer p span{font-size:7px;line-height:1.1}

/* Atlas view: the same real settlement records, compressed into launcher cards. */
.su-native-app .su-atlas{
 padding:17px 18px 13px;border-width:10px;border-image-width:10px;
 flex-direction:column;
}
.su-native-app .su-atlas .su-panel__heading{min-height:38px;margin:0 0 4px;padding:2px 0 5px}
.su-native-app .su-atlas .su-panel__heading small{font-size:7px}
.su-native-app .su-atlas .su-panel__heading h2{font-size:20px;line-height:1}
.su-native-app .su-atlas .su-panel__icon{font-size:14px}
.su-native-app .su-atlas .su-panel__intro{margin:0 0 5px;font-size:8px;line-height:1.2}
.su-native-app .su-town-list{flex:1;min-height:0;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:4px;overflow:hidden}
.su-native-app .su-town{min-height:0;padding:5px 7px 4px 74px;background-size:63px 100%;overflow:hidden}
.su-native-app .su-town__title h3{font-size:13px;line-height:1}
.su-native-app .su-town__seal{font-size:13px}
.su-native-app .su-town__restoration{font-size:10px;line-height:1}
.su-native-app .su-town p,.su-native-app .su-town dl,.su-native-app .su-town dl div{font-size:7px;line-height:1.08}
.su-native-app .su-town__locked,.su-native-app .su-town__directive{font-size:6px;line-height:1}
.su-native-app .su-atlas__button{flex:0 0 38px;min-height:38px;margin:6px 0 0;padding:7px;font-size:13px}

/* Quest view preserves the parchment artwork and live countdown at phone scale. */
.su-native-app .su-center-stack{align-items:center;justify-content:center;padding:0}
.su-native-app .su-daily-quest{
 position:relative;width:min(100%,350px);height:min(100%,400px);min-height:0;align-self:center;
 padding:66px 34px 25px;border-width:14px;border-image-width:14px;overflow:hidden;
}
.su-native-app .su-daily-quest .su-parchment__date{top:20px}
.su-native-app .su-daily-quest .su-limited.su-limited--art{top:43px;width:160px;min-width:160px;height:52px}
.su-native-app .su-daily-quest .su-quest-icon{margin-top:20px;font-size:22px}
.su-native-app .su-daily-quest h2{margin:7px auto 4px;font-size:20px}
.su-native-app .su-daily-quest>p{font-size:11px}

/* World view reuses every footer link and live dispatch item as a phone hub. */
.su-native-app .su-site-footer{display:none}
.su-native-app.su-mobile-view-world .su-site-footer{
 display:flex;position:absolute;z-index:6;left:10px;right:10px;top:116px;bottom:68px;
 width:auto;height:auto;margin:0;padding:15px;border-width:10px;border-image-width:10px;
 flex-direction:column;background:linear-gradient(rgba(9,11,9,.95),rgba(3,5,4,.99)),url("forged-panel-texture-v2.png") center/300px repeat;
 overflow:hidden;
}
.su-native-app .su-site-footer .su-quick-nav{order:2;display:grid;grid-template-columns:repeat(2,1fr);gap:6px;overflow:visible;min-height:0;padding:0}
.su-native-app .su-site-footer .su-quick-nav>a,.su-native-app .su-site-footer .su-quick-nav>button{
 min-width:0;min-height:39px;padding:7px 5px;border:1px solid #594421;flex:initial;font-size:9px;
 background:linear-gradient(180deg,rgba(69,54,32,.45),rgba(7,8,6,.75));
}
.su-native-app .su-site-footer .su-quick-nav .is-active:before,.su-native-app .su-site-footer .su-quick-nav .is-active:after{display:none}
.su-native-app .su-site-footer .su-dispatch{
 order:1;width:100%;min-height:0;flex:1 1 auto;margin:0 0 8px;padding:9px;
 display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:7px;border-width:6px;border-image-width:6px;
}
.su-native-app .su-site-footer .su-dispatch>div+div{padding:7px 0 0;border-left:0;border-top:1px solid #4b3c26}
.su-native-app .su-site-footer .su-dispatch ol{display:block;margin:5px 0 0;padding-left:18px;font-size:9px}
.su-native-app .su-site-footer .su-dispatch article:not(:first-child){display:block}
.su-native-app .su-site-footer .su-dispatch article h3{max-width:none;font-size:10px}
.su-native-app .su-site-footer .su-more-menu{position:absolute;left:14px;right:14px;bottom:72px;z-index:40}

/* Reference-matched shared online/dispatch bar: one low cracked bezel with
   inset panel bands, articulated corners, a framed divider, and end icons. */
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch{
 overflow:hidden;gap:0;padding:0 9px;
 border-width:9px;border-image-width:9px;
 background:linear-gradient(180deg,rgba(15,16,13,.97),rgba(3,5,4,.995)),url("forged-panel-texture-v2.png") center/300px repeat;
 box-shadow:0 0 0 1px #070806,0 0 0 2px #332719,inset 0 1px #5a4528,inset 0 -1px #4a3821,inset 0 0 0 3px #090a08,inset 0 0 18px #000;
}
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch>div{position:relative;min-width:0;height:100%}
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch>.su-dispatch-online{
 display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;padding:0 13px;
 background:linear-gradient(90deg,#070907e8,#0e100de8 48%,#070806e8);
 box-shadow:inset 0 0 0 1px #2f2518,inset 0 0 12px #000;
}
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch-people{display:block;flex:0 0 25px;width:25px;height:24px;color:#977545;filter:drop-shadow(0 1px #000)}
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch-people svg,.su-landing:not(.su-native-app) .su-site-footer .su-dispatch-scroll svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch-online small{color:#8fc763;white-space:nowrap;text-shadow:0 0 6px #547d3738}
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch-online.is-offline small{color:#b6534a;text-shadow:0 0 6px #7d322d38}
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch>.su-dispatch-latest{
 display:flex;flex-direction:row;align-items:center;justify-content:center;padding:0 43px 0 18px;
 border-left:3px double #4a3821;box-shadow:-1px 0 #050605,inset 1px 0 #0b0c09;
 background:linear-gradient(90deg,#090b09e8,#0e100de8 54%,#060806e8);
}
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch-copy{min-width:0;text-align:center}
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch-scroll{position:absolute;right:10px;top:50%;width:23px;height:27px;transform:translateY(-50%);color:#967443;filter:drop-shadow(0 1px #000)}
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch-scroll:before{content:"";position:absolute;inset:-5px -6px;border-left:1px solid #302416;border-right:1px solid #302416;box-shadow:inset 1px 0 #090a08,inset -1px 0 #090a08}
@media(max-width:760px){
 .su-landing:not(.su-native-app) .su-site-footer .su-dispatch{padding-inline:6px;border-width:8px;border-image-width:8px}
 .su-landing:not(.su-native-app) .su-site-footer .su-dispatch-online{gap:6px;padding-inline:7px}
 .su-landing:not(.su-native-app) .su-site-footer .su-dispatch-people{flex-basis:20px;width:20px;height:20px}
 .su-landing:not(.su-native-app) .su-site-footer .su-dispatch-latest{padding:0 32px 0 9px}
 .su-landing:not(.su-native-app) .su-site-footer .su-dispatch-scroll{right:5px;width:19px;height:23px}
}

/* Supplied pointed black-stone frame replaces the legacy dispatch bezel. */
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch{
 position:relative;isolation:isolate;overflow:hidden;
 padding:2px 9px;border:0;outline:0;border-image:none;
 background:#070908;box-shadow:none;
 grid-template-columns:38% 62%;
 height:78px;
 align-self:center;
}
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch:before{z-index:0}
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch:after{z-index:1}
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch>div{
 z-index:2;background:transparent;box-shadow:none;
}
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch>.su-dispatch-online{
 justify-content:flex-start;
 gap:9px;
 padding-left:48px;
}
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch>.su-dispatch-latest{
 justify-content:flex-start;
 padding:0 58px 0 22px;
 border-left:0;box-shadow:none;background:transparent;
 text-align:left;
}
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch-copy{
 width:100%;text-align:left;
}
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch-copy small,
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch-copy article h3{
 text-align:left;margin-left:0;margin-right:0;
}
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch-people{
 flex-basis:29px;width:29px;height:28px;
}
.su-landing:not(.su-native-app) .su-site-footer .su-dispatch-scroll{
 right:14px;width:34px;height:38px;
}

/* Fixed thumb-friendly dock. Safe-area padding keeps it above Android gestures. */
.su-native-app .su-mobile-app-nav{
 display:grid;position:absolute;z-index:30;left:0;right:0;bottom:0;height:64px;
 grid-template-columns:repeat(4,1fr);padding:3px 7px max(4px,env(safe-area-inset-bottom));
 border-top:1px solid #89652d;background:linear-gradient(180deg,rgba(22,22,18,.98),rgba(3,5,4,.995));
 box-shadow:0 -8px 24px #000b;
}
.su-native-app .su-mobile-app-nav button{
 position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
 border:0;border-right:1px solid #302b20;background:transparent;color:#8e846f;
 font-family:Georgia,"Times New Roman",serif;text-transform:uppercase;
}
.su-native-app .su-mobile-app-nav button:last-child{border-right:0}
.su-native-app .su-mobile-app-nav button span{font-size:18px;line-height:1}
.su-native-app .su-mobile-app-nav button strong{font-size:8px;letter-spacing:.11em}
.su-native-app .su-mobile-app-nav button.is-active{color:#e2be70;text-shadow:0 0 8px #c28c31}
.su-native-app .su-mobile-app-nav button.is-active:after{content:"";position:absolute;left:25%;right:25%;bottom:1px;height:2px;background:#d8a848;box-shadow:0 0 8px #e0aa43}

/* Short phones trade a little brand height for usable content space. */
@media(max-height:700px){
 .su-native-app .su-brand-hero{height:91px}
 .su-native-app .su-brand-hero__mark,.su-native-app .su-brand-hero__mark img{height:58px}
 .su-native-app .su-command-deck,.su-native-app.su-mobile-view-world .su-site-footer{top:94px}
 .su-native-app .su-login{padding-top:12px;padding-bottom:9px;gap:2px}
 .su-native-app .su-login__intro p,.su-native-app .su-legal{display:none}
}

/* Provider onboarding uses the same forged modal on web and Android. */
.su-username-dialog .su-link-dialog__surface{display:flex;flex-direction:column;gap:10px}
.su-username-dialog label{color:#d9bf83;font:700 13px Georgia,"Times New Roman",serif;letter-spacing:.04em}
.su-username-dialog input{width:100%;min-height:48px;padding:10px 12px;border:1px solid #8d692f;border-radius:3px;background:#070a08;color:#f3dfad;font:700 18px Georgia,"Times New Roman",serif;outline:0;box-shadow:inset 0 0 12px #000}
.su-username-dialog input:focus{border-color:#e0b85d;box-shadow:0 0 0 2px #d29b363d,inset 0 0 12px #000}
.su-username-dialog small{color:#aa9b7c;font-size:11px;line-height:1.3}
.su-username-error{min-height:18px;margin:0;color:#ef8878;font-size:12px}
.su-needs-username .su-mobile-app-nav{pointer-events:none;filter:brightness(.45)}

/* Portrait keeps the focused one-panel stack above the bottom launcher dock. */
.su-native-app.su-native-portrait .su-link-dialog__surface{width:min(92vw,430px);max-height:calc(100dvh - 28px);overflow:auto;padding:24px 20px}

/* Landscape is a deliberate wide launcher: compact brand rail on the left,
   active live panel on the right, and the same persistent dock below. */
.su-native-app.su-native-landscape .su-brand-hero{
 left:max(14px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));
 width:230px;height:calc(100dvh - 70px);transform:none;justify-content:center;padding:10px;
}
.su-native-app.su-native-landscape .su-brand-hero__mark,.su-native-app.su-native-landscape .su-brand-hero__mark img{height:auto;max-height:92px;max-width:220px}
.su-native-app.su-native-landscape .su-brand-hero__tagline{margin:10px 0 0;font-size:11px;white-space:normal}
.su-native-app.su-native-landscape .su-brand-hero__copy{max-width:210px;margin:7px auto 0;font-size:9px;line-height:1.35;white-space:normal}
.su-native-app.su-native-landscape .su-command-deck,
.su-native-app.su-native-landscape.su-mobile-view-world .su-site-footer{
 left:250px;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));bottom:58px;
}
.su-native-app.su-native-landscape .su-login{padding:12px 22px;gap:3px}
.su-native-app.su-native-landscape .su-login__intro p{max-width:500px}
.su-native-app.su-native-landscape .su-play{min-height:48px}
.su-native-app.su-native-landscape .su-play span{font-size:21px}
.su-native-app.su-native-landscape .su-atlas{padding:13px 18px 10px}
.su-native-app.su-native-landscape .su-town-list{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}
.su-native-app.su-native-landscape .su-town{padding:8px 8px 6px;background-image:none}
.su-native-app.su-native-landscape .su-center-stack{align-items:center}
.su-native-app.su-native-landscape .su-daily-quest{width:min(100%,520px);height:100%;padding-top:58px}
.su-native-app.su-native-landscape .su-mobile-app-nav{height:52px;padding-left:max(250px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
.su-native-app.su-native-landscape .su-mobile-app-nav button{flex-direction:row;gap:7px}
.su-native-app.su-native-landscape .su-mobile-app-nav button span{font-size:15px}
.su-native-app.su-native-landscape .su-link-dialog__surface{width:min(620px,88vw);max-height:calc(100dvh - 20px);overflow:auto;padding:18px 24px}
.su-web-login-form{display:grid;gap:7px;margin:0 22px 14px;padding:15px;border:1px solid #4e3d28;background:linear-gradient(180deg,#171410e8,#0b0b09f2);box-shadow:inset 0 0 22px #0008}.su-web-login-form label{color:#d7bb82;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.su-web-login-form input{box-sizing:border-box;width:100%;min-width:0;padding:11px 12px;border:1px solid #76552e;outline:0;background:#090807;color:#fff;font-size:14px;box-shadow:inset 0 2px 8px #000}.su-web-login-form input:focus{border-color:#e1b85f;box-shadow:0 0 0 2px #8e642d55,inset 0 2px 8px #000}.su-web-login-form input::placeholder{color:#6f685c}.su-web-login-form .su-play{width:calc(100% - 8px);margin:12px 4px 2px}.su-web-login-form .su-play span{font-size:21px}
.su-web-entry-actions{display:grid;gap:14px;margin:30px 22px 18px}.su-web-entry-actions .su-play{width:calc(100% - 8px);margin:0 4px}.su-web-entry-actions .su-web-account-toggle{width:calc(100% - 28px);margin:0 14px}.su-web-login-back{padding:7px;border:0;background:none;color:#b89a62;text-decoration:underline;cursor:pointer}.su-web-password-help{color:#c8ad76;text-align:center;font-size:11px}
.su-web-entry-actions[hidden],.su-web-login-form[hidden]{display:none!important}
.su-landing[data-entry-platform="web"] .su-web-forgot-bottom{position:absolute;z-index:4;left:24px;right:24px;bottom:13px;color:#c8ad76;font-size:11px;text-align:center;text-decoration:underline}
@media(min-width:1181px){.su-landing[data-entry-platform="web"]:not(.su-native-app) .su-login .su-security-footer{bottom:42px}}