/* Happy Money: original stone, timber and grass. Text sits on opaque surfaces. */
:root {
  color-scheme: light;
  --bg:#e8e6dc; --grain:#deddd3; --card:#fffdf4; --panel:#f0eddf;
  --ink:#253529; --ink-soft:#52604f; --line:#74816b; --edge:#354a35;
  --green:#246437; --green-bg:#e0efd5; --primary:#285d32; --on-primary:#ffffff;
  --gold:#f2cb66; --gold-ink:#644600; --gold-bg:#fff0c2; --on-gold:#382700;
  --red:#a1282d; --red-bg:#ffebe5; --wood:#e9d6ae;
  --shadow:#b6b9a6; --shine:#ffffff; --xp-track:#253529; --xp-fill:#87cf47;
  --display:"Press Start 2P","Courier New",monospace;
  --body:"Nunito","Segoe UI",system-ui,sans-serif; --r:3px;
  --texture:url("./tex/stone.svg");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --bg:#171f1a; --grain:#1d261f; --card:#273329; --panel:#303e31;
    --ink:#f6f4e7; --ink-soft:#c1cbb9; --line:#899b7f; --edge:#a6b89a;
    --green:#ade78d; --green-bg:#293e29; --primary:#a5dc7e; --on-primary:#172413;
    --gold:#f2cb66; --gold-ink:#f4d77d; --gold-bg:#44391e; --on-gold:#382700;
    --red:#ffb4a9; --red-bg:#492b2b; --wood:#403b28;
    --shadow:#0c120e; --shine:#53634d; --xp-track:#111a13; --xp-fill:#a5dc7e;
    --texture:url("./tex/stone-dark.svg");
  }
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#171f1a; --grain:#1d261f; --card:#273329; --panel:#303e31;
  --ink:#f6f4e7; --ink-soft:#c1cbb9; --line:#899b7f; --edge:#a6b89a;
  --green:#ade78d; --green-bg:#293e29; --primary:#a5dc7e; --on-primary:#172413;
  --gold:#f2cb66; --gold-ink:#f4d77d; --gold-bg:#44391e; --on-gold:#382700;
  --red:#ffb4a9; --red-bg:#492b2b; --wood:#403b28;
  --shadow:#0c120e; --shine:#53634d; --xp-track:#111a13; --xp-fill:#a5dc7e;
  --texture:url("./tex/stone-dark.svg");
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; }
html { scroll-padding-bottom:110px; }
body {
  min-height:100vh; min-height:100dvh; background-color:var(--bg);
  background-image:var(--texture); background-size:128px 128px;
  color:var(--ink); font:600 17px/1.5 var(--body); -webkit-tap-highlight-color:transparent;
}
main { max-width:520px; margin:auto; padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(120px + env(safe-area-inset-bottom,0px)); display:grid; gap:20px; }
main > *, .stack > *, .card > * { min-width:0; }
h1,h2,h3 { margin:0; font-family:var(--display); font-weight:400; line-height:1.7; overflow-wrap:anywhere; text-wrap:balance; }
h1 { font-size:18px; } h2 { font-size:15px; } h3 { font-size:13px; }
p { margin:0; overflow-wrap:anywhere; }
button,input,select,textarea { font:inherit; color:inherit; }
button,a,input,select,label { touch-action:manipulation; }
a { color:var(--green); }
:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
.muted,.note { color:var(--ink-soft); font-size:17px; }
.num { font-variant-numeric:tabular-nums; }
.pix,.em-ic,.deco,.hello img,.splash img,.sparkle { image-rendering:pixelated; object-fit:contain; }
.pix { width:24px; height:24px; flex:none; vertical-align:middle; }
.em-amt { display:inline-flex; align-items:center; gap:.22em; font-variant-numeric:tabular-nums; vertical-align:middle; }
.em-ic { width:.9em; height:.9em; flex:none; }
.brand { display:flex; align-items:center; justify-content:center; gap:8px; font:400 14px/1.6 var(--display); margin:0; padding-block:4px; }
.brand.big { font-size:clamp(14px,4.1vw,18px); padding-block:12px; }
.brand-text { color:var(--green); text-align:center; min-width:0; }
.deco { width:24px; height:24px; flex:none; }
.brand.big .deco { width:28px; height:28px; }
.splash { display:grid; justify-items:center; gap:20px; padding-block:20vh 10vh; text-align:center; color:var(--ink-soft); }
.hello { display:flex; gap:14px; align-items:center; }
.hello img { width:72px; height:72px; flex:none; }
.hello .bubble { background:var(--card); border:2px solid var(--line); border-left:4px solid var(--green); border-radius:var(--r); padding:12px; box-shadow:3px 3px 0 var(--shadow); min-width:0; }
.wiggle { animation:wiggle .55s steps(3,end); }
@keyframes wiggle { 25% { transform:rotate(-6deg) translateY(-3px); } 65% { transform:rotate(6deg); } }
.money { display:grid; gap:14px; }
.pot { display:grid; gap:8px; padding:18px; background:var(--card); border:3px solid var(--edge); border-radius:var(--r); box-shadow:inset 0 3px 0 var(--shine),4px 4px 0 var(--shadow); }
.pot .label { font-size:17px; font-weight:900; }
.pot .amount { font:900 40px/1.2 var(--body); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.pot.ready { background:var(--green-bg); border-top:7px solid var(--green); }
.pot.ready .amount { font-size:clamp(40px,13vw,60px); color:var(--green); }
.pot.ready .amount > span { min-width:0; overflow-wrap:anywhere; }
.pot.ready .label { color:var(--green); }
.pot.cash { background:var(--gold-bg); border-color:var(--gold-ink); }
.pot.cash .label,.pot.cash .amount { color:var(--gold-ink); }
.xp { position:relative; height:18px; border:3px solid var(--edge); background:var(--xp-track); margin-top:4px; overflow:hidden; }
.xp-fill { display:block; height:100%; max-width:100%; background:var(--xp-fill); }
.xp::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 3px),var(--xp-track) calc(10% - 3px),var(--xp-track) 10%); }
.actions { display:grid; gap:12px; }
.big-action,.btn { border:2px solid var(--edge); border-radius:var(--r); box-shadow:inset 0 3px 0 var(--shine),0 4px 0 var(--edge); cursor:pointer; text-decoration:none; font-weight:900; }
.big-action { display:flex; align-items:center; gap:16px; min-height:64px; padding:12px 18px; color:var(--ink); background:var(--wood); }
.big-action .pix { width:32px; height:32px; }
.big-action .ic { font-size:28px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:56px; padding:12px 18px; color:var(--ink); background:var(--panel); text-align:center; overflow-wrap:anywhere; }
.btn.primary { color:var(--on-primary); background:var(--primary); box-shadow:inset 0 3px 0 #ffffff26,0 4px 0 var(--edge); }
.btn.gold { color:var(--on-gold); background:var(--gold); box-shadow:inset 0 3px 0 #fff0c2,0 4px 0 var(--edge); }
.btn.ghost { background:var(--card); color:var(--ink); }
.btn.danger { color:var(--red); background:var(--red-bg); border-color:var(--red); }
.btn.small { min-height:48px; padding:8px 12px; font-size:17px; }
.btn.small.primary { min-height:52px; }
.btn.wide { width:100%; }
.btn[disabled],.btn[aria-disabled="true"] { background:var(--panel); color:var(--ink-soft); border-color:var(--line); box-shadow:none; cursor:not-allowed; }
.btn:not([disabled]):not([aria-disabled="true"]):active,.big-action:active,.tick:not([disabled]):active { transform:translateY(3px); box-shadow:inset 0 2px 0 var(--shadow),0 1px 0 var(--edge); }
@media (hover:hover) { .btn:not([disabled]):hover,.big-action:hover { outline:2px solid var(--green); outline-offset:3px; } }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.row > * { min-width:0; max-width:100%; }
.stack { display:grid; gap:14px; }
.card { display:grid; gap:16px; background:var(--card); border:2px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:inset 0 3px 0 var(--shine),4px 4px 0 var(--shadow); }
.banner { display:grid; gap:12px; padding:14px; border:2px solid var(--line); border-left-width:6px; border-radius:var(--r); background:var(--panel); font-weight:800; }
.banner.warn { background:var(--gold-bg); border-color:var(--gold-ink); color:var(--gold-ink); }
.banner.bad { background:var(--red-bg); border-color:var(--red); color:var(--red); }
.banner.good { background:var(--green-bg); border-color:var(--green); color:var(--green); }
.chore { display:grid; grid-template-columns:minmax(0,1fr) 56px; gap:6px 12px; align-items:center; padding:14px; border:2px solid var(--line); border-radius:var(--r); background:var(--card); box-shadow:0 3px 0 var(--shadow); }
.chore.done { border-color:var(--green); background:var(--green-bg); }
.chore .title { font-size:18px; font-weight:900; overflow-wrap:anywhere; }
.chore .meta { display:flex; gap:6px 10px; flex-wrap:wrap; align-items:center; color:var(--ink-soft); font-size:17px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border:1px solid var(--line); border-radius:2px; background:var(--panel); color:var(--ink); font-size:17px; font-weight:800; }
button.chip { min-height:48px; cursor:pointer; }
.chip.wait { background:var(--gold-bg); color:var(--gold-ink); border-color:var(--gold-ink); }
.chore.pending { grid-template-columns:minmax(0,1fr); border-style:dashed; box-shadow:none; }
.tick { grid-column:2; grid-row:1 / span 2; width:56px; height:56px; padding:8px; border:3px solid var(--green); border-radius:var(--r); background:var(--card); color:var(--green); font-size:30px; font-weight:900; box-shadow:0 3px 0 var(--edge); cursor:pointer; }
.chore.done .tick { background:var(--green-bg); box-shadow:none; cursor:default; }
.tick[disabled] { cursor:default; }
.linkish { display:inline-flex; align-items:center; min-width:48px; min-height:48px; padding:6px 0; border:0; background:transparent; color:var(--green); font-size:17px; font-weight:900; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
label.field { display:grid; gap:7px; font-weight:900; }
label.field small { font-size:17px; font-weight:600; color:var(--ink-soft); }
input:not([type="radio"]):not([type="checkbox"]),select,textarea { width:100%; min-width:0; min-height:54px; padding:10px 12px; border:2px solid var(--line); border-radius:2px; background:var(--card); color:var(--ink); box-shadow:inset 0 3px 0 var(--shadow); }
input::placeholder,textarea::placeholder { color:var(--ink-soft); opacity:1; }
input[disabled],select[disabled] { background:var(--panel); color:var(--ink-soft); opacity:1; }
input[aria-invalid="true"] { border-color:var(--red); }
input[type="file"] { font-size:17px; padding:8px !important; overflow:hidden; }
input::file-selector-button { min-height:48px; font:inherit; color:var(--ink); background:var(--panel); border:1px solid var(--line); margin-right:8px; cursor:pointer; }
.money-input { font-size:26px; font-weight:900; font-variant-numeric:tabular-nums; }
.seg { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.seg label { display:flex; align-items:center; justify-content:center; gap:8px; min-height:54px; padding:8px; background:var(--card); border:2px solid var(--line); border-radius:var(--r); font-weight:800; cursor:pointer; }
.seg input { accent-color:var(--green); width:20px; height:20px; flex:none; margin:0; }
.seg label:has(input:checked) { background:var(--green-bg); border-color:var(--green); }
.error { color:var(--red); font-weight:900; font-size:17px; }
.preview { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto); gap:10px; padding:12px; background:var(--panel); border:2px solid var(--line); border-radius:var(--r); }
.preview .num { text-align:right; overflow-wrap:anywhere; }
.day { color:var(--ink-soft); font-size:17px; font-weight:900; margin-top:6px; }
.entry { display:grid; grid-template-columns:24px minmax(0,1fr) minmax(0,auto); gap:5px 10px; align-items:center; padding-block:14px; border-bottom:2px solid var(--line); }
.entry:last-child { border-bottom:0; }
.entry .ic { grid-row:1 / span 2; align-self:start; font-size:24px; text-align:center; }
.entry .what { font-weight:900; overflow-wrap:anywhere; }
.entry .why { grid-column:2 / -1; color:var(--ink-soft); font-size:17px; overflow-wrap:anywhere; }
.entry .eff { display:grid; justify-items:end; font-weight:900; font-size:17px; text-align:right; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.entry .tools { grid-column:2 / -1; display:flex; gap:12px; flex-wrap:wrap; min-width:0; }
.entry .tools.approve { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:10px; }
.approve .field { grid-column:1 / -1; }
.entry.voided .what,.entry.voided .eff { text-decoration:line-through; text-decoration-thickness:2px; }
.plus,.readyc { color:var(--green); } .minus { color:var(--red); }
.tabs { position:fixed; inset:auto 0 0; z-index:5; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); max-width:520px; margin-inline:auto; padding:4px 2px calc(6px + env(safe-area-inset-bottom,0px)); background:var(--card); border:2px solid var(--edge); border-bottom:0; box-shadow:0 -4px 0 var(--shadow); }
.tabs a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:0; min-height:70px; padding:6px 0; border-top:3px solid transparent; color:var(--ink-soft); text-decoration:none; font-size:17px; font-weight:800; letter-spacing:-.035em; overflow-wrap:anywhere; text-align:center; }
.tabs a .ic { font-size:24px; line-height:1; }
.tabs a[aria-current="page"] { color:var(--green); background:var(--green-bg); border-top-color:var(--green); }
.tabs a:focus-visible { outline-offset:-4px; }
.toast { position:fixed; z-index:10; left:50%; bottom:calc(104px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); width:max-content; max-width:min(480px,calc(100% - 32px)); padding:12px 16px; background:var(--ink); color:var(--card); border:2px solid var(--line); border-radius:var(--r); box-shadow:4px 4px 0 var(--shadow); font-weight:900; text-align:center; }
.sparkle { position:fixed; z-index:20; width:28px; height:28px; pointer-events:none; animation:rise 1.1s steps(12,end) forwards; }
@keyframes rise { from { opacity:1; transform:translate(0,0); } to { opacity:0; transform:translate(var(--dx,0px),-140px); } }
.note { border-left:4px solid var(--line); padding-left:12px; }
hr { width:100%; border:0; border-top:2px dashed var(--line); margin:4px 0; }
@media (max-width:359px) {
  main { padding-inline:12px; }
  .brand,.brand.big { font-size:13px; gap:6px; }
  .brand.big .deco { width:24px; height:24px; }
  .card { padding:12px; }
  .seg { grid-template-columns:1fr; }
  .entry .eff { grid-column:2 / -1; justify-items:start; text-align:left; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .sparkle { display:none; }
}