/* สไตล์กลางของเกมเทศกาล — เกมแต่ละเกมปรับสีผ่านตัวแปร --fg-* ได้ */
:root {
  --fg-ink: #2b2350;
  --fg-panel: rgba(255, 251, 244, 0.94);
  --fg-primary: #ff8f6b;
  --fg-primary-dark: #e2694a;
  --fg-secondary: #7c8cff;
  --fg-accent: #ffd36b;
  --fg-muted: #6f6890;
  --fg-error: #c8414b;
  --fg-radius: 22px;
  --fg-font: "Noto Sans Thai", "Noto Sans Thai UI", "Leelawadee UI", "Thonburi", "Sukhumvit Set", Tahoma, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: #141a44;
  color: var(--fg-ink);
  font: 16px/1.5 var(--fg-font);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overflow: hidden;
  pointer-events: none;
}
.screen > * { pointer-events: auto; }

.panel {
  width: 100%;
  max-width: 420px;
  overflow-y: auto;
  scrollbar-width: none;
  transform-origin: center center;
  background: var(--fg-panel);
  border-radius: var(--fg-radius);
  padding: 22px 20px 18px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(10, 8, 40, 0.45);
  animation: fg-pop .28s ease-out;
}
/* ใช้ translate แยก ไม่ชน transform: scale() ที่ระบบใช้ย่อการ์ดให้พอดีจอ */
.panel::-webkit-scrollbar { display: none; }
@keyframes fg-pop { from { translate: 0 12px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .panel { animation: none; } }

.panel h1, .panel h2 { margin: 0 0 6px; line-height: 1.25; }
.panel p { margin: 8px 0; }

.btn {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 13px 16px;
  border: 0;
  border-radius: 999px;
  font: 700 1.08rem/1.2 var(--fg-font);
  color: var(--fg-ink);
  background: #fff;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .1), 0 2px 0 rgba(43, 35, 80, .12);
  cursor: pointer;
  touch-action: manipulation;
}
a.btn { text-align: center; text-decoration: none; }
.btn.primary { background: var(--fg-primary); color: #fff; box-shadow: inset 0 -4px 0 var(--fg-primary-dark); }
.btn:active { transform: translateY(2px); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn:focus-visible, .icon-btn:focus-visible, input:focus-visible { outline: 3px solid var(--fg-secondary); outline-offset: 2px; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

.status {
  white-space: pre-line;
  font-size: .95rem;
  color: var(--fg-muted);
  background: rgba(124, 140, 255, .12);
  border-radius: 14px;
  padding: 8px 12px;
}
.status[data-state="open"] { color: #2c7a4b; background: rgba(76, 175, 120, .14); }

.small { font-size: .85rem; color: var(--fg-muted); }
.small a { color: inherit; }

/* HUD */
.hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 12px 8px;
  color: #fff;
  pointer-events: none;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .35);
}
.hud > * { pointer-events: auto; }
.hud-box {
  background: rgba(20, 18, 60, .45);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 1.15rem;
  min-width: 4.2em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.hud-spacer { flex: 1; }
.icon-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .9);
  color: var(--fg-ink);
  font: 700 1.1rem/1 var(--fg-font);
  cursor: pointer;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn svg { width: 22px; height: 22px; fill: currentColor; }

/* ฟอร์มชื่อเล่น */
.nick-form { margin-top: 12px; text-align: left; }
.nick-form label { font-weight: 700; display: block; margin-bottom: 4px; }
.nick-form input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #ddd6f3;
  border-radius: 14px;
  font: 1.05rem var(--fg-font);
  color: var(--fg-ink);
  background: #fff;
}
.nick-hint { font-size: .85rem; color: var(--fg-muted); margin: 4px 0 0; }
.nick-error { color: var(--fg-error); font-size: .92rem; min-height: 1.4em; margin: 6px 0 0; }
.practice-note { color: var(--fg-muted); background: rgba(255, 211, 107, .28); border-radius: 12px; padding: 8px 10px; font-size: .92rem; }

/* กระดานคะแนน */
.board-list { list-style: none; padding: 0; margin: 10px 0 0; text-align: left; }
.board-row, .board-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 12px;
}
.board-row:nth-child(odd) { background: rgba(124, 140, 255, .08); }
.board-empty { justify-content: center; color: var(--fg-muted); }
.board-rank {
  flex: 0 0 2em;
  height: 2em;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: #ece9f8;
  font-size: .9rem;
}
.top1 .board-rank { background: #ffd36b; }
/* อันดับ 1: มงกุฎสวมบนเหรียญ */
.top1 .board-rank { position: relative; box-shadow: 0 0 0 2px #ffe9a8, 0 2px 8px rgba(242, 165, 65, .45); }
.top1 .board-rank::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -.78em;
  width: 1.5em;
  height: 1.1em;
  transform: translateX(-50%) rotate(-12deg);
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'><path d='M2 15 L1 4 L7 9 L12 1 L17 9 L23 4 L22 15 Z' fill='%23ffc93c' stroke='%23c98a10' stroke-width='1.4' stroke-linejoin='round'/><rect x='2' y='14' width='20' height='3' rx='1' fill='%23f2a541' stroke='%23c98a10' stroke-width='1.2'/><circle cx='12' cy='10' r='1.8' fill='%23ff6b8a'/><circle cx='1' cy='4' r='1.4' fill='%23fff3c4'/><circle cx='12' cy='1' r='1.4' fill='%23fff3c4'/><circle cx='23' cy='4' r='1.4' fill='%23fff3c4'/></svg>") center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(120, 70, 0, .35));
}
.board-row.top1 { padding-top: 12px; }
.top2 .board-rank { background: #dfe3ee; }
.top3 .board-rank { background: #f3c59b; }
.board-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.board-row.mine { outline: 2px solid var(--fg-primary); background: rgba(255, 143, 107, .14); }
.my-rank { font-weight: 700; color: var(--fg-primary-dark); }

/* เครดิตผู้จัดทำ ท้ายการ์ดหน้าแรก */
.credit { margin: 2px 0 0; font-size: .75rem; color: var(--fg-muted); opacity: .8; }
.credit:empty { display: none; }

/* ไม่ให้มีแถบสีขึ้นตอนแตะปุ่ม/ลิงก์บนมือถือ (กำหนดซ้ำที่ตัวปุ่ม เผื่อบางเบราว์เซอร์ไม่สืบทอดจาก body) */
a, button, input, canvas, [data-action] { -webkit-tap-highlight-color: transparent; }

/* กำลังพิมพ์ชื่อ (คีย์บอร์ดมือถือเปิด): การ์ดขนาดปกติ เลื่อนดูได้ */
.screen.typing { overflow-y: auto; align-items: flex-start; }

/* ผู้ชนะกิจกรรม: กรอบเล็กชัด ๆ (ระบบประกาศเองหลังกิจกรรมจบ) */
.winner-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 2px solid #f0b54a;
  border-radius: 14px;
  background: #fff8e3;
  color: var(--fg-ink);
  text-align: center;
}
.winner-box.fresh { box-shadow: 0 0 0 3px rgba(255, 210, 122, .45); }
.winner-label { font-size: .78rem; font-weight: 700; color: #a86a12; letter-spacing: .03em; }
.winner-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 8px; }
.winner-name { font-size: 1.2rem; overflow-wrap: anywhere; }
.winner-score { font-size: .92rem; font-weight: 700; color: #c2456f; font-variant-numeric: tabular-nums; }
.winner-note { font-size: .72rem; color: var(--fg-muted); }