/* Seedglow ทดลองเล่น v2 · กรอบ/ปุ่ม/ไอคอนทั้งหมดเป็นชิ้น UI Kit ที่เจน (img/ui/) · CSS แค่จัดวาง + ยืดกรอบด้วย border-image
   ตัวเลข slice = พิกเซลในภาพต้นฉบับ (manifest ของ UI Kit) · ขนาดตั้งให้พอดีมือถือแนวนอน 844×390 แล้วขยายบนจอใหญ่ */
:root {
  --ink: #4a2e1f;
  --ink-soft: #7a5a44;
  --cream: #fff6e3;
  --lantern: #e8922a;
  --font-display: "Mitr", "Noto Sans Thai", system-ui, sans-serif;
  --font-body: "Anuphan", "Noto Sans Thai", system-ui, sans-serif;
  --sl: max(8px, env(safe-area-inset-left, 0px));
  --sr: max(8px, env(safe-area-inset-right, 0px));
  --st: max(6px, env(safe-area-inset-top, 0px));
  --sb: max(6px, env(safe-area-inset-bottom, 0px));
  --u: 1px; /* หน่วยขนาด HUD: จอใหญ่ขยายทั้งชุด */
  color-scheme: light;
}
@media (min-height: 560px) and (min-width: 900px) { :root { --u: 1.25px; } }
@media (min-height: 800px) and (min-width: 1300px) { :root { --u: 1.5px; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #8fbf4f; color: var(--ink); font: 500 14px/1.4 var(--font-body);
  -webkit-text-size-adjust: 100%; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; cursor: pointer; }
button { font: inherit; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; background: none; border: 0; padding: 0; cursor: pointer; }
img { -webkit-user-drag: none; }
:focus-visible { outline: 3px solid var(--lantern); outline-offset: 2px; }
/* ตัวอักษรขาวขอบน้ำตาลบนชิ้นเข้ม (แบบม็อกอัป S02) */
.t-light { color: var(--cream); text-shadow: 0 1px 0 var(--ink), 0 0 3px var(--ink), 0 0 2px var(--ink); }

/* ---------- HUD */
.hud { position: fixed; inset: 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.top-left { position: absolute; top: var(--st); left: var(--sl); display: flex; gap: calc(6 * var(--u)); pointer-events: none; }
.chip { pointer-events: auto; height: calc(26 * var(--u)); display: inline-flex; align-items: center; gap: calc(5 * var(--u));
  border-style: solid; border-color: transparent; border-image: url(ui/chip.webp) 0 43 0 48 fill / 0 calc(11 * var(--u)) 0 calc(12 * var(--u)) stretch;
  border-width: 0 calc(11 * var(--u)) 0 calc(12 * var(--u)); padding: 0 calc(2 * var(--u)) 0 0;
  font: 600 calc(12.5 * var(--u))/1 var(--font-display); color: var(--cream); text-shadow: 0 1px 0 var(--ink); white-space: nowrap; }
.chip img { height: calc(20 * var(--u)); margin-left: calc(-8 * var(--u)); }
.chip.place { padding-left: calc(2 * var(--u)); }
.chip.lvl { gap: calc(4 * var(--u)); padding-left: calc(2 * var(--u)); }
/* หลอด EXP = ชิ้น fill-exp ใน bar-frame (ภาพเจน) */
.chip .exp { position: relative; width: calc(46 * var(--u)); height: calc(9 * var(--u)); background: url(ui/bar-frame.webp) center / 100% 100% no-repeat; }
.chip .exp b { position: absolute; left: 6%; top: 22%; bottom: 26%; width: 0; max-width: 88%; background: url(ui/fill-exp.webp) left center / 100% 100% no-repeat; }
.chip.bump span { display: inline-block; animation: bump .35s ease; }
@keyframes bump { 40% { transform: scale(1.18); } }

.top-right { position: absolute; top: var(--st); right: var(--sr); display: flex; gap: calc(3 * var(--u)); }
.round { position: relative; width: calc(38 * var(--u)); height: calc(44 * var(--u)); background: url(ui/round.webp) center top / 100% auto no-repeat; }
.round img { position: absolute; left: 50%; top: calc(5 * var(--u)); width: calc(21 * var(--u)); transform: translateX(-50%); }
.round span { position: absolute; left: -6px; right: -6px; bottom: 0; text-align: center; font: 600 calc(9.5 * var(--u))/1 var(--font-display); color: var(--cream);
  text-shadow: 0 1px 0 var(--ink), 0 0 3px var(--ink); }
.round:active { background-image: url(ui/round-pressed.webp); }

/* ข้อความระบบ = แถบแชทมุมซ้ายล่างแบบม็อกอัป */
.chat { position: absolute; left: var(--sl); bottom: calc(var(--sb) + 58 * var(--u)); max-width: min(330px, 46vw); min-height: calc(24 * var(--u));
  border-style: solid; border-color: transparent; border-image: url(ui/chat-bar.webp) 16 23 15 25 fill / 7px 10px 7px 11px stretch; border-width: 7px 10px 7px 11px;
  padding: 0 2px; font: 500 calc(12 * var(--u))/1.3 var(--font-body); color: var(--cream); opacity: 0; transition: opacity .25s; pointer-events: none; }
.chat.show { opacity: 1; }

/* แถบเครื่องมือ 8 ช่อง (กลางล่าง) */
.toolbar { position: absolute; left: 50%; bottom: var(--sb); transform: translateX(-50%); display: flex; gap: calc(3 * var(--u)); }
.tool { position: relative; width: calc(44 * var(--u)); height: calc(44 * var(--u)); background: url(ui/tool-slot.webp) center / contain no-repeat; }
.tool.on { background-image: url(ui/tool-slot-selected.webp); transform: translateY(calc(-4 * var(--u))); }
.tool > img.ic { position: absolute; inset: 22%; width: 56%; height: 56%; object-fit: contain; }
.tool .seed { position: absolute; right: 8%; bottom: 14%; width: 40%; height: 40%; object-fit: contain; filter: drop-shadow(0 0 1px #fff6e3); }
.tool .k { position: absolute; left: 50%; bottom: calc(-5 * var(--u)); width: calc(15 * var(--u)); height: calc(15 * var(--u)); transform: translateX(-50%);
  background: url(ui/num-badge.webp) center / contain no-repeat; display: grid; place-items: center; font: 600 calc(9 * var(--u))/1 var(--font-display); color: var(--cream); }
.tool .c { position: absolute; top: calc(-3 * var(--u)); right: calc(-3 * var(--u)); min-width: calc(16 * var(--u)); height: calc(16 * var(--u)); padding: 0 3px; border-radius: 9px;
  background: var(--cream); border: 1.5px solid var(--ink); display: grid; place-items: center; font: 600 calc(10 * var(--u))/1 var(--font-display); }
.tool .c.zero { color: #b0442b; }
/* ระดับเครื่องมือ = tint ไอคอนเจน (ทองแดง/เงิน/ทอง/ผลึกโคม) · ฝากช่าง = จาง + นาฬิกา */
.tool.lv1 > img.ic { filter: sepia(.7) saturate(2.2) hue-rotate(-18deg) drop-shadow(0 0 2px #e08a4a); }
.tool.lv2 > img.ic { filter: grayscale(.4) brightness(1.15) drop-shadow(0 0 2px #e6eef5); }
.tool.lv3 > img.ic { filter: sepia(.6) saturate(2.6) hue-rotate(5deg) brightness(1.1) drop-shadow(0 0 3px #ffd34a); }
.tool.lv4 > img.ic { filter: sepia(.5) saturate(3) hue-rotate(-8deg) brightness(1.15) drop-shadow(0 0 4px #ffb23c); }
.tool.away > img.ic { opacity: .35; }
.tool .clock { position: absolute; left: 50%; top: 50%; width: 52%; transform: translate(-50%, -50%); }
.tag.lv1 { color: #b4602a; } .tag.lv2 { color: #6f7f8f; } .tag.lv3 { color: #b8860b; } .tag.lv4 { color: #d2691e; }
/* เลือกเมล็ด: ป๊อปอัปเหนือช่องถุงเมล็ด */
.seedpick { position: absolute; bottom: calc(var(--sb) + 54 * var(--u)); display: flex; gap: 4px; padding: 6px 8px;
  border-style: solid; border-color: transparent; border-image: url(ui/panel.webp) 23 27 22 28 fill / 9px 10px 9px 10px stretch; border-width: 9px 10px 9px 10px; }
.seedpick button { position: relative; width: calc(40 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: 1px; font: 600 calc(9.5 * var(--u))/1.1 var(--font-display); }
.seedpick button img { width: calc(30 * var(--u)); height: calc(26 * var(--u)); object-fit: contain; }
.seedpick button.on { color: #b5600e; }
.seedpick button.on img { filter: drop-shadow(0 0 3px #ffb43c); }
.seedpick button.zero img { opacity: .45; }
.seedpick .n { position: absolute; top: -4px; right: -2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--cream); border: 1.5px solid var(--ink); font-size: 9.5px; display: grid; place-items: center; }

/* ปุ่มใหญ่ขวาล่าง = ใช้ของที่ถืออยู่ */
.act { position: absolute; right: var(--sr); bottom: var(--sb); width: calc(66 * var(--u)); height: calc(66 * var(--u)); background: url(ui/action-btn.webp) center / contain no-repeat; }
.act img { position: absolute; left: 24%; top: 16%; width: 52%; height: 46%; object-fit: contain; }
.act span { position: absolute; left: -10px; right: -10px; bottom: 15%; text-align: center; font: 600 calc(11 * var(--u))/1 var(--font-display); color: var(--cream);
  text-shadow: 0 1px 0 var(--ink), 0 0 3px var(--ink), 0 0 2px var(--ink); white-space: nowrap; }
.act:active { transform: scale(.94); }
.act.off { filter: saturate(.35) brightness(.95); }
.act.charging { transform: scale(1.06); filter: drop-shadow(0 0 8px #ffcf4a) brightness(1.08); }

/* ---------- คนสอน (มิระ) */
.coach { position: fixed; top: calc(var(--st) + 30 * var(--u)); left: 50%; transform: translateX(-50%); display: flex; align-items: flex-start; gap: 2px;
  width: min(430px, calc(100vw - 230px)); pointer-events: none; z-index: 5; }
.coach-face { width: calc(52 * var(--u)); flex: none; filter: drop-shadow(0 2px 0 rgba(74, 46, 31, .35)); }
.coach-bubble { flex: 1; min-width: 0; padding: 4px 8px 3px; margin-top: 4px;
  border-style: solid; border-color: transparent; border-image: url(ui/panel.webp) 23 27 22 28 fill / 9px 10px 9px 10px stretch; border-width: 9px 10px 9px 10px; }
.coach-bubble.pop { animation: pop .35s ease; }
@keyframes pop { 0% { transform: scale(.92); } 60% { transform: scale(1.03); } }
.coach p { margin: 0; font: 500 calc(12.5 * var(--u))/1.4 var(--font-body); }
.coach p b { font-family: var(--font-display); font-weight: 600; color: #8a4a12; }
.coach-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; font: 600 calc(10 * var(--u))/1 var(--font-display); color: var(--ink-soft); }
.coach-foot button { pointer-events: auto; font: 500 calc(10.5 * var(--u))/1 var(--font-body); color: var(--ink-soft); text-decoration: underline; padding: 4px 0 4px 8px; }
body.coaching .chat { bottom: auto; top: calc(var(--st) + 112 * var(--u)); left: 50%; transform: translateX(-50%); }

/* มือชี้ (วางด้วย JS: ปลายนิ้วแตะจุดเป้าหมาย) */
.tut-hand { position: fixed; left: 0; top: 0; width: calc(34 * var(--u)); pointer-events: none; z-index: 30; filter: drop-shadow(0 2px 2px rgba(74, 46, 31, .45)); }
.tut-hand.tap { animation: tap 1s ease-in-out infinite; }
@keyframes tap { 50% { translate: 0 calc(7px * var(--dir, 1)); } }

/* ---------- หน้าต่าง: กรอบไม้ใบไม้ + ริบบิ้นหัว + ปุ่มกากบาท */
.panel { position: fixed; inset: 0; z-index: 20; background: rgba(40, 26, 14, 0.38); display: grid; place-items: center; padding: calc(var(--st) + 16px) var(--sr) var(--sb) var(--sl); }
.card { position: relative; width: min(calc(420 * var(--u)), 100%); max-height: calc(100vh - 34px); max-height: calc(100dvh - 34px); display: flex; flex-direction: column; padding: calc(24 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u));
  border-style: solid; border-color: transparent; border-image: url(ui/window.webp) 76 145 84 139 fill / 30px 56px 33px 54px stretch; border-width: 0; }
.ribbon { position: absolute; left: 50%; top: calc(-15 * var(--u)); transform: translateX(-50%); margin: 0; height: calc(38 * var(--u)); max-width: calc(100% - 50px);
  display: flex; align-items: center; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-style: solid; border-color: transparent; border-image: url(ui/header.webp) 0 197 0 192 fill / 0 calc(64 * var(--u)) 0 calc(62 * var(--u)) stretch;
  border-width: 0 calc(64 * var(--u)) 0 calc(62 * var(--u)); font: 600 calc(15 * var(--u))/1 var(--font-display); color: var(--cream);
  text-shadow: 0 1px 0 #2f4d16, 0 0 3px #2f4d16, 0 0 2px #2f4d16; }
.close { position: absolute; right: calc(-8 * var(--u)); top: calc(-10 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.close img { width: 100%; height: 100%; }
.close:active { transform: scale(.92); }
.card-head { display: flex; align-items: flex-end; gap: 4px; margin: calc(4 * var(--u)) 0 calc(4 * var(--u)); }
.card-head .face { width: calc(52 * var(--u)); flex: none; margin-bottom: -2px; }
.card-head .face:not([src]) { display: none; }
.say { flex: 1; margin: 0; padding: 3px 6px; font: 500 calc(12.5 * var(--u))/1.4 var(--font-body);
  border-style: solid; border-color: transparent; border-image: url(ui/panel.webp) 23 27 22 28 fill / 9px 10px 9px 10px stretch; border-width: 9px 10px 9px 10px; }
.say:empty { display: none; }
.rows { overflow-y: auto; display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding: 2px; -webkit-overflow-scrolling: touch; min-height: 0; }
.row { display: flex; align-items: center; gap: 8px; padding: 2px 4px; min-height: calc(40 * var(--u));
  border-style: solid; border-color: transparent; border-image: url(ui/panel.webp) 23 27 22 28 fill / 8px 9px 8px 9px stretch; border-width: 8px 9px 8px 9px; }
.row > img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); object-fit: contain; flex: none; }
.row .info { flex: 1; min-width: 0; }
.row .info b { font: 600 calc(13 * var(--u))/1.2 var(--font-display); display: block; }
.row .info small { color: var(--ink-soft); font-size: calc(11 * var(--u)); display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.row .info small img, .price img { height: 1.15em; vertical-align: -0.2em; }
.row .tag { font: 600 calc(10 * var(--u))/1 var(--font-display); color: #3f7a1c; margin-left: 4px; }
.btns { display: flex; gap: 4px; flex: none; }
.empty-note { text-align: center; color: var(--ink-soft); padding: 10px; }
.card-foot { display: flex; gap: 8px; justify-content: center; margin-top: calc(8 * var(--u)); }
.card-foot:empty { display: none; }
/* ปุ่มเจน 3 สถานะ (ยืดแนวนอน 3 ช่อง) */
.b { height: calc(32 * var(--u)); min-width: calc(58 * var(--u)); display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font: 600 calc(12.5 * var(--u))/1 var(--font-display); color: var(--ink); padding: 0 2px 2px;
  border-style: solid; border-color: transparent; border-image: url(ui/btn-primary.webp) 0 48 0 55 fill / 0 calc(14 * var(--u)) 0 calc(16 * var(--u)) stretch;
  border-width: 0 calc(14 * var(--u)) 0 calc(16 * var(--u)); }
.b:active { border-image-source: url(ui/btn-primary-pressed.webp); }
.b:disabled { border-image-source: url(ui/btn-primary-disabled.webp); color: #77706a; cursor: not-allowed; }
.b.alt { border-image: url(ui/btn-secondary.webp) 0 72 0 74 fill / 0 calc(18 * var(--u)) 0 calc(18 * var(--u)) stretch; border-width: 0 calc(18 * var(--u)) 0 calc(18 * var(--u)); }
.b.alt:active { border-image-source: url(ui/btn-secondary-pressed.webp); }
.b.alt:disabled { border-image-source: url(ui/btn-secondary-disabled.webp); }
.b.go { color: var(--cream); text-shadow: 0 1px 0 #2f6614, 0 0 3px #2f6614; border-image: url(ui/btn-accent.webp) 0 72 0 75 fill / 0 calc(20 * var(--u)) 0 calc(20 * var(--u)) stretch;
  border-width: 0 calc(20 * var(--u)) 0 calc(20 * var(--u)); }
.b.go:active { border-image-source: url(ui/btn-accent-pressed.webp); }
.b.big { height: calc(38 * var(--u)); font-size: calc(14.5 * var(--u)); min-width: calc(110 * var(--u)); }
.b.danger { color: #a33a22; }
/* แท็บในหน้าต่าง (ชิ้นเจน tab-on/tab-off) */
.tabs { display: flex; gap: 4px; justify-content: center; margin-bottom: 2px; }
.tab { height: calc(28 * var(--u)); min-width: calc(70 * var(--u)); font: 600 calc(12 * var(--u))/1 var(--font-display); padding: 4px 6px 0;
  border-style: solid; border-color: transparent; border-image: url(ui/tab-off.webp) 0 68 0 67 fill / 0 calc(16 * var(--u)) 0 calc(16 * var(--u)) stretch; border-width: 0 calc(16 * var(--u)) 0 calc(16 * var(--u)); }
.tab.on { border-image-source: url(ui/tab-on.webp); }
.empty-note b { color: var(--ink); }
.b.pulse { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { filter: brightness(1.12); transform: scale(1.04); } }
.keys { font-size: calc(11.5 * var(--u)); color: var(--ink-soft); line-height: 1.6; }
.keys kbd { font: 600 calc(10.5 * var(--u))/1 var(--font-body); border: 1px solid var(--ink-soft); border-radius: 4px; padding: 1px 4px; background: #fff; }

.loading { position: fixed; inset: 0; z-index: 40; display: grid; place-content: center; text-align: center; gap: 6px; background: #eef3dc; font-family: var(--font-display); }
.loading b { font-size: 30px; }
.loading.done { opacity: 0; pointer-events: none; transition: opacity .3s; }

/* จอตั้ง: แถบเครื่องมือ 2 แถว ปุ่มใหญ่ย้ายขึ้น · คนสอนกว้างเต็ม */
@media (orientation: portrait) {
  .top-left { flex-wrap: wrap; max-width: calc(100vw - 110px); row-gap: 4px; }
  .toolbar { flex-wrap: wrap; justify-content: center; width: calc(4 * 47 * var(--u)); row-gap: 8px; left: var(--sl); transform: none; }
  .coach { width: calc(100vw - 16px); top: calc(var(--st) + 52px); }
  .chat { bottom: calc(var(--sb) + 112px); max-width: 70vw; }
  .seedpick { bottom: calc(var(--sb) + 110px); left: var(--sl); flex-wrap: wrap; max-width: calc(100vw - 16px); }
}
/* ขอบเขต v1: เตือนขาดทุน (สหกรณ์) · มีคนรอซื้อ (กล่องพัสดุ) · แชทลาน */
.row .info small .warn, .row .info small .want { flex-basis: 100%; font-size: calc(10.5 * var(--u)); line-height: 1.3; }
.row .info small .warn { color: #a5501e; }
.row .info small .want { color: #3f7a1c; font-weight: 600; }
.chat-line { padding: 3px 8px; font-size: calc(12 * var(--u)); line-height: 1.35; overflow-wrap: anywhere; }
.chat-line b { font: 600 calc(12 * var(--u))/1.3 var(--font-display); color: #7a4a1c; }
.chat-line small { color: var(--ink-soft); font-size: calc(10 * var(--u)); }
.chat-form { display: flex; gap: 6px; width: 100%; align-items: center; }
.chat-form input { flex: 1; min-width: 0; height: calc(32 * var(--u)); font: calc(13 * var(--u)) var(--font-body, inherit); background: none; outline: none;
  border-style: solid; border-color: transparent; border-image: url(ui/chat-bar.webp) 16 23 15 25 fill / 8px 10px 8px 10px stretch; border-width: 8px 10px 8px 10px; padding: 0 4px; color: var(--cream); }
.chat-form input::placeholder { color: rgba(255, 244, 220, 0.6); }
/* แถวในหน้าต่างไม่หดตัวเมื่อรายการยาว (เลื่อนแทน) · ปุ่มหลายปุ่มขึ้นบรรทัดใหม่ชิดขวา */
.rows > * { flex-shrink: 0; }
.row { flex-wrap: wrap; }
.row .info { flex: 1 1 40%; }
.row .btns { margin-left: auto; }