:root{

  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --text:#eef2f7;

  /* Base palette — distinct solid colors (no gradients) */
  --bg:#04020a; /* page background */
  --header-bg:#0b1220; /* header background */
  --panel-bg:#0f1522; /* left panel */
  --card-bg:#0c0a12; /* card backgrounds */
  --muted:#e9e9e9;
  --accent:#e0b24a; /* softened gold */
  --accent-2:#4fd6ff; /* vivid violet */
  --accent-3:#37fa48; /* vivid green */

  --section-info:#0b1620;
  --section-news:#fcfcfc31;
  --section-roadmap:#fcfcfc18;
  --section-feature:#fcfcfc18;
  --section-boss:#3d3c3c1a;
  --section-event:#3d3c3c31;

  --glass: rgba(255,255,255,0.03);
  --glass-2: rgba(255,255,255,0.02);
  --glass-3: rgba(255,255,255,0.012);
  --shadow-lg: 0 18px 60px rgba(2,4,12,0.8);
  --footer-space: 84px; /* space reserved at page bottom for fixed footer */
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);}
/* scale page down to 80% so user doesn't need browser zoom */
html{zoom:0.8}
/* fallback for browsers without zoom support */
@supports not (zoom: 0.8){
  html{transform:scale(0.8);transform-origin:top center;width:125%}
}
html::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background-image:url('assets/bg-pattern.png');background-size:cover;background-attachment:fixed;background-position:top center;background-repeat:no-repeat;z-index:-1;pointer-events:none}

/* Make layout a column so footer can stick to bottom when content is short */
body{display:flex;flex-direction:column;min-height:100vh;-webkit-font-smoothing:antialiased}
main{flex:1 0 auto;padding-bottom:var(--footer-space)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 18px}

/* Left panel (table of contents) - upgraded visual style */
.left-panel{position:fixed;left:18px;top:84px;width:260px;max-height:calc(100vh - 120px);overflow:auto;background:var(--panel-bg);border:1px solid rgba(255,255,255,0.04);backdrop-filter: blur(6px) saturate(110%);padding:14px;border-radius:14px;box-shadow:0 10px 30px rgba(2,6,12,0.7);z-index:60;transition:transform .28s cubic-bezier(.2,.9,.2,1),opacity .22s ease}
.left-panel::after{content:'';position:absolute;inset:0;border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);pointer-events:none}
.left-panel .toc-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.left-panel .toc-title{margin:0;font-size:13px;color:var(--muted);font-weight:800;letter-spacing:0.6px}
.left-panel .toc-badge{margin-left:auto;background:rgba(255,255,255,0.03);padding:6px 8px;border-radius:999px;font-size:12px;color:var(--muted)}
.left-panel .toc-list{list-style:none;padding:6px 4px;margin:0;display:flex;flex-direction:column;gap:6px}
.left-panel .toc-list li{display:block}
.left-panel .toc-list a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;color:var(--muted);font-weight:700;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.left-panel .toc-list a::before{content:'';width:10px;height:10px;border-radius:2px;background:var(--accent-2);flex:0 0 10px;box-shadow:0 6px 18px rgba(0,0,0,0.18)}
.left-panel .toc-list a:hover{transform:translateX(6px);background:rgba(255,255,255,0.02);color:var(--text);box-shadow:0 6px 20px rgba(2,6,12,0.5)}
.left-panel .toc-list a.active{background:var(--accent-2);color:#07121b;box-shadow:0 12px 40px rgba(0,0,0,0.4);transform:none}
.left-panel .toc-list a.active::before{transform:scale(0.92);box-shadow:0 8px 30px rgba(0,0,0,0.18)}
.left-panel .toc-close{display:none;position:absolute;right:10px;top:10px;background:transparent;border:0;color:var(--muted);font-size:16px}

/* custom scrollbar for the panel */
.left-panel::-webkit-scrollbar{width:10px}
.left-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.04);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
.left-panel::-webkit-scrollbar-track{background:transparent}

/* Shift main content to the right when panel is visible on wide screens */
@media(min-width:1000px){
  /* main{margin-left:0px} */
}

/* Mobile: hide panel and show a small toggle */
@media(max-width:999px){
  .left-panel{display:none;transform:translateX(-6px);opacity:0}
  .left-panel.open{display:block;position:fixed;left:12px;top:84px;width:86%;max-width:360px;transform:none;opacity:1}
  .toc-toggle{position:fixed;left:14px;top:12px;background:rgba(255,255,255,0.02);border-radius:12px;padding:8px 10px;z-index:80;border:1px solid rgba(255,255,255,0.04);color:var(--text);backdrop-filter:blur(6px)}
  .left-panel .toc-close{display:block}
}

/* Header */
.site-header{backdrop-filter: blur(6px);position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(255,255,255,0.03); }
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.logo{width:250px;height:auto}
.main-nav{display:flex;gap:18px}
.main-nav a{padding:8px 10px;border-radius:8px;color:var(--muted);font-weight:700;letter-spacing:0.4px}
.main-nav a:hover{color:var(--text);background:rgba(255,255,255,0.02);transform:translateY(-2px)}
.nav-toggle{display:none;background:transparent;border:0;color:var(--text);font-size:20px}

/* Hero */
.hero{padding:64px 0 48px;}
.hero-inner{display:flex;gap:36px;align-items:center; }
.hero-content{flex:1}
.hero-content h1{font-size:52px;margin:0 0 10px;line-height:1.02;letter-spacing:0.6px;font-weight:700}
.hero-content h1{color:var(--muted); outline: none; text-shadow:0 6px 24px rgba(138,43,226,0.06),0 12px 40px rgba(212,175,55,0.04)}
.lead{color:var(--muted);margin:0 0 18px;font-size:17px}
.hero-cta{display:flex;gap:12px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;background:var(--glass);color:var(--text);font-weight:800;transition:transform .22s ease,box-shadow .22s ease;position:relative;overflow:hidden}
.btn.primary{background:#faad08;color:#111;box-shadow:0 8px 30px rgba(255,150,60,0.06)}
.btn.outline{background:transparent;border:1px solid rgba(255,255,255,0.06)}
.btn.small{padding:8px 10px;font-size:14px}
.btn:hover{transform:translateY(-4px)}

.hero-cta .btn.primary:active{transform:translateY(-2px) scale(.995)}

.hero-visual{/* size & position handled below for large screens */width:360px}

/* Button row under card images: 3 columns align left/center/right matching image width */
.btn-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;align-items:center}
.btn-row .btn{padding:10px 14px;border-radius:10px;min-width:0}
.btn-left{justify-self:start}
.btn-center{justify-self:center}
.btn-right{justify-self:end}
/* Centered two-button row (used on download page) */
.btn-row-center{display:flex;justify-content:center;gap:12px;margin-top:12px}
.btn-row-center .btn{padding:10px 14px;border-radius:10px;min-width:120px}
/* Disabled button appearance: visually grey and show not-allowed cursor.
   Use `data-disabled="true"` or `aria-disabled="true"` on elements to apply.
   Note: `disabled` attribute on native controls also styled here. */
.btn[data-disabled="true"], .btn[aria-disabled="true"], .btn[disabled]{
  opacity:0.56;
  filter:grayscale(70%);
  cursor:not-allowed;
  box-shadow:none;
}
.card{background:var(--card-bg);padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,0.03);box-shadow:var(--shadow-lg);backdrop-filter:blur(6px)}
.status-card h3{margin:0 0 8px}
.status-line{margin:0 0 8px}
.dot{display:inline-block;padding:6px 10px;border-radius:999px;font-weight:700}
.dot.green{background:rgba(40,199,111,0.12);color:#28c76f}
/* Coming soon status color */
.dot.coming{background:rgba(255,184,107,0.12);color:#ffb238}

/* card hover */
.card:hover{transform:translateY(-6px);transition:transform .28s cubic-bezier(.2,.9,.2,1)}

/* reveal animation */
.reveal{opacity:0;transform:translateY(18px) scale(.995);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.9,.2,1)}
.reveal.in-view{opacity:1;transform:none}

/* hero-banner removed */

/* Sections */
.section{padding:36px 0}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.news-item{background:var(--section-news);padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.02);overflow:hidden}
.news-item h3{margin:6px 0 8px;font-size:16px}
.read-more{color:var(--accent);font-weight:800}

.news-thumb{width:100%;height:140px;object-fit:cover;border-radius:10px;margin-bottom:12px;border:1px solid rgba(255,255,255,0.02)}

/* Events grid: reuse news-thumb sizing for banners */
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:12px}
.event-card{padding:12px}
.event-card h3{margin:8px 0 6px}
.event-card .npc{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.event-card .npc .npc-info{color:var(--muted)}
/* hero-visual is fixed to bottom-right on large screens; reverts on small screens */
.hero-visual{width:320px;position:fixed;right:20px;bottom:20px;z-index:80}

/* CTA ripple effect */
.btn .ripple{position:absolute;border-radius:999px;background:rgba(255,255,255,0.18);transform:scale(0);animation:ripple .6s linear;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* subtle focus styles */
.btn:focus{outline:2px solid rgba(255,255,255,0.06);outline-offset:4px}

.download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.download-card{background:var(--card-bg);padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}

.info-subname{font-size:80px; color: #ffe600;}
.info-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.info-open{font-size:17px; color: #ff7300;}
.info-exp{font-size:17px; color: #ffe600;}
.info-drop{font-size:17px; color: #00ffc8;}
.text-quest{font-size:16px; color: #ffe600;}
.openBetaCountdown{font-size:17px; font-weight: 800; color: #41fd08;}
.muted{color:var(--muted)}

/* Section outlines and heading treatment */
.section{border-left:4px solid transparent;padding:28px 0}
.section h2{display:flex;align-items:center;gap:12px;font-size:22px;margin:0 0 10px;color:var(--section-color,#4fd6ff)}
.section h2::before{content:'';width:10px;height:10px;border-radius:2px;background:var(--section-color,#4fd6ff);display:inline-block}

/* highlight online player count in yellow tone */
#playerCount{color:#30ff6e}
.section.card-outline{background:rgba(255,255,255,0.01);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}

/* Info section specifics */
.server-info li{background:var(--glass);padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.02)}

/* Open Beta countdown badge */
.countdown-badge{display:inline-block;margin-left:12px;padding:6px 10px;border-radius:999px;background:rgba(110,231,255,0.08);color:var(--text);font-weight:800;font-size:13px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 6px 18px rgba(0,0,0,0.45);transition:transform .28s cubic-bezier(.2,.9,.2,1),box-shadow .28s ease,background .4s ease}
.countdown-badge.small{font-size:12px;padding:5px 8px}
.countdown-badge.pulse{animation:countPulse 1s ease}
@keyframes countPulse{0%{transform:scale(1);box-shadow:0 6px 18px rgba(0,0,0,0.35)}50%{transform:scale(1.06);box-shadow:0 14px 34px rgba(0,0,0,0.45)}100%{transform:scale(1);box-shadow:0 6px 18px rgba(0,0,0,0.35)}}

/* small number chips inside badge */
.countdown-badge .num{display:inline-block;background:rgba(0,0,0,0.06);padding:2px 6px;border-radius:6px;margin:0 4px;font-variant-numeric:tabular-nums}

/* Make event cards clickable */
.event-card{cursor:pointer;transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s cubic-bezier(.2,.9,.2,1)}
.event-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(2,6,12,0.6)}

/* quick opening micro-animation when user clicks a card */
.event-card.is-opening{transform:scale(1.06) translateY(-8px);box-shadow:0 36px 80px rgba(2,6,12,0.7);z-index:220;position:relative}

/* Show only banner + title on event cards; hide details until modal */
.event-card .npc,
.event-card .rules{
  display:none;
}

/* Animation for player count update */
.player-pulse{display:inline-block;transform-origin:center center;animation:playerPulse .7s ease}
@keyframes playerPulse{
  0%{transform:scale(1);opacity:0.6}
  50%{transform:scale(1.08);opacity:1}
  100%{transform:scale(1);opacity:1}
}

/* Modal styles (animated) */
.modal-overlay{position:fixed;inset:0;background:rgba(2,6,12,0.6);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:220;opacity:0;pointer-events:none;transition:opacity .26s ease}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:var(--card);border-radius:12px;max-width:900px;width:100%;box-shadow:0 20px 60px rgba(2,6,12,0.7);overflow:hidden;border:1px solid rgba(255,255,255,0.03);transform:translateY(14px) scale(.985);opacity:0;transition:transform .34s cubic-bezier(.2,.9,.2,1),opacity .26s ease}
.modal-overlay.open .modal{transform:none;opacity:1}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,0.02)}
.modal-header h2{margin:0;font-size:18px}
.modal-close{background:transparent;border:0;color:var(--muted);font-size:18px;cursor:pointer}
.modal-body{padding:16px;max-height:72vh;overflow:auto}
.modal-body img{max-width:100%;height:auto;border-radius:8px}

/* Enhanced modal UI: cleaner header, two-column body, image treatment and responsive stack */
.modal{padding:0;overflow:visible;background:linear-gradient(180deg, rgba(18,20,28,0.98), rgba(8,9,12,0.99));border-radius:14px;max-width:1000px;width:100%;box-shadow:0 32px 90px rgba(2,6,12,0.8);border:1px solid rgba(255,255,255,0.04);transform:translateY(12px) scale(.992);transition:transform .34s cubic-bezier(.2,.9,.2,1),opacity .26s ease}
.modal-header{padding:18px 20px;background:linear-gradient(90deg, rgba(79,214,255,0.04), rgba(224,178,74,0.03));align-items:center;gap:12px;border-bottom:none;position:sticky;top:0;backdrop-filter:blur(6px)}
.modal-header h2{font-size:20px;margin:0;color:var(--muted);font-weight:900;letter-spacing:0.2px}
.modal-close{width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,0.02);display:inline-flex;align-items:center;justify-content:center;font-size:18px;transition:transform .16s ease,background .16s ease;border:1px solid rgba(255,255,255,0.03)}
.modal-close:hover{transform:scale(1.04);background:rgba(255,255,255,0.04)}
.modal-close:focus{outline:3px solid rgba(79,214,255,0.16);outline-offset:3px}

#eventModalContent{display:grid;grid-template-columns:220px 1fr;gap:20px;width:100%;align-items:start;padding:20px}
#eventModalContent .npc{display:flex;flex-direction:column;gap:12px}
#eventModalContent .npc img.small-thumb{width:200px;height:auto;border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,0.52);border:1px solid rgba(255,255,255,0.03)}
#eventModalContent .npc .npc-info{color:var(--muted);font-weight:800}
#eventModalContent .rules{max-height:70vh;overflow:auto;padding-right:6px}
#eventModalContent hr{border:0;height:1px;background:rgba(255,255,255,0.04);margin:12px 0}
.modal-body .rule-img{border-radius:10px;box-shadow:0 10px 36px rgba(0,0,0,0.48);margin-top:12px}

/* small screens: stack vertically */
@media(max-width:900px){
  .modal{max-width:960px;margin:12px;height:auto}
  #eventModalContent{grid-template-columns:1fr;gap:12px;padding:16px}
  #eventModalContent .npc{flex-direction:row;align-items:center;gap:12px}
  #eventModalContent .npc img.small-thumb{width:120px}
  #eventModalContent .rules{max-height:56vh}
}

@media (max-width:900px){
  .events-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .events-grid{grid-template-columns:1fr}
}

/* Very small screens: make modal feel full-screen */
@media(max-width:480px){
  .modal{border-radius:10px;margin:8px;max-width:100%;height:calc(100vh - 24px);display:flex;flex-direction:column}
  #eventModalContent{padding:12px;overflow:auto}
  .modal-header{padding:12px 14px}
  .modal-close{width:40px;height:40px}
}

/* small helpers */
.muted.small{font-size:13px}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:18px 0; /* fixed footer */
  position:fixed;left:0;right:0;bottom:0;z-index:150;backdrop-filter: blur(6px);
  background:var(--header-bg);
  box-shadow: 0 -10px 30px rgba(2,6,12,0.6);transition:box-shadow .2s ease,transform .2s ease;border-top:1px solid rgba(255,255,255,0.04)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;color:var(--muted);max-width:1100px;margin:0 auto;padding:0 18px}
.socials a{margin-left:12px;color:var(--muted)}

/* Responsive */
@media (max-width:900px){
  .news-grid,.download-grid{grid-template-columns:repeat(2,1fr)}
  .hero-inner{flex-direction:column;align-items:flex-start}
  .hero-visual{position:static;width:100%;margin-top:16px}
  /* hero-banner removed for this layout */
}

/* On small screens, reveal animations may not trigger reliably in some browsers.
   Ensure elements are visible by default so roadmap cards aren't hidden. */
@media (max-width:900px){
  .reveal{opacity:1 !important;transform:none !important}
}
@media (max-width:640px){
  .main-nav{display:none;position:absolute;right:18px;top:64px;background:var(--card);padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);flex-direction:column}
  .nav-toggle{display:block}
  .news-grid,.download-grid{grid-template-columns:1fr}
  .hero-content h1{font-size:28px}
}

/* Responsive adjustments for the fixed footer */
@media (max-width:900px){
  :root{--footer-space:100px}
  .footer-inner{padding:10px 18px}
}
@media (max-width:640px){
  :root{--footer-space:120px}
  .footer-inner{flex-direction:column;align-items:center;gap:8px;padding:12px 18px}
}

/* Road Map */
.roadmap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
.roadmap-item{padding:14px}

/* Ensure roadmap images always fit inside the card and keep cards from overflowing */
.roadmap-item{overflow:hidden}
.roadmap-item .stage-img{width:100%;height:auto;display:block;object-fit:cover;border-radius:8px;margin-bottom:10px;border:1px solid rgba(255,255,255,0.03);max-height:240px}
.roadmap-item .stage-detail-img{width:40%;height:auto;display:block;object-fit:cover;border-radius:8px;margin-bottom:10px;border:1px solid rgba(255,255,255,0.03);max-height:200px}

/* Timeline layout for roadmap (alternating on large screens) */
.roadmap-grid.timeline{position:relative;margin-top:24px;gap:0;padding:20px 0}
.roadmap-grid.timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:4px;background:var(--accent-2);transform:translateX(-50%);border-radius:4px}
/* use explicit grid gaps and allow rows to stretch uniformly */
.roadmap-grid.timeline{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:44px 24px;align-items:stretch}
.roadmap-grid.timeline .roadmap-item{background:var(--section-roadmap);border-radius:12px;padding:18px;max-width:520px;margin:0;position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden}
/* use a responsive aspect ratio so images scale but never overflow the card */
.roadmap-grid.timeline .roadmap-item .stage-img{width:100%;aspect-ratio:16/9;max-height:180px;object-fit:cover;flex:0 0 auto}

/* place odd items left and even items right */
.roadmap-grid.timeline .roadmap-item:nth-child(odd){grid-column:1;justify-self:end}
.roadmap-grid.timeline .roadmap-item:nth-child(even){grid-column:2;justify-self:start}

/* timeline markers */
.roadmap-grid.timeline .roadmap-item::after{content:'';position:absolute;top:28px;width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(255,184,107,0.06)}
.roadmap-grid.timeline .roadmap-item:nth-child(odd)::after{right:-9px}
.roadmap-grid.timeline .roadmap-item:nth-child(even)::after{left:-9px}

/* small detail line from card to center */
.roadmap-grid.timeline .roadmap-item::before{content:'';position:absolute;top:36px;width:calc(50% - 60px);height:2px;background:rgba(255,255,255,0.02);opacity:0.6}
.roadmap-grid.timeline .roadmap-item:nth-child(odd)::before{right:100%;margin-right:18px}
.roadmap-grid.timeline .roadmap-item:nth-child(even)::before{left:100%;margin-left:18px}

/* mobile: stack into single column and hide center line */
@media (max-width:900px){
  .roadmap-grid.timeline{grid-template-columns:1fr;padding-left:18px;padding-right:18px}
  .roadmap-grid.timeline::before{display:none}
  .roadmap-grid.timeline .roadmap-item{max-width:none;margin:12px 0;padding-left:16px;padding-right:16px;text-align:left}
  /* ensure odd/even positioning doesn't apply on narrow screens — make every card full-width */
  .roadmap-grid.timeline .roadmap-item:nth-child(odd),
  .roadmap-grid.timeline .roadmap-item:nth-child(even){
    grid-column:auto !important;
    justify-self:stretch !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .roadmap-grid.timeline .roadmap-item::after{left:8px;right:auto;box-shadow:0 0 0 6px rgba(155,231,255,0.04)}
  .roadmap-grid.timeline .roadmap-item::before{display:none}
}

/* Make text inside roadmap items left-aligned for readability */
.roadmap-grid.timeline .roadmap-item{ text-align:left }

/* Global heading refinements: make h4/h5 visually distinct and modern */
h4{font-size:24px;margin:0 0 10px;font-weight:800;color:var(--accent);letter-spacing:-0.5px;display:flex;align-items:center;gap:12px;text-transform:uppercase;background:transparent;padding:12px 14px;border-radius:8px;}
h4::before{content:'';display:none}

/* Slightly smaller, muted subheading style with highlight */
h5{font-size:15px;margin:6px 0 12px;color:var(--text);font-weight:600;line-height:1.35;background:transparent;padding:10px 12px;border-radius:6px;}

/* Keep roadmap-specific stage label styling but tighten spacing */
.roadmap-grid.timeline .roadmap-item h4{font-size:18px;margin:0 0 8px;gap:10px;align-items:center}
.roadmap-grid.timeline .roadmap-item h4 .stage-label{background:var(--accent);color:#111;padding:6px 10px;border-radius:10px;font-weight:800;font-size:15px;display:inline-block}
.roadmap-grid.timeline .roadmap-item h4 .stage-detail-label{background:var(--accent-3);color:#111;padding:6px 10px;border-radius:10px;font-weight:800;font-size:15px;display:inline-block}

/* Replace leading dash with a small circular icon using ::before — JS will strip dashes */
.roadmap-grid.timeline .roadmap-item p{position:relative;padding-left:26px;margin:6px 0}
.roadmap-grid.timeline .roadmap-item p::before{content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 6px rgba(123,211,137,0.04)}

/* inline svg icon used before strong labels like 'Luật chơi' and 'Hướng dẫn' */
.inline-icon{width:16px;height:16px;display:inline-block;vertical-align:middle;margin-right:8px;color:var(--accent-2);flex:0 0 16px}
.rules strong .inline-icon,.npc-info strong .inline-icon{margin-right:8px}

/* boss-table legacy styles removed */
/* Boss grid table (new) */
.boss-grid-table{width:100%;border-collapse:collapse;margin-top:12px;background:var(--section-boss);border-radius:10px;overflow:hidden;table-layout:fixed}
.boss-grid-table thead th{padding:12px 10px;text-align:left;color:var(--muted);font-weight:700;border-bottom:1px solid rgba(255,255,255,0.03)}
.boss-grid-table td{padding:10px;border-bottom:1px solid rgba(255,255,255,0.02);vertical-align:middle}
.small-thumb{width:56px;height:36px;object-fit:cover;border-radius:6px;border:1px solid rgba(255,255,255,0.03)}

/* Keep boss table columns fixed on large screens; adjust for responsiveness */
.boss-grid-table thead th:nth-child(1){width:28%}
.boss-grid-table thead th:nth-child(2){width:140px}
.boss-grid-table thead th:nth-child(3){width:18%}
.boss-grid-table thead th:nth-child(4){width:12%}
.boss-grid-table thead th:nth-child(5){width:22%}

/* Make the 4th column nowrap so counts stay on one line and are centered */
.boss-grid-table td:nth-child(4), .boss-grid-table thead th:nth-child(4){white-space:nowrap;text-align:center}

/* Allow horizontal scrolling on smaller viewports to keep layout intact */
@media (max-width:900px){
  .boss-grid-table{display:block;overflow-x:auto;width:100%;}
  .boss-grid-table thead{display:table-header-group}
  .boss-grid-table tbody{display:table-row-group}
  .boss-grid-table td{white-space:normal}
}

@media (max-width:640px){
  /* On narrow screens allow the table to scroll horizontally and slightly reduce padding */
  .boss-grid-table{font-size:14px}
  .boss-grid-table td{padding:8px}
}

/* Boss images: approximately 2x larger than the small-thumb */
.boss-grid-table td img.small-thumb{width:112px;height:140px;object-fit:cover;border-radius:8px}

/* NPC thumbnails inside event cards: ~3x larger for better visibility */
.event-card .npc img.small-thumb{width:168px;height:auto;object-fit:cover;border-radius:8px}

/* When NPC images are shown in the modal, make them large too */
.modal-body .small-thumb{width:168px;height:auto;object-fit:cover;border-radius:8px}

/* Boss tabs */
.boss-tabs{display:flex;gap:8px;margin:10px 0 14px}
.boss-tabs .tab-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px 12px;border-radius:10px;color:var(--muted);cursor:pointer;font-weight:700}
.boss-tabs .tab-btn.active{background:var(--accent-2);color:#111;border-color:transparent;box-shadow:0 8px 30px rgba(0,0,0,0.35)}

/* hide/show rows */
.boss-grid-table tbody tr{transition:opacity .18s ease,transform .12s ease}
.boss-grid-table tbody tr.hidden{display:none;opacity:0;transform:translateY(8px)}

/* event-list legacy styles removed */
.roadmap-list{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.roadmap-list li{background:var(--glass);padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.02)}

/* Feature grid */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
.feature-card{padding:16px}

@media (max-width:900px){
  .roadmap-grid,.feature-grid{grid-template-columns:repeat(2,1fr)}
  .events-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .roadmap-grid,.feature-grid{grid-template-columns:1fr}
  .events-grid{grid-template-columns:1fr}
}

/* Responsive video embed used in feature section */
.video-wrap{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:rgba(0,0,0,0.04);border:1px solid rgba(255,255,255,0.02)}
.video-wrap iframe{width:100%;height:100%;border:0;border-radius:8px;display:block}
.rule-img.video-wrap{margin-top:10px}


/* -----------------------------
   Section color blocks & download emphasis
   ----------------------------- */
/* Make sections appear as soft color blocks with a strong left accent */
.section{background:transparent;padding:22px 18px;border-radius:12px;margin-bottom:18px}
#news{background:var(--section-news);--section-color:var(--accent)}
#roadmap{background:var(--section-roadmap);--section-color:var(--accent-2)}
#boss{background:var(--section-boss);--section-color:var(--accent)}
#event{background:var(--section-event);--section-color:var(--accent-2)}
#feature{background:var(--section-feature);--section-color:#c0a1fa}
#info{background:var(--section-info);--section-color:var(--muted)}

/* Download section — make this stand out */
#download{background:var(--section-feature);border-left:8px solid #ff8a4b;box-shadow:0 12px 40px rgba(255,120,60,0.04);--section-color:#ff8a4b}

/* layout tweaks for the download cards */
#download .download-grid{grid-template-columns:repeat(3,1fr);gap:22px}

/* ----------------------------------
   Anti-copy utility (applied when JS enables it)
   - Adds global non-selectable styles, but allows inputs
   - Small tip shown on first blocked action
   ---------------------------------- */
.no-select-enabled, .no-select-enabled body {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
.no-select-enabled input, .no-select-enabled textarea, .no-select-enabled [contenteditable="true"]{
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}
.anti-copy-tip{font-size:13px}

/* ----------------------------------
   Card & badge variants (easy to extend)
   Use modifiers like: .card.card--news, .card.card--feature
   ---------------------------------- */
.card--news{--card-accent:var(--accent-2);background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));}
.card--feature{--card-accent:#c0a1fa;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));}
.card--event{--card-accent:#ff8a4b;}
.card--boss{--card-accent:var(--accent);}
.card--roadmap{--card-accent:var(--accent-2);background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00))}

.badge{display:inline-block;padding:4px 8px;border-radius:8px;font-weight:800;font-size:12px}
.badge--accent{background:rgba(224,178,74,0.12);color:var(--accent)}
.badge--muted{background:rgba(255,255,255,0.02);color:var(--muted)}
.badge--success{background:rgba(40,199,111,0.12);color:#28c76f}
.badge--danger{background:rgba(255,85,85,0.08);color:#ff5b5b}

/* Tiny helpers for highlighted spans inside cards */
.span-highlight{background:rgba(255,255,255,0.02);padding:2px 6px;border-radius:6px;font-weight:700;color:var(--text)}
.span-muted{color:var(--muted)}

/* End of additions for easier section/card customization */
#download .download-card{padding:20px;border-radius:14px;backdrop-filter: blur(6px);border:1px solid rgba(255,255,255,0.04);transition:transform .22s ease,box-shadow .22s ease}
#download .download-card:hover{transform:translateY(-6px);box-shadow:0 26px 70px rgba(255,120,50,0.08)}

/* Make download buttons larger and animated on hover */
#download .btn{padding:14px 20px;border-radius:14px;font-size:16px}
#download .download-card .btn{display:inline-block;background:var(--accent);color:#111;font-weight:900;box-shadow:0 10px 30px rgba(255,140,60,0.12);transition:transform .28s cubic-bezier(.2,.9,.2,1),box-shadow .28s ease,filter .28s ease}
#download .download-card .btn:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 28px 80px rgba(255,130,50,0.16);filter:brightness(1.02)}
#download .download-card .btn::before{content:none}

/* subtle pulsing glow for primary download button */
@keyframes downloadPulse{0%{box-shadow:0 10px 30px rgba(255,140,60,0.08)}50%{box-shadow:0 18px 60px rgba(255,140,60,0.12)}100%{box-shadow:0 10px 30px rgba(255,140,60,0.08)}}
#download .download-card .btn.primary{animation:downloadPulse 3.8s ease-in-out infinite}

/* accessibility: ensure contrast on smaller screens */
@media (max-width:900px){#download .download-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){#download .download-grid{grid-template-columns:1fr}}

.text-highlight {
    color: #00ffff; /* Màu vàng kim đặc trưng của MU */
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 204, 0, 0.5);
}

.roadmap-item p strong {
    color: #ff8a2a; /* Màu xanh neon cho các tiêu đề nhiệm vụ */
}

/* Explicit desktop placement for paired stages and tall end-stage
   - stage-1 spans two rows on the left
   - stages 2 & 3 share the right column (row 1 and row 2)
   - stages 4 & 5 paired on row 3 (left/right)
   - stages 6 & 7 paired on row 4 (left/right)
   - stage-8 spans two rows on the right (rows 5-6)
*/
@media (min-width:901px){
  .roadmap-grid.timeline{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(140px,auto);gap:44px 24px}
  /* place stages on alternating sides: odd = left (col 1), even = right (col 2) */
  .roadmap-grid.timeline .stage-1{grid-column:1;grid-row:1}
  .roadmap-grid.timeline .stage-2{grid-column:2;grid-row:2}
  .roadmap-grid.timeline .stage-3{grid-column:1;grid-row:3}
  .roadmap-grid.timeline .stage-4{grid-column:2;grid-row:4}
  .roadmap-grid.timeline .stage-5{grid-column:1;grid-row:5}
  .roadmap-grid.timeline .stage-6{grid-column:2;grid-row:6}
  .roadmap-grid.timeline .stage-7{grid-column:1;grid-row:7}
  .roadmap-grid.timeline .stage-8{grid-column:2;grid-row:8}

  /* detail placeholders sit on the opposite column but same row */
  .roadmap-grid.timeline .stage-1-detail{grid-column:2 !important;grid-row:1 !important}
  .roadmap-grid.timeline .stage-2-detail{grid-column:1 !important;grid-row:2 !important}
  .roadmap-grid.timeline .stage-3-detail{grid-column:2 !important;grid-row:3 !important}
  .roadmap-grid.timeline .stage-4-detail{grid-column:1 !important;grid-row:4 !important}
  .roadmap-grid.timeline .stage-5-detail{grid-column:2 !important;grid-row:5 !important}
  .roadmap-grid.timeline .stage-6-detail{grid-column:1 !important;grid-row:6 !important}
  .roadmap-grid.timeline .stage-7-detail{grid-column:2 !important;grid-row:7 !important}
  .roadmap-grid.timeline .stage-8-detail{grid-column:1 !important;grid-row:8 !important}
  
  /* ensure timeline center line extends full height of grid */
  .roadmap-grid.timeline::before{top:0;bottom:0}
}

/* Detail placeholder styling: hidden by default, visible when populated */
.roadmap-grid.timeline .detail-placeholder{background:transparent;border:0;padding:0;margin:0;min-height:80px;opacity:0;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.roadmap-grid.timeline .detail-placeholder.visible{opacity:1;transform:none;pointer-events:auto}
.roadmap-grid.timeline .detail-placeholder .detail-inner{background:var(--section-roadmap);border-radius:12px;padding:16px;border:1px solid rgba(255,255,255,0.03);box-shadow:var(--shadow-lg)}

/* On small screens keep placeholders hidden (we show inline content instead) */
@media (max-width:900px){
  .roadmap-grid.timeline .detail-placeholder{display:none}
  .roadmap-grid.timeline .detail-placeholder.visible{display:block !important}
}

/* On small screens reset explicit placement so items flow naturally */
@media (max-width:900px){
  .roadmap-grid.timeline .roadmap-item{grid-column:auto !important;grid-row:auto !important;}
}