:root{--green:#7fd33f;--green-dark:#2f6b25;--white:#f4f6f8;--muted:#c9d0d8;--card:#10151bd6;--card-line:#ffffff14}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#0b1018;color:var(--white);font-family:'Pixelify Sans',ui-monospace,monospace;font-size:18px;min-height:100vh}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* Background: the sharp Sarajevo sunset, darkened only where text sits (left column, top bar, bottom row) */
.backdrop{position:fixed;inset:0;z-index:-3;background:url('assets/main-bg.jpg') 62% 40% / cover no-repeat}
.ambient{position:fixed;inset:0;z-index:-2;pointer-events:none;background:
 linear-gradient(90deg,rgba(6,10,18,.82) 0%,rgba(6,10,18,.62) 26%,rgba(6,10,18,.18) 46%,transparent 60%),
 linear-gradient(180deg,rgba(5,8,14,.55) 0%,transparent 14%,transparent 62%,rgba(4,7,12,.55) 82%,rgba(3,6,10,.85) 100%),
 radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.35) 100%)}

.shell{width:min(1400px,92%);margin:auto;min-height:100vh;display:flex;flex-direction:column}
main{flex:1;display:flex;flex-direction:column}

/* Top bar */
.topbar{height:96px;display:flex;align-items:center;gap:56px}
.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}
.brand img{width:66px;height:72px;object-fit:contain;filter:drop-shadow(0 4px 6px #000a)}
.brand span{font-size:36px;font-weight:700;letter-spacing:-.5px;text-shadow:0 3px 0 #12161c,0 6px 14px #000a}
.brand b{color:var(--green)}
.topbar nav{display:flex;gap:40px}
.topbar nav a{font-size:15px;color:#e3e7ec;letter-spacing:1.5px;padding:12px 4px;border-bottom:2px solid transparent;text-shadow:0 2px 4px #000c}
.topbar nav a:hover,.topbar nav a.selected{color:var(--green);border-color:var(--green)}
.edition{margin-left:auto;font-size:15px;letter-spacing:1.5px;color:#d9dee4;white-space:nowrap;text-shadow:0 2px 4px #000c}
.edition b{color:#fff;font-weight:600}
.online-dot{display:inline-block;width:9px;height:9px;background:#6fe04a;box-shadow:0 0 10px #6fe04a;border-radius:50%;margin-right:10px;vertical-align:1px}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;flex:1;min-height:600px}
.hero-content{position:relative;z-index:2;padding:20px 0 30px;max-width:660px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;background:#0d1219c4;border:1px solid #ffffff2e;border-radius:3px;padding:7px 14px 7px 10px;color:#e6eaee;letter-spacing:1.5px;font-size:15px}
.eyebrow-icon{width:20px;height:20px;color:#c3cad2;border-right:1px solid #ffffff2e;padding-right:8px;box-sizing:content-box}
h1{font-family:'Press Start 2P',monospace;font-size:clamp(40px,5.4vw,82px);line-height:1;letter-spacing:-.06em;margin:26px 0 30px;white-space:nowrap}
/* Blocky 3D letters: textured fill clipped to the glyphs, extrusion from stacked drop-shadows */
h1 span{display:inline-block;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.04em}
.t-white{background-image:repeating-linear-gradient(90deg,#0000 0 .19em,#00000010 .19em .25em),linear-gradient(180deg,#ffffff 0%,#eef0f2 42%,#c9cdd1 50%,#e2e5e8 58%,#b9bec4 100%);
 filter:drop-shadow(0 .03em 0 #8d939a) drop-shadow(0 .03em 0 #6d737a) drop-shadow(.03em .03em 0 #3c4248) drop-shadow(.02em .03em 0 #1d2227) drop-shadow(0 .12em .12em #000a)}
.t-green{margin-left:.06em;background-image:repeating-linear-gradient(90deg,#0000 0 .19em,#00000014 .19em .25em),linear-gradient(180deg,#a6ef5a 0%,#86da3e 42%,#5fb52a 50%,#79cc36 58%,#4f9d22 100%);
 filter:drop-shadow(0 .03em 0 #3b7b1f) drop-shadow(0 .03em 0 #2b5d18) drop-shadow(.03em .03em 0 #1b3d10) drop-shadow(.02em .03em 0 #0e220a) drop-shadow(0 .12em .12em #000a)}
h2{font-family:'Press Start 2P',monospace;font-size:clamp(12px,1.35vw,20px);line-height:1.6;white-space:nowrap;margin:0 0 30px;text-shadow:0 3px 0 #000,0 4px 10px #000c;display:flex;align-items:center;gap:.9em}
h2 i{display:inline-block;flex-shrink:0;width:.38em;height:.38em;background:#e8ebee;box-shadow:0 2px 0 #000}
.hero-content p{font-size:19px;line-height:1.5;max-width:560px;color:#e1e6ec;text-shadow:0 2px 6px #000;margin:0 0 30px;letter-spacing:.3px}
.hero-content p strong{color:#fff}

/* Server address button */
.server-ip{width:min(512px,100%);cursor:pointer;display:flex;align-items:center;gap:20px;text-align:left;color:#fff;
 background:linear-gradient(180deg,#5aa337 0%,#468d2b 48%,#3a7a24 100%);border:2px solid #2a5a1b;border-radius:4px;
 box-shadow:inset 0 2px 0 #8fd35f,inset 0 -4px 0 #2a5e1b,0 4px 0 #13290c,0 14px 30px #000a;padding:12px 12px 12px 22px;transition:transform .15s,filter .15s}
.server-ip:hover{filter:brightness(1.1);transform:translateY(-2px)}
.grass-block{width:54px;height:54px;flex-shrink:0;filter:drop-shadow(0 3px 2px #0007)}
.ip-text{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}
.ip-text strong{font-size:clamp(20px,1.9vw,27px);letter-spacing:1px;white-space:nowrap;text-shadow:0 2px 0 #1d4512}
.ip-text small{color:#e6f6dc;font-size:16px;letter-spacing:.8px}
.copy-icon{display:grid;place-items:center;width:52px;height:52px;flex-shrink:0;background:#24521a;border:1px solid #6fae4a;border-radius:4px;box-shadow:inset 0 -3px 0 #173a10;color:#e8f6e0}
.copy-glyph{width:24px;height:24px}

/* Stone button */
.mc-btn{display:flex;align-items:center;justify-content:center;gap:18px;width:min(512px,100%);margin-top:20px;padding:19px 15px;font-family:'Press Start 2P',monospace;font-size:clamp(14px,1.35vw,20px);letter-spacing:.5px;color:#fff;text-shadow:0 3px 0 #2b2b2b;transition:transform .15s,filter .15s}
.mc-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.mc-btn.stone{border:2px solid #2b2d30;border-radius:4px;background:
 repeating-linear-gradient(90deg,#ffffff08 0 6px,#00000008 6px 12px),repeating-linear-gradient(0deg,#ffffff06 0 6px,#00000010 6px 12px),linear-gradient(180deg,#8c8e90,#6f7173 50%,#5d5f61);
 box-shadow:inset 0 2px 0 #b8babc,inset 0 -4px 0 #3d3f41,0 4px 0 #191a1b,0 14px 30px #0009}
.play-tri{width:0;height:0;border-style:solid;border-width:.6em 0 .6em .9em;border-color:transparent transparent transparent #fff;filter:drop-shadow(0 3px 0 #2b2b2b)}

/* 3D logo (rendered by voxel.js) */
.logo-area{width:100%;height:clamp(560px,68vh,760px);position:relative;cursor:grab;touch-action:pan-y;margin:-30px 0 -40px}
.logo-area:active{cursor:grabbing}
#voxel-canvas{display:block;width:100%;height:100%;filter:drop-shadow(0 30px 34px #0009)}
.scene-hint{position:absolute;right:8%;bottom:6%;color:#f1ead9b3;font-size:12px;letter-spacing:3px;text-shadow:0 2px 4px #000;pointer-events:none;opacity:0;transition:opacity .6s}
/* Loader shown until voxel.js has drawn its first frame; fades in after a short delay so fast loads never flash it. */
#voxel-canvas,.voxel-loader{transition:opacity .5s,visibility .5s}
#voxel-canvas{opacity:0}
.logo-area.ready #voxel-canvas,.logo-area.ready .scene-hint{opacity:1}
.logo-area.ready .voxel-loader{opacity:0;visibility:hidden}
.voxel-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;animation:vl-in .4s .3s both}
.vl-block{width:40px;height:40px;background:linear-gradient(#6abf3f 0 28%,#4c8f2b 28% 36%,#8b5a34 36% 70%,#74482a 70%);box-shadow:inset 4px 4px 0 #ffffff2e,inset -4px -4px 0 #00000040,0 0 0 3px #1c130b;animation:vl-hop .9s ease-in-out infinite}
.vl-shadow{width:44px;height:8px;margin-top:12px;border-radius:50%;background:#0008;animation:vl-shadow .9s ease-in-out infinite}
.voxel-loader small{position:relative;margin-top:20px;font-family:'Press Start 2P',monospace;font-size:10px;letter-spacing:3px;color:#f1ead9cc;text-shadow:0 2px 0 #000}
.voxel-loader small:after{content:'...';position:absolute;left:100%;width:0;overflow:hidden;white-space:nowrap;animation:vl-dots 1.2s steps(4) infinite}
@keyframes vl-in{from{opacity:0}}
@keyframes vl-hop{0%,100%{transform:translateY(0) scale(1.12,.88)}15%,85%{transform:translateY(-4px) scale(1)}50%{transform:translateY(-26px)}}
@keyframes vl-shadow{50%{transform:scale(.55);opacity:.5}}
@keyframes vl-dots{to{width:5.2em}}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;width:100%;margin-top:8px}
.stat{display:flex;align-items:center;gap:22px;padding:22px 24px;background:var(--card);border:1px solid var(--card-line);border-radius:4px;box-shadow:0 12px 30px #0008;backdrop-filter:blur(3px)}
.social-badge{display:grid;place-items:center;width:58px;height:58px;flex-shrink:0}
.social-badge .brand-icon{width:58px;height:58px}
.social-badge.discord{color:#5865f2}
.social-badge.youtube{color:#f03a2e}
.social-badge.tiktok{background:#000;border-radius:10px;color:#fff}
.social-badge.tiktok .brand-icon{width:38px;height:38px;filter:drop-shadow(-1.5px -1.5px 0 #25f4ee) drop-shadow(1.5px 1.5px 0 #fe2c55)}
.social-badge.players{color:#c4cad1}
.social-badge.players .brand-icon{width:48px;height:48px}
.stat strong{display:block;font-family:'Press Start 2P',monospace;font-size:clamp(14px,1.35vw,21px);margin-bottom:9px;white-space:nowrap}
.stat small{display:block;color:#cdd3da;font-size:16px;letter-spacing:.8px;white-space:nowrap}
.stat-note{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:14px;color:#c0c7cf;letter-spacing:.6px;white-space:nowrap}
.stat-note:before{content:'';width:9px;height:9px;border-radius:50%;background:#6fe04a}
.stat-note.youtube:before{background:#f03a2e}
.stat-note.tiktok:before{background:#25d8f4}
.demo-note{width:100%;text-align:right;font-size:12px;color:#c0c8d0b3;margin-top:8px;text-shadow:0 1px 2px #000}

/* Footer row */
.bottom{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:22px 0 30px;margin-top:auto}
.location{display:flex;gap:22px;align-items:center}
.pin{width:30px;height:30px;color:#c9cfd6;flex-shrink:0}
.location strong,.location small{display:block;letter-spacing:2px;text-shadow:0 2px 4px #000}
.location strong{font-size:15px;font-weight:500;margin-bottom:8px}
.location small{font-size:14px;color:#c4cbd3}
.location b{color:#e7f7d9;font-weight:500}
.social-links{display:flex;gap:12px}
.social-links a{display:grid;place-items:center;width:50px;height:50px;background:#12171dd9;border:1px solid #ffffff1f;border-radius:6px;box-shadow:0 6px 16px #0008;transition:filter .15s,transform .15s}
.social-links a:hover{filter:brightness(1.25);transform:translateY(-2px)}
.brand-icon{display:block;width:26px;height:26px}
.social-links a:nth-child(1){color:#8c96ff}
.social-links a:nth-child(2){color:#f03a2e}
.social-links a:nth-child(3){color:#fff;filter:drop-shadow(-1px -1px #25f4ee) drop-shadow(1px 1px #fe2c55)}
.social-links a:nth-child(4){color:#f77fbe}

.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:#264a2d;color:white;padding:12px 24px;border:2px solid #9cd876;opacity:0;pointer-events:none;z-index:10;transition:.22s}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:1180px){
 .topbar{gap:32px}.topbar nav{gap:24px}.edition{display:none}
 .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .logo-area{height:520px}
 .stats{gap:12px}.stat{padding:16px;gap:14px}.social-badge,.social-badge .brand-icon{width:44px;height:44px}.social-badge.players .brand-icon{width:38px;height:38px}
 .stat small{font-size:14px}.stat-note{font-size:12px}
}
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 .topbar{height:80px;gap:12px;justify-content:space-between}
 .brand img{width:46px;height:50px}.brand span{font-size:26px}
 .topbar nav{gap:14px}.topbar nav a{font-size:12px;letter-spacing:1px}
 .topbar nav a:nth-child(2),.topbar nav a:nth-child(3){display:none}
 .hero{display:flex;flex-direction:column;min-height:unset;align-items:stretch}
 .hero-content{padding:0}
 .logo-area{height:340px;order:-1;margin:0 0 -10px}
 .scene-hint{font-size:10px;right:4%;bottom:2%}
 .eyebrow{font-size:12px}
 h1{font-size:clamp(28px,9.2vw,54px);margin:18px 0 18px}
 h2{white-space:normal;flex-wrap:wrap;font-size:10px;gap:.7em;margin-bottom:18px}
 .hero-content p{font-size:17px;margin-bottom:22px}
 .server-ip{padding:9px 9px 9px 12px;gap:12px}.grass-block{width:42px;height:42px}.copy-icon{width:44px;height:44px}
 .ip-text strong{font-size:18px}.ip-text small{font-size:13px}
 .mc-btn{font-size:13px;padding:16px 10px}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px;gap:9px}
 .stat{padding:13px 11px;gap:10px}.social-badge,.social-badge .brand-icon{width:34px;height:34px}.social-badge.players .brand-icon{width:30px;height:30px}.social-badge.tiktok .brand-icon{width:24px;height:24px}
 .stat strong{font-size:12px;margin-bottom:6px}.stat small{font-size:12px;letter-spacing:.3px}.stat-note{font-size:11px;margin-top:5px}
 .demo-note{font-size:11px;text-align:center}
 .bottom{flex-direction:column;align-items:flex-start;gap:16px;padding:26px 0}
 .location{gap:12px}.location strong{font-size:12px;letter-spacing:1px}.location small{font-size:11px;letter-spacing:1px;line-height:1.5}
 .backdrop{background-position:58% center}
 .ambient{background:linear-gradient(180deg,rgba(5,8,14,.55),rgba(5,8,14,.2) 30%,rgba(5,8,14,.6) 55%,rgba(3,6,10,.92) 100%)}

}
@media(max-width:560px){
 .stats{grid-template-columns:1fr}
 .stat{padding:14px 18px;gap:16px}.social-badge,.social-badge .brand-icon{width:40px;height:40px}.social-badge.players .brand-icon{width:34px;height:34px}.social-badge.tiktok .brand-icon{width:26px;height:26px}
 .stat strong{font-size:15px}.stat small{font-size:14px}.stat-note{font-size:12px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Native modal: focus management, Escape key and screen reader support */
.mc-modal{max-width:min(560px,calc(100vw - 26px));width:100%;border:4px solid #8d938c;padding:0;color:#f3f6ef;background:#17232a;box-shadow:inset 0 0 0 3px #344650,0 9px 0 #0b0f12,0 28px 80px #000b;font-family:'Pixelify Sans',monospace}.mc-modal::backdrop{background:#030b12d9;backdrop-filter:blur(6px)}.modal-header{display:flex;align-items:center;gap:12px;background:#37443f;box-shadow:inset 0 3px #758576,inset 0 -4px #1a292c;border-bottom:3px solid #101b20;padding:13px 16px;font-family:'Press Start 2P',monospace;font-size:11px}.modal-gem{color:#9bea68}.modal-close{margin-left:auto;cursor:pointer;color:#fff;background:#89443c;border:2px solid #d18a76;box-shadow:inset 0 -3px #4d1c20;width:36px;height:34px;font-size:25px;line-height:1}.modal-close:hover{background:#ba5749}.modal-body{padding:28px 29px 29px}.modal-kicker{color:#8be575;letter-spacing:2px;font-size:13px}.modal-body h3{font-family:'Press Start 2P',monospace;font-size:clamp(17px,3vw,23px);line-height:1.6;margin:15px 0 20px}.modal-body h3 em{font-style:normal;color:#93db6b}.modal-body p{color:#c8d9df;line-height:1.4;font-size:18px;margin:0 0 19px}.quest-steps{list-style:none;padding:0;margin:18px 0 23px;display:grid;gap:10px}.quest-steps li{display:flex;gap:13px;align-items:center;background:#0c1920;border:1px solid #556a6673;padding:12px;font-size:17px}.step-no{font-family:'Press Start 2P';color:#a5e87d;font-size:12px}.modal-ip{width:100%;border:3px solid #94d672;background:linear-gradient(#447d36,#285e2e);padding:14px 12px;color:#fff;font-family:'Pixelify Sans';font-size:20px;display:flex;justify-content:space-between;gap:10px;cursor:pointer;box-shadow:inset 0 3px #a9db8b,inset 0 -4px #193c23}.modal-ip span:last-child{font-size:14px}.modal-body .modal-footnote{font-size:13px;color:#99aaa9;margin:17px 0 0}.crew-row{display:flex;align-items:center;gap:15px;background:#0e1c23;border-left:4px solid #8bd95b;padding:14px;margin-bottom:17px}.crew-icon{font-size:32px}.crew-row small{display:block;color:#afc1c2;letter-spacing:1px;font-size:12px}.crew-row strong{display:block;font-size:23px}.crew-row strong span{color:#86d968}.community-modal-links{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.community-modal-links a{padding:13px 6px;text-align:center;border:2px solid #738a83;background:#3c4b4b;font-family:'Press Start 2P';font-size:9px;box-shadow:inset 0 -3px #182626;line-height:1.9}.community-modal-links a span{color:#a4e973}.community-modal-links a:hover{background:#4c7052}
@media(max-width:760px){.modal-body{padding:23px 18px}.community-modal-links{grid-template-columns:1fr}}