/* ---- ฟอนต์ (self-host, SIL OFL — ไฟล์ไลเซนส์อยู่ใน assets/fonts/OFL.txt) ---- */
@font-face {
  font-family: 'Chakra Petch';
  src: url('/assets/fonts/chakra-petch-v13-latin_thai-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('/assets/fonts/chakra-petch-v13-latin_thai-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Sarabun';
  src: url('/assets/fonts/sarabun-v17-latin_thai-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Sarabun';
  src: url('/assets/fonts/sarabun-v17-latin_thai-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Press Start 2P';
  src: url('/assets/fonts/press-start-2p-v16-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body, #app, #game-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1a3010;
}

#game-container canvas {
  display: block;
  image-rendering: pixelated;
}

/* ---- ชั้น UI แบบ DOM ทับ canvas ---- */
#ui-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  font-family: 'Sarabun', 'Chakra Petch', sans-serif;
}

.sf-overlay {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  background: rgba(10, 20, 8, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.sf-panel {
  background: #fdf6e3;
  border: 4px solid #8a5a2b;
  border-radius: 10px;
  width: min(440px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.25);
}

.sf-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #8a5a2b;
  color: #fff;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 18px;
}

.sf-panel-body {
  padding: 14px;
  overflow-y: auto;
  color: #3a2a10;
  font-size: 16px;
  line-height: 1.7;
}

.sf-panel-body h3 {
  font-family: 'Chakra Petch', sans-serif;
  margin: 14px 0 6px;
  border-top: 2px dashed #d8c49a;
  padding-top: 12px;
}

.sf-row { display: flex; gap: 10px; margin-top: 14px; }
.sf-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sf-hint { color: #7a6a45; font-size: 14px; }
.sf-total { margin-top: 10px; font-weight: 700; }

.sf-input {
  width: 100%;
  font-family: 'Sarabun', sans-serif;
  font-size: 16px; /* ≥16px กัน iOS ซูมหน้าจอเองตอนแตะช่องกรอก */
  padding: 10px 12px;
  min-height: 44px;
  border: 3px solid #8a5a2b;
  border-radius: 8px;
  margin-top: 8px;
  background: #fff;
  color: #3a2a10;
}
.sf-error { color: #b3261e; font-size: 14px; margin-top: 8px; }

.sf-btn {
  pointer-events: auto;
  font-family: 'Sarabun', sans-serif;
  font-size: 16px;
  padding: 10px 16px;
  min-height: 44px; /* ขนาดปุ่มแตะขั้นต่ำบนมือถือ */
  border: 3px solid #8a5a2b;
  border-radius: 8px;
  background: #fff;
  color: #3a2a10;
  cursor: pointer;
}
.sf-btn:active { transform: translateY(2px); }
.sf-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.sf-btn-primary { background: #63a53c; border-color: #2b5b1e; color: #fff; font-weight: 700; flex: 1; }
.sf-btn-close { min-height: 36px; padding: 2px 12px; background: transparent; border-color: #ffffff88; color: #fff; }
.sf-item { text-align: left; }