:root {
  --wood-178:#dfc295;
  --panel:rgba(236,210,168,.9);
  --line:rgba(122,87,51,.3);
  --text:#000;
  --accent:#cc7d5a;
  --accent-soft:#e2b08f;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  font-family:"Noto Sans TC",sans-serif;
  color:var(--text);
  background:radial-gradient(circle at 15% 16%,rgba(255,246,231,.45),transparent 35%),radial-gradient(circle at 82% 76%,rgba(204,125,90,.2),transparent 42%),linear-gradient(135deg,#e4c99f,var(--wood-178) 50%,#c9a06f 100%);
  min-height:100vh;
}

.wrap {
  width:min(1120px,92vw);
  margin:0 auto;
  padding:28px 0 44px;
}

.topbar {
  margin-bottom:24px;
}

.logo {
  margin:0;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(1.5rem,3vw,2.2rem);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.panel {
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
}

.hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:16px;
}

.copy {
  padding:24px;
}

.eyebrow {
  font-family:"Barlow Condensed",sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}

h1 {
  margin:0;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(2.2rem,5vw,4rem);
  line-height:.95;
}

.sub {
  margin-top:14px;
  line-height:1.7;
}

.cta {
  margin-top:18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn {
  text-decoration:none;
  color:#000;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 16px;
  font-weight:700;
  background:rgba(248,230,198,.72);
}

.btn.main {
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
}

.machine {
  min-height:320px;
  display:grid;
  place-items:center;
  padding:16px;
}

.arcade {
  width:min(260px,90%);
  height:250px;
  border-radius:16px 16px 10px 10px;
  border:2px solid rgba(0,0,0,.35);
  background:#2a2733;
  position:relative;
}

.screen {
  position:absolute;
  left:12%;
  right:12%;
  top:16%;
  height:40%;
  background:#1a1220;
  border:2px solid #3f3552;
  border-radius:8px;
}

.controls {
  position:absolute;
  left:14%;
  right:14%;
  bottom:16%;
  height:28%;
  border:1px solid #51456a;
  border-radius:10px;
}

.stick {
  position:absolute;
  left:24%;
  top:28%;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#e2b08f;
}

.btn-dot {
  position:absolute;
  right:20%;
  top:28%;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#cc7d5a;
  box-shadow:-18px 0 0 #e2b08f;
}

.sections {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:14px;
}

.card {
  padding:16px;
}

.card h2 {
  margin:0 0 8px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:1.08rem;
  text-transform:uppercase;
}

.card p {
  margin:0;
  line-height:1.65;
}

.portfolio {
  margin-top:14px;
  padding:16px;
}

.portfolio h2 {
  margin:0 0 10px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:1.2rem;
  text-transform:uppercase;
}

.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.portfolio-item {
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background:rgba(248,230,198,.42);
}

.portfolio-item h3 {
  margin:0 0 6px;
  font-family:"Barlow Condensed",sans-serif;
}

.portfolio-item p {
  margin:0;
  line-height:1.55;
  font-size:.9rem;
}

@media (max-width:960px) {
  .hero {
    grid-template-columns:1fr;
  }

  .sections,.portfolio-grid {
    grid-template-columns:1fr 1fr;
  }

}

@media (max-width:640px) {
  .wrap {
    width:min(94vw,1120px);
  }

  .sections,.portfolio-grid {
    grid-template-columns:1fr;
  }

  .cta .btn {
    width:100%;
    text-align:center;
  }

}