/* Tutorial battle (js/tutorial-battle.js) + tutorial dialogs (js/tutorial.js). Shared by battle.html and index.html.
   No raw vw / vh: sizes come from the 16:9 frame (--fw / --fh / --u) or --vw1 / --vh1 (rotated-phone safe). */
.tut-root { display: contents; font-family: 'Gilroy', 'M PLUS 1p', 'Segoe UI', system-ui, sans-serif; }

/* dim layer with spotlight holes (SVG mask) — below the drag ghost (30) and above the action sheet (25) */
.tut-dim { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 26; display: none; pointer-events: none; }
.tut-shade { fill: rgba(12, 18, 40, 0.38); transition: fill 0.25s; }
.tut-root.info .tut-dim, .tut-root.do .tut-dim { display: block; }
.tut-root.info .tut-dim { pointer-events: auto; }           /* explanations: the board waits for "Next" */
.tut-root.info .tut-shade { fill: rgba(12, 18, 40, 0.58); }
.tut-root.has-card .tut-shade { fill: rgba(12, 18, 40, 0.74); }

.tut-rings i { position: fixed; z-index: 27; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 0 22px 6px rgba(41, 224, 208, 0.75); animation: tutPulse 1.3s ease-in-out infinite; }
.tut-root.idle .tut-rings, .tut-root.watch .tut-rings, .tut-root.over .tut-rings, .tut-root.has-card .tut-rings { display: none; }

/* zoomed card for the "how to read a card" lessons */
.tut-card { position: fixed; z-index: 47; display: none; border-radius: 4.6% / 3.3%; overflow: hidden; pointer-events: none;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); animation: tutCardIn 0.35s cubic-bezier(.2, 1.2, .4, 1); }
.tut-root.has-card .tut-card { display: block; }
.tut-card img { display: block; width: 100%; height: 100%; }
.tut-hot { position: absolute; border-radius: 10px; border: 3px solid #29e0d0; box-shadow: 0 0 0 2000px rgba(10, 14, 32, 0.45), 0 0 16px 4px rgba(41, 224, 208, 0.8);
  transition: left 0.3s, top 0.3s, width 0.3s, height 0.3s; }

/* Lumi + speech bubble */
.tut-coach { position: fixed; z-index: 48; display: flex; align-items: flex-end; gap: calc(var(--u) * 0.8); pointer-events: none; }
.tut-coach.flip { flex-direction: row-reverse; }
.tut-root.idle .tut-coach, .tut-root.over .tut-coach, .tut-root.paused .tut-coach,
.tut-root.paused .tut-dim, .tut-root.paused .tut-rings, .tut-root.paused .tut-card, .tut-root.paused .tut-skip, .tut-root.over .tut-skip { display: none; }
.tut-npc { width: clamp(64px, calc(var(--fh) * 0.2), 190px); flex: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35)); }
.tut-coach.flip .tut-npc { transform: scaleX(-1); }
.tut-coach.compact .tut-npc { display: none; }   /* no clear spot (small screens): bubble only */
.tut-coach.compact .tut-bubble { margin-bottom: 0; border-radius: 18px; }
.tut-bubble { pointer-events: auto; width: clamp(220px, calc(var(--fw) * 0.34), 440px); box-sizing: border-box; padding: clamp(9px, calc(var(--u) * 2), 16px) clamp(11px, calc(var(--u) * 2.2), 18px);
  margin-bottom: calc(var(--fh) * 0.06); border-radius: 18px 18px 18px 6px; background: #fff; color: #23314d; box-shadow: 0 16px 36px rgba(10, 16, 40, 0.38); }
.tut-coach.flip .tut-bubble { border-radius: 18px 18px 6px 18px; }
.tut-root.watch .tut-bubble { width: clamp(200px, calc(var(--fw) * 0.27), 340px); }
.tut-root.watch .tut-npc { width: clamp(52px, calc(var(--fh) * 0.15), 140px); }
.tut-who { display: flex; justify-content: space-between; align-items: center; font-size: clamp(10px, calc(var(--u) * 1.9), 12px); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #7c5cff; margin-bottom: 3px; }
.tut-count { color: #9aa3b8; letter-spacing: 0.02em; font-weight: 700; }
.tut-text { margin: 0 0 7px; font-size: clamp(12px, calc(var(--fh) * 0.026), 17px); line-height: 1.38; font-weight: 500; }
.tut-text b, .tut-more b, .tut-over b { color: #2f6bff; font-weight: 800; }
.tut-more { margin: -2px 0 7px; font-size: clamp(11px, calc(var(--fh) * 0.023), 15px); line-height: 1.38; color: #44506c; }
.tut-tip { display: flex; gap: 7px; align-items: baseline; margin: 0 0 7px; padding: 6px 9px; border-radius: 10px; border-left: 3px solid #f5b70a; background: #fff6d8;
  font-size: clamp(11px, calc(var(--fh) * 0.022), 14px); line-height: 1.35; color: #5b4a12; }
.tut-tip b { flex: none; color: #b7791f; font-weight: 800; }
.tut-root.watch .tut-tip { margin-bottom: 0; }
.tut-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.tut-root.do .tut-actions, .tut-root.watch .tut-actions { justify-content: flex-start; }
.tut-actions:not(:has(button:not(.hidden))) { display: none; }
.hidden.tut-btn, .tut-more.hidden { display: none; }

.tut-btn { font: inherit; border: 0; cursor: pointer; border-radius: 99px; padding: 7px 16px; font-weight: 800; font-size: clamp(12px, calc(var(--u) * 2.3), 14px); min-height: 36px; }
.tut-btn.blue { background: linear-gradient(180deg, #3d7bff, #2a5ef0); color: #fff; box-shadow: 0 6px 14px rgba(47, 107, 255, 0.35); }
.tut-btn.red { background: linear-gradient(180deg, #ff6b6b, #e5484d); color: #fff; }
.tut-btn.soft { background: rgba(35, 49, 77, 0.08); color: #4b5675; }
.tut-btn.link { background: none; color: #2f6bff; padding: 7px 6px; margin-right: auto; }
.tut-btn.big { min-height: 46px; padding: 10px 26px; font-size: 15px; }
.tut-btn:focus-visible, .tut-skip:focus-visible { outline: 3px solid #29e0d0; outline-offset: 2px; }

/* always-visible Skip (top-right corner of the 16:9 frame) */
.tut-skip { position: fixed; z-index: 49; top: calc((var(--vh1) * 100 - var(--fh)) / 2 + var(--u) * 2.2); right: calc((var(--vw1) * 100 - var(--fw)) / 2 + var(--u) * 2.2);
  font: inherit; font-weight: 800; font-size: clamp(11px, calc(var(--u) * 2.3), 14px); min-height: 34px; padding: 6px 14px; border-radius: 99px; cursor: pointer;
  color: #fff; background: rgba(16, 24, 52, 0.72); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); backdrop-filter: blur(4px); }
.tut-skip:hover { background: rgba(16, 24, 52, 0.88); }

/* two-button dialog */
.tut-ask { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(12, 18, 40, 0.55); backdrop-filter: blur(4px); font-family: 'Gilroy', 'M PLUS 1p', system-ui, sans-serif; }
.tut-ask-card { position: relative; width: min(400px, calc(var(--vw1) * 100 - 32px)); box-sizing: border-box; padding: 18px 20px 16px 20px; padding-left: clamp(96px, 26%, 118px); border-radius: 20px; background: #fff; color: #23314d;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); animation: tutCardIn 0.3s cubic-bezier(.2, 1.2, .4, 1); }
.tut-ask-card img { position: absolute; left: 6px; bottom: 0; width: clamp(86px, 24%, 108px); }
.tut-ask-card > b { display: block; font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.tut-ask-card p { margin: 0 0 14px; font-size: 14px; line-height: 1.4; color: #4b5675; }
.tut-ask-act { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* end screen */
.tut-over { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 12px; background: rgba(10, 16, 40, 0.6); backdrop-filter: blur(5px); animation: tutFade 0.4s; font-family: 'Gilroy', 'M PLUS 1p', system-ui, sans-serif; }
.tut-over-card { display: flex; align-items: flex-end; gap: calc(var(--u) * 2); max-width: min(calc(var(--fw) * 0.86), 820px); max-height: calc(var(--fh) * 0.94); }
.tut-over-npc { width: calc(var(--fh) * 0.36); max-width: 260px; flex: none; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.4)); }
.tut-over-main { flex: 1; min-width: 0; overflow: auto; max-height: calc(var(--fh) * 0.92); box-sizing: border-box; padding: clamp(12px, calc(var(--u) * 3.4), 26px); border-radius: 22px; background: #fff; color: #23314d; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.tut-over-main small { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #7c5cff; }
.tut-over-title { display: block; font-size: clamp(24px, calc(var(--u) * 6.5), 44px); line-height: 1.05; margin: 2px 0 6px; color: #23314d !important; }
.tut-over-main p { margin: 0 0 8px; font-size: clamp(12px, calc(var(--fh) * 0.026), 16px); line-height: 1.4; }
.tut-learned { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; margin: 0 0 9px; padding: 0; }
.tut-learned li { padding: 3px 9px; border-radius: 99px; background: #eaf1ff; color: #2a4fb8; font-size: clamp(10px, calc(var(--u) * 2), 12px); font-weight: 700; }
.tut-learned li::before { content: '✓ '; }
.tut-reward { margin: 0 0 10px; font-size: clamp(12px, calc(var(--fh) * 0.026), 16px); }

.pop.tut-bubble { animation: tutBubbleIn 0.32s cubic-bezier(.2, 1.3, .4, 1); }
.wiggle { animation: tutWiggle 0.4s; }
@keyframes tutPulse { 50% { box-shadow: 0 0 0 4px #fff, 0 0 34px 12px rgba(41, 224, 208, 0.9); } }
@keyframes tutCardIn { from { transform: scale(0.88); opacity: 0; } }
@keyframes tutBubbleIn { from { transform: scale(0.9) translateY(8px); opacity: 0; } }
@keyframes tutWiggle { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes tutFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tut-rings i, .tut-card, .pop.tut-bubble, .wiggle, .tut-over, .tut-ask-card { animation: none !important; }
  .tut-hot, .tut-shade { transition: none; }
}