:root{
  --paper: #EEF0E6;
  --paper-deep: #E4E7D9;
  --grid-line: #C7CBB6;
  --ink: #202B22;
  --ink-soft: #566052;
  --ink-faint: #8A9282;
  --amber: #D98C2B;
  --amber-deep: #B36F1C;
  --teal: #2E7A67;
  --card: #FBFAF4;
  --line: #D2D5C4;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --shadow-stamp: 0 1px 0 rgba(32,43,34,0.08), 0 6px 14px -8px rgba(32,43,34,0.35);
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

a{color:inherit}

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  background: rgba(238,240,230,0.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.logo-mark{
  font-family:var(--font-mono); font-weight:700; font-size:13px;
  background:var(--ink); color:var(--paper);
  padding:4px 7px; border-radius:4px; letter-spacing:0.02em;
  transform: rotate(-2deg);
}
.logo-text{font-family:var(--font-display); font-weight:600; font-size:18px;}
.logo-dot{color:var(--amber-deep);}
.site-nav{display:flex; gap:26px; font-size:14.5px; font-weight:500;}
.site-nav a{text-decoration:none; color:var(--ink-soft); border-bottom:1px solid transparent; padding-bottom:2px;}
.site-nav a:hover{color:var(--ink); border-color:var(--amber);}

/* Hero */
.hero{padding:56px 0 40px;}
.hero-grid{display:grid; grid-template-columns: 1.05fr 0.95fr; gap:48px; align-items:start;}
.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--teal); margin:0 0 14px;
}
h1{
  font-family:var(--font-display); font-weight:700; font-size:40px; line-height:1.12;
  margin:0 0 10px; letter-spacing:-0.01em;
}
.hero-tagline{
  font-family:var(--font-display); font-weight:600; font-size:17px;
  color:var(--amber-deep); margin:0 0 16px; letter-spacing:0.01em;
}
.hero-sub{font-size:17px; color:var(--ink-soft); line-height:1.6; max-width:46ch; margin:0 0 28px;}
.hero-stats{display:flex; gap:14px;}
.stat-box{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:12px 20px; min-width:100px; box-shadow: var(--shadow-stamp);
}
.stat-label{display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint);}
.stat-value{display:block; font-family:var(--font-mono); font-size:26px; font-weight:600; color:var(--ink); margin-top:2px;}

/* Game panel */
.game-panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:20px; box-shadow: var(--shadow-stamp);
}
.game-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.btn{
  font-family:var(--font-body); font-weight:600; font-size:14px; cursor:pointer;
  border-radius:var(--radius-s); padding:10px 16px; border:1px solid transparent;
  transition: transform .12s ease, background .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--amber); color:#2A1B04; border-color:var(--amber-deep);}
.btn-primary:hover{background:var(--amber-deep); color:#fff;}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink-soft);}
.btn-ghost:hover{border-color:var(--ink-faint); color:var(--ink);}
.btn:disabled{opacity:0.45; cursor:not-allowed;}

.board-wrap{display:flex; justify-content:center;}
.board{
  position:relative;
  width:min(420px, 100%);
  aspect-ratio:1/1;
  background:var(--paper-deep);
  border-radius:var(--radius-m);
  padding:10px;
  touch-action:none;
  user-select:none;
}
.board-grid{
  position:absolute; inset:10px;
  display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:10px;
}
.board-grid .cell{background: rgba(32,43,34,0.10); border-radius:var(--radius-s);}
.tiles{position:absolute; inset:10px;}
.tile{
  position:absolute;
  border-radius:var(--radius-s);
  transition: transform 140ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.tile.removing{
  transition: opacity 110ms linear;
  opacity:0;
}
.tile-inner{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-s);
  font-family:var(--font-mono); font-weight:700;
  box-shadow: var(--shadow-stamp);
}
@keyframes pop-in{
  0%{transform:scale(0.35); opacity:0;}
  60%{transform:scale(1.06); opacity:1;}
  100%{transform:scale(1); opacity:1;}
}
@keyframes merge-pulse{
  0%{transform:scale(1);}
  40%{transform:scale(1.14);}
  100%{transform:scale(1);}
}
.tile-inner.spawn{animation: pop-in 160ms ease-out;}
.tile-inner.merged{animation: merge-pulse 160ms ease-out;}

.board-message{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:rgba(238,240,230,0.92); border-radius:var(--radius-m);
  text-align:center; padding:20px;
}
.board-message[hidden]{display:none;}
.board-message p{font-family:var(--font-display); font-weight:600; font-size:22px; margin:0;}

.board-hint{text-align:center; font-size:13px; color:var(--ink-faint); margin:14px 0 0;}

/* Sections */
.section{padding:56px 0;}
.section-alt{background:rgba(46,122,103,0.06); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
h2{font-family:var(--font-display); font-size:28px; font-weight:700; margin:0 0 28px;}
.section-lead{font-size:15.5px; color:var(--ink-soft); line-height:1.7; max-width:74ch; margin:-10px 0 28px;}

.how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:32px;}
.how-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m); padding:22px;}
.how-num{font-family:var(--font-mono); color:var(--amber-deep); font-weight:700; font-size:13px;}
.how-card h3{font-family:var(--font-display); font-size:18px; margin:10px 0 8px;}
.how-card p{color:var(--ink-soft); font-size:14.5px; line-height:1.55; margin:0;}

.tip-box{background:var(--card); border:1px dashed var(--ink-faint); border-radius:var(--radius-m); padding:24px 28px;}
.tip-box h3{font-family:var(--font-display); font-size:17px; margin:0 0 12px;}
.tip-box ul{margin:0; padding-left:20px; color:var(--ink-soft); font-size:14.5px; line-height:1.7;}

.about-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;}
.about-grid p{color:var(--ink-soft); line-height:1.7; font-size:15.5px;}
.stat-strip{display:grid; gap:16px;}
.stat-strip-item{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m); padding:16px 20px; display:flex; justify-content:space-between; align-items:baseline;}
.stat-strip-value{font-family:var(--font-mono); font-weight:700; font-size:20px; color:var(--teal);}
.stat-strip-label{font-size:13px; color:var(--ink-faint);}

.faq-list{display:flex; flex-direction:column; gap:10px;}
.faq-item{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m); padding:6px 20px;}
.faq-item summary{cursor:pointer; padding:14px 0; font-weight:600; font-size:15.5px; list-style:none; position:relative;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; position:absolute; right:0; top:12px; font-family:var(--font-mono); color:var(--amber-deep); font-size:18px;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin:0 0 16px; color:var(--ink-soft); font-size:14.5px; line-height:1.6;}

.site-footer{border-top:1px solid var(--line); padding:26px 0; margin-top:20px;}
.footer-inner p{margin:0; font-size:13px; color:var(--ink-faint);}

/* ---- Guide / article pages ---- */
.breadcrumb{font-size:13px; color:var(--ink-faint); margin-bottom:18px;}
.breadcrumb a{text-decoration:none; color:var(--teal);}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb span[aria-hidden]{margin:0 8px;}

.guide-hero{padding:48px 0 32px; border-bottom:1px solid var(--line);}
.guide-hero h1{font-size:38px; margin-bottom:14px;}
.guide-hero .hero-sub{font-size:16.5px; color:var(--ink-soft); line-height:1.65; max-width:64ch; margin:0 0 26px;}

.guide-toc{padding:32px 0;}
.toc-label{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); margin:0 0 12px;}
.toc-list{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px 24px; margin:0; padding-left:20px; font-size:14.5px;}
.toc-list a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);}
.toc-list a:hover{border-color:var(--amber-deep); color:var(--amber-deep);}

.callout{
  background:var(--card); border-left:3px solid var(--teal); border-radius:0 var(--radius-s) var(--radius-s) 0;
  padding:14px 18px; font-size:14.5px; color:var(--ink-soft); line-height:1.6;
}
.callout strong{color:var(--ink);}

.snake-diagram{
  display:flex; flex-direction:column; gap:8px; max-width:420px; margin:24px 0 10px;
  background:var(--paper-deep); border-radius:var(--radius-m); padding:12px;
}
.snake-row{display:flex; gap:8px;}
.snake-row.reverse{flex-direction:row-reverse;}
.snake-cell{
  flex:1; aspect-ratio:1.4/1; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-s); font-family:var(--font-mono); font-weight:700; font-size:14px;
  box-shadow: var(--shadow-stamp);
}
.snake-cell.dim{background:#ECE6CE; color:#202B22;}
.snake-cell.mid{background:#D98C2B; color:#FFF9EE;}
.snake-cell.high{background:#202B22; color:#F4C766;}
.diagram-caption{font-size:13px; color:var(--ink-faint); margin:0 0 20px;}

.guide-cta{background:rgba(46,122,103,0.08); border-top:1px solid var(--line);}
.guide-cta-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.guide-cta-inner h2{margin:0 0 6px;}
.guide-cta-inner .section-lead{margin:0;}

.strategy-more{margin-top:18px;}
.strategy-more a{color:var(--amber-deep); font-weight:600; text-decoration:none; border-bottom:1px solid var(--amber-deep);}
.strategy-more a:hover{color:var(--amber);}

@media (max-width: 620px){
  .toc-list{grid-template-columns:1fr;}
  .guide-hero h1{font-size:28px;}
}

@media (max-width: 860px){
  .hero-grid{grid-template-columns:1fr; gap:32px;}
  h1{font-size:34px;}
  .how-grid{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;}
}

@media (max-width: 520px){
  .wrap{padding:0 16px;}
  .header-inner{height:auto; padding:12px 0; flex-wrap:wrap; row-gap:8px;}
  .logo-text{font-size:16px;}
  .site-nav{gap:14px; font-size:13px; width:100%; justify-content:space-between;}
  h1{font-size:28px;}
  .hero{padding:32px 0 28px;}
  .hero-sub{font-size:15.5px;}
  .game-panel{padding:14px;}
  .stat-strip-item{flex-wrap:wrap;}
}