/* A chunky, gold-and-timber "mobile strategy game, circa 2016" look: carved wood panels,
   parchment content areas, beveled gold/green/red buttons. Self-hosted display + body fonts
   (no CDN) — see /lib/fonts/* routes in server.js. Palette and button chrome only: no copied
   artwork, icons or logos from any game. */

@font-face {
  font-family: 'Display';
  src: url('/lib/fonts/luckiest-guy.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Body';
  src: url('/lib/fonts/baloo2-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Body';
  src: url('/lib/fonts/baloo2-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Body';
  src: url('/lib/fonts/baloo2-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --wood-dark: #3e2817;
  --wood: #6b4226;
  --wood-light: #9c6b3f;
  --parchment: #f2dfb0;
  --parchment-dark: #e2c384;
  --ink: #3e2817;
  --gold: #ffcc33;
  --gold-dark: #d99a1f;
  --gold-light: #ffe28a;
  --green: #7ed321;
  --green-dark: #4a8c16;
  --red: #e0493a;
  --red-dark: #9c2b20;
  --blue: #29b6f6;
  --blue-dark: #1a7ea8;
  --stroke: 0 0 0 #2e1b10;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 16px/1.3 'Body', system-ui, sans-serif;
  color: var(--ink);
  background: radial-gradient(ellipse at top, #7a5230 0%, var(--wood-dark) 70%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
h1, .heading { font-family: 'Display', cursive; font-weight: 400; letter-spacing: .02em; }
input, select, button { font: inherit; }
[hidden] { display: none !important; }
.error { color: #ffd4cf; background: var(--red-dark); border: 2px solid var(--wood-dark); border-radius: .5rem; padding: .4rem .6rem; }

/* Gold-on-brown embossed title text, the way a 2016 mobile game logo reads. */
.gold-title, #auth h1 {
  color: var(--gold);
  text-shadow: -2px -2px 0 var(--wood-dark), 2px -2px 0 var(--wood-dark), -2px 2px 0 var(--wood-dark),
    2px 2px 0 var(--wood-dark), 0 3px 0 #2e1b10;
}

/* ---------- chunky beveled buttons ---------- */
button {
  font-family: 'Body', sans-serif; font-weight: 700;
  color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-dark) 100%);
  border: 3px solid var(--wood-dark);
  border-radius: .6rem;
  padding: .5em 1em;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--wood-dark), 0 5px 7px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .5);
  transition: transform .06s, box-shadow .06s;
}
button:hover { filter: brightness(1.05); }
button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--wood-dark), 0 2px 3px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .3);
}
button:disabled { filter: grayscale(.5); opacity: .6; cursor: default; transform: none; }
button.btn-primary {
  background: linear-gradient(180deg, #c3f27a 0%, var(--green) 45%, var(--green-dark) 100%);
  box-shadow: 0 3px 0 #2f5a0e, 0 5px 7px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .5);
}
button.btn-primary:active { box-shadow: 0 1px 0 #2f5a0e, 0 2px 3px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .3); }
button.btn-danger {
  background: linear-gradient(180deg, #ff9d8f 0%, var(--red) 45%, var(--red-dark) 100%);
  box-shadow: 0 3px 0 #5e1811, 0 5px 7px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .5);
}
button.btn-danger:active { box-shadow: 0 1px 0 #5e1811, 0 2px 3px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .3); }

/* ---------- carved input fields ---------- */
input, select {
  font-family: 'Body', sans-serif;
  background: #fbf2db;
  border: 3px solid var(--wood-dark);
  border-radius: .5rem;
  padding: .5em .7em;
  color: var(--ink);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3);
}
input::placeholder { color: #8a7355; }
input:focus, select:focus { outline: 3px solid var(--blue); outline-offset: 1px; }
input[type="checkbox"] { accent-color: var(--green-dark); width: 1.1rem; height: 1.1rem; }
input[type="color"] { padding: 2px; width: 2.4rem; height: 2.2rem; cursor: pointer; }

/* ---------- login screen: a parchment card on the wood background ---------- */
#auth {
  max-width: 24rem; margin: 10vh auto 0; padding: 1.5rem;
  background: var(--parchment);
  border: 4px solid var(--wood-dark);
  border-radius: 1rem;
  box-shadow: inset 0 0 0 3px var(--gold-dark), 0 10px 24px rgba(0, 0, 0, .5);
}
#auth h1 { margin: 0 0 1rem; text-align: center; font-size: 2.2rem; }
#auth p { font-weight: 700; margin: .6rem 0 .3rem; }
#auth input { display: block; width: 100%; margin-bottom: .5rem; }
#auth button, #login-passkey { width: 100%; margin-top: .3rem; }
#auth hr { border: none; border-top: 3px dashed var(--wood); margin: 1.2rem 0; }
#auth .error { margin-top: .6rem; }

/* ---------- app shell ---------- */
#app { display: flex; flex-direction: column; height: 100%; }
header {
  display: flex; gap: .6rem; align-items: center; padding: .5rem .7rem;
  background: linear-gradient(180deg, #8a5a35 0%, var(--wood) 55%, var(--wood-dark) 100%);
  border-bottom: 4px solid var(--wood-dark);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
  position: relative; z-index: 10;
}
header b { font-family: 'Display', cursive; font-weight: 400; font-size: 1.4rem; color: var(--gold);
  text-shadow: -1px -1px 0 var(--wood-dark), 1px -1px 0 var(--wood-dark), -1px 1px 0 var(--wood-dark), 1px 1px 0 var(--wood-dark); }
header nav { flex: 1; display: flex; gap: .4rem; }
header nav button { padding: .4em .8em; font-size: .9rem; }
header nav button[aria-current="true"] { filter: brightness(.85); }
#status { color: var(--red); font-size: 1.3rem; text-shadow: 0 0 4px rgba(0, 0, 0, .6); }
#status.on { color: var(--green); }

.view { flex: 1; min-height: 0; }
#view-settings { padding: 1rem; overflow: auto; }
#view-settings-card {
  max-width: 28rem; margin: 0 auto; padding: 1.2rem;
  background: var(--parchment);
  border: 3px solid var(--wood-dark);
  border-radius: .8rem;
  box-shadow: inset 0 0 0 2px var(--gold-dark), 0 6px 14px rgba(0, 0, 0, .3);
}
#view-settings p { font-weight: 600; }
#view-settings code { background: var(--parchment-dark); padding: .1em .3em; border-radius: .3em; }

#view-map { display: flex; flex-direction: column; }
/* The chat drawer's collapsed tab is a fixed 2.4rem strip on the right edge, always present —
   these toolbar rows reserve that space so their own buttons never end up underneath it. */
#map-head, #mode-head, #marker-label-form { padding-right: 2.8rem; }
#map-head {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding-top: .5rem; padding-bottom: .5rem; padding-left: .5rem;
  background: var(--wood); border-bottom: 3px solid var(--wood-dark);
}
#map-head label { color: #fff8e6; font-weight: 700; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); display: flex; align-items: center; gap: .3rem; }
#map-status { color: #fff8e6; font-weight: 700; }
#mode-head:not(:empty) { padding-top: .4rem; padding-bottom: .4rem; padding-left: .5rem; background: var(--wood-light); border-bottom: 3px solid var(--wood-dark); }
#map-mode-status { color: #fff; font-weight: 700; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
#marker-label-form { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .4rem; padding-bottom: .4rem; padding-left: .5rem; background: var(--wood-light); border-bottom: 3px solid var(--wood-dark); }
#marker-label-input { flex: 1; min-width: 8rem; }
#leaflet-map { flex: 1; min-height: 0; }
#leaflet-map.crosshair { cursor: crosshair; }
#map-empty { padding: 1rem; color: var(--parchment); font-weight: 700; }

/* Leaflet's own chrome, lightly matched to the rest of the UI. */
.leaflet-control-zoom a { font-weight: 700 !important; border: 2px solid var(--wood-dark) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--parchment) !important; border: 2px solid var(--wood-dark); }
.leaflet-popup-content { font-family: 'Body', sans-serif; font-weight: 600; }
.leaflet-popup-content button { margin-top: .3rem; }

.avatar { width: 1.3rem; height: 1.3rem; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: .3rem; border: 2px solid var(--gold-dark); }
.avatar-big { width: 4rem; height: 4rem; border-width: 3px; display: block; margin-bottom: .3rem; }

/* ---------- chat: a full-height wood-paneled drawer on the right edge ----------
   z-index is well above Leaflet's own controls/panes (which climb to 1000) so the map can
   never poke through on top of the drawer. */
#chat-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 2000;
  display: flex; align-items: stretch;
}
#chat-toggle {
  width: 2.4rem; flex: none; border: none; border-radius: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  background: linear-gradient(180deg, #8a5a35 0%, var(--wood) 55%, var(--wood-dark) 100%);
  border-left: 3px solid var(--wood-dark);
  box-shadow: -3px 0 10px rgba(0, 0, 0, .35);
}
#chat-arrow { font-size: 1.2rem; color: var(--gold); transition: transform .15s; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
#chat-panel.collapsed #chat-arrow { transform: rotate(180deg); } /* points toward the edge: tap to open */
#chat-badge { color: var(--red); font-size: 1.3rem; line-height: 0; text-shadow: 0 0 3px #000; }
#chat-panel.collapsed #chat-body { display: none; }
#chat-body {
  width: min(85vw, 20rem); display: flex; flex-direction: column; min-height: 0;
  background: var(--parchment);
  border-left: 4px solid var(--wood-dark);
  box-shadow: -4px 0 16px rgba(0, 0, 0, .3);
}

#rooms-strip {
  display: flex; align-items: center; gap: .3rem; padding: .5rem; overflow-x: auto; flex: none;
  background: var(--wood); border-bottom: 3px solid var(--wood-dark);
}
#rooms { display: flex; gap: .3rem; list-style: none; padding: 0; margin: 0; overflow-x: auto; }
#rooms li {
  white-space: nowrap; padding: .35em .8em; border-radius: 1rem; cursor: pointer; font-size: .85rem; font-weight: 700;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-dark));
  border: 2px solid var(--wood-dark); color: var(--wood-dark);
}
#rooms li.active { background: linear-gradient(180deg, #c3f27a, var(--green-dark)); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
#rooms li.unread::after { content: ' •'; color: var(--red); }
#new-room-details summary {
  list-style: none; cursor: pointer; padding: .3em .7em; border-radius: 1rem; font-weight: 700;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-dark)); border: 2px solid var(--wood-dark); color: var(--wood-dark);
}
#new-room-details summary::-webkit-details-marker { display: none; }
#new-room { padding: .6rem; background: var(--parchment-dark); }
#new-room > * { display: block; width: 100%; margin-top: .4rem; }
#empty { padding: .8rem .6rem; color: var(--wood-dark); font-weight: 700; }

#room-head { padding: .5rem .6rem; border-bottom: 3px solid var(--wood); background: var(--parchment-dark); font-weight: 600; flex: none; }
#room-head b { font-size: 1.05rem; }
#room-head summary { cursor: pointer; font-weight: 700; color: var(--wood-dark); }
#room-members { margin: .4rem 0; }
#add-member { display: flex; gap: .3rem; margin: .4rem 0; }
#add-member input { flex: 1; min-width: 0; }

#messages { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: .5rem .6rem; }
#messages li {
  margin: .3rem 0; padding: .4rem .6rem; overflow-wrap: anywhere; font-size: .92rem;
  background: #fffaf0; border: 2px solid var(--parchment-dark); border-radius: .6rem;
}
#messages li.pending { opacity: .55; }
#messages b { color: var(--wood-dark); }
#messages small { color: #8a7355; }
#composer { display: flex; gap: .4rem; padding: .5rem .6rem; border-top: 3px solid var(--wood); background: var(--parchment-dark); flex: none; }
#text { flex: 1; min-width: 0; }

/* Short landscape screens (phone turned sideways, which is the normal way to use this app):
   keep the drawer narrow so the map still gets most of the width. */
@media (orientation: landscape) and (max-width: 900px) {
  header { padding: .35rem .5rem; }
  header b { font-size: 1.15rem; }
  #chat-body { width: 14rem; }
  #map-head { padding: .35rem; }
}