@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=Russo+One&display=swap');:root{--bg:#08090d;--panel:#11131a;--text:#f5f5f7;--muted:#9499a6;--red:#ff3b30;--line:#ffffff16}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 75% 15%,#ff3b3022,transparent 30rem),var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.13;background-image:linear-gradient(#fff1 1px,transparent 1px),linear-gradient(90deg,#fff1 1px,transparent 1px);background-size:48px 48px}a{color:inherit;text-decoration:none}header{height:76px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;background:#08090dcc;backdrop-filter:blur(14px)}.logo,footer strong{font:800 18px Inter}.logo>b,footer i,h1 b,h2 b{color:var(--red);font-style:normal}nav{display:flex;gap:28px;font-size:13px;color:#b7bbc4}nav a:hover{color:white}.discord{border:1px solid var(--line);padding:10px 15px;border-radius:7px;font-size:12px;font-weight:700}.hero,section{max-width:1240px;margin:auto;padding:100px 5vw}.hero{min-height:650px;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}.hero small,section>small{color:var(--red);font-weight:800;letter-spacing:.15em;font-size:10px}h1,h2,h3{font-family:"Russo One",sans-serif}h1{font-size:clamp(70px,10vw,135px);line-height:.8;letter-spacing:-.06em;margin:20px 0}h2{font-size:clamp(34px,5vw,58px);margin:12px 0 35px}p{color:var(--muted);line-height:1.7;font-size:14px}.hero p{max-width:570px}.ip{margin:28px 0 18px;max-width:460px;border:1px solid var(--line);padding:14px;display:flex;gap:14px;align-items:center;border-radius:8px;background:#ffffff08}.ip label{font-size:8px;color:#737984;font-weight:800}.ip strong{flex:1;font-size:13px}.ip button{background:none;border:0;color:#aaa;cursor:pointer;font-size:20px}.btn{display:inline-block;background:var(--red);padding:14px 19px;border-radius:7px;font-size:12px;font-weight:800}.cube{width:250px;height:250px;justify-self:center;display:grid;place-items:center;background:linear-gradient(135deg,#9e1714,#ef4438);border:3px solid #ffffff22;box-shadow:0 0 100px #ff3b3030;transform:rotate(8deg);font:52px "Russo One";animation:float 4s ease-in-out infinite}.cube:after{content:"";position:absolute;inset:18px;border:2px solid #ffffff22}@keyframes float{50%{transform:rotate(12deg) translateY(-12px)}}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.grid article{min-height:210px;padding:25px;border:1px solid var(--line);border-radius:12px;background:#ffffff05;transition:.2s}.grid article:hover{transform:translateY(-4px);border-color:#ff3b3055}.grid i{font-style:normal;font-size:28px}.grid h3{font-size:21px;margin:22px 0 8px}.grid p{font-size:12px;margin:0 0 16px}.grid em{font-style:normal;font-size:8px;font-weight:900;color:#888;background:#ffffff0b;padding:6px 8px;border-radius:4px}.panel{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#ffffff05}.network{display:flex;align-items:center;gap:14px;padding:22px;border-bottom:1px solid var(--line)}.network>span{color:#777}.network div{flex:1}.network strong,.network small{display:block}.network small{color:var(--muted);font-size:11px;margin-top:4px}.network>b,.row b{font-size:9px;color:#777;letter-spacing:.1em}.row{display:grid;grid-template-columns:1fr 80px 90px;padding:17px 22px;border-bottom:1px solid var(--line);font-size:12px}.row:last-child{border:0}.row span:nth-child(2){color:#666}.row b{text-align:right}.rules{border:1px solid var(--line);border-radius:14px;padding:45px;background:linear-gradient(120deg,#ff3b301c,#ffffff05);display:grid;grid-template-columns:1fr 1fr;gap:50px}.rules p{border:1px solid var(--line);border-radius:8px;padding:14px}.rules p b{color:var(--red);margin-right:12px}footer{border-top:1px solid var(--line);padding:32px 5vw;display:flex;justify-content:space-between;color:#6f747e;font-size:10px}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,30px);opacity:0;background:white;color:#111;padding:11px 15px;border-radius:7px;font-size:11px;font-weight:800;transition:.25s}#toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:800px){nav{display:none}.hero{grid-template-columns:1fr;padding-top:70px}.cube{justify-self:start;width:190px;height:190px}.grid{grid-template-columns:1fr 1fr}.rules{grid-template-columns:1fr}}@media(max-width:520px){.hero,section{padding-left:20px;padding-right:20px}.grid{grid-template-columns:1fr}footer{flex-direction:column;gap:10px}.discord{display:none}}
.online-now{display:flex;align-items:center;gap:10px;width:min(100%,460px);margin:14px 0;padding:12px 14px;border:1px solid rgba(98,230,138,.18);border-radius:9px;background:rgba(98,230,138,.035)}.online-now>span{color:var(--green);font-size:12px;text-shadow:0 0 10px var(--green)}.online-now small{display:block;color:#6f7480;font-size:9px;font-weight:800;letter-spacing:.12em}.online-now strong{font-size:13px}.online-now strong span{color:var(--green)}

/* v5 extras */
.hero { position: relative; overflow: hidden; }
.hero::before { content:""; position:absolute; width:420px; height:420px; right:12%; top:8%; border:1px solid rgba(255,59,48,.13); border-radius:50%; box-shadow:0 0 0 55px rgba(255,59,48,.025),0 0 0 110px rgba(255,59,48,.018); pointer-events:none; }
.hero > * { position:relative; z-index:1; }
.online-now { margin: 16px 0 22px; display:flex; align-items:center; gap:12px; width:max-content; padding:11px 15px; border:1px solid rgba(98,230,138,.16); background:rgba(98,230,138,.045); border-radius:8px; }
.online-now > span { color:#62e68a; font-size:12px; text-shadow:0 0 12px #62e68a; }
.online-now small { display:block; color:#747b86; font-size:8px; letter-spacing:.14em; font-weight:800; }
.online-now strong { display:block; margin-top:3px; font-size:13px; }
.online-now strong span { color:#62e68a; }
.badges { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.badge { padding:7px 10px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025); border-radius:5px; color:#9da3ad; font-size:9px; font-weight:800; letter-spacing:.08em; }
.feature-strip { max-width:1240px; margin:-35px auto 0; padding:0 5vw 80px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.feature-item { padding:18px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.02); }
.feature-item strong { display:block; margin-bottom:5px; font-size:13px; }
.feature-item span { color:#777e89; font-size:11px; line-height:1.5; }
.roadmap { margin-top:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.roadmap-item { padding:17px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.018); }
.roadmap-item b { color:var(--red); font-size:9px; letter-spacing:.1em; }
.roadmap-item strong { display:block; margin-top:7px; font-size:12px; }
.reveal { opacity:0; transform:translateY(16px); transition:opacity .55s ease,transform .55s ease; }
.reveal.visible { opacity:1; transform:none; }
@media (max-width:850px) { .feature-strip,.roadmap { grid-template-columns:1fr; } .feature-strip { margin-top:0; padding-top:0; } }

/* Mode interaction */
.grid article { cursor: pointer; }
.mode-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: .2s ease; }
.mode-modal.open { opacity: 1; visibility: visible; }
.mode-modal-card { position: relative; width: min(520px,100%); padding: 34px; border: 1px solid rgba(255,59,48,.35); border-radius: 16px; background: #101219; box-shadow: 0 30px 90px rgba(0,0,0,.55); transform: translateY(12px) scale(.98); transition: .2s ease; }
.mode-modal.open .mode-modal-card { transform: translateY(0) scale(1); }
.mode-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: transparent; color: #fff; font-size: 25px; cursor: pointer; }
.mode-close:hover { border-color: rgba(255,59,48,.5); }
.modal-icon { font-size: 42px; margin-bottom: 14px; }
.mode-modal-card small { color: #ff3b30; font-weight: 800; letter-spacing: .12em; font-size: 10px; }
.mode-modal-card h3 { font-size: 30px; margin: 8px 0 10px; }
.mode-modal-card p { color: #a1a6b0; line-height: 1.7; font-size: 14px; }
.modal-note { margin-top: 20px; padding: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; color: #777d88; font-size: 11px; line-height: 1.5; }