/* ───────── first-match tutorial (tutorial.js) ───────── */
.tut-layer { position: fixed; inset: 0; z-index: 84; pointer-events: none; }
.tut-block { position: fixed; pointer-events: auto; background: transparent; touch-action: pan-y; }
.tut-block[hidden], .tut-hole[hidden], .tut-hand[hidden], .tut-dim[hidden] { display: none; }
.tut-dim { position: fixed; inset: 0; background: #020a10a6; animation: tut-fade .3s ease-out; }
.tut-hole { position: fixed; border-radius: 16px; pointer-events: none; box-shadow: 0 0 0 200vmax #020a10a6, 0 0 0 3px var(--gold), 0 0 24px 4px #ffc53399; transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; animation: tut-fade .3s ease-out; }
.tut-hole.info { box-shadow: 0 0 0 200vmax #020a10a6, 0 0 0 2px #ffffffaa, 0 0 22px 2px #4fd8ff66; }
.tut-ring { position: absolute; inset: -4px; border-radius: inherit; border: 3px solid var(--gold); animation: tut-ring 1.3s ease-out infinite; }
.tut-hole.info .tut-ring { display: none; }

/* Pointing hand: the fingertip sits on (left, top). */
.tut-hand { position: fixed; width: 56px; height: 63px; margin: -3.5px 0 0 -10.5px; transform-origin: 10.5px 3.5px; transform: rotate(-12deg); pointer-events: none; filter: drop-shadow(0 6px 8px #000a); }
.tut-hand.flip { transform: rotate(168deg); }
.tut-hand svg { display: block; width: 100%; height: 100%; transform-origin: 10.5px 3.5px; animation: tut-tap 1.1s cubic-bezier(.4, 0, .3, 1) infinite; }
.tut-ripple { position: absolute; left: 10.5px; top: 3.5px; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid #fff; opacity: 0; animation: tut-ripple 1.1s ease-out infinite; }

/* Coach: the guardian with a speech bubble. */
.tut-coach { position: fixed; left: 12px; top: 12px; width: min(440px, calc(100vw - 20px)); display: flex; align-items: flex-end; gap: 4px; pointer-events: auto; transition: left .3s cubic-bezier(.2, .9, .3, 1), top .3s cubic-bezier(.2, .9, .3, 1), opacity .2s; }
.tut-coach.pop .tut-speech { animation: tut-pop .32s cubic-bezier(.2, 1.5, .4, 1); }
.tut-coach.away { opacity: 0; pointer-events: none; }
.tut-persona { flex: none; width: 82px; aspect-ratio: 740 / 731; display: grid; align-items: end; margin: 0 -4px -8px -6px; position: relative; z-index: 1; }
.tut-speech { position: relative; flex: 1; min-width: 0; padding: 9px 12px 10px; border-radius: 18px; background: #fffdf5; color: #10202a; box-shadow: 0 0 0 3px var(--gold), 0 12px 28px #000b; }
.tut-speech::before { content: ''; position: absolute; left: -9px; bottom: 18px; width: 16px; height: 16px; background: #fffdf5; transform: rotate(45deg); box-shadow: -3px 3px 0 0 var(--gold); border-radius: 0 0 0 4px; }
.tut-name { display: block; font: 800 10px/1 var(--body); letter-spacing: .18em; color: #c27a00; }
.tut-text { margin: 4px 0 6px; font: 700 15.5px/1.3 var(--body); color: #10202a; }
.tut-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tut-skip { flex: none; min-height: 36px; padding: 6px 2px; border: 0; background: none; color: #4b6772; font: 700 12px/1 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tut-next { min-height: 40px; padding: 6px 20px; font-size: 16px; }
.tut-coach:not([data-kind="info"]) .tut-next { display: none; }
.tut-end-row { display: none; gap: 8px; margin-top: 4px; }
.tut-end-row .btn { flex: 1; min-height: 46px; padding: 8px 10px; font-size: 15px; }
.tut-progress { display: block; height: 4px; margin-top: 7px; border-radius: 4px; background: #10202a1a; overflow: hidden; }
.tut-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--gold2)); transition: width .4s ease; }
.tut-coach.silent .tut-text, .tut-coach.silent .tut-name { display: none; }
.tut-coach.silent .tut-speech { padding-top: 4px; }
/* Finale */
.tut-coach.finale { transition: opacity .2s; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(400px, calc(100vw - 24px)); flex-direction: column; align-items: center; gap: 0; }
.tut-coach.finale .tut-persona { width: 150px; margin: 0 0 -18px; }
.tut-coach.finale .tut-speech { width: 100%; text-align: center; padding: 14px 16px 14px; }
.tut-coach.finale .tut-speech::before { left: 50%; top: -9px; bottom: auto; margin-left: -8px; box-shadow: -3px -3px 0 0 var(--gold); border-radius: 4px 0 0 0; }
.tut-coach.finale .tut-text { font-size: 18px; }
.tut-coach.finale .tut-row, .tut-coach.finale .tut-progress { display: none; }
.tut-coach.finale .tut-end-row { display: flex; }

/* "Tutorial complete" badge toast */
.tut-toast { position: fixed; left: 50%; top: calc(max(12px, env(safe-area-inset-top)) + 6px); z-index: 101; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: linear-gradient(180deg, #1c5a74, #0c2b38); box-shadow: 0 0 0 2px var(--gold), 0 10px 30px #000a; color: #fff; white-space: nowrap; animation: tut-drop .5s cubic-bezier(.2, 1.5, .4, 1); }
.tut-toast.out { opacity: 0; transform: translate(-50%, -20px); transition: opacity .4s, transform .4s; }
.tut-toast b { font: 700 15px/1 var(--display); }
.tut-toast em { font: 800 13px/1 var(--body); font-style: normal; color: var(--gold); }
.tut-badge { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff2b8, var(--gold) 55%, var(--gold2)); color: #3a1d00; box-shadow: inset 0 -2px 0 #0003; }
.tut-badge .ico { width: 20px; height: 20px; }

/* First-launch offer */
dialog#modal.tut-offer-modal { overflow: visible; }
.tut-offer { display: grid; justify-items: center; text-align: center; padding-top: 0; }
.tut-offer-persona { width: 140px; aspect-ratio: 740 / 731; margin: -64px 0 -6px; }
.tut-offer h2 { margin: 0 0 4px; font: 700 24px/1.1 var(--display); color: var(--gold); }
.tut-offer p { margin: 0 0 16px; color: #d2e2e6; font-size: 15px; }
.tut-offer .confirm-row { width: 100%; }

@keyframes tut-fade { from { opacity: 0; } }
@keyframes tut-ring { 0% { transform: scale(1); opacity: .95; } 100% { transform: scale(1.12, 1.25); opacity: 0; } }
@keyframes tut-tap { 0%, 100% { transform: translate(14px, 18px); } 45% { transform: translate(0, 0) scale(.94); } 60% { transform: translate(0, 0) scale(.94); } }
@keyframes tut-ripple { 0%, 40% { transform: scale(.3); opacity: 0; } 50% { opacity: .9; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes tut-pop { from { transform: scale(.85); opacity: 0; } }
@keyframes tut-drop { from { transform: translate(-50%, -30px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tut-hole, .tut-coach { transition: none; }
  .tut-ring, .tut-ripple { animation: none; opacity: 0; }
  .tut-hand svg { animation: none; transform: none; }
  .tut-coach.pop .tut-speech, .tut-dim, .tut-hole, .tut-toast { animation: none; }
}
@media (max-height: 680px) {
  .tut-persona { width: 68px; }
  .tut-text { font-size: 14.5px; margin-bottom: 4px; }
  .tut-next { min-height: 36px; }
  .tut-coach.finale .tut-persona { width: 116px; }
}
.rules-tutorial { width: 100%; margin: 2px 0 14px; justify-content: flex-start; text-align: left; }
.rules-tutorial .ico { width: 26px; height: 26px; flex: none; }