/* Professor Lumi guide overlay (shared by lobby and battle). */
.guide { position: fixed; inset: 0; z-index: 60; font-family: 'Gilroy', 'M PLUS 1p', 'Segoe UI', system-ui, sans-serif; }
.guide.hidden { display: none; }
.guide.passthrough { pointer-events: none; }
.guide.passthrough .g-bubble { pointer-events: auto; }
.g-spot { position: fixed; border-radius: 22px; pointer-events: none; transition: all 0.35s cubic-bezier(.2,.9,.3,1);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.95), 0 0 30px 6px rgba(41, 224, 208, 0.7), 0 0 0 200vmax rgba(15, 20, 40, 0.62); }
.guide.tip .g-spot { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.95), 0 0 30px 8px rgba(41, 224, 208, 0.8); animation: spotPulse 1.3s ease-in-out infinite; }
.guide.tour:not(:has(.g-spot[style*="opacity:1"])) { background: rgba(15, 20, 40, 0.62); }
/* Landscape frame: Lumi stands in a bottom corner of the 16:9 frame (--fw/--fh from landscape.css; viewport fallback),
   her bubble beside her. JS adds .bubble-right when the target is on the left, .bubble-top when it is low. */
.guide { --gfw: var(--fw, calc(var(--vw1) * 100)); --gfh: var(--fh, calc(var(--vh1) * 100)); --gx: max(8px, calc(calc(var(--vw1) * 50) - var(--gfw) / 2 + 8px)); --gy: max(0px, calc(calc(var(--vh1) * 50) - var(--gfh) / 2)); --gnw: calc(var(--gfh) * 0.27); }
.g-npc { position: fixed; left: var(--gx); bottom: var(--gy); width: var(--gnw); pointer-events: none; transition: bottom 0.3s; }
.g-npc img { width: 100%; display: block; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.35)); }
.g-npc.pop { animation: npcIn 0.45s cubic-bezier(.2,1.3,.4,1); }
.g-bubble { position: fixed; left: calc(var(--gx) + var(--gnw) * 0.78); width: min(calc(var(--gfh) * 0.92), calc(var(--gfw) - var(--gnw) - 32px)); bottom: calc(var(--gy) + var(--gfh) * 0.17);
  padding: 14px 16px 12px; border-radius: 20px 20px 20px 6px; background: #fff; color: #23314d; box-shadow: 0 18px 40px rgba(10, 16, 40, 0.35); }
.g-bubble.pop { animation: bubbleIn 0.35s cubic-bezier(.2,1.3,.4,1); }
.g-bubble > b { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #7c5cff; margin-bottom: 4px; }
.g-bubble p { margin: 0 0 10px; font-size: clamp(13px, calc(var(--gfh) * 0.024), 18px); line-height: 1.4; font-weight: 500; }
.g-actions { display: flex; justify-content: flex-end; gap: 8px; }
.g-actions button { font: inherit; border: 0; cursor: pointer; border-radius: 99px; padding: 8px 16px; font-weight: 800; font-size: 13px; min-height: 40px; }
.g-skip { background: rgba(35, 49, 77, 0.07); color: #5b6785; }
.g-next { background: linear-gradient(180deg, #3d7bff, #2a5ef0); color: #fff; box-shadow: 0 6px 14px rgba(47, 107, 255, 0.35); }
/* Target on the left half: Lumi moves to the right corner, bubble on her left. */
.guide.bubble-right .g-npc { left: auto; right: var(--gx); transform: scaleX(-1); }
.guide.bubble-right .g-bubble { left: auto; right: calc(var(--gx) + var(--gnw) * 0.78); border-radius: 20px 20px 6px 20px; }
/* Target sits low: lift Lumi and her bubble to the top of the frame. */
.guide.bubble-top .g-npc { bottom: auto; top: var(--gy); }
.guide.bubble-top .g-bubble { bottom: auto; top: calc(var(--gy) + var(--gfh) * 0.1); border-radius: 6px 20px 20px 20px; }
.guide.bubble-top.bubble-right .g-bubble { border-radius: 20px 6px 20px 20px; }
.guide.tip { --gnw: calc(var(--gfh) * 0.2); }
.guide.tip .g-bubble { bottom: calc(var(--gy) + var(--gfh) * 0.1); }
.guide.tip.bubble-top .g-bubble { top: calc(var(--gy) + var(--gfh) * 0.07); }
@keyframes npcIn { from { transform: translateY(40%); opacity: 0; } }
@keyframes bubbleIn { from { transform: scale(0.85) translateY(10px); opacity: 0; } }
@keyframes spotPulse { 50% { box-shadow: 0 0 0 4px #fff, 0 0 44px 14px rgba(41, 224, 208, 0.9); } }
.g-bubble p b { color: #2f6bff; font-weight: 800; }