/* 貓生模擬器 v3：貓眼相簿（紙感雜誌）＋暗房顯影（抽卡特效） */
:root {
  --paper: #EEEDE8;
  --frame: #D9D7D0;
  --ink: #161514;
  --ink2: #5C5852;
  --line: #BEBBB3;
  --red: #D7412A;
  --redtxt: #B8321F;
  --light: #F2F1EC;
  --dark-bg: radial-gradient(110% 70% at 50% 40%, #4A1410 0%, #1A0807 62%, #0E0505 100%);
  --rc: #CFC8BF;   /* 稀有度色 */
  --rd: #5C5852;   /* 稀有度深色（白底上的字） */
  --sans: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", "Noto Serif CJK TC", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --stage-w: 480px;
}
/* 全站禁雙擊縮放（不鎖雙指縮放，保留無障礙） */
html, body, button, a, input, label, select, summary, [role="button"] { touch-action: manipulation; }
#bg { display: none; }
.r1 { --rc: #CFC8BF; --rd: #5C5852; --rgb: 207, 200, 191; }
.r2 { --rc: #4EA8FF; --rd: #1F6FC4; --rgb: 78, 168, 255; }
.r3 { --rc: #B07CFF; --rd: #6B3FB5; --rgb: 176, 124, 255; }
.r4 { --rc: #FFC94A; --rd: #8A6400; --rgb: 255, 201, 74; }
.r5 { --rc: #FF4D5E; --rd: #B01E2E; --rgb: 255, 77, 94; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--frame); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  min-height: 100vh; overflow-x: hidden; -webkit-text-size-adjust: 100%;
}
body[data-scr="dark"], body[data-scr="home"] { background: #0E0505; }
html[data-lang="zh"] [lang="en"], html[data-lang="en"] [lang="zh"] { display: none !important; }
.mono { font-family: var(--mono); }
.hidden { display: none !important; }

#app {
  position: relative; max-width: var(--stage-w); margin: 0 auto; background: var(--paper);
  min-height: 100vh; min-height: 100svh; overflow-x: clip;
  padding-top: calc(56px + env(safe-area-inset-top));
}
body[data-scr="dark"] #app { background: var(--dark-bg); color: var(--light); padding-top: 0; }
body[data-scr="home"] #app { background: #161514; color: var(--light); padding-top: 0; }
#foot { max-width: var(--stage-w); margin: 0 auto; background: var(--paper); text-align: center; color: var(--ink2); font: 500 12px var(--mono); letter-spacing: 2px; padding: 8px 16px 28px; }
body[data-scr="dark"] #foot, body[data-scr="home"] #foot { display: none; }

/* 頂欄 */
#topbar {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 30;
  width: 100%; max-width: var(--stage-w); height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--paper); border-bottom: 1px solid var(--line); color: var(--ink);
}
body[data-scr="dark"] #topbar, body[data-scr="home"] #topbar { background: transparent; border-bottom-color: transparent; color: var(--light); }
#vol { display: none; font-size: 12px; letter-spacing: 1px; }
body[data-scr="home"] #vol { display: block; }
body[data-scr="home"] #homeBtn { display: none; }
.tb-right { display: flex; gap: 6px; align-items: center; }
.langs { display: flex; gap: 4px; }
#topbar button.tb {
  height: 44px; min-width: 44px; padding: 0 10px; border-radius: 4px; background: transparent; color: inherit;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent); font: 600 13px var(--mono); letter-spacing: 1px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
body[data-scr="dark"] #topbar button.tb, body[data-scr="home"] #topbar button.tb { background: rgba(22, 21, 20, .35); }
#topbar button.tb.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
body[data-scr="dark"] #topbar button.tb.on, body[data-scr="home"] #topbar button.tb.on { background: var(--light); color: var(--ink); border-color: var(--light); }
#soundBtn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 通用元件 */
h1, h2, h3, p { margin: 0; }
.pad { padding: 20px 22px 28px; }
.kicker { font: 500 12px var(--mono); letter-spacing: 2px; color: var(--ink2); text-transform: uppercase; }
.title { font: 900 30px/1.15 var(--serif); letter-spacing: -.5px; margin: 6px 0 4px; }
.lead { font: 500 15px/1.7 var(--serif); color: var(--ink2); }
.muted { color: var(--ink2); font-size: 14px; }
.stack > * + * { margin-top: 12px; }

button {
  font: 700 16px var(--sans); color: var(--ink); background: transparent;
  border: 1.5px solid var(--ink); border-radius: 4px; padding: 0 16px; min-height: 48px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
button:disabled { opacity: .4; cursor: not-allowed; }
button.primary { background: var(--red); border-color: var(--red); color: #fff; font-size: 18px; letter-spacing: 3px; min-height: 54px; }
button.primary:disabled { opacity: .4; }
button.on { background: var(--ink); color: var(--paper); }
button.small { min-height: 44px; padding: 0 14px; font-size: 15px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 4px; }
.row > * { flex: 1 1 130px; }
.row > .primary { flex: 1.4 1 160px; }
.btn-gold { background: var(--rc); border-color: var(--rc); color: #241A00; font-weight: 900; letter-spacing: 2px; }

.switch { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.switch input { width: 20px; height: 20px; accent-color: var(--red); }

label.field { display: block; margin: 18px 0 6px; font: 500 12px var(--mono); letter-spacing: 2px; color: var(--ink2); }
input[type="text"], input[type="date"] {
  width: 100%; font: 500 17px var(--sans); padding: 10px 12px; min-height: 48px;
  border: 1.5px solid var(--ink); border-radius: 4px; background: #fff; color: var(--ink);
}
.quiz-q { margin: 22px 0 8px; font: 700 17px/1.5 var(--serif); display: flex; gap: 10px; }
.quiz-q b { font: 600 12px var(--mono); color: var(--redtxt); letter-spacing: 1px; padding-top: 5px; }
.opts { display: grid; gap: 8px; }
.opts button { text-align: left; background: #fff; font-weight: 500; font-size: 15px; line-height: 1.45; padding: 10px 14px; }
.opts button.on { background: var(--ink); color: var(--paper); }

.badge { display: inline-block; padding: 1px 8px; font: 900 11px/1.6 var(--sans); letter-spacing: 1px; color: #fff; background: var(--rd); vertical-align: middle; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0 16px; margin: 18px 0; border-top: 1px solid var(--ink); }
.kv dt, .kv dd { padding: 9px 0; border-bottom: 1px solid var(--line); margin: 0; }
.kv dt { font: 500 12px/1.9 var(--mono); letter-spacing: 1px; color: var(--ink2); }
.kv dd { font: 500 15px/1.6 var(--serif); }
.kv dd .muted { font-family: var(--sans); font-size: 13px; }

/* 九命格 */
.nine { display: flex; align-items: center; gap: 5px; }
.nine i { width: 22px; height: 16px; border-radius: 2px; border: 1.5px solid rgba(242, 241, 236, .6); }
.nine i.on { background: #FFC94A; border-color: #FFC94A; }

/* 首頁 */
.home { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.home .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.home .shade { position: absolute; inset: 0; background: linear-gradient(rgba(22, 21, 20, .62) 0%, rgba(22, 21, 20, 0) 30%, rgba(22, 21, 20, 0) 48%, rgba(22, 21, 20, .92) 82%); }
.home-in { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: 70px 24px 26px; }
.home h1 { font: 900 76px/.95 var(--serif); letter-spacing: -2px; color: var(--light); text-shadow: 0 2px 20px rgba(0, 0, 0, .35); }
html[data-lang="en"] .home h1 { font-size: 60px; letter-spacing: -1.5px; }
.home .sub { font: 500 20px var(--serif); margin-top: 8px; color: var(--light); text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.home .grow { flex: 1; min-height: 40px; }
.home .tag { font: 700 22px/1.45 var(--serif); color: var(--light); text-shadow: 0 1px 12px rgba(0, 0, 0, .6); margin-bottom: 14px; }
.home .prog { margin-bottom: 8px; flex-wrap: wrap; }
.home .prog span { font: 500 12px var(--mono); color: #D9D7D0; margin-left: 6px; }
.home .switch { color: var(--light); }
.home button.start { width: 100%; height: 58px; font-size: 19px; letter-spacing: 6px; box-shadow: 0 0 28px rgba(215, 65, 42, .55); animation: breathe 3s ease-in-out infinite; }
.home .ghostbtn { width: 100%; margin-top: 10px; color: var(--light); border-color: rgba(242, 241, 236, .6); background: rgba(22, 21, 20, .35); }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 20px rgba(215, 65, 42, .4); } 50% { box-shadow: 0 0 36px rgba(215, 65, 42, .75); } }

/* ===== 拍立得 ===== */
.polaroid {
  position: relative; background: #fff; padding: 12px 12px 48px; width: 280px; max-width: 78%; margin: 0 auto;
  transform: rotate(-2deg); box-shadow: 0 20px 40px rgba(0, 0, 0, .45); color: var(--ink);
}
.polaroid::before { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: 0 0 0 0 transparent; transition: none; }
.polaroid.r2::before { box-shadow: 0 0 0 2px var(--rc), 0 0 32px rgba(var(--rgb), .55); }
.polaroid.r3::before { box-shadow: 0 0 0 3px var(--rc), 0 0 40px rgba(var(--rgb), .6); }
.polaroid.r4::before { box-shadow: 0 0 0 3px var(--rc), 0 0 50px rgba(var(--rgb), .75); }
.polaroid.r5::before { box-shadow: 0 0 0 3px var(--rc), 0 0 50px rgba(var(--rgb), .7), 0 0 100px rgba(255, 201, 74, .4); }
.polaroid .pimg { display: block; width: 100%; aspect-ratio: 256 / 330; object-fit: cover; object-position: 50% 28%; background: #E4E2DB; }
.polaroid .pimg.ph { display: grid; place-items: center; color: var(--ink2); font-size: 14px; }
.pcap { position: absolute; left: 14px; right: 80px; bottom: 15px; font: 500 12px/1.3 var(--mono); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stamp {
  position: absolute; right: -22px; bottom: -4px; width: 104px; height: 104px; border-radius: 50%;
  border: 3px solid var(--rd); color: var(--rd); background: rgba(255, 255, 255, .93);
  display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(14deg); text-align: center; line-height: 1.15;
}
.stamp b { font: 900 18px var(--serif); }
html[data-lang="en"] .stamp b { font-size: 14px; }
.stamp > span { font: 500 10px var(--mono); letter-spacing: 1px; margin-top: 2px; }
.polaroid.big { width: 320px; }

/* 光芒 */
.rays-wrap { position: absolute; left: 50%; top: 50%; width: 640px; height: 640px; margin: -320px 0 0 -320px; pointer-events: none; z-index: 0; display: none; }
.rays-wrap.r2, .rays-wrap.r3, .rays-wrap.r4, .rays-wrap.r5 { display: block; }
.rays-wrap .halo { position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--rgb), .42), transparent 68%); }
.rays-wrap .rays { display: none; position: absolute; inset: 0; border-radius: 50%; -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 70%); mask-image: radial-gradient(circle, #000 18%, transparent 70%); }
.rays-wrap.r3 .rays.a, .rays-wrap.r4 .rays.a, .rays-wrap.r5 .rays.a, .rays-wrap.r5 .rays.b { display: block; }
.rays.a { background: repeating-conic-gradient(from 0deg, rgba(var(--rgb), .34) 0deg, rgba(var(--rgb), 0) 9deg, rgba(var(--rgb), 0) 30deg); animation: spin 22s linear infinite; }
.rays.b { background: repeating-conic-gradient(from 15deg, rgba(255, 201, 74, .3) 0deg, rgba(255, 201, 74, 0) 8deg, rgba(255, 201, 74, 0) 36deg); animation: spin 30s linear infinite reverse; }
.polaroid, .rv-label { position: relative; z-index: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

.sparks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.sparks i { position: absolute; bottom: -12px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: var(--rc); box-shadow: 0 0 10px 2px rgba(var(--rgb), .9); opacity: 0; animation: floatUp var(--d) var(--dl) linear infinite; }
@keyframes floatUp { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--dx), -760px); opacity: 0; } }

/* ===== 暗房揭曉（投胎結果）===== */
.rv { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: 76px 24px 26px; gap: 14px; overflow: hidden; }
.rv-head { position: relative; z-index: 2; align-self: stretch; display: flex; justify-content: space-between; font: 500 12px var(--mono); color: #E9B9A8; }
.rv-label { font: 600 14px var(--mono); letter-spacing: 6px; color: var(--rc); text-shadow: 0 0 16px rgba(var(--rgb), .9); margin-top: 6px; }
.rv.r1 .rv-label { text-shadow: none; }
.rv-life { position: relative; z-index: 2; font: 700 13px var(--mono); letter-spacing: 2px; color: #E9D9D2; border: 1px solid rgba(233, 217, 210, .45); padding: 4px 12px; }
.rv.last .rv-life { color: #FFD86E; border-color: #FFD86E; background: rgba(214, 64, 52, .28); box-shadow: 0 0 18px rgba(255, 216, 110, .35); font-size: 14px; }
.rv-out { position: relative; z-index: 2; font-size: 13px; color: #FF9AA5; text-align: center; }
.rv-actions button:disabled { opacity: .45; cursor: not-allowed; }
.lh-life { flex: none; font-weight: 700; letter-spacing: 1px; }
.lh-life.last { color: #C43A2F; }
.rv .stagebox { position: relative; display: flex; justify-content: center; width: 100%; padding: 6px 0 10px; }
.rv h2 { position: relative; z-index: 2; font: 900 29px/1.25 var(--serif); color: var(--light); text-align: center; margin-top: 6px; }
.rv-chips { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 14px; color: #E9D9D2; text-align: center; }
.rv-chips .oc { color: #D4B5FF; }
.rv-chips .oc.r4 { color: #FFD86E; } .rv-chips .oc.r5 { color: #FF9AA5; } .rv-chips .oc.r2 { color: #8FC6FF; } .rv-chips .oc.r1 { color: #E9D9D2; }
.rv-note { position: relative; z-index: 2; font-size: 13px; color: #CDBAB2; text-align: center; max-width: 320px; }
.rv .grow { flex: 1; min-height: 8px; }
.rv-actions { position: relative; z-index: 2; align-self: stretch; display: flex; gap: 12px; }
.rv-actions button { flex: 1; min-height: 54px; color: var(--light); border-color: var(--light); }
.rv-actions button.btn-gold { flex: 1.4; color: #241A00; }
.rv-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5; }
.st-dev { display: none; }
.rv.playing .st-dev { display: inline; } .rv.playing .st-done { display: none; }
.rv.playing .rv-actions { pointer-events: none; }

/* 揭曉時序：各稀有度的延遲／長度 */
.rv.r1 { --dd: .05s; --dt: .45s; --sd: .3s; --ad: .45s; }
.rv.r2 { --dd: .2s; --dt: .6s; --sd: .8s; --ad: 1s; }
.rv.r3 { --dd: .4s; --dt: .8s; --sd: 1.25s; --ad: 1.5s; }
.rv.r4 { --dd: .55s; --dt: 1s; --sd: 1.7s; --ad: 2s; }
.rv.r5 { --dd: .6s; --dt: 1.1s; --sd: 2s; --ad: 2.4s; }
.rv.playing .pimg { animation: develop var(--dt) var(--dd) both ease-out; }
.rv.playing .polaroid::before { animation: fadeIn .5s calc(var(--dd) + var(--dt) * .5) both; }
.rv.playing .rays-wrap { animation: fadeIn .8s calc(var(--dd) - .1s) both; }
.rv.playing .rv-life, .rv.playing .rv-label, .rv.playing .rv-chips, .rv.playing h2, .rv.playing .rv-note { animation: rise .5s var(--sd) both; }
.rv.playing .stamp { animation: stampIn .42s var(--sd) both cubic-bezier(.2, 1.3, .4, 1); }
.rv.playing .rv-actions { animation: fadeIn .4s var(--ad) both; }
.rv.playing .polaroid { animation: polIn .5s both ease-out; }
.rv.playing.r5 { animation: shake .5s 1.3s both; }
.rv.playing.r5 .rv-flash { animation: flash .6s 1.3s both; }
.rv.playing .sparks { animation: fadeIn 1s var(--dd) both; }
@keyframes develop {
  0% { opacity: 0; filter: grayscale(1) brightness(.3) blur(18px); }
  25% { opacity: 1; filter: grayscale(1) sepia(.6) brightness(.35) blur(14px); }
  70% { filter: grayscale(.5) sepia(.4) brightness(.8) blur(4px); }
  100% { opacity: 1; filter: none; }
}
@keyframes polIn { from { opacity: 0; transform: rotate(-2deg) translateY(24px) scale(.96); } to { opacity: 1; transform: rotate(-2deg); } }
@keyframes stampIn { 0% { opacity: 0; transform: rotate(14deg) scale(2.6); } 70% { opacity: 1; transform: rotate(14deg) scale(.92); } 100% { opacity: 1; transform: rotate(14deg) scale(1); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes shake { 0%, 100% { transform: none; } 15% { transform: translate(-7px, 4px); } 30% { transform: translate(6px, -5px); } 45% { transform: translate(-5px, -3px); } 60% { transform: translate(4px, 5px); } 80% { transform: translate(-2px, 2px); } }
@keyframes flash { 0% { opacity: 0; } 25% { opacity: .85; } 100% { opacity: 0; } }

/* ===== 天賦抽卡 ===== */
.tal { position: relative; min-height: 100vh; min-height: 100svh; padding: 76px 18px 28px; }
.tal .kicker { color: #E9B9A8; }
.tal .title { color: var(--light); font-size: 26px; }
.tal .count { font: 600 14px var(--mono); color: #FFC94A; letter-spacing: 2px; margin: 4px 0 14px; }
.deck { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; perspective: 1000px; }
.tcard { position: relative; padding: 0; border: 0; background: none; text-align: left; min-height: 0; color: inherit; font-weight: 400; border-radius: 4px; }
.tcard:disabled { opacity: 1; }
.tcard.dealing { animation: deal .5s var(--dl, 0s) both cubic-bezier(.2, .9, .3, 1); }
.tcard .tin { display: grid; transition: transform .55s cubic-bezier(.3, 1.2, .5, 1); transform-style: preserve-3d; }
.tcard.flipped .tin { transform: rotateY(180deg); }
.tback, .tface { grid-area: 1 / 1; border-radius: 4px; -webkit-backface-visibility: hidden; backface-visibility: hidden; min-height: 128px; }
.tback { background: linear-gradient(135deg, #3A120E, #1F0907); border: 1px solid rgba(255, 201, 74, .5); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.tback::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(255, 201, 74, .25); border-radius: 2px; }
.tback b { font: 900 38px var(--serif); color: rgba(255, 201, 74, .75); }
.tback span { font: 500 11px var(--mono); letter-spacing: 2px; color: rgba(255, 201, 74, .6); }
.tface { transform: rotateY(180deg); background: #F6F5F0; color: var(--ink); border: 2px solid var(--rc); padding: 10px 11px 12px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 3px; }
.tface .rl { font: 600 11px var(--mono); letter-spacing: 1.5px; color: var(--rd); }
.tface .tn { font: 900 18px/1.25 var(--serif); }
.tface .td { font: 400 13px/1.5 var(--sans); color: var(--ink2); }
.tface > * { position: relative; z-index: 1; }
.tcard.flipped.r3 .tface, .tcard.flipped.r4 .tface, .tcard.flipped.r5 .tface { box-shadow: 0 0 20px rgba(var(--rgb), .65); }
.tcard.flipped.r2 .tface { box-shadow: 0 0 10px rgba(var(--rgb), .4); }
.tcard.flipped.r4 .tface, .tcard.flipped.r5 .tface { background: #FFFBEF; }
.tface::before { content: ""; display: none; position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; background: repeating-conic-gradient(from 0deg, rgba(var(--rgb), .3) 0deg, rgba(var(--rgb), 0) 9deg, rgba(var(--rgb), 0) 30deg); animation: spin 14s linear infinite; z-index: 0; }
.tcard.r4 .tface::before, .tcard.r5 .tface::before { display: block; }
.tcard.flipped.r3 .tface::after, .tcard.flipped.r4 .tface::after, .tcard.flipped.r5 .tface::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .95), rgba(var(--rgb), .35) 45%, transparent 70%); opacity: 0; animation: flare .7s .3s both; pointer-events: none; z-index: 2; }
@keyframes flare { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.tnum { position: absolute; top: -8px; right: -6px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; font: 700 14px/28px var(--mono); text-align: center; display: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.tcard.sel .tnum { display: block; animation: stampIn2 .3s both; }
.tcard.sel .tface { box-shadow: 0 0 0 3px #F2F1EC, 0 0 0 5px var(--red), 0 0 24px rgba(var(--rgb), .5); }
.deck.full .tcard:not(.sel).flipped .tface { opacity: .55; }
@keyframes stampIn2 { from { transform: scale(2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes deal { from { opacity: 0; transform: translateY(-120px) rotate(-10deg) scale(.8); } to { opacity: 1; transform: none; } }
.tal .row button:not(.primary) { color: var(--light); border-color: var(--light); }

/* ===== 屬性配點 ===== */
.pool { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); padding: 10px 0; margin: 14px 0 6px; }
.pool .lbl { font: 500 12px var(--mono); letter-spacing: 2px; color: var(--ink2); }
.pool .num { font: 900 40px/1 var(--serif); color: var(--redtxt); }

/* ===== 逐年日記 ===== */
.lifehead { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 5; background: var(--paper); padding: 14px 22px 12px; display: flex; gap: 14px; align-items: flex-end; border-bottom: 1px solid var(--ink); }
.lifehead .ph, .lifehead img { width: 58px; height: 58px; object-fit: cover; object-position: 50% 25%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(22, 21, 20, .25); background: #E4E2DB; flex: none; display: block; }
.lifehead .ph { display: grid; place-items: center; font-size: 11px; color: var(--ink2); }
.lh-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lh-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lh-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; font: 900 28px/1 var(--serif); white-space: nowrap; }
.lh-name .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lh-name small { font-size: 15px; font-weight: 900; flex: none; }
.lh-lives { font: 500 12px var(--mono); color: var(--ink2); white-space: nowrap; }
.lh-bar { display: flex; gap: 8px; align-items: center; font: 500 11px var(--mono); color: var(--ink2); }
.lh-bar div { flex: 1; height: 4px; background: #CFCCC4; }
.lh-bar i { display: block; height: 4px; background: var(--ink); transition: width .4s; }
#log { padding: 18px 22px 36px; }
.ent { display: flex; gap: 14px; margin-bottom: 16px; animation: rise .45s both; scroll-margin-bottom: 110px; }
.ent .age { font: 900 22px/1.3 var(--serif); width: 30px; flex: none; }
.ent .bd { flex: 1; min-width: 0; font: 500 16px/1.75 var(--serif); }
.ent.r2 .bd { border-left: 2px solid var(--rc); padding-left: 10px; }
.ent.r3 .bd, .ent.r4 .bd, .ent.r5 .bd { position: relative; overflow: hidden; padding: 12px 14px; background: #fff; box-shadow: 0 0 0 2px var(--rc), 0 0 22px rgba(var(--rgb), .55); display: flex; flex-direction: column; gap: 6px; }
.ent.r4 .bd { background: #FFFBEF; box-shadow: 0 0 0 2px var(--rc), 0 0 26px rgba(var(--rgb), .7); }
.ent.r5 .bd { background: #FFF6F6; box-shadow: 0 0 0 2px var(--rc), 0 0 30px rgba(var(--rgb), .7), 0 0 50px rgba(255, 201, 74, .3); }
.ent .chip { align-self: flex-start; padding: 2px 8px; background: var(--rd); color: #fff; font: 900 11px/1.6 var(--sans); letter-spacing: 1px; }
.ent.r3 .bd::after, .ent.r4 .bd::after, .ent.r5 .bd::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%); transform: translateX(-130%); animation: sweep 1.1s .35s 1 both; pointer-events: none; }
@keyframes sweep { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
.ent.note .bd { font: 600 14px/1.6 var(--sans); color: var(--redtxt); }
.ent.res .bd { font-size: 15px; color: var(--ink2); }
.ent.dead .bd { font: 900 17px/1.6 var(--serif); }
.ent.choice .age { color: var(--red); }
.ent.choice .tagm { font: 600 12px var(--mono); letter-spacing: 2px; color: var(--redtxt); }
.ent.choice .opts { margin-top: 10px; }
.ent.choice .opts button { background: #fff; border-color: var(--red); color: var(--redtxt); font-weight: 700; font-size: 16px; min-height: 48px; }
.ent.choice .opts button.on { background: var(--red); color: #fff; }
.ent.choice .opts button:disabled:not(.on) { opacity: .45; }
.lifebar { position: sticky; bottom: 0; z-index: 5; background: var(--paper); border-top: 1px solid var(--line); padding: 12px 22px calc(14px + env(safe-area-inset-bottom)); display: flex; gap: 10px; }
.lifebar button { flex: 1; min-height: 46px; font-size: 15px; }
.lifebar button.primary { letter-spacing: 2px; font-size: 16px; }

/* ===== 復活演出 ===== */
.revive-fx { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: rgba(10, 3, 3, 0); transition: background .35s; overflow: hidden; cursor: pointer; }
.revive-fx.go { background: rgba(10, 3, 3, .94); }
.revive-fx.out { opacity: 0; transition: opacity .22s; }
.rv-t { font: 900 28px/1.3 var(--serif); color: var(--light); text-align: center; padding: 0 28px; opacity: 0; position: relative; z-index: 1; }
.revive-fx.go .rv-t { animation: fadeIn .4s .3s both; }
.revive-fx .lives { display: flex; gap: 6px; position: relative; z-index: 1; }
.revive-fx .life { width: 26px; height: 20px; border-radius: 2px; border: 1.5px solid rgba(242, 241, 236, .55); }
.revive-fx .life.on { background: #FFC94A; border-color: #FFC94A; }
.revive-fx .life.burn { background: #FFC94A; border-color: #FFC94A; }
.revive-fx.go .life.burn { animation: burn 1s .45s both; }
@keyframes burn { 0% { background: #FFC94A; transform: scale(1); } 35% { background: #FF4D5E; border-color: #FF4D5E; transform: scale(1.5); box-shadow: 0 0 18px #FF4D5E; } 100% { background: transparent; border-color: rgba(242, 241, 236, .55); transform: scale(1); box-shadow: none; } }
.rv-rise { position: absolute; left: 0; right: 0; top: 100%; height: 70%; background: linear-gradient(to bottom, transparent, rgba(255, 201, 74, .38) 55%, transparent); opacity: 0; }
.revive-fx.go .rv-rise { animation: riseLight 1s 1s ease-in both; }
@keyframes riseLight { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-190%); opacity: 0; } }

/* ===== 結局 ===== */
.stage { position: relative; padding: 26px 0 30px; overflow: hidden; margin: 0 -22px; }
.stage.r4, .stage.r5 { background: var(--dark-bg); }
.stage .polaroid { box-shadow: 0 14px 30px rgba(22, 21, 20, .35); }
.stage.r4 .polaroid, .stage.r5 .polaroid { box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
.stage .rays-wrap .rays { opacity: .9; }
.stage:not(.r4):not(.r5) .rays-wrap { display: none; }
.endhead { text-align: center; margin: 22px 0 6px; }
.endhead .title { font-size: 32px; margin: 8px 0; }
.endhead .lead { color: var(--ink); font-size: 16px; line-height: 1.8; }
.links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.links a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 6px; border: 1.5px solid var(--ink); border-radius: 4px; color: var(--ink); text-decoration: none; font: 600 13px var(--mono); }
.ending .polaroid { animation: polIn .6s both ease-out; }
.ending .stamp { animation: stampIn .5s .5s both cubic-bezier(.2, 1.3, .4, 1); }

.recap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; margin: 16px 0; }
.mini { text-align: center; font: 500 12px/1.3 var(--serif); }
.mini .mp { background: #fff; padding: 5px 5px 14px; box-shadow: 0 2px 8px rgba(22, 21, 20, .25); margin-bottom: 6px; }
.mini .mp img, .mini .mp .ph { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 28%; display: block; background: #E4E2DB; }
.mini .muted { font-size: 11px; font-family: var(--mono); }

@media (prefers-reduced-motion: reduce) {
  .rays.a, .rays.b, .tface::before { animation: none !important; }
  .sparks, .rv-flash { display: none !important; }
  .rv.playing.r5 { animation: none !important; }
  .rv.playing .pimg { animation: fadeIn .45s var(--dd) both !important; }
  .rv.playing .polaroid { animation: fadeIn .3s both !important; }
  .rv.playing .stamp { animation: fadeIn .3s var(--sd) both !important; }
  .rv.playing .rv-label, .rv.playing .rv-chips, .rv.playing h2, .rv.playing .rv-note { animation: fadeIn .3s var(--sd) both !important; }
  .rv.r1 { --sd: .3s; --ad: .4s; } .rv.r2 { --sd: .4s; --ad: .5s; } .rv.r3 { --sd: .45s; --ad: .55s; } .rv.r4 { --sd: .5s; --ad: .6s; } .rv.r5 { --sd: .5s; --ad: .6s; }
  .tcard.dealing { animation: fadeIn .3s var(--dl, 0s) both; }
  .tcard .tin { transition: none; }
  .tcard.flipped .tin { transform: none; }
  .tcard:not(.flipped) .tface { display: none; }
  .tcard.flipped .tback { display: none; }
  .tcard.flipped .tface { transform: none; }
  .tface::after, .ent .bd::after { display: none !important; }
  .ent, .ending .polaroid { animation: fadeIn .3s both !important; }
  .ending .stamp { animation: fadeIn .3s both !important; }
  .home button.start { animation: none; }
  .revive-fx.go .life.burn, .revive-fx.go .rv-rise { animation: none; }
  .revive-fx .life.burn { background: transparent; }
}

.ending .row > .primary { flex: 1 1 100%; letter-spacing: 1px; font-size: 16px; }
.stage:not(.r4):not(.r5) { overflow: visible; }

.polaroid .pimg { aspect-ratio: auto; height: clamp(210px, 35svh, 330px); }
.rv { padding-top: 70px; gap: 10px; }
.rv h2 { font-size: 27px; }

html[data-lang="en"] .stamp > span { display: none; }
.deck .tcard.sel.flipped .tface { box-shadow: 0 0 0 3px #F2F1EC, 0 0 0 5px var(--red), 0 0 24px rgba(var(--rgb), .5); }

/* ===== v4：GSAP 模式（body.gsap-on）、打字機、N 分之一、特徵小籤 ===== */
.sparks canvas { display: block; width: 100%; height: 100%; }
.tw-rest { visibility: hidden; }
.ent.choice .opts.typing button:disabled:not(.on) { opacity: 1; }
body.gsap-on .ent { animation: none; }
body.gsap-on .tcard.dealing { animation: none; }
body.gsap-on .tcard .tin { transition: none; will-change: transform; }
body.gsap-on .tcard.flipped .tin { transform: none; }
.rv.gs.playing .polaroid, .rv.gs.playing .stamp, .rv.gs.playing .rv-life, .rv.gs.playing .rv-label, .rv.gs.playing .rv-chips, .rv.gs.playing h2, .rv.gs.playing .rv-note,
.rv.gs.playing .rv-actions, .rv.gs.playing .rays-wrap, .rv.gs.playing .sparks, .rv.gs.playing.r5, .rv.gs.playing.r5 .rv-flash { animation: none; }
.rv.gs.playing .polaroid, .rv.gs.playing .stamp, .rv.gs.playing .rv-odds, .rv.gs.playing .tk { will-change: transform, opacity; }
.rv-odds { position: relative; z-index: 2; text-align: center; font: 700 15px/1.4 var(--serif); color: #F2E4DC; letter-spacing: .5px; }
.rv-odds b { font: 600 22px var(--mono); color: var(--rc); text-shadow: 0 0 14px rgba(var(--rgb), .7); padding: 0 2px; }
.rv.r1 .rv-odds b { text-shadow: none; color: #FFC94A; }
.rv-traits { position: relative; z-index: 2; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.rv-traits .tk { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 82px; padding: 6px 12px 7px; background: #F6F5F0; color: var(--ink); border: 1px solid #D9D7D0; box-shadow: 0 6px 14px rgba(0, 0, 0, .4); transform: rotate(-1deg); }
.rv-traits .tk:nth-child(2) { transform: rotate(1.2deg); }
.rv-traits .tk small { font: 600 9px var(--mono); letter-spacing: 2px; color: var(--redtxt); }
.rv-traits .tk b { font: 900 15px/1.2 var(--serif); }

/* ===== v4c：拖曳條配點（暗房曝光條風）===== */
.bars { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 6px; padding: 14px 0 12px; border-bottom: 1px solid var(--line); }
.attr { display: grid; grid-template-columns: 74px minmax(0, 1fr) 30px; align-items: center; gap: 10px; }
.attr .nm { min-width: 0; }
.attr .name { font: 900 17px/1.15 var(--serif); }
html[lang="en"] .attr .name { font-size: 15px; }
html[lang="zh-Hant"] .attr { grid-template-columns: 56px minmax(0, 1fr) 30px; }
.attr .bn { font: 600 10px var(--mono); color: var(--redtxt); min-height: 13px; letter-spacing: .3px; white-space: nowrap; }
.attr .val { font: 600 20px var(--mono); text-align: right; }
.bar { position: relative; height: 44px; padding: 7px 6px; background: #1A1816; border-radius: 6px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .5); touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none; }
.bar.drag { cursor: grabbing; }
.bar:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.bar .cells { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; height: 100%; pointer-events: none; }
.bar i { border-radius: 2px; background: #3A3733; transition: background .1s, box-shadow .1s; }
.bar i.on { background: var(--red); box-shadow: 0 0 8px rgba(215, 65, 42, .75), inset 0 1px 0 rgba(255, 255, 255, .3); }
.bar i.bonus { background: repeating-linear-gradient(135deg, #C9922E 0 3px, #8A6420 3px 6px); }
.bar i.cut { background: repeating-linear-gradient(135deg, var(--red) 0 3px, #3A3733 3px 6px); box-shadow: none; }
.bar.drag i.on { box-shadow: 0 0 12px rgba(215, 65, 42, .95), inset 0 1px 0 rgba(255, 255, 255, .3); }
.bar.stop { animation: knobStop .22s; }
@keyframes knobStop { 0%, 100% { translate: 0 0; } 30% { translate: -3px 0; } 65% { translate: 3px 0; } }
.pool.zero .num { color: var(--ink2); }
.kbd-hint { display: none; }

/* ===== v4b：電腦版舞台框（≥700px）===== */
@media (min-width: 700px) {
  :root { --stage-w: clamp(480px, 56.25vh, 520px); }
  #bg { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--dark-bg); }
  #bg img { position: absolute; inset: -80px; width: calc(100% + 160px); height: calc(100% + 160px); object-fit: cover; filter: blur(38px) saturate(1.15) brightness(.5); opacity: 0; transition: opacity .9s ease; }
  #bg img.on { opacity: 1; }
  #bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 75% at 50% 50%, rgba(215, 65, 42, .34), rgba(120, 20, 14, .12) 60%, transparent 80%), radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(8, 2, 2, .65) 100%); }
  body, body[data-scr="dark"], body[data-scr="home"] { background: #0E0505; }
  #app { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 0 90px rgba(215, 65, 42, .38), 0 30px 90px rgba(0, 0, 0, .65); }
  .kbd-hint { display: block; max-width: var(--stage-w); margin: 0 auto; text-align: center; font: 500 11px var(--mono); letter-spacing: 1px; color: rgba(242, 241, 236, .55); padding: 10px 0 0; }
  .opts button[data-n]::before { content: attr(data-n); display: inline-block; min-width: 18px; margin-right: 8px; padding: 0 4px; font: 600 11px/18px var(--mono); text-align: center; border: 1px solid currentColor; border-radius: 3px; opacity: .6; }
}

/* ===== v4b：hover（只在有滑鼠的裝置）===== */
@media (hover: hover) {
  button:not(:disabled):hover { background: rgba(22, 21, 20, .08); }
  button.primary:not(:disabled):hover { background: #E4503A; border-color: #E4503A; box-shadow: 0 4px 14px rgba(215, 65, 42, .4); }
  button.on:not(:disabled):hover { background: #2A2825; }
  .opts button:not(:disabled):hover { background: #F4F2EA; border-color: var(--red); }
  .ent.choice .opts button:not(:disabled):hover { background: var(--red); color: #fff; }
  .rv-actions button:not(:disabled):hover { background: rgba(242, 241, 236, .14); }
  .rv-actions button.btn-gold:not(:disabled):hover { background: var(--rc); filter: brightness(1.12); }
  .tal .row button:not(.primary):not(:disabled):hover { background: rgba(242, 241, 236, .12); }
  #topbar button.tb:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
  .tcard { cursor: pointer; }
  .tcard:hover { box-shadow: 0 0 0 2px rgba(255, 201, 74, .65), 0 6px 18px rgba(0, 0, 0, .45); }
  .bar:hover { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7), 0 0 0 3px rgba(215, 65, 42, .35); }
  .links a:hover { background: var(--ink); color: var(--paper); }
  .home .ghostbtn:hover { background: rgba(242, 241, 236, .16); }
}