/* Kiểu riêng cho từng màn chơi. Dùng chung tokens.css. */

/* Cảnh nền SVG phủ kín, nội dung nằm trên */
.screen.has-scene > *:not(.scene) { position: relative; z-index: 1; }
.scene { position: absolute; inset: 0; z-index: 0; animation: fade-in 400ms ease-out both; }
.scene svg { width: 100%; height: 100%; display: block; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Công chúa và hình minh họa tải xong thì hiện mềm, không nhảy cụp vào */
.cong-chua > svg, .illus > svg, .gift-icon > svg { animation: fade-in 220ms ease-out both; }
@media (prefers-reduced-motion: reduce) { .scene, .cong-chua > svg, .illus > svg, .gift-icon > svg { animation: none; } }

/* Khung công chúa: các mảnh SVG chồng lên nhau, tỉ lệ 300:432 */
.cong-chua { position: relative; }
.cong-chua > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cong-chua > .pet { position: absolute; left: 66%; top: 74%; width: 34%; height: 24%; }
.cong-chua > .pet svg { width: 100%; height: 100%; display: block; }
.cong-chua.is-hidden { visibility: hidden; }

/* Hình minh họa và thẻ quà */
.illus { position: relative; }
.illus svg { width: 100%; height: 100%; display: block; }
.illus.is-fallback { border-radius: 50%; background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: var(--shadow-soft); }
.illus.is-fallback .glyph { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 1; color: var(--violet-600); }
.illus.is-fallback .word { font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.gift-icon svg { width: 100%; height: 100%; display: block; }
.gift-icon.is-fallback { border-radius: 18px; background: var(--pink-100); padding: 14px; }

/* Màn Mở quà */
.gift-stage { position: relative; height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.gift-stage .glow { position: absolute; left: 50%; top: 20px; width: 300px; height: 300px; margin-left: -150px; border-radius: 50%; background: rgba(255,255,255,0.55); }
.gift-stage .glow.is-inner { top: 60px; width: 220px; height: 220px; margin-left: -110px; background: rgba(255,255,255,0.7); }
/* Chữ, hình minh họa và nhãn nằm trên nắp hộp đang mở (z-index 2) để nắp bật lên không che chữ */
.gift-stage .letter {
  position: absolute; left: 50%; top: 16px; width: 160px; height: 160px; margin-left: -80px; border-radius: 50%; z-index: 2;
  background: var(--paper); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 120px; line-height: 1; color: var(--pink-600);
  box-shadow: 0 0 0 10px rgba(242,184,75,0.35), 0 16px 40px rgba(242,184,75,0.4);
  opacity: 0; transform: translateY(120px) scale(0.4);
}
.gift-stage .letter.is-out { animation: letter-out 900ms cubic-bezier(0.2, 0.8, 0.3, 1.2) forwards; }
@keyframes letter-out { to { opacity: 1; transform: translateY(0) scale(1); } }
.gift-stage .illus { position: absolute; right: 6px; top: 30px; width: 110px; height: 110px; opacity: 0; transform: scale(0.5); z-index: 2; }
.gift-stage .illus.is-out { animation: illus-out 700ms 500ms ease-out forwards; }
@keyframes illus-out { to { opacity: 1; transform: scale(1); } }
.gift-stage .illus-label { position: absolute; right: 12px; top: 146px; z-index: 2; font-size: 14px; font-weight: 800; color: var(--green-600); background: var(--paper); border-radius: 12px; padding: 3px 10px; opacity: 0; }
.gift-stage .illus-label.is-out { animation: illus-out 500ms 900ms ease-out forwards; }
.gift-stage .box { position: relative; width: 240px; height: 190px; }
/* overflow visible: nắp mở bật lên cao hơn khung vẽ 240x190 của hộp, không được cắt mất */
.gift-stage .box svg, .reward-stage .box svg { width: 100%; height: 100%; display: block; overflow: visible; }
.gift-stage .box .lid, .reward-stage .box .lid { transform-origin: 30px 60px; transition: transform 500ms cubic-bezier(0.3, 1.4, 0.5, 1); }
.gift-stage .box.is-open .lid, .reward-stage .box.is-open .lid { transform: rotate(-26deg) translate(-4px, -14px); }
.gift-stage.is-waiting { cursor: pointer; }
/* Chờ chạm: hộp nhún lên xuống, thỉnh thoảng rung như có gì cựa quậy bên trong */
.gift-stage.is-waiting .box { animation: box-tease 2600ms ease-in-out infinite; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes box-tease {
  0% { transform: translateY(0); } 30% { transform: translateY(-10px); } 60% { transform: translateY(0); }
  68% { transform: rotate(-4deg); } 76% { transform: rotate(4deg); } 84% { transform: rotate(-3deg); } 92% { transform: rotate(2deg); } 100% { transform: rotate(0); }
}
/* Chạm: lắc mạnh 450ms rồi nắp bật */
.gift-stage .box.is-shaking { animation: box-shake 450ms ease-in-out; }
@keyframes box-shake {
  0%, 100% { transform: rotate(0) scale(1); } 15% { transform: rotate(-9deg) translateX(-5px) scale(1.04); } 30% { transform: rotate(8deg) translateX(5px) scale(1.06); }
  45% { transform: rotate(-7deg) scale(1.08); } 60% { transform: rotate(6deg) scale(1.08); } 78% { transform: rotate(-3deg) scale(1.04); }
}
/* Tia sáng xòe sau hộp khi mở, quay chậm */
.gift-stage .rays { position: absolute; left: 50%; top: 55%; width: 440px; height: 440px; margin: -220px 0 0 -220px; border-radius: 50%; opacity: 0; transform: scale(0.2); transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.2, 0.8, 0.3, 1.1); pointer-events: none; z-index: 0;
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 68%); mask: radial-gradient(circle, #000 30%, transparent 68%); }
.gift-stage .rays::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.9) 0deg 9deg, rgba(255,255,255,0) 9deg 24deg); animation: rays-spin 16s linear infinite; }
.gift-stage.is-open .rays { opacity: 0.9; transform: scale(1); }
@keyframes rays-spin { to { transform: rotate(360deg); } }
/* Pháo giấy vẽ sẵn nổ tung từ hộp */
.gift-stage .burst { position: absolute; left: 50%; top: 46%; width: 360px; height: 360px; margin: -180px 0 0 -180px; opacity: 0; pointer-events: none; z-index: 3; }
.gift-stage .burst svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { .gift-stage.is-waiting .box, .gift-stage .box.is-shaking, .gift-stage .rays::before { animation: none; } }
/* Chữ mời chạm dưới hộp, nhấp nháy tới khi bé chạm */
.gift-stage .tap-hint { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); font-size: 14px; font-weight: 800; color: var(--pink-600); background: var(--paper); border-radius: 999px; padding: 4px 14px; box-shadow: var(--shadow-soft); white-space: nowrap; animation: tap-hint 1200ms ease-in-out infinite alternate; }
@keyframes tap-hint { from { opacity: 0.55; transform: translateX(-50%) scale(0.96); } to { opacity: 1; transform: translateX(-50%) scale(1.04); } }
.speaker-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.speaker-row .glyph { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; color: var(--pink-600); }
.speaker-row .sub { font-size: 13px; color: var(--ink-faint); }

/* Màn Tô chữ */
.trace-card { position: relative; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 14px; touch-action: none; }
.trace-card canvas { display: block; width: 100%; border-radius: 16px; touch-action: none; }
.trace-card .start { position: absolute; width: 32px; height: 32px; border-radius: 50%; background: var(--green-400); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; pointer-events: none; animation: pulse-dot 900ms ease-in-out infinite alternate; box-shadow: 0 0 0 4px rgba(91,196,142,0.3); }
@keyframes pulse-dot { from { transform: translate(-50%,-50%) scale(1); } to { transform: translate(-50%,-50%) scale(1.15); } }
.trace-card .done-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.trace-card .done-badge svg { width: 96px; height: 96px; color: var(--green-400); filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15)); animation: pop-in 500ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes pop-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.steps { display: flex; justify-content: center; gap: 22px; }
.steps .step-dot { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--violet-300); }
.steps .step-dot .dot { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 3px dashed var(--violet-200); display: flex; align-items: center; justify-content: center; }
.steps .step-dot .dot svg { width: 20px; height: 20px; color: #fff; }
.steps .step-dot.is-done { color: var(--green-400); }
.steps .step-dot.is-done .dot { border: 0; background: var(--green-400); }
.steps .step-dot.is-now { color: var(--gold-600); }
.steps .step-dot.is-now .dot { border: 0; background: var(--gold-400); box-shadow: 0 0 0 5px rgba(242,184,75,0.3); }

/* Màn Tìm chữ */
.mirror { position: relative; width: 250px; height: 250px; margin: 0 auto; border-radius: 50%; background: var(--paper); border: 10px solid var(--gold-400); box-shadow: 0 0 0 4px var(--gold-100), 0 14px 34px rgba(242,184,75,0.35); overflow: hidden; }
.mirror .cong-chua { position: absolute; width: 426px; height: 614px; left: -88px; top: -48px; }
.mirror .spark { position: absolute; color: var(--gold-400); }
.mirror .spark svg { width: 30px; height: 30px; }
.choices-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 6px 4px; }
.choice-bubble { justify-self: center; width: 96px; height: 96px; border-radius: 50%; background: var(--paper); border: 5px solid var(--violet-200); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 52px; color: var(--violet-600); position: relative; transition: transform 120ms ease, opacity 300ms ease; }
.choice-bubble:nth-child(1) { transform: rotate(-6deg); }
.choice-bubble:nth-child(3) { transform: rotate(5deg); }
.choice-bubble:active { transform: scale(0.94); }
.choice-bubble.is-right { background: var(--gold-100); border-color: var(--gold-400); color: var(--pink-600); box-shadow: 0 0 0 8px rgba(242,184,75,0.28); transform: none; }
.choice-bubble.is-hint { animation: hint-pulse 800ms ease-in-out infinite alternate; }
@keyframes hint-pulse { from { box-shadow: 0 0 0 0 rgba(242,184,75,0); } to { box-shadow: 0 0 0 10px rgba(242,184,75,0.4); } }
.choice-bubble.is-dim { opacity: 0.4; }
.choice-bubble .tick { position: absolute; right: -8px; top: -8px; width: 32px; height: 32px; border-radius: 50%; background: var(--green-400); display: flex; align-items: center; justify-content: center; }
.choice-bubble .tick svg { width: 18px; height: 18px; color: #fff; }
.result-card { display: flex; align-items: center; gap: 14px; background: var(--paper); border-radius: 22px; padding: 14px 16px; box-shadow: 0 0 0 5px rgba(240,98,146,0.18), 0 10px 26px rgba(240,98,146,0.22); opacity: 0; transform: translateY(10px); transition: opacity 300ms ease, transform 300ms ease; }
.result-card.is-on { opacity: 1; transform: none; }
.result-card .title { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--pink-600); }
.result-card .sub { font-size: 13px; color: var(--ink-soft); }
.result-card .gift-icon { flex-shrink: 0; }

/* Màn Nhận quà */
.reward-stage { position: relative; height: 400px; display: flex; justify-content: center; align-items: flex-end; }
.reward-stage .glow { position: absolute; left: 50%; top: 10px; width: 340px; height: 340px; margin-left: -170px; border-radius: 50%; background: rgba(255,255,255,0.55); }
.reward-stage .glow.is-inner { top: 60px; width: 240px; height: 240px; margin-left: -120px; background: rgba(255,255,255,0.7); }
.reward-stage .cong-chua { z-index: 1; }
.reward-stage .box { position: absolute; left: 12px; bottom: 0; width: 140px; height: 112px; z-index: 2; }
/* Thẻ quà bắt đầu nằm trong hộp (dưới nắp, trên thân), nhô lên rồi mới bay tới công chúa (z-index đặt lại lúc bay) */
.reward-stage .flying { position: absolute; z-index: 1; filter: drop-shadow(0 8px 14px rgba(122, 62, 140, 0.25)); }
/* Khoe món quà: công chúa lùi mờ, vầng sáng có tia vàng quay sau món đang phóng to */
.reward-stage .cong-chua { transition: opacity 500ms ease, filter 500ms ease; }
.reward-stage.is-showcase .cong-chua { opacity: 0.28; filter: blur(2px) saturate(0.6); }
.reward-stage .halo { position: absolute; left: 50%; top: 42%; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; opacity: 0; transform: scale(0.3); transition: opacity 500ms ease, transform 650ms cubic-bezier(0.2, 0.9, 0.3, 1.2); pointer-events: none; z-index: 2;
  background: radial-gradient(circle, rgba(255,255,255,0.98) 0%, rgba(255,241,214,0.95) 30%, rgba(255,255,255,0) 68%); }
.reward-stage .halo::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(242,184,75,0.55) 0deg 8deg, rgba(242,184,75,0) 8deg 22deg); animation: rays-spin 12s linear infinite;
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 66%); mask: radial-gradient(circle, #000 30%, transparent 66%); }
.reward-stage.is-showcase .halo { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .reward-stage .halo::before { animation: none; } .reward-stage .cong-chua, .reward-stage .halo { transition: none; } }
.reward-card .cheer { font-size: 16px; font-weight: 800; color: var(--violet-600); opacity: 0; transform: translateY(6px); transition: opacity 300ms ease, transform 300ms ease; min-height: 0; }
.reward-card .cheer.is-on { opacity: 1; transform: none; }
.reward-card .cheer:empty { display: none; }
.reward-card { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--paper); border-radius: 24px; padding: 16px 18px; box-shadow: 0 0 0 6px rgba(242,184,75,0.25), 0 12px 30px rgba(242,184,75,0.3); text-align: center; }
.reward-card .title { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--pink-600); line-height: 1.2; }
.reward-card .sub { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.reward-card .sub .chip { width: 30px; height: 30px; border-radius: 50%; background: var(--pink-100); color: var(--pink-600); font-family: var(--font-display); font-weight: 800; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }

/* Màn Đếm */
.count-number { display: flex; align-items: center; justify-content: center; gap: 16px; }
.count-number .big { width: 118px; height: 118px; border-radius: 50%; background: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 84px; line-height: 1; color: var(--violet-600); box-shadow: 0 0 0 8px rgba(124,77,255,0.15), 0 12px 30px rgba(122,62,140,0.18); transition: transform 200ms ease; }
.count-number .big.is-bump { animation: bump 400ms ease-out; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.count-number .word { background: var(--paper); border-radius: 4px 20px 20px 20px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-soft); font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--pink-600); min-width: 110px; }
.count-number .word svg { width: 22px; height: 22px; color: var(--pink-400); }
.count-card { background: var(--paper); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-card); }
.count-set { position: relative; width: 100%; aspect-ratio: 1; }
.count-set > svg { width: 100%; height: 100%; display: block; }
.count-set g[id*="item-"] { cursor: pointer; transition: opacity 200ms ease; }
.count-set g[id*="item-"].is-counted { opacity: 0.55; }
.count-set.is-fallback { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 14px; aspect-ratio: auto; align-content: center; min-height: 240px; }
.count-set.is-fallback .gem { width: 100%; aspect-ratio: 1; border-radius: 18px; background: var(--violet-50); padding: 12px; transition: opacity 200ms ease, transform 120ms ease; }
.count-set.is-fallback .gem.is-counted { opacity: 0.55; }
.count-set.is-fallback .zero { width: 220px; margin: 0 auto; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 160px; line-height: 1; color: var(--violet-600); cursor: pointer; }
.count-badge { pointer-events: none; }

/* Màn Hết giờ */
.night { color: #fff; }
.night .star { position: absolute; color: var(--gold-100); animation: twinkle 2.4s ease-in-out infinite alternate; }
.night .star svg { width: 14px; height: 14px; }
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 1; } }
.night .moon { position: absolute; right: 36px; top: 40px; color: var(--gold-400); }
.night .moon svg { width: 86px; height: 86px; }
.night .summary { background: rgba(255,255,255,0.12); border-radius: 22px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.night .summary .cap { font-size: 13px; font-weight: 800; color: #E1C4F5; letter-spacing: 0.04em; }
.night .summary .item { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 800; }
.night .summary .item .ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; flex-shrink: 0; }
.night .summary .item .ic svg { width: 22px; height: 22px; color: #fff; }
.night .bed { position: relative; margin: 0 auto; width: 330px; height: 230px; }
.night .bed .cong-chua { position: absolute; left: 30px; top: 0; }

/* Phòng trang điểm */
.tabs { display: flex; justify-content: space-between; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: var(--ink-faint); }
.tab .ic { width: 52px; height: 52px; border-radius: 50%; background: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--violet-600); transition: transform 120ms ease; }
.tab .ic svg { width: 26px; height: 26px; }
.tab:active .ic { transform: scale(0.92); }
.tab.is-on { color: var(--pink-600); }
.tab.is-on .ic { background: var(--pink-400); color: #fff; box-shadow: 0 0 0 4px rgba(240,98,146,0.25); }
.gift-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-height: 96px; }
.gift-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--paper); border-radius: 18px; padding: 12px 6px 10px; box-shadow: var(--shadow-soft); transition: transform 120ms ease; }
.gift-tile:active { transform: scale(0.94); }
.gift-tile .name { font-size: 11px; font-weight: 800; color: var(--ink); text-align: center; }
.gift-tile.is-on { background: var(--gold-100); box-shadow: 0 0 0 3px var(--gold-400); }
.gift-tile.is-locked { background: rgba(255,255,255,0.6); box-shadow: none; border: 2px dashed var(--violet-200); }
.gift-tile.is-locked .name { color: var(--violet-300); }
.gift-tile.is-locked .gift-icon { opacity: 0.35; filter: grayscale(1); }
.gift-tile .badge { position: absolute; right: -6px; top: -6px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 14px; background: var(--violet-100); color: var(--violet-600); }
.gift-tile .badge.is-tick { background: var(--green-400); color: #fff; }
.gift-tile .badge svg { width: 14px; height: 14px; }
.gift-empty { grid-column: 1 / -1; text-align: center; font-size: 13px; color: var(--ink-faint); padding: 20px 0; }
/* Phông nền sau công chúa trên sân khấu và máy quay ghé vào mặt */
.stage .stage-scene { position: absolute; inset: 0; z-index: 0; }
.stage .stage-scene svg { width: 100%; height: 100%; display: block; animation: fade-in 350ms ease-out both; }
.stage.has-scene::before, .stage.has-scene .floor { display: none; }
.stage .stage-cam { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-end; z-index: 1; transition: transform 650ms cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.stage .stage-cam .cong-chua { position: relative; z-index: 1; }
.stage .stage-cam .cong-chua > .pet { transition: opacity 200ms ease; }
.stage .stage-cam.is-zoomed .cong-chua > .pet { opacity: 0; }
.scene-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scene-tile { padding: 6px 6px 8px; }
.scene-thumb { width: 100%; aspect-ratio: 1.2; border-radius: 12px; overflow: hidden; background: var(--violet-50); }
.scene-thumb svg { width: 100%; height: 100%; display: block; }
.scene-thumb.is-plain { background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 70%, var(--pink-100) 70%); }
.scene-tile.is-on .scene-thumb { box-shadow: inset 0 0 0 3px var(--gold-400); }
@media (prefers-reduced-motion: reduce) { .stage .stage-cam { transition: none; } }

/* Tab Công chúa trong Phòng trang điểm: ô màu tóc, da, váy và hai kiểu tóc */
.princess-panel { min-height: 96px; background: rgba(255,255,255,0.55); border-radius: 18px; padding: 12px; }
.princess-panel .swatch { width: 48px; height: 48px; }

/* Chấm số thứ tự nét và chấm vàng chạy trên màn Tô chữ */
.trace-card .marks { position: absolute; inset: 0; pointer-events: none; }
.trace-card .mark { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; border: 3px solid var(--green-400); color: var(--green-400); font-family: var(--font-display); font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: transform 200ms ease, opacity 200ms ease; }
.trace-card .mark.is-now { background: var(--green-400); color: #fff; transform: scale(1.15); box-shadow: 0 0 0 4px rgba(91,196,142,0.3); }
.trace-card .mark.is-done { opacity: 0.35; }
.trace-card .hint-dot { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 5px rgba(242,184,75,0.35); pointer-events: none; opacity: 0; will-change: transform; }

/* Tab cuộn ngang khi nhiều nhóm */
.tabs.is-scroll { justify-content: flex-start; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs.is-scroll::-webkit-scrollbar { display: none; }
.tabs.is-scroll .tab { flex-shrink: 0; scroll-snap-align: center; min-width: 60px; }

/* Ảnh chụp công chúa */
.photo-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(74,44,90,0.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.photo-card { background: #fff; border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 12px; align-items: center; max-width: 340px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.photo-card img { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 16px; }
.photo-note { font-size: 14px; font-weight: 800; color: var(--violet-600); }

/* Máy tính bảng nằm ngang: hình chính bên trái, thao tác bên phải */
@media (min-width: 820px) and (orientation: landscape) {
  .screen.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: max-content; column-gap: 40px; row-gap: 16px; align-content: start; }
  .screen.split > .topbar { grid-column: 1 / -1; }
  .screen.split > .hero { grid-column: 1; grid-row: 2 / span 9; align-self: center; justify-self: center; width: 100%; max-width: 460px; }
  .screen.split > .hero.mirror { width: 320px; height: 320px; }
  .screen.split > .hero.mirror .cong-chua { width: 545px; height: 786px; left: -113px; top: -61px; }
  .screen.split > .hero.reward-stage, .screen.split > .hero.gift-stage { height: 520px; }
  .screen.split > .grow { display: none; }
  .screen.split > .btn-primary { align-self: end; }
}