/* Panzer Problems party pages: the host screen and the phone controller. Colors and type at the top. */
:root {
  --ink: #f3f1e7;
  --dim: rgb(243 241 231 / 0.72);
  --plate: rgb(12 13 10 / 0.72);
  --plate-solid: #14150f;
  --line: rgb(243 241 231 / 0.22);
  --tank: #8a8f7a; /* the phone's own tank color, set from script */
  --stencil: Impact, Haettenschweiler, 'Arial Narrow Bold', 'Roboto Condensed', sans-serif-condensed, sans-serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: #3d4729;
  color: var(--ink);
  font: 15px/1.4 var(--body);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
#backdrop { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; }
[hidden] { display: none !important; }

button {
  font: inherit;
  color: var(--ink);
  background: var(--plate-solid);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.45em 0.9em;
  cursor: pointer;
}
button:focus-visible, input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
button.go { background: var(--ink); color: #14150f; border-color: transparent; font-weight: 700; }
button.quiet { background: transparent; }
button.quiet:hover { background: rgb(243 241 231 / 0.12); }

/* ---------- host screen ---------- */
.host { display: flex; flex-direction: column; }
#bar {
  --bar: 48px;
  flex: none;
  height: var(--bar);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  background: var(--plate);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.brand { font: 400 20px/1 var(--stencil); letter-spacing: 0.06em; text-transform: uppercase; }
.code { color: var(--dim); }
.code b { color: var(--ink); font: 400 18px/1 var(--stencil); letter-spacing: 0.14em; }
.grow { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: transparent; color: var(--dim); }
.seg button[aria-pressed='true'] { background: var(--ink); color: #14150f; font-weight: 700; }
.swatch input { width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; cursor: pointer; overflow: hidden; }
.swatch input::-webkit-color-swatch-wrapper { padding: 0; }
.swatch input::-webkit-color-swatch { border: 0; border-radius: 50%; }

#roster { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; min-width: 0; overflow: hidden; }
#roster li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 99px; font-size: 13px; color: var(--dim); }
#roster li i { width: 10px; height: 10px; border-radius: 50%; background: var(--chip, #777); }
#roster li.off { opacity: 0.45; }
#roster li b { color: var(--ink); font-weight: 600; }

#stage { flex: 1; min-height: 0; display: grid; place-items: center; }
#gm4html5_div_id {
  --w: min(100vw, calc((100dvh - 49px) * 4 / 3));
  position: relative;
  width: var(--w);
  height: calc(var(--w) * 0.75);
  box-shadow: 0 10px 50px rgb(0 0 0 / 0.5);
}
#canvas { display: block; width: 100%; height: 100%; }

#join {
  position: absolute;
  left: 1.4%;
  top: 1.8%;
  width: 12.4%;
  padding: 0.7%;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.45);
  color: #14150f;
  text-align: center;
}
#qr svg { display: block; width: 100%; height: auto; }
#join p { margin: 4% 0 0; font: 400 clamp(9px, calc(var(--w) * 0.0125), 16px) / 1.1 var(--stencil); letter-spacing: 0.04em; text-transform: uppercase; }
#note {
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 14px;
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 14px;
  pointer-events: none;
}

/* ---------- phone controller ---------- */
.pad { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
#deck {
  position: fixed;
  inset: 0;
  display: grid;
  /* The picture keeps the game's 4:3 shape and takes the full height; the thumbs get what's left on each side. */
  grid-template-columns: minmax(172px, 1.3fr) min(calc(100dvh * 4 / 3), calc(100vw - 296px)) minmax(120px, 1fr);
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

/* The whole of each side is live, not just the painted buttons. The left side is a four-way pad: Go on top, Reverse
   underneath, the turns either side, and its corners hold two at once. The right side is all Fire. */
#move-zone, #fire-zone { position: relative; display: grid; place-items: center; padding: 38px 10px 12px; }
#dpad {
  width: min(100%, 210px);
  aspect-ratio: 1;
  display: grid;
  grid-template: 'a go b' 1fr 'left c right' 1fr 'd back e' 1fr / 1fr 1fr 1fr;
  gap: 5px;
}
/* The stick sits in the hole in the middle of the pad. Its knob rides over the buttons while it's pushed. */
#stick { grid-area: c; position: relative; z-index: 1; border-radius: 50%; background: rgb(0 0 0 / 0.38); border: 2px solid var(--line); }
#knob {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: #e9e6d8; /* pale, so it reads against the buttons it slides over */
  border: 3px solid rgb(0 0 0 / 0.55);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.55), inset 0 2px 0 rgb(255 255 255 / 0.3);
}
.idle #knob { filter: saturate(0.25) brightness(0.8); }
#k-go { grid-area: go; }
#k-left { grid-area: left; }
#k-right { grid-area: right; }
#k-back { grid-area: back; }
#k-fire { width: min(100%, 132px); aspect-ratio: 1; border-radius: 50%; font-size: 22px; }

.key {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border-radius: 14px;
  background: var(--tank);
  border: 3px solid rgb(0 0 0 / 0.55);
  box-shadow: 0 5px 0 rgb(0 0 0 / 0.55), inset 0 3px 0 rgb(255 255 255 / 0.28);
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.8);
  font: 400 20px/1 var(--stencil);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.key svg { width: 34px; height: 34px; fill: #fff; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.7)); }
.key.down { transform: translateY(4px); box-shadow: 0 1px 0 rgb(0 0 0 / 0.55), inset 0 3px 0 rgb(255 255 255 / 0.28); filter: brightness(1.2); }
.idle .key { filter: saturate(0.25) brightness(0.8); }

#view { position: relative; background: #0b0c09; overflow: hidden; }
#video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0b0c09; }
#panel { position: absolute; inset: 0; display: grid; place-items: center; padding: 34px 12px 12px; }
#buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 30em; }
#buttons button, #picker button {
  min-width: 6.5em;
  min-height: 48px;
  font: 400 18px/1 var(--stencil);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#buttons button[data-color], #picker button[data-color] { background: var(--c); border-color: rgb(0 0 0 / 0.5); color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / 0.7); }
#buttons button:disabled, #picker button:disabled { opacity: 0.35; }
#buttons p { flex-basis: 100%; margin: 0 0 4px; text-align: center; color: var(--dim); }

.chip {
  position: absolute;
  top: 6px;
  padding: 3px 10px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--plate);
  color: var(--dim);
  font-size: 12px;
  line-height: 1.4;
}
#link { left: 8px; pointer-events: none; }
#menu-open { right: 8px; min-height: 0; padding: 6px 14px; color: var(--ink); }
/* Top left of the picture: clear of the buttons on every menu screen. */
#hint {
  position: absolute;
  left: 8px;
  top: 8px;
  max-width: 48%;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--plate);
  pointer-events: none;
}
#hint p { margin: 0; }
#picker { display: flex; flex-wrap: wrap; gap: 8px; pointer-events: auto; }
#picker:not(:empty) { margin-top: 6px; }
#picker button { min-width: 4.6em; min-height: 40px; font-size: 15px; }

#menu, #turn, #wall { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; background: rgb(8 9 6 / 0.86); text-align: center; padding: 20px; }
.sheet { display: grid; gap: 10px; width: min(22em, 100%); }
.sheet p { margin: 0 0 4px; color: var(--dim); }
.sheet button { min-height: 46px; }
#turn { display: none; z-index: 6; font: 400 26px/1.2 var(--stencil); letter-spacing: 0.05em; text-transform: uppercase; }
@media (orientation: portrait) { #turn { display: grid; } }
#wall p { max-width: 24em; font-size: 17px; }
#wall { align-content: center; gap: 14px; }

@media (prefers-reduced-motion: no-preference) {
  .key { transition: transform 0.05s, box-shadow 0.05s; }
}