/* เฉพาะเกมลอยกระทง */
.game-title {
  font-size: 2rem;
  color: #3b2f7a;
  letter-spacing: .5px;
}
.game-title span {
  display: block;
  font-size: 1.35em;
  color: var(--fg-primary);
  text-shadow: 0 3px 0 #ffe0c9;
}

.howto {
  margin-top: 14px;
  padding: 10px 8px 4px;
  background: rgba(124, 140, 255, .08);
  border-radius: 16px;
  font-size: .92rem;
}
.howto p { margin: 4px 0; }
.howto-head { font-weight: 700; }
.howto-bad { font-weight: 700; color: #8a4b55; margin-top: 8px !important; }
.items {
  list-style: none;
  margin: 4px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
}
.items li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 4.6em;
  font-size: .8rem;
  line-height: 1.25;
}
.items canvas { width: 40px; height: 40px; }

.play-screen { align-items: center; }
.hud-label { font-size: .8rem; font-weight: 600; opacity: .9; }
@media (max-width: 360px) { .hud-label { display: none; } }
.hud-time.low { background: rgba(226, 105, 74, .75); }
#btnSound .sound-on { display: none; }
#btnSound[aria-pressed="true"] .sound-on { display: inline; }
#btnSound[aria-pressed="true"] .sound-off { display: none; }

/* คอมโบ: ข้างพระจันทร์ฝั่งซ้าย คร่อมเส้นขอบฟ้า — game.js ตั้ง left/top ตามพระจันทร์จริง จึงไม่บังพระจันทร์และพื้นที่เล่น */
.combo {
  --size: 2.1rem;
  position: fixed;
  left: 12px;
  top: 64px;
  display: grid;
  justify-items: start;
  transform: rotate(-6deg);
  transform-origin: left center;
  color: #fff;
  pointer-events: none;
}
/* ตัวเลขสีส้มอมเหลืองสีเดียว โตขึ้นตามคอมโบ (game.js ตั้ง --size) */
.combo-num {
  font-size: var(--size);
  line-height: .9;
  font-weight: 800;
  font-style: italic;
  color: #ffa526;
  -webkit-text-stroke: 3px #2b2350;
  paint-order: stroke fill;
  text-shadow: 0 5px 0 #2b2350;
  font-variant-numeric: tabular-nums;
  transition: font-size .2s cubic-bezier(.3, 1.5, .6, 1);
}
.combo-word {
  margin-top: -2px;
  font-size: 1.1rem;
  font-weight: 800;
  font-style: italic;
  -webkit-text-stroke: 2px #2b2350;
  paint-order: stroke fill;
}
.combo-word b { color: #ffe27a; }
/* แถบเวลาคอมโบ: เส้นตรงสีชมพูบัว ยาวเท่าคำว่า "คอมโบ! ×2" · 2 วินาทีสุดท้ายสีแดงกะพริบ */
.combo-bar {
  justify-self: stretch;
  height: 5px;
  margin-top: 1px;
  border-radius: 3px;
  overflow: hidden;
}
.combo-bar b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ff7fa8, #ffc2d8);
  transform-origin: left center;
}
.combo.hurry .combo-bar b { background: #ff3b2f; animation: combo-hurry .32s steps(2) infinite; }
.combo.hit .combo-num { animation: combo-jolt .22s ease-out; }
@keyframes combo-hurry { 50% { opacity: .35; } }
@keyframes combo-jolt { 0% { transform: scale(1.3) translateX(6px); } 40% { transform: translateX(-4px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .combo-num, .combo.hurry .combo-bar b { animation: none; transition: none; }
}

.pause-panel { max-width: 320px; }

.end-score-label { margin: 6px 0 0 !important; color: var(--fg-muted); }
.end-score {
  margin: 0 !important;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
}
.campaign {
  background: rgba(102, 184, 90, .16);
  color: #2d6a33;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 600;
}
.campaign::before { content: "🌿 "; }
.center { text-align: center; }

/* ปุ่มเสียง แสดงทุกหน้าจอ */
.sound-fab {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: 12px;
  z-index: 5;
  box-shadow: 0 3px 10px rgba(10, 8, 40, .35);
}
.hud { padding-right: 66px; }
.screen:not(.play-screen) { padding-top: max(62px, env(safe-area-inset-top)); }

/* ===== การ์ดหน้าแรก: แถบหน่วยงาน + น้องกระทงเด่นที่สุด + วิธีเล่น (จอกว้างเป็นสองคอลัมน์) ===== */
.home-panel { max-width: 560px; padding: 0 0 12px; }
.card-org {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  /* พื้นขาว: logo หน่วยงานส่วนใหญ่ออกแบบให้วางบนพื้นขาว จึงชัดทุกโทนสี
     เป็นแค่ฟิล์มขาวทับพื้นการ์ด ความโปร่งจึงเท่ากับการ์ด */
  background: rgba(255, 255, 255, .75);
  border-bottom: 2px solid #f2c46b;
}
.card-org img {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  object-fit: contain;
}
.card-org-text { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 8px; text-align: left; }
.card-org-name { color: #2b2350; font-size: .9rem; font-weight: 700; line-height: 1.3; }
.card-org-sub { color: #e2694a; font-size: .78rem; font-weight: 600; }
/* ลิงก์กลับเว็บไซต์หน่วยงาน (มุมขวาของแถบ ไม่ดันชื่อหน่วยงานให้เยื้อง) */
.card-org { position: relative; }
.card-org-link {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  color: #4b3f9a;
  text-decoration: none;
  background: rgba(124, 140, 255, .14);
  white-space: nowrap;
}
.card-org-link:hover { background: rgba(124, 140, 255, .26); }
.card-org-link:focus-visible { outline: 2px solid #4b3f9a; outline-offset: 2px; }
.home-main { padding: 0 18px; }
.card-org[hidden] + .home-main { padding-top: 12px; }
.hero-kratong { display: block; width: 190px; height: 160px; margin: 2px auto -6px; }
.home-panel .game-title { font-size: 1.8rem; }
.home-buttons { display: flex; gap: 10px; }
.home-buttons .btn { flex: 1; margin-top: 10px; padding-left: 8px; padding-right: 8px; }
.home-panel .howto { margin: 12px 18px 0; }
.home-foot { padding: 0 18px; }
.home-foot p { margin: 6px 0 0; }

/* มือถือจอเตี้ย: ชื่อเกมบรรทัดเดียว ย่อน้องกระทงและวิธีเล่น */
@media (max-width: 759px) and (max-height: 780px) {
  .hero-kratong { width: 150px; height: 124px; }
  .home-panel .game-title { font-size: 1.55rem; }
  .home-panel .game-title span { display: inline; font-size: 1.2em; margin-left: .2em; }
  .home-panel .status { padding: 6px 10px; font-size: .88rem; }
  .home-panel .howto { padding: 8px 6px 2px; font-size: .85rem; }
  .home-panel .items canvas { width: 34px; height: 34px; }
  .home-panel .items li { font-size: .74rem; }
}
@media (max-width: 759px) and (max-height: 660px) {
  .hero-kratong { width: 124px; height: 102px; }
  .home-panel .btn { padding-top: 11px; padding-bottom: 11px; }
}

/* จอกว้าง: สองคอลัมน์ วิธีเล่นด้านขวา */
@media (min-width: 760px) {
  .home-panel {
    max-width: 920px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "band band" "main how" "foot how";
    column-gap: 22px;
    align-items: start;
    padding-bottom: 14px;
  }
  .card-org { grid-area: band; margin-bottom: 4px; }
  .home-main { grid-area: main; padding: 0 0 0 24px; }
  .home-foot { grid-area: foot; padding: 0 0 0 24px; }
  .home-panel .howto {
    grid-area: how;
    margin: 14px 24px 0 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 12px;
  }
  .hero-kratong { width: 230px; height: 190px; }
  .home-panel .game-title { font-size: 2rem; }
  .home-panel .items li { width: 5.4em; }
  .home-panel .items canvas { width: 46px; height: 46px; }
}
@media (min-width: 760px) and (max-height: 760px) {
  .hero-kratong { width: 190px; height: 158px; }
}
/* มือถือแนวนอน */
@media (min-width: 760px) and (max-height: 500px) {
  .hero-kratong { width: 120px; height: 98px; }
  .home-panel .game-title { font-size: 1.5rem; }
  .home-panel .game-title span { display: inline; font-size: 1.15em; margin-left: .2em; }
  .home-panel .howto { padding: 8px 8px; }
  .home-panel .howto-move { display: none; }
  .home-panel .items canvas { width: 34px; height: 34px; }
}

/* คอมโบ ×3 */

/* ===== หน้าจบเกม: มือถือแถวเดียว / จอกว้าง 2 คอลัมน์ ===== */
.end-panel { max-width: 560px; } /* กว้างเท่าการ์ดหน้าแรก */
.end-head h2 { margin-bottom: 2px; }
.end-summary {
  margin: 8px 0 4px;
  padding: 12px 10px 10px;
  border-radius: 18px;
  background: #fbf8ff;
  border: 2px solid #ece4ff;
}
.end-summary h3 { margin: 0 0 10px; font-size: 1rem; color: #4b3f9a; text-align: center; }
/* ของที่เก็บได้: แถวเดียว 4 ช่อง ไอคอนบนวงกลมสีอ่อนของตัวเอง → จำนวน → ชื่อ → คะแนน */
.end-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.end-item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.end-item canvas { width: 52px; height: 52px; padding: 6px; border-radius: 50%; background: var(--ic); flex: 0 0 auto; }
.end-item div { display: flex; flex-direction: column; align-items: center; line-height: 1.2; min-width: 0; }
.end-item b { order: -1; font-size: 1.3rem; color: var(--fg-ink); font-variant-numeric: tabular-nums; }
.end-item-name { font-size: .78rem; color: var(--fg-muted); font-weight: 600; }
.end-item small { font-size: .72rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.end-marigold { --ic: #ffe6c4; }
.end-lotus { --ic: #ffdbe9; }
/* ม่วงลาเวนเดอร์ ตัดกับแสงเหลืองเขียวของก้นหิ่งห้อย */
.end-firefly { --ic: #ddd6fb; }
.end-lantern { --ic: #fff0b8; }
/* คอมโบ / หลบขยะ: บรรทัดเล็กใต้เส้นประ ไม่ใช้พื้นสี */
.end-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px dashed #ece4ff;
}
.end-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 6px; text-align: center; }
.end-bar-label { width: 100%; font-size: .78rem; font-weight: 600; color: var(--fg-muted); }
.end-bar b { font-size: 1.3rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.end-combo b { color: #d9547f; }
.end-tier {
  font-style: normal;
  font-weight: 800;
  font-size: .78rem;
  padding: 1px 8px;
  border-radius: 999px;
  background: #ffe0ea;
  color: #c2456f;
}
.end-dodge b { color: #2c5d9e; }
.end-dodge small { font-size: .8rem; color: var(--fg-muted); }
.end-rest .campaign { margin-top: 10px; }

@media (min-width: 760px) {
  .end-panel {
    max-width: 920px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "head sum" "rest sum";
    column-gap: 22px;
    align-items: start;
    padding: 22px 24px 18px;
  }
  .end-head { grid-area: head; }
  .end-rest { grid-area: rest; }
  .end-summary { grid-area: sum; margin: 0; align-self: stretch; padding: 16px; display: flex; flex-direction: column; justify-content: center; }
  .end-summary h3 { font-size: 1.1rem; margin-bottom: 12px; }
  .end-item canvas { width: 60px; height: 60px; padding: 7px; }
  .end-item b { font-size: 1.45rem; }
  .end-bars { margin-top: 14px; padding-top: 12px; }
}

/* มือถือ: จัดหน้าจบเกมให้กะทัดรัด จะได้ไม่ต้องย่อการ์ดทั้งใบ (การ์ดกว้างเท่าหน้าแรก) */
@media (max-width: 759px) {
  .end-panel { padding: 16px 14px 12px; }
  .end-head h2 { font-size: 1.25rem; }
  .end-panel .end-score-label { font-size: .85rem; }
  .end-panel .end-score { font-size: 2.4rem; }
  .end-summary { padding: 10px; margin-top: 6px; }
  .end-summary h3 { font-size: .92rem; margin-bottom: 6px; }
  .end-item { gap: 2px; }
  .end-item canvas { width: 42px; height: 42px; padding: 5px; }
  .end-item b { font-size: 1.1rem; }
  .end-bars { gap: 6px; margin-top: 8px; padding-top: 6px; }
  .end-bar b { font-size: 1.15rem; }
  .end-rest .campaign { margin-top: 8px; padding: 7px 10px; font-size: .88rem; }
  .end-panel .nick-form { margin-top: 8px; }
  .end-panel .nick-form input { padding: 10px 12px; }
  .end-panel .nick-hint { font-size: .78rem; }
  .end-panel .nick-error { min-height: 1.1em; margin-top: 2px; }
  .end-panel .btn { padding-top: 11px; padding-bottom: 11px; margin-top: 8px; }
}
/* มือถือจอเตี้ย: ซ่อนคะแนนย่อยใต้จำนวนชิ้น */
@media (max-width: 759px) and (max-height: 700px) {
  .end-item small { display: none; }
  .end-panel .end-score { font-size: 2rem; }
  .end-rest .campaign { font-size: .82rem; }
}

/* มือถือ: แถบหน่วยงาน logo ซ้าย ชื่อ + คำเชิญเรียงบรรทัดชิดซ้ายข้าง logo */
@media (max-width: 759px) {
  .card-org { justify-content: flex-start; padding: 8px 14px; }
  .card-org.has-link { padding-right: 118px; }
  .card-org-text { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* แผงทดสอบ (เฉพาะลิงก์ทดสอบจากหน้าแอดมิน) */
.test-bar {
  position: fixed;
  left: max(10px, env(safe-area-inset-left));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 20px);
  padding: 5px 6px 5px 5px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 3px 10px rgba(10, 8, 40, .3);
  font-size: .8rem;
  color: var(--fg-ink);
}
.test-tag { background: #e2694a; color: #fff; font-weight: 700; border-radius: 8px; padding: 2px 8px; }
.test-bar select, .test-bar button { font: inherit; padding: 3px 6px; border-radius: 8px; border: 1px solid #c9c3e6; background: #fff; color: inherit; }
.test-bar button { cursor: pointer; font-weight: 600; }
.test-bar button:disabled { opacity: .45; cursor: default; }