@font-face { font-family: Kanit; font-weight: 400; src: url(fonts/Kanit-Regular.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: Kanit; font-weight: 600; src: url(fonts/Kanit-SemiBold.ttf) format('truetype'); font-display: swap; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0e1f18; overflow: hidden; font-family: Kanit, system-ui, sans-serif; color: #fff;
  touch-action: none; user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
body { display: flex; align-items: center; justify-content: center; }
#stage { position: relative; background: #000; overflow: hidden; }
#c { width: 100%; height: 100%; display: block; image-rendering: auto; }
#loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #0e1f18; font-size: 22px; z-index: 50; padding: 20px; text-align: center; }

#ui { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8, 20, 16, 0.55); z-index: 10; }
#ui[hidden] { display: none; }
.panel { background: linear-gradient(#26402f, #1a2e22); border: 3px solid #e8c15a; border-radius: 16px; padding: 2.4% 4%; max-width: 86%; max-height: 94%;
  overflow: auto; text-align: center; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6); }
.panel.wide { width: 86%; }
.panel h1 { margin: 0; font-size: clamp(30px, 7vh, 64px); color: #ffe9a0; text-shadow: 0 3px 0 #7a4b12, 0 0 20px rgba(255, 200, 80, 0.5); letter-spacing: 1px; }
.panel h2 { margin: 0 0 1.5vh; font-size: clamp(20px, 4.2vh, 36px); color: #ffe9a0; }
.panel h3 { margin: 1.4vh 0 0.8vh; font-size: clamp(14px, 2.6vh, 22px); color: #9fe9c0; }
.sub { margin: 0.5vh 0 2vh; opacity: 0.8; font-size: clamp(12px, 2.4vh, 18px); }
.line { margin: 1vh 0; font-size: clamp(13px, 2.5vh, 19px); line-height: 1.5; text-align: left; }
.note { font-size: clamp(11px, 2vh, 15px); opacity: 0.7; margin: 1vh 0; }
.col { display: flex; flex-direction: column; gap: 1.4vh; align-items: stretch; min-width: 36vh; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 4vh; margin: 1vh 0; font-size: clamp(14px, 2.8vh, 22px); }
.btn { font: 600 clamp(15px, 3vh, 24px) Kanit, sans-serif; color: #fff; background: #3e6b4c; border: 2px solid #8fd6a6; border-radius: 12px; padding: 1.2vh 2.4vh; cursor: pointer; }
.btn:hover { background: #4b8059; }
.btn:active { transform: translateY(2px); }
.btn.primary { background: #c77d1a; border-color: #ffd98a; }
.btn.primary:hover { background: #dd9022; }
.btn.small { font-size: clamp(12px, 2.2vh, 18px); padding: 0.7vh 1.6vh; }
.coins { font-size: clamp(14px, 2.8vh, 22px); color: #ffe9a0; }
.grid { display: flex; gap: 1.4vh; justify-content: center; flex-wrap: wrap; }
.card { background: rgba(0, 0, 0, 0.35); border: 2px solid #5a6a60; border-radius: 12px; padding: 0.8vh 1.2vh; min-width: 15vh; display: flex; flex-direction: column; align-items: center; gap: 0.5vh; }
.card .name { font-weight: 600; font-size: clamp(12px, 2.3vh, 18px); }
.card .meta { font-size: clamp(10px, 1.9vh, 14px); opacity: 0.85; max-width: 20vh; }
.card.locked { opacity: 0.6; }
.card.sel { box-shadow: 0 0 0 3px #ffe066; }
.card.r1 { border-color: #cfd6e2; } .card.r2 { border-color: #4fe8ff; box-shadow: 0 0 14px rgba(79, 232, 255, 0.5); } .card.r3 { border-color: #ffb81f; box-shadow: 0 0 18px rgba(255, 184, 31, 0.7); }
.card.big { padding: 2vh 2.4vh; min-width: 24vh; opacity: 0; transform: scale(0.6); animation: pop 0.5s forwards; }
.card .rar { font-size: clamp(11px, 2vh, 15px); color: #ffe9a0; }
@keyframes pop { 0% { opacity: 0; transform: scale(0.5) rotate(-6deg); } 70% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
.stats, .summary { display: flex; gap: 2vh; justify-content: center; flex-wrap: wrap; margin: 1.4vh 0; font-size: clamp(12px, 2.4vh, 18px); }
.summary { font-size: clamp(15px, 3vh, 24px); flex-direction: column; gap: 0.6vh; margin: 1.6vh 0 2.4vh; }
.stats b, .summary b { color: #ffe9a0; }
.reward .grid { margin: 2vh 0; }
.maprow { gap: 1.6vh; }
.mapcard { min-width: 16vh; }
.mapcard.lit { border-color: #7ff; box-shadow: 0 0 14px rgba(127, 255, 255, 0.5); }
.story .line { text-align: center; max-width: 70vh; margin: 1.4vh auto; }
.endimg { width: 100%; max-height: 52vh; object-fit: contain; border-radius: 10px; margin-bottom: 1vh; }
.story .gift { color: #ffe9a0; font-weight: 600; }

#pauseBtn { position: absolute; top: 2%; right: 1.5%; width: 5.5%; aspect-ratio: 1; min-width: 34px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.4); color: #fff; font: 600 16px Kanit, sans-serif; z-index: 5; display: none; cursor: pointer; }
body.playing #pauseBtn { display: block; }

/* ปุ่มสัมผัส: โชว์เฉพาะอุปกรณ์สัมผัสตอนกำลังเล่น */
#touch { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: none; }
body.touch.playing #touch { display: block; }
.tc-zone { position: absolute; left: 0; top: 25%; width: 50%; height: 75%; pointer-events: auto; touch-action: none; }
.tc-base { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%); left: 11%; top: 79%; opacity: 0.3; pointer-events: none; }
.tc-base.on { opacity: 1; }
.tc-knob { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; margin: -23% 0 0 -23%; border-radius: 50%; background: rgba(255, 255, 255, 0.5); border: 2px solid #fff; }
.tc-btn { position: absolute; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center;
  font-size: 5vh; color: #fff; pointer-events: auto; touch-action: none; }
.tc-btn.down { background: rgba(255, 255, 255, 0.45); transform: scale(0.94); }
.tc-atk { width: 23%; aspect-ratio: 1; right: 2.5%; bottom: 5%; background: rgba(230, 90, 60, 0.35); max-width: 24vh; }
.tc-goggle { width: 13%; aspect-ratio: 1; right: 2.5%; bottom: 33%; max-width: 14vh; background: rgba(60, 200, 190, 0.35); font-weight: 600; display: none; }
body.goggles .tc-goggle { display: flex; }
.tc-special { width: 13%; aspect-ratio: 1; right: 18%; bottom: 36%; max-width: 14vh; background: rgba(255, 200, 70, 0.3); font-weight: 600; opacity: 0.3; filter: grayscale(0.9); }
body.special-ready .tc-special { opacity: 1; filter: none; box-shadow: 0 0 14px 4px rgba(255, 215, 90, 0.8); }
.tc-jump { width: 19%; aspect-ratio: 1; right: 22%; bottom: 14%; background: rgba(70, 150, 230, 0.35); max-width: 20vh; }

#rotate { display: none; position: fixed; inset: 0; background: #0e1f18; z-index: 60; align-items: center; justify-content: center; font-size: 22px; text-align: center; padding: 24px; }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }

.ver { position: fixed; right: 8px; bottom: 6px; margin: 0; font-size: 12px; opacity: 0.7; color: #fff; text-shadow: 0 1px 2px #000; }

/* จอเตี้ย (มือถือแนวนอน ~844x390): บีบเมนูให้พอดี ปุ่มกลับบนแผนที่ไม่ตกจอ ข้อความคลังอุปกรณ์ไม่ถูกตัด (แผงยังเลื่อนได้ถ้ายังไม่พอ) */
@media (max-height: 460px) {
  .panel { padding: 1.2% 2.6%; max-height: 96%; -webkit-overflow-scrolling: touch; }
  .panel h2 { margin: 0 0 0.6vh; font-size: clamp(16px, 5vh, 24px); }
  .line, .sub, .note { margin: 0.4vh 0; line-height: 1.3; }
  .grid { gap: 0.8vh; }
  .btn { padding: 0.8vh 1.8vh; }
  .btn.small { padding: 0.5vh 1.2vh; }
  .card { padding: 0.5vh 0.8vh; min-width: 11vh; gap: 0.3vh; }
  .card .meta { max-width: 16vh; }
  .mapcard canvas { width: 32px; height: 32px; }
  .card canvas { max-height: 40px; width: auto; }
  .card .rar { font-size: 11px; }
  .maprow { flex-wrap: nowrap; gap: 0.8vh; }
  .mapcard { min-width: 10.5vh; }
  .row { margin: 0.4vh 0; }
}

/* มือถือแนวนอน (ต่อ): ปุ่มหลักของการ์ด (ต่อไป/กลับ) อยู่มุมขวาบนในกรอบ แถวเดียวกับหัวข้อ ไม่บังข้อความ (หัวข้อเว้นที่ข้างไว้) พื้นที่แตะ >= 44x36px ปุ่มสัมผัสโปร่งขึ้นไม่บังตัวละคร/บอส */
@media (max-height: 460px) {
  .panel { display: flex; flex-direction: column; align-items: center; }
  .panel > .btn:last-child { order: -1; align-self: flex-end; position: sticky; top: 0; z-index: 2; flex: none; min-width: 84px; height: 40px; margin: 0 0 -40px; padding: 0 14px; }
  .panel:has(> .btn:last-child) > h2 { align-self: stretch; padding: 0 104px; min-height: 40px; display: flex; align-items: center; justify-content: center; }
  .panel > .col:last-child { position: sticky; bottom: -1px; margin-top: 0.6vh; background: linear-gradient(transparent, #1a2e22 35%); padding-top: 0.8vh; z-index: 2; }
  .btn, .btn.small { min-height: 36px; }
  .stats, .summary { margin: 0.5vh 0; gap: 1vh; font-size: 12px; line-height: 1.25; }
  .tc-btn { opacity: 0.6; }
  .tc-base { opacity: 0.25; }
}