/* 平板螢幕示意（共用：主頁第 02 步、立體導覽頁）：.tablet-screen 以 JS 計算的 matrix3d 貼合插圖螢幕 */
:root { --urgent: #c94a3a; }
.tablet-ui { position: absolute; inset: 0; pointer-events: none; transition: transform .8s var(--ease); }
.tablet-screen { position: absolute; left: 0; top: 0; width: 400px; height: 411px; transform-origin: 0 0; visibility: hidden; }
.tablet-screen.ready { visibility: visible; }
.ts-card {
    position: absolute; left: 12.4%; top: 14.5%; width: 74.7%; height: 72.8%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    border-radius: 18px; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.ts-base { background: #fff; }   /* 固定白底：內容卡交叉淡換時不透出底圖 QR，只在顯示 QR 時淡出 */
.tablet-screen:not([data-state="showing"]) .ts-base,
.tablet-screen[data-state="idle"] .ts-idle,
.tablet-screen[data-state="generating"] .ts-generating,
.tablet-screen[data-state="scanned"] .ts-scanned,
.tablet-screen[data-state="expired"] .ts-expired { opacity: 1; visibility: visible; }
.ts-card p { font-size: 34px; font-weight: 700; color: #8a7f73; }
.ts-icon { width: 108px; height: 108px; color: var(--green-deep); stroke-width: 2.2; }
.ts-expired .ts-icon { color: #8a7f73; }
.ts-scanned .ts-icon { color: #3f8a5a; animation: ts-pop .45s var(--ease); }
.ts-card .ts-ok { font-size: 29px; font-weight: 900; line-height: 1.3; color: var(--green-deep); text-align: center; }
.ts-card .ts-sub { font-size: 21px; font-weight: 500; line-height: 1.35; text-align: center; padding: 0 18px; }
@keyframes ts-pop { from { transform: scale(.4); opacity: 0; } }

/* 顧客掃碼：掃描線掃過 QR 一次 */
.ts-scanline { position: absolute; left: 12.84%; top: 14.98%; width: 73.84%; height: 71.83%; border-radius: 18px; overflow: hidden; opacity: 0; }
.ts-scanline span {
    position: absolute; left: 4%; right: 4%; top: 0; height: 14px; border-radius: 7px;
    background: linear-gradient(90deg, transparent, rgba(63, 138, 90, .9) 20%, rgba(63, 138, 90, .9) 80%, transparent);
    box-shadow: 0 0 18px 6px rgba(63, 138, 90, .35);
}
.tablet-screen.scanning .ts-scanline { opacity: 1; }
.tablet-screen.scanning .ts-scanline span { animation: ts-scan .8s ease-in-out forwards; }
@keyframes ts-scan { from { top: 4%; } to { top: 90%; } }

/* 今日本店打卡人次（櫃台頁頁首資訊） */
.ts-count {
    position: absolute; left: 12.84%; width: 73.84%; top: 2.4%; padding: 3px 0; border-radius: 999px;
    background: rgba(255, 255, 255, .72); color: var(--green-deep); font-size: 22px; font-weight: 700; text-align: center;
}
.ts-count b { display: inline-block; font-size: 27px; font-weight: 900; color: var(--orange-dark); }
.ts-count.bump b { animation: ts-bump .6s var(--ease); }
@keyframes ts-bump { 40% { transform: scale(1.6); } }
.ts-btn {
    pointer-events: auto; cursor: pointer; border: 0; border-radius: 18px; padding: 18px 28px;
    font: inherit; font-size: 38px; font-weight: 900; letter-spacing: .04em; color: #fff;
    background: var(--orange); box-shadow: 0 8px 18px rgba(220, 108, 69, .35);
    transition: transform .2s var(--ease), background .2s;
}
.ts-btn:hover { background: var(--orange-dark); }
.ts-btn:focus-visible { outline: 4px solid var(--green-deep); outline-offset: 4px; }
.ts-btn.press { transform: scale(.9); background: var(--orange-dark); }
.ts-idle .ts-btn { animation: ts-pulse 1.6s ease-in-out infinite; }
@keyframes ts-pulse { 50% { box-shadow: 0 8px 18px rgba(220, 108, 69, .35), 0 0 0 14px rgba(220, 108, 69, .18); } }
.ts-spin { width: 88px; height: 88px; border-radius: 50%; border: 10px solid var(--orange); border-top-color: transparent; animation: ts-spin .8s linear infinite; }
@keyframes ts-spin { to { transform: rotate(360deg); } }
.ts-bar { position: absolute; left: 12.84%; width: 73.84%; top: 90%; height: 12px; border-radius: 6px; background: rgba(63, 102, 85, .16); overflow: hidden; opacity: 0; transition: opacity .3s; }
.tablet-screen[data-state="showing"] .ts-bar { opacity: 1; }
.ts-bar span { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--orange); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); transition: background .3s; }
.tablet-screen.urgent .ts-bar span { background: var(--urgent); }