/* ============================================================
   ผู้กล้าคณิต — สไตล์รวม
   ธีม Tiny Swords: pixel art 64px grid, โทนเขียว-ทอง-น้ำเงินเข้ม
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Mali:wght@400;500;600;700&display=swap');

:root{
  --ink:#1d2b36;          /* ตัวหนังสือหลัก */
  --ink-soft:#4a6070;
  --paper:#f4e4c1;        /* สีกระดาษ */
  --gold:#f0c060;
  --gold-dk:#a8763a;
  --grass:#98b258;        /* ดึงจาก tile หญ้าจริงในแพ็ก */
  --grass-dk:#5e7a3c;
  --sand:#f0df7e;
  --rock:#86b9b7;
  --sea:#3a7ca5;
  --navy:#1e2a38;
  --red:#d84848;
  --ok:#4aa05a;
  --tile:64px;
  --sh:0 4px 0 rgba(0,0,0,.22);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}   /* กัน iOS ขยายฟอนต์เองตอนหมุนจอ */
body{overscroll-behavior:none;         /* กันหน้าเด้ง/ดึงรีเฟรชตอนลากของ */
  touch-action:manipulation;           /* ปิดซูมจากการแตะสองที (double-tap) ทั้งหน้า */
  -webkit-touch-callout:none}          /* กดค้างแล้วไม่ขึ้นเมนูคัดลอก/บันทึกรูป */

/* ระหว่างลากของ: ล็อกทั้งหน้าไม่ให้เลื่อนหรือซูมตาม
   engine เป็นคนใส่/ถอดคลาสนี้ให้เอง ไม่ต้องแก้ไฟล์เกม */
html.dragging, html.dragging body{touch-action:none;overscroll-behavior:none}
body{
  font-family:'Mali',system-ui,sans-serif;
  color:var(--ink);
  background:var(--navy);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-user-select:none;user-select:none;
}
img,.pixel{image-rendering:pixelated;image-rendering:crisp-edges}

/* ---------- พื้นหลังภูมิประเทศ (ใช้ tile จริงจากแพ็ก) ---------- */
.bg-grass{background:url('../assets/terrain/tile_grass.png') repeat;background-size:var(--tile) var(--tile)}
.bg-sand {background:url('../assets/terrain/tile_sand.png')  repeat;background-size:var(--tile) var(--tile)}
.bg-rock {background:url('../assets/terrain/tile_rock.png')  repeat;background-size:var(--tile) var(--tile)}
.bg-water{background:url('../assets/terrain/water.png')      repeat;background-size:var(--tile) var(--tile)}

/* ---------- แผง 9-slice จากแพ็ก ---------- */
.panel{
  border-style:solid;border-width:32px;
  border-image:url('../assets/ui/paper.png') 64 fill round;
  padding:4px 10px;color:var(--ink);
}
.panel-gold{
  border-style:solid;border-width:32px;
  border-image:url('../assets/ui/paper_gold.png') 64 fill round;
  padding:4px 10px;
}
.carved{
  border-style:solid;border-width:24px;
  border-image:url('../assets/ui/carved.png') 64 fill round;
  padding:2px 8px;color:var(--paper);
}
.banner{
  border-style:solid;border-width:32px;
  border-image:url('../assets/ui/banner_h.png') 64 fill round;
  padding:0 8px;color:var(--paper);
}

/* ---------- ปุ่ม ---------- */
.btn{
  font-family:inherit;font-size:clamp(15px,2.2vw,20px);font-weight:600;
  color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.45);
  background:none;cursor:pointer;
  border-style:solid;border-width:22px 26px;
  border-image:url('../assets/ui/btn_blue.png') 64 fill round;
  padding:0 6px;min-height:64px;min-width:64px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .06s;
}
.btn:hover{border-image-source:url('../assets/ui/btn_hover.png')}
.btn:active{border-image-source:url('../assets/ui/btn_blue_press.png');transform:translateY(2px)}
.btn-red{border-image-source:url('../assets/ui/btn_red.png')}
.btn-red:hover{border-image-source:url('../assets/ui/btn_red.png')}
.btn-red:active{border-image-source:url('../assets/ui/btn_red_press.png')}
.btn[disabled]{border-image-source:url('../assets/ui/btn_off.png');color:#c9c9c9;cursor:not-allowed;transform:none}
.btn-lg{font-size:clamp(18px,3vw,26px);border-width:26px 34px;min-height:88px}

/* ---------- ริบบิ้นหัวข้อ ---------- */
.ribbon{
  border-style:solid;border-width:0 40px;
  border-image:url('../assets/ui/ribbon_blue.png') 0 64 fill round;
  min-height:64px;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;text-shadow:0 2px 0 rgba(0,0,0,.4);
  font-size:clamp(16px,2.6vw,24px);padding:0 4px;
}
.ribbon-red{border-image-source:url('../assets/ui/ribbon_red.png')}
.ribbon-gold{border-image-source:url('../assets/ui/ribbon_yellow.png')}

/* ---------- หลอดพลัง ---------- */
.bar{position:relative;height:32px;
  border-style:solid;border-width:16px 20px;
  border-image:url('../assets/ui/bar_base.png') 64 fill round;
  padding:0;background:none}
.bar-fill{position:absolute;inset:0;
  background:url('../assets/ui/bar_fill.png') repeat-x;background-size:auto 100%;
  transform-origin:left center;transition:transform .45s cubic-bezier(.3,1.4,.5,1)}

/* ---------- ไอคอน ---------- */
.ico{width:32px;height:32px;background-size:contain;background-repeat:no-repeat;
  display:inline-block;vertical-align:middle;image-rendering:pixelated;flex:none}
.ico-lock {background-image:url('../assets/icon/lock.png')}
.ico-plus {background-image:url('../assets/icon/plus.png')}
.ico-minus{background-image:url('../assets/icon/minus.png')}
.ico-back {background-image:url('../assets/icon/back.png')}
.ico-star {background-image:url('../assets/icon/star.png')}
.ico-x    {background-image:url('../assets/icon/x.png')}
.ico-n1   {background-image:url('../assets/icon/n1.png')}
.ico-n2   {background-image:url('../assets/icon/n2.png')}
.ico-n3   {background-image:url('../assets/icon/n3.png')}

/* ---------- หัวใจ (แพ็กไม่มี วาดเองด้วย CSS ให้เข้าธีม pixel) ---------- */
.heart{width:28px;height:28px;flex:none;position:relative;filter:drop-shadow(0 2px 0 rgba(0,0,0,.3))}
.heart::before,.heart::after{content:'';position:absolute;width:14px;height:22px;
  background:var(--red);border-radius:14px 14px 0 0;top:3px}
.heart::before{left:14px;transform:rotate(-45deg);transform-origin:0 100%}
.heart::after {left:0;  transform:rotate(45deg); transform-origin:100% 100%}
.heart.gone::before,.heart.gone::after{background:#5c6670;opacity:.55}
.heart.pop{animation:pop-heart .5s ease}
@keyframes pop-heart{0%{transform:scale(1)}25%{transform:scale(1.5) rotate(-12deg)}
  60%{transform:scale(.75)}100%{transform:scale(1)}}

/* ---------- สไปรต์ ---------- */
.spr{background-repeat:no-repeat;image-rendering:pixelated;flex:none}
.spr.flip{transform:scaleX(-1)}

/* ---------- เศษส่วนแบบเขียนซ้อน ---------- */
.frac{display:inline-flex;flex-direction:column;align-items:center;
  line-height:1;vertical-align:middle;margin:0 4px;font-weight:700}
.frac .num{padding:0 4px}
.frac .den{padding:0 4px;border-top:3px solid currentColor;margin-top:2px}

/* ---------- เลย์เอาต์ ---------- */
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.center{display:flex;flex-direction:column;align-items:center;text-align:center}
.hud{position:sticky;top:0;z-index:30;background:rgba(30,42,56,.94);
  backdrop-filter:blur(4px);border-bottom:3px solid #0d141c}
.hud .wrap{display:flex;align-items:center;gap:14px;padding:10px 16px;color:var(--paper);flex-wrap:wrap}
.hud .sp{flex:1}
.tag{font-size:13px;color:#9fb3c8}
.big{font-size:clamp(26px,5vw,44px);font-weight:700}

/* ---------- ป๊อปอัป ---------- */
.veil{position:fixed;inset:0;background:rgba(12,18,26,.78);display:flex;
  align-items:center;justify-content:center;z-index:60;padding:16px;
  animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{max-width:560px;width:100%;animation:pop .3s cubic-bezier(.2,1.5,.5,1)}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- แจ้งเตือนกลางจอ ---------- */
.toast{position:fixed;left:50%;top:22%;transform:translateX(-50%);z-index:70;
  font-size:clamp(20px,4vw,34px);font-weight:700;color:#fff;
  text-shadow:0 3px 0 rgba(0,0,0,.5);pointer-events:none;
  animation:toast 1.1s ease forwards}
.toast.ok{color:#8ef0a0}.toast.no{color:#ff9b8a}
@keyframes toast{0%{opacity:0;transform:translateX(-50%) translateY(14px) scale(.8)}
  20%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.06)}
  75%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-24px)}}

.shake{animation:shake .38s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}
  40%{transform:translateX(9px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

/* ---------- แท็บเล็ต/มือถือ ---------- */
@media (max-width:720px){
  :root{--tile:48px}
  .panel,.panel-gold{border-width:24px}
  .carved{border-width:18px}
  .btn{border-width:18px 22px;min-height:56px}
  .btn-lg{border-width:20px 26px;min-height:72px}
  .ribbon{border-width:0 30px;min-height:52px}
  .wrap{padding:12px}
}

/* ============================================================
   ฉากเดินทาง (หน้าด่าน) — ผู้กล้า เพื่อนร่วมทาง และชาวบ้านที่เจอ
   ============================================================ */
.scene{position:relative;height:clamp(118px,19vh,166px);overflow:hidden;
  border-bottom:5px solid rgba(0,0,0,.4);z-index:5}
.scene-sky{position:absolute;left:0;right:0;top:0;bottom:44%;
  background:linear-gradient(#8fc4e8,#cfe8f0)}
.scene-bg{position:absolute;left:0;right:0;bottom:0;height:56%;
  background-repeat:repeat;background-size:56px 56px;
  border-top:4px solid rgba(0,0,0,.2);box-shadow:inset 0 6px 10px rgba(0,0,0,.12)}
.scene-party{position:absolute;left:12px;bottom:2px;display:flex;align-items:flex-end;z-index:20}
.scene-mate{margin-right:-36px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.22))}
.scene-mate.is-hero{margin-right:-28px}
.scene-npc{position:absolute;right:16px;bottom:2px;display:flex;flex-direction:column;
  align-items:center;z-index:15;opacity:0;transform:translateX(170%);
  transition:transform .65s cubic-bezier(.2,1,.4,1),opacity .4s}
.scene-npc.in{opacity:1;transform:translateX(0)}
.scene-name{background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:600;
  padding:1px 9px;border-radius:10px;margin-top:-10px;white-space:nowrap}

/* ---------- บทสนทนากับชาวบ้าน ---------- */
.dlg{display:flex;gap:14px;align-items:flex-start;margin-top:2px}
.dlg-por{flex:none;background:rgba(0,0,0,.08);border-radius:12px;padding:3px}
.dlg-txt{flex:1;position:relative;background:#fff8e8;border:3px solid var(--ink);
  border-radius:14px;padding:10px 15px}
.dlg-txt>b{color:var(--gold-dk);font-size:15px}
.dlg-txt::before{content:'';position:absolute;left:-13px;top:20px;
  border:10px solid transparent;border-right-color:var(--ink)}
.dlg-txt::after{content:'';position:absolute;left:-8px;top:20px;
  border:10px solid transparent;border-right-color:#fff8e8}
@media (max-width:560px){
  .dlg{flex-direction:column;align-items:center;text-align:center}
  .dlg-txt::before,.dlg-txt::after{display:none}
  .scene-mate{margin-right:-42px}
}

/* ---------- ตัวเลขที่ลอยขึ้นตอนค่าเปลี่ยน (ใช้กับมาตรวัด) ---------- */
.mfloat{position:absolute;right:-6px;top:-20px;font-weight:700;font-size:15px;
  pointer-events:none;animation:mfloat 1s ease forwards}
@keyframes mfloat{0%{opacity:0;transform:translateY(6px)}
  25%{opacity:1;transform:translateY(-2px)}100%{opacity:0;transform:translateY(-20px)}}