/* ============================================================
   Hornycraft 中文官网 — 像素方块风格主题
   Color: 草绿#6B8E23 天蓝#64B5F6 泥土棕#795548 方块灰#B0BEC5
   ============================================================ */

/* ========== FONT IMPORTS ========== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

/* ========== CSS VARIABLES ========== */
:root {
  /* Pixel World Color Palette */
  --grass: #6B8E23;
  --grass-light: #8FBC3A;
  --grass-dark: #556B2F;
  --sky: #64B5F6;
  --sky-light: #90CAF9;
  --sky-dark: #42A5F5;
  --dirt: #795548;
  --dirt-light: #A1887F;
  --dirt-dark: #5D4037;
  --stone: #B0BEC5;
  --stone-light: #CFD8DC;
  --stone-mid: #90A4AE;

  /* Backgrounds */
  --bg: #fafbf7;
  --bg-warm: #f5f0e8;
  --bg-card: #ffffff;
  --bg-header: #3E2723;

  /* Text */
  --text: #2c2420;
  --text-soft: #5D4E37;
  --text-muted: #8D7B6E;
  --text-light: #bcaaa4;

  /* Accents */
  --accent: var(--grass);
  --accent-dk: var(--grass-dark);
  --accent-bright: var(--grass-light);
  --gold: #D4A017;
  --danger-red: #C62828;
  --warm-beige: #EFEBE0;

  /* Fonts */
  --font-serif: 'Noto Serif SC', 'SimSun', 'STSong', serif;
  --font-sans: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* Spacing */
  --content-max: 1100px;
  --card-radius: 8px;
  --section-pad: 64px 24px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}

/* ========== RESET ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);font-size:16px;line-height:1.75;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--grass);text-decoration:none;transition:color .2s}
a:hover{color:var(--grass-dark)}

/* ========== ACCESSIBILITY ========== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ========== HEADER & NAVIGATION ========== */
.site-header{position:sticky;top:0;z-index:1000;background:var(--bg-header);border-bottom:3px solid var(--grass);box-shadow:var(--shadow-md)}
.header-inner{max-width:var(--content-max);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:60px}
.site-logo{font-family:var(--font-serif);font-size:1.25rem;font-weight:900;color:#fff;display:flex;align-items:center;gap:8px}
.site-logo img{width:28px;height:28px;border-radius:4px}
.site-logo:hover{color:var(--grass-light)}
.nav-links{display:flex;list-style:none;gap:4px}
.nav-links a{display:block;padding:8px 16px;color:#d7ccc8;font-size:0.9rem;font-weight:500;border-radius:4px;transition:all .2s}
.nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(255,255,255,0.1)}
.nav-cta{padding:6px 18px!important;background:var(--grass)!important;color:#fff!important;font-weight:700!important;border-radius:4px!important}
.nav-cta:hover{background:var(--grass-light)!important;color:#fff!important}
.nav-toggle{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:4px 8px}

/* ========== HERO SECTION ========== */
.hero{position:relative;overflow:hidden;padding:60px 24px 80px;text-align:center;color:#fff}
.hero-bg{position:absolute;inset:0;background-image:url('../img/header.jpg');background-size:cover;background-position:center;z-index:0}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(62,39,35,0.75) 0%,rgba(62,39,35,0.85) 100%)}
.hero-inner{position:relative;z-index:1;max-width:800px;margin:0 auto}
.hero-title-main{font-family:var(--font-serif);font-size:2.8rem;font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,0.4);margin-bottom:12px;line-height:1.3}
.hero-tagline{font-size:1.15rem;color:var(--stone-light);margin-bottom:8px;font-weight:300}
.hero-desc{font-size:0.95rem;color:var(--text-light);max-width:600px;margin:0 auto;line-height:1.8}

/* Sub-page hero variants */
.hero-subpage{padding:40px 24px 48px}
.hero-subpage-title{font-size:2rem;font-weight:700}

/* Page-specific hero backgrounds */
.hero-home .hero-bg{background-image:url('../img/header.jpg')}
.hero-guide .hero-bg{background-image:url('../img/screenshot-03.jpg')}
.hero-story .hero-bg{background-image:url('../img/screenshot-05.jpg')}
.hero-characters .hero-bg{background-image:url('../img/screenshot-02.jpg')}
.hero-faq .hero-bg{background-image:url('../img/screenshot-04.jpg')}

/* ========== CONTENT SECTIONS ========== */
.content-section{padding:var(--section-pad);max-width:var(--content-max);margin:0 auto}
.section-alt{background:var(--bg-warm)}
.section-no-padding{padding:0}
.content-section-no-top{padding-top:0}

/* ========== SECTION HEADINGS ========== */
.section-heading{font-family:var(--font-serif);font-size:2rem;font-weight:700;text-align:center;color:var(--dirt-dark);margin-bottom:8px}
.section-subtext{text-align:center;color:var(--text-soft);margin-bottom:24px;font-size:0.95rem}
.section-heading-alt{font-family:var(--font-serif);font-size:2rem;font-weight:700;text-align:center;color:var(--dirt-dark);margin-bottom:20px}
.content-section h2{font-family:var(--font-serif);font-size:2.2rem;font-weight:700;color:var(--text);margin-bottom:12px}

/* ========== GAME INFO CARDS (index) ========== */
.game-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:8px}
.game-info-card{background:var(--bg-card);border:2px solid var(--stone-light);border-radius:var(--card-radius);padding:20px 16px;text-align:center;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.game-info-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.game-info-card .info-icon{font-size:1.8rem;margin-bottom:8px;display:block}
.game-info-card .info-value{font-family:var(--font-serif);font-size:1.5rem;font-weight:900;color:var(--grass);display:block}
.game-info-card .info-label{font-size:0.8rem;color:var(--text-muted);margin-top:2px}
.game-info-desc{text-align:center;color:var(--text-muted);font-size:0.85rem;margin-top:0;margin-bottom:32px}

/* ========== PROSE CENTERED (index overview) ========== */
.prose-centered{text-align:center;max-width:800px;margin:0 auto 32px;color:var(--text-soft);line-height:1.85;font-size:0.95rem}
.prose-centered:last-of-type{margin-bottom:40px}

/* ========== FEATURE CARDS (index) ========== */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.feature-card{background:var(--bg-card);border-left:4px solid var(--grass);border-radius:var(--card-radius);padding:24px;box-shadow:var(--shadow-sm);transition:transform .2s}
.feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.feature-card h3{font-family:var(--font-serif);font-size:1.15rem;font-weight:700;color:var(--dirt-dark);margin-bottom:8px}
.feature-card p{font-size:0.9rem;color:var(--text-soft);line-height:1.7}

/* ========== SCREENSHOT GALLERY ========== */
.screenshot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.screenshot-item{border-radius:var(--card-radius);overflow:hidden;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .2s;border:2px solid var(--stone-light)}
.screenshot-item:hover{transform:scale(1.02);box-shadow:var(--shadow-md);border-color:var(--grass)}
.screenshot-item img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* ========== LIGHTBOX ========== */
.lightbox{display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,0.9);justify-content:center;align-items:center}
.lightbox.active{display:flex}
.lightbox img{max-width:90vw;max-height:85vh;border-radius:8px;box-shadow:var(--shadow-lg)}
.lightbox-close{position:absolute;top:20px;right:30px;color:#fff;font-size:2.5rem;cursor:pointer;background:none;border:none;line-height:1}
.lightbox-close:hover{color:var(--grass-light)}

/* ========== REVIEWS SECTION ========== */
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.review-card{background:var(--bg-card);border:2px solid var(--warm-beige);border-radius:var(--card-radius);padding:24px;box-shadow:var(--shadow-sm)}
.review-card .review-stars{color:var(--gold);font-size:1.1rem;margin-bottom:8px}
.review-card .review-text{font-size:0.9rem;color:var(--text-soft);line-height:1.8;font-style:italic;margin-bottom:12px}
.review-card .review-author{font-size:0.8rem;color:var(--text-muted);font-weight:500}

/* ========== CTA BANNER (index only) ========== */
.cta-banner{background:linear-gradient(135deg,var(--dirt-dark),#4E342E);padding:56px 24px;text-align:center;color:#fff}
.cta-banner h2{font-family:var(--font-serif);font-size:2rem;font-weight:700;margin-bottom:8px}
.cta-banner p{font-size:1rem;color:var(--stone-light);margin-bottom:28px}
.cta-btn{display:inline-block;padding:14px 48px;background:var(--grass);color:#fff;font-size:1.1rem;font-weight:700;border-radius:4px;text-decoration:none;transition:all .25s;box-shadow:0 4px 12px rgba(107,142,35,0.4)}
.cta-btn:hover{background:var(--grass-light);color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(107,142,35,0.5)}

/* ========== CONTENT LIST CLASSES ========== */
.content-list{list-style:disc;padding-left:20px}
.content-list-num{list-style:decimal;padding-left:24px}
.content-li{margin-bottom:5px;color:var(--text-soft)}
.content-li-sm{margin-bottom:4px;color:var(--text-soft)}
.content-li-md{margin-bottom:8px;color:var(--text-soft)}
.content-li-lg{margin-bottom:10px;color:var(--text-soft)}

/* ========== COLORED STRONG TAGS ========== */
.strong-green{color:var(--grass);font-weight:700}
.strong-brown{color:var(--dirt-dark);font-weight:700}
.strong-blue{color:var(--sky-dark);font-weight:700}
.strong-gold{color:var(--gold);font-weight:700}
.strong-muted{color:var(--text-muted);font-weight:400}

/* ========== TABLE CLASSES ========== */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.td-highlight{color:var(--grass);font-weight:700}

/* ========== GUIDE PAGE CLASSES ========== */
.guide-intro{color:var(--text-soft);font-size:0.95rem;line-height:1.85;margin-bottom:24px}
.guide-intro-top{color:var(--text-soft);font-size:0.95rem;line-height:1.85;margin-bottom:24px;margin-top:8px}
.route-heading{font-family:var(--font-serif);font-size:1.3rem;font-weight:700;color:var(--dirt-dark);margin:32px 0 12px;padding-left:12px;border-left:3px solid var(--grass)}
.route-desc{color:var(--text-soft);font-size:0.9rem;line-height:1.75;margin-bottom:16px}
.guide-steps-wrapper{counter-reset:guide-step}
.guide-step{counter-increment:guide-step;margin-bottom:24px;padding:20px;background:var(--bg-card);border:2px solid var(--stone-light);border-radius:var(--card-radius);box-shadow:var(--shadow-sm)}
.guide-step h3{font-family:var(--font-serif);font-size:1.1rem;font-weight:700;color:var(--dirt-dark);margin-bottom:8px}
.guide-step h3::before{content:'#' counter(guide-step) ' ';color:var(--grass);font-weight:900}
.guide-step p{font-size:0.9rem;color:var(--text-soft);line-height:1.75}
.guide-tip{background:#E8F5E9;border-left:4px solid var(--grass);padding:12px 16px;border-radius:0 var(--card-radius) var(--card-radius) 0;margin:16px 0;font-size:0.9rem;color:var(--grass-dark)}

/* ========== STORY PAGE CLASSES ========== */
.chapter-title{font-family:var(--font-serif);font-size:1.25rem;font-weight:700;color:var(--dirt-dark);margin:36px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--stone-light)}
.chapter-block{background:var(--bg-card);border:2px solid var(--warm-beige);border-radius:var(--card-radius);padding:24px;margin-bottom:20px;box-shadow:var(--shadow-sm)}
.chapter-block h3{font-family:var(--font-serif);font-size:1.1rem;font-weight:700;color:var(--grass);margin-bottom:8px}
.chapter-block p{font-size:0.9rem;color:var(--text-soft);line-height:1.8}

/* ========== CHARACTERS PAGE CLASSES ========== */
.char-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.char-card{background:var(--bg-card);border:2px solid var(--stone-light);border-radius:var(--card-radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s}
.char-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.char-card img{width:100%;height:280px;object-fit:cover}
.char-card-body{padding:16px}
.char-card-body h3{font-family:var(--font-serif);font-size:1.1rem;font-weight:700;color:var(--dirt-dark);margin-bottom:4px}
.char-card-body .char-role{font-size:0.8rem;color:var(--text-muted);margin-bottom:8px}
.char-card-body p{font-size:0.85rem;color:var(--text-soft);line-height:1.7}
.char-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.char-tag{display:inline-block;padding:2px 10px;background:var(--bg-warm);color:var(--grass-dark);font-size:0.75rem;border-radius:12px;border:1px solid var(--stone-light)}
.section-subheading{text-align:center;margin:40px 0 24px;font-family:var(--font-serif);font-size:1.4rem;font-weight:700;color:var(--dirt-dark)}
.section-title-group-spaced{margin-top:48px}

/* ========== CUSTOM TABLE ========== */
.custom-table{width:100%;border-collapse:collapse;font-size:0.9rem}
.custom-table th,.custom-table td{padding:10px 14px;text-align:left;border:1px solid var(--stone-light)}
.custom-table th{background:var(--bg-warm);font-weight:700;color:var(--dirt-dark);font-family:var(--font-serif)}
.custom-table tr:nth-child(even){background:rgba(245,240,232,0.4)}

/* ========== FAQ PAGE CLASSES ========== */
.faq-intro{color:var(--text-soft);margin-bottom:32px;font-size:0.95rem;line-height:1.8}
.faq-list{max-width:800px}
.faq-item{border:2px solid var(--stone-light);border-radius:var(--card-radius);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.faq-question{width:100%;padding:16px 20px;text-align:left;background:var(--bg-card);border:none;font-family:var(--font-sans);font-size:0.95rem;font-weight:600;color:var(--text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .2s}
.faq-question:hover{background:var(--bg-warm)}
.faq-question::after{content:'+';font-size:1.3rem;color:var(--grass);font-weight:700;transition:transform .3s}
.faq-question.active::after{content:'−';transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease}
.faq-answer.open{max-height:2000px}
.faq-answer-inner{padding:0 20px 16px;font-size:0.9rem;color:var(--text-soft);line-height:1.8}

/* ========== SYSTEM REQUIREMENTS ========== */
.sys-reqs-h3{font-family:var(--font-serif);font-size:1.2rem;font-weight:700;color:var(--dirt-dark);margin-top:24px;margin-bottom:12px}
.sys-reqs-h3:first-of-type{margin-top:8px}
.sys-note{margin-top:20px;color:var(--text-muted);font-size:0.9rem}
.faq-note{margin-top:16px;color:var(--text-soft);font-size:0.9rem;line-height:1.7}

/* ========== FOOTER ========== */
.site-footer{background:var(--bg-header);padding:24px;text-align:center;border-top:3px solid var(--grass)}
.site-footer p{color:var(--text-light);font-size:0.85rem;margin:0}

/* ========== RESPONSIVE: 768px ========== */
@media(max-width:768px){
  .hero{padding:48px 20px 60px}
  .hero-title-main{font-size:2rem}
  .hero-subpage{padding:32px 20px 40px}
  .hero-subpage-title{font-size:1.6rem}
  .content-section{padding:48px 20px}
  .features-grid{grid-template-columns:1fr}
  .screenshot-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .char-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .reviews-grid{grid-template-columns:1fr}
  .game-info-grid{grid-template-columns:repeat(2,1fr)}
  .section-heading{font-size:1.6rem}
  .content-section h2{font-size:1.8rem}
  .cta-banner h2{font-size:1.6rem}
  .nav-links{display:none;position:absolute;top:60px;left:0;right:0;background:var(--bg-header);flex-direction:column;padding:12px 0;border-top:2px solid var(--grass)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 24px}
  .nav-toggle{display:block}
}

/* ========== RESPONSIVE: 480px ========== */
@media(max-width:480px){
  .hero{padding:36px 16px 48px}
  .hero-title-main{font-size:1.6rem}
  .hero-subpage{padding:24px 16px 32px}
  .hero-subpage-title{font-size:1.3rem}
  .hero-tagline{font-size:0.95rem}
  .hero-desc{font-size:0.85rem}
  .content-section{padding:36px 16px}
  .section-heading{font-size:1.4rem}
  .content-section h2{font-size:1.5rem}
  .game-info-grid{grid-template-columns:1fr 1fr}
  .screenshot-grid{grid-template-columns:1fr}
  .char-grid{grid-template-columns:1fr}
  .cta-banner{padding:40px 16px}
  .cta-banner h2{font-size:1.3rem}
  .cta-btn{padding:12px 32px;font-size:1rem}
  .guide-step{padding:16px}
}