:root{
  --bg:#f6f3ec; --card:#ffffff; --ink:#1d2633; --muted:#5c6572;
  --accent:#1e7a57; --accent-dark:#175c42; --line:#e4ddcd;
  --x:#1e7a57; --o:#d64545; --wood:#eabf77; --wood-dark:#7c5a26;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); line-height:1.55;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:radial-gradient(1100px 480px at 85% -120px,#e9f3ea 0%,transparent 62%),var(--bg);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1000px; margin:0 auto; padding:0 20px}

/* Header */
.site-head{border-bottom:1px solid var(--line); background:rgba(246,243,236,.92)}
.site-head .container{display:flex; align-items:center; justify-content:space-between; height:60px}
.logo{font-weight:800; font-size:18px; letter-spacing:.3px; color:var(--ink); text-decoration:none}
.logo span{color:var(--accent)}
nav a{margin-left:20px; font-size:14px; color:var(--muted)}

/* Hero */
.hero{padding:54px 0 26px; text-align:center}
.hero h1{font-size:clamp(30px,5vw,46px); line-height:1.15; margin:0 0 14px; letter-spacing:-.5px}
.hero h1 .accent{color:var(--accent)}
.lede{max-width:700px; margin:0 auto 26px; color:var(--muted); font-size:clamp(16px,2vw,19px)}
.btn{
  display:inline-block; background:var(--accent); color:#fff; border-radius:10px;
  padding:14px 26px; font-weight:700; font-size:16px; border:1px solid var(--accent-dark);
  box-shadow:0 2px 0 var(--accent-dark); cursor:pointer; text-decoration:none;
}
.btn:hover{background:var(--accent-dark); text-decoration:none}
.btn.small{padding:9px 16px; font-size:14px; border-radius:8px}
.btn.ghost{background:#fff; color:var(--accent); border-color:var(--line); box-shadow:none}
.btn.ghost:hover{background:#f2f6f2}

/* Hall */
.hall{padding:0 0 18px}
.section-head{text-align:center; padding:40px 0 4px}
.section-head h2{font-size:clamp(24px,3.5vw,32px); margin:0 0 8px; letter-spacing:-.3px}
.section-head p{color:var(--muted); margin:0; max-width:640px; margin-left:auto; margin-right:auto}
.hall-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; padding:20px 0 8px}
.hall-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px;
  color:var(--ink); text-decoration:none; box-shadow:0 4px 14px rgba(29,38,51,.05);
  transition:transform .12s ease, box-shadow .12s ease;
}
.hall-card:hover{transform:translateY(-3px); box-shadow:0 8px 22px rgba(29,38,51,.1); text-decoration:none}
.hall-card h3{margin:0; font-size:19px}
.hall-card p{margin:0; color:var(--muted); font-size:14px; flex:1}
.hall-icon{
  font-size:34px; line-height:1; width:58px; height:58px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:#eef4ee; border:1px solid var(--line);
}
.hall-card:nth-child(2) .hall-icon{background:#fdf3f3}
.hall-card:nth-child(3) .hall-icon{background:#f3f1ec}
.hall-play{font-weight:800; color:var(--accent); font-size:14px}

/* Game cards */
.game-wrap{padding:20px 0 6px}
.game-section-head{display:flex; align-items:center; gap:10px; margin:30px 0 4px}
.game-section-head h2{margin:0; font-size:clamp(22px,3vw,28px)}
.game-section-head .tag{color:var(--muted); font-size:14px}
.game-card{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:22px; box-shadow:0 8px 30px rgba(29,38,51,.07);
}
.game-top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px}
.mode-pick{display:flex; gap:14px; font-size:14px; font-weight:600}
.mode-pick label{display:flex; align-items:center; gap:6px; cursor:pointer}
input[type="radio"]{accent-color:var(--accent)}
select, textarea{font:inherit}
.board-zone{display:flex; flex-direction:column; align-items:center}
#board{
  width:100%; max-width:610px; aspect-ratio:1/1; border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(124,90,38,.35), 0 6px 18px rgba(124,90,38,.22);
  cursor:pointer; touch-action:manipulation; background:var(--wood);
}
.status{margin-top:14px; min-height:26px; font-weight:700; font-size:17px; text-align:center}
.status.think{color:var(--muted); font-weight:500; font-style:italic}
.status.win{color:var(--accent)}
.status.err{color:#c2402f}
.game-bar{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
.score{font-weight:800; font-size:16px; color:var(--accent)}
.controls{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.diff-pick{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted)}
.diff-pick label{display:flex; align-items:center; gap:4px; cursor:pointer; font-weight:500; color:var(--ink)}
.difficulty-hint{font-size:13px; color:var(--muted); font-style:italic}

/* Tic-Tac-Toe */
.ttt-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  width:100%; max-width:360px; margin:0 auto;
}
.cell{
  aspect-ratio:1/1; background:#fff; border:2px solid var(--line); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(44px,12vw,68px); font-weight:800; cursor:pointer; user-select:none;
}
.cell:hover{background:#faf8f3}
.cell.X{color:var(--x)}
.cell.O{color:var(--o)}
.cell.win{background:#eaf5ee; border-color:var(--accent)}
.cell.win.X{color:var(--x)}
.cell.win.O{color:var(--o)}

/* Draw & Guess */
.dg-toolbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.dg-colors{display:flex; gap:6px; flex-wrap:wrap}
.color-chip{
  width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid #fff;
  box-shadow:0 0 0 1px var(--line); transition:transform .1s;
}
.color-chip:hover{transform:scale(1.12)}
.color-chip.active{box-shadow:0 0 0 3px var(--accent)}
.dg-toolbtn{
  padding:8px 14px; font-size:13.5px; font-weight:600; border-radius:8px;
  border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer;
}
.dg-toolbtn:hover{background:#f4f1e9}
.dg-toolbtn.active{background:var(--accent); color:#fff; border-color:var(--accent-dark)}
.dg-size{font-size:13.5px; padding:7px 10px; border-radius:8px; border:1px solid var(--line); background:#fff}
#dgCanvas{
  width:100%; max-width:520px; aspect-ratio:1/1; border-radius:12px; display:block; margin:0 auto;
  background:#fff; box-shadow:inset 0 0 0 1px var(--line), 0 4px 14px rgba(29,38,51,.07);
  cursor:crosshair; touch-action:none;
}
.dg-word-zone{margin-top:12px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap}
.dg-word{
  font-size:clamp(22px,4vw,30px); font-weight:800; letter-spacing:1px; min-height:42px;
  padding:6px 16px; border-radius:10px; background:#f0f7f2; border:1px dashed var(--accent);
  display:flex; align-items:center;
}
.dg-word.locked{color:var(--muted); font-weight:600; font-size:16px; letter-spacing:0}
.dg-word-btns{display:flex; gap:8px; flex-wrap:wrap}
.dg-round{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:10px}
.dg-timer{
  font-size:18px; font-weight:800; color:var(--o); min-width:64px; text-align:center;
  background:#fdf3f3; border:1px solid #f0d5d0; border-radius:8px; padding:6px 10px;
}
.dg-guess{display:flex; gap:8px; justify-content:center; margin-top:12px; flex-wrap:wrap}
.dg-guess input{
  width:min(320px,100%); padding:11px 14px; border-radius:10px; font-size:15px;
  border:2px solid var(--line); background:#fff; color:var(--ink);
}
.dg-guess input:focus{outline:none; border-color:var(--accent)}
.dg-history{
  max-height:120px; overflow-y:auto; margin:12px auto 0; max-width:420px;
  font-size:13.5px; color:var(--muted); text-align:center;
}
.dg-history div{margin:2px 0}
.dg-history .hit{color:var(--accent); font-weight:800}
.dg-pack-label{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; justify-content:center; flex-wrap:wrap; margin-top:12px}
.dg-pack-label select{padding:7px 10px; border-radius:8px; border:1px solid var(--line); background:#fff}
.dg-custom{max-width:420px; margin:10px auto 0; display:flex; flex-direction:column; gap:8px}
.dg-custom textarea{min-height:70px; padding:10px; border-radius:10px; border:2px solid var(--line); font-size:14px; resize:vertical}
.dg-note{font-size:13px; color:var(--muted); text-align:center; max-width:560px; margin:10px auto 0}

/* Feature cards */
.features{padding:44px 0 8px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.feat{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px}
.feat h3{margin:0 0 6px; font-size:17px}
.feat p{margin:0; color:var(--muted); font-size:14.5px}

/* How to play */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; padding:20px 0 8px}
.step{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px}
.step .n{display:inline-flex; width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; align-items:center; justify-content:center; font-size:14px; margin-bottom:8px}
.step h3{margin:0 0 4px; font-size:15px}
.step p{margin:0; color:var(--muted); font-size:14px}

/* Teams scene */
.teams{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px; margin:24px 0 0}
.teams h2{margin:0 0 6px}
.teams .lede{color:var(--muted); margin:0 0 14px}
.teams ul{margin:0; padding-left:20px}
.teams li{margin:6px 0}

/* FAQ */
.faq{max-width:760px; margin:0 auto; padding-bottom:20px}
details{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin:10px 0}
summary{cursor:pointer; font-weight:700; font-size:15.5px}
details p{margin:10px 0 2px; color:var(--muted); font-size:14.5px}

/* Newsletter */
.newsletter{background:var(--accent); color:#fff; border-radius:18px; padding:34px 26px; text-align:center; margin:36px 0 10px}
.newsletter h2{margin:0 0 6px; font-size:clamp(22px,3vw,28px)}
.newsletter p{margin:0 auto 18px; max-width:520px; opacity:.92}
.news-form{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.news-form input{flex:1; min-width:230px; max-width:340px; padding:13px 16px; border-radius:10px; border:2px solid rgba(255,255,255,.5); font-size:15px; background:#fff; color:var(--ink)}
.news-form .btn{background:#fff; color:var(--accent); border-color:transparent; box-shadow:none; font-weight:800}
.news-form .btn:hover{background:#f0f7f2}
.news-msg{margin-top:12px; font-weight:600; min-height:20px}
.news-msg.ok{color:#d8f2e2}
.news-msg.err{color:#ffe1d6}

footer{border-top:1px solid var(--line); margin-top:44px; padding:20px 0 30px; color:var(--muted); font-size:13.5px; text-align:center}
footer nav a{margin:0 10px}

@media (max-width:640px){
  .site-head nav{display:none}
  .hero{padding:36px 0 14px}
  .game-card{padding:14px}
  .news-msg{font-size:13px}
}