/* Gotlandia -- the printed board's palette, so the app and the map agree. */
:root {
  --sea:      #12405c;
  --sea-deep: #0b2c40;
  --parchment:#f4ead6;
  --ink:      #16344a;
  --gold:     #c87c41;
  --sand:     #e0ad70;
  --line:     rgba(244,234,214,.18);
  --p0: #b23a34;
  --p1: #2f6fb0;
  --p2: #3f8f52;
  --p3: #d9a327;

  --shipchat-nav-bg: rgba(11,44,64,.94);
  --shipchat-nav-fg: #f4ead6;
  --shipchat-nav-accent: #c87c41;
  /* The leave row on the platform's pause panel, in the board's own red rather
     than the library's default -- it is the same chrome as the menu above. */
  --shipchat-pause-danger: #e0796f;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  background: var(--sea-deep);
  color: var(--parchment);
  font: 16px/1.45 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
body { position: fixed; inset: 0; }

#app {
  height: 100vh;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

#screens { flex: 1 1 auto; min-height: 0; position: relative; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
.screen[hidden] { display: none; }

.panel-scroll {
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 32px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

h2 { font-size: 1.35rem; margin: .2em 0 .3em; color: var(--sand); letter-spacing: .02em; }
h3 { font-size: 1.05rem; margin: 1.4em 0 .3em; color: var(--sand); }
.lede { opacity: .82; margin-top: 0; }
.hint { font-size: .82rem; opacity: .62; margin: .35em 0 0; }
.credits { font-size: .86rem; opacity: .8; line-height: 1.6; }

button {
  font: inherit;
  font-size: .95rem;
  color: var(--parchment);
  background: rgba(244,234,214,.09);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  min-height: 44px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
button:hover:not(:disabled) { background: rgba(244,234,214,.16); }
button:disabled { opacity: .38; cursor: default; }
button.primary { background: var(--gold); border-color: var(--gold); color: #23150a; font-weight: 600; }
button.on { background: var(--gold); border-color: var(--gold); color: #23150a; }
.row { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.field { margin: 16px 0; }
.field > label { display: block; font-size: .78rem; letter-spacing: .09em;
  text-transform: uppercase; opacity: .6; margin-bottom: 6px; }
input[type=text] {
  font: inherit; padding: 10px 12px; min-height: 44px; box-sizing: border-box;
  width: 100%; max-width: 280px;
  background: rgba(0,0,0,.25); color: var(--parchment);
  border: 1px solid var(--line); border-radius: 10px;
}
.segmented { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.bots { display: flex; flex-direction: column; gap: 8px; }
.bots .botrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bots .botrow > span { min-width: 92px; opacity: .8; font-size: .9rem; }

/* ---- the table --------------------------------------------------------- */

#table { flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; padding: 8px;
  box-sizing: border-box; }
#table[hidden] { display: none; }
.board-wrap {
  flex: 1 1 55%; min-width: 0; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
}
.board-wrap svg { width: 100%; height: 100%; max-height: 100%; display: block; }
.side {
  flex: 1 1 45%; min-width: 0; max-width: 460px;
  display: flex; flex-direction: column; gap: 8px; min-height: 0;
}
.side .scroll { overflow: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; }

@media (orientation: portrait) {
  #table { flex-direction: column; }
  .board-wrap { flex: 0 0 42%; }
  .side { flex: 1 1 58%; max-width: none; }
}

.card-box {
  background: rgba(0,0,0,.28);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
}
.banner { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.banner b { color: var(--sand); }
.banner .demand { color: var(--gold); }
.banner .pirates { font-size: .85rem; color: #e0796f; }
.tag { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }

.store { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.store .item { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.store .item svg { width: 18px; height: 18px; }
.store .item.zero { opacity: .35; }

.players { display: flex; flex-direction: column; gap: 4px; }
.pentry { display: flex; flex-direction: column; gap: 1px; }
.pentry .store { padding-left: 20px; gap: 4px 10px; }
.pentry .store .item svg { width: 14px; height: 14px; }
.pentry .store .item { font-size: .76rem; opacity: .85; }
.prow { display: flex; align-items: center; gap: 8px; font-size: .88rem; padding: 3px 6px;
  border-radius: 8px; }
.prow.active { background: rgba(200,124,65,.22); }
.prow .swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.prow .nm { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .vp { font-variant-numeric: tabular-nums; color: var(--sand); }
.prow .tally { display: inline-flex; gap: 7px; flex: 0 0 auto; }
.prow .tally .item { display: inline-flex; align-items: center; gap: 2px;
  font-size: .8rem; font-variant-numeric: tabular-nums; opacity: .9; }
.prow .tally .item svg { width: 15px; height: 15px; }

.prow .rep { flex: 0 0 auto; font-size: .78rem; color: var(--sand); opacity: .9;
  max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.repname { color: var(--sand); font-weight: 600; }
.reptext { font-size: .85rem; opacity: .85; }

/* The decoration market: ten rows, and which of them are gone. */
.decs { display: flex; flex-direction: column; gap: 3px; }
.dec { display: flex; align-items: center; gap: 8px; font-size: .82rem;
  padding: 3px 7px; border: 1px solid var(--line); border-radius: 8px; }
.dec .nm { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dec .cost { font-variant-numeric: tabular-nums; opacity: .8; }
.dec .vp { font-variant-numeric: tabular-nums; color: var(--sand); min-width: 3.4em;
  text-align: right; }
.dec.gone { opacity: .42; text-decoration: line-through; }
.dec.mine { opacity: 1; text-decoration: none; background: rgba(200,124,65,.18); }

/* The craft/trading piles: one row per pile, top card and how many are left. */
.piles { display: flex; flex-direction: column; gap: 3px; }
.pile { display: flex; align-items: center; gap: 8px; font-size: .82rem;
  padding: 3px 7px; border: 1px solid var(--line); border-radius: 8px; }
.pile .nm { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pile .tag { font-variant-numeric: tabular-nums; color: var(--sand); }
.pile.gone { opacity: .42; text-decoration: line-through; }

.hand { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior: contain;
  padding: 4px 2px 8px; }
.gcard {
  flex: 0 0 auto; width: 134px; min-height: 164px;
  background: linear-gradient(180deg, #f4ead6, #e3d5b8);
  color: #23150a; border-radius: 10px; border: 2px solid #23150a33;
  padding: 7px 8px; box-sizing: border-box; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  text-align: left; font-size: .78rem; line-height: 1.3;
}
.gcard:hover { background: linear-gradient(180deg, #fff6e4, #eadcc2); }
.gcard.sel { outline: 3px solid var(--gold); }
.gcard.dim { opacity: .45; }
.gcard .t { font-weight: 700; font-size: .9rem; border-bottom: 1px solid #23150a33; padding-bottom: 3px; }
.gcard .o { opacity: .85; }
.gcard .f { margin-top: auto; font-size: .72rem; opacity: .72; font-style: italic; }
.gcard .req { font-size: .7rem; opacity: .7; }
/* A reputation card carries a paragraph rather than a list of actions, so it is
   wider than a card from the hand and as tall as its own words. */
.gcard.rep { width: 230px; min-height: 190px; }

.choices { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.choices button { padding: 7px 11px; min-height: 40px; font-size: .87rem; }
/* The question is the one line on the screen a player must not miss. */
.prompt { color: var(--sand); font-size: 1.02rem; font-weight: 600; min-height: 1.3em;
  margin: 2px 0 8px; }
.grouphead { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  opacity: .68; margin: 8px 0 4px; }

.log { font-size: .8rem; opacity: .75; display: flex; flex-direction: column-reverse; gap: 2px; }

.downloads { display: flex; gap: 22px; flex-wrap: wrap; }
.dl { text-align: center; }
.dl .qr { width: 210px; height: 210px; background: #f4ead6; border-radius: 12px; padding: 8px;
  box-sizing: border-box; display: flex; }
.dl .qr svg { width: 100%; height: 100%; }
.dl a { display: inline-block; margin-top: 8px; color: var(--gold); }

table.board { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.board th, table.board td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.board th { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }

.guide { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.guide .art { flex: 0 0 44px; height: 44px; background: rgba(0,0,0,.25); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; }
.guide .art svg { width: 34px; height: 34px; }
.guide .txt { flex: 1 1 auto; font-size: .9rem; }
.guide .txt b { color: var(--sand); }

.notice { background: rgba(178,58,52,.22); border: 1px solid rgba(178,58,52,.5);
  border-radius: 10px; padding: 8px 12px; margin: 10px 0; font-size: .9rem; }
.rooms { display: flex; flex-direction: column; gap: 6px; }
.roomrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px; }
.roomrow .nm { flex: 1 1 auto; }