/* ==========================================================================
   HOST — styles for the map, colour, write/vote, showdown and intermission
   rounds. Loaded after host.css, which defines the palette variables.
   ========================================================================== */

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

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

.showdown-vs, .tap-duel {
  display: flex;
  align-items: center;
  gap: 1.4vw;
  font-size: clamp(1.2rem, 3vw, 3rem);
  font-weight: 900;
}
.showdown-vs span, .tap-duel span {
  background: var(--surface);
  border: 3px solid var(--pink);
  border-radius: 14px;
  padding: .4em 1em;
}
.showdown-vs em, .tap-duel em {
  color: var(--gold);
  font-style: normal;
  font-size: .7em;
}
.tap-duel { margin-top: 3vh; justify-content: center; }
.tap-stage.go .tap-duel span {
  border-color: #05291a;
  color: #05291a;
  background: rgba(255,255,255,.25);
}

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

.worldmap {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 14px;
  overflow: hidden;
}
.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; vector-effect: non-scaling-stroke; }
.wm-pin-me circle    { fill: var(--pink); }
.wm-pin-other circle { fill: var(--blue); }
.wm-halo {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  animation: haloPulse 1.2s ease-in-out infinite;
}
@keyframes haloPulse {
  0%, 100% { r: 5; opacity: 1; }
  50%      { r: 9; opacity: .4; }
}
.wm-x { stroke: var(--gold); stroke-width: 2; vector-effect: non-scaling-stroke; }
.wm-link {
  stroke: rgba(235,201,90,.35);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.wm-pins text {
  fill: #fff;
  font-size: 5px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #0b0b12;
  stroke-width: 1.5;
}

.geo-stage {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 2vw;
  width: 92%;
  align-items: center;
}
.geo-clues { display: flex; flex-direction: column; gap: 1.4vh; }
.clue {
  background: var(--surface);
  border-left: 6px solid var(--blue);
  border-radius: 8px;
  padding: .8em 1em;
  font-size: clamp(.95rem, 1.7vw, 1.6rem);
  font-weight: 700;
  opacity: 0;
  animation: clueIn .5s ease forwards;
}
@keyframes clueIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: none; }
}
.geo-map { aspect-ratio: 2 / 1; }

/* Sized off HEIGHT, not width - a 2:1 map at 70% of a 16:9 screen's width
   eats ~62% of its height and pushes the punishment list off the bottom. */
.geo-reveal {
  height: clamp(140px, 26vh, 300px);
  width: auto;
  aspect-ratio: 2 / 1;
  margin: 0 auto 1vh;
}
.geo-best {
  font-size: clamp(.9rem, 1.6vw, 1.5rem);
  color: var(--muted);
  margin-bottom: 1vh;
}
.geo-best b { color: var(--gold); }

/* ---- colour match ------------------------------------------------------- */

.color-stage { display: flex; flex-direction: column; align-items: center; gap: 2vh; }
.color-shape { width: clamp(240px, 38vh, 460px); aspect-ratio: 1; }
.shape { width: 100%; height: 100%; }
.shape-body {
  fill: var(--shape-fill);
  stroke: #f4f4fa;
  stroke-width: 2.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.shape.hollow .shape-body {
  fill: rgba(255,255,255,.04);
  stroke-width: 3;
  stroke-dasharray: 8 6;
  vector-effect: non-scaling-stroke;
}
.shape-img { width: 100%; height: 100%; object-fit: contain; }
.color-hint { color: var(--muted); font-size: clamp(.9rem, 1.5vw, 1.4rem); }

.color-reveal {
  display: flex;
  gap: 3vw;
  align-items: center;
  justify-content: center;
  margin-bottom: 2vh;
}
.cr-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6vh;
  width: clamp(110px, 15vh, 190px);
}
.cr-target span { color: var(--muted); font-size: .8rem; letter-spacing: .15em; }
.cr-guesses { display: flex; flex-direction: column; gap: .7vh; }
.cr-guess {
  display: flex;
  align-items: center;
  gap: .8em;
  font-size: clamp(.85rem, 1.4vw, 1.3rem);
  font-weight: 700;
}
.cr-swatch { width: 2.2em; height: 2.2em; border-radius: 8px; border: 2px solid #fff3; }
.cr-guess b { color: var(--muted); font-size: .8em; margin-left: auto; }

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

.write-label {
  color: var(--muted);
  letter-spacing: .22em;
  font-size: clamp(.75rem, 1.2vw, 1.1rem);
  font-weight: 800;
}
.question-text.big { font-size: clamp(1.8rem, 5vw, 5rem); }

.typing-list { list-style: none; display: flex; flex-wrap: wrap; gap: .8vw; justify-content: center; }
.typing-list li {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: .5em 1.2em;
  font-size: clamp(.85rem, 1.4vw, 1.3rem);
  font-weight: 700;
  color: var(--muted);
}
.typing-list li.done { border-color: var(--green); color: var(--text); }

.vote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4vh 1.5vw;
  width: 88%;
}
.vote-card {
  background: var(--surface);
  border: 3px solid var(--line);
  border-radius: 14px;
  padding: 1em 1.2em;
  font-size: clamp(1rem, 1.9vw, 1.8rem);
  font-weight: 700;
  text-align: center;
  animation: pop .25s ease backwards;
}
.vote-card.name-only { border-color: var(--purple); }

.spotlight-quote {
  background: linear-gradient(160deg, #2a1f3d, var(--surface));
  border: 3px solid var(--purple);
  border-radius: 22px;
  padding: 1em 2em;
  font-size: clamp(1.3rem, 3.2vw, 3rem);
  font-weight: 800;
  font-style: italic;
  max-width: 80%;
}
.spotlight-quote.small { font-size: clamp(1rem, 2vw, 1.8rem); margin: 0 auto 2vh; }

/* ---- reveal panels ------------------------------------------------------ */

/* The reveal panels must never crowd out the punishment list underneath.
   The panel is capped and shrinkable; the list below is guaranteed a floor. */
.reveal-extra {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  max-height: 48vh;
  flex-shrink: 1;
  overflow: hidden;
}
#s-reveal .reveal-body { min-height: 24vh; }
#s-reveal .punish-list { flex: 1; min-height: 0; }

/* Big-group layouts. Everyone who is drinking has to be readable at a glance
   from across the room - never scrolled out of sight. */
.punish-list.two-col,
.punish-list.three-col {
  display: grid;
  align-content: start;
  gap: .8vh 1.2vw;
  width: 94%;
}
.punish-list.two-col   { grid-template-columns: 1fr 1fr; }
.punish-list.three-col { grid-template-columns: 1fr 1fr 1fr; }

.punish-list.two-col li,
.punish-list.three-col li {
  font-size: clamp(.8rem, 1.25vw, 1.25rem);
  padding: .5em .9em;
  gap: .6em;
}
.punish-list.two-col .preason { font-size: .65em; }
.punish-list.three-col .preason { display: none; }
.punish-list.three-col li {
  font-size: clamp(.72rem, 1.05vw, 1.05rem);
  padding: .4em .7em;
  border-left-width: 5px;
}

/* Same problem on the colour reveal - eight guesses in one column overflows. */
.cr-guesses.many {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6vh 1.4vw;
}

/* When a reveal panel is present the rows get a size down so a full table of
   punished players still fits without scrolling. */
#s-reveal .reveal-extra:not(:empty) ~ .reveal-body .punish-list li {
  font-size: clamp(.9rem, 1.5vw, 1.4rem);
  padding: .55em 1.1em;
}
.reveal-opts { width: 74%; margin-bottom: 2vh; }

.never-split { display: flex; gap: 3vw; margin-bottom: 2vh; }
.ns-side {
  background: var(--surface);
  border: 3px solid var(--line);
  border-radius: 22px;
  padding: 1em 2.4em;
  text-align: center;
}
.ns-side b { display: block; font-size: clamp(2rem, 5vw, 4rem); font-weight: 900; }
.ns-side span { color: var(--muted); font-size: .85rem; letter-spacing: .15em; }
.ns-side.guilty { border-color: var(--pink); }
.ns-side.guilty b { color: var(--pink); }

.tally-list {
  list-style: none;
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: .6vh;
  margin-bottom: 1.5vh;
  max-height: 24vh;
  overflow-y: auto;
}
.tally-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border-radius: 8px;
  padding: .55em 1.1em;
  font-size: clamp(.9rem, 1.5vw, 1.4rem);
  font-weight: 700;
}
.tally-list li b { color: var(--gold); }
.tally-list li.right { border-left: 5px solid var(--green); }
.tally-list li.wrong { border-left: 5px solid var(--pink); }

.quip-results {
  list-style: none;
  width: 78%;
  display: flex;
  flex-direction: column;
  gap: .8vh;
  margin-bottom: 2vh;
}
.quip-results li {
  display: flex;
  align-items: center;
  gap: 1em;
  background: var(--surface);
  border-radius: 14px;
  padding: .7em 1.2em;
  font-size: clamp(.9rem, 1.6vw, 1.5rem);
}
.quip-results li.best { border: 2px solid var(--gold); }
.quip-results .qt { flex: 1; font-style: italic; }
.quip-results .qn { color: var(--muted); font-weight: 800; font-size: .8em; }
.quip-results .qv {
  background: var(--gold);
  color: #3a2c00;
  border-radius: 999px;
  padding: .15em .8em;
  font-weight: 900;
  font-size: .8em;
}

/* ---- intermission ------------------------------------------------------- */

.ad-stack { gap: 1.2vh !important; }
.ad-label {
  color: var(--muted);
  letter-spacing: .3em;
  font-size: clamp(.7rem, 1.1vw, 1rem);
  font-weight: 800;
}
.ad-brand {
  font-size: clamp(3rem, 11vw, 11rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  background: linear-gradient(90deg, var(--blue), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: slam .4s cubic-bezier(.2,1.4,.4,1);
}
.ad-tag { font-size: clamp(1.1rem, 2.6vw, 2.4rem); font-weight: 800; }
.ad-body { color: var(--muted); font-size: clamp(.9rem, 1.6vw, 1.5rem); max-width: 60%; }
.ad-timer {
  width: 40vw;
  height: 6px;
  background: var(--surface);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 1vh;
}
.ad-timer-fill { height: 100%; width: 100%; background: var(--blue); }

.challenge-name {
  font-size: clamp(2rem, 6vw, 6rem);
  font-weight: 900;
  color: var(--gold);
  animation: slam .4s cubic-bezier(.2,1.4,.4,1);
}
.challenge-text {
  font-size: clamp(1.1rem, 2.8vw, 2.6rem);
  font-weight: 800;
  max-width: 70%;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .geo-stage { grid-template-columns: 1fr; }
  .geo-reveal, .tally-list, .quip-results, .vote-grid { width: 96%; }
  .color-reveal { flex-direction: column; }
}

/* Shorter screens (720p TVs, a non-fullscreen browser window). The reveal
   screen is the tightest layout in the game - with 8 players the drink list
   is long AND there is a panel above it. Everything else gives up room so the
   list stays complete: nobody may be scrolled out of sight. */
@media (max-height: 820px) {
  #s-reveal .reveal-head { margin-bottom: .5vh; }
  #s-reveal .reveal-answer { font-size: clamp(1.05rem, 2.3vw, 2rem); }
  #s-reveal .winner-line { font-size: clamp(.85rem, 1.5vw, 1.3rem); }
  #s-reveal .punish-title { font-size: clamp(1rem, 2vw, 1.8rem); margin-bottom: .8vh; }

  .reveal-extra { max-height: 26vh; }
  .reveal-opts { margin-bottom: .8vh; }
  .reveal-opts .option {
    padding: .5em .8em;
    font-size: clamp(.78rem, 1.35vw, 1.15rem);
  }
  .reveal-opts .option .letter { width: 1.5em; height: 1.5em; }
  .geo-reveal { height: clamp(120px, 22vh, 240px); }

  #s-reveal .reveal-body { min-height: 30vh; }

  .award-banner {
    padding: .5em 1.1em;
    font-size: clamp(.78rem, 1.3vw, 1.1rem);
    margin-top: .8vh;
  }
  #s-reveal .btn-big { padding: .55em 1.8em; font-size: clamp(.95rem, 1.6vw, 1.4rem); }
  #s-reveal .next-btn { margin-top: .5vh; }
}