/* 拜請眾神明 — 樣式
   調性：廟埕黃昏的馬卡龍粉彩、宣紙質感、神明紅＋金只用在「請神」的時刻。
   動態只做三件事：畫面左右滑動、棋盤點燈式開場、神明落座的光圈。 */
:root {
  --pink: #FFD6E0; --mint: #C9F2E5; --lav: #E3D7FF; --butter: #FFF3B0; --peach: #FFD9B8;
  --paper: #FBF2EE; --paper-2: #F4E9F3;
  --ink: #3B2A3A; --ink-2: #6E5A6E; --ink-3: #9B8A9B; --line: #4A3348;
  --red: #D94A5B; --red-2: #FF8C6B; --gold: #E0A83A; --gold-2: #F6CF6B;
  --card: rgba(255, 251, 248, 0.86);
  --r-lg: 26px; --r-md: 18px; --r-sm: 12px;
  --shadow-lg: 0 24px 48px -16px rgba(74, 51, 72, .32), 0 2px 6px rgba(74, 51, 72, .08);
  --shadow-md: 0 10px 24px -10px rgba(74, 51, 72, .25), 0 1px 3px rgba(74, 51, 72, .06);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --font-title: 'Noto Serif TC', 'PingFang TC', 'Songti TC', serif;
  --font: 'Noto Sans TC', 'PingFang TC', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); color: var(--ink); background: linear-gradient(165deg, #FFE6EC 0%, #F1E6FA 48%, #DFF4EC 100%); overflow: hidden; -webkit-font-smoothing: antialiased; }
/* 宣紙紋理：整站一層很淡的顆粒，讓粉彩不會塑膠感 */
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: .06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
#app { position: fixed; inset: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
button { font-family: inherit; font-size: inherit; cursor: pointer; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- 畫面切換：像拉開廟門，左右滑 ---------- */
.screen { position: absolute; inset: 0; display: none; flex-direction: column; overflow: hidden; will-change: transform, opacity; transition: transform .38s var(--ease-out), opacity .3s ease; }
.screen.active { display: flex; }
.screen.enter-right { transform: translateX(7%); opacity: 0; }
.screen.enter-left { transform: translateX(-7%); opacity: 0; }
.screen.exit-left { transform: translateX(-7%); opacity: 0; pointer-events: none; }
.screen.exit-right { transform: translateX(7%); opacity: 0; pointer-events: none; }

/* ---------- 按鈕 ---------- */
.btn { border: 0; border-radius: 999px; padding: 13px 24px; font-weight: 700; font-size: 16px; letter-spacing: .04em; transition: transform .18s var(--ease-spring), box-shadow .18s ease, filter .18s ease; }
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: scale(.95); }
.btn-primary { background: linear-gradient(135deg, var(--red), var(--red-2)); color: #fff; box-shadow: 0 10px 22px -8px rgba(217, 74, 91, .6), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-ghost { background: rgba(255,255,255,.72); color: var(--ink); padding: 9px 16px; font-size: 14px; box-shadow: var(--shadow-md); backdrop-filter: blur(8px); }
.link { background: none; border: 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(110,90,110,.4); }
.link.small { font-size: 13px; }

/* ---------- 進入頁 ---------- */
#screen-entry { justify-content: flex-end; align-items: center; }
#screen-entry .bg { position: absolute; inset: -2%; background: url(../assets/bg_temple.jpg) center 35% / cover no-repeat; animation: bgdrift 36s ease-in-out infinite alternate; }
@keyframes bgdrift { from { transform: scale(1) translateY(0); } to { transform: scale(1.06) translateY(-1.2%); } }
#screen-entry .bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,230,236,0) 45%, rgba(251,242,238,.55) 75%, rgba(251,242,238,.9) 100%); }
.glow { position: absolute; border-radius: 50%; filter: blur(26px); opacity: .5; pointer-events: none; mix-blend-mode: screen; }
.g1 { width: 170px; height: 170px; left: 6%; top: 7%; background: #FFB8B8; animation: pulse 5s ease-in-out infinite; }
.g2 { width: 130px; height: 130px; right: 9%; top: 13%; background: #FFF0A8; animation: pulse 6s ease-in-out 1.3s infinite; }
.g3 { width: 220px; height: 220px; left: 38%; top: 18%; background: #FFC9DE; animation: pulse 7s ease-in-out 2.2s infinite; }
@keyframes pulse { 0%, 100% { opacity: .3; transform: scale(1); } 50% { opacity: .65; transform: scale(1.12); } }
.smoke { position: absolute; left: 50%; bottom: 42%; width: 60px; height: 160px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,255,255,.7), rgba(255,255,255,0) 70%); filter: blur(9px); pointer-events: none; animation: rise 8s linear infinite; }
.smoke.s2 { animation-delay: 4s; width: 40px; }
@keyframes rise { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 20% { opacity: .75; } 100% { transform: translate(-30%, -260px) scale(1.6); opacity: 0; } }
.heroes { position: absolute; left: 0; right: 0; bottom: 43%; height: min(36vh, 50vw); max-height: 400px; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; }
.hero { height: 100%; width: auto; flex-shrink: 0; filter: drop-shadow(0 16px 18px rgba(80, 40, 70, .32)); transform-origin: 50% 100%; }
.h-mazu { height: 100%; z-index: 2; animation: bob 3.4s ease-in-out infinite; }
.h-huye { height: 72%; margin-left: -6%; z-index: 3; animation: bob 2.8s ease-in-out .4s infinite; }
.h-tudigong { height: 80%; margin-right: -6%; z-index: 1; animation: bob 3.8s ease-in-out .9s infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
.entry-card { position: relative; z-index: 5; width: min(92vw, 440px); margin-bottom: max(18px, env(safe-area-inset-bottom)); background: var(--card); border-radius: var(--r-lg); padding: 24px 22px 16px; text-align: center; box-shadow: var(--shadow-lg); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.7); }
.eyebrow { margin: 0 0 2px; font-size: 13px; color: var(--ink-2); }
.title { margin: 0; font-family: var(--font-title); font-weight: 900; font-size: clamp(36px, 9.5vw, 48px); letter-spacing: .1em; line-height: 1.2; background: linear-gradient(135deg, #C93B4E 0%, #E6705E 55%, #E0A83A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { margin: 10px 0 16px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
#entry-form { display: flex; flex-direction: column; gap: 10px; }
#entry-form input { font-family: inherit; font-size: 17px; padding: 13px 16px; border-radius: 999px; border: 2px solid #F0D3DA; background: #fff; text-align: center; outline: none; transition: border-color .2s, box-shadow .2s; }
#entry-form input:focus { border-color: var(--red); box-shadow: 0 0 0 4px rgba(217,74,91,.15); }
.entry-card .link { margin-top: 10px; font-size: 13px; }

/* ---------- 共用 topbar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; }
.topbar h2 { margin: 0; font-family: var(--font-title); font-size: 21px; letter-spacing: .12em; }
.who { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; max-width: 40%; }
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot { padding: 10px; text-align: center; }

/* ---------- 神明階梯 ---------- */
.tiers { flex: 1; overflow-y: auto; padding: 4px 14px 28px; display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tiers::-webkit-scrollbar { display: none; }
.tier { flex-shrink: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; background: var(--card); border-radius: var(--r-lg); padding: 12px 14px 12px 12px; box-shadow: var(--shadow-md); position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.7); animation: tierin .5s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes tierin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tier::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, var(--tier-color, var(--pink)) 0%, transparent 70%); opacity: .7; z-index: 0; }
.tier > * { position: relative; z-index: 1; }
.tier.locked { filter: saturate(.25); opacity: .72; }
.tier .pic { width: 84px; height: 84px; display: grid; place-items: center; background: rgba(255,255,255,.75); border-radius: 20px; box-shadow: inset 0 1px 0 #fff; }
.tier .pic img { max-width: 72px; max-height: 72px; filter: drop-shadow(0 4px 4px rgba(74,51,72,.18)); }
.tier .name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tier .name strong { font-family: var(--font-title); font-size: 20px; letter-spacing: .06em; }
.tier .chip { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(74,51,72,.08); color: var(--ink-2); }
.tier .done { font-size: 12px; color: var(--ink-2); margin-left: auto; }
.progress { height: 4px; border-radius: 4px; background: rgba(74,51,72,.1); margin: 7px 0 8px; overflow: hidden; }
.progress i { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, var(--gold), var(--gold-2)); border-radius: 4px; transition: width .6s var(--ease-out); }
.levels { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.lv { aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 9px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.8); color: var(--ink-2); display: grid; place-items: center; transition: transform .15s var(--ease-spring), background .2s; }
.lv:active { transform: scale(.9); }
.lv.done { background: var(--gold); color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); }
.lv.next { background: var(--red); color: #fff; box-shadow: 0 0 0 0 rgba(217,74,91,.5); animation: ring 1.8s ease-out infinite; }
.lv.locked { opacity: .4; cursor: default; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(217,74,91,.5); } 100% { box-shadow: 0 0 0 9px rgba(217,74,91,0); } }

/* ---------- 遊戲 ---------- */
#screen-game { background: linear-gradient(172deg, #FFF0F3 0%, #F2EAFB 55%, #E4F6F0 100%); }
.game-top { padding-bottom: 2px; }
.level-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.level-title img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(74,51,72,.2)); }
.level-title div { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.level-title strong { font-family: var(--font-title); font-size: 18px; letter-spacing: .06em; }
.level-title span { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timer { font-family: var(--font-title); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 20px; min-width: 60px; text-align: right; letter-spacing: .04em; }
.status-row { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 4px 0 8px; }
.lives { display: flex; gap: 12px; }
.remain { font-family: var(--font-title); font-weight: 700; font-size: 15px; letter-spacing: .06em; color: var(--ink-2); padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.6); }
.lives img { width: 46px; height: 32px; object-fit: contain; transition: filter .4s, transform .5s var(--ease-spring), opacity .4s; filter: drop-shadow(0 3px 3px rgba(74,51,72,.2)); }
.lives img.lost { filter: grayscale(1); opacity: .3; transform: rotate(180deg) scale(.85); }
.lives img.shake { animation: shake .55s; }
@keyframes shake { 0%,100% { transform: translateX(0);} 20% { transform: translateX(-7px) rotate(-10deg);} 40% { transform: translateX(7px) rotate(10deg);} 60% { transform: translateX(-4px);} 80% { transform: translateX(4px);} }
.board-wrap { flex: 1; display: grid; place-items: center; padding: 6px 12px; min-height: 0; }
.board { --n: 5; --cell: calc(min(92vw, 66vh, 540px) / var(--n)); display: grid; grid-template-columns: repeat(var(--n), var(--cell)); grid-template-rows: repeat(var(--n), var(--cell)); border: 3px solid var(--line); border-radius: 12px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.55), var(--shadow-lg); }
/* 棋盤開場：像點燈，斜向一格一格亮起 */
.cell { position: relative; border-right: 1px solid rgba(74,51,72,.2); border-bottom: 1px solid rgba(74,51,72,.2); display: grid; place-items: center; font-weight: 700; color: var(--ink-2); font-size: calc(var(--cell) * .42); animation: cellin .42s var(--ease-out) both; animation-delay: var(--d, 0ms); }
@keyframes cellin { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
.cell.bt { border-top: 3px solid var(--line); margin-top: -3px; }
.cell.bl { border-left: 3px solid var(--line); margin-left: -3px; }
.cell.br { border-right: 3px solid var(--line); }
.cell.bb { border-bottom: 3px solid var(--line); }
.cell img { width: 84%; height: 84%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.2)); animation: seat .5s var(--ease-spring); position: relative; z-index: 2; }
@keyframes seat { 0% { transform: translateY(-30%) scale(.5); opacity: 0; } 60% { transform: translateY(2%) scale(1.06); opacity: 1; } 100% { transform: none; } }
/* 落座光圈：神明紅＋金，只在這一刻出現 */
.cell.seated::before { content: ''; position: absolute; inset: 10%; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 0 0 2px rgba(255,255,255,.7), 0 0 18px var(--gold-2); z-index: 1; animation: halo .75s ease-out forwards; }
@keyframes halo { 0% { transform: scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
.cell.x::after { content: '✕'; opacity: .55; animation: xin .18s var(--ease-out); }
@keyframes xin { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: .55; } }
.cell.given::before { content: ''; position: absolute; inset: 7%; border-radius: 30%; background: rgba(255,255,255,.5); }
.cell.wrong { animation: wrongflash .55s; }
@keyframes wrongflash { 0%,100% { box-shadow: none; } 30% { box-shadow: inset 0 0 0 100px rgba(217,74,91,.55); } }
.cell.hint { animation: hintglow 1.2s ease-in-out 3; }
.cell.nudge img { animation: nudge .35s var(--ease-spring); }
@keyframes nudge { 0%,100% { transform: none; } 40% { transform: scale(1.12) rotate(-4deg); } 70% { transform: scale(1.04) rotate(3deg); } }
@keyframes hintglow { 0%,100% { box-shadow: inset 0 0 0 0 rgba(224,168,58,0); } 50% { box-shadow: inset 0 0 0 6px rgba(224,168,58,.95); } }
.toolbar { display: flex; justify-content: center; gap: 10px; padding: 10px 12px calc(14px + env(safe-area-inset-bottom)); }
.tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 86px; height: 70px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.7); border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow-md); font-size: 13px; font-weight: 700; color: var(--ink); transition: transform .18s var(--ease-spring), box-shadow .18s; backdrop-filter: blur(8px); }
.tool svg { width: 24px; height: 24px; stroke: var(--ink); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tool img { height: 26px; }
.tool small { font-size: 10px; color: var(--ink-3); font-weight: 500; line-height: 1; }
.tool:active { transform: scale(.93); }
.toast { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%) translateY(12px); background: rgba(59,42,58,.94); color: #fff; padding: 11px 18px; border-radius: 16px; font-size: 14px; line-height: 1.5; max-width: 86vw; text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s var(--ease-out); z-index: 20; box-shadow: var(--shadow-lg); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 排行榜 ---------- */
.board-note { margin: 0 16px 10px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.board-list { flex: 1; overflow-y: auto; margin: 0; padding: 0 14px 28px; list-style: none; display: flex; flex-direction: column; gap: 8px; scrollbar-width: none; }
.board-list::-webkit-scrollbar { display: none; }
.board-list li { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; background: var(--card); border-radius: var(--r-md); padding: 10px 14px; box-shadow: var(--shadow-md); border: 1px solid rgba(255,255,255,.7); animation: tierin .4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
.board-list li.me { box-shadow: 0 0 0 3px var(--gold), var(--shadow-md); }
.board-list li.muted { grid-template-columns: 1fr; color: var(--ink-2); text-align: center; }
.board-list .rank { font-family: var(--font-title); font-size: 21px; color: var(--ink-3); text-align: center; }
.board-list .rank.top { color: var(--red); }
.board-list .nick { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .stage { font-size: 12px; color: var(--ink-2); font-weight: 400; display: block; }
.board-list .score { text-align: right; font-variant-numeric: tabular-nums; }
.board-list .score strong { display: block; font-size: 16px; font-family: var(--font-title); }
.board-list .score span { font-size: 12px; color: var(--ink-2); }

/* ---------- 覆蓋層：由下往上浮出 ---------- */
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(60, 40, 70, .42); backdrop-filter: blur(6px); z-index: 50; padding: 20px; animation: fade .25s ease; }
.overlay[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.dialog { width: min(92vw, 420px); background: var(--card); border-radius: 28px; padding: 26px 22px 20px; text-align: center; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.75); animation: dialogin .45s var(--ease-spring); max-height: 86vh; overflow-y: auto; backdrop-filter: blur(14px); }
@keyframes dialogin { from { opacity: 0; transform: translateY(36px) scale(.96); } to { opacity: 1; transform: none; } }
.dialog h3 { margin: 0 0 6px; font-family: var(--font-title); font-size: 28px; letter-spacing: .14em; }
.dialog p { margin: 6px 0; color: var(--ink-2); line-height: 1.65; font-size: 14.5px; }
.dialog .big { font-family: var(--font-title); font-size: 38px; font-weight: 900; color: var(--red); margin: 6px 0; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.dialog img.deity { height: 124px; margin: 4px auto 6px; display: block; filter: drop-shadow(0 10px 12px rgba(80,40,70,.25)); animation: seat .6s var(--ease-spring) .1s both; }
.dialog img.jiao { height: 60px; margin: 4px 6px; display: inline-block; filter: drop-shadow(0 4px 4px rgba(74,51,72,.2)); }
.dialog img.jiao.yin { transform: rotate(180deg); filter: grayscale(.6); }
.dialog .actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.dialog .rules { text-align: left; margin: 10px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.75; }
.dialog .rules b { color: var(--red); }
.dialog .rules li { margin-bottom: 4px; }
.loading { font-family: var(--font-title); font-size: 22px; color: #fff; letter-spacing: .4em; animation: pulse 1.2s ease-in-out infinite; }

@media (max-height: 640px) { .heroes { height: min(32vh, 50vw); } .sub { display: none; } }
@media (hover: hover) { .btn:hover, .tool:hover, .lv:not(.locked):hover { transform: translateY(-1px); } .tier:hover .pic img { transform: translateY(-2px); transition: transform .25s var(--ease-spring); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}