/* Hướng dẫn cách chơi từng bước (public/js/tutorial.js). */
.tut { --card-h: 236px; position: fixed; inset: 0; z-index: 110; overflow: hidden; opacity: 0; transition: opacity 0.4s ease; font-family: var(--font-ui, Nunito, sans-serif); color: var(--ink, #2c1b10); touch-action: none; user-select: none; -webkit-user-select: none; }
.tut.in { opacity: 1; }
.tut-scene { position: absolute; inset: 0; }
.tut-bg { position: absolute; inset: -2px; background: url('/assets/bg/bg_beach.webp') center / cover no-repeat; transition: background-position 0.1s linear; }
.tut.travel .tut-bg { background-size: auto 100%; background-repeat: repeat-x; background-position: calc(50% - var(--walk, 0px)) center; transition: none; }
.tut-fore { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 40, 66, 0.25) 0%, transparent 22%, transparent 55%, rgba(6, 30, 50, 0.55) 100%); pointer-events: none; }
.tut-actor { position: absolute; bottom: calc(var(--card-h) - 14px); height: min(40vh, 330px); width: auto; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.25)); transform-origin: 50% 100%; animation: tutbreath 3.2s ease-in-out infinite; transition: filter 0.2s; }
.tut-actor.lisa { left: 6%; }
.tut-actor.leo { right: 6%; animation-delay: -1.4s; }
.tut-actor.target { filter: drop-shadow(0 0 0 #ffd23f) drop-shadow(0 0 14px rgba(255, 210, 63, 0.95)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.25)); animation: tutbreath 3.2s ease-in-out infinite, tutglow 1.2s ease-in-out infinite; cursor: pointer; }
.tut-actor.target.hot { filter: drop-shadow(0 0 22px #ffd23f) drop-shadow(0 0 30px rgba(255, 180, 0, 0.9)); transform: scale(1.04); }
.tut.walking .tut-actor { animation: tutwalk 0.42s ease-in-out infinite; }
.tut.walking .tut-actor.leo { animation-delay: -0.2s; }
@keyframes tutbreath { 50% { transform: scaleY(1.012) translateY(-1px); } }
@keyframes tutwalk { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
@keyframes tutglow { 50% { opacity: 0.85; } }
.tut-layer { position: absolute; inset: 0; }
/* thanh trên */
.tut-top { position: absolute; left: 0; right: 0; top: 0; padding: max(12px, env(safe-area-inset-top)) 14px 0; display: flex; align-items: center; gap: 12px; }
.tut-dots { flex: 1; display: flex; gap: 5px; }
.tut-dots i { flex: 1; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.35); transition: background 0.3s; }
.tut-dots i.on { background: #ffd23f; box-shadow: 0 0 8px rgba(255, 210, 63, 0.6); }
.tut-skip { flex: none; border: 0; padding: 8px 14px; border-radius: 999px; background: rgba(6, 30, 50, 0.6); color: #fff; font: 800 13px var(--font-ui, Nunito, sans-serif); cursor: pointer; }
/* thẻ hướng dẫn dưới */
.tut-card { position: absolute; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; min-height: calc(var(--card-h) - 24px); padding: 18px 20px 16px; border-radius: 28px; background: rgba(255, 250, 240, 0.97);
  box-shadow: 0 -6px 40px rgba(2, 24, 44, 0.35); display: flex; flex-direction: column; gap: 6px; animation: tutup 0.4s cubic-bezier(0.2, 1.2, 0.3, 1); transition: box-shadow 0.3s; }
.tut-card.ok { box-shadow: 0 0 0 4px #4cc37f, 0 -6px 40px rgba(2, 24, 44, 0.35); }
@keyframes tutup { from { transform: translateY(30px); opacity: 0; } }
.tut-step { font-weight: 900; font-size: 11.5px; letter-spacing: 0.14em; color: #c27a12; text-transform: uppercase; min-height: 14px; }
.tut-card h2 { margin: 0; font-family: var(--font-display, 'Fredoka', sans-serif); font-size: 24px; color: var(--wood-d, #5a2d0c); }
.tut-card p { margin: 0; font-size: 15px; line-height: 1.5; color: #5a4a32; }
.tut-go { margin-top: auto; height: 56px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ffb13d, #ff7a1a); color: #fff; font: 700 20px var(--font-display, 'Fredoka', sans-serif); box-shadow: 0 6px 0 #c75a0a; cursor: pointer; }
.tut-go:active { transform: translateY(4px); box-shadow: 0 2px 0 #c75a0a; }
.tut-fb { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 12px; border-radius: 14px; font-size: 16px; animation: tutup 0.3s; }
.tut-fb .ico { width: 22px; height: 22px; }
.tut-fb.good { background: #dff8e8; color: #15633a; }
.tut-fb.bad { background: #ffe9e5; color: #a3261b; }
.tut-sum { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 6px; }
.tut-sum li { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 14px; color: #5a4a32; }
.tut-sum .ico { width: 26px; height: 26px; }
/* bong bóng thoại */
.tut-bubble { position: absolute; left: 14px; top: max(46px, calc(env(safe-area-inset-top) + 40px)); display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 22px; background: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25); animation: tutup 0.35s; }
.tut-bubble::after { content: ''; position: absolute; left: 34px; bottom: -10px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
.tut-bubble img { width: 40px; height: 40px; object-fit: cover; object-position: 50% 8%; border-radius: 50%; border: 3px solid #f0c56a; background: #fff6e0; }
.tut-bubble b { font-family: var(--font-display, 'Fredoka', sans-serif); font-size: 26px; color: var(--ink, #2c1b10); padding-right: 4px; }
.tut-speak { width: 46px; height: 46px; border: 0; border-radius: 50%; padding: 10px; background: linear-gradient(180deg, #4fc9f2, #1f8fc4); color: #fff; box-shadow: 0 4px 0 #146b96; cursor: pointer; }
.tut-speak .ico { width: 100%; height: 100%; }
.tut-speak.ping { animation: tutping 0.6s; }
@keyframes tutping { from { box-shadow: 0 4px 0 #146b96, 0 0 0 0 rgba(79, 201, 242, 0.7); } to { box-shadow: 0 4px 0 #146b96, 0 0 0 22px rgba(79, 201, 242, 0); } }
/* nút mũi tên cam */
.tut-arrow { position: absolute; right: 16px; bottom: calc(var(--card-h) + 8px); width: 70px; height: 70px; border: 0; border-radius: 50%; padding: 16px; background: linear-gradient(180deg, #ffb13d, #ff7a1a); color: #fff; box-shadow: 0 6px 0 #c75a0a, 0 0 0 0 rgba(255, 122, 26, 0.6); animation: tutpulse 1.4s infinite; cursor: pointer; }
.tut-arrow .ico { width: 100%; height: 100%; }
@keyframes tutpulse { 70% { box-shadow: 0 6px 0 #c75a0a, 0 0 0 18px rgba(255, 122, 26, 0); } }
/* thẻ chọn */
.tut-tray { position: absolute; left: 50%; top: 31%; transform: translateX(-50%); display: flex; gap: 12px; }
.tut-tile { position: relative; width: 96px; height: 108px; border: 0; border-radius: 22px; padding: 10px 8px 8px; background: #fff; box-shadow: 0 6px 0 #e7dcc3, 0 12px 24px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; animation: tutup 0.35s both; touch-action: none; }
.tut-tile:nth-child(2) { animation-delay: 0.08s; }
.tut-tile:nth-child(3) { animation-delay: 0.16s; }
.tut-tile .ico { width: 62px; height: 62px; }
.tut-tile span { font-weight: 900; font-size: 15px; color: var(--wood-d, #5a2d0c); }
.tut-tile.right { box-shadow: 0 6px 0 #4cc37f, 0 0 0 4px #4cc37f inset; background: #e9fbf0; }
.tut-tile.wrong { animation: tutshake 0.4s; background: #ffe9e5; }
.tut-tile.picked { box-shadow: 0 6px 0 #f0a93a, 0 0 0 4px #ffd23f inset; transform: translateY(-4px); }
.tut-tile.ghost { position: fixed; z-index: 130; pointer-events: none; transform: translate(-50%, -50%) scale(1.08) rotate(-4deg); animation: none; opacity: 0.95; }
@keyframes tutshake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
/* bàn tay chỉ */
.tut-hand { width: 52px; height: 52px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); }
.tut-pointer { position: absolute; z-index: 5; pointer-events: none; animation: tuttap 1.1s ease-in-out infinite; }
@keyframes tuttap { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-4px, -10px) scale(0.92); } }
.tut-pointer.at-speak { left: 190px; top: max(98px, calc(env(safe-area-inset-top) + 92px)); }
.tut-pointer.at-arrow { right: 40px; bottom: calc(var(--card-h) - 30px); }
.tut-pointer.at-mic { left: calc(50% + 34px); top: calc(31% + 54px); }
.tut-pointer.on-tile { right: -16px; bottom: -22px; }
.tut-pointer.drag-demo { left: 50%; top: calc(31% + 60px); animation: tutdrag 2.2s ease-in-out infinite; }
@keyframes tutdrag { 0% { transform: translate(-10px, 0); opacity: 0; } 15% { opacity: 1; } 70% { transform: translate(28vw, 14vh); opacity: 1; } 100% { transform: translate(28vw, 14vh); opacity: 0; } }
/* đi đường */
.tut-road { position: absolute; left: 50%; top: max(52px, calc(env(safe-area-inset-top) + 44px)); transform: translateX(-50%); width: min(70%, 360px); height: 14px; border-radius: 99px; background: rgba(6, 30, 50, 0.45); overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4); }
.tut-road i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffd23f, #ff9a1a); }
.tut-hold { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; padding: 12px 18px; border-radius: 22px; background: rgba(6, 30, 50, 0.6); color: #fff; font-weight: 900; font-size: 14px; cursor: pointer; animation: tutpress 1.6s ease-in-out infinite; }
.tut.walking .tut-hold { animation: none; background: rgba(76, 195, 127, 0.75); }
@keyframes tutpress { 50% { transform: translateX(-50%) scale(0.94); } }
.tut-coco { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; padding: 10px 14px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 4px #ffd23f, 0 12px 26px rgba(0, 0, 0, 0.3); font-weight: 900; font-size: 13px; color: var(--wood-d, #5a2d0c); cursor: pointer; animation: tutup 0.35s, tutglow 1s 0.4s infinite; }
.tut-coco .ico { width: 64px; height: 64px; }
.tut-coco.got { animation: tutgot 0.5s forwards; }
@keyframes tutgot { to { transform: translate(-50%, -60px) scale(0.3); opacity: 0; } }
/* micro */
.tut-mic-wrap { position: absolute; left: 50%; top: 31%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tut-mic { width: 96px; height: 96px; border: 0; border-radius: 50%; padding: 24px; background: linear-gradient(180deg, #ff6b5e, #e53935); color: #fff; box-shadow: 0 7px 0 #a32020; cursor: pointer; }
.tut-mic .ico { width: 100%; height: 100%; }
.tut-mic.rec { background: linear-gradient(180deg, #5be08e, #2fb36d); box-shadow: 0 7px 0 #1f7d4b, 0 0 0 0 rgba(76, 195, 127, 0.6); animation: tutrec 1s infinite; }
.tut-mic:disabled { opacity: 0.5; }
@keyframes tutrec { 70% { box-shadow: 0 7px 0 #1f7d4b, 0 0 0 26px rgba(76, 195, 127, 0); } }
.tut-mic-l { min-height: 18px; padding: 4px 12px; border-radius: 999px; background: rgba(6, 30, 50, 0.55); color: #fff; font-weight: 800; font-size: 13px; }
.tut-mic-l:empty { background: none; }
.tut-judge { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); animation: tutup 0.3s; }
.tut-judge b { font-size: 15px; color: var(--wood-d, #5a2d0c); }
.tut-judge div { display: flex; gap: 10px; }
.tut-judge button { width: 54px; height: 54px; border: 0; border-radius: 50%; font-size: 26px; font-weight: 900; color: #fff; cursor: pointer; }
.tut-judge .ok { background: #2fb36d; padding: 12px; box-shadow: 0 4px 0 #1f7d4b; }
.tut-judge .ok .ico { width: 100%; height: 100%; }
.tut-judge .no { background: #c9b48a; box-shadow: 0 4px 0 #9a8560; }
@media (max-height: 680px) { .tut { --card-h: 214px; } .tut-card h2 { font-size: 21px; } .tut-card p { font-size: 14px; } .tut-tray, .tut-mic-wrap { top: 26%; } .tut-tile { width: 84px; height: 96px; } .tut-tile .ico { width: 52px; height: 52px; } }
@media (min-width: 760px) { .tut-actor.lisa { left: 18%; } .tut-actor.leo { right: 18%; } }
@media (prefers-reduced-motion: reduce) { .tut-actor, .tut-pointer, .tut-arrow, .tut-hold { animation: none !important; } }