/* BUY guide.css — ไฟกระพริบชี้เป้า (ระดับ 0) + บอลลูน/กรอบน้อง (ระดับ 1) ใช้สีเข้มสุดของบทบาท */
:root{--guide-color:#1d7a40}
body[data-role="U"]{--guide-color:#7a5412}
body[data-role="Y"]{--guide-color:#143f8f}
.guide-pulse{outline:3px solid var(--guide-color)!important;outline-offset:3px;border-radius:10px;animation:guidePulse 1.6s ease-in-out infinite}
/* ขอบขาวนอกสุด กันสีทองจมบนพื้นสว่าง */
@keyframes guidePulse{0%,100%{box-shadow:0 0 0 0 #fff,0 0 0 0 var(--guide-color)}50%{box-shadow:0 0 0 5px #fff,0 0 0 9px var(--guide-color)}}
@media(prefers-reduced-motion:reduce){.guide-pulse{animation:none;outline-width:5px;box-shadow:0 0 0 3px #fff}.mascot-step-motion,.mascot-idle-motion,.mascot-blink-overlay{animation:none!important}.mascot-blink-overlay{display:none!important}}
body[data-guide-motion="still"] .mascot-step-motion,body[data-guide-motion="still"] .mascot-idle-motion,body[data-guide-motion="still"] .mascot-blink-overlay{animation:none!important}
.guide-box{position:fixed;bottom:12px;left:12px;z-index:60;display:flex;align-items:flex-end;gap:8px;max-width:min(92vw,380px);pointer-events:none}
.guide-box.right{left:auto;right:12px;flex-direction:row-reverse}
.guide-box>*{pointer-events:auto}
.guide-mascot-wrap{position:relative;display:inline-flex;width:72px;height:84px;flex:none;align-items:center;justify-content:center}
.guide-mascot{width:100%;height:100%;object-fit:contain;cursor:pointer;flex:none;position:relative;z-index:1}
.mascot-step-motion{animation:mascotFloat 4.8s ease-in-out infinite}
.mascot-idle-motion{animation:mascotFloat 3.8s ease-in-out infinite}
.mascot-blink-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0;animation:mascotBlink 4.6s infinite}
.mascot-closed-eye{fill:#f7c7a9;stroke:#59372d;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
@keyframes mascotFloat{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-2px) rotate(-.6deg)}70%{transform:translateY(1px) rotate(.45deg)}}
@keyframes mascotBlink{0%,88%,91%,100%{opacity:0}89%,90%{opacity:1}}
.guide-bubble{background:#fff;color:#1c2925;border:2px solid var(--guide-color);border-radius:14px;padding:8px 12px;font-weight:650;font-size:.95rem;box-shadow:0 4px 16px #0003}
.guide-box.min .guide-bubble{display:none}
.guide-panel .check{margin:6px 0}
@media(max-width:680px){.guide-mascot-wrap{width:56px;height:66px}}
.auto-bar{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:70;display:flex;gap:10px;align-items:center;background:#173f35;color:#fff;border:2px solid #1d7a40;border-radius:14px;padding:10px 14px;max-width:min(94vw,520px);font-weight:700;box-shadow:0 6px 24px #0005}
.auto-bar[hidden]{display:none!important}.auto-stop{background:#fff;color:#9e2f22;border-color:#fff;min-width:84px;font-size:1.05rem}
body[data-role="U"] .guide-bubble{border-color:#7a5412}
.auto-mascot{width:44px;height:52px;object-fit:contain;flex:none}.auto-mascot[hidden]{display:none!important}
.auto-bar{width:max-content}
.guide-box.idle{opacity:.92}.guide-box.idle>*{pointer-events:none}

/* ลากน้องและบอลลูนไปวางตรงที่ไม่บังฟอร์มได้ */
.guide-mascot-wrap{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.guide-dragging{cursor:grabbing;opacity:.96;max-width:min(96vw,380px)}
.guide-dragging .guide-mascot-wrap{cursor:grabbing}
.guide-box.idle .guide-mascot-wrap{pointer-events:auto}

/* 1.8.2: น้องมาสคอตและกล่องข้อความแนะนำ ใหญ่ขึ้น 3 เท่า + โปร่งใส 50% (ทั้ง B/U/Y) */
.guide-box,.guide-box.idle,.guide-dragging{opacity:.5!important}
.guide-box{max-width:min(96vw,1140px);gap:24px}
.guide-dragging{max-width:min(96vw,1140px)}
.guide-mascot-wrap{width:216px;height:252px}
.guide-bubble{font-size:clamp(1.15rem,4.5vw + .4rem,2.85rem);padding:24px 36px;border-width:6px;border-radius:42px;box-shadow:0 12px 48px #0003;pointer-events:none;min-width:0}
@media(max-width:680px){
  .guide-mascot-wrap{width:168px;height:198px}
  .guide-box{flex-direction:column;align-items:flex-start;gap:8px}
  .guide-box.right{flex-direction:column;align-items:flex-end}
  .guide-bubble{padding:12px 18px;border-width:4px;border-radius:24px}
}

/* 1.8.3: หลบเมื่อแตะหน้าจอ — จางมากและคลิกทะลุทุกส่วน แล้วค่อยกลับมา */
.guide-box{transition:opacity .25s ease}
body[data-guide-away="1"] .guide-box,body[data-guide-away="1"] .guide-box.idle,body[data-guide-away="1"] .guide-dragging{opacity:.1!important;pointer-events:none!important}
body[data-guide-away="1"] .guide-box *{pointer-events:none!important}

/* 1.10.9: (1) กล่องข้อความแนะนำเล็กลง 50% (ฟอนต์ ช่องไฟ ขอบ มุมโค้ง เงา ความกว้างสูงสุด)  (2) จางหายจริง: opacity 0 + คลิกทะลุ ทั้งตอนแตะที่อื่นและตอนแตะที่ตัวน้อง (.gone) น้องมาสคอตขนาดเดิม */
.guide-box{max-width:min(96vw,570px);gap:12px}
.guide-dragging{max-width:min(96vw,570px)}
.guide-bubble{font-size:clamp(.8rem,2.25vw + .2rem,1.425rem);padding:12px 18px;border-width:3px;border-radius:21px;box-shadow:0 6px 24px #0003}
@media(max-width:680px){
  .guide-box{gap:4px}
  .guide-bubble{padding:6px 9px;border-width:2px;border-radius:12px}
}
.guide-box{transition:opacity .35s ease,visibility 0s linear 0s}
.guide-box.gone,body[data-guide-away="1"] .guide-box,body[data-guide-away="1"] .guide-box.idle,body[data-guide-away="1"] .guide-dragging{opacity:0!important;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s;pointer-events:none!important}
.guide-box.gone *{pointer-events:none!important}

/* Adaptive beginner journey panel (B/U/Y) */
.beginner-guide-panel{border:2px solid #d4e3dc;background:linear-gradient(135deg,#fbfefc,#f4f8f6);margin-bottom:14px}
.beginner-head,.beginner-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.beginner-head h2{margin:2px 0 8px}.beginner-toggle{display:flex;align-items:center;gap:6px;font-weight:700;white-space:nowrap}
.beginner-progress{height:8px;background:#e4e9e6;border-radius:99px;overflow:hidden;margin:8px 0}
.beginner-progress-fill{display:block;height:100%;width:0;background:#39865d;border-radius:99px;transition:width .2s ease}
.beginner-count{font-size:.88rem}.beginner-event{font-size:.82rem;color:#52635b}
.beginner-current{margin:12px 0 4px;color:#174d35}.beginner-instruction{margin:0 0 10px;font-size:1rem}
.beginner-steps{padding-left:0;list-style:none;display:grid;gap:8px;margin:12px 0}
.beginner-step{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:10px;background:#fff;border:1px solid #e1e8e4}
.beginner-step-mark{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;flex:none;background:#edf1ee;font-weight:800}
.beginner-step.done .beginner-step-mark{background:#d8f1e2;color:#17663a}.beginner-step.current{border-color:#39865d;background:#f1faf4}.beginner-step.current .beginner-step-mark{background:#39865d;color:white}
.beginner-step small{display:block;color:#5c6a62;margin-top:2px;font-size:.82rem}
.beginner-guide-panel[hidden]{display:none!important}

/* BUY Smart Standby: per-role local preferences and black idle screen */
.smart-standby-settings{border:1px solid #d9e2dd;background:#f8fbf9;margin-bottom:14px}
.smart-standby-settings .grid2{align-items:end;margin:8px 0}
.smart-standby-settings select{width:100%;padding:10px;border:1px solid #b9c8c0;border-radius:9px;background:#fff;color:#17231d}
.smart-standby-screen{position:fixed;inset:0;z-index:99999;background:#000;color:#555;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.smart-standby-screen[hidden]{display:none!important}
.standby-brand{font-size:10px;letter-spacing:.18em;color:#333}
.standby-clock{font-size:clamp(13px,2.2vw,19px);font-weight:400;color:#555;text-align:center;padding:0 18px}
.standby-hint{position:absolute;bottom:22px;font-size:10px;color:#292929}
body.smart-standby-active{overflow:hidden}