/* ==========================================================================
   karaoke.css — เฉพาะหน้า /karaoke เท่านั้น
   (สี/ฟอนต์/โหมดมืด อยู่ที่ shared/tokens.css, ปุ่ม/การ์ด/navbar อยู่ที่ shared/components.css)
   โครงเดียวกับ style.css ของหน้าแรก ตัดส่วน "candidates" ออกเพราะไม่ได้ใช้
   ========================================================================== */

/* ---------- Hero ---------- */
.hero{
  text-align:center;
  padding:12px 24px 8px;
}
.hero h1{
  margin:0;
  font-size:44px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ink);
}
.hero h1 .hl{ color:var(--accent); }
.hero .subtitle{
  margin:6px auto 0;
  max-width:820px;
  color:var(--muted);
  font-size:14.5px;
}

/* ---------- Stat badge (รวมจำนวนแปลง + Free) ---------- */
.stat-badge{
  margin:14px 0;
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  background:var(--panel);
  border-radius:999px;
  padding:10px 22px;
  font-size:14px;
  box-shadow:0 6px 20px rgba(20,40,30,.06);
}
.stat-badge .star{ color:#f5b301; margin-right:2px; }
.stat-badge .cnt{ color:var(--accent-dark); font-weight:800; }
.stat-badge .lbl1{ color:var(--muted); font-weight:500; }
.stat-badge .sep{ color:var(--line); margin:0 2px; }
.stat-badge .lbl2{ display:inline-flex; gap:6px; }

/* ---------- Main panels ---------- */
main{
  flex:1;
  padding:8px 40px 16px;
}
.grid{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:22px;
  align-items:stretch;
  position:relative;
}

.feedback{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 20px;
  border-top:1px solid var(--line);
}

/* ---------- ปุ่มกลาง (วงแหวน + ลูกศร) ---------- */
.swapcol{
  display:flex;
  align-items:center;
  justify-content:center;
}
.swap-ring{
  position:relative;
  width:200px;
  height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:24px;
  background-color:#f4faf6;
  background-image:radial-gradient(rgba(22,163,74,.30) 1.4px, transparent 1.4px);
  background-size:13px 13px;
}
.ring{
  position:absolute;
  top:50%;
  left:50%;
  border-radius:50%;
  border:1.5px solid rgba(22,163,74,.35);
  pointer-events:none;
  animation:ringPulse 2.6s ease-out infinite;
}
.ring.r1{ width:120px; height:120px; animation-delay:0s; }
.ring.r2{ width:120px; height:120px; animation-delay:.7s; }
.ring.r3{ width:120px; height:120px; animation-delay:1.4s; }

@keyframes ringPulse{
  0%{ transform:translate(-50%,-50%) scale(1); opacity:.6; }
  100%{ transform:translate(-50%,-50%) scale(1.7); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .ring{ animation:none; display:none; }
}
.swapbtn{
  position:relative;
  z-index:1;
  width:120px;
  height:120px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  background:var(--accent);
  color:#fff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:8px;
  text-align:center;
  line-height:1.3;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.18),
    0 0 0 8px rgba(22,163,74,.10),
    0 10px 24px rgba(22,163,74,.25);
  transition:transform .15s ease;
}
.swapbtn:hover{ transform:translateY(-2px); }
.swapbtn:active{ transform:translateY(1px); }
.swapbtn .sparkle{ display:block; }
.swapbtn .arrow{ font-size:22px; line-height:1; }

.meta{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:var(--muted);
  padding:14px 2px 0;
  flex-wrap:wrap;
  gap:6px;
}

/* ---------- Features strip ---------- */
.features{
  max-width:1180px;
  margin:14px auto 0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px 24px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}
.feature{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.feature .icon{
  width:40px;
  height:40px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
}
.feature.f1 .icon{ background:var(--accent-soft); color:var(--accent-dark); }
.feature.f2 .icon{ background:#eaf1ff; color:var(--blue); }
.feature.f3 .icon{ background:#f1ecff; color:var(--purple); }
.feature.f4 .icon{ background:#fff3e0; color:var(--orange); }
.feature h3{ margin:0 0 2px; font-size:14px; font-weight:700; }
.feature p{ margin:0; font-size:12.5px; color:var(--muted); }

/* ---------- Footer ---------- */
footer{
  max-width:1180px;
  margin:auto auto 0;
  width:100%;
  padding:14px 8px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  font-size:12px;
  color:var(--muted);
}
footer .badges{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
footer .fbadge{
  background:var(--accent-soft);
  color:var(--accent-dark);
  border-radius:999px;
  padding:5px 12px;
  font-weight:600;
  font-size:12px;
}

@media (max-width:900px){
  .grid{ grid-template-columns:1fr; }
  .swapcol{
    order:0;
    background:var(--panel) !important;
    border:1px solid var(--line) !important;
    border-radius:20px !important;
    box-shadow:0 10px 30px rgba(20,40,30,.05) !important;
    padding:14px;
  }
  .swap-ring{
    width:100%;
    height:auto;
    background:none;
    border-radius:0;
  }
  .ring{ display:none; }
  .swapbtn{
    width:100%;
    height:60px;
    border-radius:16px;
    font-size:15px;
    flex-direction:row;
    gap:8px;
    padding:0 16px;
    transform:none;
  }
  .swapbtn:active{ transform:scale(.98); }
  .swapbtn .arrow{ font-size:18px; }
  .features{ grid-template-columns:1fr; }
  .hero h1{ font-size:30px; }
  .site-nav{ position:static; justify-content:center; margin:12px auto 0; }
  .page-brand{ position:static; align-items:center; margin:12px auto 0; }
}

/* ---------- โหมดมืด: ส่วนที่เฉพาะหน้านี้ ---------- */
body.dark .swap-ring{
  background-color:#161f1b;
  background-image:radial-gradient(rgba(255,255,255,.08) 1.4px, transparent 1.4px);
}

/* ---------- Candidates panel (ตัวเลือกสไตล์การสะกดอื่น) ---------- */
.candidates{
  display:flex;
  flex-direction:column;
  gap:1px;
  border-top:1px solid var(--line);
}
.candidate-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 20px;
  background:var(--accent-soft);
  cursor:pointer;
  transition:background .15s ease;
}
.candidate-row:hover{
  background:rgba(22,163,74,.16);
}
.candidate-row.active{
  background:rgba(22,163,74,.22);
  box-shadow:inset 3px 0 0 var(--accent);
}
.candidate-text{
  font-weight:700;
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  font-size:13.5px;
}
.candidate-label{
  font-size:12px;
  color:var(--accent-dark);
  font-weight:600;
  white-space:nowrap;
}

body.dark .candidate-row{
  background:rgba(22,163,74,.10);
}
body.dark .candidate-row:hover{
  background:rgba(22,163,74,.18);
}
body.dark .candidate-row.active{
  background:rgba(22,163,74,.24);
}