/* UI หน้าเล่น v2 · โทนเดียวกับ v1 (ชมพู/เหลือง/ม่วงเข้ม ขอบหนา ฟอนต์ Mali/Anuphan) · ไม่ใช้ emoji */
:root{--u-ink:#3B2A4A;--u-paper:#FFFBF2;--u-tarp2:#FFF4E4;--u-pink:#F77D9C;--u-crate:#F6C343;--u-leaf:#3E9B63;--u-wilt:#B7793A;--u-red:#C73E4B;--u-line:2.5px solid var(--u-ink);--u-hud:64px;--u-notice-h:0px;--u-panel-w:360px}
#ui{color:var(--u-ink);font-family:Anuphan,Mali,system-ui,sans-serif;font-size:15px}
#ui *{box-sizing:border-box}
#ui button{font:inherit;color:inherit}
#ui :focus-visible{outline:3px solid var(--u-ink);outline-offset:2px}
#ui [hidden]{display:none!important}
.ui-ico{image-rendering:pixelated;display:block;flex:none}
.ui-ico-fb{width:16px;height:16px}
.ui-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* HUD */
.ui-hud{position:fixed;left:0;right:0;top:0;z-index:27;display:flex;align-items:center;gap:8px;padding:calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 6px calc(8px + env(safe-area-inset-left));pointer-events:none;flex-wrap:wrap}
.ui-hud>*{pointer-events:auto}
.ui-chip{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 12px;background:var(--u-paper);border:var(--u-line);border-radius:999px;font-family:Mali,Anuphan,sans-serif;font-weight:700;position:relative}
.ui-num{font-variant-numeric:tabular-nums;font-size:16px}
.ui-level{border-radius:16px;gap:10px}
.ui-lv{display:flex;flex-direction:column;align-items:center;line-height:1}
.ui-lv small{font-size:12px;font-weight:600}
.ui-lv-num{font-size:20px}
.ui-xp{display:flex;flex-direction:column;gap:2px;min-width:84px}
.ui-bar{display:block;height:8px;background:var(--u-tarp2);border:2px solid var(--u-ink);border-radius:99px;overflow:hidden}
.ui-bar i{display:block;height:100%;width:0;background:var(--u-pink);transition:width .25s}
.ui-sub{font-size:13px;opacity:.85;font-family:Anuphan,sans-serif;font-weight:500}
.ui-navs{display:flex;gap:8px;margin-left:auto}
.ui-nav{white-space:nowrap;position:relative;display:flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:4px 14px;background:var(--u-pink);border:var(--u-line);border-radius:14px;font-family:Mali,Anuphan,sans-serif;font-weight:700;font-size:15px;cursor:pointer}
.ui-nav .ui-sub{font-size:12px}
.ui-nav.locked{background:#D9D2D8;opacity:.9}
.ui-snds{display:flex;gap:6px}
.ui-snd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:48px;min-width:44px;min-height:44px;padding:2px;background:var(--u-paper);border:var(--u-line);border-radius:12px;font-family:Mali,Anuphan,sans-serif;font-weight:700;font-size:12px;line-height:1.1;cursor:pointer}
.ui-snd small{font-size:11px;padding:0 5px;border:2px solid var(--u-ink);border-radius:6px;background:#BFE8B0}
.ui-snd.off{background:#D9D2D8;color:#5b4d66}
.ui-snd.off span{text-decoration:line-through}
.ui-snd.off small{background:#F4B4BC}
.ui-badge{position:absolute;right:-6px;top:-8px;min-width:22px;height:22px;padding:0 5px;border-radius:99px;background:var(--u-crate);border:2px solid var(--u-ink);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* แผง: จอกว้าง = ขวา */
.ui-panel{position:fixed;z-index:30;right:0;top:var(--u-hud);bottom:0;width:var(--u-panel-w);display:flex;flex-direction:column;background:var(--u-paper);border-left:var(--u-line);border-top:var(--u-line);border-radius:16px 0 0 0;padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}
.ui-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:var(--u-line)}
.ui-title{margin:0;font-family:Mali,Anuphan,sans-serif;font-size:18px;overflow-wrap:anywhere}
.ui-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:10px 12px;-webkit-overflow-scrolling:touch}
.ui-backdrop{display:none}
.ui-x{white-space:nowrap;flex:none;min-height:44px;min-width:44px;padding:4px 14px;background:var(--u-paper);border:var(--u-line);border-radius:14px;font-weight:600;cursor:pointer}
.ui-list{display:flex;flex-direction:column;gap:8px}
.ui-list:has(>.ui-sticky){margin:0 -12px;padding:0 12px}
.ui-h3{margin:8px 0 0;font-family:Mali,Anuphan,sans-serif;font-size:15px}
.ui-note{margin:4px 0;font-size:14px;overflow-wrap:anywhere}
.ui-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px;background:#fff;border:var(--u-line);border-radius:14px}
.ui-info{flex:1 1 140px;min-width:140px;display:flex;flex-direction:column;gap:2px}
.ui-name{font-size:15px;overflow-wrap:break-word}
.ui-why{font-size:13px;color:var(--u-red);font-weight:600;overflow-wrap:anywhere}
.ui-act,.ui-btns{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.ui-wide .ui-act{flex:1 0 100%}
.ui-wide .ui-btns{flex-wrap:nowrap}
.ui-wide .ui-btn{flex:1 1 0;min-width:0;padding:4px 8px}
.ui-sticky{position:sticky;bottom:-10px;z-index:1;display:flex;gap:8px;margin:8px -12px -10px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--u-paper);border-top:var(--u-line)}
.ui-sticky .ui-btn{flex:1 1 0}
.ui-btns{flex-direction:row;flex-wrap:wrap;align-items:center}
.ui-card{display:flex;flex-direction:column;gap:6px;padding:10px;background:var(--u-tarp2);border:var(--u-line);border-radius:14px}
.ui-line{display:flex;align-items:center;gap:8px;font-size:14px;overflow-wrap:anywhere}
.ui-line.lack,.ui-need.lack{color:var(--u-red);font-weight:600}
.ui-inputs{display:flex;flex-wrap:wrap;gap:4px 10px}
.ui-need{display:inline-flex;align-items:center;gap:4px;font-size:13px}
.ui-btn{white-space:nowrap;min-height:44px;min-width:44px;padding:4px 14px;background:var(--u-crate);border:var(--u-line);border-radius:14px;font-weight:600;font-size:14px;cursor:pointer}
.ui-btn.ui-main{background:var(--u-pink);font-family:Mali,Anuphan,sans-serif;font-weight:700}
.ui-btn:disabled{opacity:.45;cursor:not-allowed}
.ui-step{font-size:22px;padding:0 12px}
.ui-stepper{display:flex;align-items:center;gap:6px}
.ui-stepper output{min-width:52px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.ui-form{display:flex;align-items:center;flex-wrap:wrap;gap:8px;justify-content:space-between}
.ui-pick{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 10px;background:#fff;border:var(--u-line);border-radius:14px;cursor:pointer;text-align:left;overflow-wrap:anywhere}
.ui-pick.on{background:var(--u-crate)}
.ui-timer{font-variant-numeric:tabular-nums}

/* toast */
.ui-toasts{position:fixed;z-index:40;left:50%;top:calc(max(var(--u-hud) + var(--u-notice-h), var(--u-tut-clear, 0px), var(--u-tut-bottom, 0px)) + 8px);transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;width:min(92vw,420px);pointer-events:none}
.ui-open .ui-toasts{left:calc((100vw - var(--u-panel-w)) / 2)}
.ui-toast{padding:8px 16px;background:var(--u-paper);border:var(--u-line);border-radius:14px;font-weight:600;font-size:14px;text-align:center;overflow-wrap:anywhere;animation:ui-pop .2s ease-out}
.ui-toast-error{background:#FFE1E1}
.ui-toast-level{background:var(--u-crate);font-family:Mali,Anuphan,sans-serif;font-size:20px;padding:12px 22px}
.ui-notices{position:fixed;z-index:35;left:50%;top:calc(var(--u-hud) + env(safe-area-inset-top));transform:translateX(-50%);width:min(92vw,520px);display:flex;flex-direction:column;gap:6px}
.ui-notice{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:8px 12px;background:#FFE9B0;border:var(--u-line);border-radius:14px;font-size:14px;overflow-wrap:anywhere}
@keyframes ui-pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* ปุ่ม dev (?dev=1) */
.dev-bar{position:fixed;z-index:25;left:calc(8px + env(safe-area-inset-left));bottom:calc(8px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:6px;pointer-events:auto}

/* จอแคบ = bottom sheet */
@media (max-width:767px){
  
  .ui-hud{gap:6px}
  .ui-xp{min-width:60px}
  .ui-chip{padding:4px 10px;gap:6px}
  .ui-navs{margin-left:0;width:100%;justify-content:space-between}
  .ui-nav{flex:1;justify-content:center;flex-wrap:wrap;padding:4px 6px;gap:0 4px;line-height:1.15}
  .ui-nav .ui-sub{flex:0 0 100%;text-align:center;font-size:11px}
  .ui-help-btn{margin-left:auto}
  .ui-snds{gap:4px}
  .ui-snd{width:44px}
  .ui-panel{left:0;right:0;top:auto;bottom:0;width:auto;max-height:60dvh;border-left:0;border-radius:16px 16px 0 0;padding-left:env(safe-area-inset-left)}
  .ui-backdrop.on{display:block;position:fixed;inset:0;z-index:25;background:rgba(59,42,74,.2)}
  .ui-open .ui-toasts{left:50%}
  .ui-notices{top:calc(var(--u-hud) + env(safe-area-inset-top))}
  .ui-open .dev-bar{display:none}
}
@media (prefers-reduced-motion:reduce){.ui-toast{animation:none}.ui-bar i{transition:none}}

/* ---------- บทแนะนำ (กล่องผู้พูด + วงไฮไลต์ + ลูกศร + วิธีเล่น) ---------- */
.ui-tut{position:fixed;z-index:32;box-sizing:border-box;padding:8px 12px 10px;background:var(--u-paper);border:var(--u-line);border-radius:14px;box-shadow:0 3px 0 rgba(59,42,74,.25)}
.ui-tut-head{display:flex;align-items:center;gap:8px;min-width:0}
.ui-tut-step{font-family:Mali,Anuphan,sans-serif;font-size:15px;color:var(--u-ink)}
.ui-tut-who{flex:1;min-width:0;font-size:12px;color:#5b4d66}
.ui-tut-skip{min-width:44px;min-height:44px;margin:-6px -6px -6px 0;padding:4px 12px;background:var(--u-tarp2);border:var(--u-line);border-radius:12px;font-family:Mali,Anuphan,sans-serif;font-weight:700;font-size:14px;cursor:pointer}
.ui-tut-text{margin:2px 0 0;font-size:14px;line-height:1.35}
#ui > .ui-tut-ring,#ui > .ui-tut-arrow{pointer-events:none}
.ui-tut-ring{position:fixed;z-index:31;box-sizing:border-box;border:3px solid var(--u-crate);border-radius:12px;box-shadow:0 0 0 2px var(--u-ink),0 0 14px 2px rgba(246,195,67,.9);animation:ui-tut-blink 1s ease-in-out infinite}
.ui-tut-arrow{position:fixed;z-index:33;font-size:26px;line-height:1;color:var(--u-crate);text-shadow:0 0 0 var(--u-ink),2px 0 0 var(--u-ink),-2px 0 0 var(--u-ink),0 2px 0 var(--u-ink),0 -2px 0 var(--u-ink)}
@keyframes ui-tut-blink{0%,100%{opacity:1}50%{opacity:.6}}
.ui-help-btn{min-width:44px;min-height:44px;padding:2px 10px;background:var(--u-paper);border:var(--u-line);border-radius:12px;font-family:Mali,Anuphan,sans-serif;font-weight:700;font-size:20px;cursor:pointer}
.ui-help{position:fixed;z-index:45;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:min(92vw,420px);max-height:80dvh;overflow:auto;background:var(--u-paper);border:var(--u-line);border-radius:16px;padding:0 0 14px}
.ui-help-x{min-width:44px;min-height:44px}
.ui-help-list{margin:8px 16px 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.4}
.ui-help-tip{margin:10px 16px 0;padding:8px 10px;background:var(--u-tarp2);border-radius:10px;font-size:14px}
@media (prefers-reduced-motion:reduce){.ui-tut-ring{animation:none}}