/* ── The Oregon Trail: Remastered ─────────────────────────── */
:root{
  --bg:#131020; --bg2:#1d1830; --panel:#221c38; --panel2:#2c2448;
  --ink:#e8e2d0; --dim:#9b93b8; --gold:#e8b44c; --green:#7ec850;
  --red:#e0564c; --blue:#5aa8d8; --line:#453a6b;
  --shadow:0 0 0 2px #0a0814, 0 8px 0 #0a0814;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:'VT323', monospace; font-size:21px; line-height:1.35;
  image-rendering:pixelated;
  background-image:
    radial-gradient(ellipse at 50% -20%, #2a2246 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.12) 2px 4px);
}
#app{max-width:960px; margin:0 auto; padding:18px; min-height:100%; display:flex; flex-direction:column; justify-content:center}
.hidden{display:none !important}

/* screens */
.screen{display:none; animation:fadein .25s}
.screen.active{display:block}
@keyframes fadein{from{opacity:0; transform:translateY(6px)} to{opacity:1}}

/* title */
.title-wrap{text-align:center; padding:30px 0}
#title-canvas{width:min(640px,96vw); height:auto; margin-bottom:8px}
.game-logo{
  font-family:'Press Start 2P', monospace; font-size:clamp(20px,4.4vw,40px);
  color:var(--gold); text-shadow:4px 4px 0 #6b3410, 8px 8px 0 #0a0814;
  letter-spacing:2px; margin:10px 0 4px;
}
.subtitle{color:var(--dim); letter-spacing:8px; margin-bottom:26px; font-size:18px}
.menu{display:flex; flex-direction:column; gap:12px; align-items:center}
.footnote{margin-top:30px; color:var(--dim); font-size:16px}

/* buttons */
.btn{
  font-family:'Press Start 2P', monospace; font-size:13px; cursor:pointer;
  background:var(--panel2); color:var(--ink); border:2px solid var(--line);
  padding:12px 20px; box-shadow:var(--shadow); text-align:left;
  transition:transform .06s, background .1s;
}
.btn:hover{background:#3a2f60; color:var(--gold); transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn.big{width:min(420px,90vw); font-size:14px}
.btn.small{padding:8px 12px; font-size:11px}
.btn.ghost{background:transparent; color:var(--dim)}
.btn.danger{border-color:var(--red); color:var(--red)}
.btn.primary{border-color:var(--gold); color:var(--gold)}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none}

/* panels */
.panel{
  background:var(--panel); border:2px solid var(--line); box-shadow:var(--shadow);
  padding:26px; max-width:640px; margin:0 auto;
}
.panel.wide{max-width:820px}
h2{font-family:'Press Start 2P', monospace; font-size:15px; color:var(--gold); margin-bottom:18px; line-height:1.6}
h3{font-family:'Press Start 2P', monospace; font-size:14px; color:var(--gold); margin-bottom:12px; line-height:1.5}
.label{color:var(--dim); text-transform:uppercase; letter-spacing:2px; font-size:16px; margin:10px 0 4px}
.hint{color:var(--dim); font-size:17px; margin-top:6px}
.row{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.howto p{margin-bottom:12px}
.howto b{color:var(--gold)}

/* inputs */
.input{
  font-family:'VT323', monospace; font-size:22px; width:100%;
  background:#141024; color:var(--ink); border:2px solid var(--line);
  padding:8px 12px; outline:none; margin-bottom:8px;
}
.input:focus{border-color:var(--gold)}
.code-input{font-family:'Press Start 2P',monospace; font-size:22px; letter-spacing:10px; text-transform:uppercase; text-align:center}
.room-code{
  font-family:'Press Start 2P', monospace; font-size:34px; letter-spacing:14px;
  color:var(--green); text-align:center; background:#141024; border:2px dashed var(--green);
  padding:16px; margin:8px 0; user-select:all;
}
.player-list{list-style:none}
.player-list li{padding:6px 10px; border-bottom:1px solid var(--line)}
.player-list .you{color:var(--gold)}
.player-list .host-tag{color:var(--blue); font-size:15px}

/* setup / store */
.opt-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin:8px 0 16px}
.opt-card{
  background:var(--panel2); border:2px solid var(--line); padding:12px; cursor:pointer; text-align:center;
}
.opt-card:hover{border-color:var(--gold)}
.opt-card.sel{border-color:var(--green); background:#20321c}
.opt-card .t{font-family:'Press Start 2P',monospace; font-size:11px; color:var(--gold); display:block; margin-bottom:6px; line-height:1.5}
.opt-card .d{color:var(--dim); font-size:16px}
.store-table{width:100%; border-collapse:collapse; margin-bottom:14px}
.store-table td{padding:7px 8px; border-bottom:1px solid var(--line)}
.store-table td:first-child{width:42%}
.qty-btn{
  font-family:'Press Start 2P',monospace; font-size:12px; width:34px; height:34px; cursor:pointer;
  background:var(--panel2); color:var(--gold); border:2px solid var(--line);
}
.qty-btn:hover{background:#3a2f60}
.qty{display:inline-block; min-width:52px; text-align:center; font-size:22px}
.money{color:var(--green)}
.neg{color:var(--red)}

/* travel */
.travel-layout{max-width:820px; margin:0 auto}
#scene{width:100%; height:auto; border:2px solid var(--line); box-shadow:var(--shadow); display:block; background:#000}
.hud{background:var(--panel); border:2px solid var(--line); border-top:none; padding:12px 14px}
.hud-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:4px 18px; font-size:19px}
.hud-grid b{color:var(--gold)}
.progress-wrap{margin-top:10px}
.progress-bar{position:relative; height:14px; background:#141024; border:2px solid var(--line)}
#progress-fill{height:100%; background:linear-gradient(90deg,#5c4033,#e8b44c); width:0%}
#progress-wagon{position:absolute; top:-14px; left:0; color:var(--gold); font-size:14px; transform:translateX(-50%)}
.progress-labels{display:flex; justify-content:space-between; color:var(--dim); font-size:15px}
.travel-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.ticker{
  margin-top:10px; background:#141024; border:2px solid var(--line);
  min-height:88px; max-height:130px; overflow-y:auto; padding:8px 12px; font-size:18px;
}
.ticker .day-line{color:var(--dim)}
.ticker .warn{color:var(--red)}
.ticker .good{color:var(--green)}
.ticker .info{color:var(--blue)}

/* chat */
.chat-dock{position:fixed; right:12px; bottom:12px; width:270px; background:var(--panel); border:2px solid var(--line); box-shadow:var(--shadow); padding:8px; z-index:40}
.chat-log{height:140px; overflow-y:auto; font-size:17px; margin-bottom:6px}
.chat-log .who{color:var(--gold)}
.chat-row{display:flex; gap:6px}
.chat-row .input{margin:0; font-size:18px}

/* modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(6,4,12,.8); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal{
  background:var(--panel); border:2px solid var(--gold); box-shadow:var(--shadow);
  max-width:560px; width:100%; padding:24px; max-height:88vh; overflow-y:auto;
}
.modal-actions{display:flex; flex-direction:column; gap:8px; margin-top:16px}
.vote-count{color:var(--blue); font-size:16px; margin-left:8px}
.member-row{display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:5px 0}
.hp-bar{display:inline-block; width:90px; height:10px; background:#141024; border:1px solid var(--line); vertical-align:middle}
.hp-fill{height:100%; background:var(--green)}
.hp-fill.mid{background:var(--gold)} .hp-fill.low{background:var(--red)}
.sick{color:var(--red); font-size:15px}

/* hunt */
.hunt-wrap{max-width:660px; margin:0 auto; text-align:center}
.hunt-hud{font-family:'Press Start 2P',monospace; font-size:13px; color:var(--gold); margin-bottom:8px}
#hunt-canvas{width:100%; height:auto; border:2px solid var(--line); box-shadow:var(--shadow); cursor:crosshair; background:#000}

/* end */
.tombstone{
  text-align:center; background:#3a3a44; border:2px solid #666; border-radius:60px 60px 0 0;
  padding:30px 20px; max-width:340px; margin:14px auto; color:#ddd;
}
.score-table{width:100%; border-collapse:collapse; margin:12px 0}
.score-table td{padding:5px 8px; border-bottom:1px solid var(--line)}
.score-table td:last-child{text-align:right}
.final-score{font-family:'Press Start 2P',monospace; font-size:20px; color:var(--gold); text-align:center; margin:14px 0}

@media (max-width:640px){
  body{font-size:19px}
  .btn{font-size:11px; padding:10px 14px}
  .room-code{font-size:22px; letter-spacing:8px}
  .chat-dock{width:200px}
}