/* ═══════════════════════════════════════════════════════
   หมากขุม NEON — ศึกหัวเมืองแสง
   ธีม: วัดไทยในโลกไซเบอร์ 2599
   ผู้เล่น = นีออนฟ้า | AI = นีออนชมพู | ลูกหมาก = เม็ดทองเรืองแสง
   ═══════════════════════════════════════════════════════ */

:root {
  --void:    #06081c;   /* อวกาศคราม */
  --panel:   #0d1133;
  --panel-2: #131945;
  --cyan:    #00e5ff;   /* ฝั่งผู้เล่น */
  --magenta: #ff2d95;   /* ฝั่ง AI */
  --gold:    #ffc14d;   /* ลูกหมากทอง */
  --gold-hi: #ffe9b0;
  --text:    #e8ecff;
  --dim:     #8a93c4;
  --line:    rgba(120, 140, 255, .18);
  --r-lg: 22px;
  --r-md: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { font-size: 16px; }

body {
  font-family: 'Sarabun', sans-serif;
  background: var(--void);
  color: var(--text);
  min-height: 100dvh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
}

/* ───────── ฉากหลัง: ดาว + กริดขอบฟ้า ───────── */
.bg-stars, .bg-grid { position: fixed; inset: 0; pointer-events: none; z-index: -2; }
.bg-stars {
  background:
    radial-gradient(1px 1px at 12% 20%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 12%, var(--cyan) 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 65%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 60% 40%, var(--magenta) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 70%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 88%, var(--gold) 50%, transparent 51%),
    radial-gradient(circle at 50% 120%, #1b1450 0%, var(--void) 60%);
  animation: twinkle 6s ease-in-out infinite alternate;
}
.bg-grid {
  z-index: -1;
  background:
    linear-gradient(transparent 96%, rgba(0, 229, 255, .12) 97%),
    linear-gradient(90deg, transparent 96%, rgba(255, 45, 149, .10) 97%);
  background-size: 64px 64px;
  mask-image: linear-gradient(to top, rgba(0,0,0,.7), transparent 55%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.7), transparent 55%);
}
@keyframes twinkle { from { opacity: .75; } to { opacity: 1; } }

/* ───────── ส่วนหัว ───────── */
.top { text-align: center; padding: clamp(16px, 4vw, 34px) 0 10px; }
.logo {
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  letter-spacing: .02em;
  line-height: 1;
}
.logo-neon {
  display: inline-block;
  margin-left: .25em;
  background: linear-gradient(100deg, var(--cyan), var(--magenta) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(0, 229, 255, .55)) drop-shadow(0 0 26px rgba(255, 45, 149, .35));
}
.tagline {
  margin-top: 6px;
  color: var(--dim);
  font-size: clamp(.78rem, 2.6vw, .95rem);
  letter-spacing: .08em;
}

/* ───────── แผงทั่วไป ───────── */
.panel {
  width: min(560px, 100%);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 4vw, 28px);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, .06), 0 18px 50px rgba(0, 0, 0, .55);
  margin-top: 10px;
}
.panel-title {
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 16px;
  text-align: center;
}

.opt-group { margin-bottom: 18px; }
.opt-label {
  display: block;
  color: var(--dim);
  font-size: .82rem;
  letter-spacing: .12em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.opt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.opt-btn {
  flex: 1 1 auto;
  font-family: 'Kanit', sans-serif;
  font-size: .92rem;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .1s;
}
.opt-btn:hover { border-color: rgba(0, 229, 255, .5); }
.opt-btn:active { transform: scale(.97); }
.opt-btn.selected {
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 229, 255, .35), inset 0 0 14px rgba(0, 229, 255, .12);
}

#player-name {
  width: 100%;
  font-family: 'Kanit', sans-serif;
  font-size: 1rem;
  padding: 11px 14px;
  background: rgba(0, 0, 0, .3);
  color: var(--gold-hi);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  outline: none;
}
#player-name:focus { border-color: var(--gold); box-shadow: 0 0 12px rgba(255, 193, 77, .3); }

.menu-actions, .end-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

.btn-primary {
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  font-size: 1.08rem;
  padding: 13px 30px;
  color: #051018;
  background: linear-gradient(100deg, var(--cyan), #6effd0);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(0, 229, 255, .5);
  transition: transform .12s, box-shadow .2s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 32px rgba(0, 229, 255, .75); }
.btn-primary:active { transform: scale(.96); }

.btn-ghost {
  font-family: 'Kanit', sans-serif;
  font-size: 1rem;
  padding: 12px 22px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.btn-ghost:hover { border-color: var(--magenta); box-shadow: 0 0 14px rgba(255, 45, 149, .3); }
.btn-ghost.small { font-size: .85rem; padding: 8px 16px; }

button:focus-visible, input:focus-visible, .hole:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ───────── กระดานผู้นำ ───────── */
.leaderboard { margin-top: 24px; border-top: 1px dashed var(--line); padding-top: 16px; }
.lb-title { font-family: 'Kanit', sans-serif; font-weight: 600; font-size: 1rem; color: var(--gold); text-align: center; margin-bottom: 10px; }
.lb-list { list-style: none; counter-reset: rank; }
.lb-list li {
  counter-increment: rank;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: .92rem;
}
.lb-list li:nth-child(odd) { background: rgba(255, 255, 255, .03); }
.lb-list li::before {
  content: counter(rank);
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  width: 1.6em; height: 1.6em;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 193, 77, .12);
  color: var(--gold);
  font-size: .8rem;
  flex-shrink: 0;
}
.lb-list li:first-child::before { background: var(--gold); color: #1a1200; box-shadow: 0 0 12px rgba(255, 193, 77, .6); }
.lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-family: 'Kanit', sans-serif; color: var(--cyan); }
.lb-mode { font-size: .72rem; color: var(--dim); }
.lb-empty { color: var(--dim); justify-content: center; }
.lb-empty::before { display: none !important; }

/* ───────── HUD ───────── */
#game { width: min(980px, 100%); display: flex; flex-direction: column; align-items: center; }
.hud {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin: 8px 0 14px;
}
.hud-side { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 84px; }
.hud-name { font-family: 'Kanit', sans-serif; font-size: .85rem; color: var(--dim); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-store {
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
}
.hud-ai .hud-store { color: var(--magenta); text-shadow: 0 0 14px rgba(255, 45, 149, .6); }
.hud-player .hud-store { color: var(--cyan); text-shadow: 0 0 14px rgba(0, 229, 255, .6); }
.hud-center { text-align: center; flex: 1; }
.turn-banner {
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 3.4vw, 1.3rem);
  transition: color .3s, text-shadow .3s;
}
.turn-banner.p-turn { color: var(--cyan); text-shadow: 0 0 16px rgba(0, 229, 255, .65); }
.turn-banner.a-turn { color: var(--magenta); text-shadow: 0 0 16px rgba(255, 45, 149, .65); }
.status-line { font-size: .82rem; color: var(--dim); min-height: 1.3em; margin-top: 2px; }

/* ───────── เรือสำเภานีออน (กระดาน) ───────── */
.board-wrap { width: 100%; display: flex; justify-content: center; }
.board {
  display: flex;
  align-items: stretch;
  gap: clamp(8px, 1.6vw, 16px);
  background:
    radial-gradient(120% 160% at 50% -30%, rgba(255, 45, 149, .10), transparent 50%),
    radial-gradient(120% 160% at 50% 130%, rgba(0, 229, 255, .10), transparent 50%),
    linear-gradient(180deg, #10153d, #0a0e2c);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: clamp(12px, 2.4vw, 22px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .04),
    0 0 45px rgba(0, 229, 255, .10),
    0 0 45px rgba(255, 45, 149, .08),
    0 24px 60px rgba(0, 0, 0, .6);
}

.lanes { display: flex; flex-direction: column; gap: clamp(6px, 1.4vw, 12px); justify-content: center; }
.row { display: flex; gap: clamp(6px, 1.2vw, 12px); }
.row-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .35;
}

/* หลุมเมือง */
.hole {
  position: relative;
  width: clamp(44px, 9.5vw, 88px);
  height: clamp(44px, 9.5vw, 88px);
  border-radius: 50%;
  border: 2px solid var(--line);
  background: radial-gradient(circle at 35% 30%, #1d2452, #0a0d26 70%);
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, .7);
  cursor: default;
  display: grid;
  place-items: center;
  transition: border-color .2s, box-shadow .25s, transform .12s;
  -webkit-user-select: none; user-select: none;
}
.row-player .hole.playable {
  cursor: pointer;
  border-color: var(--cyan);
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, .7), 0 0 14px rgba(0, 229, 255, .35);
  animation: breathe 2.2s ease-in-out infinite;
}
.row-player .hole.playable:hover { transform: scale(1.07); box-shadow: inset 0 6px 14px rgba(0,0,0,.7), 0 0 24px rgba(0, 229, 255, .7); }
@keyframes breathe {
  0%, 100% { box-shadow: inset 0 6px 14px rgba(0,0,0,.7), 0 0 10px rgba(0, 229, 255, .25); }
  50%      { box-shadow: inset 0 6px 14px rgba(0,0,0,.7), 0 0 22px rgba(0, 229, 255, .55); }
}

.hole .count {
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  font-size: clamp(.95rem, 2.6vw, 1.4rem);
  color: var(--gold-hi);
  text-shadow: 0 0 10px rgba(255, 193, 77, .5);
  background: radial-gradient(circle, rgba(6, 8, 28, .85) 30%, transparent 72%);
  padding: .08em .38em;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}
.hole .dots {
  position: absolute; inset: 14%;
  pointer-events: none;
}
.hole .dots i {
  position: absolute;
  width: 16%; height: 16%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 60%, #9a6a12);
  box-shadow: 0 0 6px rgba(255, 193, 77, .8);
}

/* เอฟเฟกต์ตอนหว่าน/กิน */
.hole.drop { animation: dropPulse .4s ease; }
@keyframes dropPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.14); border-color: var(--gold); box-shadow: 0 0 22px rgba(255, 193, 77, .8), inset 0 6px 14px rgba(0,0,0,.7); }
  100% { transform: scale(1); }
}
.hole.pickup { animation: pickupFlash .4s ease; }
@keyframes pickupFlash {
  0%   { transform: scale(1); }
  40%  { transform: scale(.88); filter: brightness(1.8); }
  100% { transform: scale(1); }
}
.hole.captured { animation: captureBurst .7s ease; }
@keyframes captureBurst {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.25); border-color: var(--gold); box-shadow: 0 0 40px rgba(255, 193, 77, 1); }
  100% { transform: scale(1); }
}

/* หัวเมือง */
.store {
  width: clamp(64px, 13vw, 120px);
  min-height: clamp(110px, 22vw, 200px);
  border-radius: 999px;
  border: 2px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  position: relative;
  background: radial-gradient(circle at 50% 25%, #1d2452, #0a0d26 75%);
  box-shadow: inset 0 8px 20px rgba(0, 0, 0, .7);
  transition: box-shadow .3s, border-color .3s;
}
.store-ai     { border-color: rgba(255, 45, 149, .55); }
.store-player { border-color: rgba(0, 229, 255, .55); }
.store-ai.glow     { box-shadow: inset 0 8px 20px rgba(0,0,0,.7), 0 0 30px rgba(255, 45, 149, .6); }
.store-player.glow { box-shadow: inset 0 8px 20px rgba(0,0,0,.7), 0 0 30px rgba(0, 229, 255, .6); }
.store-label {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(.6rem, 1.6vw, .78rem);
  color: var(--dim);
  letter-spacing: .06em;
  text-align: center;
}
.store-count {
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 4.4vw, 2.4rem);
  color: var(--gold);
  text-shadow: 0 0 16px rgba(255, 193, 77, .7);
  line-height: 1;
}
.seed-pile { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 80%; }
.seed-pile i {
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 60%, #9a6a12);
  box-shadow: 0 0 5px rgba(255, 193, 77, .8);
}

.game-actions { display: flex; gap: 8px; margin: 16px 0 6px; flex-wrap: wrap; justify-content: center; }

/* ───────── โมดัล ───────── */
.modal {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: rgba(3, 5, 18, .8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 16px;
}
.modal-card {
  width: min(440px, 100%);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 0 60px rgba(0, 229, 255, .15), 0 24px 70px rgba(0, 0, 0, .7);
  animation: cardIn .35s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes cardIn { from { transform: scale(.8) translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.howto-card { text-align: left; max-height: 86dvh; overflow-y: auto; }
.howto-list { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: .95rem; line-height: 1.55; margin-bottom: 18px; }
.howto-list b { color: var(--gold); font-family: 'Kanit', sans-serif; font-weight: 600; }
.end-title {
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  margin-bottom: 8px;
  background: linear-gradient(100deg, var(--gold), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 193, 77, .5));
}
.end-detail { color: var(--dim); margin-bottom: 20px; line-height: 1.6; }

.foot { margin-top: auto; padding: 22px 0 8px; color: var(--dim); font-size: .72rem; text-align: center; letter-spacing: .04em; }

.hidden { display: none !important; }

/* ═══════════ มือถือ: พลิกเรือเป็นแนวตั้ง ═══════════
   วงจรการหว่านยังวนสวยงาม: คอลัมน์ขวา (คุณ) ไหลลง → หัวเมืองคุณ (ล่าง)
   → คอลัมน์ซ้าย (AI) ไหลขึ้น → หัวเมือง AI (บน) */
@media (max-width: 700px) {
  .board { flex-direction: column; align-items: stretch; border-radius: 48px; }
  .lanes { flex-direction: row; justify-content: center; gap: clamp(14px, 6vw, 28px); }
  .row { flex-direction: column; }                   /* AI: 14 บน → 8 ล่าง / คุณ: 0 บน → 6 ล่าง */
  .row-divider { width: 1px; height: auto; background: linear-gradient(180deg, transparent, var(--gold), transparent); }
  .store { width: 100%; min-height: 78px; flex-direction: row; gap: 12px; border-radius: 999px; }
  .store .seed-pile { display: none; }
  .hole { width: clamp(52px, 13.5vw, 64px); height: clamp(52px, 13.5vw, 64px); }
  .hud-side { min-width: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}