/* Layout: one-screen phone-first column. Top: HUD. Middle: the office scene (wall, fan, clock, the officer behind a desk).
   Below: the manila file card you swipe, then power-ups and the two choices. */
:root {
  --wall: #1f3329;        /* institutional green wall */
  --wall-deep: #16261e;
  --wall-line: #2e4a3c;
  --wall-paint: #5d8a74;  /* the scene's lighter painted wall */
  --wall-dado: #3e6654;
  --chalk: #ece4cf;       /* text on wall */
  --chalk-dim: #a9b3a1;
  --manila: #e3c98d;      /* file folder */
  --manila-edge: #c7a964;
  --ink: #2b2117;         /* text on manila */
  --ink-soft: #5e4d36;
  --tape: #b8322a;        /* red tape */
  --stamp: #5a3f9e;       /* violet rubber-stamp ink */
  --rule: #3f7a55;        /* honest / rule stamp green */
  --wood: #7a4e2a;
  --wood-dark: #5b381c;
  --gold: #d4ad3b;
  --display: "Tiro Bangla", "Noto Serif Bengali", "Kohinoor Bangla", serif;
  --body: "Hind Siliguri", "Noto Sans Bengali", "Kohinoor Bangla", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--wall);
  background-image: radial-gradient(ellipse at 50% 0%, #2a4436 0%, transparent 70%);
  color: var(--chalk);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app {
  position: relative;
  height: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 12px 14px;
  display: flex;
  flex-direction: column;
}

.screen { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#screenStart, #screenEnd { overflow-y: auto; gap: 18px; padding-bottom: 8px; scrollbar-width: none; }

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--manila); outline-offset: 2px; }

.sound-btn {
  position: absolute; top: 12px; right: max(16px, env(safe-area-inset-right, 0px)); z-index: 20;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,0.2); border: 1px solid var(--wall-line); color: var(--chalk-dim);
}
.sound-btn svg { width: 20px; height: 20px; }
.sound-btn .cross { display: none; }
.sound-btn.muted .cross { display: inline; }
.sound-btn.muted .waves { display: none; }
.voice-btn { right: calc(max(16px, env(safe-area-inset-right, 0px)) + 44px); }

/* ---------- Start ---------- */
.masthead { position: relative; padding-top: 18px; display: grid; gap: 6px; }
.eyebrow { margin: 0; font-size: 13px; letter-spacing: 0.04em; color: var(--chalk-dim); }
.title {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(60px, 19vw, 88px); line-height: 1; color: var(--manila);
}
.title-word { display: inline-block; animation: drop 0.6s cubic-bezier(.3,1.5,.5,1) backwards; }
.title-word + .title-word { animation-delay: 0.15s; }
@keyframes drop { from { transform: translateY(-40px) rotate(-6deg); opacity: 0; } }
.title-stamp {
  position: absolute; right: 4px; top: 62px;
  font-family: var(--display); font-size: 22px; color: var(--tape);
  border: 3px double currentColor; padding: 2px 12px 0; border-radius: 4px;
  transform: rotate(12deg); opacity: 0.9;
  animation: slam 0.35s 0.7s cubic-bezier(.5,0,.7,1) backwards;
}
@keyframes slam { from { transform: rotate(18deg) scale(3); opacity: 0; } }
.lede { margin: 4px 0 0; font-size: 17px; max-width: 34ch; text-wrap: pretty; }

.howto { display: grid; gap: 8px; }
.howto-item { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--chalk-dim); }
.chip {
  flex: none; font-weight: 600; font-size: 13px; padding: 2px 10px; border-radius: 3px;
  border: 1.5px solid currentColor; transform: rotate(-2deg); min-width: 64px; text-align: center;
}
.chip-rule { color: #8fd0a6; }
.chip-envelope { color: #b9a4f0; transform: rotate(2deg); }
.chip-power { color: var(--gold); }
.chip-voice { color: #f0b9a0; transform: rotate(-1deg); }

.pick-label { margin: 6px 0 -8px; font-weight: 600; color: var(--chalk); }
.files { display: grid; gap: 10px; }
.file-btn {
  position: relative; text-align: left; background: var(--manila); color: var(--ink);
  border: none; border-radius: 2px 6px 6px 6px; padding: 14px 16px 14px 18px;
  display: grid; gap: 2px;
  box-shadow: 0 2px 0 var(--manila-edge), 0 8px 18px rgba(0,0,0,0.28);
  transition: transform 0.15s ease;
}
.file-btn::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--tape); }
.file-btn:hover { transform: translateY(-2px) rotate(-0.4deg); }
.file-name { font-family: var(--display); font-size: 22px; line-height: 1.2; }
.file-blurb { font-size: 14px; color: var(--ink-soft); }
.file-meta { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-top: 4px; }
.file-best { font-size: 12.5px; font-weight: 600; color: var(--rule); }
.file-done { position: absolute; right: 12px; top: 10px; font-family: var(--display); font-size: 13px; color: var(--rule);
  border: 2px solid currentColor; padding: 0 6px; border-radius: 3px; transform: rotate(8deg); }
.fineprint { font-size: 12.5px; color: var(--chalk-dim); margin: 0; }

.badges-wrap { display: grid; gap: 14px; }
.badge-count { font-weight: 400; color: var(--chalk-dim); font-size: 14px; margin-left: 4px; }
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.badge { display: grid; justify-items: center; gap: 4px; text-align: center; font-size: 11.5px; line-height: 1.25; color: var(--chalk-dim); }
.badge-seal {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 2.5px dashed var(--wall-line); color: var(--wall-line); font-family: var(--display); font-size: 20px;
}
.badge.on { color: var(--chalk); }
.badge.on .badge-seal { border: 3px double var(--gold); color: var(--gold); background: rgba(212,173,59,0.08); transform: rotate(-6deg); }
.badge.new .badge-seal { animation: slam 0.4s cubic-bezier(.5,0,.7,1) backwards; }

/* ---------- HUD ---------- */
.hud { display: grid; gap: 8px; }
.hud-top { display: flex; align-items: center; gap: 10px; padding-right: 88px; }
.ghost-btn {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: transparent; border: 1px solid var(--wall-line); color: var(--chalk-dim);
}
.hud-file { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.hud-file-name { font-family: var(--display); font-size: 19px; color: var(--manila); }
.hud-desk { font-size: 12.5px; color: var(--chalk-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stats { display: grid; grid-template-columns: auto auto 1fr; gap: 16px; align-items: end; }
.stat { display: grid; gap: 1px; }
.stat-label { font-size: 12px; color: var(--chalk-dim); letter-spacing: 0.03em; }
.stat-val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.pat-row { display: flex; align-items: center; gap: 8px; }
.pat-face { flex: none; display: grid; }
.pat-face.hit { animation: wobble 0.4s; }
@keyframes wobble { 30% { transform: rotate(-14deg) scale(1.2); } 60% { transform: rotate(10deg); } }
.meter { flex: 1; height: 10px; border-radius: 5px; background: var(--wall-deep); overflow: hidden; }
.meter-fill { height: 100%; width: 100%; background: var(--rule); transition: width 0.5s ease, background 0.4s; }
.meter-fill.low { background: var(--tape); }

.tape { position: relative; display: flex; justify-content: space-between; align-items: center; height: 16px; }
.tape::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); background: var(--tape); opacity: 0.55; }
.knot { position: relative; width: 13px; height: 13px; border-radius: 50%; background: var(--wall); border: 2px solid var(--tape); transition: background 0.3s; }
.knot.done { background: var(--tape); }
.knot.now { background: var(--manila); border-color: var(--manila); box-shadow: 0 0 0 4px rgba(227,201,141,0.25); }

/* ---------- Scene ---------- */
.scene {
  position: relative; flex: 1 1 auto;
  min-height: 160px; max-height: 440px;
  margin-top: 10px; border-radius: 10px; overflow: hidden;
  background:
    linear-gradient(to bottom, var(--wall-paint) 0 64%, var(--wall-dado) 64% 65.5%, #4e7a64 65.5%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2), inset 0 -40px 60px rgba(0,0,0,0.15);
}
.window {
  position: absolute; left: 4%; top: 12%; width: 22%; aspect-ratio: 3 / 4; max-width: 100%;
  border: 4px solid #e9e1cb; border-radius: 3px; overflow: hidden; background: #9ccbe0;
}
.sky { position: absolute; inset: 0; background: linear-gradient(#8ec3dc, #d6ecf0 80%); transition: filter 0.6s; }
.grill { position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 8px, #3a3a36 8px 10px),
              linear-gradient(transparent 48%, #3a3a36 48% 52%, transparent 52%); }
.crow { position: absolute; top: 30%; left: -20%; width: 12px; height: 5px; border-top: 2px solid #222;
  border-radius: 50% 50% 0 0; animation: crow 11s linear infinite; }
@keyframes crow { 0%, 55% { left: -20%; } 100% { left: 120%; transform: translateY(-6px); } }
.sign {
  position: absolute; left: 30%; top: 10%;
  background: #f1ead6; color: #2b2117; font-family: var(--display); font-size: 11px; line-height: 1.2;
  padding: 3px 8px; border: 2px solid #6b4126; transform: rotate(-1.5deg); white-space: nowrap;
}
.clock { position: absolute; right: 5%; top: 9%; width: 13%; max-width: 48px; aspect-ratio: 1; }
#hourHand, #minHand { transform-origin: 20px 20px; transition: transform 0.9s cubic-bezier(.3,.1,.3,1); }
.calendar {
  position: absolute; right: 5%; top: 36%; width: 13%; max-width: 48px;
  background: #f4efe2; color: #2b2117; border-radius: 2px; text-align: center; line-height: 1.05; overflow: hidden;
  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}
.cal-top { display: block; background: var(--tape); color: #fff; font-size: 9px; padding: 1px 0; }
.cal-day { display: block; font-weight: 700; font-size: 16px; padding: 2px 0; font-variant-numeric: tabular-nums; }
.cal-day.flip { animation: flip 0.5s; }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.fan { position: absolute; left: 50%; top: 0; width: 34%; transform: translateX(-50%); }
.fan .blades { transform-origin: 0 0; animation: fan 0.5s linear infinite; }
@keyframes fan { to { transform: rotate(360deg); } }

.char {
  position: absolute; left: 50%; bottom: 20%; height: 72%; max-width: 70%; transform: translateX(-50%);
  aspect-ratio: 160 / 180;
}
.char .portrait { width: 100%; height: 100%; display: block; }
.char.in { animation: charIn 0.45s cubic-bezier(.2,.9,.3,1.2) backwards; }
.char.out { animation: charOut 0.3s ease-in forwards; }
@keyframes charIn { from { transform: translate(-50%, 70%); } }
@keyframes charOut { to { transform: translate(-50%, 80%); } }
.char.react-yes { animation: nod 0.5s ease; }
.char.react-no { animation: headshake 0.5s ease; }
@keyframes nod { 30% { transform: translate(-50%, 5px); } 60% { transform: translate(-50%, -2px); } }
@keyframes headshake { 20% { transform: translate(calc(-50% - 6px), 0) rotate(-3deg); } 50% { transform: translate(calc(-50% + 6px), 0) rotate(3deg); } 80% { transform: translate(calc(-50% - 3px), 0); } }

/* character parts */
.person .body { transform-origin: 80px 180px; transform-box: view-box; animation: breathe 3.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scaleY(1.018); } }
.person .head { transform-origin: 80px 110px; transform-box: view-box; animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { transform: rotate(1.4deg) translateY(1px); } }
.person .lids rect { transform-box: fill-box; transform-origin: center top; transform: scaleY(0); animation: blink 4.6s var(--blink-delay, 0s) infinite; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(0); } 96% { transform: scaleY(1); } }
.person .m { display: none; }
.person .m-neutral { display: inline; }
.person .cheeks { opacity: 0; transition: opacity 0.3s; }
.person .sweat { opacity: 0; transition: opacity 0.3s; }
.person .pupils { transition: transform 0.25s; }
.person .brow { transform-box: fill-box; transition: transform 0.25s; }
.mood-smile .m-neutral, .mood-frown .m-neutral, .talking .m-neutral { display: none; }
.mood-smile .m-smile { display: inline; }
.mood-smile .cheeks { opacity: 0.4; }
.mood-smile .pupils { transform: translate(1.5px, 2px); }
.mood-smile .brow-l { transform: translateY(-2px) rotate(-6deg); }
.mood-smile .brow-r { transform: translateY(-2px) rotate(6deg); }
.mood-frown .m-frown { display: inline; }
.mood-frown .sweat { opacity: 1; }
.mood-frown .brow-l { transform-origin: right center; transform: rotate(14deg); }
.mood-frown .brow-r { transform-origin: left center; transform: rotate(-14deg); }
.talking.mood-smile .m-smile, .talking.mood-frown .m-frown { display: none; }
.talking .m-open { display: inline; }
.talking.mouth-closed .m-open { display: none; }
.talking.mouth-closed .m-neutral { display: inline; }
.notice-board { transform-origin: 50% 100%; animation: sway 3s ease-in-out infinite; }
@keyframes sway { 50% { transform: rotate(1.2deg); } }
.candle .flame { transform-origin: 80px 97px; transform-box: view-box; animation: flicker 0.25s ease-in-out infinite alternate; }
.candle .glow { animation: glow 1.6s ease-in-out infinite alternate; }
@keyframes flicker { to { transform: scaleY(1.12) skewX(3deg); } }
@keyframes glow { to { opacity: 0.32; } }

.desk { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; }
.desk-top {
  position: absolute; left: 6%; right: 6%; top: 0; height: 12px;
  background: linear-gradient(var(--wood), var(--wood-dark)); border-radius: 3px 3px 0 0;
}
.desk-front { position: absolute; left: 4%; right: 4%; top: 10px; bottom: 0;
  background: repeating-linear-gradient(90deg, var(--wood-dark) 0 2px, var(--wood) 2px 46px); }
.desk-files { position: absolute; left: 4%; bottom: 8px; width: 22%; max-width: 80px; }
.prop { position: absolute; right: 6%; bottom: 8px; width: 16%; max-width: 64px; }
.prop.wide { width: 24%; max-width: 92px; }
.prop .steam { animation: steam 2.4s ease-in-out infinite; }
.prop .steam.s2 { animation-delay: 1.2s; }
@keyframes steam { 0% { transform: translateY(4px); opacity: 0; } 40% { opacity: 0.7; } 100% { transform: translateY(-6px); opacity: 0; } }
.prop .blinkline { animation: blinkline 1s steps(2) infinite; }
@keyframes blinkline { 50% { opacity: 0; } }

.bubble {
  position: absolute; left: 3%; top: 8%; max-width: 48%; z-index: 3;
  background: #fbf7ee; color: var(--ink); border-radius: 12px; padding: 8px 11px;
  font-size: 13.5px; line-height: 1.4; box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  animation: pop 0.25s cubic-bezier(.3,1.6,.5,1);
}
.bubble::after { content: ""; position: absolute; right: -8px; bottom: 14px; border: 8px solid transparent; border-left-color: #fbf7ee; border-right: 0; }
.bubble p { margin: 0; }
.bubble.bad { background: #fde3dc; }
.bubble.bad::after { border-left-color: #fde3dc; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } }

.dark-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 50% 62%, rgba(20,14,6,0.25) 0 18%, rgba(5,8,10,0.88) 55%);
  opacity: 0; pointer-events: none; transition: opacity 0.6s; z-index: 2; }
.scene.dark .dark-overlay { opacity: 1; }
.scene.dark .fan .blades { animation-duration: 6s; animation-iteration-count: 1; animation-fill-mode: forwards; }
.scene.dark .sky { filter: brightness(0.4); }

/* ---------- Card ---------- */
.deck { flex: none; position: relative; display: grid; padding-block: 24px 12px; }
.card {
  position: relative; width: 100%; max-height: 100%;
  background: var(--manila); color: var(--ink);
  border-radius: 3px 8px 8px 8px; padding: 14px 18px 16px;
  box-shadow: 0 3px 0 var(--manila-edge), 0 14px 30px rgba(0,0,0,0.36);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
  display: grid; gap: 6px; will-change: transform;
}
.card.dragging { cursor: grabbing; }
.card.enter { animation: cardIn 0.32s cubic-bezier(.2,.8,.3,1); }
@keyframes cardIn { from { transform: translateY(24px) rotate(1.5deg); opacity: 0; } }
.card-tab {
  position: absolute; top: -17px; left: 0; background: var(--manila); color: var(--ink-soft);
  font-size: 11px; padding: 3px 12px 1px; border-radius: 6px 6px 0 0;
  white-space: nowrap; max-width: 80%; overflow: hidden; text-overflow: ellipsis;
}
.card-corner { position: absolute; right: 16px; top: 0; bottom: 0; width: 9px; background: var(--tape); opacity: 0.85; }
.card-who { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; padding-right: 22px; }
.who-name { font-family: var(--display); font-size: 21px; line-height: 1.2; }
.who-where { font-size: 12.5px; color: var(--ink-soft); }
.card-event .who-name { color: var(--tape); }
.card-text { margin: 0; font-size: 17px; line-height: 1.55; padding-right: 20px; min-height: 3.1em; }
.again { color: var(--tape); font-weight: 600; }

.drag-stamp {
  position: absolute; top: 34%; padding: 3px 12px 0; border: 3px solid currentColor; border-radius: 4px;
  font-family: var(--display); font-size: 24px; opacity: 0; pointer-events: none; background: rgba(227,201,141,0.7);
}
.drag-stamp.rule { left: 12px; color: var(--rule); transform: rotate(-12deg); }
.drag-stamp.envelope { right: 30px; color: var(--stamp); transform: rotate(10deg); }

.powers { display: flex; gap: 8px; margin-bottom: 8px; }
.power {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; border-radius: 18px; font-size: 13.5px; font-weight: 600;
  background: rgba(212,173,59,0.1); border: 1.5px solid rgba(212,173,59,0.55); color: var(--gold);
  transition: opacity 0.2s, transform 0.15s;
}
.power svg { width: 15px; height: 15px; }
.power:hover:not(:disabled) { transform: translateY(-1px); background: rgba(212,173,59,0.18); }
.power:disabled { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #e0473c; animation: pulse 1.2s infinite; }
.power:disabled .live-dot { animation: none; }
@keyframes pulse { 50% { opacity: 0.3; } }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choices.single { grid-template-columns: 1fr; }
.choice {
  min-height: 62px; padding: 9px 12px; border-radius: 8px; text-align: left;
  font-size: 14.5px; font-weight: 500; line-height: 1.35;
  background: transparent; border: 1.5px solid var(--wall-line);
  transition: background 0.15s, border-color 0.15s, opacity 0.15s, transform 0.1s;
}
.choice:active:not(:disabled) { transform: scale(0.98); }
.choice-left { border-color: #4f8a63; }
.choice-left:hover { background: rgba(63,122,85,0.25); }
.choice-right { border-color: #7b64c2; text-align: right; }
.choice-right:hover { background: rgba(90,63,158,0.3); }
.choices.single .choice-left { text-align: center; }
.choice:disabled { opacity: 0.35; cursor: not-allowed; }
.choice .cost { display: block; font-size: 12px; font-weight: 400; color: var(--chalk-dim); margin-top: 2px; font-variant-numeric: tabular-nums; }
.shake { animation: shake 0.35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ---------- Toast ---------- */
.toast {
  position: absolute; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 30; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 32px);
  background: #fbf7ee; color: var(--ink); padding: 8px 14px 8px 8px; border-radius: 30px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35); font-size: 14px; line-height: 1.3;
  animation: toastIn 0.4s cubic-bezier(.3,1.5,.5,1);
}
.toast .t-seal { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 3px double var(--gold); color: #a07d1d;
  display: grid; place-items: center; font-family: var(--display); font-size: 15px; }
.toast b { display: block; font-size: 15px; }
@keyframes toastIn { from { transform: translate(-50%, -30px); opacity: 0; } }

/* ---------- End ---------- */
.verdict { text-align: center; padding-top: 22px; display: grid; justify-items: center; gap: 8px; }
.big-stamp {
  font-family: var(--display); font-size: 40px; line-height: 1;
  padding: 10px 22px 6px; border: 4px double currentColor; border-radius: 6px;
  transform: rotate(-6deg); animation: thump 0.45s cubic-bezier(.3,1.6,.5,1);
}
.big-stamp.pass { color: #8fd0a6; }
.big-stamp.fail { color: #e1675c; }
@keyframes thump { from { transform: rotate(-6deg) scale(2.2); opacity: 0; } }
.verdict-title { margin: 8px 0 0; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.2; text-wrap: balance; }
.verdict-sub { margin: 0; color: var(--chalk-dim); max-width: 36ch; }
.rank { margin: 6px 0 0; display: grid; gap: 0; }
.rank-label { font-size: 12px; color: var(--chalk-dim); letter-spacing: 0.05em; }
.rank-name { font-family: var(--display); font-size: 22px; color: var(--gold); }

.ledger { background: var(--manila); color: var(--ink); border-radius: 3px 8px 8px 8px; padding: 16px 18px; box-shadow: 0 3px 0 var(--manila-edge); }
.ledger-head { margin: 0 0 6px; font-family: var(--display); font-size: 20px; }
.ledger-rows { margin: 0; display: grid; grid-template-columns: 1fr auto; }
.ledger-rows dt, .ledger-rows dd { padding: 7px 0; border-bottom: 1px dashed rgba(43,33,23,0.25); margin: 0; }
.ledger-rows dt { padding-right: 10px; }
.ledger-rows dd { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ledger-rows .row-in { animation: rowIn 0.3s backwards; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-8px); } }
.ledger-rows .hl { color: var(--tape); }
.ledger-punch { margin: 12px 0 0; font-size: 16px; font-weight: 600; }
.earned { display: grid; gap: 14px; }

.end-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn { min-height: 48px; border-radius: 8px; border: 1.5px solid var(--wall-line); background: transparent; font-weight: 600; }
.btn:hover { border-color: var(--chalk-dim); }
.btn-primary { background: var(--manila); color: var(--ink); border-color: var(--manila); }
.btn-primary:hover { background: #ecd6a2; }
.copy-status { margin: -4px 0 0; text-align: center; font-size: 14px; color: var(--chalk-dim); min-height: 1.4em; }
.share-preview { width: 100%; border-radius: 8px; }

/* ---------- FX layer ---------- */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.fx-envelope { position: fixed; width: 64px; transform: translate(-50%, -50%); }
.fx-envelope svg { width: 64px; display: block; }
.fx-envelope span { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); font-weight: 700; color: var(--manila); font-size: 14px; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.fx-coin { position: fixed; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fbe58a, #d4ad3b 60%, #9a7a1c); box-shadow: 0 0 0 1px #8a6c18; }
.fx-float { position: fixed; font-weight: 700; font-size: 16px; color: #ff9b8a; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.fx-float.good { color: #9fe0b4; }
.fx-float.time { color: var(--manila); }
.fx-stamp {
  position: absolute; left: 50%; top: 50%; z-index: 4; pointer-events: none;
  font-family: var(--display); font-size: 34px; line-height: 1; padding: 6px 16px 2px;
  border: 4px double currentColor; border-radius: 5px; background: rgba(227,201,141,0.55);
  transform: translate(-50%, -50%) rotate(-10deg);
}
.fx-stamp.pass { color: var(--rule); }
.fx-stamp.fail { color: var(--tape); }
.fx-stamp.paid { color: var(--stamp); }
.fx-confetti { position: fixed; border-radius: 2px; }

@media (max-height: 700px) {
  .card-text { font-size: 15.5px; min-height: 2.8em; }
  .who-name { font-size: 19px; }
  .choice { min-height: 54px; font-size: 13.5px; }
  .powers { margin-bottom: 6px; }
  .power { min-height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}