@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: #16314f; 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; }
#loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #16314f; font-size: 22px; z-index: 50; padding: 20px; text-align: center; }

/* ชั้นรับการปัด: ทั้งจอตอนเล่น (ปุ่มพัก/เต็มจอ/เมนูอยู่ชั้นบนกว่า) */
#touch { position: absolute; inset: 0; z-index: 3; display: none; touch-action: none; }
body.playing #touch { display: block; }

#ui { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10, 24, 40, 0.55); z-index: 10; }
#ui[hidden] { display: none; }
.panel { background: linear-gradient(#1f4a72, #16314f); border: 3px solid #ffd36a; border-radius: 18px; padding: 2.2% 4%; max-width: 88%; max-height: 94%;
  overflow: auto; text-align: center; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); }
.panel.wide { width: 88%; }
.panel h1 { margin: 0; font-size: clamp(30px, 8vh, 66px); color: #fff3c4; text-shadow: 0 3px 0 #2f7de0, 0 0 18px rgba(80, 180, 255, 0.6); line-height: 1.15; }
.panel h2 { margin: 0 0 1.4vh; font-size: clamp(20px, 4.6vh, 36px); color: #fff3c4; }
.sub { margin: 0.6vh 0 2.2vh; opacity: 0.9; font-size: clamp(12px, 2.6vh, 19px); }
.note { font-size: clamp(11px, 2vh, 14px); opacity: 0.7; margin: 1.2vh 0 0; }
.line { margin: 1.4vh 0; font-size: clamp(12px, 2.4vh, 17px); line-height: 1.45; }
.col { display: flex; flex-direction: column; gap: 1.4vh; align-items: stretch; min-width: 38vh; }
.btnrow { display: flex; gap: 1.4vh; }
.btnrow .btn { flex: 1; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 3vh; margin: 0.9vh 0; font-size: clamp(14px, 2.8vh, 21px); }
.seg { display: flex; gap: 0.8vh; }
.btn { font: 600 clamp(15px, 3.1vh, 24px) Kanit, sans-serif; color: #fff; background: #2d6aa3; border: 2px solid #9fd4ff; border-radius: 14px; padding: 1.2vh 2.4vh; cursor: pointer; }
.btn:hover { background: #3a7fbf; }
.btn:active { transform: translateY(2px); }
.btn.primary { background: #f0a020; border-color: #ffe39a; color: #2b1a00; }
.btn.primary:hover { background: #ffb43a; }
.btn.small { font-size: clamp(12px, 2.3vh, 17px); padding: 0.6vh 1.6vh; opacity: 0.6; }
.btn.small.on { opacity: 1; background: #f0a020; color: #2b1a00; border-color: #ffe39a; }
.stats, .summary { display: flex; gap: 2.4vh; justify-content: center; flex-wrap: wrap; margin: 1.8vh 0 0; font-size: clamp(12px, 2.4vh, 18px); }
.summary { flex-direction: column; gap: 0.6vh; font-size: clamp(15px, 3.2vh, 24px); margin: 1.2vh 0 1.8vh; }
.stats b, .summary b { color: #ffe39a; }
.record { color: #ffe066; font-size: clamp(16px, 3.6vh, 28px); font-weight: 600; animation: pop 0.6s; }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
.grid { display: flex; gap: 1.4vh; justify-content: center; flex-wrap: wrap; }
.card { background: rgba(0, 0, 0, 0.28); border: 2px solid #6d9cc4; border-radius: 14px; padding: 1.2vh 1.6vh; width: 22vh; min-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 0.6vh; color: #fff; font-family: Kanit, sans-serif; }
button.card { cursor: pointer; width: 30vh; }
button.card:hover { border-color: #ffe39a; }
.card .icon { font-size: 4.4vh; }
.card .name { font-weight: 600; font-size: clamp(14px, 2.8vh, 21px); }
.card .meta { font-size: clamp(12.5px, 2.3vh, 16px); opacity: 0.95; line-height: 1.35; }

#pauseBtn, #fsBtn { position: absolute; top: 2.5%; width: 5.5%; aspect-ratio: 1; min-width: 38px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.7);
  background: rgba(10, 20, 35, 0.72); color: #fff; font: 600 16px Kanit, sans-serif; z-index: 5; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); display: none; cursor: pointer; padding: 0; }
#pauseBtn { right: 1.5%; }
#fsBtn { right: 8.5%; font-size: 18px; }
body.playing #pauseBtn { display: block; }
body.touch.fs-ok:not(.fs) #fsBtn { display: block; }

/* โหมดปุ่ม (ตั้งค่า > การควบคุม > ปุ่ม) */
#buttons { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: none; }
body.buttons.playing #buttons { display: block; }
.tc-btn { position: absolute; width: 13%; aspect-ratio: 1; max-width: 17vh; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.2);
  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.5); transform: scale(0.94); }
.tc-up { left: 2%; bottom: 32%; } .tc-down { left: 2%; bottom: 4%; }
.tc-jump { right: 2%; bottom: 6%; width: 16%; max-width: 21vh; background: rgba(70, 160, 240, 0.35); }
.tc-brake { right: 20%; bottom: 4%; background: rgba(240, 90, 70, 0.35); }

#crash { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 60; padding: 14px 20px; border-radius: 12px; background: #401010ee; color: #fff; font: 600 18px Kanit, sans-serif; text-align: center; max-width: 90vw; cursor: pointer; }
#crash .err { font: 400 12px monospace; margin-top: 6px; opacity: 0.8; }

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

/* มือถือแนวนอน (จอเตี้ย ~844x390) */
@media (max-height: 460px) {
  .panel { padding: 1.4% 3%; }
  .panel h2 { margin: 0 0 0.6vh; }
  .sub { margin: 0.3vh 0 1.4vh; }
  .btn { padding: 0.9vh 2vh; min-height: 38px; }
  .btn.small { min-height: 32px; }
  .row { margin: 0.3vh 0; }
  .card { padding: 0.8vh 1vh; gap: 0.3vh; }
  .line { margin: 0.6vh 0; line-height: 1.3; }
  .summary { margin: 0.6vh 0 1vh; gap: 0.2vh; }
}

/* เลือกไรเดอร์ */
.grid.riders { flex-wrap: wrap; max-width: 118vh; margin: 0 auto; gap: 1vh; }
button.card.rider { width: 21vh; min-width: 0; padding: 0.8vh; }
button.card.rider img { width: 100%; height: auto; display: block; }
button.card.rider.on { border-color: #ffe39a; background: rgba(255, 211, 106, 0.18); }
/* เลือกด่าน */
button.card.level { width: 44%; min-width: 0; }
button.card.level.locked { opacity: 0.45; cursor: default; }

/* ตอนจบ: ข้าวปั้น/อาหารตกลงมา */
.panel.ending { position: relative; overflow: hidden; }
.panel.ending .rain { position: absolute; inset: 0; pointer-events: none; }
.panel.ending .rain span { position: absolute; top: -12%; font-size: 4vh; animation: fall 3.2s linear infinite; opacity: 0.85; }
@keyframes fall { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(130vh) rotate(300deg); } }
@media (prefers-reduced-motion: reduce) { .panel.ending .rain { display: none; } }
.panel.ending > :not(.rain) { position: relative; z-index: 1; }
.panel.ending .rain span { opacity: 0.6; font-size: 5.5vh; }
.panel.wide .card { padding-bottom: 1.6vh; justify-content: flex-start; }