/* Layout: a sunlit valley. A framed hero with a hand-built hillside scene (two hills joined by a
   rope bridge, goods crossing it), then calm leaf-green cards. Green is the action colour,
   sun-yellow and coral are small accents taken from the scene. */
:root {
  --bg: #eaf3e2; --surface: #ffffff; --ink: #15281a; --muted: #566b57; --line: #d3e3c8;
  --accent: #4b7f2b; --accent-ink: #ffffff; --accent-deep: #2f5d1c;
  --sun: #f2c94c; --coral: #ee6f5b; --skin: #f3c9a0; --loaf: #c98b4a; --trunk: #6b4a2b;
  --offer: #1d7547; --offer-bg: #d9f1df; --want: #8a5a00; --want-bg: #fdebb8;
  --danger: #b3261e; --stage: #0f1f17; --stage-ink: #b9cfc0;
  --sky1: #fff3c4; --sky2: #d4efc2; --sky3: #aee0c4; --glow: rgba(255, 226, 120, .75);
  --card-edge: rgba(255, 255, 255, .95); --hero-ink: #15281a; --cloud: rgba(255, 255, 255, .7);
  --h1: #c3e8a1; --h2: #a5da90; --h3: #85c884; --h4: #5fb070; --h5: #3e8d58;
  --fir1: #2f7d4b; --fir2: #3f9d62; --blob: #d9e85c; --wall: #fff8e8; --roof: #ee6f5b; --trail: #f6d66a; --rope: #7a5430;
  --display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --body: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1a12; --surface: #14261b; --ink: #e9f3e4; --muted: #94ab99; --line: #25392c;
    --accent: #8fd16b; --accent-ink: #0c1a12; --accent-deep: #b9e8a0;
    --offer: #6fd8a0; --offer-bg: #123a27; --want: #f2c46a; --want-bg: #3b2d0c; --danger: #ff8a80; --stage: #060d09; --stage-ink: #9fb5a6;
    --sky1: #27463f; --sky2: #183a2c; --sky3: #10291f; --glow: rgba(242, 201, 76, .22);
    --card-edge: rgba(255, 255, 255, .22); --hero-ink: #f0f7ea; --cloud: rgba(255, 255, 255, .08);
    --h1: #26513c; --h2: #1f4a37; --h3: #1a4130; --h4: #153629; --h5: #0f2a20;
    --fir1: #0f3a26; --fir2: #14472f; --blob: #6f8f3a; --wall: #e8dcc0; --roof: #c9584a; --trail: #b99a3a; --rope: #b08a5a;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--body); }
.wrap { max-width: 68rem; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
main.wrap { padding-block: 20px 56px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.12; text-wrap: balance; margin: 0; }
h1 { font-size: 2rem; font-weight: 800; } h2 { font-size: 1.4rem; font-weight: 800; } h3 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0; } .muted { color: var(--muted); } .small { font-size: .875rem; }

/* brand */
.brand { display: inline-flex; align-items: center; gap: 8px; font: 600 1.45rem var(--display); letter-spacing: -.01em; color: var(--hero-ink); text-decoration: none; }
.top .brand { color: var(--ink); }
.brand .swap { font-weight: 800; color: var(--accent-deep); text-decoration: underline wavy var(--sun) 2px; text-underline-offset: 5px; text-decoration-skip-ink: none; }
.mark { display: inline-flex; } .mark svg { display: block; }

/* top bar for app views */
.top { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }
body.hasbar::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--surface); z-index: 10; }
.bar { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding-block: 10px; }
nav { display: flex; gap: 4px; flex: 1; min-width: 0; flex-wrap: wrap; }
nav button { background: none; border: 0; font: 600 .95rem var(--body); color: var(--muted); padding: 8px 12px; border-radius: 999px; cursor: pointer; }
nav button:hover { color: var(--ink); }
nav button[aria-current="page"] { color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.userbox { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .9rem; }
.credits { font-variant-numeric: tabular-nums; font-weight: 600; background: var(--bg); padding: 4px 12px; border-radius: 999px; }
.link { background: none; border: 0; color: var(--muted); cursor: pointer; text-decoration: underline; padding: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn { background: var(--accent); color: var(--accent-ink); border: 0; padding: 10px 18px; border-radius: 10px; font-weight: 600; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.danger { background: var(--danger); color: var(--surface); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.outline { background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--hero-ink); border: 1.5px solid var(--hero-ink); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.stack { display: grid; gap: 16px; } .row { display: flex; gap: 10px 12px; flex-wrap: wrap; align-items: center; }
.head { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
label { display: grid; gap: 4px; font-weight: 500; font-size: .9rem; min-width: 0; }
input, select, textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; width: 100%; }
textarea { resize: vertical; min-height: 4.5rem; }
.form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.form .full { grid-column: 1 / -1; }
.authbox { max-width: 30rem; margin: 12px auto 0; }
.authbox .form { grid-template-columns: minmax(0, 1fr); }
.tag { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; }
.tag.offer { color: var(--offer); background: var(--offer-bg); } .tag.want { color: var(--want); background: var(--want-bg); }
.post { display: grid; gap: 8px; align-content: start; } .post .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.post .details { overflow-wrap: anywhere; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 14px; cursor: pointer; font-weight: 500; }
.chip[aria-pressed="true"] { background: var(--accent-deep); color: var(--surface); border-color: var(--accent-deep); }
.empty { text-align: center; padding: 36px 16px; color: var(--muted); }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th, .table td { text-align: left; padding: 9px 8px 9px 0; border-bottom: 1px solid var(--line); }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.scroll { overflow-x: auto; } .earned { color: var(--offer); font-weight: 600; } .spent { color: var(--want); font-weight: 600; }
.big { font: 800 2rem var(--display); font-variant-numeric: tabular-nums; }
.notice { background: var(--want-bg); color: var(--want); padding: 10px 12px; border-radius: 10px; }
.callout { background: var(--offer-bg); color: var(--offer); padding: 10px 12px; border-radius: 10px; }

/* hero */
.frame { position: relative; overflow: hidden; border-radius: 28px; padding-bottom: clamp(200px, 30vw, 300px);
  background: radial-gradient(60% 55% at 88% 6%, var(--glow), transparent 70%), linear-gradient(165deg, var(--sky1) 0%, var(--sky2) 48%, var(--sky3) 100%); }
.edge { position: absolute; inset: 14px 14px 0; border: 6px solid var(--card-edge); border-bottom: 0; border-radius: 30px 30px 0 0; background: linear-gradient(rgba(255,255,255,.22), transparent 70%); pointer-events: none; }
.hero-in { position: relative; z-index: 2; padding: 30px clamp(20px, 4vw, 44px) 0; display: grid; gap: 28px; justify-items: center; text-align: center; }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; width: 100%; text-align: left; }
.hero-top nav { flex: 0 1 auto; justify-content: center; }
.hero-top nav button { color: var(--hero-ink); }
.hero-top nav button[aria-current="page"] { background: rgba(255,255,255,.5); color: var(--hero-ink); }
.hero-top .userbox { color: var(--hero-ink); } .hero-top .link { color: var(--hero-ink); }
.eyebrow { color: var(--hero-ink); font-weight: 500; }
.hero-in h1 { font-size: clamp(2rem, 6.2vw, 3.7rem); color: var(--hero-ink); max-width: 14ch; letter-spacing: -.02em; }
.hero-copy { display: grid; gap: 12px; justify-items: center; position: relative; }
.hero-copy .loop { position: absolute; right: -64px; top: 18px; width: 56px; color: var(--hero-ink); }
@media (max-width: 820px) { .hero-copy .loop { display: none; } }
.scene { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(200px, 30vw, 300px); z-index: 3; pointer-events: none; }
.scene svg { display: block; width: 100%; height: 100%; }
.spark { position: absolute; z-index: 1; width: 22px; color: #fff; opacity: .9; }
.cloud { fill: var(--cloud); } .s-h1 { fill: var(--h1); } .s-h2 { fill: var(--h2); } .s-h3 { fill: var(--h3); } .s-h4 { fill: var(--h4); } .s-h5 { fill: var(--h5); }
.trunk { fill: var(--trunk); } .wall { fill: var(--wall); } .roof { fill: var(--roof); } .door { fill: var(--rope); } .trail { fill: var(--trail); }
.f1 { fill: var(--fir1); } .f2 { fill: var(--fir2); } .bl { fill: var(--blob); }
.rope { stroke: var(--rope); fill: none; stroke-linecap: round; }

.steps { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.step { display: grid; gap: 8px; align-content: start; }
.num { width: 34px; height: 34px; border-radius: 50%; background: var(--sun); color: #3a2c00; display: grid; place-items: center; font: 800 1.05rem var(--display); }
.section { margin-top: 28px; }

/* live room */
.stage { position: relative; background: var(--stage); border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; }
.stage video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--stage); }
.stage .remote-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--stage-ink); text-align: center; padding: 16px; }
.stage .self { position: absolute; right: 10px; bottom: 10px; width: min(28%, 11rem); aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 2px solid rgba(255,255,255,.7); background: #000; }
.stage .self video { transform: scaleX(-1); }
.clock { font: 800 1.6rem var(--display); font-variant-numeric: tabular-nums; }
.live { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 760px) { .live { grid-template-columns: minmax(0, 1fr); } }
.chat { display: grid; grid-template-rows: 1fr auto; gap: 10px; min-height: 14rem; }
.log { overflow-y: auto; max-height: 22rem; display: grid; gap: 8px; align-content: start; }
.msg { background: var(--bg); border-radius: 12px; padding: 7px 10px; overflow-wrap: anywhere; } .msg b { display: block; font-size: .78rem; color: var(--muted); }
.msg.me { background: var(--offer-bg); }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; z-index: 20; max-width: calc(100% - 32px); }
.c-loaf { fill: var(--loaf); } .c-sun { fill: var(--sun); } .c-coral { fill: var(--coral); } .c-teal { fill: #4cc3b0; } .c-skin { fill: var(--skin); }
.err { color: var(--danger); } .nowrap { flex-wrap: nowrap; } .center { justify-content: center; }
/* an author display rule would otherwise beat the browser's [hidden] */
[hidden] { display: none !important; }
@media (max-width: 820px) { .spark { display: none; } }