/* =========================================================
   XOX — Tic-Tac-Toe Modern
   Tema: dark, aksen teal & amber, tipografi serif+mono
   Semua animasi hanya pakai transform / opacity (ringan)
   ========================================================= */

:root{
  --navy: #0D1B2A;
  --navy-2: #1A2D42;
  --navy-3: #24374F;
  --teal: #1B998B;
  --teal-light: #2BC0B4;
  --accent: #E8A838;
  --danger: #E86A5C;
  --ink: #FAF8F4;
  --ink-mid: rgba(255,255,255,0.65);
  --ink-dim: rgba(255,255,255,0.35);
  --line: rgba(255,255,255,0.08);
  --focus: #2BC0B4;
}

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family:'DM Sans', sans-serif;
  background: var(--navy);
  color: var(--ink);
  min-height:100vh;
  width:100vw;
  display:flex;
  flex-direction:column;
  align-items:center;
  -webkit-tap-highlight-color: transparent;
  overflow-x:hidden;
}

/* Fokus keyboard terlihat jelas di semua elemen interaktif */
a:focus-visible,
button:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.page{
  width:100%;
  max-width: 460px;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1.1rem, 4vw, 1.5rem) 3rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(1.1rem, 3vw, 1.5rem);
}

/* ---------- Back button ---------- */
.btn-back{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  font-family:'DM Mono', monospace; font-size:0.72rem; font-weight:500;
  letter-spacing:0.05em; text-transform:uppercase;
  color: var(--ink-mid); text-decoration:none;
  background:transparent; border:1.5px solid rgba(255,255,255,0.2);
  padding: 0.55rem 1.1rem; border-radius:4px;
  transition: border-color 0.2s ease, color 0.2s ease;
  cursor:pointer;
}
.btn-back svg{ transition: transform 0.2s ease; }
.btn-back:hover{ border-color: var(--teal-light); color: var(--teal-light); }
.btn-back:hover svg{ transform: translateX(-3px); }

/* ---------- Header ---------- */
.app-header{
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.section-tag{
  font-family:'DM Mono', monospace; font-size:0.68rem; color: var(--teal-light);
  letter-spacing:0.12em; text-transform:uppercase;
  display:flex; align-items:center; gap:8px; margin-bottom:0.4rem;
}
.section-tag::after{ content:''; flex:0 0 28px; height:1px; background: var(--teal-light); }
.title{
  font-family:'DM Serif Display', serif;
  font-weight:400;
  font-size: clamp(2rem, 8vw, 2.6rem);
  line-height:1;
  color: var(--ink);
}
.title em{ font-style: italic; color: var(--teal-light); }
.subtitle{
  font-size:0.85rem;
  color: var(--ink-mid);
  margin-top:6px;
  font-weight:400;
}

.icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:8px;
  background: var(--navy-2);
  border:1px solid var(--line);
  color: var(--ink-mid);
  cursor:pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  flex-shrink:0;
}
.icon-btn:hover{ color: var(--teal-light); border-color: var(--teal-light); }
.icon-btn:active{ transform: scale(0.92); }

/* ---------- Panels ---------- */
.panel{
  width:100%;
  background: var(--navy-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding: clamp(1.1rem, 4vw, 1.5rem);
  display:flex;
  flex-direction:column;
  gap: 1.1rem;
  box-shadow: 0 14px 34px rgba(0,0,0,0.28);
}
.hidden{ display:none !important; }

/* ---------- Setup panel ---------- */
.setup-group{ display:flex; flex-direction:column; gap:0.6rem; }
.setup-label{
  font-family:'DM Mono', monospace; font-size:0.68rem; letter-spacing:0.08em;
  text-transform:uppercase; color: var(--ink-dim); font-weight:500;
}
.choice-row{ display:flex; gap:8px; }
.choice-btn{
  flex:1;
  font-family:'DM Sans', sans-serif; font-weight:600; font-size:0.9rem;
  background: var(--navy-3);
  color: var(--ink-mid);
  border:1.5px solid var(--line);
  border-radius:8px;
  padding: 0.65rem 0.5rem;
  cursor:pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.choice-btn:hover{ border-color: rgba(43,192,180,0.5); color: var(--ink); }
.choice-btn.active{
  background: rgba(27,153,139,0.18);
  border-color: var(--teal-light);
  color: var(--teal-light);
}

.primary-btn{
  font-family:'DM Mono', monospace; font-weight:500; font-size:0.8rem;
  letter-spacing:0.05em; text-transform:uppercase;
  background: var(--teal);
  color:#fff;
  border:1.5px solid var(--teal);
  border-radius:8px;
  padding: 0.85rem 1rem;
  cursor:pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.primary-btn:hover{ background: var(--teal-light); border-color: var(--teal-light); }
.primary-btn:active{ transform: translateY(1px); }

.secondary-btn{
  font-family:'DM Mono', monospace; font-weight:500; font-size:0.76rem;
  letter-spacing:0.04em; text-transform:uppercase;
  background: transparent;
  color: var(--ink-mid);
  border:1.5px solid rgba(255,255,255,0.2);
  border-radius:8px;
  padding: 0.75rem 1rem;
  cursor:pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.secondary-btn:hover{ border-color: var(--teal-light); color: var(--teal-light); }

.text-btn{
  font-family:'DM Mono', monospace; font-size:0.7rem; letter-spacing:0.03em;
  background:none; border:none; color: var(--ink-dim); cursor:pointer;
  text-decoration: underline; text-underline-offset:3px;
  transition: color 0.2s ease;
}
.text-btn:hover{ color: var(--danger); }

/* ---------- Scoreboard ---------- */
.scoreboard{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:8px;
}
.score-box{
  background: var(--navy-3);
  border:1px solid var(--line);
  border-radius:10px;
  padding: 10px 6px;
  text-align:center;
}
.score-box .label{
  font-family:'DM Mono', monospace;
  font-size:0.6rem; text-transform:uppercase; letter-spacing:0.08em;
  color: var(--ink-dim); font-weight:500;
}
.score-box .value{
  font-family:'DM Serif Display', serif;
  font-size:1.5rem; font-weight:400; margin-top:2px;
}
.score-box.you .value{ color: var(--teal-light); }
.score-box.ai .value{ color: var(--danger); }
.score-box.draw .value{ color: var(--accent); }

/* ---------- Status bar ---------- */
.status-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
}
.status-text{
  font-size:0.92rem; font-weight:600; color: var(--ink);
}
.difficulty-pill{
  font-family:'DM Mono', monospace; font-size:0.62rem; font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase;
  background: rgba(232,168,56,0.14);
  color: var(--accent);
  border:1px solid rgba(232,168,56,0.35);
  border-radius:20px;
  padding: 4px 10px;
  white-space:nowrap;
}

/* ---------- Board ---------- */
.board-frame{
  position:relative;
  width:100%;
  aspect-ratio: 1/1;
  background: var(--navy-3);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
}
.board{
  position:relative;
  width:100%; height:100%;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap:8px;
  /* Cegah gestur scroll browser saat menekan-nekan papan di mobile */
  touch-action: manipulation;
}
.cell{
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Serif Display', serif;
  font-size: clamp(2rem, 11vw, 3rem);
  line-height:1;
  color: var(--ink);
  cursor:pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
  -webkit-user-select:none; user-select:none;
}
.cell:hover:not(:disabled){
  background: rgba(255,255,255,0.08);
  border-color: rgba(43,192,180,0.35);
}
.cell:active:not(:disabled){ transform: scale(0.94); }
.cell:disabled{ cursor:default; }

.cell[data-mark="X"]{ color: var(--teal-light); }
.cell[data-mark="O"]{ color: var(--accent); }

/* animasi kemunculan simbol saat diklik */
@keyframes markPop{
  0%{ transform: scale(0.4); opacity:0; }
  70%{ transform: scale(1.12); opacity:1; }
  100%{ transform: scale(1); opacity:1; }
}
.cell.placed{ animation: markPop 0.18s ease; }

/* glow pada kotak yang termasuk garis kemenangan */
@keyframes cellGlow{
  0%, 100%{ box-shadow: 0 0 0 1.5px var(--teal-light), 0 0 14px rgba(43,192,180,0.35); }
  50%{ box-shadow: 0 0 0 1.5px var(--teal-light), 0 0 22px rgba(43,192,180,0.6); }
}
.cell.win-cell{
  animation: cellGlow 1.1s ease-in-out infinite;
  border-color: var(--teal-light);
}

/* garis kemenangan yang digambar melintasi papan */
.win-line{
  position:absolute; inset:10px;
  width:calc(100% - 20px); height:calc(100% - 20px);
  pointer-events:none;
  opacity:0;
  transition: opacity 0.2s ease;
}
.win-line.show{ opacity:1; }
.win-line line{
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(232,168,56,0.7));
}

/* ---------- Overlay hasil akhir ---------- */
.overlay{
  position:absolute; inset:0;
  border-radius:12px;
  background: rgba(13,27,42,0.94);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:20px;
  opacity:0; pointer-events:none;
  transition: opacity 0.25s ease;
}
.overlay.show{ opacity:1; pointer-events:auto; }
.overlay .msg{
  font-family:'DM Serif Display', serif;
  font-size:1.6rem; font-weight:400; color: var(--accent);
}
.overlay .sub{ color: var(--ink-mid); font-size:0.85rem; }
.overlay-btns{ display:flex; gap:10px; margin-top:8px; }

/* ---------- Toolbar bawah ---------- */
.toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.turn-indicator{
  font-family:'DM Mono', monospace; font-size:0.72rem; color: var(--ink-mid);
  letter-spacing:0.02em;
}

footer{
  color: var(--ink-dim);
  font-family:'DM Mono', monospace;
  font-size:0.7rem; text-align:center; line-height:1.6; letter-spacing:0.01em;
}

/* ---------- Responsive ---------- */
@media (min-width: 560px){
  .page{ max-width: 480px; }
}
@media (min-width: 900px){
  .page{ max-width: 520px; padding-top: 3rem; }
  .cell{ font-size: 3.2rem; }
}

/* Hormati preferensi pengguna yang mengurangi animasi */
@media (prefers-reduced-motion: reduce){
  .cell, .cell.placed, .cell.win-cell, .win-line, .icon-btn, .choice-btn, .primary-btn{
    animation:none !important;
    transition:none !important;
  }
}