/* tutorial.css — บทสอนเล่น: จอมืด + สปอตไลต์ + บับเบิลสาวน้อยหางม้า */
.tut-ui{position:fixed;inset:0;z-index:9000;pointer-events:none}
.tut-mask{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .25s}
.tut-ui.dim .tut-mask{opacity:1}
.tut-dim{fill:rgba(8,6,20,.72)}
.tut-rings i{position:absolute;border-radius:12px;box-shadow:0 0 0 3px #ffd36b,0 0 18px 4px #ffd36baa;animation:tutPulse 1.2s ease-in-out infinite;pointer-events:none}
@keyframes tutPulse{50%{box-shadow:0 0 0 3px #fff3c4,0 0 28px 8px #ffd36bcc}}
@media (prefers-reduced-motion:reduce){.tut-rings i{animation:none}}
.tut-coach{position:absolute;left:50%;bottom:2vh;transform:translateX(-50%);display:flex;align-items:flex-end;gap:1vh;width:min(94vw,720px);pointer-events:auto}
.tut-coach.up{bottom:auto;top:2vh}
.tut-av{width:max(64px,16vh);height:max(64px,16vh);object-fit:cover;object-position:center top;border-radius:50%;background:linear-gradient(#ffe4ef,#ffc2d8);border:3px solid #fff;box-shadow:0 .6vh 1.6vh #0006;flex:none}
.tut-bub{position:relative;flex:1;min-width:0;background:#fffaf2;color:#3b2a4a;border-radius:2vh;padding:1.4vh 1.8vh;box-shadow:0 .8vh 2.4vh #0007;border:3px solid #ffd36b;font:600 max(14px,2.6vh)/1.5 Sarabun,sans-serif}
.tut-bub::before{content:"";position:absolute;left:-12px;bottom:2.4vh;border:8px solid transparent;border-right:10px solid #ffd36b}
.tut-txt b{color:#c2185b}.tut-txt small{display:block;color:#7a5c8a;font-size:.85em;margin-top:.3vh}
.tut-bt{display:flex;justify-content:flex-end;align-items:center;gap:1vh;margin-top:.6vh}.tut-bt:empty{display:none}.tut-bt small{color:#9a86a8;margin-right:auto}
.tut-next{border:0;border-radius:99px;padding:.8vh 2.2vh;font:800 max(13px,2.4vh) Sarabun,sans-serif;background:linear-gradient(#ff8ab3,#e0457f);color:#fff;box-shadow:0 .4vh 0 #a3245a;cursor:pointer}
.tut-skip{position:absolute;top:1.6vh;right:1.6vh;pointer-events:auto;border:0;border-radius:99px;padding:.7vh 1.8vh;font:700 max(12px,2.1vh) Sarabun,sans-serif;background:#ffffffd9;color:#5a3b6e;box-shadow:0 .3vh 1vh #0005;cursor:pointer}
/* คำแนะนำสั้น (ไม่บังคับ ไม่มีจอมืด) */
.tut-hint{position:fixed;z-index:8500;left:50%;top:9vh;transform:translateX(-50%);display:flex;align-items:flex-start;gap:1vh;width:min(92vw,620px);pointer-events:auto;animation:tutIn .25s ease-out}
.tut-hint .tut-av{width:max(48px,11vh);height:max(48px,11vh)}
.tut-hint .tut-bub{font-size:max(13px,2.3vh);padding:1vh 1.4vh}
.tut-hint .tut-bub::before{bottom:auto;top:2vh}
.tut-hint.tip{top:auto;bottom:3vh}
@keyframes tutIn{from{opacity:0;transform:translate(-50%,-8px)}}
.tut-open{margin-left:1vh;flex:none;border:0;border-radius:99px;padding:.6vh 1.6vh;font:800 max(12px,2vh) Sarabun,sans-serif;background:linear-gradient(#ff8ab3,#e0457f);color:#fff;box-shadow:0 .3vh 0 #a3245a;cursor:pointer;white-space:nowrap}
.gcur-w:has(.tut-open){align-items:center}
.gcur-w:has(.tut-open) .gcur{flex:1}
@media (max-height:500px) and (orientation:landscape){
  .tut-av{width:56px;height:56px}.tut-bub{font-size:max(12px,3.4vh);padding:1vh 1.4vh}.tut-next{font-size:max(12px,3.2vh);padding:.6vh 1.8vh}
  .tut-coach{width:min(88vw,620px)}.tut-hint{top:12vh}.tut-hint .tut-av{width:44px;height:44px}.tut-hint .tut-bub{font-size:max(11px,3vh)}
}