* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #1b2617; color: #f4efe2;
  font: 15px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
canvas#map { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }

button {
  font: inherit; color: inherit; border: 0; border-radius: 10px; cursor: pointer;
  background: #3b4a2f; padding: 8px 12px; min-height: 40px;
}
button:hover:not(:disabled) { background: #4a5c3b; }
button:disabled { opacity: 0.45; cursor: default; }
button.small { min-height: 28px; padding: 3px 9px; font-size: 13px; }
button.icon { min-width: 40px; padding: 6px; }
button.ready { background: #c9962c; color: #1d1608; font-weight: 700; }
button.ready:hover:not(:disabled) { background: #ddaa3c; }
button.big { width: 100%; min-height: 50px; font-size: 18px; font-weight: 700; background: #c9962c; color: #1d1608; }

#top {
  position: fixed; top: 0; left: 0; right: 0; display: flex; flex-wrap: wrap; gap: 6px 12px;
  justify-content: space-between; align-items: center;
  padding: max(6px, env(safe-area-inset-top)) 10px 6px; background: rgba(20, 28, 16, 0.88);
}
#top .stock { display: flex; gap: 12px; font-size: 16px; }
#top .stock b { font-variant-numeric: tabular-nums; }
#top .stock b.short { color: #ff8b7a; }
#top .round { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; justify-content: flex-end; }
#top .round > * { white-space: nowrap; }
.age { padding: 4px 10px; border-radius: 999px; background: #5b4a1f; font-weight: 600; font-size: 13px; }
.phase { padding: 4px 10px; border-radius: 999px; background: #2c5d8f; font-weight: 600; font-variant-numeric: tabular-nums; }
.phase.watch { background: #8f2c2c; }
.phase.low { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }

#minimap[hidden] { display: none; }
#minimap { position: fixed; right: 8px; top: 110px; width: 160px; height: 88px; border: 2px solid #c9962c; border-radius: 6px; background: #20301c; touch-action: none; z-index: 5; }
@media (max-width: 600px) { #minimap { width: 120px; height: 66px; } }
#quick { position: fixed; left: 8px; top: 110px; display: flex; flex-direction: column; gap: 8px; }
#quick button { background: rgba(40, 52, 32, 0.9); min-width: 56px; }

#net-banner { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); width: min(92vw, 460px); background: rgba(120, 70, 10, 0.92); color: #fff3d6; padding: 6px 12px; border-radius: 8px; font-size: 14px; text-align: center; pointer-events: none; z-index: 2; }
#net-banner:not([hidden]) ~ #toasts { top: 120px; }
#toasts { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: min(92vw, 420px); }
.toast { background: rgba(10, 10, 10, 0.8); padding: 6px 12px; border-radius: 8px; font-size: 14px; text-align: center; transition: opacity 0.4s; }

#panel {
  position: fixed; left: 0; right: 0; bottom: 0; padding: 8px 10px max(8px, env(safe-area-inset-bottom));
  background: rgba(20, 28, 16, 0.92); display: flex; flex-direction: column; gap: 6px;
}
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#sel-title { font-weight: 700; }
.orders { font-size: 13px; color: #cfc6ad; white-space: nowrap; }
.hint { font-size: 13px; color: #cfc6ad; min-height: 1.2em; }
/* All the buttons are always reachable: they wrap onto more rows, and scroll up and down if there are very many. */
.actions { display: flex; flex-wrap: wrap; gap: 6px; max-height: 40vh; overflow-y: auto; padding-bottom: 2px; overscroll-behavior: contain; }
.actions button { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 72px; padding: 5px 9px; }
.actions button small { font-size: 12px; color: #e3d9bd; }
.actions button.active { outline: 2px solid #ffe14d; }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(12, 18, 10, 0.78); padding: 16px; }
.card { max-height: 100%; overflow-y: auto; width: min(100%, 420px); background: #26331f; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.card h1 { margin: 0; font-size: 26px; }
.card .sub { margin: 0; color: #cfc6ad; }
.card label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #cfc6ad; }
.card input, .card select { font: inherit; font-size: 16px; padding: 10px; border-radius: 10px; border: 1px solid #4b5c3d; background: #18210f; color: #f4efe2; }
.card details { font-size: 14px; color: #ddd4bb; }
.card summary { cursor: pointer; font-weight: 600; }
.card ul { padding-left: 18px; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }

@media (min-width: 900px) {
  #panel { left: 50%; transform: translateX(-50%); width: 760px; border-radius: 14px 14px 0 0; }
}

/* On a phone the buttons share the width three to a row, so the panel stays low. */
@media (max-width: 520px) {
  .actions { gap: 5px; max-height: 34vh; }
  .actions button { flex: 1 1 28%; min-width: 0; padding: 4px 3px; font-size: 13px; line-height: 1.15; }
  .actions button small { font-size: 11px; }
}

/* What a button offers: shown above the panel on hover (mouse) or on a long press (touch). */
#tip {
  position: fixed; left: 50%; transform: translateX(-50%); width: min(92vw, 440px); z-index: 5;
  padding: 8px 12px; border-radius: 10px; background: rgba(12, 16, 10, 0.96); border: 1px solid #5b6c47;
  font-size: 13px; line-height: 1.35; color: #f4efe2; pointer-events: none; box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

button.big.alt { background: #3a5a7a; color: #eef4fa; }
.code-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: #cfc6ad; }
.code-row b { font-size: 30px; letter-spacing: 4px; color: #f4efe2; }
.seats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.seats li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #18210f; font-size: 16px; }
.seats li.empty { color: #8f9a80; font-style: italic; }