@font-face {
  font-family: "Alegreya Sans";
  src: url("assets/fonts/AlegreyaSans-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel";
  src: url("assets/fonts/Cinzel.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --night: #07081c;
  --cream: #fff3da;
  --gold: #f2c14e;
  --gold-hi: #ffe7a3;
  --you: #3355e0;
  --rival: #e0283e;
  --soft: rgba(255, 243, 218, 0.72);
  --panel: rgba(9, 10, 34, 0.86);
  --hairline: rgba(255, 243, 218, 0.26);
  --body: "Alegreya Sans", "Segoe UI", sans-serif;
  --display: Cinzel, Georgia, serif;
  --edge: 0 2px 10px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.9);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--night);
  color: var(--cream);
  font-family: var(--body);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

p,
h1,
h2,
ul {
  margin: 0;
  padding: 0;
}

#board {
  position: fixed;
  inset: 0;
  display: block;
  touch-action: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
}

/* The top of a match reads like the channel's year stamp: the clock in Cinzel over
   a ruler, with the gold pointer sliding toward whoever is ahead. No band behind it. */

#hud {
  position: fixed;
  inset: 0 0 auto;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr minmax(220px, 340px) 1fr;
  align-items: center;
  gap: 20px;
  padding: 12px max(24px, env(safe-area-inset-right)) 8px max(24px, env(safe-area-inset-left));
  pointer-events: none;
  text-shadow: var(--edge);
}

#hud button {
  pointer-events: auto;
}

/* Each army is a card: a round profile bubble in its colour, like the badges on the map. */

[data-seat="0"] {
  --seat: #3355e0;
}

[data-seat="1"] {
  --seat: #e0283e;
}

[data-seat="2"] {
  --seat: #17a5b8;
}

[data-seat="3"] {
  --seat: #e8862a;
}

[data-seat="4"] {
  --seat: rgba(150, 153, 162, 0.42);
}

.team {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.team-rival {
  justify-content: flex-end;
}

.player {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  transition: opacity 0.5s ease;
}

.team-rival .player {
  flex-direction: row-reverse;
  text-align: right;
}

.player[data-out] {
  opacity: 0.38;
}

.player[data-out] .bubble {
  filter: grayscale(1);
}

.bubble {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 52%),
    var(--seat);
  border: 2.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(7, 8, 28, 0.55), 0 0 18px var(--seat), 0 3px 10px rgba(0, 0, 0, 0.6);
}

.bubble svg {
  width: 64%;
  height: 64%;
  margin-top: 4px;
  fill: #fff;
}

.player-text {
  min-width: 0;
}

.player-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 21px;
  line-height: 1.05;
  color: #fff;
  white-space: nowrap;
}

.team-rival .player-name {
  justify-content: flex-end;
}

.player-name span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Under the name: a flag for lands, a helmet for troops, a rising arrow for growth. */
.player-stats {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 4px;
  white-space: nowrap;
  color: var(--soft);
  font-size: 15px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.team-rival .player-stats {
  justify-content: flex-end;
}

.stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.stat svg {
  flex: none;
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.stat .solid {
  fill: currentColor;
}

.stat .line {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stat-rate {
  color: #9fe0a0;
}

.player-out {
  display: none;
  margin-top: 4px;
  font-size: 15px;
  color: var(--soft);
}

.player[data-out] .player-stats {
  display: none;
}

.player[data-out] .player-out {
  display: block;
}

.stamp {
  text-align: center;
}

#clock {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

/* Strategy time: the clock counts down in gold, named above it like an ocean on the map,
   with a way to start early where the share bar will be. */
.phase {
  margin-bottom: 2px;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

.stamp[data-phase="strategy"] #clock {
  color: var(--gold);
}

.stamp[data-phase="strategy"] #clock[data-beat] {
  animation: tick 1s ease-out both;
}

@keyframes tick {
  0% {
    transform: scale(1.22);
    color: var(--cream);
  }

  100% {
    transform: scale(1);
  }
}

.stamp[data-phase="strategy"] .share {
  display: none;
}

.start-now {
  margin-top: 8px;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .stamp[data-phase="strategy"] #clock[data-beat] {
    animation: none;
  }
}

/* Head to head: only land the armies hold, your side from the left and theirs from the
   right. The white spark is where the sides meet, the gold mark is half the held land,
   and each army's share sits under its colour. */

.share {
  position: relative;
  margin-top: 8px;
  padding-bottom: 19px;
}

.share-bar {
  display: flex;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 243, 218, 0.35), 0 2px 8px rgba(0, 0, 0, 0.6);
}

.share-bar i {
  flex: none;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%),
    var(--seat);
  transition: width 0.7s cubic-bezier(0.33, 0, 0.2, 1);
}

/* A thin dark seam between allies or between rivals; the spark marks the front. */
.share-bar i + i {
  box-shadow: inset 2px 0 0 rgba(7, 8, 28, 0.85);
}

.share-mid {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 2px;
  height: 20px;
  margin-left: -1px;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(242, 193, 78, 0.9);
}

.share-clash {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 2px rgba(0, 0, 0, 0.8);
  transition: left 0.7s cubic-bezier(0.33, 0, 0.2, 1);
}

.share-pcts span {
  position: absolute;
  top: 15px;
  font-size: 15px;
  line-height: 1.2;
  color: color-mix(in srgb, var(--seat) 50%, #fff);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: left 0.7s cubic-bezier(0.33, 0, 0.2, 1), opacity 0.3s ease;
}

.share-pcts span[data-hidden] {
  opacity: 0;
}

.controls {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 2;
  display: flex;
  gap: 8px;
}

.controls button {
  pointer-events: auto;
}

.quiet {
  padding: 5px 12px;
  font-size: 16px;
  text-shadow: none;
  background: rgba(9, 10, 34, 0.55);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  transition: background 0.2s ease;
}

.quiet:hover {
  background: rgba(30, 32, 80, 0.8);
}

/* Touch has no Ctrl key, so this stands in for it. */
#repeat-button {
  display: none;
}

#repeat-button[aria-pressed="true"] {
  color: var(--night);
  background: var(--gold);
  border-color: var(--gold);
}

@media (hover: none) {
  #repeat-button {
    display: block;
  }
}

/* Bottom left: what each continent pays, written straight on the map like the ocean names.
   Held continents brighten and take a dot in the holder's colour. */

.bonus {
  position: fixed;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 1;
  pointer-events: none;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.bonus h2 {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 243, 218, 0.32);
}

.bonus ul {
  display: grid;
  gap: 1px;
  list-style: none;
}

.bonus li {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 243, 218, 0.4);
  transition: color 0.4s ease;
}

.bonus li i {
  position: absolute;
  left: -12px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--seat);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.bonus li b {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  color: rgba(255, 243, 218, 0.58);
  font-variant-numeric: tabular-nums;
}

.bonus li[data-held] {
  color: rgba(255, 243, 218, 0.9);
}

.bonus li[data-held] i {
  opacity: 1;
}

.bonus li[data-held] b {
  color: var(--gold);
}

/* Title: a quiet menu over the Earth from orbit. The struck logo is the one loud thing. */

#menu-sky {
  position: fixed;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  background: #04050f;
}

#title {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(14px, 4.4vh, 44px);
  overflow-y: auto;
  padding: clamp(18px, 9vh, 96px) max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
}

#title:not([data-page="main"]) {
  justify-content: safe center;
  padding-top: 24px;
  background: rgba(4, 5, 15, 0.78);
}

#title:not([data-page="main"]) #wordmark {
  display: none;
}

/* The logo is cut in two on a slant, and the lower half slips along the cut. */

#wordmark {
  position: relative;
  flex: none;
  font-family: var(--display);
  font-size: clamp(44px, 10.5vw, 118px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.12;
  color: var(--cream);
  text-shadow: var(--edge);
}

.half {
  display: block;
}

.half-top {
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 59%);
}

.half-low {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 59%, 100% 45%, 100% 100%, 0 100%);
  transform: translate(0.075em, 0.018em);
  animation: slip 0.5s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.strike {
  position: absolute;
  inset: 0 -5%;
  background: var(--gold);
  clip-path: polygon(0 59.6%, 100% 44.4%, 100% 45.4%, 0 60.6%);
  transform-origin: 0 50%;
  animation: strike 0.34s 0.05s cubic-bezier(0.6, 0, 0.2, 1) backwards;
}

@keyframes strike {
  from {
    transform: scaleX(0);
  }
}

@keyframes slip {
  from {
    transform: none;
  }
}

.menu {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.menu button,
.menu-back {
  position: relative;
  padding: 7px 18px;
  font-family: var(--display);
  font-size: clamp(20px, 3.3vh, 26px);
  font-weight: 600;
  color: var(--cream);
  text-shadow: var(--edge);
  background: none;
  border: 0;
  transition: color 0.16s ease;
}

.menu button::after,
.menu-back::after {
  content: "";
  position: absolute;
  inset: auto 18px 3px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.18s ease;
}

.menu button:hover,
.menu button:focus-visible,
.menu-back:hover,
.menu-back:focus-visible {
  color: var(--gold-hi);
}

.menu button:hover::after,
.menu button:focus-visible::after,
.menu-back:hover::after,
.menu-back:focus-visible::after {
  transform: scaleX(1);
}

.menu #start {
  font-size: clamp(38px, 7vh, 60px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--gold);
}

.menu-page {
  display: grid;
  gap: 12px;
  width: min(420px, 100%);
}

.menu-page-wide {
  width: min(860px, 100%);
}

.menu-page h2 {
  font-family: var(--display);
  font-size: clamp(26px, 4.4vh, 36px);
  font-weight: 700;
  color: var(--cream);
}

.menu-page h3 {
  font-size: 19px;
  color: var(--gold-hi);
}

.menu-back {
  justify-self: center;
  margin-top: 6px;
}

/* One question per step, and picking an answer moves on. */

.choices {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.choices button {
  display: grid;
  gap: 1px;
  padding: 9px 14px;
  font-family: var(--display);
  font-size: clamp(21px, 3.6vh, 28px);
  font-weight: 700;
  text-align: left;
  color: var(--cream);
  background: none;
  border: 0;
  border-left: 2px solid var(--hairline);
  transition: color 0.16s ease, border-color 0.16s ease;
}

.choices button span {
  font-family: var(--body);
  font-size: 17px;
  font-weight: 500;
  color: var(--soft);
}

.choices button:hover,
.choices button:focus-visible,
.choices button[aria-pressed="true"] {
  color: var(--gold-hi);
  border-color: var(--gold);
}

/* Tempo: five tiles, slowest to fastest, named for how fast a war moves. */

.menu-page-tempo {
  width: min(780px, 100%);
}

.menu-lead {
  margin-top: -6px;
  font-size: 17px;
  color: var(--soft);
}

.tempos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 4px;
}

.tempos button {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 16px 6px 14px;
  color: var(--cream);
  background: rgba(9, 10, 34, 0.62);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.tempos svg {
  width: 34px;
  height: 34px;
  margin-bottom: 4px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tempos b {
  font-family: var(--display);
  font-size: clamp(14px, 1.7vw, 18px);
  font-weight: 700;
}

.tempos em {
  font-size: 23px;
  font-style: normal;
  line-height: 1.1;
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
}

.tempos span {
  font-size: 14px;
  line-height: 1.2;
  color: var(--soft);
}

.tempos button:hover,
.tempos button:focus-visible,
.tempos button[aria-pressed="true"] {
  background: rgba(46, 40, 20, 0.78);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.tempos button[aria-pressed="true"] {
  box-shadow: 0 0 0 1px var(--gold), 0 6px 20px rgba(242, 193, 78, 0.18);
}

@media (max-width: 640px) {
  .tempos {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .tempos button {
    grid-template-columns: 30px 1fr auto;
    justify-items: start;
    align-items: center;
    column-gap: 12px;
    padding: 9px 14px;
    text-align: left;
  }

  .tempos svg {
    grid-row: span 2;
    width: 28px;
    height: 28px;
    margin: 0;
  }

  .tempos em {
    grid-row: span 2;
    grid-column: 3;
  }

  .tempos b {
    font-size: 19px;
  }
}

/* Accounts: a chip in the corner of the title, and plain forms in the menu's own style. */

.account-chip {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  max-width: min(320px, calc(100vw - 32px));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#title:not([data-page="main"]) .account-chip {
  display: none;
}

.form {
  display: grid;
  gap: 10px;
}

.form label {
  display: grid;
  gap: 4px;
  font-size: 16px;
  color: var(--soft);
}

.form input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 19px;
  color: var(--cream);
  background: rgba(9, 10, 34, 0.7);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  -webkit-user-select: text;
  user-select: text;
  transition: border-color 0.16s ease;
}

.form input:focus {
  outline: none;
  border-color: var(--gold);
}

.form input:disabled,
.form button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.form .primary {
  margin-top: 4px;
}

.form-help {
  margin-top: -4px;
  font-size: 15px;
  color: var(--soft);
}

.form-problem {
  font-size: 17px;
  color: #ff9a8a;
}

.link {
  justify-self: center;
  padding: 4px 8px;
  font-size: 17px;
  color: var(--gold-hi);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px 0 6px;
}

.profile-stats div {
  display: grid;
  justify-items: center;
  padding: 10px 4px;
  background: rgba(9, 10, 34, 0.62);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.profile-stats dt {
  font-size: 15px;
  color: var(--soft);
}

.profile-stats dd {
  margin: 0;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
}

/* The leaderboard: place, name, record, points. Your own row is lit gold. */

.menu-page-board {
  width: min(560px, 100%);
}

.board-status {
  color: var(--soft);
}

.board-status:empty {
  display: none;
}

.board {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.board li {
  display: grid;
  grid-template-columns: 3.2em minmax(0, 1fr) auto 3.6em;
  align-items: baseline;
  gap: 12px;
  padding: 7px 12px;
  background: rgba(9, 10, 34, 0.55);
  border-radius: 8px;
}

.board li[data-mine] {
  background: rgba(46, 40, 20, 0.85);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.board-place {
  font-family: var(--display);
  font-weight: 700;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}

.board li:nth-child(-n+3):not(.board-gap) .board-place {
  color: var(--gold);
}

.board-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}

.board-record {
  font-size: 15px;
  color: var(--soft);
  white-space: nowrap;
}

.board-points {
  font-family: var(--display);
  font-size: 20px;
  text-align: right;
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
}

.board .board-gap {
  display: block;
  padding: 0;
  text-align: center;
  color: var(--soft);
  background: none;
}

@media (max-width: 480px) {
  .board li {
    grid-template-columns: 2.8em minmax(0, 1fr) 3.2em;
  }

  .board-record {
    display: none;
  }
}

.over-score {
  margin: -2px 0 8px;
  font-size: 17px;
  color: var(--gold-hi);
}

.howto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 12px 36px;
}

.howto ul {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  list-style: none;
  font-size: 18px;
  line-height: 1.3;
  color: #fff;
}

.howto kbd {
  font: inherit;
  color: var(--gold-hi);
}

.pin-air {
  color: #f79a4e;
}

.pin-troops {
  color: #7fd08a;
}

.pin-supply {
  color: #5fd6cc;
}

.note {
  margin-top: 7px;
  color: var(--soft);
  font-size: 17px;
}

.primary,
.secondary {
  width: 100%;
  padding: 11px 0;
  font-size: 21px;
  border-radius: 12px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.primary {
  margin-top: 14px;
  color: var(--night);
  background: var(--gold);
  border: 0;
}

.primary:hover {
  background: var(--gold-hi);
}

.secondary {
  color: var(--cream);
  background: transparent;
  border: 1px solid var(--hairline);
}

.secondary:hover {
  border-color: var(--cream);
}

.panel {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 26px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0, 0, 10, 0.6);
  transform: translate(-50%, -50%);
  animation: arrive 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 12px));
  }
}

.panel h2 {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--cream);
}

.panel .note {
  margin: 0 0 8px;
}

.panel .primary {
  margin-top: 0;
}

/* Sound options: rows are actions, columns are sets. */

#sounds {
  z-index: 4;
  background: rgba(9, 10, 34, 0.97);
}

.panel-wide {
  width: min(860px, calc(100vw - 32px));
}

#sounds-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1.25fr) repeat(var(--packs, 5), minmax(92px, 1fr));
  gap: 4px 6px;
  align-items: center;
  margin: 6px 0;
  overflow-x: auto;
}

.pack {
  display: grid;
  gap: 1px;
  align-self: stretch;
  align-content: start;
  padding: 5px 4px;
  color: var(--cream);
  background: rgba(255, 243, 218, 0.07);
  border: 1px solid transparent;
  border-radius: 9px;
  transition: border-color 0.2s ease;
}

.pack:hover {
  border-color: var(--hairline);
}

.pack b {
  font-size: 16px;
  line-height: 1.1;
}

.pack small {
  font-size: 13px;
  line-height: 1.12;
  color: var(--soft);
}

.action {
  font-size: 17px;
  color: #fff;
  text-align: left;
}

.option {
  justify-self: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: rgba(255, 243, 218, 0.1);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.option::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  transform: translateX(1.5px);
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--soft);
}

.option:hover {
  border-color: var(--cream);
}

/* A set can choose silence for an action: a dash instead of a play arrow. */
.option-none::before {
  width: 12px;
  height: 2px;
  transform: none;
  background: var(--soft);
  border: 0;
}

.option-none[aria-pressed="true"]::before {
  background: var(--night);
}

.option[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
}

.option[aria-pressed="true"]::before {
  border-left-color: var(--night);
}

#sounds-picks {
  min-height: 1.3em;
  margin: 0;
  font-size: 15px;
  text-align: left;
}

.sounds-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
}

.sounds-actions button {
  padding: 8px 0;
  font-size: 18px;
}

#hint {
  position: fixed;
  left: 50%;
  bottom: 62px;
  z-index: 2;
  max-width: calc(100vw - 32px);
  padding: 7px 18px;
  color: var(--gold-hi);
  font-size: 19px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  transform: translateX(-50%);
  pointer-events: none;
  animation: fade 0.4s ease;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

#countdown {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2;
  font-family: var(--display);
  font-size: min(24vh, 170px);
  font-weight: 700;
  line-height: 1;
  color: var(--cream);
  text-shadow: 0 6px 34px rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#countdown[data-beat] {
  animation: beat 1s ease-out both;
}

@keyframes beat {
  0% {
    opacity: 0;
  }

  18% {
    opacity: 0.95;
  }

  70% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
  }
}

#rotate {
  display: none;
}

/* Medium windows: cards shrink so three rivals still fit */

@media (max-width: 1180px) {
  #hud {
    grid-template-columns: 1fr minmax(180px, 260px) 1fr;
    gap: 14px;
  }

  .team {
    gap: 12px;
  }

  .bubble {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }

  .player-name {
    font-size: 18px;
  }

  .player-stats {
    gap: 8px;
    font-size: 13px;
  }

  .stat svg {
    width: 14px;
    height: 14px;
  }
}

/* Phones held sideways */

@media (max-height: 520px) {
  body {
    font-size: 16px;
  }

  #hud {
    gap: 10px;
    padding-top: 4px;
    padding-bottom: 2px;
    grid-template-columns: 1fr minmax(150px, 240px) 1fr;
  }

  .bubble {
    width: 26px;
    height: 26px;
    font-size: 13px;
    border-width: 2px;
    box-shadow: 0 0 10px var(--seat), 0 2px 6px rgba(0, 0, 0, 0.6);
  }

  .player-name {
    font-size: 15px;
  }

  /* No room for all three on a phone: lands stay, troops and growth step aside. */
  .player-stats {
    margin-top: 1px;
    font-size: 12px;
  }

  .stat-troops,
  .stat-rate,
  .player-out {
    display: none;
  }

  .stat svg {
    width: 12px;
    height: 12px;
  }

  #clock {
    font-size: 19px;
  }

  .share {
    margin-top: 3px;
    padding-bottom: 14px;
  }

  .share-bar {
    height: 8px;
  }

  .share-mid {
    top: -3px;
    height: 14px;
  }

  .share-clash {
    top: 4px;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
  }

  .share-pcts span {
    top: 10px;
    font-size: 12px;
  }

  .bonus h2 {
    display: none;
  }

  .bonus li {
    font-size: 9.5px;
    line-height: 1.4;
  }

  .tempos button {
    padding: 8px 4px;
  }

  .tempos svg {
    width: 24px;
    height: 24px;
  }

  .tempos span {
    display: none;
  }

  .quiet {
    padding: 1px 8px;
    font-size: 13px;
  }

  .panel-wide {
    padding: 10px 14px;
  }

  .panel-wide h2 {
    font-size: 19px;
  }

  #sounds .note {
    font-size: 13px;
  }

  .pack small {
    display: none;
  }

  .option {
    width: 22px;
    height: 22px;
  }

  .option::before {
    border-width: 4px 0 4px 7px;
  }

  .action {
    font-size: 14px;
  }

  .sounds-actions button {
    padding: 3px 0;
    font-size: 14px;
  }

  .note {
    margin-top: 3px;
    font-size: 14px;
  }

  .primary {
    margin-top: 5px;
    padding: 5px 0;
    font-size: 18px;
  }

  #hint {
    bottom: 34px;
    font-size: 16px;
  }
}

/* Phones held upright: the map is too wide to play this way */

@media (orientation: portrait) and (max-width: 700px) {
  #rotate {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 32px;
    font-family: var(--display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    background: var(--night);
  }
}

@media (prefers-reduced-motion: reduce) {
  .share-bar i,
  .share-clash,
  .share-pcts span,
  .bonus li,
  .bonus li i,
  .tempos button {
    transition: none;
  }

  .half-low,
  .strike,
  .panel,
  #hint {
    animation: none;
  }

  .menu button::after,
  .menu-back::after {
    transition: none;
  }
}