/* The page's own skin. Everything here is sized in fractions of the viewport
   or in rem, so the narrow phone and the wide laptop get the same layout at
   different sizes rather than two layouts. */

:root {
  --ink: #f2ece0;
  --ink-dim: #b9b1a2;
  --wood: #b98a4a;
  --stone: #b8bcc0;
  --gold: #f0c040;
  --food: #d4785a;
  --pop: #cfd6dd;
  --panel: rgba(18, 20, 24, 0.80);
  --panel-line: rgba(255, 255, 255, 0.14);
  --accent: #d8b25a;
  --safe: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  overflow: hidden; background: #10131a; color: var(--ink);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  overscroll-behavior: none;
  touch-action: none;
}

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.hidden { display: none !important; }

/* ================================== screens =============================== */

.screen {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background:
    radial-gradient(120% 90% at 20% 0%, #2a3a2c 0%, rgba(16,19,26,0) 60%),
    radial-gradient(120% 100% at 90% 100%, #3a2a22 0%, rgba(16,19,26,0) 55%),
    linear-gradient(#161b22, #0d1015);
  overflow-y: auto;
}

.menu-inner {
  width: min(680px, 100%);
  text-align: center;
  padding: 8px 4px;
}

h1 {
  font-size: clamp(28px, 7vw, 54px);
  margin: 0 0 6px;
  letter-spacing: 0.02em;
  font-weight: 800;
  color: #f4ead2;
  text-shadow: 0 3px 0 #2a1d12, 0 6px 22px rgba(0,0,0,0.6);
}

.tagline {
  margin: 0 0 22px; color: var(--ink-dim);
  font-size: clamp(13px, 3.4vw, 17px); line-height: 1.5;
}

h2 { font-size: clamp(17px, 4.4vw, 22px); margin: 0 0 8px; color: #f0e2c4; }

.menu-buttons { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.menu-buttons.row { flex-direction: row; justify-content: center; }

button {
  font: inherit; color: var(--ink); cursor: pointer;
  border: 1px solid rgba(255,255,255,0.20);
  background: linear-gradient(#3b424c, #262b33);
  border-radius: 10px;
  padding: 12px 20px;
  transition: transform 0.06s ease, filter 0.12s ease;
  -webkit-user-select: none; user-select: none;
}
button:active { transform: translateY(1px) scale(0.99); filter: brightness(1.15); }
button.big { width: min(340px, 90%); font-size: clamp(16px, 4.2vw, 19px); padding: 15px 20px; font-weight: 700; }
button.alt { background: linear-gradient(#4a3f2c, #302820); border-color: rgba(216,178,90,0.5); }
button.small { padding: 9px 16px; font-size: 14px; }

.panel {
  margin-top: 18px; padding: 16px;
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: 14px;
  backdrop-filter: blur(6px);
}

.hint, .note { color: var(--ink-dim); font-size: 14px; line-height: 1.5; }
.note { min-height: 1.4em; margin: 12px 0 0; }

.seat-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 16px; }
.seat-row span { color: var(--ink-dim); margin-right: 6px; font-size: 14px; }
.seat { width: 46px; padding: 10px 0; }
.seat.on { background: linear-gradient(#8a6f34, #5e4a22); border-color: var(--accent); }

.help { text-align: left; line-height: 1.65; padding-left: 20px; margin: 0 0 16px; color: #ded6c6; font-size: 15px; }
.help b { color: #f3e3bd; }

.seat-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 16px; }
.seat-line {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px;
  background: rgba(255,255,255,0.055); border: 1px solid var(--panel-line);
  font-size: 15px;
}
.seat-line .dot { width: 9px; height: 9px; border-radius: 50%; background: #6a7079; }
.seat-line.here .dot { background: #78d06a; box-shadow: 0 0 8px #78d06a; }
.seat-line .who { flex: 1; text-align: left; }
.seat-line .tag { font-size: 12px; color: var(--accent); }

.link-row { display: flex; gap: 6px; margin-bottom: 12px; }
.link-row input {
  flex: 1; min-width: 0; font: inherit; font-size: 13px;
  padding: 9px 11px; border-radius: 9px; color: #cfd6dd;
  background: rgba(0,0,0,0.42); border: 1px solid var(--panel-line);
}

/* =================================== hud ================================== */

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
#hud button, #hud input { pointer-events: auto; }

#topbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 7px 10px; padding-top: max(7px, env(safe-area-inset-top, 0px));
  background: linear-gradient(rgba(10,12,16,0.86), rgba(10,12,16,0.0));
  font-size: clamp(12px, 3vw, 16px);
  font-variant-numeric: tabular-nums;
}
.res { display: flex; align-items: center; gap: 5px; font-weight: 700; }
.spacer { flex: 1; }
#clock { color: var(--ink-dim); font-size: clamp(11px, 2.6vw, 14px); }

.ico { width: 13px; height: 13px; border-radius: 2px; display: inline-block; }
.ico.wood { background: var(--wood); border-radius: 2px; }
.ico.stone { background: var(--stone); clip-path: polygon(20% 0,80% 0,100% 40%,80% 100%,20% 100%,0 40%); }
.ico.gold { background: var(--gold); border-radius: 50%; }
.ico.food { background: var(--food); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.ico.pop { background: var(--pop); border-radius: 50% 50% 20% 20%; height: 12px; }

.icon-btn {
  padding: 6px 11px; font-size: 16px; line-height: 1;
  border-radius: 8px; background: rgba(30,34,40,0.8);
}

#minimap-wrap {
  position: absolute; left: 10px; bottom: calc(10px + var(--safe));
  border: 1px solid var(--panel-line); border-radius: 10px;
  overflow: hidden; background: rgba(8,10,14,0.72);
  pointer-events: auto;
}
#minimap { display: block; width: clamp(96px, 22vmin, 180px); height: clamp(96px, 22vmin, 180px); }

#side {
  position: absolute; right: 10px; bottom: calc(10px + var(--safe));
  width: clamp(180px, 34vw, 268px);
  display: flex; flex-direction: column; gap: 8px;
  max-height: 62vh; overflow-y: auto; pointer-events: auto;
}
.small-panel { margin: 0; padding: 10px; border-radius: 12px; font-size: 13px; }

#build-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; }
.bbtn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 4px; border-radius: 9px; font-size: 11px; line-height: 1.15;
  background: linear-gradient(#343a43, #232830);
}
.bbtn .bn { font-weight: 700; font-size: 12px; }
.bbtn .bc { color: var(--ink-dim); font-size: 10px; }
.bbtn.cant { opacity: 0.42; }
.bbtn.on { background: linear-gradient(#8a6f34, #5e4a22); border-color: var(--accent); }

#selection .sel-head { font-weight: 700; margin-bottom: 5px; color: #f3e3bd; }
#selection .sel-row { display: flex; justify-content: space-between; color: var(--ink-dim); }
#selection .bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.14); margin: 6px 0 3px; overflow: hidden; }
#selection .bar i { display: block; height: 100%; background: #78c46a; }

#actions, #camera-pad {
  position: absolute; display: flex; gap: 7px; pointer-events: auto;
}
#actions {
  right: 10px; bottom: calc(clamp(180px, 34vw, 268px) + 20px + var(--safe));
  flex-direction: column;
}
#camera-pad {
  left: calc(clamp(96px, 22vmin, 180px) + 20px); bottom: calc(10px + var(--safe));
}
.round {
  width: 46px; height: 46px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; background: rgba(30,34,40,0.82);
}
.round.small { width: 38px; height: 38px; font-size: 16px; }

#hint {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(46px + env(safe-area-inset-top, 0px));
  padding: 7px 15px; border-radius: 999px;
  background: rgba(12,14,18,0.84); border: 1px solid var(--panel-line);
  font-size: clamp(12px, 3vw, 15px); color: #f3e3bd;
  max-width: 88vw; text-align: center;
}

#toast {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(84px + var(--safe));
  padding: 8px 16px; border-radius: 999px;
  background: rgba(120,40,32,0.9); border: 1px solid rgba(255,160,140,0.35);
  font-size: clamp(12px, 3vw, 15px); color: #ffe6df;
  max-width: 88vw; text-align: center;
}

/* ---- a phone held upright, and a very wide laptop ----
   The panels stack along the top and bottom edges and the world keeps the
   middle. Nothing is hidden and nothing asks anybody to turn anything. */
@media (max-aspect-ratio: 1/1) {
  #side {
    left: 10px; right: 10px; width: auto;
    bottom: calc(10px + var(--safe));
    max-height: 30vh;
  }
  #minimap-wrap { bottom: auto; top: calc(42px + env(safe-area-inset-top, 0px)); }
  #actions {
    right: 10px; bottom: auto; top: calc(42px + env(safe-area-inset-top, 0px));
    flex-direction: row;
  }
  #camera-pad { left: 10px; bottom: auto; top: calc(42px + env(safe-area-inset-top, 0px)); }
  #camera-pad { display: none; }
  #actions { right: 10px; }
  #topbar { gap: 9px; }
}
@media (max-aspect-ratio: 1/1) and (max-width: 400px) {
  #topbar { gap: 7px; font-size: 12px; }
  .ico { width: 10px; height: 10px; }
}

/* The line under a chosen group that says what can be done with them. It
   stays on screen: what the page asks of the player is not allowed to leave
   with the first panel. */
#selection .sel-note {
  margin-top: 6px; color: var(--ink-dim); font-size: 11.5px; line-height: 1.35;
}
#selection #sel-row, #selection #work-row {
  display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap;
}
#selection #sel-row button, #selection #work-row button {
  flex: 1 1 auto; padding: 8px 10px; font-size: 12px;
}

/* ---- the hint, once the top strip is already full ----
   A phone held upright keeps the minimap and the two round buttons along the
   top edge, which is exactly where a centred message wants to be. So the
   message stands below them instead of through them. */
@media (max-aspect-ratio: 1/1) {
  #hint { top: calc(150px + env(safe-area-inset-top, 0px)); max-width: 92vw; }
}

/* ---- a phone on its side has height to spend on the world and none on
        panels ----
   The build menu had three columns and three rows on a screen this short, so
   the last two buildings were below the fold and had to be scrolled for.
   Narrower buttons give four columns and two rows, and the whole menu is
   visible at once. */
@media (max-height: 560px) {
  #side { max-height: calc(100vh - 18px - var(--safe)); }
  #build-panel { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 5px; }
  .bbtn { padding: 5px 3px; border-radius: 8px; }
  .bbtn .bn { font-size: 10.5px; }
  .bbtn .bc { font-size: 9px; }
  #selection .sel-note { font-size: 10.5px; }
}