/* ═══════════════════════════════════════════════════════════
   麻將學院 | Mahjong Academy — Stylesheet
   Design: Jade & Gold on Dark — 麻將牌面美學
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg: #0a0f0d; --bg-soft: #111a16; --bg-card: #162019; --bg-card-h: #1d2b23;
  --surface: #1e2e26; --border: #2a3f32; --border-h: #3a5a45;
  --jade: #2dd4a0; --jade-dim: #1a8c66; --jade-glow: rgba(45,212,160,.25);
  --gold: #d4a72d; --gold-dim: #8c6e1a;
  --ivory: #f5f0e8; --ivory-dim: #c8bfa8;
  --text: #e8e0d4; --text-dim: #9a9282; --text-muted: #6a6458;
  --font-serif: 'Noto Serif TC','Playfair Display',Georgia,serif;
  --font-sans: 'Noto Sans TC','Inter',system-ui,sans-serif;
  --section-py: 7rem; --container: 1200px;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px;
  --ease: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font-sans); background:var(--bg); color:var(--text); line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { color:var(--jade); text-decoration:none; transition:color .25s var(--ease); }
a:hover { color:var(--gold); }
::selection { background:var(--jade-dim); color:var(--ivory); }
ul { list-style:none; }
.container { max-width:var(--container); margin:0 auto; padding:0 1.5rem; }

/* Language Switcher */
.lang-switcher { position:fixed; top:1rem; right:1rem; z-index:1100; display:flex; gap:.25rem; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:.25rem; backdrop-filter:blur(12px); }
.lang-btn { border:none; background:transparent; color:var(--text-dim); font-family:var(--font-sans); font-size:.8rem; font-weight:500; padding:.35rem .7rem; border-radius:999px; cursor:pointer; transition:all .25s var(--ease); }
.lang-btn.active { background:var(--jade-dim); color:var(--ivory); }
.lang-btn:hover:not(.active) { color:var(--text); }

/* Navbar */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(10,15,13,.85); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); transition:background .3s var(--ease); }
.navbar.scrolled { background:rgba(10,15,13,.96); }
.nav-container { max-width:var(--container); margin:0 auto; padding:0 1.5rem; display:flex; align-items:center; justify-content:space-between; height:64px; }
.nav-logo { display:flex; align-items:center; gap:.5rem; font-family:var(--font-serif); font-size:1.3rem; font-weight:700; color:var(--ivory); }
.logo-tile { font-size:1.6rem; }
.logo-accent { color:var(--jade); }
.logo-brand { font-family: var(--font-sans); font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; color: var(--ivory); }
.nav-menu { display:flex; gap:.25rem; }
.nav-menu a { color:var(--text-dim); font-size:.9rem; font-weight:500; padding:.5rem 1rem; border-radius:var(--r-sm); transition:all .25s var(--ease); }
.nav-menu a:hover { color:var(--jade); background:var(--surface); }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.5rem; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--text); border-radius:2px; transition:all .3s var(--ease); }

/* Hero */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding-top:64px; }
.hero-bg-pattern { position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(45,212,160,.08) 0%,transparent 70%),radial-gradient(ellipse 60% 50% at 30% 70%,rgba(212,167,45,.05) 0%,transparent 70%); }
.hero-content { position:relative; z-index:2; text-align:center; max-width:720px; padding:2rem 1.5rem; }
.hero-badge { display:inline-block; background:var(--surface); border:1px solid var(--border); color:var(--jade); font-size:.85rem; font-weight:500; padding:.4rem 1.2rem; border-radius:999px; margin-bottom:1.5rem; letter-spacing:.05em; }
.hero-title { font-family:var(--font-serif); font-size:clamp(3rem,8vw,5.5rem); font-weight:900; line-height:1.1; color:var(--ivory); margin-bottom:1rem; letter-spacing:.04em; }
.hero-subtitle { font-size:1.15rem; color:var(--text-dim); margin-bottom:2.5rem; max-width:540px; margin-left:auto; margin-right:auto; }
.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:3rem; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-size:.95rem; font-weight:600; padding:.75rem 2rem; border-radius:var(--r-md); border:none; cursor:pointer; transition:all .3s var(--ease); }
.btn-primary { background:linear-gradient(135deg,var(--jade-dim),var(--jade)); color:var(--bg); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px var(--jade-glow); color:var(--bg); }
.btn-outline { background:transparent; border:1px solid var(--border-h); color:var(--text); }
.btn-outline:hover { background:var(--surface); border-color:var(--jade); color:var(--jade); }

/* Hero Stats */
.hero-stats { display:flex; justify-content:center; gap:2.5rem; }
.stat-item { text-align:center; }
.stat-number { display:block; font-family:var(--font-serif); font-size:2rem; font-weight:900; color:var(--jade); }
.stat-label { font-size:.8rem; color:var(--text-muted); font-weight:500; }

/* Floating Tiles */
.hero-tiles { position:absolute; inset:0; z-index:1; pointer-events:none; }
.floating-tile { position:absolute; font-size:2.5rem; opacity:.12; animation:float 8s ease-in-out infinite; }
.t1{top:15%;left:8%;animation-delay:0s} .t2{top:25%;right:10%;animation-delay:1s} .t3{bottom:30%;left:12%;animation-delay:2s} .t4{top:60%;right:15%;animation-delay:3s} .t5{bottom:15%;right:30%;animation-delay:4s} .t6{top:40%;left:25%;animation-delay:5s}
@keyframes float { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-20px) rotate(8deg)} }

/* Scroll Indicator */
.hero-scroll { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:2; }
.scroll-indicator { width:24px; height:40px; border:2px solid var(--border-h); border-radius:12px; position:relative; }
.scroll-indicator::after { content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:4px; height:8px; background:var(--jade); border-radius:2px; animation:scroll-dot 1.5s ease-in-out infinite; }
@keyframes scroll-dot { 0%{opacity:1;transform:translateX(-50%) translateY(0)} 100%{opacity:0;transform:translateX(-50%) translateY(16px)} }

/* Section Shared */
.section { padding:var(--section-py) 0; position:relative; }
.section-header { text-align:center; margin-bottom:4rem; }
.section-tag { display:inline-block; font-size:.8rem; font-weight:600; color:var(--jade); text-transform:uppercase; letter-spacing:.12em; margin-bottom:.75rem; }
.section-title { font-family:var(--font-serif); font-size:clamp(2rem,5vw,3rem); font-weight:900; color:var(--ivory); margin-bottom:1rem; line-height:1.2; }
.section-desc { max-width:600px; margin:0 auto; color:var(--text-dim); font-size:1.05rem; }
.text-accent { color:var(--jade); }

/* About */
.section-about { background:var(--bg); }
.about-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.about-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:2rem 1.5rem; text-align:center; transition:all .35s var(--ease); }
.about-card:hover { background:var(--bg-card-h); border-color:var(--jade-dim); transform:translateY(-4px); }
.about-icon { font-size:2.5rem; margin-bottom:1rem; }
.about-card h3 { font-family:var(--font-serif); font-size:1.15rem; color:var(--ivory); margin-bottom:.6rem; }
.about-card p { font-size:.88rem; color:var(--text-dim); line-height:1.65; }

/* Origin / Timeline */
.section-origin { background:var(--bg-soft); }
.timeline { position:relative; max-width:700px; margin:0 auto; padding-left:2rem; }
.timeline::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,var(--jade),var(--gold-dim),var(--jade-dim)); }
.timeline-item { position:relative; padding:0 0 3rem 2rem; }
.timeline-item:last-child { padding-bottom:0; }
.timeline-marker { position:absolute; left:-2rem; top:.3rem; width:14px; height:14px; background:var(--jade); border:3px solid var(--bg-soft); border-radius:50%; transform:translateX(-50%); box-shadow:0 0 12px var(--jade-glow); }
.timeline-era { display:inline-block; font-size:.75rem; font-weight:600; color:var(--gold); background:rgba(212,167,45,.1); border:1px solid rgba(212,167,45,.2); padding:.2rem .7rem; border-radius:999px; margin-bottom:.5rem; }
.timeline-content h3 { font-family:var(--font-serif); font-size:1.2rem; color:var(--ivory); margin-bottom:.4rem; }
.timeline-content p { font-size:.9rem; color:var(--text-dim); line-height:1.65; }

/* Rules */
.section-rules { background:var(--bg); }
.rules-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.rule-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:2rem; transition:all .35s var(--ease); position:relative; overflow:hidden; }
.rule-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent,var(--jade)); opacity:0; transition:opacity .35s var(--ease); }
.rule-card:hover { background:var(--bg-card-h); border-color:var(--accent,var(--jade)); transform:translateY(-4px); }
.rule-card:hover::before { opacity:1; }
.rule-flag { font-size:2rem; margin-bottom:.5rem; }
.rule-card h3 { font-family:var(--font-serif); font-size:1.2rem; color:var(--ivory); margin-bottom:.4rem; }
.rule-keyword { font-size:.8rem; font-weight:600; color:var(--jade); margin-bottom:.75rem; letter-spacing:.04em; }
.rule-card > p { font-size:.88rem; color:var(--text-dim); line-height:1.65; margin-bottom:1rem; }
.rule-link { font-size:.85rem; font-weight:600; color:var(--accent,var(--jade)); }
.rule-link:hover { color:var(--gold); }

/* Tutorial */
.section-tutorial { background:var(--bg-soft); }
.tutorial-path { max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:1.5rem; }
.tutorial-step { display:flex; gap:2rem; align-items:flex-start; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:2rem; transition:all .35s var(--ease); }
.tutorial-step:hover { border-color:var(--jade-dim); background:var(--bg-card-h); }
.step-number { font-family:var(--font-serif); font-size:3rem; font-weight:900; color:var(--jade-dim); line-height:1; flex-shrink:0; min-width:60px; }
.step-content h3 { font-family:var(--font-serif); font-size:1.2rem; color:var(--ivory); margin-bottom:.4rem; }
.step-content p { font-size:.9rem; color:var(--text-dim); line-height:1.65; margin-bottom:.75rem; }
.step-tags { display:flex; gap:.5rem; flex-wrap:wrap; }
.step-tags span { font-size:.75rem; font-weight:500; color:var(--jade); background:rgba(45,212,160,.08); border:1px solid rgba(45,212,160,.15); padding:.2rem .6rem; border-radius:999px; }

/* Community */
.section-community { background:var(--bg); }
.community-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:3rem; }
.community-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:2rem; transition:all .35s var(--ease); }
.community-card:hover { background:var(--bg-card-h); transform:translateY(-4px); }
.community-icon { font-size:2.5rem; margin-bottom:1rem; }
.community-card h3 { font-family:var(--font-serif); font-size:1.15rem; color:var(--ivory); margin-bottom:.5rem; }
.community-card p { font-size:.88rem; color:var(--text-dim); line-height:1.65; margin-bottom:1rem; }
.community-link { font-size:.85rem; font-weight:600; }

/* CTA */
.community-cta { text-align:center; background:linear-gradient(135deg,var(--surface),var(--bg-card)); border:1px solid var(--border); border-radius:var(--r-xl); padding:3rem 2rem; }
.community-cta h3 { font-family:var(--font-serif); font-size:1.5rem; color:var(--ivory); margin-bottom:.5rem; }
.community-cta > p { color:var(--text-dim); margin-bottom:1.5rem; }
.cta-form { display:flex; gap:.75rem; max-width:460px; margin:0 auto; }
.cta-input { flex:1; background:var(--bg); border:1px solid var(--border); color:var(--text); font-family:var(--font-sans); font-size:.9rem; padding:.7rem 1rem; border-radius:var(--r-md); outline:none; transition:border-color .25s var(--ease); }
.cta-input::placeholder { color:var(--text-muted); }
.cta-input:focus { border-color:var(--jade); }

/* Footer */
.footer { background:var(--bg-soft); border-top:1px solid var(--border); padding:4rem 0 2rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; margin-bottom:3rem; }
.footer-brand { display:flex; flex-direction:column; gap:.75rem; }
.footer-brand .logo-tile { font-size:1.8rem; }
.footer-brand .logo-text { font-family:var(--font-sans); font-size:1.3rem; font-weight:700; color:var(--ivory); }
.footer-brand p { font-size:.85rem; color:var(--text-dim); max-width:280px; }
.footer-links h4 { font-size:.85rem; font-weight:600; color:var(--ivory); margin-bottom:.75rem; }
.footer-links a { font-size:.85rem; color:var(--text-dim); display:block; padding:.2rem 0; }
.footer-links a:hover { color:var(--jade); }
.footer-bottom { border-top:1px solid var(--border); padding-top:1.5rem; text-align:center; font-size:.8rem; color:var(--text-muted); }

/* Scroll Reveal */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* Responsive */
@media(max-width:1024px) {
  .about-grid { grid-template-columns:repeat(2,1fr); }
  .rules-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  :root { --section-py:4.5rem; }
  .nav-menu { display:none; position:fixed; top:64px; left:0; right:0; background:rgba(10,15,13,.98); backdrop-filter:blur(16px); flex-direction:column; padding:1rem; border-bottom:1px solid var(--border); }
  .nav-menu.open { display:flex; }
  .nav-toggle { display:flex; }
  .about-grid { grid-template-columns:1fr; }
  .rules-grid { grid-template-columns:1fr; }
  .community-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .tutorial-step { flex-direction:column; gap:1rem; }
  .step-number { font-size:2rem; min-width:auto; }
  .hero-stats { gap:1.5rem; }
  .stat-number { font-size:1.5rem; }
  .cta-form { flex-direction:column; }
}