/* style.css — The Oregon Trail */
:root{
  --bg:#1a1410;
  --bg2:#221a13;
  --panel:#2a2018;
  --panel2:#33271d;
  --border:#4a3a2a;
  --text:#f0e3cf;
  --muted:#b8a888;
  --accent:#d97b2b;
  --accent2:#f0a040;
  --good:#7bbf5a;
  --warn:#e8c050;
  --bad:#e0604a;
  --parchment:#e9d9b8;
  --shadow:0 8px 28px rgba(0,0,0,0.45);
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#ece2cc;
  --bg2:#e0d4b8;
  --panel:#f5ecd6;
  --panel2:#ede2c6;
  --border:#c2b08a;
  --text:#3a2a18;
  --muted:#6b5a40;
  --accent:#b85a1c;
  --accent2:#a05020;
  --good:#4a8a35;
  --warn:#b8881a;
  --bad:#b5392a;
  --parchment:#faf2dd;
  --shadow:0 6px 20px rgba(80,50,20,0.18);
  color-scheme:light;
}
@media (prefers-color-scheme: light){
  html:not([data-theme]){
    --bg:#ece2cc; --bg2:#e0d4b8; --panel:#f5ecd6; --panel2:#ede2c6;
    --border:#c2b08a; --text:#3a2a18; --muted:#6b5a40;
    --accent:#b85a1c; --accent2:#a05020; --good:#4a8a35; --warn:#b8881a;
    --bad:#b5392a; --parchment:#faf2dd; --shadow:0 6px 20px rgba(80,50,20,0.18);
    color-scheme:light;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--bg);
  color: var(--text);
  overflow:hidden;
  touch-action:manipulation;
  -webkit-font-smoothing:antialiased;
}
#app{height:100%; width:100%}

/* ---- screens ---- */
.screen{height:100%; width:100%; display:flex; flex-direction:column; position:relative}
.screen.overlay{
  align-items:center; justify-content:center;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), rgba(0,0,0,0.85));
  padding:18px;
}
html[data-theme="light"] .screen.overlay{background:radial-gradient(ellipse at center, rgba(80,50,20,0.35), rgba(80,50,20,0.6))}

/* ---- start screen ---- */
.start-screen{align-items:center; justify-content:flex-end; padding:0 0 32px}
.hero{position:absolute; inset:0; overflow:hidden; z-index:0}
.sun{
  position:absolute; top:14%; left:50%; transform:translateX(-50%);
  width:160px; height:160px; border-radius:50%;
  background: radial-gradient(circle, #ffd06a 0%, #f0a040 60%, transparent 70%);
  filter: blur(1px); opacity:0.85;
}
.mountains{
  position:absolute; bottom:34%; left:0; right:0; height:36%;
  background:
    linear-gradient(135deg, transparent 49%, #5a4630 50%) -40px 0/120px 100%,
    linear-gradient(45deg, transparent 49%, #4a3826 50%) 40px 0/120px 100%;
  opacity:0.7;
}
.prairie{
  position:absolute; bottom:0; left:0; right:0; height:34%;
  background: linear-gradient(#6b7d3f, #4a5a2a);
}
.wagon{
  position:absolute; bottom:8%; left:50%; transform:translateX(-50%);
  font-size:64px; animation: bump 1.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.5));
}
@keyframes bump{0%,100%{transform:translateX(-50%) translateY(0) rotate(-2deg)}50%{transform:translateX(-50%) translateY(-6px) rotate(2deg)}}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:22px;
  max-width:520px; width:100%;
  position:relative; z-index:1;
}
.card.glass{
  background:linear-gradient(160deg, rgba(42,32,24,0.92), rgba(34,26,19,0.92));
  backdrop-filter: blur(6px);
  text-align:center;
}
html[data-theme="light"] .card.glass{background:linear-gradient(160deg, rgba(245,236,214,0.95), rgba(237,226,198,0.95))}

.title{
  font-size:38px; font-weight:900; margin:0 0 8px;
  color:var(--accent2); letter-spacing:1px;
  text-shadow:0 2px 0 rgba(0,0,0,0.3);
}
.subtitle{color:var(--muted); margin:0 0 18px; line-height:1.5}
.hint{color:var(--muted); font-size:13px; line-height:1.5; margin:10px 0 0}

/* ---- buttons ---- */
.btn{
  font-family:inherit; font-size:15px; font-weight:700;
  background:var(--panel2); color:var(--text);
  border:1px solid var(--border);
  padding:11px 18px; border-radius:10px;
  cursor:pointer; transition:transform .08s, background .15s, border-color .15s;
  letter-spacing:.3px;
}
.btn:hover{background:var(--panel); border-color:var(--accent); transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(0.98)}
.btn.primary{
  background:linear-gradient(180deg, var(--accent2), var(--accent));
  color:#1a0f06; border-color:var(--accent);
}
.btn.primary:hover{filter:brightness(1.08)}
.btn.big{padding:14px 26px; font-size:17px; width:100%; margin-top:8px}
.btn.mini{padding:6px 12px; font-size:13px}

/* ---- setup ---- */
.setup-screen{overflow:auto; padding:14px; align-items:center}
.setup-screen .card{max-width:640px}
.block{margin-bottom:18px}
.block h3{font-size:14px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); margin:0 0 10px}
.choice-row{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  flex:1; min-width:120px;
  background:var(--panel2); border:1px solid var(--border);
  border-radius:10px; padding:10px 12px; cursor:pointer; text-align:left;
  font-family:inherit; color:var(--text); transition:all .12s;
  display:flex; flex-direction:column; gap:3px;
}
.chip:hover{border-color:var(--accent)}
.chip.on{border-color:var(--accent); background:linear-gradient(180deg, rgba(217,123,43,0.18), transparent)}
.chip.small{min-width:80px; text-align:center; padding:8px 10px; font-weight:600}
.chip-t{font-weight:700}
.chip-d{font-size:12px; color:var(--muted)}

.party-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px}
.party-slot{display:flex; flex-direction:column; gap:4px}
.party-idx{font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--muted)}
.party-name{
  font-family:inherit; background:var(--bg2); color:var(--text);
  border:1px solid var(--border); border-radius:8px; padding:9px 10px; font-size:14px;
}
.party-name:focus{outline:none; border-color:var(--accent)}

.supplies-shop{display:flex; flex-direction:column; gap:6px}
.shop-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:8px 12px;
}
.shop-info{display:flex; flex-direction:column}
.shop-l{font-weight:700}
.shop-d{font-size:12px; color:var(--muted)}
.shop-ctrl{display:flex; align-items:center; gap:8px}
.shop-val{min-width:48px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums}
.qty{
  width:34px; height:34px; border-radius:8px; cursor:pointer;
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  font-family:inherit; font-size:18px; font-weight:700;
  transition:all .1s;
}
.qty:hover{border-color:var(--accent); background:var(--panel2)}
.qty:active{transform:scale(0.94)}
.shop-buy10{
  font-size:11px; color:var(--muted); cursor:pointer; padding:4px;
}
.money-line{margin-top:10px; color:var(--muted); font-size:14px}
.money-line strong{color:var(--accent2)}

/* ---- travel ---- */
.travel-screen{overflow:auto}
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; background:var(--bg2); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:2;
}
.tb-left .date{font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:1px}
.tb-left .miles-go{font-size:18px; font-weight:900; color:var(--accent2)}
.tb-right{display:flex; gap:8px}

.trail-progress{padding:12px 16px; background:var(--panel)}
.trail-bar{height:10px; background:var(--bg2); border-radius:6px; overflow:hidden; border:1px solid var(--border)}
.trail-fill{height:100%; background:linear-gradient(90deg, var(--good), var(--accent2)); transition:width .4s ease}
.trail-marker{font-size:12px; color:var(--muted); margin-top:6px}

.travel-main{padding:14px 16px 24px; display:flex; flex-direction:column; gap:14px}
.status-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:8px}
.stat{
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:8px 10px; display:flex; flex-direction:column; gap:2px;
}
.stat-l{font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--muted)}
.stat-v{font-size:18px; font-weight:800; font-variant-numeric:tabular-nums}
.stat.good{border-left:3px solid var(--good)}
.stat.warn{border-left:3px solid var(--warn)}
.stat.bad{border-left:3px solid var(--bad); color:var(--bad)}
.stat.bad .stat-v{color:var(--bad)}

.party-status h3, .log-box h3, .block h3{
  font-size:13px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted);
  margin:0 0 8px;
}
.party-list{display:flex; flex-direction:column; gap:6px}
.p-row{
  display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:7px 10px;
}
.p-name{flex:0 0 90px; font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.p-hp-bar{flex:1; height:8px; background:var(--bg2); border-radius:4px; overflow:hidden}
.p-hp-fill{height:100%; transition:width .3s}
.p-hp-fill.good{background:var(--good)}
.p-hp-fill.warn{background:var(--warn)}
.p-hp-fill.bad{background:var(--bad)}
.p-hp{font-size:12px; color:var(--muted); width:28px; text-align:right; font-variant-numeric:tabular-nums}
.p-row.dead{opacity:0.5}
.p-row.dead .p-name{text-decoration:line-through}

.settings-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:420px){.settings-row{grid-template-columns:1fr}}
.setting{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:10px 12px}
.setting-l{font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); display:block; margin-bottom:6px}
.setting-opts{display:flex; gap:6px; flex-wrap:wrap}
.opt{
  flex:1; min-width:60px; padding:7px 8px; font-size:12px; font-weight:700;
  background:var(--panel2); border:1px solid var(--border); color:var(--text);
  border-radius:7px; cursor:pointer; font-family:inherit; transition:all .1s;
}
.opt:hover{border-color:var(--accent)}
.opt.on{background:var(--accent); color:#1a0f06; border-color:var(--accent)}

.log-box{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:10px 12px}
.log-list{display:flex; flex-direction:column; gap:4px; max-height:160px; overflow:auto}
.log-entry{font-size:13px; line-height:1.4; padding:3px 0; border-bottom:1px dotted var(--border)}
.log-entry:last-child{border-bottom:none}
.log-d{color:var(--accent2); font-weight:700; font-size:11px; margin-right:6px}
.log-entry.empty{color:var(--muted); font-style:italic}

.action-row{display:flex; gap:8px; flex-wrap:wrap}
.action-row .btn{flex:1; min-width:120px}

/* ---- overlay cards ---- */
.overlay .card{text-align:center; animation:rise .25s ease}
@keyframes rise{from{transform:translateY(12px); opacity:0}to{transform:none; opacity:1}}
.landmark-card, .river-card, .fort-card{max-width:480px}
.landmark-art, .river-art, .fort-art{font-size:54px; margin-bottom:8px}
.landmark-desc{color:var(--text); line-height:1.5; margin:6px 0 8px}

.river-stats{display:flex; justify-content:center; gap:24px; margin:10px 0; color:var(--muted)}
.risk-note{font-size:12px; color:var(--muted); text-align:left; margin-top:14px; line-height:1.6; background:var(--bg2); padding:10px 12px; border-radius:8px; border:1px solid var(--border)}
.action-stack{display:flex; flex-direction:column; gap:8px; margin:12px 0}
.action-stack .btn{width:100%}

.fort-card{text-align:left}
.fort-card h2, .landmark-card h2, .river-card h2{text-align:center}
.fort-art{text-align:center}
.fort-card .trade-shop{margin:10px 0}
.inv-line{font-size:12px; color:var(--muted); margin-top:6px; text-align:center}
.fort-card .money-line{text-align:center}
.fort-card .btn.primary{margin-top:12px}

/* ---- hunt ---- */
.hunt-screen{align-items:stretch; justify-content:stretch; padding:0}
.hunt-wrap{position:relative; flex:1; width:100%; height:100%}
#huntCanvas{
  width:100%; height:100%; display:block;
  touch-action:none; cursor:crosshair;
  background:#caa46a;
}
.hunt-hint{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,0.6); color:#fff; padding:6px 14px; border-radius:20px;
  font-size:13px; pointer-events:none;
}
.muzzle-flash{
  width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle, #fff8c0, transparent 70%);
  transform:translate(-50%,-50%) scale(0); pointer-events:none;
  animation:flash .2s ease-out;
}
@keyframes flash{from{transform:translate(-50%,-50%) scale(1); opacity:1}to{transform:translate(-50%,-50%) scale(2.5); opacity:0}}

/* ---- end screens ---- */
.end-card{max-width:440px; text-align:center}
.end-art{font-size:60px; margin-bottom:6px}
.end-card h2{color:var(--accent2); margin:0 0 8px}
.end-card.bad h2{color:var(--bad)}
.end-card.good h2{color:var(--good)}
.end-stats{margin:14px 0; display:flex; flex-direction:column; gap:6px; color:var(--muted)}
.end-stats strong{color:var(--text)}

/* ---- flash ---- */
.flash{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--panel); color:var(--text); border:1px solid var(--accent);
  padding:10px 18px; border-radius:24px; box-shadow:var(--shadow);
  font-size:14px; opacity:0; pointer-events:none; transition:all .25s; z-index:50;
}
.flash.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* scrollbars */
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:4px}
::-webkit-scrollbar-track{background:transparent}