/*---------------------------------------------------------------------------
  Version : 2026.10.02
  Purpose : 小遊戲全螢幕畫面 game_play.php（tg- 前綴，不載入官網 common.css）
---------------------------------------------------------------------------*/
:root {
	--ink: #282828; --ink-2: #5b554d; --paper: #ebe9e3; --paper-2: #f7f4ee; --line: #e4dfd5;
	--ember: #d9642b; --amber: #c49a3a; --leaf: #5f7a45; --seal: #C0664E; --wood: #8b7d6b;
	--serif: 'Noto Serif TC', 'Songti TC', 'PMingLiU', serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #d9d4c6; overflow: hidden; overscroll-behavior: none; }
body { font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#tg-app { position: relative; width: 100%; max-width: 520px; height: 100vh; height: 100dvh; margin: 0 auto; overflow: hidden; background: #ebe9e3 url(../images/bg/bg-s.jpg) repeat; box-shadow: 0 0 60px rgba(40, 40, 40, .25); }
#tg-cv { position: absolute; display: block; touch-action: none; }

/* ---------- HUD ---------- */
#tg-hud { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: flex-start; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 10px 0; pointer-events: none; }
#tg-hud > * { pointer-events: auto; }
.tg-btn-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(248, 244, 235, .9); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); cursor: pointer; color: var(--ink); }
.tg-btn-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tg-hud-mid { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.tg-score, .tg-hearts, .tg-info, .tg-time { background: rgba(248, 244, 235, .92); border-radius: 999px; padding: 4px 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); font-family: var(--serif); height: 40px; display: flex; align-items: center; gap: 6px; }
.tg-score small { font-size: 9px; letter-spacing: .2em; color: var(--wood); }
.tg-score b { font-size: 20px; font-weight: 900; min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.tg-score.bump b { animation: tgBump .3s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tgBump { 40% { transform: scale(1.35); color: var(--seal); } }
.tg-hearts i { width: 16px; height: 16px; background: #d8cfc0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21C6 15 2 12 2 7.5A4.5 4.5 0 0112 5a4.5 4.5 0 0110 2.5C22 12 18 15 12 21z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21C6 15 2 12 2 7.5A4.5 4.5 0 0112 5a4.5 4.5 0 0110 2.5C22 12 18 15 12 21z'/%3E%3C/svg%3E") center/contain no-repeat; transition: background .3s, transform .3s; }
.tg-hearts i.on { background: var(--leaf); }
.tg-info { font-size: 14px; font-weight: 700; }
.tg-time { position: relative; min-width: 76px; justify-content: center; overflow: hidden; }
.tg-time span { position: relative; z-index: 1; font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tg-time em { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0, 0, 0, .06); }
.tg-time u { display: block; height: 100%; background: var(--leaf); transform-origin: left; text-decoration: none; transition: transform .2s linear; }
.tg-time.warn span { color: var(--seal); animation: tgBump .6s infinite; }
.tg-time.warn u { background: var(--seal); }

/* ---------- 覆蓋層 ---------- */
#tg-layer { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 16px; pointer-events: none; transition: background .4s; }
#tg-layer > * { pointer-events: auto; }
#tg-layer.dim { background: rgba(40, 40, 40, .6); }
.tg-panel { width: 100%; max-width: 380px; max-height: calc(100% - 20px); overflow-y: auto; background: var(--paper-2); border-radius: 22px; padding: 26px 22px 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); animation: tgIn .55s cubic-bezier(.2, 1.3, .4, 1); position: relative; scrollbar-width: none; }
.tg-panel::-webkit-scrollbar { display: none; }
.tg-panel::before { content: ''; position: absolute; inset: 8px; border: 1px solid var(--line); border-radius: 16px; pointer-events: none; }
@keyframes tgIn { from { opacity: 0; transform: translateY(40px) scale(.92); } }
.tg-eyebrow { font-family: var(--serif); font-size: 11px; letter-spacing: .26em; color: var(--wood); margin: 0 0 6px; text-align: center; }
.tg-start h1 { font-family: var(--serif); font-weight: 900; font-size: 30px; letter-spacing: .12em; text-align: center; margin: 0 0 16px; }
.tg-how { list-style: none; margin: 0 0 16px; padding: 0; }
.tg-how li { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; padding: 7px 0; border-top: 1px dashed var(--line); }
.tg-how li:first-child { border-top: 0; }
.tg-how b { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-size: 11px; margin-top: 1px; }
.tg-best { text-align: center; font-size: 13px; color: var(--ink-2); margin: 0 0 10px; }
.tg-cta { display: block; width: 100%; border: 0; border-radius: 999px; padding: 15px; background: var(--ink); color: var(--paper); font-family: var(--serif); font-weight: 900; font-size: 18px; letter-spacing: .3em; cursor: pointer; box-shadow: 0 8px 22px rgba(40, 40, 40, .3); transition: transform .15s; position: relative; z-index: 1; }
.tg-cta:active { transform: scale(.96); }
.tg-ghost { flex: 1; display: block; text-align: center; border: 1px solid var(--line); border-radius: 999px; padding: 11px; background: transparent; color: var(--ink); font-size: 14px; text-decoration: none; cursor: pointer; font-family: inherit; position: relative; z-index: 1; }
.tg-count { font-family: var(--serif); font-weight: 900; font-size: 120px; color: #fff8ec; text-shadow: 0 6px 30px rgba(0, 0, 0, .5), 0 0 2px #2a2622; opacity: 0; pointer-events: none !important; }
.tg-count.show { animation: tgCount .62s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.tg-count.go { font-size: 76px; letter-spacing: .2em; opacity: 1; color: var(--amber); animation: tgCount .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes tgCount { 0% { opacity: 0; transform: scale(2.2) rotate(-8deg); } 35% { opacity: 1; transform: scale(1) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.8); } }

/* 對話 / 知識卡（遊戲中途用） */
.tg-card { max-width: 340px; background: var(--paper-2); border-radius: 20px; padding: 22px 20px 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); text-align: center; animation: tgIn .5s cubic-bezier(.2, 1.3, .4, 1); position: relative; }
.tg-card h2 { font-family: var(--serif); font-weight: 900; font-size: 24px; letter-spacing: .14em; margin: 4px 0 8px; }
.tg-card p { font-size: 14.5px; line-height: 1.8; margin: 0 0 14px; color: var(--ink); }
.tg-card .tg-badge { display: inline-block; font-family: var(--serif); font-size: 12px; letter-spacing: .2em; color: #fff; background: var(--seal); border-radius: 999px; padding: 3px 12px; }
.tg-choices { display: grid; gap: 8px; }
.tg-choice { border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 12px 14px; font-size: 15px; font-family: var(--serif); font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; display: flex; align-items: center; gap: 10px; transition: transform .15s, border-color .2s; }
.tg-choice:active { transform: scale(.97); }
.tg-choice small { display: block; font-family: 'Noto Sans TC', sans-serif; font-weight: 400; font-size: 12px; color: var(--ink-2); }
.tg-choice i { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; }

/* ---------- 結算 ---------- */
.tg-result { text-align: center; padding-top: 30px; }
.tg-seal { display: inline-grid; place-items: center; min-width: 96px; height: 96px; padding: 0 12px; border: 3px solid var(--seal); color: var(--seal); border-radius: 10px; font-family: var(--serif); font-weight: 900; font-size: 26px; letter-spacing: .08em; line-height: 1.15; transform: rotate(-6deg); animation: tgStamp .6s .15s cubic-bezier(.2, 1.6, .4, 1) both; box-shadow: inset 0 0 0 3px var(--paper-2), inset 0 0 0 5px rgba(192, 102, 78, .5); position: relative; z-index: 1; }
@keyframes tgStamp { from { opacity: 0; transform: scale(2.4) rotate(-20deg); } }
.tg-result h2 { font-family: var(--serif); font-weight: 900; font-size: 22px; letter-spacing: .1em; margin: 16px 0 4px; }
.tg-final { font-family: var(--serif); margin: 6px 0 8px; }
.tg-final span { font-size: 54px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.tg-final small { display: block; font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.tg-desc { font-size: 14.5px; line-height: 1.8; margin: 4px 0 14px; color: var(--ink); }
.tg-tip { text-align: left; background: #f6ecd2; border-radius: 14px; padding: 12px 14px; font-size: 13.5px; line-height: 1.8; margin-bottom: 16px; position: relative; z-index: 1; }
.tg-tip b { display: block; font-family: var(--serif); color: var(--seal); letter-spacing: .2em; font-size: 12px; margin-bottom: 2px; }
.tg-reco { text-align: left; margin-bottom: 16px; position: relative; z-index: 1; }
.tg-reco h3 { font-family: var(--serif); font-size: 15px; letter-spacing: .14em; margin: 0 0 10px; text-align: center; }
.tg-prod { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid var(--line); margin-bottom: 8px; color: var(--ink); text-decoration: none; animation: tgIn .5s both; }
.tg-prod:nth-child(3) { animation-delay: .1s; } .tg-prod:nth-child(4) { animation-delay: .2s; }
.tg-prod-img { flex: 0 0 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--paper); }
.tg-prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-prod-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tg-prod-txt em { font-style: normal; font-size: 11px; color: #fff; background: var(--seal); border-radius: 999px; padding: 1px 8px; align-self: flex-start; letter-spacing: .1em; }
.tg-prod-txt b { font-size: 14px; line-height: 1.4; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tg-prod-txt i { font-style: normal; font-size: 13px; color: var(--seal); font-weight: 700; }
.tg-prod.main { border-color: var(--amber); box-shadow: 0 6px 18px rgba(194, 138, 58, .2); }
.tg-prod.main .tg-prod-img { flex-basis: 84px; height: 84px; }
.tg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-actions .tg-cta { flex: 1 0 100%; }

/* ---------- 載入 ---------- */
#tg-load { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #282828; color: var(--paper); transition: opacity .5s, visibility .5s; }
#tg-load.done { opacity: 0; visibility: hidden; }
#tg-load p { font-family: var(--serif); letter-spacing: .3em; margin: 0; }
#tg-load span { width: 160px; height: 2px; background: rgba(255, 255, 255, .15); overflow: hidden; }
#tg-load u { display: block; height: 100%; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.tg-load-seal { width: 56px; height: 56px; background: var(--seal); color: #fff; border-radius: 6px; display: grid; place-items: center; font-family: var(--serif); font-weight: 900; line-height: 1.05; animation: tgBreath 1.4s ease-in-out infinite alternate; }
@keyframes tgBreath { to { transform: scale(1.08); } }

/* 遊戲內按鈕（各遊戲共用） */
.tg-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: center; gap: 10px; padding: 0 14px calc(16px + env(safe-area-inset-bottom)); pointer-events: none; }
.tg-dock button { pointer-events: auto; border: 0; border-radius: 999px; padding: 13px 22px; min-width: 104px; font-family: var(--serif); font-weight: 900; font-size: 17px; letter-spacing: .16em; background: var(--paper-2); color: var(--ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); cursor: pointer; transition: transform .12s, opacity .2s, background .2s; }
.tg-dock button:active { transform: scale(.94); }
.tg-dock button.hot { background: var(--seal); color: #fff; animation: tgPulse 1s infinite; }
.tg-dock button:disabled { opacity: .4; }
@keyframes tgPulse { 50% { box-shadow: 0 0 0 8px rgba(192, 102, 78, .25), 0 6px 18px rgba(0, 0, 0, .25); } }

/* ---------- 茶櫃翻翻樂（match）：DOM 牌卡，canvas 疊上層只畫特效 ---------- */
#tg-cv.tg-cv-fx { pointer-events: none; z-index: 3; }
.tg-mgrid { position: absolute; z-index: 2; left: 8px; right: 8px; top: calc(60px + env(safe-area-inset-top)); bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; gap: 6px; perspective: 900px; }
.tg-mgrid::before { content: ''; position: absolute; inset: -80px -8px -20px; z-index: -1; background: url(../images/games/bg/table.webp) center/cover; opacity: .55; pointer-events: none; }
.tg-mc { position: relative; border: 0; padding: 0; background: none; cursor: pointer; min-width: 0; min-height: 0; animation: tgDeal .45s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes tgDeal { from { opacity: 0; transform: translateY(-30px) rotate(-8deg) scale(.6); } }
.tg-mc .in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .42s cubic-bezier(.3, 1.4, .5, 1); }
.tg-mc.up .in { transform: rotateY(180deg); }
.tg-mc .back, .tg-mc .front { position: absolute; inset: 0; border-radius: 9px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; box-shadow: 0 3px 8px rgba(40, 40, 40, .22); }
.tg-mc .back { background: #3a3632 url(../images/games/sprites/cards.webp) 100% 50% / 600% 100% no-repeat; border: 2px solid #c49a3a; }
.tg-mc .front { transform: rotateY(180deg); background: #fffdf8; border: 2px solid var(--line); display: flex; flex-direction: column; }
.tg-mc .front img { width: 100%; flex: 1 1 auto; min-height: 0; object-fit: cover; display: block; background: var(--paper); }
.tg-mc .front b { flex: 0 0 auto; font-size: 11px; line-height: 1.25; font-weight: 700; padding: 3px 4px 4px; color: var(--ink); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tg-mgrid.dense { gap: 5px; }
.tg-mgrid.dense .tg-mc .front b { font-size: 9px; padding: 2px 2px 3px; }
.tg-mgrid.dense .tg-mc .back, .tg-mgrid.dense .tg-mc .front { border-radius: 7px; border-width: 1.5px; }
.tg-mc.no .front { animation: tgNo .4s; border-color: var(--seal); }
@keyframes tgNo { 25% { transform: rotateY(180deg) translateX(-4px); } 75% { transform: rotateY(180deg) translateX(4px); } }
.tg-mc.done .front { border-color: #c49a3a; box-shadow: 0 0 0 2px rgba(196, 154, 58, .5), 0 4px 14px rgba(196, 154, 58, .45); }
.tg-mc.done .in { animation: tgPop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tgPop { 40% { transform: rotateY(180deg) scale(1.12); } }

/* ---------- 操作示範 ---------- */
.tg-start-btns { display: grid; gap: 8px; position: relative; z-index: 1; }
.tg-demo-btn { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: .1em; background: #fff; }
.tg-demo-btn svg { width: 16px; height: 16px; fill: var(--seal); }
.tg-demo { position: absolute; inset: 0; z-index: 9; }
.tg-demo-bar { position: absolute; left: 12px; right: 12px; bottom: calc(86px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; background: rgba(40, 40, 40, .86); color: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.tg-demo-tag { flex: 0 0 auto; font-family: var(--serif); font-size: 12px; font-weight: 900; letter-spacing: .14em; background: var(--seal); border-radius: 999px; padding: 3px 10px; animation: tgBreath 1s ease-in-out infinite alternate; }
.tg-demo-bar p { flex: 1; margin: 0; font-size: 15px; line-height: 1.45; font-weight: 700; }
.tg-demo-bar p.in { animation: tgCapIn .35s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes tgCapIn { from { opacity: 0; transform: translateY(8px); } }
#tg-skip { flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .5); background: transparent; color: #fff; border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 700; cursor: pointer; }
#tg-skip:active { transform: scale(.95); }
.tg-demo.top .tg-demo-bar { bottom: auto; top: calc(62px + env(safe-area-inset-top)); }
/* 結算分享 */
.tg-sharebox { margin: 4px 0 16px; padding: 12px 8px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); position: relative; z-index: 1; }
.tg-sharebox .tg-share-btn { width: 40px; height: 40px; font-size: 18px; }

/* ---------- 人次／全站最高分 ---------- */
.tg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 14px; position: relative; z-index: 1; }
.tg-stats span { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 7px 4px 8px; text-align: center; }
.tg-stats i { display: block; font-style: normal; font-size: 11px; color: var(--ink-2); letter-spacing: .08em; }
.tg-stats b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 900; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tg-stats span:nth-child(2) b { color: var(--seal); }
.tg-world { margin: -2px 0 12px; font-size: 14px; color: var(--ink); min-height: 1.4em; position: relative; z-index: 1; }
.tg-world b { color: var(--seal); font-family: var(--serif); }
.tg-world small { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.tg-world.is-rec .tg-world-rec { display: inline-block; color: #fff; background: var(--seal); border-radius: 999px; padding: 4px 14px; font-size: 15px; letter-spacing: .1em; animation: tgStamp .6s cubic-bezier(.2, 1.6, .4, 1) both; }