/* ==========================================================================
   PHONE — styles for write, vote, map, colour slider and showdown.
   Loaded after play.css, which defines the palette variables.
   ========================================================================== */

/* A class that sets `display` outranks the UA stylesheet's [hidden] rule, so
   an element whose class sets display stays visible when hidden is set. This
   puts the attribute back in charge everywhere. */
[hidden] { display: none !important; }

/* ---- big groups --------------------------------------------------------- */

/* With 8 players a ballot or player picker can run past one screen. Scroll the
   list itself rather than the page, so the prompt and the countdown stay
   pinned. Rows still stretch to fill when there are only a few. */
/* The screens are min-height:100dvh, so a flex child grows the PAGE instead of
   scrolling inside itself. Bounding the screen and clearing the default
   min-height:auto is what actually makes the list scroll. */
#p-question, #p-vote, #p-target { max-height: 100dvh; }

.answer-grid {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.answer-grid > .answer { min-height: 68px; }

/* ---- write -------------------------------------------------------------- */

.write-input {
  width: 100%;
  background: var(--surface);
  border: 3px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  resize: none;
  line-height: 1.4;
}
.write-input:focus { border-color: var(--purple); }

.char-count {
  text-align: right;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  margin: 8px 0 14px;
}

/* ---- world map ---------------------------------------------------------- */

.map-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
/* Deliberately taller than the true 2:1 projection. The SVG uses
   preserveAspectRatio="none" and eventToLatLng works off bounding-box
   fractions, so stretching costs no accuracy and buys a much bigger target
   for a thumb on a portrait phone. */
.worldmap {
  width: 100%;
  aspect-ratio: 1.45 / 1;
  max-height: 100%;
  display: block;
  border-radius: 14px;
  border: 2px solid var(--line);
  touch-action: manipulation;
}
.wm-sea { fill: #0e1626; }
.wm-land polygon {
  fill: #27354d;
  stroke: #3d5170;
  stroke-width: .5;
  vector-effect: non-scaling-stroke;
}
.wm-grid line {
  stroke: rgba(255,255,255,.05);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.wm-pins circle { stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.wm-pin-me circle { fill: var(--pink); }
.wm-pin-other circle { fill: var(--blue); }
.wm-pins text { fill: #fff; font-size: 5px; font-weight: 700; }

.map-readout {
  text-align: center;
  color: var(--gold);
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 12px;
  min-height: 1.3em;
}
.map-readout small {
  display: block;
  color: var(--muted);
  font-weight: 600;
  font-size: .75rem;
  margin-top: 3px;
}

/* ---- colour slider ------------------------------------------------------ */

.slider-shape {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}
.slider-shape .shape { width: min(52vw, 240px); height: auto; aspect-ratio: 1; }
.shape-body {
  fill: var(--shape-fill);
  stroke: #f4f4fa;
  stroke-width: 3;
  stroke-linejoin: round;
}
.shape-img { width: min(52vw, 240px); height: auto; }

.hue-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  border-radius: 22px;
  margin: 14px 0 18px;
  border: 3px solid var(--line);
  background: linear-gradient(to right,
    hsl(0,85%,55%), hsl(60,85%,55%), hsl(120,85%,55%),
    hsl(180,85%,55%), hsl(240,85%,55%), hsl(300,85%,55%), hsl(360,85%,55%));
}
.hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--bg);
  box-shadow: 0 2px 10px rgba(0,0,0,.6);
  cursor: pointer;
}
.hue-slider::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--bg);
  cursor: pointer;
}

/* ---- showdown ----------------------------------------------------------- */

.showdown-head {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--gold);
  margin-bottom: 14px;
}

.duel-zone { flex: 1; display: flex; padding: 10px 0; }

.draw-btn {
  flex: 1;
  border-radius: 22px;
  background: var(--surface);
  border: 4px solid var(--line);
  color: var(--muted);
  font-family: inherit;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background .05s var(--ease);
}
.draw-btn.go {
  background: var(--green);
  border-color: #fff;
  color: #05291a;
}
.draw-btn.done {
  background: var(--surface);
  border-color: var(--blue);
  color: var(--blue);
  font-size: 1.4rem;
}
.draw-btn.early {
  background: var(--pink);
  border-color: #fff;
  color: #fff;
  font-size: 1.5rem;
}

/* ---- standing challenge banner ------------------------------------------ */

.challenge-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--purple);
  color: #1a0f2e;
  font-weight: 800;
  font-size: .85rem;
  text-align: center;
  padding: 10px 14px calc(10px + var(--safe-b));
  z-index: 30;
}