/* =========================================================
   Only 3 Fans MahJong Club — shared site stylesheet
   Design system matches the club's existing tools
   (Riichi Score Dojo / Live Scorer / Score Drill).
   Edit this one file to change the look of every page.
   ========================================================= */

:root{
  --felt-1:#0f3329; --felt-2:#194538; --cream:#f3e8ce; --cream-2:#ece0c3;
  --gold:#c9a24a; --gold-bright:#e8c874; --ink:#241f1a; --red:#a8342a; --red-bright:#c94436;
  --ok:#3f8f5c; --bad:#b8402f; --panel:#123a2f; --panel-2:#0c281f;
  --maxw:1080px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1200px 800px at 15% -10%, #1c5344 0%, transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, #164236 0%, transparent 55%),
    linear-gradient(180deg, var(--felt-1), var(--felt-2) 55%, #0c281f 100%);
  background-attachment:fixed;
  color:var(--cream);
  font-family:'Zen Kaku Gothic New','Noto Sans TC',sans-serif;
  min-height:100vh;
  display:flex; flex-direction:column;
}
a{color:var(--gold-bright); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 16px; width:100%;}

/* ---------- Header / Nav ---------- */
.site-header{
  background:rgba(9,26,20,.72); backdrop-filter:blur(6px);
  border-bottom:2px solid var(--gold); position:sticky; top:0; z-index:50;
}
.site-header .inner{
  max-width:var(--maxw); margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:46px; width:auto;}
.brand .name{font-family:'Shippori Mincho',serif; font-weight:800; color:var(--gold-bright); font-size:1.05rem; line-height:1.2;}
.brand .name small{display:block; font-family:'Zen Kaku Gothic New','Noto Sans TC',sans-serif; font-weight:500; font-size:.72rem; color:var(--cream-2); opacity:.8;}

.site-nav{display:flex; align-items:center; gap:4px; flex-wrap:wrap;}
.site-nav a{
  color:var(--cream-2); font-weight:700; font-size:.86rem; padding:8px 10px; border-radius:8px;
  transition:background .15s ease, color .15s ease;
}
.site-nav a:hover{background:rgba(201,162,74,.16); color:var(--gold-bright); text-decoration:none;}
.site-nav a.active{background:var(--gold); color:#241a08;}
.lang-toggle{display:flex; gap:6px; margin-left:8px; padding-left:12px; border-left:1px solid rgba(232,200,116,.3);}
.lang-toggle a{font-size:.78rem; padding:6px 9px; border:1px solid rgba(232,200,116,.4); border-radius:6px;}
.lang-toggle a.active{background:var(--gold-bright); color:#241a08; border-color:var(--gold-bright);}

.nav-toggle{display:none; background:none; border:1px solid var(--gold); color:var(--gold-bright); border-radius:8px; padding:8px 10px; font-size:1.1rem; cursor:pointer;}

@media (max-width:820px){
  .site-nav{display:none; flex-direction:column; align-items:stretch; width:100%; order:3;
    border-top:1px solid rgba(232,200,116,.25); margin-top:10px; padding-top:10px;}
  .site-nav.open{display:flex;}
  .site-nav a{width:100%;}
  .lang-toggle{margin-left:0; padding-left:0; border-left:none; border-top:1px solid rgba(232,200,116,.25); padding-top:10px; margin-top:6px;}
  .nav-toggle{display:block;}
}

/* ---------- Hero ---------- */
.page-hero{padding:34px 0 18px; border-bottom:1px solid rgba(232,200,116,.18); margin-bottom:26px;}
.page-hero h1{
  font-family:'Shippori Mincho',serif; font-weight:800; font-size:2rem; margin:0 0 6px;
  color:var(--gold-bright); text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.page-hero .sub{font-size:1rem; color:var(--cream-2); opacity:.9; max-width:760px; line-height:1.6;}
.page-hero .badge{
  display:inline-block; margin-top:12px; font-size:.78rem; font-weight:700; letter-spacing:.02em;
  background:rgba(201,162,74,.18); border:1px solid var(--gold); color:var(--gold-bright);
  padding:5px 12px; border-radius:999px;
}

/* ---------- Layout helpers ---------- */
main{flex:1; padding-bottom:60px;}
.panel{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid rgba(232,200,116,.22); border-radius:14px;
  padding:22px 24px; margin-bottom:22px; box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.panel h2{
  font-family:'Shippori Mincho',serif; color:var(--gold-bright); font-size:1.35rem;
  margin:0 0 12px; border-bottom:1px solid rgba(232,200,116,.25); padding-bottom:8px;
}
.panel p{line-height:1.75; color:var(--cream); margin:0 0 12px;}
.panel ul{line-height:1.8; margin:0 0 12px; padding-left:22px;}
.panel li{margin-bottom:4px;}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:760px){.grid-2,.grid-3{grid-template-columns:1fr;}}

.photo-card{border-radius:14px; overflow:hidden; border:1px solid rgba(232,200,116,.22); box-shadow:0 6px 20px rgba(0,0,0,.3);}
.photo-card img{width:100%; height:260px; object-fit:cover; display:block;}
.photo-card .cap{padding:10px 14px; font-size:.82rem; color:var(--cream-2); background:rgba(9,26,20,.55);}

/* ---------- Buttons ---------- */
.btn-primary,.btn-ghost{
  font-family:'Zen Kaku Gothic New','Noto Sans TC',sans-serif; font-weight:700; border:none; cursor:pointer;
  border-radius:9px; padding:11px 20px; font-size:.92rem; transition:transform .08s ease, opacity .15s ease;
  display:inline-block; text-decoration:none;
}
.btn-primary:active,.btn-ghost:active{transform:translateY(1px);}
.btn-primary{background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#241a08;}
.btn-primary:hover{opacity:.92; text-decoration:none;}
.btn-ghost{background:transparent; color:var(--gold-bright); border:1px solid var(--gold);}
.btn-ghost:hover{background:rgba(201,162,74,.14); text-decoration:none;}
.btnrow{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0;}

/* ---------- Cards (download / instructor / feature) ---------- */
.card{
  background:rgba(9,26,20,.45); border:1px solid rgba(232,200,116,.2); border-radius:12px;
  padding:18px; display:flex; flex-direction:column; gap:8px;
}
.card h3{margin:0; font-family:'Shippori Mincho',serif; color:var(--gold-bright); font-size:1.05rem;}
.card p{margin:0; font-size:.9rem; line-height:1.6; color:var(--cream-2);}

/* ---------- Forms ---------- */
.form-field{margin-bottom:16px;}
.form-field label{display:block; font-weight:700; font-size:.85rem; margin-bottom:6px; color:var(--cream-2);}
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding:11px 12px; border-radius:8px; border:1px solid rgba(232,200,116,.3);
  background:rgba(9,26,20,.55); color:var(--cream); font-family:inherit; font-size:.92rem;
}
.form-field input::placeholder, .form-field textarea::placeholder{color:rgba(236,224,195,.45);}
.form-field textarea{min-height:130px; resize:vertical;}
.form-note{font-size:.78rem; color:var(--cream-2); opacity:.7; margin-top:-8px; margin-bottom:16px;}
.form-status{padding:12px 14px; border-radius:8px; margin-bottom:16px; font-size:.88rem; display:none;}
.form-status.ok{display:block; background:rgba(63,143,92,.18); border:1px solid var(--ok); color:#bfe6cd;}
.form-status.err{display:block; background:rgba(184,64,47,.18); border:1px solid var(--bad); color:#f3c6bd;}
.hp-field{position:absolute; left:-9999px; opacity:0;}

/* ---------- Coming soon ---------- */
.coming-soon{text-align:center; padding:60px 20px;}
.coming-soon .mahjong-icon{font-size:3rem; margin-bottom:10px;}
.coming-soon h2{border:none; font-size:1.6rem;}

/* ---------- Footer ---------- */
.site-footer{
  background:rgba(6,20,15,.85); border-top:2px solid var(--gold); margin-top:auto; padding:30px 0 22px;
}
.site-footer .inner{max-width:var(--maxw); margin:0 auto; padding:0 16px; display:flex; gap:24px; flex-wrap:wrap; justify-content:space-between;}
.site-footer .col{min-width:200px;}
.site-footer .col h4{font-family:'Shippori Mincho',serif; color:var(--gold-bright); margin:0 0 10px; font-size:.95rem;}
.site-footer .col p, .site-footer .col a{display:block; font-size:.85rem; color:var(--cream-2); margin-bottom:6px; line-height:1.6;}
.site-footer .brand-block{display:flex; align-items:center; gap:10px;}
.site-footer .brand-block img{height:34px;}
.footer-note{
  font-size:.75rem; color:var(--cream-2); opacity:.6; text-align:center;
  margin-top:24px; padding-top:16px; border-top:1px solid rgba(232,200,116,.15); line-height:1.6;
}

/* ---------- Misc ---------- */
.section-label{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-bright); font-weight:800; margin-bottom:6px;}
.term{font-style:italic; color:var(--cream-2); opacity:.85;}