/* ============================================================ THAI FONT UNIVERSAL OVERRIDE — unicode-range technique เราใช้ @font-face กำหนดให้ font-family 'Press Start 2P' และ monospace — เมื่อ browser พบ Thai Unicode characters (U+0E00–U+0E7F) ให้โหลด Sarabun แทนโดยอัตโนมัติ วิธีนี้ทำให้ทุก element ที่มีอักษรไทย แสดงผลด้วย Sarabun ไม่ว่า element นั้นจะถูก set font-family เป็นอะไรก็ตาม ไม่ต้องไล่แก้ทีละ element อีกต่อไป ============================================================ */ /* ============================================================ UNIVERSAL THAI TEXT RULE ทุก element ที่ render อักษรไทย จะถูก override ด้วย Sarabun ผ่าน @font-face unicode-range ด้านบน (primary method) CSS rule นี้เป็น safety net สำหรับ element ที่กำหนด font-family ด้วย inline style หรือ !important อื่นๆ ============================================================ */ .msg-box, .q-scenario, .q-type-badge, .choice-btn, .result-title, .result-desc, .move-info, .mg-bonus-banner, .mg-instruction, .mg-tip, .mg-target, .mg-current, .mg-pool, .mg-condition, .mg-result-icon+*, .wallet-label, .wallet-amount, .coin-item, .mg-problem, .bill-card-name, .bill-card-price, .bill-result-row, .product-name, .budget-display, .slip-row, .slip-bank, .slip-quote, .slip-footer, .slip-timeout, .hud-item, .pattern-btn, .section-title, .label, .dice-overlay-text, .mg-diff-badge, .swipe-left, .swipe-right, #introDesc, #introInfo, #qHint, #slipFinanceStatus, #mgSubHint, #snakeNameDisplay { font-family: 'Sarabun', sans-serif !important; /* 👈 แก้บรรทัดนี้จาก Press Start 2P เป็น Sarabun */ font-weight: 700; letter-spacing: 0; } /* ============================================================ GLOBAL RESET & BASE — Responsive for iPhone, iPad, Desktop ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0 } body { background: linear-gradient(180deg, #87CEEB 0%, #b8f0ff 30%, #d4f5c4 60%, #a8e6a3 100%); font-family: 'Press Start 2P', 'Sarabun', monospace; /* 👈 เพิ่ม 'Sarabun' เข้าไปตรงนี้ */ overflow-x: hidden; min-height: 100vh; } } /* ============================================================ RESPONSIVE FONT SCALE (CSS custom properties) iPhone SE (375px): --fs-base: 10px iPhone 15 (390px): --fs-base: 11px iPhone 15 Plus (430px): --fs-base: 12px iPad Mini (768px): --fs-base: 14px iPad Pro (1024px): --fs-base: 16px ============================================================ */ :root { --fs-xs: clamp(9px, 2vw, 12px); --fs-sm: clamp(10px, 2.5vw, 14px); --fs-md: clamp(12px, 3vw, 17px); --fs-lg: clamp(14px, 3.5vw, 22px); --fs-xl: clamp(17px, 4.5vw, 28px); --fs-xxl: clamp(22px, 6vw, 40px); /* Thai font sizes — ใช้ rem เพื่อให้ scale ตาม browser zoom เสมอ rem = relative to root font-size (browser default = 16px) เมื่อ user ซูมเว็บ browser จะเปลี่ยน root font-size → ค่า rem scale ตาม Sarabun มี x-height ต่ำกว่า Press Start 2P ประมาณ 35–40% จึงต้องใช้ขนาดใหญ่กว่าเพื่อให้แสดงผลใหญ่เท่ากัน clamp(min-rem, preferred-vw, max-rem) min/max ในหน่วย rem → scale กับ browser zoom preferred ในหน่วย vw → scale กับ viewport width */ --fs-th-xs: clamp(0.94rem, 3.8vw, 1.25rem); --fs-th-sm: clamp(1.06rem, 4.5vw, 1.50rem); --fs-th-md: clamp(1.19rem, 5.0vw, 1.69rem); --fs-th-lg: clamp(1.38rem, 5.5vw, 2.00rem); --fs-th-xl: clamp(1.63rem, 7.0vw, 2.50rem); } /* ---- Thai text class: ใช้ฟอนต์ Sarabun แทน Press Start 2P ---- */ .th { font-family: 'Press Start 2P', monospace; font-weight: 700; letter-spacing: 0 } .en { font-family: 'Press Start 2P', monospace } /* iPad layout: max-width wider */ @media(min-width:768px) { .screen { padding: 24px } .game-wrap, .q-content, .customize-content, .mg-wrap, .mg-result-box, .result-box { max-width: 680px !important } .intro-content { max-width: 560px !important } .slip { max-width: 480px !important } } @media(min-width:1024px) { .screen { padding: 32px } .game-wrap, .q-content, .customize-content, .mg-wrap, .mg-result-box, .result-box { max-width: 780px !important } } /* CSS Variables: สีหลักที่ใช้ทั่วทั้งเกม เปลี่ยนที่นี่ที่เดียวส่งผลทุกที่ */ :root { --green: #00c853; /* สีเขียวหลัก: ปุ่ม, border, บันได */ --yellow: #ffd600; /* สีเหลือง: ไฮไลต์, ทอง, ดาว */ --red: #ff1744; /* สีแดง: ปุ่ม back, ข้อผิดพลาด */ --blue: #0288d1; /* สีฟ้า: ปุ่มข้อมูล, งูเกม */ --pink: #f50057; /* สีชมพู: งูช้อปปิ้ง */ --purple: #6200ea; /* สีม่วง: ปุ่ม play again */ --orange: #ff6d00; /* สีส้ม: ตัวเลขคะแนน */ --white: #fff; --dark: #1a3300; /* สีเข้มเขียวเข้ม: text หลัก */ --gold: #ffd700; --teal: #00897b; } /* ============================================================ SCREEN MANAGER - แต่ละหน้าจอ (screen) ซ่อนอยู่ด้วย display:none - เมื่อ JS เพิ่ม class "active" จะเปลี่ยนเป็น display:flex - animation fadeIn: หน้าจอใหม่จะค่อยๆ ปรากฏขึ้น ============================================================ */ .screen { display: none; flex-direction: column; align-items: center; min-height: 100vh; padding: 16px; animation: fadeIn .3s ease; position: relative; /* 👈 เพิ่มบรรทัดนี้ เพื่อให้มันรับคำสั่ง z-index ได้ */ z-index: 10; /* 👈 เพิ่มบรรทัดนี้ เพื่อดันหน้าจอเกมให้ลอยมาบังพื้นหลัง */ } .screen.active { display: flex } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: translateY(0) } } /* ============================================================ PIXEL BOX: กล่องสไตล์เกม pixel - background ขาวกึ่งโปร่งใส ให้เห็น background ทะลุนิดนึง - box-shadow สร้าง drop shadow แบบ pixel (ไม่มี blur) - backdrop-filter: blur ทำให้ดูเหมือนกระจกฝ้า ============================================================ */ .pixel-box { background: rgba(255, 255, 255, 0.88); border: 4px solid var(--green); box-shadow: 4px 4px 0 #1a3300, inset 2px 2px 0 rgba(255, 255, 255, .8); padding: 16px; position: relative; backdrop-filter: blur(4px) } .pixel-box::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border: 2px solid rgba(0, 100, 0, 0.3); pointer-events: none } /* Language switcher active/hover states only — base defined in responsive block */ /* Title หลักของเกม */ .game-title { color: #1a5c00; font-size: var(--fs-lg); text-align: center; text-shadow: 3px 3px 0 var(--yellow), -1px -1px 0 #003300; line-height: 1.8; margin-bottom: 8px } .subtitle { color: var(--teal); font-size: var(--fs-sm); text-align: center; margin-bottom: 16px } /* ============================================================ BUTTONS: ปุ่มสไตล์ pixel game - box-shadow ล่างขวา = เงา pixel ทำให้ดูนูน - :active translate(2px,2px) = กดแล้วปุ่มจมลง เหมือนกดจริง - Base .btn defined in responsive block below ============================================================ */ .btn-green { background: #00c853; color: #fff; box-shadow: 4px 4px 0 #004d1c } .btn-yellow { background: #ffd600; color: #1a3300; box-shadow: 4px 4px 0 #a07c00 } .btn-red { background: var(--red); color: #fff; box-shadow: 4px 4px 0 #7f0000 } .btn-blue { background: #0288d1; color: #fff; box-shadow: 4px 4px 0 #01478a } .btn-purple { background: #6200ea; color: #fff; box-shadow: 4px 4px 0 #2a00a3 } .btn-orange { background: #ff6d00; color: #fff; box-shadow: 4px 4px 0 #8c3d00 } /* Input fields */ .pixel-input { font-family: 'Press Start 2P', monospace; background: #e8f5e9; border: 3px solid var(--green); color: #1a3300; padding: 10px; font-size: var(--fs-sm); width: 100%; outline: none } .pixel-input:focus { border-color: #ffd600; background: #fff } .label { color: #1a3300; font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-xs); margin-bottom: 6px; display: block } /* ============================================================ BACKGROUND DECORATIONS - bg-layer: layer สำหรับ clouds และ coins ลอย - cloud: สร้างเมฆจาก CSS pure (ไม่ใช้รูปภาพ) ::before และ ::after เป็นก้อนโปนบนเมฆ - bg-coin: emoji เหรียญลอยขึ้นจากล่าง - sun-deco: ดวงอาทิตย์มุมขวาบน pulse ช้าๆ - ground-pixels: แถบหญ้า pixel ด้านล่างจอ ============================================================ */ .bg-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden } .cloud { position: absolute; background: #fff; border-radius: 50px; opacity: 0.9; animation: cloudMove linear infinite; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08) } .cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50% } .cloud::before { width: 60%; height: 150%; top: -40%; left: 15% } .cloud::after { width: 40%; height: 120%; top: -25%; left: 45% } @keyframes cloudMove { from { transform: translateX(-200px) } to { transform: translateX(calc(100vw + 200px)) } } .bg-coin { position: absolute; font-size: 20px; animation: coinFloat linear infinite; opacity: 0.4 } @keyframes coinFloat { 0% { transform: translateY(100vh) rotate(0deg); opacity: 0 } 10% { opacity: 0.5 } 90% { opacity: 0.5 } 100% { transform: translateY(-80px) rotate(720deg); opacity: 0 } } .ground-pixels { position: fixed; bottom: 0; left: 0; width: 100%; height: 32px; z-index: 0; background: repeating-linear-gradient(90deg, #4caf50 0, #4caf50 16px, #388e3c 16px, #388e3c 32px) } .ground-pixels::before { content: ''; display: block; height: 8px; background: repeating-linear-gradient(90deg, #8bc34a 0, #8bc34a 16px, #7cb342 16px, #7cb342 32px) } .sun-deco { position: fixed; top: 16px; right: 16px; width: 48px; height: 48px; background: #ffd600; border-radius: 50%; box-shadow: 0 0 0 6px #fff6, 0 0 0 12px #ffd60033; animation: sunPulse 3s ease-in-out infinite; z-index: 0 } @keyframes sunPulse { 0%, 100% { box-shadow: 0 0 0 6px #fff6, 0 0 0 12px #ffd60033 } 50% { box-shadow: 0 0 0 10px #fff6, 0 0 0 20px #ffd60033 } } /* ============================================================ SCREEN 1: INTRO ============================================================ */ #screen-intro { justify-content: center; gap: 12px } .intro-content { z-index: 1; width: 100%; max-width: 480px; text-align: center } .pixel-snake-logo { font-size: clamp(40px, 10vw, 70px); animation: bounce 1s infinite alternate; display: block } @keyframes bounce { from { transform: translateY(0) } to { transform: translateY(-8px) } } .coin { display: inline-block; animation: spin 2s linear infinite; color: var(--gold); font-size: 24px } @keyframes spin { 0% { transform: rotateY(0) } 50% { transform: rotateY(90deg) } 100% { transform: rotateY(0) } } /* ============================================================ SCREEN 2: CUSTOMIZE ============================================================ */ #screen-customize { justify-content: flex-start; gap: 10px } .customize-content { width: 100%; max-width: 480px } .snake-preview { font-size: clamp(30px, 8vw, 50px); text-align: center; padding: 6px; min-height: 60px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px } .color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 } .color-btn { width: 100%; aspect-ratio: 1; border: 3px solid transparent; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: border-color .1s; border-radius: 4px; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2) } .color-btn.selected { border-color: #ffd600 !important; box-shadow: 0 0 8px #ffd600, 2px 2px 0 #666 } .pattern-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 } .pattern-btn { padding: 8px 4px; background: #e8f5e9; border: 3px solid #4caf50; cursor: pointer; color: #1a3300; font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-xs); text-align: center; transition: border-color .1s; border-radius: 4px } .pattern-btn.selected { border-color: #ffd600; background: #fff9c4; color: #5c3900 } .section-title { color: #0d47a1; font-family: 'Press Start 2P', monospace; font-weight: 800; font-size: var(--fs-th-xs); margin: 10px 0 6px; border-bottom: 2px solid #0d47a1; padding-bottom: 4px } /* ============================================================ SCREEN 3: GAME BOARD - hud: แถบสถานะด้านบน แสดงชื่อ/คะแนน/ช่อง/เวลา - timer-display: นับถอยหลัง 5 นาที เปลี่ยนสีแดงเมื่อเวลาน้อย - progress-bar: แถบแสดงตำแหน่งช่อง 1-100 - board canvas: กระดานวาดด้วย Canvas API - dice-overlay: popup ลูกเต๋าใหญ่กลางจอตอน roll - mg-bonus-banner: banner "ได้ bonus X ช่อง" หลังชนะ mini game ============================================================ */ #screen-game { justify-content: flex-start; padding: 8px } .game-wrap { width: 100%; max-width: 520px; margin: 0 auto } .board-wrap { position: relative; width: 100%; aspect-ratio: 1; max-width: 500px; margin: 0 auto } .timer-display.warning { border-color: #ff1744 !important; color: #ff1744 !important; animation: timerPulse .5s infinite alternate } @keyframes timerPulse { from { background: rgba(255, 255, 255, 0.9) } to { background: rgba(255, 0, 0, 0.15) } } canvas#board { width: 100%; height: 100%; image-rendering: pixelated; display: block; border-radius: 4px; box-shadow: 4px 4px 0 #1a3300 } .progress-bar { height: 12px; background: rgba(255, 255, 255, 0.6); border: 3px solid var(--green); margin: 4px 0; position: relative; overflow: hidden; border-radius: 3px } .progress-fill { height: 100%; background: linear-gradient(90deg, #00c853, #69f0ae); transition: width .5s } .dice-area { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0; flex-wrap: wrap } .dice { width: clamp(44px, 11vw, 58px); height: clamp(44px, 11vw, 58px); background: #fff; border: 4px solid #1a3300; display: flex; align-items: center; justify-content: center; font-size: clamp(18px, 5vw, 28px); box-shadow: 4px 4px 0 #1a3300; border-radius: 8px } .dice.rolling { animation: diceRoll .5s ease } @keyframes diceRoll { 0% { transform: rotate(0) scale(1) } 25% { transform: rotate(20deg) scale(1.1) } 50% { transform: rotate(-20deg) scale(1.15) } 75% { transform: rotate(15deg) scale(1.1) } 100% { transform: rotate(0) scale(1) } } .msg-box { background: rgba(255, 255, 255, 0.9); border: 3px solid var(--green); color: #1a3300; padding: 8px; font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-xs); text-align: center; min-height: 32px; line-height: 1.7; border-radius: 4px; margin: 4px 0 } /* ============================================================ DICE OVERLAY: popup ลูกเต๋าใหญ่ตอนทอย ============================================================ */ .dice-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 100, 0, 0.75); z-index: 100; align-items: center; justify-content: center; flex-direction: column; gap: 16px } .dice-overlay.show { display: flex } .dice-big { width: 120px; height: 120px; background: #fff; border: 6px solid #1a3300; display: flex; align-items: center; justify-content: center; font-size: 70px; box-shadow: 8px 8px 0 #1a3300, 0 0 40px rgba(255, 214, 0, 0.8); border-radius: 20px; animation: diceBounce .6s cubic-bezier(.36, .07, .19, .97) both } @keyframes diceBounce { 0% { transform: scale(0) rotate(-180deg) } 60% { transform: scale(1.2) rotate(10deg) } 80% { transform: scale(0.9) rotate(-5deg) } 100% { transform: scale(1) rotate(0) } } .dice-overlay-text { color: #fff; font-family: 'Press Start 2P', monospace; font-weight: 800; font-size: var(--fs-th-md); text-shadow: 2px 2px 0 #1a3300 } /* ============================================================ MG BONUS BANNER ============================================================ */ .mg-bonus-banner { display: none; background: #00c853; border: 4px solid #004d1c; color: #fff; padding: 12px 16px; text-align: center; font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-sm); border-radius: 4px; box-shadow: 4px 4px 0 #004d1c; margin: 4px 0; animation: slideDown .3s ease } .mg-bonus-banner.show { display: block } @keyframes slideDown { from { transform: translateY(-20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } } /* ============================================================ SCREEN 4: QUESTION (ตอบคำถามงู/บันได) ============================================================ */ #screen-question { justify-content: center } .q-content { width: 100%; max-width: 480px } .q-type-badge { font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-xs); padding: 6px 12px; margin-bottom: 8px; display: inline-block; border-radius: 4px } .q-scenario { color: #1a3300; font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-md); line-height: 1.9; margin-bottom: 16px; padding: 14px; background: rgba(255, 255, 255, 0.8); border-left: 4px solid var(--yellow) } .q-scenario-en { color: #555; font-family: 'Press Start 2P', monospace; font-size: var(--fs-xs); line-height: 1.6; margin-top: 8px; display: block } .choice-a { background: #0d47a1; color: #fff; box-shadow: 4px 4px 0 #01237a } .choice-b { background: #1b5e20; color: #fff; box-shadow: 4px 4px 0 #003300 } .choice-btn:hover { filter: brightness(1.2) } /* ============================================================ SCREEN 5: RESULT POPUP (ผลตอบคำถาม) ============================================================ */ #screen-result-popup { justify-content: center } .result-box { width: 100%; max-width: 440px; text-align: center } .result-icon { font-size: clamp(40px, 12vw, 70px); margin: 12px 0; animation: popIn .4s cubic-bezier(.175, .885, .32, 1.275) } @keyframes popIn { from { transform: scale(0) } to { transform: scale(1) } } .result-title { font-family: 'Press Start 2P', monospace; font-weight: 800; font-size: var(--fs-th-md); margin: 8px 0; color: #1a3300 } .result-desc { font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-sm); color: #333; line-height: 1.9; margin: 8px 0 } .score-gain { font-family: 'Press Start 2P', monospace; font-size: var(--fs-lg); color: #e65100; text-shadow: 2px 2px 0 #ffd600; margin: 8px 0 } .move-info { font-family: 'Press Start 2P', monospace; font-size: var(--fs-th-xs); color: #0d47a1; margin: 4px 0 } /* ============================================================ SCREEN 6: SLIP (สลิปสรุปผล) ============================================================ */ #screen-slip { justify-content: center; padding: 12px } .slip { width: 100%; max-width: 400px; background: #f5f0e8; color: #1a1a1a; font-family: 'Press Start 2P', monospace; border: 3px solid #333; position: relative; overflow: hidden } .slip-header { background: #1a3300; color: var(--yellow); padding: 16px; text-align: center; font-family: 'Press Start 2P', monospace; font-size: clamp(8px, 2.5vw, 13px); border-bottom: 3px dashed #333 } .slip-bank { font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-xs); color: #aad; margin-top: 4px } .slip-body { padding: 16px } .slip-row { display: flex; justify-content: space-between; margin: 8px 0; font-family: 'Press Start 2P', monospace; font-size: var(--fs-th-xs); border-bottom: 1px dashed #ccc; padding-bottom: 6px; gap: 8px } .slip-row-label { color: #555; flex-shrink: 0 } .slip-row-val { color: #1a3300; text-align: right; word-break: break-all; font-weight: 700 } .slip-snake-char { font-size: 36px; text-align: center; padding: 8px; background: #e8f5e9; border: 2px dashed #4caf50; margin: 8px 0 } .slip-score-big { text-align: center; font-family: 'Press Start 2P', monospace; font-size: clamp(20px, 6vw, 36px); color: #1a3300; padding: 12px; background: var(--yellow); margin: 12px 0; border: 3px solid #333 } .slip-quote { font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-xs); color: #555; text-align: center; line-height: 1.9; padding: 8px; border-top: 2px dashed #ccc; margin-top: 8px } .slip-stamp { position: absolute; top: 50%; right: 16px; transform: translateY(-50%) rotate(-15deg); font-family: 'Press Start 2P', monospace; font-size: clamp(10px, 3vw, 16px); color: rgba(0, 150, 0, .4); border: 4px solid rgba(0, 150, 0, .4); padding: 6px; white-space: nowrap } .slip-footer { background: #1a3300; color: #a5d6a7; padding: 8px; text-align: center; font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-xs); border-top: 3px dashed #333 } .confetti { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999 } .slip-timeout { background: #000000; color: #fff; text-align: center; padding: 8px; font-family: 'Press Start 2P', monospace; font-weight: 800; font-size: var(--fs-th-sm); margin-bottom: 8px; border: 3px solid #000000 } /* ============================================================ SCREEN 7: MINI GAME SCREEN (หน้า mini game ทั้ง 5 เกม) - mg-screen: พื้นที่รวมของ mini games ทั้งหมด - mg-timer-bar: แถบเวลานับถอยหลังแบบแนวนอน (แดง/ส้ม/เขียว ขึ้นกับเวลาที่เหลือ) ============================================================ */ #screen-minigame { justify-content: center; padding: 12px } /* ============================================================ COUNTDOWN ANIMATION ก่อนเริ่ม Mini Game ============================================================ */ .mg-countdown { font-size: clamp(60px, 15vw, 100px); text-align: center; color: var(--orange); font-family: 'Press Start 2P', monospace; animation: popIn 0.5s ease; padding: 40px 0; text-shadow: 4px 4px 0 #1a3300; } .mg-wrap { width: 100%; max-width: 480px } .mg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 6px } .mg-title { font-family: 'Press Start 2P', monospace; font-size: var(--fs-sm); color: #1a3300 } .mg-timer-wrap { background: rgba(0, 0, 0, 0.1); border: 2px solid #1a3300; height: 16px; border-radius: 3px; overflow: hidden; margin-bottom: 8px } .mg-timer-bar { height: 100%; background: var(--green); transition: width .1s linear; border-radius: 2px } .mg-timer-bar.warn { background: #ff6d00 } .mg-timer-bar.danger { background: #ff1744 } .mg-instruction { color: #1a3300; font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-sm); line-height: 1.9; margin-bottom: 12px; padding: 10px; background: rgba(255, 255, 255, 0.8); border-left: 4px solid var(--blue); border-radius: 3px } /* ============================================================ MG1: COIN SORTER - coin-grid: grid แสดงเหรียญที่กดได้ - coin-item: เหรียญแต่ละอัน กด = selected (border เหลือง) - mg-target: กล่องแสดงยอดเป้าหมาย - mg-current: กล่องแสดงยอดปัจจุบันที่เลือก ============================================================ */ .coin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 } .coin-item { padding: 10px 4px; background: #fff; border: 3px solid #4caf50; cursor: pointer; border-radius: 8px; text-align: center; font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-xs); transition: all .1s; box-shadow: 3px 3px 0 #1a3300; user-select: none } .coin-item.selected { background: #fff9c4; border-color: #ffd600; transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1a3300 } .coin-item:active { transform: translate(2px, 2px) } .mg-target { background: #0d47a1; color: #fff; padding: 14px; text-align: center; font-family: 'Press Start 2P', monospace; font-weight: 800; font-size: var(--fs-th-md); border: 3px solid #01237a; border-radius: 4px; margin-bottom: 8px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3) } .mg-current { background: #fff; color: #1a3300; padding: 8px; text-align: center; font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-xs); border: 3px solid var(--green); border-radius: 4px; margin-bottom: 8px } .mg-current.over { border-color: #ff1744; color: #ff1744 } .mg-current.exact { border-color: #00c853; background: #e8f5e9; color: #00c853 } /* ============================================================ MG2: CHANGE MASTER - numpad: ปุ่มตัวเลข 0-9 + DEL + OK สไตล์ pixel ATM - mg-display: จอแสดงตัวเลขที่พิมพ์ เหมือนเครื่องคิดเลข ============================================================ */ .mg-problem { background: #1b5e20; color: #fff; padding: 16px; text-align: center; font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-md); line-height: 1.9; border: 3px solid #003300; border-radius: 4px; margin-bottom: 8px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4) } .mg-display { background: #0d0020; color: #00e676; padding: 12px; text-align: right; font-size: clamp(16px, 5vw, 28px); border: 3px solid #00e676; border-radius: 4px; margin-bottom: 8px; letter-spacing: 2px; min-height: 52px; font-family: 'Press Start 2P', monospace } .numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px } .numpad-btn { background: #fff; border: 3px solid #1a3300; cursor: pointer; font-family: 'Press Start 2P', monospace; text-align: center; border-radius: 4px; box-shadow: 3px 3px 0 #1a3300; transition: transform .1s; color: #1a3300 } .numpad-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1a3300 } .numpad-btn.del { background: #ff1744; color: #fff; border-color: #7f0000; box-shadow: 3px 3px 0 #7f0000 } .numpad-btn.ok { background: #00c853; color: #fff; border-color: #004d1c; box-shadow: 3px 3px 0 #004d1c } /* ============================================================ MG3: BUDGET SPLIT - wallet-grid: กล่องกระเป๋าเงินแต่ละใบ - wallet-item: แต่ละกระเป๋า มีปุ่ม +/- และแสดงจำนวนเงิน - mg-pool: แสดงเงินที่ยังไม่ได้แบ่ง (เงินรวม - ที่แบ่งแล้ว) - mg-condition: แสดงเงื่อนไขที่ต้องทำให้ผ่าน ============================================================ */ .mg-pool { background: #0d47a1; color: #fff; padding: 14px; text-align: center; font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-sm); border: 3px solid #01237a; border-radius: 4px; margin-bottom: 8px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3) } .mg-condition { background: #fff9c4; color: #5c3900; padding: 8px; font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-xs); border: 2px dashed #ffd600; border-radius: 4px; margin-bottom: 8px; line-height: 1.8 } .wallet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 8px } .wallet-item { background: #e8f5e9; border: 3px solid #4caf50; border-radius: 8px; padding: 8px; text-align: center } .wallet-label { font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-xs); color: #1a3300; margin-bottom: 6px; line-height: 1.7 } .wallet-amount { font-size: clamp(12px, 3.5vw, 18px); color: #1b5e20; margin: 6px 0; font-family: 'Press Start 2P', monospace } .wallet-controls { display: flex; justify-content: center; gap: 6px } .wallet-btn { border: 3px solid #1a3300; background: #fff; cursor: pointer; font-family: 'Press Start 2P', monospace; display: flex; align-items: center; justify-content: center; border-radius: 4px; box-shadow: 2px 2px 0 #1a3300; transition: transform .1s; color: #1a3300 } .wallet-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #1a3300 } .wallet-btn.del { background: #ff1744; color: #fff } /* keep for any subclass */ /* ============================================================ MG4: BILL SORTER (Swipe) - bill-card: การ์ดบิลที่จะ swipe ซ้าย/ขวา ใช้ touch events: touchstart/touchmove/touchend ใช้ mouse events สำหรับ desktop: mousedown/mousemove/mouseup - swipe-hint: ลูกศรซ้าย/ขวาบอกทิศทาง swipe - bill-result: ผล summary หลัง swipe ครบทุกบิล ============================================================ */ .bill-area { position: relative; height: 180px; margin: 12px 0; display: flex; align-items: center; justify-content: center } .bill-card { position: absolute; width: 90%; max-width: 320px; background: #fff; border: 4px solid #1a3300; border-radius: 12px; padding: 16px; text-align: center; box-shadow: 6px 6px 0 #1a3300; cursor: grab; user-select: none; transition: transform .15s ease } .bill-card-icon { font-size: 32px; margin-bottom: 8px; display: block } .bill-card-name { font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-sm); color: #1a3300; margin-bottom: 4px } .bill-card-price { font-family: 'Press Start 2P', monospace; font-weight: 800; font-size: var(--fs-th-md); color: #e65100; margin-top: 4px } /* swipe overlays */ .bill-card .swipe-overlay-left { position: absolute; inset: 0; background: rgba(255, 23, 68, 0.25); border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .1s } .bill-card .swipe-overlay-right { position: absolute; inset: 0; background: rgba(0, 200, 83, 0.25); border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .1s } /* swipe-hint row */ .swipe-hint { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; gap: 4px } .swipe-left { color: #ff1744; background: rgba(255, 23, 68, 0.1); border: 2px solid #ff1744; border-radius: 4px } .swipe-right { color: #00c853; background: rgba(0, 200, 83, 0.1); border: 2px solid #00c853; border-radius: 4px } .bill-result-row { display: flex; justify-content: space-between; font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-xs); padding: 4px 0; border-bottom: 1px dashed #ccc; gap: 8px; line-height: 1.7 } /* ============================================================ MG5: BUY OR SAVE - product-card: การ์ดสินค้าที่โผล่ขึ้นมาทีละชิ้น - budget-display: แสดงงบที่มีอยู่ realtime - buy-save-btns: ปุ่ม ✅ ซื้อ และ ❌ ข้าม ขนาดใหญ่กดง่าย - timer-circle: วงกลมนับเวลาต่อรายการ ============================================================ */ .product-card { background: #fff; border: 4px solid #1a3300; border-radius: 12px; padding: 16px; text-align: center; box-shadow: 6px 6px 0 #1a3300; margin-bottom: 12px; animation: popIn .3s ease } .product-icon { font-size: 40px; display: block; margin-bottom: 8px } .product-name { font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-sm); color: #1a3300; margin-bottom: 4px } .product-price { font-size: clamp(20px, 6vw, 36px); color: #e65100; font-family: 'Press Start 2P', monospace; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15) } .budget-bar-wrap { margin: 8px 0 } .budget-display { display: flex; justify-content: space-between; font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-xs); color: #1a3300; margin-bottom: 4px } .budget-fill-bar { height: 12px; background: rgba(255, 255, 255, 0.6); border: 2px solid #1a3300; border-radius: 3px; overflow: hidden } .budget-fill { height: 100%; background: linear-gradient(90deg, #00c853, #69f0ae); transition: width .3s } .budget-fill.low { background: linear-gradient(90deg, #ff6d00, #ff1744) } /* งบน้อย = สีแดง */ .buy-save-btns { display: flex; gap: 12px; margin-top: 8px } .buy-save-btns .btn { flex: 1; font-size: clamp(10px, 3vw, 16px); padding: 16px } /* วงกลมนับเวลาต่อรายการ: stroke-dashoffset ลดลงตาม JS */ .mg5-timer-ring { display: flex; justify-content: center; margin-bottom: 8px } .mg5-timer-ring svg circle { transition: stroke-dashoffset .1s linear } /* ============================================================ MG RESULT SCREEN: หน้าแสดงผล mini game (ชนะ/แพ้) - แสดงก่อนไปยังหน้า game เพื่อบอก bonus และ tip ============================================================ */ .mg-result-box { width: 100%; max-width: 440px; text-align: center } .mg-result-icon { font-size: clamp(50px, 15vw, 80px); margin: 12px 0; animation: popIn .4s cubic-bezier(.175, .885, .32, 1.275); display: block } .mg-tip { background: #fff3cd; border: 4px solid #ffd600; padding: 16px 14px; font-family: 'Press Start 2P', monospace; font-weight: 700; font-size: var(--fs-th-sm); color: #3d2800; line-height: 2; margin: 16px 0; border-radius: 6px; border-left: 8px solid #ff6d00; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12) } /* ============================================================ RESPONSIVE BUTTON & LAYOUT — iPhone / iPad / Desktop - min touch target: 44px (Apple HIG) - btn padding scales with viewport - slip buttons stack on very small screens ============================================================ */ /* Base button: bigger touch target on mobile */ .btn { font-family: 'Sarabun', sans-serif; /* 👈 เปลี่ยนบรรทัดนี้ */ font-weight: 700; /* 👈 เพิ่มตัวหนาเข้าไปเพื่อให้ปุ่มชัดเจน */ cursor: pointer; border: none; padding: clamp(12px, 3vw, 16px) clamp(14px, 4vw, 24px); font-size: clamp(9px, 2.2vw, 13px); text-transform: uppercase; position: relative; transition: transform .1s; display: inline-flex; align-items: center; justify-content: center; margin: 4px; min-height: 44px; line-height: 1.2 } .btn:active { transform: translate(2px, 2px) } /* Thai text inside buttons */ .btn .th { font-size: calc(var(--fs-th-xs) * 0.85) } /* ---- iPhone SE / small phones (< 390px) ---- */ @media(max-width:390px) { .btn { font-size: clamp(8px, 2vw, 11px); padding: 11px 12px } .dice-area { gap: 8px } .dice { width: 40px; height: 40px; font-size: 20px } #screen-slip .btn { font-size: clamp(8px, 2vw, 10px); padding: 10px 8px } .slip { font-size: clamp(11px, 3vw, 14px) } .hud-item { font-size: clamp(12px, 2.5vw, 14px); padding: 3px 5px } } /* ---- iPhone standard (390–430px) ---- */ @media(min-width:391px) and (max-width:430px) { .btn { font-size: clamp(9px, 2.2vw, 12px) } .hud-item { font-size: clamp(9px, 2.2vw, 11px) } } /* ---- iPad Mini / Air (768px+) ---- */ @media(min-width:768px) { .btn { font-size: clamp(11px, 1.6vw, 14px); padding: 14px 28px; min-height: 52px } .choice-btn { font-size: var(--fs-th-md); padding: 18px 20px } .dice { width: clamp(56px, 7vw, 72px); height: clamp(56px, 7vw, 72px); font-size: clamp(26px, 4vw, 38px) } .numpad-btn { padding: 16px 4px; font-size: clamp(14px, 2vw, 20px) } .wallet-btn { width: 40px; height: 40px; font-size: 22px } .buy-save-btns .btn { font-size: clamp(13px, 2vw, 18px); padding: 20px } } /* ---- iPad Pro (1024px+) ---- */ @media(min-width:1024px) { .btn { font-size: clamp(12px, 1.2vw, 15px); padding: 16px 32px } } /* Slip screen action buttons: flex wrap on tiny screens */ #screen-slip>div:last-of-type { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; width: 100%; max-width: 400px; justify-content: center } #screen-slip>div:last-of-type .btn { flex: 1; min-width: 130px } /* MG5 buy/save buttons larger on mobile for thumb tap */ .buy-save-btns .btn { flex: 1; font-size: clamp(11px, 3vw, 16px); padding: clamp(14px, 3.5vw, 20px) } /* HUD wraps nicely on small screen */ .hud { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; flex-wrap: wrap; gap: 4px } .hud-item { color: #1a3300; font-size: clamp(8px, 2vw, 11px); background: rgba(255, 255, 255, 0.85); padding: 4px 8px; border: 2px solid var(--green); border-radius: 3px; white-space: nowrap } .timer-display { font-size: clamp(10px, 2.5vw, 14px); padding: 6px 10px; border: 3px solid var(--green); background: rgba(255, 255, 255, 0.9); color: #1a3300; font-family: 'Press Start 2P', monospace; border-radius: 4px; min-width: 80px; text-align: center; transition: all .3s } /* Lang switcher: stays compact and touchable */ #lang-switcher { position: fixed; top: 8px; right: 8px; z-index: 9999; display: flex; gap: 4px } .lang-btn { font-family: 'Press Start 2P', monospace; font-weight: 800; font-size: clamp(12px, 3vw, 15px); padding: clamp(6px, 1.5vw, 9px) clamp(10px, 2.5vw, 14px); border: 3px solid #1a3300; border-radius: 4px; cursor: pointer; background: #fff; color: #1a3300; box-shadow: 2px 2px 0 #1a3300; transition: all .1s; line-height: 1; min-height: 36px; min-width: 40px } .lang-btn.active { background: #00c853; color: #fff; border-color: #004d1c; box-shadow: 2px 2px 0 #004d1c } .lang-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #1a3300 } /* Customize screen action buttons side-by-side, full-width on small */ #screen-customize .btn { min-height: 40px; font-size: clamp(15px, 3vw, 15px) } /* Intro screen button */ #btnStart { min-height: 52px; font-size: clamp(20px, 10vw, 20px) } /* Question choice buttons: large touch targets */ .choice-btn { width: 100%; text-align: left; padding: clamp(14px, 3.5vw, 18px) clamp(12px, 3vw, 16px); margin: 6px 0; font-size: clamp(15px, 4vw, 20px); line-height: 1.8; cursor: pointer; font-family: 'Press Start 2P', monospace; font-weight: 700; border: none; transition: transform .1s; border-radius: 4px; min-height: 52px } /* Result/Continue button */ #btnContinue, #btnGoRoll { min-height: 40px; font-size: clamp(10px, 3vw, 14px) } /* Dice overlay text */ .dice-overlay-text { color: #fff; font-family: 'Press Start 2P', monospace; font-weight: 800; font-size: var(--fs-th-md); text-shadow: 2px 2px 0 #1a3300; text-align: center; padding: 0 16px } /* MG diff badge */ .mg-diff-badge { position: fixed; top: 8px; left: 8px; z-index: 200; font-family: 'Press Start 2P', monospace; font-weight: 800; font-size: var(--fs-th-xs); padding: 6px 12px; border-radius: 4px; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3); border: 2px solid rgba(0, 0, 0, 0.2) } /* swipe hint text size */ .swipe-left, .swipe-right { font-size: var(--fs-th-xs); padding: 8px 12px } /* numpad bigger tap targets */ .numpad-btn { padding: clamp(10px, 2.5vw, 16px) 4px; font-size: clamp(12px, 3.5vw, 18px); min-height: 44px } /* wallet buttons bigger */ .wallet-btn { width: clamp(36px, 9vw, 44px); height: clamp(36px, 9vw, 44px); font-size: clamp(18px, 5vw, 24px) } /* Utility classes */ .text-center { text-align: center } .mt8 { margin-top: 8px } .mt16 { margin-top: 16px } .gap8 { gap: 8px } .flex-col { display: flex; flex-direction: column } .w100 { width: 100% }