/* 新手引導：旁白喵(紙娃娃2D live) + 對話泡 + 聚光環。非阻擋式：只有泡泡/按鈕吃點擊，遊戲隨時可操作。 */
#obLayer { position:fixed; inset:0; z-index:300; pointer-events:none; display:none; font-family:inherit; }
#obLayer.on { display:block; }

/* 聚光環：套在被指的 UI 元素上（純視覺，不擋點） */
/* 聚光只用「發光圈」，不再壓暗背幕→不會把別的按鈕壓暗/切出缺口，其餘畫面全亮可點 */
#obSpot { position:fixed; border:3px solid #ffd24a; border-radius:14px; box-shadow:0 0 16px 4px #ffd24acc, inset 0 0 10px #ffd24a88;
  pointer-events:none; transition:all .3s cubic-bezier(.4,1.3,.5,1); display:none; z-index:301; }
#obLayer.spotting #obSpot { display:block; }
@keyframes obPulse { 0%,100%{box-shadow:0 0 12px 3px #ffd24acc, inset 0 0 8px #ffd24a88} 50%{box-shadow:0 0 26px 7px #ffd24a, inset 0 0 12px #ffd24a} }
#obSpot { animation:obPulse 1.4s ease-in-out infinite; }

/* 旁白喵 + 對話框：置底但抬到底部導覽之上(不蓋 spotlight)；喵在對話框右側後方、腳被蓋一點、放大 2x */
#obDock { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(68px + env(safe-area-inset-bottom));
  width:100%; max-width:600px; z-index:302; pointer-events:none; padding:0 10px; }
#obCat { position:absolute; right:0; bottom:0; width:172px; height:230px; z-index:1; pointer-events:none;
  filter:drop-shadow(0 8px 12px #000b); }
#obCat .fig { position:absolute; inset:0; }
#obCat .fig img { position:absolute; -webkit-user-drag:none; }
/* 對話框本體 pointer-events:none → 觸控穿透到底下遊戲按鈕(播放/結算)，不再攔截；只有「下一步/跳過」可點 */
#obBubble { pointer-events:none; position:relative; z-index:2; margin:0 132px 0 0; background:linear-gradient(180deg,#2c2350,#1a1430);
  border:2px solid #ffd24a; border-radius:16px; padding:12px 14px 40px; box-shadow:0 10px 30px #000a;
  color:#f0ead8; font-size:14px; line-height:1.6; }
#obBubble #obNext { pointer-events:auto; }
#obBubble .obname { color:#ffd24a; font-weight:800; font-size:12px; margin-bottom:3px; }
/* 迷你圖解：相生鏈 / 三環相剋 */
#obBubble .obart { margin:2px 0 6px; padding:7px 8px; background:#00000033; border:1px solid #473d6e; border-radius:10px; }
#obBubble .obchips { display:flex; flex-wrap:wrap; align-items:center; gap:3px; font-size:12px; font-weight:800; }
#obBubble .obchips.col { flex-direction:column; align-items:flex-start; gap:4px; }
#obBubble .obchips i { display:inline-flex; align-items:center; padding:1px 6px; border-radius:8px; font-style:normal;
  color:#fff; background:var(--c,#556); box-shadow:inset 0 0 0 1px #fff3; }
#obBubble .obcap { margin-top:5px; font-size:11px; color:#b9b0e0; }
#obBubble .obtxt b { color:#ffe38a; }
#obNext { position:absolute; right:10px; bottom:8px; background:#3a2f5a; color:#fff; border:1px solid #ffd24a;
  border-radius:9px; padding:5px 14px; font-size:12px; font-weight:700; cursor:pointer; }
#obNext.wait { background:#241d3e; color:#9a90c0; border-color:#473d6e; }
#obSkip { position:fixed; top:52px; right:10px; z-index:303; pointer-events:auto; background:#1a1430ee; color:#ffd7d7;
  border:1px solid #a05; border-radius:8px; padding:6px 12px; font-size:12px; cursor:pointer; box-shadow:0 2px 8px #0008; }
#obBubble #obPass { pointer-events:auto; position:absolute; right:96px; bottom:9px; background:none; border:none;
  color:#b9b0e0; font-size:11px; text-decoration:underline; cursor:pointer; padding:4px; }
#obBubble .obprog { position:absolute; left:12px; bottom:10px; font-size:10px; color:#8a80b0; }
@media (max-width:420px){ #obCat{width:140px;height:187px} #obBubble{font-size:13px;padding:10px 12px 38px;margin-right:104px} }
/* 結算/抽卡窗顯示時：dock 移到頂部，避免擋到置中彈窗的按鈕（尤其橫式） */
#obLayer.ov-up #obDock { bottom:auto; top:calc(6px + env(safe-area-inset-top)); }
/* 橫式/矮螢幕：喵縮小、dock 更貼底，少佔垂直空間 */
@media (max-height:520px){ #obCat{width:104px;height:139px} #obBubble{padding:9px 12px 34px;margin-right:78px} #obDock{bottom:calc(50px + env(safe-area-inset-bottom));max-width:520px} }