/* ================================================================
   drive3d — Mobile UI layer (touch polish)
   โหลดหลังสไตล์หลักทั้งหมด; ไม่แก้ของเดิม แค่เติมทับ
   ================================================================ */

/* ---------- 1. พื้นฐานการแตะบนมือถือ ---------- */
html, body { overscroll-behavior: none; }          /* กัน pull-to-refresh */
body { -webkit-user-select: none; user-select: none;
       -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; }
input, textarea { -webkit-user-select: text; user-select: text; }
* { -webkit-tap-highlight-color: transparent; }
button, .tbtn, .hbtn, .chip, .modeBig, .modeSub button { touch-action: manipulation; }

/* active state — ยุบตัวเล็กน้อยทุกปุ่ม */
.screen .btn, .modeBig, .modeSub button, .tbtn, .hbtn, .chip,
.phPill, .phDayGrid button, .bx {
  transition: transform .11s ease, box-shadow .11s ease, filter .11s ease, background-color .11s ease;
}
.screen .btn:active, .modeBig:active, .modeSub button:active,
.hbtn:active, .chip:active, .phPill:active { transform: scale(.95); filter: brightness(.96); }
.tbtn:active, .tbtn.hold { transform: scale(.93); box-shadow: 0 1px 0 rgba(0,0,0,.16); }

/* ---------- 2. หน้าแรก: particle + title float ---------- */
#uiParticles { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .85; }
@keyframes uiTitleFloat {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-5px) }
}
#home.on h1 { animation: uiTitleFloat 5.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  #home.on h1 { animation: none }
}

/* ปุ่มFullscreen มุมซ้ายบน */
#uiFs { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 14px; z-index: 6;
  width: 42px; height: 42px; border-radius: 99px; padding: 0; line-height: 1;
  font-size: 17px; display: none; align-items: center; justify-content: center;
  border: 1px solid rgba(255,220,170,.35); background: rgba(20,12,8,.55); color: #FFF3DE; }
#home.on #uiFs { display: flex; }

/* ---------- 3. ปุ่มพักเกม + หน้าจอพัก ---------- */
#uiPauseBtn { position: absolute; z-index: 40; left: 10px; top: calc(112px + env(safe-area-inset-top));
  width: 40px; height: 40px; border-radius: 12px; padding: 0; font-size: 15px; line-height: 1;
  display: none; align-items: center; justify-content: center;
  color: #2E2E2E; background: rgba(255,255,255,.82); border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 2px 8px rgba(0,0,0,.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#game.on #uiPauseBtn { display: flex; }

#uiPause { position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(14,10,16,.34);
  backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); }
#uiPause.on { display: flex; }
#uiPauseCard { width: 100%; max-width: 320px; padding: 22px 20px 16px; border-radius: 22px; text-align: center;
  background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 18px 50px rgba(0,0,0,.30); animation: uiCardIn .18s ease-out; }
@keyframes uiCardIn { from { opacity: 0; transform: translateY(10px) scale(.97) } to { opacity: 1; transform: none } }
#uiPauseCard h2 { margin: 0 0 4px; font-size: 20px; font-weight: 900; color: #1C1C1E; }
#uiPauseCard p { margin: 0 0 16px; font-size: 13px; color: #70707A; }
#uiPauseCard .uiStats { display: flex; gap: 8px; margin: 0 0 16px; }
#uiPauseCard .uiStat { flex: 1; background: #F4F4F6; border-radius: 12px; padding: 8px 6px; }
#uiPauseCard .uiStat b { display: block; font-size: 16px; color: #1C1C1E; }
#uiPauseCard .uiStat span { font-size: 11px; color: #8A8A92; font-weight: 600; }
#uiPauseCard button { width: 100%; border: none; border-radius: 14px; padding: 14px; margin-top: 8px;
  font-family: inherit; font-size: 16px; font-weight: 800; color: #fff; background: #1C1C1E; }
#uiPauseCard button.ghost { background: #F1F1F3; color: #1C1C1E; }

/* ---------- 4. Floating text (ดาเมจ/คะแนน) ---------- */
.uiFloat { position: fixed; z-index: 85; pointer-events: none; font-weight: 900;
  font-size: 20px; letter-spacing: -.3px; color: #FF6B5A;
  text-shadow: 0 2px 6px rgba(0,0,0,.45), 0 0 18px rgba(255,90,70,.45);
  animation: uiFloatUp 1.15s cubic-bezier(.22,.9,.3,1) forwards; }
@keyframes uiFloatUp {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(.82) }
  18%  { opacity: 1; transform: translate(-50%, -6px) scale(1.06) }
  100% { opacity: 0; transform: translate(-50%, -66px) scale(.98) }
}

/* ---------- 5. Screen shake ---------- */
@keyframes uiShake {
  0%,100% { transform: translate3d(0,0,0) }
  15% { transform: translate3d(-4px,2px,0) }
  30% { transform: translate3d(4px,-3px,0) }
  45% { transform: translate3d(-3px,-1px,0) }
  60% { transform: translate3d(3px,2px,0) }
  80% { transform: translate3d(-1px,1px,0) }
}
#game.uiShake canvas { animation: uiShake .30s ease-out; }

/* ---------- 6. Floating joystick ---------- */
#uiJoy, #uiJoyKnob { position: fixed; z-index: 38; pointer-events: none; display: none; border-radius: 50%; }
#uiJoy { width: 132px; height: 132px; margin: -66px 0 0 -66px;
  border: 1.5px solid rgba(255,255,255,.55); background: rgba(28,28,30,.20);
  box-shadow: 0 0 0 1px rgba(0,0,0,.10), inset 0 0 26px rgba(255,255,255,.12);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#uiJoy::after { content: '◀   ▶'; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 12px; letter-spacing: 18px; color: rgba(255,255,255,.5); padding-left: 6px; }
#uiJoyKnob { width: 58px; height: 58px; margin: -29px 0 0 -29px;
  background: radial-gradient(circle at 35% 30%, #FFFDF7, #D9D4C8 70%);
  box-shadow: 0 4px 14px rgba(0,0,0,.35), inset 0 -2px 4px rgba(0,0,0,.10); }
#uiJoy.on, #uiJoyKnob.on { display: block; }
#game.joyOn #ctrl .pad:first-child { display: none; }

/* ปุ่มสลับโหมดจอยบังคับเลี้ยว */
#uiJoyBtn { position: absolute; z-index: 40; left: 10px; top: calc(158px + env(safe-area-inset-top));
  width: 40px; height: 40px; border-radius: 12px; padding: 0; font-size: 15px; line-height: 1;
  display: none; align-items: center; justify-content: center;
  color: #2E2E2E; background: rgba(255,255,255,.82); border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 2px 8px rgba(0,0,0,.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#game.on #uiJoyBtn { display: flex; }
#uiJoyBtn.on { background: #2E8B6E; color: #fff; border-color: #2E8B6E; }

/* ---------- 7. Modal อื่น ๆ: เบลอพื้นหลัง ---------- */
#raceModal.on, .phDay.on, .phEnd.on {
  backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
#raceCard, .phDayCard, .phEndCard { box-shadow: 0 20px 54px rgba(0,0,0,.32); }

/* ---------- 8. หน้าแรก: จัดลำดับใหม่ให้เป็น Title Screen จริง ---------- */
/* เดิม h1 ถูกซ่อน (font-size:0 + ::after ว่าง) → ชื่อเกมมองไม่เห็น */
#home.screen h1 { font-size: clamp(30px, 10.5vw, 50px) !important; color: #FFE9B8 !important; }
#home.screen h1::after { content: 'ไปทำงาน · กลับบ้าน' !important; }

#home.screen.on { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain; display: flex; flex-direction: column; }
#home.screen::after { position: fixed; }          /* พื้นหลังนิ่งตอนเลื่อน */

#home h1              { order: 1; }
#home > .sub          { order: 2; }
#home .modeHero       { order: 3; }
#home .modeSub        { order: 4; }
#home > .card         { order: 5; }
#home > .row          { order: 6; }
#home .btn            { order: 7; }
#home .card#hWeatherCard { order: 8; }
#home .chip           { order: 9; }
#home .cimg           { order: 0; }

/* ระยะขอบให้หายใจแบบแอปจริง */
#home .modeHero { margin: 4px 0 6px; }
#home .card { margin-bottom: 10px; }
#home > .row { margin: 2px 0 6px; }