* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #10130f;
  font: 13px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #dfe6d8; }
#view { display: block; width: 100vw; height: 100vh; cursor: crosshair; }

/* the panels float over the map, so they must not swallow map clicks —
   only the actual buttons take pointer events back */
#hud, #bottom, #left, #trucks, #playerLegend, #hint, #eventPanel { pointer-events: none; }
#newGameBtn, #sessionBtn, #exitBtn, .truckBtn { pointer-events: auto; }
body.nohud #hud, body.nohud #bottom, body.nohud #eventPanel { display: none; }

#hud {
  position: fixed; top: 12px; left: 12px; padding: 10px 12px; width: 208px;
  background: rgba(10,14,10,.82); border: 1px solid #2f3d2c; border-radius: 8px;
  backdrop-filter: blur(4px);
}
#hud .row { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; }
#hud .row[hidden] { display: none; }   /* the flex rule above beats the UA default */
#hud .row span:first-child { color: #8ea283; }
#hud b { color: #ffd479; letter-spacing: .5px; }
#windrose { display: block; margin: 6px auto 0; }
#newGameBtn, #sessionBtn, #exitBtn { width: 100%; margin-top: 8px; font: inherit; padding: 6px; border-radius: 6px;
  cursor: pointer; background: #23301f; color: #c9d6c1; border: 1px solid #46573f; }
#newGameBtn:hover, #sessionBtn:hover, #exitBtn:hover { background: #2f4029; color: #ffd479; }
#newGameBtn small, #sessionBtn small { color: #7f8f78; }
#exitBtn { border-color: #6b3a2f; }
#exitBtn:hover { background: #3a241d; color: #ff9a8a; }

/* Fixed left:12px/width to match #hud, so it reads as one column; top and
   height are computed in app.js from whatever room the HUD and truck bar
   leave between them, since both of those can change size. */
#eventPanel {
  position: fixed; overflow: hidden; display: flex; flex-direction: column;
  padding: 8px 12px; background: rgba(10,14,10,.82); border: 1px solid #2f3d2c;
  border-radius: 8px; backdrop-filter: blur(4px);
}
#eventPanel .hdr { flex: 0 0 auto; margin-bottom: 4px; }
#eventPanel .hdr b { color: #ffd479; letter-spacing: .5px; }
/* the rolling log itself: newest row at the bottom, oldest dropped once it
   no longer fits — see logOutbreak() in app.js */
#eventLog { flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; }
#eventLog .row { display: flex; justify-content: space-between; gap: 10px; flex: 0 0 auto; }
#eventLog .row span:first-child { color: #8ea283; }

/* trucks on the left, hint on the right, sharing one row: the hint shrinks and
   wraps instead of reaching left across the truck buttons */
#bottom {
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
/* the cards may wrap to a second row; what they must not do is squeeze the
   hint into a one-word column, which costs more height than wrapping does */
#left { flex: 0 1 auto; display: flex; flex-direction: column; gap: 8px; }
#trucks { display: flex; flex-wrap: wrap; gap: 10px; }
/* who's who, shown only once a second account is in the session (app.js) */
#playerLegend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
#playerLegend .chip { display: flex; align-items: center; gap: 6px;
  color: #c9d6c1; font-size: 12px; }
#playerLegend .chip.you { color: #ffd479; }
#playerLegend .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.truckBtn {
  padding: 9px 12px 11px; border-radius: 7px; cursor: pointer; min-width: 150px; text-align: left;
  background: rgba(10,14,10,.86); border: 1px solid #46372f; color: #e9b8a4;
}
.truckBtn.sel { border-color: #ffd479; color: #ffd479; box-shadow: 0 0 0 1px #ffd479 inset; }
/* name on the left, tank reading on the right, sharing the top line */
.truckBtn .hdr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.truckBtn .lbl { font-size: 15px; font-weight: bold; letter-spacing: .4px; }
/* owner color swatch — hidden by default, shown only once a session has 2+
   players (app.js toggles .shown and sets the background color) */
.truckBtn .owner { display: none; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.truckBtn .owner.shown { display: inline-block; }
.truckBtn .amt { font-size: 14px; font-weight: bold; color: #cfe6ff;
  font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.truckBtn small { display: block; color: #8ea283; font-size: 12px; margin-top: 1px; }
/* The reading sits above the bar rather than on it: a plate centred over the
   fill hid the very edge you need to see. The bar is left to do one job —
   show the level — with quarter ticks to measure a part-full tank against. */
.truckBtn .gauge { position: relative; display: block; height: 18px; margin-top: 7px;
  border-radius: 4px; background: rgba(0,0,0,.55); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset; }
.truckBtn .gauge u { display: block; height: 100%; background: #4ab5ff; transition: width .2s; }
.truckBtn .gauge::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(25% - 1px), rgba(0,0,0,.5) calc(25% - 1px) 25%);
}
.truckBtn.dry { border-color: #8a3a30; color: #ff9a8a; }
.truckBtn.tender { border-color: #2c4d6b; color: #9ec9ea; }
.truckBtn.tender.dry { border-color: #8a3a30; color: #ff9a8a; }
.truckBtn.tender.sel { border-color: #ffd479; color: #ffd479; }
.truckBtn.spray small { color: #7ec8ff; }
.truckBtn.auto small { color: #ffa63c; }

#hint { flex: 0 1 auto; min-width: 27ch; max-width: 44ch; text-align: right;
  color: #7f8f78; background: rgba(10,14,10,.7); padding: 6px 10px; border-radius: 6px; }
#hint b { color: #c9d6c1; }

/* the title art on every screen that isn't an active game: before login,
   before starting, and after exiting — dimmed enough that the text and
   buttons stay readable over any part of it */
#startScreen, #loginScreen, #noSession {
  position: fixed; inset: 0; display: flex; flex-direction: column; gap: 4px;
  align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(rgba(8,11,8,.48), rgba(8,11,8,.48)),
              url('/forestcommand-title.png') center/cover no-repeat;
}
#startScreen h1, #loginScreen h1, #noSession h1 { color: #ffd479; letter-spacing: 2px; margin: 0 0 6px; }
#startScreen p, #noSession p { color: #9db092; margin: 0 0 18px; }
#startScreen button, #settings button, #loginScreen button, #noSession button {
  font: inherit; padding: 10px 28px; border-radius: 6px; cursor: pointer;
  background: #b3341f; color: #fff; border: 1px solid #e2694f;
}
#startScreen button:hover, #loginScreen button:hover, #noSession button:hover { background: #d0412a; }
#noSession button + button {
  margin-top: 10px; background: none; color: #8ea283; border: 1px solid #46573f;
}
#noSession button + button:hover { background: #23301f; color: #c9d6c1; }
.hidden { display: none !important; }

/* Nothing about the game — not even a frozen frame — renders before the
   server has confirmed the account is allowlisted. */
body.pre-auth #hud, body.pre-auth #bottom, body.pre-auth #startScreen,
body.pre-auth #gameOver, body.pre-auth #settings, body.pre-auth #sessionPanel,
body.pre-auth #noSession, body.pre-auth #view {
  display: none !important;
}
#loginScreen { display: none; }
body.pre-auth #loginScreen { display: flex; }
#loginScreen #whoami { color: #9db092; margin: 0 0 4px; }
#loginScreen #signOutBtn {
  margin-top: 10px; background: none; color: #8ea283; border: 1px solid #46573f;
  padding: 6px 16px; font-size: 12px;
}
#loginScreen #signOutBtn:hover { background: #23301f; color: #c9d6c1; }
#loginScreen #loginStatus { max-width: 40ch; min-height: 1.4em; margin-top: 14px; }

/* Sits above every other panel, including the tuning drawer: once the forest is
   gone there is nothing behind it worth reading. */
#gameOver {
  position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(ellipse at center, rgba(40,10,6,.82), rgba(8,11,8,.95));
}
#gameOver h1 {
  margin: 0; font-size: clamp(44px, 9vw, 96px); line-height: 1; letter-spacing: 8px;
  color: #ff6a4d; text-shadow: 0 0 30px rgba(255,90,60,.5), 0 2px 0 rgba(0,0,0,.6);
}
#gameOver p { margin: 18px 0 26px; font-size: clamp(15px, 1.7vw, 20px); color: #e4d9c8;
  letter-spacing: 1px; }
#gameOver button {
  font: inherit; font-size: 15px; padding: 10px 30px; border-radius: 6px; cursor: pointer;
  background: #b3341f; color: #fff; border: 1px solid #e2694f;
}
#gameOver button:hover { background: #d0412a; }
#gameOver button small { color: #f3c0b2; }

#settings, #sessionPanel {
  position: fixed; top: 12px; right: 12px; width: 300px; max-height: 92vh; overflow: auto;
  padding: 10px 14px; background: rgba(10,14,10,.92); border: 1px solid #2f3d2c; border-radius: 8px;
}
#settings h3, #sessionPanel h3 { margin: 2px 0 10px; color: #ffd479; display: flex; justify-content: space-between; }
#settings h3 button, #sessionPanel h3 button { padding: 0 8px; background: none; border: none; color: #8ea283; font-size: 18px; }
.slider { margin-bottom: 9px; }
.slider label { display: flex; justify-content: space-between; color: #8ea283; }
.slider label b { color: #dfe6d8; font-weight: normal; }
.slider input { width: 100%; accent-color: #ffd479; }
.note { color: #6d7d67; }

#sessionPanel p { color: #8ea283; margin: 0 0 8px; }
#sessionPanel .code { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
#sessionPanel .code b { color: #ffd479; font-size: 18px; letter-spacing: 2px;
  font-variant-numeric: tabular-nums; }
#sessionPanel .code button, #sessionPanel .row button, #sessionPanel .leave {
  font: inherit; padding: 5px 10px; border-radius: 6px; cursor: pointer;
  background: #23301f; color: #c9d6c1; border: 1px solid #46573f;
}
#sessionPanel .code button:hover, #sessionPanel .row button:hover, #sessionPanel .leave:hover {
  background: #2f4029; color: #ffd479;
}
#sessionPanel .row { display: flex; gap: 8px; margin-bottom: 10px; }
#sessionPanel .row input { flex: 1 1 auto; font: inherit; text-transform: uppercase;
  letter-spacing: 1px; padding: 5px 8px; border-radius: 6px; background: #10130f;
  border: 1px solid #46573f; color: #dfe6d8; }
#sessionPanel .leave { width: 100%; }
#sessionPanel .leave + .leave { margin-top: 8px; }
#sessionPanel .err { color: #ff9a8a; min-height: 1.2em; margin: -4px 0 10px; font-size: 12px; }