/* บทสอนผู้เล่นใหม่ (tutorial.js · รอบ 2 29 ก.ย.) — เบา ไม่แย่งเกม: แถบบนบาง · การ์ดเล็กบรรทัดเดียว · โลกในเกมเป็นตัวสอน
   ครีม ขอบทองบาง เขียวแฟนตาซี · หรี่จอเบามาก ไม่รับคลิก (เกมยังเล่นได้)
   ⚠️ ตัวอักษรขั้นต่ำ 13px · ปุ่ม ≥ 44px บนจอสัมผัส · การ์ดไม่บังตัวละคร */
#tut { --tg: #3f8f4e; --tg2: #2f6f3c; --tgold: #e8b64a; --tink: #3e2c16; --tmute: #7a6548; }

/* ระหว่างบทสอน: ป้ายคำพูด NPC/คนอื่นซ่อน — ข้อความบทสอนต้องเป็นเรื่องเดียวบนจอ (ผู้ใช้ 29 ก.ย.) */
html.tut-on .bubble { display: none !important; }

/* หรี่ขอบจอ (ขั้นเดิน) — วงกลางรอบตัวเรากับจุดหมายสว่างเต็ม */
#tut .tut-vig { position: fixed; inset: 0; z-index: 66; pointer-events: none;
  background: radial-gradient(circle at var(--vx, 50%) var(--vy, 50%), transparent 190px, rgba(52, 36, 16, .2) 420px); }

/* ไฮไลต์ปุ่ม/แผง UI */
#tut .tut-hole { position: fixed; z-index: 70; pointer-events: none; border-radius: 14px; border: 2.5px solid #f2cf6a;
  box-shadow: 0 0 0 9999px rgba(52, 36, 16, .22), 0 0 16px 4px rgba(242, 207, 106, .55);
  animation: tutPulse 1.6s ease-in-out infinite; transition: left .2s, top .2s, width .2s, height .2s; }
@keyframes tutPulse { 50% { box-shadow: 0 0 0 9999px rgba(52, 36, 16, .22), 0 0 24px 8px rgba(242, 207, 106, .7); } }

/* แถบบนกลาง: บางลง · n / N · แถบแบ่งช่อง */
#tut .tut-top { position: fixed; z-index: 72; top: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 3px 4px 3px 14px; border-radius: 999px; border: 1.5px solid var(--tgold); background: rgba(255, 250, 240, .95);
  box-shadow: 0 3px 10px rgba(60, 40, 10, .14); color: var(--tink); white-space: nowrap; }
#tut .tut-top b { font: 700 14px/1 var(--font-head, inherit); }
#tut .tut-top em { font: 700 13px/1 var(--font-head, inherit); font-style: normal; color: var(--tg2); }
#tut .tut-bar { display: flex; gap: 3px; }
#tut .tut-bar i { width: 18px; height: 5px; border-radius: 3px; background: #e7dcc0; }
#tut .tut-bar i.ok { background: #9fcf8f; }
#tut .tut-bar i.on { background: linear-gradient(90deg, #5cb86a, var(--tg)); }
#tut .tut-skip { min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid #e2cc98; background: #fbf3e0; color: #6b5a40;
  font: 600 13px var(--font-head, inherit); cursor: pointer; }

/* การ์ดปริกกี้: เล็ก · เลขขั้น · หัวข้อ · บรรทัดเดียว */
#tut .tut-card { position: fixed; z-index: 71; width: max-content; max-width: min(380px, calc(100vw - 16px)); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end;
  pointer-events: auto; filter: drop-shadow(0 6px 14px rgba(60, 40, 10, .2)); animation: tutIn .25s cubic-bezier(.2, 1.3, .4, 1); }
#tut .tut-card.dock { left: 50% !important; top: auto !important; bottom: 250px; transform: translateX(-50%); }
@keyframes tutIn { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
#tut .tut-guide { width: 64px; height: 64px; margin: 0 -10px -4px 0; position: relative; z-index: 2; border-radius: 50%; border: 2px solid #fffaf0; box-shadow: 0 0 0 2px var(--tgold); background: #f6ead0; }
#tut .tut-guide.full { width: 84px; height: 84px; margin: 0 -14px -6px -8px; border: 0; border-radius: 0; background: none; box-shadow: none; object-fit: contain;
  /* ขอบทอง + ครีมอบลงในไฟล์ภาพแล้ว (guide_*.webp · 29 ก.ย.) — เดิมใช้ drop-shadow 9 ชั้นซ้อนกัน จอผู้ใช้ขึ้นเป็นตัวซ้อนสองตัว */
  filter: drop-shadow(0 3px 5px rgba(60, 40, 10, .35));
  animation: tutBob 2.4s ease-in-out infinite; }
@keyframes tutBob { 50% { transform: translateY(-3px) rotate(-2deg); } }
#tut .tut-bub { position: relative; padding: 9px 14px 9px 20px; border-radius: 14px; border: 1.5px solid var(--tgold); background: linear-gradient(#fffcf4, #f8eed8); color: var(--tink); }
#tut .tut-bub::after { content: '🍃'; position: absolute; right: 8px; top: -9px; font-size: 13px; }
#tut .tut-num { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--tg); color: #fffaf0;
  font: 700 13px/1 var(--font-head, inherit); vertical-align: 1px; }
#tut .tut-bub > b { font: 700 16px/1.3 var(--font-head, inherit); color: var(--tg2); }
#tut .tut-bub p { margin: 3px 0 0; font-size: 14px; line-height: 1.45; color: #4a3a26; }
#tut .tut-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
#tut .tut-act button { min-height: 38px; padding: 0 14px; border-radius: 11px; border: 1.5px solid #e2cc98; background: #fbf3e0; color: #5a4630; font: 700 14px var(--font-head, inherit); cursor: pointer; }
#tut .tut-act button.main { border-color: #2f6f3c; background: linear-gradient(#5cb86a, var(--tg)); color: #fff; box-shadow: inset 0 -3px 0 #0002; }

/* จุดหมายบนพื้น: ป้าย "คลิกตรงนี้" + มือชี้เด้ง — เด่นกว่าการ์ด */
#tut .tut-spot { position: fixed; z-index: 68; pointer-events: none; transform: translate(-50%, -100%); display: grid; justify-items: center; margin-top: -26px; }
#tut .tut-spot b { padding: 3px 10px; border-radius: 999px; background: #fffaf0; border: 1.5px solid var(--tgold); color: #8a5a10; font: 700 13px/1.5 var(--font-head, inherit);
  box-shadow: 0 3px 8px rgba(60, 40, 10, .2); white-space: nowrap; }
#tut .tut-spot b::before, #tut .tut-spot b::after { content: '✦'; color: #e8b64a; font-size: 11px; margin: 0 4px; }
#tut .tut-spot i { font-size: 26px; font-style: normal; line-height: 1; transform: rotate(180deg); animation: tutTap 1s ease-in-out infinite; filter: drop-shadow(0 2px 2px #0004); }
@keyframes tutTap { 50% { translate: 0 6px; } }

/* ✓ ตอนทำสำเร็จ */
#tut .tut-ok { position: fixed; z-index: 73; pointer-events: none; transform: translate(-50%, -50%); width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(#5cb86a, var(--tg)); color: #fff; font: 900 30px/1 var(--font-head, inherit); border: 3px solid #fffaf0;
  box-shadow: 0 4px 12px rgba(60, 40, 10, .3); animation: tutOk .9s ease-out forwards; }
@keyframes tutOk { 0% { scale: .3; opacity: 0; } 25% { scale: 1.15; opacity: 1; } 70% { scale: 1; opacity: 1; translate: 0 -10px; } 100% { opacity: 0; translate: 0 -24px; } }

/* ! เหนือ NPC เป้าหมาย · นอกจอ = ติดขอบจอ + ลูกศรชี้ทาง */
#tut .tut-mark { position: fixed; z-index: 68; pointer-events: none; transform: translate(-50%, -100%); font: 900 38px/1 var(--font-head, inherit);
  color: #f2b42a; -webkit-text-stroke: 2px #6b4510; text-shadow: 0 3px 0 #6b451055; animation: tutMark 1s ease-in-out infinite; }
@keyframes tutMark { 50% { margin-top: -8px; } }
#tut .tut-mark.edge { transform: translate(-50%, -50%); width: 46px; height: 46px; display: grid; place-items: center; font-size: 28px;
  border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fffaf0, #f6e0a8); border: 2px solid var(--tgold); box-shadow: 0 4px 12px rgba(60, 40, 10, .25); animation: none; }
#tut .tut-mark.edge::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border: 9px solid transparent; border-left: 13px solid #c8901a;
  transform: rotate(var(--ang)) translate(30px) translateY(-50%); transform-origin: 0 0; }

/* มือถือแนวตั้ง: แถบขั้นล่างสุด (บนจอมีแผงตัวละคร/แผนที่) · การ์ดเหนือปุ่มควบคุม */
@media (max-width: 760px) {
  #tut .tut-top { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); padding: 3px 4px 3px 12px; gap: 7px; }
  #tut .tut-bar i { width: 12px; }
  #tut .tut-act button { min-height: 44px; }
}
/* จอแคบมาก ≤ 360: แถบบนย่อ */
@media (max-width: 360px) {
  #tut .tut-top b { font-size: 13px; }
  #tut .tut-bar { display: none; }
  #tut .tut-card.dock { bottom: 200px; }
  #tut .tut-guide.full { width: 64px; height: 64px; }
}
/* มือถือแนวนอน: ตำแหน่งแถบ/การ์ดย้ายไป ui-touch.css (อ่านพื้นที่ HUD จาก ui-root · 1 ต.ค.) */
html.touch-ui.land #tut .tut-guide.full { width: 60px; height: 60px; }