/* MOTTE — game HUD. Bright, chunky, warm. Not dark-neon, not crypto-glass.
   Same two-voice type system as the landing (fonts are <link>ed from the HTML):
   Alfa Slab One for the display voice, Rubik for anything you read. */

:root{
  --sand:#e8d5a3; --sand-d:#c9ad76;
  --sea:#3fb0c8;  --sea-d:#1e6f85;
  --wood:#8a5a3b; --wood-d:#5b3a26;
  --cream:#fff6e3; --ink:#3a2a1c;
  --gold:#f5c451;  --red:#d4553f; --green:#5fbf7a;
  --r:16px;
  --daylight:1;
  --display:'Alfa Slab One', Impact, system-ui, sans-serif;
  --body:Rubik, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{
  font-family:var(--body); font-weight:400;
  color:var(--ink); background:#8fd3e6;
  user-select:none;
}

/* Sky lives behind the transparent canvas and dims with the in-game clock. */
#sky{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(120% 80% at 50% 0%, #cdf0fb 0%, #8fd3e6 45%, #5fbcd6 100%);
  filter:brightness(calc(0.45 + var(--daylight) * 0.55)) saturate(calc(0.7 + var(--daylight) * 0.4));
  transition:filter .6s linear;
}
#scene{position:fixed; inset:0; width:100%; height:100%; z-index:1; display:block; touch-action:none}
body.bulldozing #scene{cursor:crosshair}

/* ---------------------------------------------------------------- loader */
#loader{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:linear-gradient(180deg,#7fc9de,#3f9cb8);
  transition:opacity .6s ease, visibility .6s;
}
#loader.gone{opacity:0; visibility:hidden}
.lwrap{text-align:center; color:var(--cream); width:min(90vw,420px)}
.lmark{font-size:56px; line-height:1}
.lwrap h1{font-family:var(--display); font-size:56px; font-weight:400; margin:.1em 0 0; letter-spacing:.06em; text-shadow:0 4px 0 rgba(0,0,0,.22)}
.lwrap p{margin:.2em 0 1.6em; opacity:.9; font-size:18px}
.lbar{height:12px; border-radius:99px; background:rgba(0,0,0,.22); overflow:hidden; border:2px solid rgba(255,255,255,.35)}
.lbar i{display:block; height:100%; width:0; background:var(--gold); transition:width .25s ease}
#loadTxt{margin-top:.7em; font-size:14px; opacity:.85}

/* ---------------------------------------------------------------- chrome */
button{font-family:var(--display); font-size:15px; font-weight:400; cursor:pointer; border:0; border-radius:var(--r)}
.primary{
  background:var(--gold); color:var(--ink);
  border-bottom:4px solid #c99a2e; padding:12px 20px;
}
.primary:active{transform:translateY(2px); border-bottom-width:2px}
.ghost{
  background:var(--cream); color:var(--ink);
  border-bottom:4px solid var(--sand-d); padding:10px 16px;
}
.ghost:active{transform:translateY(2px); border-bottom-width:2px}
.ghost.on{background:var(--red); color:#fff; border-bottom-color:#9c3527}
.ghost.sq{padding:10px 12px; font-size:18px; line-height:1}
.danger{background:var(--red); color:#fff; border-bottom:4px solid #9c3527}
button[disabled]{opacity:.5; cursor:not-allowed}

#top{
  position:fixed; z-index:10; top:0; left:0; right:0;
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top));
  background:linear-gradient(180deg,rgba(255,246,227,.96),rgba(255,246,227,.72) 70%,transparent);
}
.brand{
  font-family:var(--display); font-weight:400; font-size:22px; letter-spacing:.04em; color:var(--ink);
  text-decoration:none; white-space:nowrap;
}
.topRight{margin-left:auto; display:flex; gap:8px}
#walletBtn.on{background:var(--green); color:#fff; border-bottom-color:#3d8f54}

/* One row that scrolls, never a wrapping block. Wrapping pushed the bar onto a
   second line and straight through the launch badge pinned below the header. */
#resBar{
  display:flex; gap:6px; flex-wrap:nowrap; min-width:0; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px;
}
#resBar::-webkit-scrollbar{display:none}
.res{font-family:var(--body); 
  display:flex; align-items:center; gap:5px;
  background:var(--cream); border:2px solid var(--sand-d); border-radius:99px;
  padding:5px 11px; font-size:14px; font-weight:600; white-space:nowrap;
}
.res.full{border-color:var(--red); color:var(--red)}
.res .ico{font-size:15px}

.launchNote{font-family:var(--display); 
  position:fixed; z-index:10; top:calc(58px + env(safe-area-inset-top)); left:50%;
  transform:translateX(-50%);
  background:var(--wood-d); color:var(--cream);
  padding:6px 16px; border-radius:99px; font-size:13px; font-weight:600;
  white-space:nowrap; box-shadow:0 3px 0 rgba(0,0,0,.18);
}
.launchNote.live{background:var(--green)}

#side{
  position:fixed; z-index:10; right:12px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:8px; align-items:flex-end;
}
#villagerMeter{
  background:var(--cream); border:2px solid var(--sand-d); border-radius:var(--r);
  padding:9px 12px; width:168px; font-size:13px;
}
.crewTop{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-family:var(--display); font-weight:400}
.crewTop b.bad{color:var(--red)}
.crewBar{height:8px; background:var(--sand-d); border-radius:99px; overflow:hidden}
.crewBar i{display:block; height:100%; background:var(--green); transition:width .3s}
.crewBar i.bad{background:var(--red)}
.crewHint{margin-top:6px; font-size:11px; color:var(--red); font-weight:600}

#dock{
  position:fixed; z-index:10; left:50%; transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex; gap:10px;
}
.confirmBar{
  position:fixed; z-index:11; left:50%; transform:translateX(-50%) translateY(140%);
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex; gap:10px; transition:transform .28s cubic-bezier(.2,.9,.3,1.2);
}
.confirmBar.show{transform:translateX(-50%) translateY(0)}
.confirmBar.show ~ #dock{opacity:0; pointer-events:none}

/* ---------------------------------------------------------------- panels */
.panel{
  position:fixed; z-index:20; left:50%; bottom:0;
  transform:translateX(-50%) translateY(102%);
  width:min(96vw,720px); max-height:66vh; display:flex; flex-direction:column;
  background:var(--cream); border-radius:20px 20px 0 0;
  border:3px solid var(--sand-d); border-bottom:0;
  box-shadow:0 -8px 30px rgba(0,0,0,.18);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.1);
  padding-bottom:env(safe-area-inset-bottom);
}
.panel.show{transform:translateX(-50%) translateY(0)}
.phead{display:flex; align-items:baseline; gap:10px; padding:14px 16px 8px; font-family:var(--display); font-size:20px}
.phead .hint{font-size:12px; opacity:.6; font-weight:500}
.cats{display:flex; gap:6px; padding:0 16px 10px; overflow-x:auto}
.cat{
  background:transparent; border:2px solid var(--sand-d); color:var(--ink);
  padding:6px 13px; border-radius:99px; font-size:13px; white-space:nowrap;
}
.cat.on{background:var(--wood); color:var(--cream); border-color:var(--wood)}

.blist{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px;
  padding:0 16px 18px; overflow-y:auto;
}
.bcard{
  text-align:left; background:#fff; border:2px solid var(--sand-d);
  border-radius:14px; padding:11px 12px; display:flex; flex-direction:column; gap:5px;
}
.bcard:active{transform:translateY(2px)}
.bcard.poor{opacity:.45}
.bname{font-family:var(--display); font-weight:400; font-size:16px}
.bdesc{font-size:12px; line-height:1.35; opacity:.72; font-weight:400}
.io{font-size:13px; background:var(--sand); border-radius:8px; padding:3px 8px; align-self:flex-start}
.brow{display:flex; justify-content:space-between; align-items:center; margin-top:2px}
.cost{display:flex; gap:8px; font-size:13px; font-weight:600}
.brow .villagers{font-size:13px; font-weight:600; color:var(--red)}
.brow .villagers.good{color:var(--green)}
.needs{font-size:11px; color:var(--sea-d); font-weight:600; text-transform:capitalize}

.card{
  position:fixed; z-index:25; left:50%; top:50%;
  transform:translate(-50%,-46%) scale(.96); opacity:0; pointer-events:none;
  width:min(92vw,380px); background:var(--cream);
  border:3px solid var(--sand-d); border-radius:20px; padding:16px;
  box-shadow:0 14px 40px rgba(0,0,0,.25);
  transition:opacity .2s, transform .2s;
}
.card.show{opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto}
.ihead{display:flex; justify-content:space-between; align-items:center; font-family:var(--display); font-size:21px; margin-bottom:8px}
.x{background:transparent; font-size:18px; padding:2px 6px; color:var(--ink); opacity:.6}
.idesc{font-size:13px; line-height:1.45; opacity:.78; font-weight:400; margin-bottom:10px}
.irow{display:flex; justify-content:space-between; padding:6px 0; border-top:1px solid var(--sand-d); font-size:14px}
.ihint{font-size:12px; opacity:.65; margin:8px 0; font-weight:400}
.wide{width:100%; margin-top:12px; padding:12px}

.vgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin:6px 0 10px}
.vitem{background:#fff; border:2px solid var(--sand-d); border-radius:12px; padding:8px 4px; text-align:center}
.vi{display:block; font-size:20px}
.vitem b{display:block; font-size:15px}
.vn{display:block; font-size:9px; opacity:.6; font-weight:500}
.vhint{font-size:13px; opacity:.7; font-weight:400}

/* ------------------------------------------------------------- villagers chat */
.chatCard{width:min(94vw,440px)}
.chatCard .cats{padding:0 0 10px; margin-top:2px}
.chatLog{
  height:min(46vh,300px); overflow-y:auto; background:#fff;
  border:2px solid var(--sand-d); border-radius:14px; padding:12px;
  display:flex; flex-direction:column; gap:9px; font-size:14px;
}
.chatLog:empty::before{
  content:'Tap a name, then ask them something.';
  opacity:.45; font-size:13px; margin:auto; text-align:center;
}
.cLine{line-height:1.45}
.cLine b{display:block; font-family:var(--display); font-size:12.5px; opacity:.65; margin-bottom:2px}
.cLine.me{align-self:flex-end; max-width:85%; background:var(--sand); border-radius:12px; padding:7px 11px}
.cLine.me b{text-align:right}
.cLine.pending{opacity:.5}
.chatRow{display:flex; gap:8px; margin-top:12px}
.chatRow input{
  flex:1; min-width:0; font-family:var(--body); font-size:15px;
  padding:11px 14px; border-radius:var(--r);
  border:2px solid var(--sand-d); background:#fff; color:var(--ink);
}
.chatRow input:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold)}
.chatRow button{padding:11px 18px}
.vfoot{font-size:11px; opacity:.55; font-weight:400; margin-top:10px; line-height:1.4}

/* ---------------------------------------------------------------- toasts */
#toasts{
  position:fixed; z-index:40; left:50%; transform:translateX(-50%);
  bottom:calc(92px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column-reverse; gap:8px; align-items:center;
  pointer-events:none; width:min(94vw,460px);
}
.toast{
  font-family:var(--body); font-weight:600;
  background:var(--wood-d); color:var(--cream);
  padding:10px 16px; border-radius:12px; font-size:14px; text-align:center;
  opacity:0; transform:translateY(10px); transition:opacity .3s, transform .3s;
  box-shadow:0 4px 14px rgba(0,0,0,.24);
}
.toast.in{opacity:1; transform:translateY(0)}
.toast.evt{background:var(--gold); color:var(--ink); font-weight:600}

/* ---------------------------------------------------------------- mobile */
@media (max-width:640px){
  /* The resource strip gets its OWN full-width row. Sharing the header row with
     the brand and three buttons left four of the six resources permanently
     scrolled out of sight on a 390px screen. */
  #top{flex-wrap:wrap; row-gap:7px; padding:8px 10px; padding-top:calc(8px + env(safe-area-inset-top))}
  .brand{font-size:16px; order:1}
  .topRight{order:2; margin-left:auto; gap:6px}
  .topRight .ghost{padding:9px 12px; font-size:14px}
  .topRight .ghost.sq{padding:9px 11px; font-size:16px}
  #resBar{order:3; flex:1 0 100%; gap:5px}
  .res{font-family:var(--body); padding:5px 9px; font-size:12.5px}

  .launchNote{font-family:var(--display); top:calc(96px + env(safe-area-inset-top)); font-size:11px; padding:5px 12px}

  /* Villagers meter stretches, camera controls tuck to the right, and the build dock
     sits clear underneath — nothing overlaps at 390px. */
  #side{
    left:10px; right:10px; top:auto; transform:none;
    bottom:calc(96px + env(safe-area-inset-bottom));   /* clears the taller dock buttons */
    flex-direction:row; align-items:center; justify-content:space-between; gap:8px;
  }
  #villagerMeter{flex:1; width:auto; padding:8px 11px; font-size:12.5px}
  #dock{bottom:calc(12px + env(safe-area-inset-bottom))}
  #dock .primary,#dock .ghost{padding:14px 22px; font-size:16px}   /* thumb-sized */
  .confirmBar{bottom:calc(12px + env(safe-area-inset-bottom))}
  .confirmBar button{padding:14px 18px}

  .blist{grid-template-columns:1fr 1fr; padding:0 12px 14px}
  .bdesc{display:none}
  .panel{max-height:64svh}
  #toasts{bottom:calc(152px + env(safe-area-inset-bottom))}
}
@media (max-width:420px){
  .blist{grid-template-columns:1fr}
  .topRight .ghost{padding:8px 10px; font-size:13px}
  .brand{font-size:15px}
}
/* Landscape phones are short, not narrow — reclaim vertical space instead. */
@media (max-height:480px) and (orientation:landscape){
  #top{flex-wrap:nowrap; padding:6px 10px}
  #resBar{flex:1 1 auto}
  .launchNote{display:none}
  #side{bottom:calc(66px + env(safe-area-inset-bottom))}
  .panel{max-height:78svh}
}