/* Lewis & Clark Expedition — forest + parchment field-journal theme */
:root {
  --pine: #1d3529;
  --pine-2: #27463a;
  --moss: #56703e;
  --fern: #8aa063;
  --river: #2c5a74;
  --river-deep: #1c3d52;
  --bark: #5a3c26;
  --bark-dark: #37251a;
  --parchment: #ead9b4;
  --parchment-light: #f6edd6;
  --ink: #2a1c11;
  --ink-soft: #5d4632;
  --brass: #b88b3d;
  --danger: #8f2f1e;
  --ok: #3f6a34;
  --display: 'IM Fell English', 'Iowan Old Style', Georgia, serif;
  --body: 'Alegreya', Georgia, 'Times New Roman', serif;
  --radius: 6px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--body); font-size: 18px; line-height: 1.5; color: var(--ink);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(138,160,99,.18), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(44,90,116,.25), transparent 60%),
    linear-gradient(180deg, #24402f 0%, var(--pine) 60%, #172a20 100%);
  background-attachment: fixed;
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 0 0 .4em; color: var(--ink); }
h1 { font-size: 2.6rem; } h2 { font-size: 2rem; } h3 { font-size: 1.45rem; } h4 { font-size: 1.15rem; }
p { margin: 0 0 .8em; max-width: 68ch; }
a { color: var(--river); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.hidden { display: none !important; }
.muted { color: var(--ink-soft); }
.small { font-size: .85rem; }
.center { text-align: center; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem 1.1rem; border-radius: var(--radius); cursor: pointer;
  font-family: var(--body); font-weight: 700; font-size: 1rem; line-height: 1.2;
  border: 2px solid var(--bark-dark); background: var(--bark); color: var(--parchment-light);
  box-shadow: 0 3px 0 var(--bark-dark); transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--bark-dark); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.btn.river { background: var(--river); border-color: var(--river-deep); box-shadow: 0 3px 0 var(--river-deep); }
.btn.moss { background: var(--moss); border-color: #3a4f2a; box-shadow: 0 3px 0 #3a4f2a; }
.btn.ghost { background: var(--parchment-light); color: var(--bark-dark); border-color: var(--bark); box-shadow: 0 3px 0 var(--bark); }
.btn.danger { background: var(--danger); border-color: #5c1d12; box-shadow: 0 3px 0 #5c1d12; }
.btn.big { font-size: 1.15rem; padding: .75rem 1.6rem; }
.btn.full { width: 100%; }

/* ---------- panels ---------- */
.frame {
  background: linear-gradient(160deg, var(--parchment-light), var(--parchment) 70%, #e0cb9d);
  border: 6px solid var(--bark-dark); border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--brass), 0 10px 30px rgba(0,0,0,.35);
  padding: 1.6rem;
}
.river-box {
  background: linear-gradient(160deg, #31627e, var(--river-deep));
  color: var(--parchment-light); border: 2px solid var(--brass); border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.river-box h3, .river-box h4 { color: #f1d995; }
.river-box p { color: var(--parchment-light); }
.note-box { background: var(--parchment-light); border: 2px solid var(--bark); border-left: 6px solid var(--brass); border-radius: var(--radius); padding: .9rem 1.1rem; }
.stat-box { background: #fbf3df; border: 2px solid #9a6a3c; border-radius: var(--radius); padding: .7rem .6rem; text-align: center; }
.stat-box .lbl { font-size: .85rem; color: var(--ink-soft); }
.stat-box .val { font-family: var(--display); font-size: 1.7rem; color: var(--ink); }
.stat-box .sub { font-size: .8rem; color: var(--ink-soft); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; margin: 1rem 0; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(180deg, #4a3220, var(--bark-dark));
  border-bottom: 3px solid var(--brass); color: var(--parchment-light);
  display: flex; align-items: center; gap: 1rem; padding: .45rem 1rem; flex-wrap: wrap;
}
.topbar .brand { font-family: var(--display); font-size: 1.5rem; color: #f1d995; white-space: nowrap; }
.topbar .tstat { display: flex; flex-direction: column; line-height: 1.1; min-width: 3.5rem; }
.topbar .tstat small { font-size: .7rem; color: #d4bf94; }
.topbar .tstat b { font-size: 1rem; }
.topbar .money b { color: #f1d995; }
.meter { width: 120px; height: 12px; background: #24170e; border: 1px solid #a07d4a; border-radius: 6px; overflow: hidden; margin-top: 3px; }
.meter > i { display: block; height: 100%; background: linear-gradient(90deg, #7a9a50, #a9c46e); transition: width .4s; }
.meter.low > i { background: linear-gradient(90deg, #8f2f1e, #c2552f); }
.jeff { display: flex; align-items: center; gap: .45rem; }
.jeff img { width: 38px; height: 38px; border-radius: 50%; background: var(--parchment); border: 2px solid var(--brass); object-fit: cover; }
.jeff .meter > i { background: linear-gradient(90deg, var(--brass), #f1d995); }
.topnav { display: flex; gap: .35rem; flex-wrap: wrap; margin-left: auto; }
.topnav button {
  background: transparent; color: var(--parchment-light); border: 1px solid #8a6a43; border-radius: 4px;
  padding: .3rem .65rem; cursor: pointer; font-size: .9rem;
}
.topnav button:hover, .topnav button.on { background: var(--brass); color: var(--ink); border-color: var(--brass); }

main { max-width: 1240px; margin: 0 auto; padding: 1.4rem 1rem 3rem; }

/* ---------- home ---------- */
.home-hero { position: relative; border: 6px solid var(--bark-dark); border-radius: 8px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.home-hero img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.home-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.4rem; margin-top: 1.4rem; align-items: start; }
.auth-tabs { display: flex; gap: .4rem; margin-bottom: 1rem; }
.auth-tabs button { flex: 1; padding: .55rem; border: 2px solid var(--bark); background: transparent; border-radius: var(--radius); cursor: pointer; font-weight: 700; color: var(--bark-dark); }
.auth-tabs button.on { background: var(--bark); color: var(--parchment-light); }
label.field { display: block; margin-bottom: .8rem; font-weight: 700; color: var(--ink-soft); font-size: .95rem; }
label.field input, label.field select, label.field textarea, input.inp, select.inp {
  display: block; width: 100%; margin-top: .25rem; padding: .55rem .7rem; border-radius: var(--radius);
  border: 2px solid #9a6a3c; background: #fffaf0; color: var(--ink); font-weight: 400;
}
.err { color: var(--danger); font-weight: 700; min-height: 1.4em; }
.ok-text { color: var(--ok); font-weight: 700; }

/* ---------- location page ---------- */
.loc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.2rem; align-items: start; }
.loc-img { border: 6px solid var(--bark-dark); border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.loc-img img { display: block; width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.loc .actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.special { margin: 1rem 0; }

/* ---------- level info ---------- */
.level-card { max-width: 900px; margin: 0 auto; text-align: center; }
.level-card .lvl { font-family: var(--display); color: #8a5a2a; font-size: 1.2rem; }
.level-card h1 { font-size: 3rem; }
.level-card .river-box { text-align: left; margin: 1rem 0; }

/* ---------- travel ---------- */
.travel { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 1.2rem; }
.scene { position: relative; border: 6px solid var(--bark-dark); border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35); background: #000; }
.scene img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; filter: saturate(.9); }
.day-counter {
  position: absolute; top: .8rem; left: .8rem; background: rgba(29,53,41,.88); color: var(--parchment-light);
  border: 2px solid var(--brass); border-radius: var(--radius); padding: .4rem .8rem; font-family: var(--display); font-size: 1.5rem;
}
.day-counter small { display: block; font-family: var(--body); font-size: .75rem; color: #d4bf94; }
.route { padding: .8rem 1rem 1rem; background: var(--parchment); border-top: 3px solid var(--brass); }
.route svg { width: 100%; height: 70px; display: block; }
.route .rlabels { display: flex; justify-content: space-between; font-size: .85rem; color: var(--ink-soft); }
.gauges { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.gauge { background: #fbf3df; border: 2px solid #9a6a3c; border-radius: var(--radius); padding: .5rem .7rem; }
.gauge .lbl { font-size: .8rem; color: var(--ink-soft); }
.gauge .val { font-family: var(--display); font-size: 1.4rem; }
.gauge .meter { width: 100%; height: 10px; }
.travel-log { max-height: 220px; overflow: auto; font-size: .92rem; background: #fbf3df; border: 2px solid #9a6a3c; border-radius: var(--radius); padding: .5rem .8rem; }
.travel-log div { padding: .15rem 0; border-bottom: 1px dotted #c7ad7d; }
.travel-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .8rem 0; }

/* ---------- modal / scenes ---------- */
.modal-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(12,22,16,.78); display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 2rem 1rem; }
.modal { width: min(1100px, 100%); }
.modal .frame { padding: 1.4rem; }
.modal-close { float: right; }

.journal { position: relative; container-type: inline-size; border-radius: 8px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.5); background: #e9dcc0; }
.journal > img { display: block; width: 100%; }
.journal .note { position: absolute; left: 59.6%; top: 21.6%; width: 29.4%; height: 30.2%; overflow: auto; padding: .2rem .5rem; font-size: clamp(11px, 1.45cqw, 18px); line-height: 1.38; color: var(--ink); }
.journal .note h3 { font-size: 1.55em; margin-bottom: .25em; }
.journal .note p { margin-bottom: .5em; }
.journal .page { position: absolute; left: 53.5%; top: 56.5%; width: 38.5%; height: 33%; overflow: auto; display: flex; flex-direction: column; gap: .5rem; justify-content: center; font-size: clamp(12px, 1.3cqw, 17px); }
.journal .page .btn { font-size: 1em; }
@container (max-width: 760px) {
  .journal .note, .journal .page { position: static; width: auto; height: auto; padding: 1rem; font-size: 16px; }
  .journal .page { padding-top: 0; }
}
.photo-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.photo-scene .ph { border: 5px solid var(--bark-dark); border-radius: 6px; overflow: hidden; background: #fff; }
.photo-scene .ph img { display: block; width: 100%; }
.choices { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; }
.choices .btn { justify-content: flex-start; text-align: left; }
.check-line { display: flex; gap: .6rem; align-items: flex-start; background: var(--parchment-light); border: 2px dashed var(--bark); border-radius: var(--radius); padding: .7rem .9rem; margin: .8rem 0; cursor: pointer; }
.check-line input { width: 1.3rem; height: 1.3rem; margin-top: .15rem; accent-color: var(--moss); }

.epic { text-align: center; }
.epic h1 { font-size: 3.4rem; color: var(--river-deep); }
.epic .ph { margin: 1rem auto; max-width: 820px; border: 6px solid var(--bark-dark); border-radius: 8px; overflow: hidden; }
.epic .ph img { display: block; width: 100%; }

/* ---------- minigames ---------- */
.mg-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.mg-stats { display: flex; gap: .8rem; flex-wrap: wrap; font-weight: 700; color: var(--ink-soft); }
.mg-stats b { color: var(--ink); }
.hunt-field {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; padding: 1rem;
  background: linear-gradient(180deg, #a9c3cf 0%, #c9d8c0 35%, #8aa063 36%, #6f8a4b 100%);
  border: 5px solid var(--bark-dark); border-radius: 8px;
}
.spot { position: relative; aspect-ratio: 1; border: none; background: transparent; cursor: crosshair; padding: 0; border-radius: 8px; }
.spot svg { width: 100%; height: 100%; display: block; }
.spot:hover:not(:disabled) { background: rgba(255,255,255,.15); }
.spot .animal { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: pop .35s ease-out; }
.spot .tag { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); background: rgba(42,28,17,.85); color: #fff; font-size: .75rem; padding: 0 .4rem; border-radius: 3px; white-space: nowrap; }
.spot.miss::after { content: 'Miss'; position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%); color: #fff; background: rgba(143,47,30,.85); padding: .1rem .5rem; border-radius: 3px; font-weight: 700; }
@keyframes pop { from { transform: scale(.3) translateY(30%); opacity: 0; } to { transform: none; opacity: 1; } }

.cards { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.card { aspect-ratio: 2/3; perspective: 600px; border: none; background: transparent; padding: 0; cursor: pointer; }
.card .in { position: relative; width: 100%; height: 100%; transition: transform .45s; transform-style: preserve-3d; }
.card.up .in { transform: rotateY(180deg); }
.card .face { position: absolute; inset: 0; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; }
.card .face img { width: 100%; height: 100%; object-fit: contain; }
.card .front { transform: rotateY(180deg); }
.card.matched { opacity: .55; cursor: default; }
.card .lbl-card { width: 100%; height: 100%; border-radius: 10px; border: 3px solid #b08a52; background: #f3e4c0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: .3rem; font-weight: 700; font-size: .8rem; text-align: center; color: var(--ink); }
.card .lbl-card svg { width: 70%; }

.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; }
.tile { aspect-ratio: 1; border-radius: 8px; border: 3px solid var(--bark); background: radial-gradient(circle, #f6ecd2, #dcc394); cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 1.6rem; color: var(--bark); }
.tile.good { background: #cfe0b0; border-color: var(--ok); font-size: 1rem; }
.tile.badt { background: #e9b9a6; border-color: var(--danger); font-size: 1rem; }
.tile.picked { outline: 4px solid var(--brass); }

.trees { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; padding: 1rem; background: linear-gradient(180deg, #d9e2c8, #9db37a); border: 5px solid var(--bark-dark); border-radius: 8px; }
.tree { border: none; background: transparent; cursor: pointer; padding: 0; aspect-ratio: 3/4; position: relative; }
.tree svg { width: 100%; height: 100%; }
.tree.cut svg { opacity: .3; }
.tree .stamp { position: absolute; inset: auto 0 6px 0; text-align: center; font-weight: 700; font-size: .8rem; color: #fff; }
.tree .stamp span { background: var(--ok); padding: 0 .4rem; border-radius: 3px; }
.tree.sick .stamp span { background: var(--danger); }

.river-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; padding: 1rem; background: linear-gradient(180deg, #3c7591, #1c3d52); border: 5px solid var(--bark-dark); border-radius: 8px; }
.rtile { aspect-ratio: 1.4; border: 2px solid rgba(255,255,255,.35); border-radius: 50% 50% 46% 54%; cursor: pointer; background: repeating-linear-gradient(170deg, rgba(255,255,255,.18) 0 6px, transparent 6px 14px), #2f6886; color: #fff; font-weight: 700; }
.rtile.wave { background: #6fa7c2; }
.rtile.rock { background: #5a4a3c; }

.body-board { position: relative; max-width: 420px; margin: 0 auto; }
.body-board img { width: 100%; display: block; }
.hot { position: absolute; border: 3px dashed rgba(184,139,61,.9); border-radius: 50%; background: rgba(246,237,214,.15); cursor: pointer; }
.hot:hover { background: rgba(184,139,61,.35); }
.hot.used { border-color: var(--danger); background: rgba(143,47,30,.35); cursor: default; }
.surgery-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; }

/* ---------- quiz / market ---------- */
.quiz-opts { display: grid; gap: .5rem; margin-top: .8rem; }
.quiz-opts .btn { justify-content: flex-start; text-align: left; }
.streak { display: flex; gap: .3rem; margin: .5rem 0; }
.streak i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bark); background: #fbf3df; }
.streak i.on { background: var(--moss); }
table.tbl { width: 100%; border-collapse: collapse; background: #fbf3df; }
table.tbl th, table.tbl td { padding: .45rem .55rem; border-bottom: 1px solid #c7ad7d; text-align: left; vertical-align: middle; }
table.tbl th { background: var(--bark); color: var(--parchment-light); font-weight: 700; }
.tbl-wrap { overflow-x: auto; border: 2px solid var(--bark); border-radius: var(--radius); }
.qty { width: 4.2rem; padding: .3rem; border: 2px solid #9a6a3c; border-radius: 4px; background: #fffaf0; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }

/* ---------- certificate ---------- */
.cert { max-width: 900px; margin: 1rem auto; text-align: center; padding: 2.4rem; border: 10px double var(--bark); background: var(--parchment-light); }
.cert h1 { font-size: 3rem; }
.cert .sig { font-family: var(--display); font-size: 2rem; margin-top: 1.4rem; }
.breakdown { max-width: 560px; margin: 1rem auto; }
@media print {
  body { background: #fff; }
  .topbar, .no-print { display: none !important; }
  .cert { border-color: #5a3c26; }
}

.toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: var(--bark-dark); color: var(--parchment-light); border: 2px solid var(--brass); padding: .6rem 1.1rem; border-radius: var(--radius); z-index: 80; box-shadow: 0 8px 20px rgba(0,0,0,.4); }

@media (max-width: 900px) {
  .home-grid, .loc, .travel, .photo-scene, .surgery-wrap { grid-template-columns: 1fr; }
  .loc-img img { min-height: 0; aspect-ratio: 16/10; }
  h1 { font-size: 2rem; } .level-card h1 { font-size: 2.2rem; } .epic h1 { font-size: 2.3rem; }
  .hunt-field, .tiles, .trees, .river-grid { grid-template-columns: repeat(5, 1fr); gap: .3rem; padding: .5rem; }
  .meter { width: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}