/* Carousel drag hint style */
.carousel-hint {
  text-align: center;
  color: #fff;
  font-weight: 600;
  margin-top: 4px;
  font-size: 15px;
  letter-spacing: 0.04em;
}
/* Mobile-first responsive styles for LongTrip landing page */
:root{
  --bg:#070712;
  --accent:#00e5ff;
  --muted:#9aa4b2;
  --max-width:1100px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;color:#e6eef6;background:var(--bg);line-height:1.4}
.container{max-width:var(--max-width);margin:0 auto;padding:0 16px}
.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg, rgba(7,7,18,0.8), rgba(7,7,18,0.4));backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.03)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:24px}
.brand{display:flex;align-items:center;text-decoration:none}
.logo{height:44px}
.site-nav{position:relative}
.nav-toggle{display:inline-block;background:none;border:1px solid rgba(255,255,255,0.06);color:#fff;padding:8px 10px;border-radius:6px}
.nav-list{list-style:none;margin:0;padding:8px 0;display:flex;gap:12px}
.nav-list a{color:#dbeefe;text-decoration:none;padding:8px 14px;border-radius:6px;display:inline-flex;align-items:center;font-weight:700;font-size:13px}
.nav-list a:hover{background:rgba(255,255,255,0.02)}
.nav-wishlist{background:linear-gradient(90deg,#ffd700,#ffed4e) !important;color:#000000 !important;font-weight:700 !important;padding:8px 14px !important;display:inline-flex;align-items:center;border-radius:6px;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(255,215,0,0.2)}
.nav-wishlist:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(255,215,0,0.4)}

/* Hero */
.hero{position:relative;min-height:calc(100vh - 72px);display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;background-image:linear-gradient(120deg, rgba(0,0,0,0.4), rgba(0,0,0,0.2)), url('../assets/library_hero.png');background-size:cover;background-position:center;filter:contrast(1.05) saturate(1.05);opacity:0.95}
.hero-overlay{position:relative;padding:0;display:flex;align-items:center;justify-content:center;width:100%}
/* Hero play button */
.hero-play-btn{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);border:none;background:transparent;padding:0;cursor:pointer;z-index:10}
.hero-play-btn svg{filter:drop-shadow(0 4px 8px rgba(0,0,0,0.4))}

/* Video overlay that darkens hero and contains iframe */
.hero-player-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.75);z-index:160;padding:16px}
.hero-player-overlay.active{display:flex}
.hero-player-inner{max-width:1200px;width:100%;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;position:relative}
.hero-player-close{position:absolute;right:8px;top:8px;background:rgba(255,255,255,0.06);border:none;color:#fff;padding:6px 10px;border-radius:6px;cursor:pointer;z-index:5}
.hero-player-inner iframe{width:100%;height:100%;border:0}
.hero-inner{padding:48px 16px;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:980px}
.hero-main-logo{width:220px;max-width:60%;height:auto}
.platform-buttons{display:flex;gap:12px;justify-content:center;margin-top:14px}
.platform img{height:36px;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,0.6));opacity:0.95}
.platform{display:inline-block;padding:6px;border-radius:8px}
.platform:focus, .platform:hover{outline:2px solid rgba(0,229,255,0.12);transform:translateY(-2px)}

/* normalize platform icons to same box */
.platform{width:180px;height:64px;display:inline-flex;align-items:center;justify-content:center;padding:8px;margin:0 6px}
.platform img{max-height:44px;max-width:100%;height:auto}
.platform-buttons{gap:18px}

/* Hero email subscription form */
.hero-subscribe{margin:40px auto 0;width:100%;max-width:400px}
.hero-subscribe-form{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.hero-subscribe-form input[type="email"]{width:100%;padding:12px 16px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#fff;font-size:14px;min-width:0;height:auto;line-height:1.4}
.hero-subscribe-form button{width:100%;align-self:stretch;padding:12px 16px;font-size:14px}
.hero-subscribe-form input[type="email"]::placeholder{color:rgba(255,255,255,0.5)}
.hero-subscribe-form input[type="email"]:focus{outline:none;border-color:rgba(255,215,0,0.4);background:rgba(255,255,255,0.08)}
.hero-subscribe-message{margin-top:8px;padding:12px 16px;background:rgba(76,175,80,0.1);border:1px solid rgba(76,175,80,0.3);border-radius:6px;color:#a5d6a7;font-size:13px;text-align:center}

/* scale specific platform PNGs visually larger (3x) while keeping layout consistent */
.platform img[src*="Meta_lockup_mono_white_RGB_1440.png"],
.platform img[src*="logo_steamVR_H.png"]{
  max-height:132px; /* 3x of 44 */
}

/* Bosses 3x3 grid styles */
.bosses-flex-row {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.bosses-grid-wrapper{display:flex;flex-direction:column;align-items:center;gap:10px}
.bosses-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:420px;min-width:260px;max-width:100%;background:rgba(0,0,0,0.08);border-radius:16px;padding:16px 8px;}
.boss-row {
  display: contents;
}
.boss-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
}
.boss-cell.selected{outline:2px solid rgba(0,229,255,0.18);background:linear-gradient(180deg,rgba(0,0,0,0.04),rgba(0,0,0,0.02));border-radius:8px}
.boss-icon {
  width: 40%;
  max-width: 80px;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.18));
}
.boss-detail-pane {
  flex: 1;
  background: rgba(0,0,0,0.12);
  border-radius: 16px;
  padding: 24px 18px;
  min-width: 180px;
  max-width: 580px; /* increased by additional 100px as requested */
  box-sizing: border-box;
  color: #fff;
  font-size: 1.08em;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.boss-detail-name {
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 6px;
}
.boss-detail-type {
  color: #00e5ff;
  font-weight: 500;
}
.boss-detail-desc {
  color: #dbeefe;
  font-size: 1em;
  max-width: calc(100% - 30px); /* give description 30px more visual room */
}
/* Extra rows hidden by default; when shown use display:contents so their .boss-row children join the parent grid */
.bosses-extra{display:none}
.bosses-extra[aria-hidden="false"]{display:contents}
.bosses-toggle{background:transparent;border:1px solid rgba(255,255,255,0.12);color:#fff;padding:4px 14px;border-radius:20px;cursor:pointer;font-weight:600;font-size:12px;letter-spacing:.05em;transition:.18s background,.18s color,.18s border-color;align-self:center}
.bosses-toggle:hover,.bosses-toggle:focus{border-color:rgba(255,255,255,0.28);outline:none}
.bosses-toggle[aria-expanded="true"]{background:linear-gradient(90deg,var(--accent),#6ff7d9);color:#032;border-color:transparent}
@media (max-width: 700px) {
  .bosses-flex-row {
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
  }
  .bosses-grid{width:100%;min-width:0;padding:12px 2px;}
  .bosses-grid-wrapper{align-items:flex-start}
  .boss-detail-pane {
    padding: 16px 8px;
    min-width: 0;
    max-width: 100%;
  }
}
.hero-title{font-size:clamp(28px, 6vw, 64px);margin:0;font-weight:700;letter-spacing:1px}
.hero-sub{color:#ffffff;font-size:clamp(14px,2.5vw,18px);margin:12px 0;text-transform:uppercase;letter-spacing:0.06em}
.hero-cta{display:flex;gap:12px;justify-content:center;margin-top:18px}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--accent),#6ff7d9);color:#032;box-shadow:0 6px 18px rgba(0,229,255,0.12)}
.btn.ghost{border:1px solid rgba(255,255,255,0.06);color:#fff;background:transparent}
.btn.btn-small{padding:8px 14px;font-size:13px}
.btn.btn-primary{background:linear-gradient(90deg,#ffd700,#ffed4e);color:#1a1a1a;box-shadow:0 4px 12px rgba(255,215,0,0.2);font-weight:700}
.btn.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(255,215,0,0.3)}

/* layered logo */
.hero-logo-layer{position:absolute;left:50%;transform:translateX(-50%);bottom:-40px;pointer-events:none}
.hero-logo{width:260px;max-width:70%;filter:drop-shadow(0 12px 30px rgba(0,0,0,0.6))}

/* features */
.section{padding:56px 0}
.section.light{background:#071124}
.feature-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:20px}
.feature-item{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:10px}

/* About Us Section */
.about-section{padding:80px 0}
.about-section h2{font-size:32px;font-weight:600;margin:0 0 20px;color:#ffffff;text-align:center}
.about-subtitle{font-size:16px;color:#dbeefe;max-width:550px;margin:0 auto 20px;line-height:1.6;font-weight:300;text-align:left}
.about-description{font-size:16px;color:#ffffff;max-width:550px;margin:0 auto 30px;line-height:1.6;font-weight:300;text-align:left}

.item-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:16px;margin-top:18px}

/* World map module: left 60% map, right 40% description */
.map-row{display:flex;gap:18px;align-items:flex-start}
.map-left{flex:0 0 60%}
.map-right{flex:1;min-width:0}
.map-frame{position:relative;background:rgba(255,255,255,0.02);border-radius:10px;overflow:hidden;padding:12px}
.world-map-img{width:100%;height:auto;display:block}
.map-point{position:absolute;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #fff, #ffd47a 40%, #ffb86b 100%);border:2px solid #fff;box-shadow:0 6px 20px rgba(0,0,0,0.5);transform:translate(-50%,-50%);cursor:pointer}
.map-point:focus{outline:2px solid rgba(0,229,255,0.18)}
.map-title{margin-top:0}

@media(max-width:900px){
  .map-row{flex-direction:column}
  .map-left{flex-basis:auto}
}

/* Map badge (like prof-badge) inside map area */
.map-badge{position:absolute;left:12px;top:12px;background:linear-gradient(90deg,#ffb86b,#ffd47a);color:#071017;font-weight:800;padding:6px 10px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.45);z-index:20}

/* Mobile bottom sheet for map descriptions */
.map-sheet{position:fixed;left:0;right:0;bottom:0;transform:translateY(100%);background:linear-gradient(180deg, rgba(8,10,14,0.98), rgba(18,20,28,0.99));color:#fff;border-top-left-radius:12px;border-top-right-radius:12px;box-shadow:0 -20px 40px rgba(0,0,0,0.6);z-index:200;transition:transform .26s cubic-bezier(.2,.9,.3,1);max-height:70vh;overflow:auto}
.map-sheet[aria-hidden="false"]{transform:translateY(0)}
.map-sheet-inner{padding:14px}
.map-sheet-close{position:absolute;right:12px;top:8px;background:transparent;border:none;color:#ccc;font-size:18px}
.map-sheet-title{margin:0 0 8px 0}
.map-sheet-body{color:#cfdce7}

@media(min-width:901px){
  /* hide bottom sheet on large screens */
  .map-sheet{display:none}
}

  /* map description area: bosses row */
  .map-desc-bosses{display:flex;gap:8px;margin-top:8px}
  .map-desc-bosses img{width:40px;height:40px;object-fit:contain;border-radius:6px;background:rgba(255,255,255,0.02);padding:6px}

  /* Boss row: label with dividing line and right-aligned icons */
  .map-desc-bosses{display:flex;align-items:center;justify-content:flex-end;margin-top:12px}
  .map-desc-bosses .map-boss-label{display:flex;align-items:center;margin-right:12px;color:var(--muted,#cfcfcf);font-size:12px}
  .map-desc-bosses .map-boss-label span{position:relative;padding:0 10px}
  .map-desc-bosses .map-boss-label span:before{content:'';position:absolute;left:-120px;right:0;top:50%;height:1px;background:rgba(255,255,255,0.08);transform:translateY(-50%)}
  .map-desc-bosses .map-bosses-row{display:flex;align-items:center}

  /* Mobile sheet: ensure boss row stacks nicely and remains tappable */
  .map-sheet .map-desc-bosses{justify-content:flex-start;padding-top:8px}
  .map-sheet .map-desc-bosses .map-boss-label{margin-right:10px}
  .map-sheet .map-desc-bosses img{width:44px;height:44px;margin-left:6px}

  /* Fixed scrollable description window */
  .map-desc-scroll{max-height:132px;overflow-y:auto;padding-right:8px;margin-top:6px}
  .map-desc-scroll .map-desc-text{line-height:1.45;color:var(--muted,#ddd);font-size:14px}
  .map-desc-scroll::-webkit-scrollbar{height:6px;width:8px}
  .map-desc-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06);border-radius:6px}

  /* Simple boss row: icons shown directly, right-aligned on desktop */
  .map-desc-bosses.simple{display:flex;justify-content:flex-start;gap:10px;margin-top:10px}
  .map-desc-bosses.simple img{width:40px;height:40px;border-radius:6px;object-fit:cover}

  /* Mobile: boss row left aligned inside bottom sheet */
  @media (max-width:900px){
    .map-desc-bosses.simple{justify-content:flex-start}
  }

  /* small blurb before second boss icon */
  .boss-blurb{display:inline-block;font-size:12px;color:var(--muted,#bbb);margin-right:8px;margin-left:6px;align-self:center}

  /* Bosses wrap: label + icons + meta lines */
  .map-bosses-wrap{display:flex;flex-direction:column;gap:8px;margin-top:10px}
  .map-bosses-label{font-weight:600;color:var(--muted,#ddd);font-size:13px}
  .map-meta{display:flex;gap:12px;align-items:center;color:var(--muted,#cfcfcf);font-size:13px;margin-top:5px}
  .map-difficulty .stars{color:gold;margin-left:6px}
  .map-mountable strong{color:var(--muted,#fff);margin-left:6px}

  @media (max-width:900px){
    .map-meta{flex-direction:column;align-items:flex-start}
  }
  .map-desc-text{color:#cfdce7;margin-top:6px}
/* Bosses panel styles */
.bosses-panel{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.bosses-left{width:100%}
.boss-list{display:grid;grid-template-columns:repeat(3,120px);grid-auto-rows:120px;gap:8px;padding:6px 6px;justify-content:start;overflow-y:auto}
.boss-list::-webkit-scrollbar{height:8px;width:8px}
.boss-list{max-height:calc((120px * 3) + (8px * 2) + 12px); /* 3 rows visible */}
.boss-item{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:6px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;border:1px solid rgba(255,255,255,0.03);transition:transform .18s ease,box-shadow .18s ease}
.boss-item:focus,.boss-item:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,0.45)}
.boss-icon{width:80px;height:80px;object-fit:contain;border-radius:6px;background:rgba(255,255,255,0.02);padding:4px}
.boss-name{font-weight:800;color:#fff;text-align:center;font-size:12px}
.boss-item.selected{outline:2px solid rgba(255,184,107,0.9);box-shadow:0 8px 30px rgba(255,184,107,0.06)}

/* hide the right-side icon if user wants no icon on detail pane */
.boss-detail-img{display:none}
.bosses-panel{display:flex;gap:12px;align-items:flex-start}
.bosses-left{flex:0 0 auto}
.bosses-right{flex:1;margin-top:0}
.boss-detail-box{margin-left:6px}
.boss-detail{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:10px}
.boss-detail-box{max-width:420px}
.boss-detail-img{width:120px;height:120px;object-fit:contain;border-radius:8px;background:rgba(255,255,255,0.02);padding:8px}
.boss-detail-meta{flex:1}
.boss-detail-type{color:var(--muted);font-size:13px;margin-top:4px}
.boss-detail-desc{color:#cfdce7;margin-top:8px}
.item-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px;border-radius:12px;display:flex;gap:12px;align-items:center;transition:transform .22s ease,box-shadow .22s ease;cursor:pointer}
.item-card:focus,.item-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,0.45)}
.item-img{width:84px;height:84px;object-fit:contain;border-radius:8px;background:rgba(255,255,255,0.02);padding:6px}
.item-meta{display:flex;flex-direction:column}
.item-name{font-weight:700;margin:0}
.item-type{font-size:12px;color:var(--muted)}

.item-group{background:transparent;padding:6px 0}
.group-title{margin:0 0 8px 0;color:#fff;font-size:18px}
.group-list{display:grid;grid-template-columns:1fr;gap:10px}
.item-left{display:flex;align-items:center;gap:12px}
.item-right{margin-left:auto}
.rarity{color:#ffd166;font-weight:700}

/* Professions carousel */
.professions-wrap{margin-bottom:18px}
.professions-carousel{position:relative;display:flex;align-items:flex-start;gap:8px;overflow:visible}
.professions-track{
  display:flex;
  gap:12px;
  overflow-x:auto;
  /* allow cards to extend vertically inside the track so tall PNGs aren't clipped */
  overflow-y:visible;
  scroll-behavior:smooth;
  padding:12px 0 4px 0; /* 减少底部空隙，让滚动条更靠近卡片 */
  border-radius:12px;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  /* don't force a large global min-height here — let the track size to cards */
  min-height:0;
  height:auto;
}

/* Knight badge on the image */
.prof-left .prof-badge{
  position: absolute;
  left: 50%;
  top: 12px; /* place badge near the top center of the image */
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none; /* don't block clicks on the image */
  display: inline-block;
  min-width: 84px;
  padding: 6px 14px;
  text-align: center;
  line-height: 1;
  font-weight: 800;
  font-size: 13px;
  color: #071017;
  background: linear-gradient(90deg,#ffb86b,#ffd47a);
  box-shadow:0 6px 18px rgba(0,0,0,0.45);
  /* ticket-like serrated top/bottom edges created with clip-path */
  clip-path: polygon(
    0 0, 8% 0, 12% 6%, 20% 0, 28% 6%, 36% 0, 44% 6%, 52% 0, 60% 6%, 68% 0, 76% 6%, 84% 0, 92% 6%, 100% 0,
    100% 100%, 92% 100%, 88% 94%, 80% 100%, 72% 94%, 64% 100%, 56% 94%, 48% 100%, 40% 94%, 32% 100%, 24% 94%, 16% 100%, 8% 94%, 0 100%
  );
}

/* make the prof-card relatively positioned so badges can be absolute */
.prof-card{position:relative}

/* Custom throttled scrollbar: hide native and add a chunky thumb via pseudo elements */
.professions-track{
  scrollbar-width: none; /* firefox */
}
.professions-track::-webkit-scrollbar{display:none}

.prof-scrollbar{height:14px;margin-top:6px;background:transparent;display:block;position:relative}
.prof-scrollbar .thumb{position:absolute;left:0;top:3px;height:8px;background:rgba(255,255,255,0.18);border-radius:6px}
.prof-scrollbar .thumb:hover{background:rgba(255,255,255,0.28)}

.prof-card{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  background:linear-gradient(180deg, rgba(0,229,255,0.08), rgba(255,255,255,0.02));
  border-radius:12px;
  scroll-snap-align:center;
  box-shadow:0 2px 12px rgba(0,229,255,0.10);
  width:220px;
  min-height:420px;
  min-width:220px;
  padding:8px 10px;
  gap:6px;
}

.prof-left{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;height:auto;justify-content:flex-start;position:relative}

.prof-img{width:auto;max-width:100%;height:auto;max-height:380px;object-fit:contain;border-radius:10px;background:rgba(255,255,255,0.02);padding:0;display:block;margin:6px auto 0 auto;}
.prof-name{color:#fff;font-weight:800;font-size:20px;margin-top:6px}
/* hide the right icon column to show only the character PNGs */
.prof-right{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;justify-content:center;width:100%;padding:6px 4px 8px 4px}
.prof-item-icon{width:34px;height:34px;object-fit:contain;border-radius:6px;background:rgba(255,255,255,0.02);padding:4px;display:inline-block}
.prof-item-icon.placeholder{
  background: url('../assets/icon-placeholder.svg') center center no-repeat, rgba(255,255,255,0.01);
  background-size: 56%;
  opacity:0.95;
  border: none;
}

/* ensure the right column shows 6 vertical slots */

.prof-prev,.prof-next{background:rgba(0,0,0,0.65);color:#fff;border:none;padding:16px 18px;border-radius:10px;cursor:pointer;font-size:26px}

/* item placeholders and +more card */
.group-list{display:grid;grid-template-columns:1fr;gap:10px}
.item-placeholder{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--muted);min-height:108px}
.more-card{background:rgba(255,255,255,0.02);padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700;min-height:108px}

/* group 'More' button placed at right-bottom of each item-group */
.item-group{position:relative}
.group-more-btn{position:absolute;right:8px;bottom:-8px;background:var(--bg);color:#fff;border:1px solid rgba(255,255,255,0.04);padding:8px 10px;border-radius:8px;cursor:pointer}

/* video + condensed features layout */
.hero-video-row{display:flex;flex-direction:column;gap:18px;margin-top:18px}
@media(min-width:900px){
  .hero-video-row{flex-direction:row;align-items:flex-start}
  .hero-video-row .video-wrap{flex:1}
  .hero-video-row .mini-features{width:360px;margin-left:18px}
}
.prof-prev:focus,.prof-next:focus{outline:2px solid rgba(0,229,255,0.12)}

/* make carousel responsive and wrap to center */
@media(min-width:700px){
  .prof-card{min-width:180px}
}

/* Thin, close-to-content horizontal scrollbar for WebKit browsers (Chrome/Edge/Safari) */
.professions-track::-webkit-scrollbar{
  height:6px; /* 更短的滚动条 */
}
.professions-track::-webkit-scrollbar-track{
  background:transparent; /* keep it unobtrusive */
}
.professions-track::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.14);
  border-radius:6px;
}

/* Firefox: control scrollbar height */
.professions-track{scrollbar-gutter:stable}
@supports (scrollbar-width: thin){
  /* Firefox specific height can't be directly set; the thin keyword helps */
}

/* Position the hint a little closer to the scrollbar */
.carousel-hint{
  margin-top:4px; /* 更靠近滚动条 */
  color:#fff;
  text-align:center;
}


.gallery-grid{display:grid;grid-template-columns:1fr;gap:12px}
.gallery-grid img{width:100%;height:auto;border-radius:8px;object-fit:cover}
.video-wrap{max-width:980px;margin:0 auto}

/* footer hero */
.site-footer{margin-top:40px}
.footer-hero{position:relative;height:260px}
.footer-bg{position:absolute;inset:0;background-image:linear-gradient(160deg, rgba(3,9,23,0.6), rgba(7,7,18,0.8)), url('../assets/library_hero.png');background-size:cover;background-position:center;filter:brightness(0.6)}
.footer-overlay{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#fff}
.footer-logo{width:140px;mix-blend-mode:screen;opacity:0.95}

/* responsive */
@media(min-width:700px){
  .nav-toggle{display:none}
  .nav-list{display:flex}
  .feature-grid{grid-template-columns:repeat(3,1fr)}
  .hero-logo-layer{left:50%;transform:translateX(-50%);bottom:-70px}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .item-grid{grid-template-columns:repeat(2,1fr)}
  .group-list{grid-template-columns:1fr}
  /* Desktop: bosses panel becomes two-column */
  .bosses-panel{flex-direction:row;align-items:flex-start}
  .bosses-left{flex:0 0 60%}
  .bosses-right{flex:1;min-width:260px}
}

@media(prefers-reduced-motion:reduce){*{animation:none;transition:none}}

/* Item detail popup */
.item-popup{position:absolute;min-width:200px;max-width:266px;height:420px;background:linear-gradient(170deg,rgba(24,28,42,0.95) 0%,rgba(20,24,32,0.98) 60%,rgba(12,16,24,0.98) 100%);border-radius:14px;box-shadow:0 18px 45px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.2);padding:12px;z-index:120;display:none;border:2px solid rgba(255,255,255,0.65);outline:1px solid rgba(12,14,20,0.75);outline-offset:-4px;backdrop-filter:saturate(130%) blur(3px);overflow:hidden}
.item-popup::before{content:"";position:absolute;inset:0;border-radius:12px;background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,0.32),rgba(255,255,255,0) 60%);mix-blend-mode:screen;opacity:0.7;pointer-events:none}
.item-popup::after{content:"";position:absolute;inset:2px;border-radius:10px;border:1px solid rgba(255,255,255,0.25);box-shadow:0 0 22px rgba(41,132,255,0.25);pointer-events:none}
.item-popup[aria-hidden="false"]{display:block;animation:popup-in .16s ease both}
.item-popup-inner{position:relative;display:flex;flex-direction:column;height:100%;padding-top:0}
.item-popup-close{position:absolute;right:8px;top:8px;background:transparent;border:none;color:#ccc;font-size:18px;cursor:pointer;z-index:10}
.item-popup .popup-name{margin:8px 0 8px 0;font-weight:800;font-size:16px;text-align:left;flex-shrink:0;order:-3}
.item-popup .popup-stars{font-size:16px;letter-spacing:2px;color:#ffd166;line-height:1;text-align:left;margin:4px 0 8px 0;flex-shrink:0;order:-1}
.item-popup-image{width:100%;height:140px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.3);border-radius:8px;margin-bottom:8px;overflow:hidden;flex-shrink:0;order:-2}
.item-popup-image img{max-width:100%;max-height:100%;object-fit:contain}
.item-popup .item-popup-content{padding:0;color:#e6eef6;display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto}
.item-popup .popup-type{font-size:11px;color:var(--muted);margin:2px 0}
.item-popup .popup-desc{margin:2px 0;color:#cfdce7;font-size:11px;line-height:1.3}
.popup-skill-section{display:flex;flex-direction:column;gap:0px}
.popup-skill-label{font-size:11px;color:#ff6b9d;font-weight:700;line-height:1.4;display:inline;margin-right:4px}
.item-popup .popup-weapon-skill{font-size:11px;font-weight:700;color:#ff6b9d;line-height:1.4;padding:2px 0;width:auto;display:inline}
.item-popup .popup-stats{display:flex;gap:8px;flex-wrap:wrap;color:#ffd166;font-weight:700;width:100%;font-size:10px;align-items:center}
.item-popup .popup-separator{height:1px;background:linear-gradient(90deg, rgba(255,107,157,0.2), rgba(255,107,157,0.6), rgba(255,107,157,0.2));margin:3px 0;width:100%;display:block;flex-basis:100%}
.item-popup .popup-stats{display:flex;gap:8px;flex-wrap:wrap;color:#ffd166;font-weight:700;width:100%;font-size:10px}
.item-popup .stat{display:inline-block;padding:1px 0}

@keyframes popup-in{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}

/* Feedback / Teach the dev */
.feedback-section{padding:36px 0;border-top:1px solid rgba(255,255,255,0.02)}
.feedback-container{max-width:860px;margin:0 auto;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));border-radius:12px;border:1px solid rgba(255,255,255,0.02);box-shadow:0 12px 40px rgba(0,0,0,0.5)}
.feedback-title{text-align:center;font-size:22px;margin:6px 0 2px 0}
.feedback-lead{text-align:center;margin-bottom:14px;color:var(--muted)}
.feedback-form{max-width:720px;margin:0 auto 6px auto}
/* Make feedback submit button 50% width and centered */
.feedback-form #fb-submit{width:50%;align-self:center}

/* Preset Q/A box above the form */
.feedback-qa-container{max-width:720px;margin:12px auto 18px auto;display:flex;flex-direction:column;gap:10px}
.feedback-qa{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
.feedback-qa strong{display:block;color:#fff;font-weight:800;margin-bottom:6px}
.feedback-qa .qa-a{color:var(--muted);font-size:14px}

/* separate extras container placed outside the main feedback container */
.feedback-extras{margin-top:14px;margin-bottom:18px}
.feedback-extras .public-messages{max-width:720px;margin:12px auto}
.feedback-form .form-row{margin-bottom:12px;display:flex;flex-direction:column}
.feedback-form label{font-size:13px;color:#dfeef7;margin-bottom:6px}
.feedback-form input[type="text"],.feedback-form input[type="email"],.feedback-form textarea{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);padding:10px;border-radius:8px;color:#e6eef6}
.feedback-form textarea{resize:vertical}
.feedback-form .form-row-inline{display:flex;align-items:center;gap:12px}
.feedback-form .checkbox{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.feedback-form .required{color:#ffb86b}
.public-messages{margin-top:22px}
.public-messages-list{display:grid;gap:10px}
.public-message{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px;border-radius:10px}
.public-message .pm-meta{font-size:12px;color:var(--muted);margin-bottom:6px}
.public-message .pm-body{color:#cfdce7}

/* Preserve line breaks in public messages (Q/A formatting) */
.public-message .pm-body{white-space:pre-wrap}

@media(min-width:900px){
  .feedback-form .form-row-inline{flex-direction:row}
}

/* visually isolate feedback from other sections on small screens */
@media(max-width:700px){
  .feedback-container{padding:14px}
}

/* ================= Devlog Page (Blueprint / Engineering Style) ================= */
body.devlog-page {
  --blueprint-bg:#0d1622;
  --blueprint-grid:#1e3247;
  --devlog-accent:#4db2ff;
  --devlog-accent-soft:rgba(77,178,255,0.25);
  background:var(--blueprint-bg);
}
body.devlog-page .devlog-hero { position:relative; padding:80px 0 40px; overflow:hidden; }
.devlog-hero-bg { position:absolute; inset:0; pointer-events:none; opacity:0.55; background:
  linear-gradient(90deg,var(--blueprint-grid) 1px,transparent 1px) 0 0/80px 80px,
  linear-gradient(var(--blueprint-grid) 1px,transparent 1px) 0 0/80px 80px,
  radial-gradient(circle at 30% 40%,rgba(77,178,255,0.15),transparent 60%),
  radial-gradient(circle at 70% 60%,rgba(0,140,255,0.12),transparent 65%),
  #0a141e; }
.devlog-hero-inner { position:relative; }
.devlog-title { font-size: clamp(2.2rem,4.5vw,3.4rem); letter-spacing:1px; margin:0 0 12px; background:linear-gradient(90deg,#6ec8ff,#fff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.devlog-lead { max-width:820px; line-height:1.5; margin:0 0 28px; color:#adc9dd; }

.devlog-filters { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.devlog-filters .filter-group input[type=search]{ background:#132230; border:1px solid #244258; color:#cfe9f9; padding:10px 14px; border-radius:6px; min-width:260px; font-size:15px; box-shadow:0 0 0 0 rgba(77,178,255,0.4); transition:border .25s, box-shadow .25s, background .25s; }
.devlog-filters .filter-group input[type=search]:focus{ outline:none; border-color:var(--devlog-accent); box-shadow:0 0 0 3px var(--devlog-accent-soft); }
.devlog-filters #devlog-clear{ background:#173349; color:#b9d7ea; border:1px solid #2a4a63; padding:8px 14px; border-radius:6px; cursor:pointer; font-size:14px; }
.devlog-filters #devlog-clear:disabled{ opacity:.4; cursor:default; }
.devlog-filters #devlog-clear:not(:disabled):hover{ background:#22465f; }

/* Tag filter chips */
.devlog-filters .tags { display:flex; flex-wrap:wrap; gap:6px; }
.devlog-tag-btn { background:#132838; color:#9fc9e4; border:1px solid #2d5471; padding:6px 10px; font-size:12px; border-radius:20px; letter-spacing:.5px; cursor:pointer; position:relative; }
.devlog-tag-btn:hover{ background:#1a3a51; }
.devlog-tag-btn[aria-pressed=true]{ background:var(--devlog-accent); color:#04121c; border-color:var(--devlog-accent); font-weight:600; }

/* Timeline */
.devlog-content { padding:20px 0 90px; }
.devlog-timeline { list-style:none; margin:0; padding:0; counter-reset:dvstep; position:relative; }
.devlog-timeline::before{ content:""; position:absolute; left:28px; top:0; bottom:0; width:3px; background:linear-gradient(to bottom, var(--devlog-accent), transparent 85%); opacity:.55; }
.devlog-item { position:relative; margin:0 0 42px 0; padding:0 0 0 80px; }
.devlog-item:last-child{ margin-bottom:0; }
.devlog-item::before{ counter-increment:dvstep; content:counter(dvstep); position:absolute; left:0; top:2px; width:56px; height:56px; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:600; color:#fff; border-radius:50%; background:linear-gradient(135deg,#1b4b6d,#0e2737); box-shadow:0 0 0 4px #0f1d29, 0 0 0 5px #224a66; }
.devlog-card { background:#101e2a; border:1px solid #1d3749; border-radius:14px; padding:22px 26px 20px; position:relative; box-shadow:0 4px 16px -4px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03); overflow:hidden; }
.devlog-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(77,178,255,0.08),transparent 65%); pointer-events:none; }
.devlog-card:hover{ border-color:#2a5974; }
.devlog-meta { display:flex; flex-wrap:wrap; gap:10px 22px; font-size:13px; letter-spacing:.5px; color:#8ab3cb; margin:0 0 10px; }
.devlog-meta time{ font-weight:600; color:#bfe6ff; }
.devlog-title-sm { font-size:20px; margin:2px 0 10px; line-height:1.25; color:#e4f6ff; }
.devlog-summary { margin:0 0 12px; font-size:14px; line-height:1.5; color:#b2d2e4; }
.devlog-details { margin:0; font-size:13.5px; line-height:1.55; color:#c5dfef; white-space:pre-line; }
.devlog-tags-row { margin-top:14px; display:flex; flex-wrap:wrap; gap:6px; }
.devlog-tag-pill { font-size:11px; padding:4px 8px; background:#173349; color:#9fc9e4; border:1px solid #2d5471; border-radius:14px; letter-spacing:.5px; }
.devlog-tag-pill--primary { background:var(--devlog-accent); color:#042132; border-color:var(--devlog-accent); }

.devlog-empty { text-align:center; padding:40px 20px; font-size:15px; color:#82abc1; }

/* Expandable details (progressive enhancement) */
.devlog-expand-btn { background:none; border:none; color:var(--devlog-accent); cursor:pointer; font-size:12px; letter-spacing:.5px; padding:4px 0; }
.devlog-expand-btn:hover{ text-decoration:underline; }
.devlog-card[data-collapsed=true] .devlog-details { max-height:0; overflow:hidden; opacity:0; transition:max-height .4s ease, opacity .35s ease; }
.devlog-card[data-collapsed=false] .devlog-details { max-height:800px; opacity:1; transition:max-height .6s ease, opacity .5s ease; }

@media (max-width:860px){
  .devlog-item { padding-left:70px; }
  .devlog-item::before{ width:48px; height:48px; font-size:16px; }
  .devlog-card { padding:20px 20px 18px; }
}
@media (max-width:640px){
  .devlog-timeline::before{ left:22px; }
  .devlog-item { padding-left:58px; }
  .devlog-item::before{ left:0; width:44px; height:44px; }
}

.devlog-load-more-wrap{margin-top:24px;text-align:center}
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* Roadmap */
.devlog-roadmap-section{padding:30px 0 10px;position:relative}
.roadmap-title{margin:0 0 8px;font-size:clamp(1.7rem,3.4vw,2.4rem);background:linear-gradient(90deg,#6ec8ff,#fff);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.5px}
.roadmap-lead{margin:0 0 20px;max-width:820px;color:#9fb8c8;font-size:14px;line-height:1.5}
.roadmap{position:relative;margin:0;padding:0 0 0 14px;border-left:3px solid rgba(77,178,255,0.45);display:flex;flex-direction:column;gap:18px}
.roadmap.horizontal{flex-direction:row;align-items:stretch;gap:22px;padding:0 0 30px 0; /* increased bottom padding for legend visibility */ border-left:0;border-bottom:3px solid rgba(77,178,255,0.45);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;position:relative}
/* horizontal scroll fade hints */
.roadmap.horizontal:before,.roadmap.horizontal:after{content:"";position:absolute;top:0;bottom:0;width:48px;pointer-events:none;z-index:2;transition:opacity .25s}
.roadmap.horizontal:before{left:0;background:linear-gradient(90deg,#0d1622,rgba(13,22,34,0))}
.roadmap.horizontal:after{right:0;background:linear-gradient(270deg,#0d1622,rgba(13,22,34,0))}
.roadmap.horizontal.rm-at-start:before{opacity:0}
.roadmap.horizontal.rm-at-end:after{opacity:0}
.roadmap.horizontal .roadmap-item{min-width:220px;max-width:240px;scroll-snap-align:start;padding:12px 14px 16px 14px}
.roadmap.horizontal .roadmap-item:before{left:50%;top:auto;bottom:-26px;transform:translateX(-50%)}
.roadmap.horizontal .roadmap-item h3{font-size:14px}
.roadmap.horizontal .roadmap-item[data-truncated="true"] .roadmap-desc{display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.roadmap-item{position:relative;padding:8px 14px 10px 18px;background:#101e2a;border:1px solid #1d3749;border-radius:10px;box-shadow:0 3px 10px -2px rgba(0,0,0,0.4)}
.roadmap-item:before{content:"";position:absolute;left:-17px;top:18px;width:14px;height:14px;border-radius:50%;background:var(--rm-color,#4db2ff);box-shadow:0 0 0 4px #0f1d29,0 0 0 5px #224a66}
.roadmap-item.done{--rm-color:#42d48a}
.roadmap-item.current{--rm-color:#ffd166}
.roadmap-item.upcoming{--rm-color:#4db2ff}
.roadmap-item h3{margin:0 0 4px;font-size:15px;color:#e4f6ff;line-height:1.3}
.roadmap-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;letter-spacing:.5px;color:#8ab3cb;margin:0 0 6px}
.roadmap-desc{margin:0;font-size:12.5px;line-height:1.5;color:#c5dfef;white-space:pre-line}
.roadmap-legend{margin-top:18px;display:flex;gap:14px;font-size:11px;flex-wrap:wrap}
.roadmap-legend .legend-item{position:relative;padding-left:20px}
.roadmap-legend .legend-item:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px rgba(0,0,0,0.4)}
.legend-done{--c:#42d48a}
.legend-current{--c:#ffd166}
.legend-upcoming{--c:#4db2ff}
/* Collapse mode: hide done milestones before current */
.roadmap.rm-hide-done .roadmap-item.done:not(.rm-recent-done){display:none}
.roadmap-toggle-wrap{margin-top:10px}
.roadmap-toggle-btn{background:transparent;border:1px solid #2a4a63;color:#9fc9e4;padding:6px 14px;border-radius:20px;cursor:pointer;font-size:12px;letter-spacing:.5px;font-weight:600}
.roadmap-toggle-btn:hover,.roadmap-toggle-btn:focus{border-color:var(--devlog-accent);outline:none;color:#cfe9f9}
.roadmap-toggle-btn[aria-expanded="true"]{background:linear-gradient(90deg,var(--devlog-accent),#6ec8ff);color:#04121c;border-color:transparent}
@media (max-width:640px){.roadmap{padding-left:10px}.roadmap-item{padding:8px 12px 10px 16px}.roadmap-item:before{left:-19px}}
/* ================= Votes Page Styles ================= */
body.votes-page .nav-votes-link,
body .nav-votes-link.active { position:relative; }
body.votes-page .nav-votes-link:before,
.nav-votes-link.active:before { content:attr(data-icon); position:absolute; left:-1.1em; top:50%; transform:translateY(-50%); font-size:14px; }
body.votes-page .nav-votes-link, .nav-votes-link.active { background:linear-gradient(90deg,var(--accent),#6ff7d9); color:#032 !important; }

.votes-hero { padding:64px 0 32px; }
.votes-title { margin:0 0 10px; font-size:clamp(2rem,4.2vw,3rem); background:linear-gradient(90deg,#fff,#aef7ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.votes-lead { max-width:840px; line-height:1.5; color:#cfe6ef; margin:0 0 24px; }
.votes-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.votes-filters input[type=search]{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); color:#fff; padding:10px 14px; border-radius:6px; min-width:240px; }
.votes-filters input[type=search]:focus{ outline:2px solid var(--accent); }
.vote-tag-filters { display:flex; flex-wrap:wrap; gap:6px; }
.vote-tag-btn { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); color:#cfe6ef; padding:6px 10px; font-size:12px; border-radius:18px; cursor:pointer; }
.vote-tag-btn:hover{ background:rgba(255,255,255,0.12); }
.vote-tag-btn[aria-pressed=true]{ background:linear-gradient(90deg,var(--accent),#6ff7d9); color:#032; border-color:transparent; font-weight:600; }
.votes-grid-section { padding:14px 0 80px; }
.votes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; }
.vote-card { position:relative; background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:16px 16px 54px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.vote-card:hover{ border-color:rgba(255,255,255,0.25); }
.vote-card h3 { margin:0 0 4px; font-size:18px; color:#fff; line-height:1.25; }
.vote-meta { font-size:11px; letter-spacing:.5px; color:#9fb1c0; display:flex; gap:10px; flex-wrap:wrap; }
.vote-desc { font-size:13px; line-height:1.45; color:#d8e6ef; flex:1; }
.vote-tags { display:flex; flex-wrap:wrap; gap:4px; }
.vote-tags .tag { background:rgba(255,255,255,0.08); color:#dceef7; font-size:10px; padding:4px 6px; border-radius:10px; letter-spacing:.5px; }
.vote-footer { position:absolute; left:0; right:0; bottom:0; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.55)); }
.vote-btn { background:linear-gradient(90deg,var(--accent),#6ff7d9); color:#032; border:none; font-weight:700; padding:6px 14px; border-radius:20px; cursor:pointer; font-size:12px; letter-spacing:.5px; }
.vote-btn[disabled]{ opacity:.45; cursor:default; }
.vote-count { font-size:12px; font-weight:600; color:#fff; }
.votes-more-wrap { text-align:center; margin-top:34px; }
.votes-more-btn { background:transparent; border:1px solid rgba(255,255,255,0.15); color:#fff; padding:10px 26px; border-radius:40px; font-weight:600; letter-spacing:.06em; cursor:pointer; font-size:14px; }
.votes-more-btn[aria-expanded=true]{ background:linear-gradient(90deg,var(--accent),#6ff7d9); color:#032; border-color:transparent; }
.votes-empty { text-align:center; padding:40px 10px; color:#9fb1c0; font-size:15px; }
@media (max-width:640px){ .vote-card { padding:14px 14px 50px; } }