@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');
:root{--gold:#d1a158;--pale:#f1cc84;--ink:#292628;--dark:#262326;--red:#902c25;--line:#916c3e;--green:#427d2a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:300px;overflow-x:hidden;color:#eee3d6;background:#282528;font-family:Cairo,Tahoma,Arial,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid #fff0a6;outline-offset:4px}
[hidden]{display:none!important}
.site-header{position:relative;z-index:50;height:80px;background:linear-gradient(#424241,#242628);border-bottom:3px solid #232221;box-shadow:0 3px 11px #0007}
.header-inner{position:relative;height:100%;max-width:1600px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 2.1%}
.brand{position:absolute;inset-inline:0;margin:auto;width:max-content;display:flex;align-items:center;gap:11px;direction:ltr;color:white;white-space:nowrap}
.crest{width:40px;height:57px;display:grid;place-items:center;font:900 33px Georgia,serif;color:#f6d27d;background:linear-gradient(135deg,#de6744 1%,#8d2d2a 56%,#511b22);border:2px solid #e7cb98;border-radius:6px 6px 13px 13px;box-shadow:0 0 0 2px #2b2929,0 4px 8px #0007;text-shadow:1px 2px 2px #301413}
.crest:after{content:'◆';position:absolute;top:4px;transform:translateY(-13px);font:18px Georgia,serif;color:#e4b753}
.brand-text{line-height:.94;letter-spacing:2px;font:33px Georgia,'Times New Roman',serif;text-shadow:0 2px 6px #0007}
.brand-text small{display:block;font:700 11px Cairo,sans-serif;letter-spacing:5px;text-align:center;margin-top:5px;color:#f2dcb9}
.header-start{order:2;display:flex;align-items:center;gap:20px}
.header-end{order:1;display:flex;align-items:center;gap:16px}
.bordered-pill{height:36px;border:1px solid #cda159;border-radius:99px;color:#d7b16e;background:#2426289e;padding:0 14px;display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;box-shadow:inset 0 1px 0 #fff1}
.bordered-pill:hover{background:#514336;color:#fff1c9}
.flag{font-size:19px;line-height:1}
.menu-trigger{padding:8px;border:0;color:var(--gold);background:transparent;display:grid;gap:5px}
.menu-trigger span{width:27px;height:3px;background:linear-gradient(90deg,#eac375,#b07a3e);display:block;border-radius:2px}
.menu-trigger:hover span{background:#fce2ad}
.nav-panel{position:absolute;left:20px;right:auto;top:75px;width:min(330px,calc(100% - 40px));padding:12px;background:#252327;border:1px solid var(--gold);box-shadow:0 15px 40px #000b}
.nav-panel a,.nav-panel button{display:block;width:100%;padding:13px 16px;color:#eadbbf;text-align:right;background:transparent;border:0;border-bottom:1px solid #574732}
.nav-panel a:hover,.nav-panel button:hover{background:#40352e}
.hero-stage{position:relative;isolation:isolate;min-height:755px;background:#334455 url('battlefield.svg') center 43%/cover no-repeat;overflow:hidden}
.hero-stage:before{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,#68b9e61a 0%,transparent 48%,#5410164d 100%),linear-gradient(180deg,transparent 48%,#200e15a8 100%)}
.hero-stage:after{content:'';position:absolute;inset:auto 0 0;height:11%;z-index:1;background:linear-gradient(transparent,#1b141aa3)}
.hero-content{position:relative;z-index:4;max-width:1560px;margin:auto;height:755px}
.hero-copy{position:absolute;top:28px;right:8.8%;text-align:right;width:min(480px,40%);text-shadow:0 2px 12px #170c16a6}
.hero-copy h1{font-family:Cairo,Tahoma,sans-serif;margin:0 0 5px;font-weight:900;color:#fff;font-size:clamp(58px,7vw,112px);line-height:1.38}
.hero-copy p{margin:0;line-height:1.62;font-size:14px;color:#fff8f2;font-weight:700;max-width:460px}
.warrior-wrap{position:absolute;bottom:-69px;left:49%;z-index:2;width:min(690px,58vw);height:715px;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 5px 18px #14070b85)}
.warrior{display:block;height:100%;width:100%;object-fit:contain;object-position:bottom center;transform-origin:bottom center;transition:filter .35s}
.hero-stage[data-slide='1'] .warrior{filter:hue-rotate(45deg) saturate(.85)}
.hero-stage[data-slide='2'] .warrior{filter:hue-rotate(155deg) saturate(.90)}
.hero-stage[data-slide='3'] .warrior{filter:hue-rotate(240deg) saturate(.86)}
.hero-stage[data-slide='4'] .warrior{filter:hue-rotate(330deg) saturate(1.16)}
.hero-stage[data-slide='5'] .warrior{filter:sepia(.3) saturate(1.2)}
.hero-arrow{position:absolute;z-index:8;top:49%;width:66px;height:66px;background:#23252b6c;border:1px solid #dca859;color:#e6b45e;box-shadow:inset 0 0 0 4px #342d29a0,0 0 0 2px #201b20;display:grid;place-items:center;border-radius:50%;font:48px/1 Georgia,serif;transition:background .15s,transform .15s}
.hero-arrow:hover{background:#614328bb;transform:scale(1.06)}
.hero-arrow.prev{left:2%}.hero-arrow.next{right:2%}
.dock{max-width:1560px;position:relative;z-index:10;margin:-6px auto 0;padding:0 2.1%;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,1.12fr) minmax(0,1fr);align-items:start;gap:12px;direction:ltr}
.wood-panel{border:4px double #a98551;outline:1px solid #58432b;background:linear-gradient(145deg,#333032e9,#252326f5);box-shadow:inset 0 0 0 3px #272021,0 4px 12px #0008;min-height:124px;position:relative;direction:rtl;padding:11px 14px}
.wood-panel:before,.wood-panel:after{content:'✧';position:absolute;top:-12px;color:#b58d52;font-size:24px;line-height:1}
.wood-panel:before{left:-6px}.wood-panel:after{right:-6px}
.wood-panel h2{font-size:15px;margin:0 0 8px;color:#d0a35b;font-weight:900}
.wood-panel p{font-size:11px;margin:2px 0;color:#efdfc8}
.wood-panel .meta{color:#c0ae99;font-size:10px}
.news-preview{display:flex;gap:12px;align-items:start;justify-content:space-between}
.news-art{width:112px;height:95px;flex:none;display:grid;place-items:center;background:linear-gradient(#9fb7b5,#527c79 48%,#776344 49%,#4c3c31);border:2px solid #b79660;box-shadow:inset 0 0 0 3px #302a29;font-size:48px}
.sub-panel-btn{display:block;margin:2px auto 0;color:#d5ac6c;border:1px solid #ac8041;outline:3px solid #262326;background:transparent;padding:5px 18px;min-width:180px;text-align:center;font-size:13px;font-weight:800}
.sub-panel-btn:hover{background:#48372e}
.next-server-details{display:flex;align-items:center;justify-content:space-between;margin-top:18px;gap:8px}
.next-server-details b{font-size:14px}
.server-figures{display:flex;align-items:end;gap:0;letter-spacing:-5px;font-size:30px}
.dock-column{min-width:0;direction:rtl}
.play-button{position:relative;margin-top:-9px;min-height:132px;width:100%;border-radius:13px;background:linear-gradient(165deg,#63b348,#35812a 32%,#205c1e 80%,#143e1d);border:9px ridge #758279;color:white;font-size:clamp(33px,4vw,57px);font-weight:900;text-shadow:0 3px 4px #153c15;box-shadow:inset 0 3px 8px #a8ec8375,inset 0 -14px 20px #102f19,0 7px 13px #080a0a;display:block;overflow:hidden}
.play-button:before{content:'';position:absolute;inset:6px 10px 50%;background:linear-gradient(#b1ec9678,transparent);border-radius:12px;pointer-events:none}
.play-button:hover{filter:brightness(1.12);transform:translateY(-2px)}
.play-button:active{transform:translateY(2px)}
.under-dock{min-height:98px}
.portal-worlds{max-width:1180px;margin:0 auto;padding:55px 24px 70px}
.section-title{text-align:center;font-size:29px;margin:0 0 10px;color:#e0bc79}
.section-lead{text-align:center;margin:0 0 27px;color:#c3b1a4;font-size:14px}
.world-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.world-card{border:1px solid #947042;background:linear-gradient(150deg,#393234,#252225);box-shadow:0 12px 28px #0004;padding:22px;min-width:0}
.world-top{display:flex;gap:18px;align-items:center}
.world-emblem{width:72px;height:72px;flex:none;display:grid;place-items:center;border:2px solid #cc9d5f;background:linear-gradient(135deg,#864328,#42222d);font-size:37px;border-radius:7px}
.world-card h3{font:800 25px Cairo,sans-serif;margin:0;color:#f4d49c}
.world-card .subtitle{font-size:13px;margin:3px 0;color:#cbb79c}
.world-card p{color:#d0c5ba;font-size:13px;line-height:1.8}
.world-badges{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 18px}
.world-badges span{border:1px solid #846a43;padding:4px 10px;color:#e0c79c;font-size:11px;border-radius:20px}
.world-actions{display:flex;gap:9px;flex-wrap:wrap}
.action-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #b98e4b;color:#ffe4a6;padding:9px 18px;font-weight:800;font-size:13px;min-width:110px}
.action-btn.primary{background:linear-gradient(#669d3b,#2d6322);border-color:#86b05a;color:white}
.action-btn:hover{filter:brightness(1.14)}
.bottom-footer{border-top:1px solid #584632;text-align:center;color:#a99780;padding:23px;font-size:12px;background:#221f22}
.bottom-footer a{color:#d0aa6e;margin:0 8px}
.modal-overlay{position:fixed;inset:0;z-index:150;background:#0b080acb;display:grid;place-items:center;padding:18px}
.modal{position:relative;background:linear-gradient(135deg,#403536,#242227);border:2px solid #c0985b;outline:3px solid #211a1d;max-height:calc(100vh - 40px);overflow-y:auto;width:min(680px,100%);box-shadow:0 30px 70px #000b;padding:24px}
.modal h2{margin:0 0 7px;color:#e7bf7f;font-size:27px}
.modal p{font-size:13px;color:#d2c5b6}
.modal-close{position:absolute;left:13px;top:9px;font-size:25px;border:0;background:transparent;color:#efd29b}
.modal-worlds{display:grid;gap:12px;margin-top:20px}
.modal-world{padding:18px;border:1px solid #856943;background:#302c2d}
.modal-world strong{font-size:20px;color:#eac689}
.modal-world p{margin:5px 0 13px}
.modal-world .world-actions{gap:7px}
.news-row{border-bottom:1px solid #665140;padding:13px 3px}
.news-row:last-child{border:0}
.news-row h3{margin:3px 0;color:#e4bc7f;font-size:19px}
.news-row strong{font-size:12px;color:#bdd3aa}
body.dialog-open{overflow:hidden}
@media(min-width:1250px){.hero-stage,.hero-content{height:min(760px,calc(100vw * .56));min-height:680px}.warrior-wrap{height:min(735px,calc(100vw * .53))}}
@media(max-width:920px){.brand-text{font-size:25px}.hero-stage{min-height:680px}.hero-content{height:680px}.hero-copy{right:10%;top:30px;width:60%}.hero-copy h1{font-size:68px}.warrior-wrap{width:650px;max-width:95vw;height:635px;bottom:-75px}.dock{grid-template-columns:1fr;gap:18px;max-width:650px;margin:-30px auto 0;padding:0 16px}.dock .dock-column:nth-child(2){order:-1}.dock-column{width:100%}.play-button{min-height:120px;font-size:50px}.wood-panel{min-height:auto}.under-dock{min-height:22px}}
@media(max-width:600px){.site-header{height:72px}.header-inner{padding:0 12px}.brand{gap:0}.brand-text{display:none}.crest{height:52px;width:36px;font-size:27px}.header-start{gap:0}.header-end{gap:0}.bordered-pill{width:46px;height:36px;padding:0;justify-content:center}.bordered-pill .text{display:none}.menu-trigger{display:grid}.hero-stage{min-height:550px}.hero-content{height:550px}.hero-copy{top:12px;right:20px;width:calc(100% - 40px);text-align:right}.hero-copy h1{font-size:clamp(51px,13vw,72px);line-height:1.32}.hero-copy p{font-size:12px;line-height:1.55;max-width:290px}.warrior-wrap{height:458px;width:500px;max-width:none;bottom:-35px;left:48%}.hero-arrow{top:47%;width:45px;height:45px;font-size:36px}.hero-arrow.prev{left:12px}.hero-arrow.next{right:12px}.dock{margin:-30px 0 0;padding:0 14px;gap:15px}.play-button{min-height:122px;border-width:7px;font-size:43px}.wood-panel{padding:10px 13px}.news-art{width:80px;height:85px;font-size:36px}.world-grid{grid-template-columns:1fr}.portal-worlds{padding:40px 16px}.section-title{font-size:26px}.world-card{padding:18px}.modal{padding:20px 15px}.next-server-details{margin-top:12px}}

/* Live world statistics: deliberate legibility at all breakpoints. */
.world-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0 19px}
.world-metric{border:1px solid #8b7049;background:linear-gradient(145deg,#25272b,#332b2a);padding:13px 14px;display:flex;flex-direction:column;gap:3px;min-height:106px}
.world-metric small{font-size:12px;color:#d8ba86;font-weight:700}
.world-metric strong{display:block;font-size:clamp(17px,1.8vw,23px);color:#fff3d4;font-weight:900;line-height:1.4}
.world-metric span{font-size:10px;color:#bba992}
.modal-stats{display:flex;gap:10px;flex-wrap:wrap;margin:7px 0 14px}
.modal-stats span{padding:5px 10px;border:1px solid #7c6242;background:#242428;font-size:12px;color:#d5bd90}
.modal-stats strong{color:#fff1cb}
@media(max-width:360px){.world-metrics{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.warrior{transition:none}}