/* In Those Days — "desert night": deep indigo sky, lamplight gold, art first. One theme, so shared screenshots always match. */
:root {
  --bg: #0e1220; --bg2: #161b2e; --panel: #1b2136; --panel2: #232a44; --ink: #f3ead6; --ink2: #a9a48f; --line: #313a5a;
  --gold: #e9c46a; --gold2: #f6dc98; --blue: #7aa2f7; --blue-bg: #1a2442; --terra: #f08a5d; --terra-bg: #3a2119; --olive: #b5cc7a; --olive-bg: #232c17;
  --ochre: #e9c46a; --ochre-bg: #3a2f12; --good: #9be39b; --bad: #ff9a8a; --shadow: 0 18px 60px rgba(0, 0, 0, .65);
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif; --caps: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --spring: cubic-bezier(.2, 1.3, .4, 1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.steps { padding-left: 1.2em; margin: 6px 0 14px; } .steps li { margin: 5px 0; color: #e6decb; }
body { padding-top: env(safe-area-inset-top); }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.45; overflow-x: clip; }
body { background: radial-gradient(900px 500px at 50% -120px, #27315a 0%, var(--bg) 70%) fixed, var(--bg); min-height: 100vh; }
/* a few fixed stars */
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
  background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 31% 9%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 52% 22%, #ffe9b0 50%, transparent 51%), radial-gradient(1px 1px at 68% 7%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 83% 16%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 92% 31%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 7% 38%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 44% 34%, #fff 50%, transparent 51%);
  animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .25; } }
#app { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 0 16px; }
button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--caps); font-weight: 700; letter-spacing: .04em; margin: 0; }
a { color: var(--gold); }
.muted { color: var(--ink2); } .small { font-size: .84rem; }
.orn { text-align: center; color: var(--gold); letter-spacing: .6em; margin: 10px 0; font-size: .8rem; }
.enter { animation: screenIn .45s var(--spring) both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(18px) scale(.985); } }

/* ---------- buttons ---------- */
.btn { display: block; width: 100%; padding: 13px 16px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 14px; text-align: left; line-height: 1.3; text-decoration: none; transition: transform .12s var(--spring), border-color .15s, background .15s, box-shadow .15s; }
.btn:hover { border-color: var(--gold); background: var(--panel2); }
.btn:active { transform: scale(.96); }
.btn.primary { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #231a05; border: 0; text-align: center; font-family: var(--caps); font-weight: 700; letter-spacing: .08em; font-size: .95rem; box-shadow: 0 6px 22px rgba(233, 196, 106, .28), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn.primary:hover { box-shadow: 0 8px 30px rgba(233, 196, 106, .45), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn.big { padding: 17px 16px; font-size: 1.05rem; animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 8px 38px rgba(233, 196, 106, .55), inset 0 1px 0 rgba(255, 255, 255, .5); } }
.btn.ghost { background: transparent; text-align: center; border-color: transparent; color: var(--ink2); }
.btn.ghost.light { color: #e8dfc8; }
.btn[disabled] { opacity: .4; cursor: default; }
.btn .note { display: block; font-size: .8rem; color: var(--ink2); margin-top: 2px; font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
.row { display: flex; gap: 8px; } .row > * { flex: 1; }
.stagger > * { animation: popIn .5s var(--spring) both; }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* ---------- title ---------- */
.title { flex: 1; display: flex; flex-direction: column; margin: 0 -16px; text-align: center; }
.hero { position: relative; height: 42vh; min-height: 240px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.kb { position: absolute; inset: -6%; background-size: cover; background-position: center; animation: kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.14) translate(-2.5%, -2%); } }
.tcontent { padding: 0 16px 30px; margin-top: -70px; position: relative; }
.title h1 { font-size: 2.7rem; line-height: 1.02; letter-spacing: .1em; background: linear-gradient(180deg, #fff6dd, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 40px rgba(233, 196, 106, .25); animation: screenIn .9s var(--spring) both; }
.title .tag { color: #d7cfba; margin: 12px auto 22px; max-width: 23em; font-size: 1.02rem; animation: screenIn .9s .12s var(--spring) both; }
.title .stack { display: grid; gap: 10px; max-width: 360px; margin: 0 auto; width: 100%; animation: screenIn .9s .22s var(--spring) both; }
.title .stack .btn { text-align: center; }
.btn.tile { padding: 10px 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink2); font-family: var(--caps); }
.btn.tile b { display: block; font-size: 1.5rem; color: var(--gold); letter-spacing: 0; line-height: 1.1; } .btn.tile small { font-size: .8rem; color: var(--ink2); }
.title .foot { margin-top: 22px; font-size: .8rem; color: var(--ink2); }

/* ---------- pick a life ---------- */
.screen { padding: 18px 0 40px; }
.screen > h2 { font-size: 1.3rem; margin: 6px 0 4px; color: var(--gold2); }
.back { background: none; border: 0; color: var(--ink2); padding: 8px 0; font-size: .95rem; }
.origins { display: grid; gap: 12px; margin-top: 12px; }
.origin { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--panel); text-align: left; animation: popIn .55s var(--spring) both; transition: transform .15s var(--spring), border-color .15s; }
.origin:hover { border-color: var(--gold); transform: translateY(-2px); } .origin:active { transform: scale(.97); }
.oimg { display: block; height: 118px; background-size: cover; background-position: center; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.otext { display: block; padding: 0 14px 13px; margin-top: -26px; position: relative; }
.otext b { font-family: var(--caps); font-size: 1.05rem; letter-spacing: .05em; display: block; text-shadow: 0 2px 10px #000; }
.where { color: var(--gold); font-size: .82rem; display: block; }
.odesc { display: block; margin-top: 4px; font-size: .9rem; color: var(--ink2); line-height: 1.35; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 10px 0; background: var(--panel); }
.seg button { flex: 1; padding: 10px; border: 0; background: transparent; transition: background .2s; }
.seg button.on { background: var(--gold); color: #231a05; font-weight: 600; }
.named { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.named div { border: 1px dashed var(--line); border-radius: 12px; padding: 10px; font-size: .85rem; color: var(--ink2); }
.nlife { border: 1px solid var(--gold); border-radius: 12px; padding: 10px; font-size: .85rem; color: var(--ink); background: linear-gradient(160deg, #2f2a14, var(--panel)); text-align: left; animation: breathe 2.6s ease-in-out infinite; }
.nlife b { display: block; font-family: var(--caps); font-size: .8rem; letter-spacing: .05em; color: var(--gold2); }
.named div.open { border-style: solid; border-color: var(--gold); color: var(--ink); }
.named b { display: block; font-family: var(--caps); font-size: .8rem; letter-spacing: .05em; color: var(--ink); }

/* ---------- game ---------- */
.hud { position: sticky; top: 0; z-index: 5; margin: 0 -16px; padding: 14px 16px 10px; background: var(--bg); overflow: hidden; box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .7); }
.hudart { position: absolute; inset: 0 0 auto 0; height: 150px; z-index: -1; background-size: cover; background-position: center 30%; opacity: .42; filter: saturate(1.1); -webkit-mask-image: linear-gradient(#000 35%, transparent 96%); mask-image: linear-gradient(#000 35%, transparent 96%); }
.hud .top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.hud .year { font-family: var(--caps); font-size: 1.9rem; font-weight: 700; letter-spacing: .06em; color: var(--gold2); text-shadow: 0 2px 14px rgba(0, 0, 0, .8); line-height: 1; }
.hud .year.tick { animation: tick .55s var(--spring); }
@keyframes tick { from { transform: translateY(-14px) scale(1.15); opacity: 0; filter: blur(3px); } }
.hud .who { text-align: right; font-size: .95rem; line-height: 1.25; text-shadow: 0 1px 8px #000; }
.hud .rule { font-size: .8rem; color: #d2cbb5; margin-top: 4px; text-shadow: 0 1px 8px #000; }
.tline { position: relative; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .12); margin-top: 10px; }
.tline i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--gold)); transition: width .8s var(--spring); }
.tline .mk { position: absolute; top: -4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(233, 196, 106, .25), 0 0 14px var(--gold); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(233, 196, 106, 0), 0 0 20px var(--gold); } }
.hz { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; margin-top: 6px; color: #d2cbb5; min-height: 1.1em; }
.hz b { color: var(--gold); font-weight: 600; white-space: nowrap; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.stat { position: relative; cursor: pointer; }
.stat label { display: block; font-size: .54rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink2); white-space: nowrap; overflow: hidden; cursor: pointer; }
.stat label b { display: block; font-size: 1rem; line-height: 1.1; color: var(--ink); letter-spacing: 0; }
.bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 3px; }
.bar i { display: block; height: 100%; background: var(--gold); border-radius: 3px; transition: width .7s var(--spring); }
.stat.health .bar i { background: var(--terra); } .stat.faith .bar i { background: var(--blue); } .stat.learning .bar i { background: var(--olive); } .stat.spirit .bar i { background: #f7b7d3; }
.floater { position: absolute; left: 0; top: -2px; font-family: var(--caps); font-weight: 700; font-size: 1rem; pointer-events: none; animation: floatUp 1.25s ease-out forwards; text-shadow: 0 2px 8px #000; z-index: 9; }
.floater.up { color: var(--good); } .floater.down { color: var(--bad); }
@keyframes floatUp { from { opacity: 0; transform: translateY(8px) scale(.7); } 20% { opacity: 1; transform: translateY(-4px) scale(1.25); } to { opacity: 0; transform: translateY(-34px) scale(1); } }
.purse { position: relative; margin-top: 10px; display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 7px 11px; border-radius: 12px; background: rgba(233, 196, 106, .1); border: 1px solid rgba(233, 196, 106, .35); }
.purse .coin { width: 22px; height: 22px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1c2, var(--gold) 55%, #9a7420); color: transparent; box-shadow: 0 0 10px rgba(233, 196, 106, .5); }
.purse .amt { flex: 1; font-size: .95rem; color: var(--ink); line-height: 1.15; } .purse .amt b { font-family: var(--caps); font-size: 1.2rem; color: var(--gold2); }
.purse .amt small { display: block; font-size: .74rem; color: var(--ink2); }
.purse .status { font-size: .74rem; color: var(--gold); text-align: right; max-width: 40%; }
.purse.debt { background: rgba(255, 154, 138, .1); border-color: rgba(255, 154, 138, .45); } .purse.debt .amt b { color: var(--bad); } .purse.debt .coin { filter: grayscale(1) brightness(.6); }
.purse .floater { left: 40px; }
.log { flex: 1; padding: 6px 0 130px; }
.yr { margin-top: 16px; animation: popIn .5s var(--spring) both; }
.yr h3 { font-size: .76rem; color: var(--gold); letter-spacing: .12em; border-bottom: 1px solid var(--line); padding-bottom: 3px; display: flex; justify-content: space-between; }
.yr p { margin: 7px 0 0; color: #ddd5c0; }
.yr p.head { font-weight: 600; margin-top: 12px; color: var(--ink); }
.yr p.money { color: var(--gold); font-size: .9rem; } .yr p.good { color: var(--good); } .yr p.bad { color: var(--bad); } .yr p.news { font-style: italic; color: var(--ink2); }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: linear-gradient(transparent, var(--bg) 34%); padding: 30px 16px calc(14px + env(safe-area-inset-bottom)); }
.dock .in { max-width: 528px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 8px; }
.dock .btn { text-align: center; padding: 11px 6px; font-size: .88rem; }
.dock .btn.primary { animation: breathe 2.6s ease-in-out infinite; }

/* ---------- sheets & cards ---------- */
.veil { position: fixed; inset: 0; z-index: 20; background: rgba(5, 7, 14, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(60px); opacity: 0; } }
.sheet { width: 100%; max-width: 560px; max-height: 94vh; max-height: 94dvh; overflow-y: auto; background: var(--panel); border-radius: 22px 22px 0 0; box-shadow: var(--shadow); animation: rise .45s var(--spring); border: 1px solid var(--line); border-bottom: 0; }
@media (min-width: 600px) { .veil { align-items: center; } .sheet { border-radius: 22px; border-bottom: 1px solid var(--line); } }
.banner { position: relative; height: 190px; overflow: hidden; border-radius: 22px 22px 0 0; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.banner .kb { animation-duration: 18s; }
.banner span { position: absolute; right: 12px; top: 12px; font-size: .74rem; font-family: var(--caps); letter-spacing: .1em; background: rgba(8, 10, 18, .6); padding: 3px 10px; border-radius: 99px; color: var(--gold2); backdrop-filter: blur(4px); }
.card { padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); }
.banner + .card { margin-top: -34px; position: relative; }
.card.flipin { animation: flipIn .5s var(--spring); }
@keyframes flipIn { from { opacity: 0; transform: perspective(900px) rotateX(-14deg) translateY(16px); } }
.chip { display: inline-block; font-family: var(--caps); font-size: .64rem; letter-spacing: .14em; padding: 3px 10px; border-radius: 99px; font-weight: 700; }
.chip.scripture { color: #10182e; background: var(--gold); } .chip.history { color: #2a1208; background: var(--terra); }
.chip.daily { color: #1a230b; background: var(--olive); } .chip.tradition { color: var(--gold); background: var(--ochre-bg); border: 1px solid var(--gold); }
.card h2 { font-size: 1.35rem; margin: 10px 0 8px; line-height: 1.2; color: #fff6e2; }
.card .when { float: right; font-size: .8rem; color: var(--ink2); }
.card .text { margin: 0 0 16px; color: #e6decb; }
.card p { color: #ddd5c0; }
.choices { display: grid; gap: 9px; }
.choices .btn { border-left: 3px solid var(--gold); }
.result { margin: 0 0 12px; font-size: 1.04rem; }
.result.good { color: var(--good); } .result.bad { color: var(--bad); }
.deltas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.deltas span { font-size: .8rem; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); font-family: var(--caps); font-weight: 700; animation: popIn .5s var(--spring) both; }
.deltas .up { color: var(--good); border-color: rgba(155, 227, 155, .4); background: rgba(155, 227, 155, .08); } .deltas .down { color: var(--bad); border-color: rgba(255, 154, 138, .4); background: rgba(255, 154, 138, .08); }
.learn { font-size: .93rem; color: #cfc8b4; margin: 0 0 10px; }
.learn b { font-family: var(--caps); font-size: .66rem; letter-spacing: .14em; color: var(--gold); display: block; margin-bottom: 2px; }
.learn.relate { border-left: 3px solid var(--terra); padding-left: 10px; color: var(--ink); } .learn.relate b { color: var(--terra); }
.learn.dig { border-left: 3px solid var(--olive); padding-left: 10px; } .learn.dig b { color: var(--olive); }
.src { font-size: .8rem; color: var(--ink2); margin: 0 0 14px; } .src b { color: var(--ink); }
.g { text-decoration: underline dotted var(--gold); text-underline-offset: 3px; cursor: help; }
.gloss { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 60; width: min(528px, calc(100vw - 24px)); background: #fff6e2; color: #2a2017; border-radius: 16px; padding: 14px 16px 10px; box-shadow: var(--shadow); animation: glossIn .35s var(--spring); }
@keyframes glossIn { from { opacity: 0; transform: translate(-50%, 30px); } }
.gloss b { font-family: var(--caps); letter-spacing: .06em; font-size: .9rem; }
.gloss p { margin: 6px 0 0; font-size: .93rem; line-height: 1.4; color: #2a2017; }
.gloss p.now { color: #8a4a1d; font-style: italic; }
.gloss .btn { color: #2a2017; margin-top: 4px; padding: 8px; }
.intro .text { min-height: 10.5em; }
.dots { display: flex; gap: 6px; justify-content: center; margin: 0 0 14px; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: all .3s; } .dots i.on { background: var(--gold); width: 22px; border-radius: 4px; }

/* ---------- verse cards ---------- */
.vcard { container-type: inline-size; position: relative; aspect-ratio: 4 / 5; width: 100%; border-radius: 18px; overflow: hidden; background: #14100a; color: #fff6e2; box-shadow: 0 14px 50px rgba(0, 0, 0, .7); isolation: isolate; cursor: pointer; --frame: var(--gold); }
.vcard.history { --frame: #e0a076; } .vcard.daily { --frame: #bccb84; } .vcard.tradition { --frame: #e0b45a; }
.vcard::after { content: ''; position: absolute; inset: 2.1cqw; border: max(1.5px, .5cqw) solid var(--frame); border-radius: 3cqw; pointer-events: none; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .35), inset 0 0 0 4px color-mix(in srgb, var(--frame) 55%, transparent); z-index: 3; }
.vbg { position: absolute; inset: 0 0 38% 0; background-size: cover; background-position: center; z-index: 0; }
.vshade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(15, 10, 4, .5), rgba(15, 10, 4, .05) 22%, rgba(15, 10, 4, .72) 47%, #0e0a05 60%); }
.vshine { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .5) 48%, rgba(255, 240, 190, .25) 52%, transparent 65%); transform: translateX(-130%); }
.vtop { position: absolute; z-index: 2; left: 6cqw; right: 6cqw; top: 5.4cqw; display: flex; justify-content: space-between; font-family: var(--caps); font-size: 2.9cqw; letter-spacing: .16em; color: var(--frame); text-transform: uppercase; font-weight: 700; text-shadow: 0 1px 6px #000; }
.vbody { position: absolute; z-index: 2; left: 6.4cqw; right: 6.4cqw; bottom: 15cqw; }
.vbody h3 { font-size: 4.9cqw; line-height: 1.15; text-transform: uppercase; letter-spacing: .05em; text-shadow: 0 2px 10px #000; }
.vbody h3::after { content: ''; display: block; width: 11cqw; height: .5cqw; background: var(--frame); margin: 2cqw 0; }
.vtext { margin: 0; font-style: italic; color: #f7ecd3; line-height: 1.3; font-size: 4.7cqw; }
.vtext.m { font-size: 4.15cqw; } .vtext.s { font-size: 3.6cqw; line-height: 1.25; } .vtext.xs { font-size: 3.1cqw; line-height: 1.22; }
.vref { margin: 2cqw 0 0; font-family: var(--caps); font-size: 3cqw; letter-spacing: .14em; color: var(--frame); font-weight: 700; }
.vfoot { position: absolute; z-index: 2; left: 6.4cqw; bottom: 6.2cqw; font-family: var(--caps); font-size: 3.1cqw; letter-spacing: .2em; font-weight: 700; color: #fff6e2; opacity: .85; }
.vcard.mini { border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); transition: transform .2s var(--spring); }
.vcard.mini:hover { transform: translateY(-4px) rotate(-1deg) scale(1.03); }
.vcard.mini::after { inset: 3.5cqw; border-width: 1.5px; border-radius: 7cqw; }
.vcard.mini .vbg { inset: 0; } .vcard.mini .vshade { background: linear-gradient(rgba(10, 7, 3, .45), transparent 30%, rgba(10, 7, 3, .92) 78%); }
.vcard.mini .vtop { left: 9cqw; right: 9cqw; top: 8.5cqw; font-size: 6.4cqw; letter-spacing: .06em; justify-content: flex-end; } .vcard.mini .vtop span:first-child { display: none; }
.vcard.mini .vbody { left: 9cqw; right: 9cqw; bottom: 9cqw; } .vcard.mini .vbody h3 { font-size: 8.6cqw; line-height: 1.12; letter-spacing: .02em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .vcard.mini .vbody h3::after { display: none; }
.vcard.locked { background: repeating-linear-gradient(45deg, #171c2f, #171c2f 8px, #1b2136 8px, #1b2136 16px); cursor: default; --frame: #39426a; }
.vcard.locked .vbody { top: 0; bottom: 0; display: grid; place-items: center; } .vcard.locked .vbody h3 { font-size: 26cqw; color: #39426a; }
.vcard.locked:hover { transform: none; }
.album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
@media (min-width: 480px) { .album { grid-template-columns: repeat(4, 1fr); } }
.collect { display: flex; gap: 12px; align-items: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 10px; margin: 0 0 14px; cursor: pointer; transition: border-color .2s; }
.collect:hover { border-color: var(--gold); }
.collect .vcard { width: 84px; flex: none; } .collect .vcard .vtop, .collect .vcard .vbody { display: none; } .collect .vcard .vshade { background: linear-gradient(transparent 55%, rgba(10, 7, 3, .55)); }
.collect b { display: block; font-family: var(--caps); font-size: .8rem; letter-spacing: .08em; color: var(--gold); }
.collect.fresh { animation: glow 1.6s ease-in-out 2; } .collect.fresh .vcard { animation: cardPop .7s var(--spring); }
@keyframes glow { 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 28px rgba(233, 196, 106, .45); } }
@keyframes cardPop { from { transform: scale(.3) rotate(-18deg); opacity: 0; } }

.cardveil { align-items: center; background: radial-gradient(circle at 50% 40%, rgba(60, 46, 14, .75), rgba(4, 5, 10, .94) 70%); padding: 14px; overflow-y: auto; }
.cardstage { position: relative; width: min(390px, 100%); margin: auto; perspective: 1200px; }
.newtag { text-align: center; font-family: var(--caps); letter-spacing: .2em; font-size: .8rem; color: var(--gold2); margin-bottom: 12px; animation: screenIn .6s .5s var(--spring) both; text-shadow: 0 0 20px var(--gold); }
.vcard.anim { animation: cardFlip 1s var(--spring) both; }
.vcard.anim .vshine { animation: shine 1.3s .85s ease-out both, shine 3.5s 3s ease-in-out infinite; }
.vcard.anim .vbg { animation: bgZoom 14s ease-out both; }
@keyframes cardFlip { 0% { transform: rotateY(180deg) scale(.35) translateY(120px); opacity: 0; } 55% { opacity: 1; } 100% { transform: rotateY(0) scale(1); } }
@keyframes shine { to { transform: translateX(130%); } }
@keyframes bgZoom { from { transform: scale(1.18); } }
.sparks { position: absolute; left: 50%; top: 38%; width: 0; height: 0; z-index: 5; pointer-events: none; }
.sparks i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--gold2); box-shadow: 0 0 10px var(--gold); opacity: 0; animation: spark 1.1s .75s ease-out both; }
.sparks i:nth-child(1) { --x: -170px; --y: -190px; } .sparks i:nth-child(2) { --x: 160px; --y: -210px; } .sparks i:nth-child(3) { --x: -210px; --y: -40px; } .sparks i:nth-child(4) { --x: 215px; --y: -20px; } .sparks i:nth-child(5) { --x: -150px; --y: 170px; } .sparks i:nth-child(6) { --x: 140px; --y: 190px; } .sparks i:nth-child(7) { --x: 0; --y: -250px; }
.sparks i:nth-child(8) { --x: -90px; --y: -230px; } .sparks i:nth-child(9) { --x: 95px; --y: -235px; } .sparks i:nth-child(10) { --x: -230px; --y: 80px; } .sparks i:nth-child(11) { --x: 235px; --y: 95px; } .sparks i:nth-child(12) { --x: 30px; --y: 250px; } .sparks i:nth-child(13) { --x: -200px; --y: -130px; } .sparks i:nth-child(14) { --x: 200px; --y: -125px; }
@keyframes spark { 0% { opacity: 1; transform: translate(0, 0) scale(1.4); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.2); } }
.cardbtns { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin-top: 14px; animation: screenIn .6s .9s var(--spring) both; }
.cardbtns .btn { text-align: center; padding: 12px 4px; font-size: .86rem; }
.cardstage > .btn.ghost { margin-top: 6px; animation: screenIn .6s 1s var(--spring) both; }

/* ---------- collection, badges, lists ---------- */
.prog { height: 6px; background: var(--bg2); border-radius: 3px; overflow: hidden; margin: 8px 0 4px; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--gold)); border-radius: 3px; animation: grow 1s var(--spring) both; transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } }
.sect { font-family: var(--caps); font-size: .78rem; letter-spacing: .12em; color: var(--gold); margin: 22px 0 4px; }
.entry { border-bottom: 1px solid var(--line); padding: 10px 0; }
.entry summary { list-style: none; cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.entry summary::-webkit-details-marker { display: none; }
.entry summary b { flex: 1; font-weight: 600; } .entry summary::after { content: '+'; color: var(--gold); font-family: var(--caps); } .entry[open] summary::after { content: '\2212'; }
.entry .body { padding-top: 8px; }
.badges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.badge { border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: var(--panel); opacity: .5; filter: grayscale(1); animation: popIn .45s var(--spring) both; }
.badge.got { opacity: 1; filter: none; border-color: var(--gold); background: linear-gradient(160deg, #2f2a14, var(--panel)); }
.badge span { font-size: 1.6rem; color: var(--gold); display: block; line-height: 1.2; }
.badge b { display: block; font-family: var(--caps); font-size: .78rem; letter-spacing: .04em; } .badge small { color: var(--ink2); font-size: .78rem; line-height: 1.25; display: block; margin-top: 2px; }

/* ---------- end of life ---------- */
.epitaph { text-align: center; padding: 26px 0 8px; }
.epitaph h2 { font-size: 1.8rem; color: var(--gold2); }
.epitaph .dates { color: var(--ink2); margin-top: 4px; }
.tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; text-align: center; }
.tally div { border: 1px solid var(--line); border-radius: 14px; padding: 12px 4px; background: var(--panel); animation: popIn .5s var(--spring) both; } .tally div:nth-child(2) { animation-delay: .1s; } .tally div:nth-child(3) { animation-delay: .2s; }
.tally b { display: block; font-family: var(--caps); font-size: 1.6rem; color: var(--gold); }
.tally span { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink2); }
.morereads summary { cursor: pointer; color: var(--gold, #e9c46a); font-size: .9rem; padding: 8px 0; }
@media (min-width: 560px) { .reads { columns: 2; } }
.reads { font-size: .88rem; padding-left: 18px; margin: 6px 0 18px; color: #cfc8b4; }
.moment { z-index: 80; align-items: center; padding: 14px; background: radial-gradient(circle at 50% 35%, rgba(70, 54, 16, .8), rgba(4, 5, 10, .95) 72%); }
.moment.grief { background: radial-gradient(circle at 50% 35%, rgba(40, 44, 60, .85), rgba(3, 4, 8, .97) 72%); }
.mcard { position: relative; width: min(420px, 100%); max-height: 94vh; max-height: 94dvh; overflow-y: auto; border-radius: 22px; background: var(--panel); border: 1px solid var(--gold); box-shadow: 0 0 60px rgba(233, 196, 106, .28), var(--shadow); animation: momentIn .8s var(--spring) both; }
.moment.grief .mcard { border-color: #5a6385; box-shadow: var(--shadow); animation: momentFade 1.4s ease-out both; }
@keyframes momentIn { 0% { opacity: 0; transform: scale(.55) translateY(60px) rotate(-3deg); } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes momentFade { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
.mart { position: relative; height: 210px; overflow: hidden; border-radius: 22px 22px 0 0; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.moment.grief .mart { filter: grayscale(.75) brightness(.8); }
.mbody { position: relative; padding: 0 20px 22px; margin-top: -30px; text-align: center; }
.badgewin .mbody { margin-top: 0; padding-top: 26px; }
.mkick { display: inline-block; font-family: var(--caps); font-size: .68rem; letter-spacing: .18em; color: var(--gold); text-transform: uppercase; font-weight: 700; }
.moment.grief .mkick { color: #aab3d4; }
.mbody h2 { font-size: 1.6rem; line-height: 1.15; margin: 8px 0 10px; color: #fff6e2; animation: screenIn .7s .35s var(--spring) both; }
.moment.joy .mbody h2 { background: linear-gradient(180deg, #fff6dd, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mtext { margin: 0 0 14px; color: #e6decb; font-size: 1.04rem; animation: screenIn .7s .5s var(--spring) both; }
.mbody .learn { text-align: left; animation: screenIn .7s .65s var(--spring) both; }
.mbody .btn { animation: screenIn .7s .8s var(--spring) both; }
.moment .sparks { top: 210px; }
.badgewin .sparks { top: 120px; }
.emblem { width: 168px; height: 168px; margin: 14px auto 8px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 5rem; color: var(--gold); background: radial-gradient(circle, #2b3560, #12172b); box-shadow: 0 0 0 3px var(--gold), 0 0 50px rgba(233, 196, 106, .6); animation: emblemIn 1s var(--spring) both, emblemGlow 2.4s 1s ease-in-out infinite; }
.emblem img { width: 118%; height: 118%; object-fit: cover; }
@keyframes emblemIn { 0% { transform: scale(0) rotate(-200deg); opacity: 0; } 70% { transform: scale(1.12) rotate(8deg); opacity: 1; } 100% { transform: none; } }
@keyframes emblemGlow { 50% { box-shadow: 0 0 0 3px var(--gold2), 0 0 80px rgba(233, 196, 106, .9); } }
.badge .bimg { display: block; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; margin-bottom: 6px; font-size: 1.6rem; color: var(--gold); line-height: 64px; text-align: center; background: radial-gradient(circle, #2b3560, #12172b); box-shadow: 0 0 0 2px var(--line); }
.badge.got .bimg { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(233, 196, 106, .4); }
.badge .bimg img { width: 118%; height: 118%; margin: -9%; object-fit: cover; }
.toast { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 70; background: #fff6e2; color: #2a2017; padding: 9px 18px; border-radius: 99px; font-size: .9rem; animation: toastIn .45s var(--spring); max-width: 92vw; text-align: center; box-shadow: var(--shadow); }
.toast.badge { border-radius: 18px; width: max-content; max-width: 90vw; background: linear-gradient(180deg, var(--gold2), var(--gold)); font-family: var(--caps); font-weight: 700; letter-spacing: .04em; padding: 12px 22px; animation: badgeIn .7s var(--spring); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -30px); } }
@keyframes badgeIn { 0% { opacity: 0; transform: translate(-50%, -40px) scale(.5); } 60% { transform: translate(-50%, 4px) scale(1.12); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .vshine { display: none; } }