/* Moved out of app.css as it was, rule for rule and in the same order (#547), so the picker can
   choose this file's specs: Siegeometry's HUD (visuals.md 7.2, 7.4, 7.7).
   index.html loads it right after online.css, where these rules stood. */

/* ------------------------------------------------------------ Siegeometry (visuals.md 7.2, 7.4, 7.7) */

.sg-label {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform;
}

/* Never bigger than the gap between the two nearest buildings on screen (--sg-fit, siege.ts). */
.sg-count {
  font-weight: 900;
  font-size: min(1.55em, var(--sg-fit, 1.55em));
  line-height: calc(1 * var(--line-k));
  color: var(--ui-text);
  text-shadow:
    0 0.08em 0.25em var(--shadow),
    0 0 0.1em var(--shadow);
  font-variant-numeric: tabular-nums;
}

.sg-label.neutral .sg-count {
  opacity: 0.72;
  font-size: min(1.25em, calc(var(--sg-fit, 1.55em) * 0.85));
}

.high-contrast .sg-count {
  text-shadow:
    0 0 0.12em var(--edge),
    0 0 0.12em var(--edge),
    0 0 0.3em var(--edge);
  -webkit-text-stroke: 0.04em var(--edge);
}

.high-contrast .sg-label.neutral .sg-count {
  opacity: 1;
}

/* High contrast: knocked-out players stay readable (the status line says "Out"), and the hints
   and the round line get a solid backing. */
.high-contrast .pg-card.out {
  opacity: 0.8;
}

.high-contrast .pg-hints,
.high-contrast .pg-round,
.high-contrast .sg-timer {
  color: var(--ui-text);
  text-shadow:
    0 0 0.25em var(--edge),
    0 0 0.1em var(--edge);
}

.sg-progress {
  display: none;
  width: 2.4em;
  height: 0.28em;
  margin-top: 0.2em;
  border-radius: 1em;
  background: linear-gradient(90deg, var(--ui-text) calc(var(--p, 0) * 100%), var(--ui-quiet) 0);
}

.sg-label.upgrading .sg-progress {
  display: block;
}

/* An empty tower (#160): it cannot fire until units are sent in. Said in words, not colour alone
   (the word is the label's data-idle, from Tx: js siege.ts). */
.sg-label.idle::after {
  content: attr(data-idle);
  margin-top: 0.15em;
  padding: 0.05em 0.45em;
  border-radius: 1em;
  background: var(--scrim);
  color: var(--ui-text);
  font-size: max(var(--fs-small), 0.8em);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.sg-label.idle .sg-count {
  opacity: 0.72;
}

.sg-timer {
  font-weight: 900;
  font-size: var(--fs-title);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0.1em 0.4em var(--shadow);
}

.sg-timer.warn {
  color: var(--warn);
}

/* Siegeometry Quick (#91): the last 30 s are a countdown nobody can miss; each of the last 10 s beats. */
.sg-timer.final {
  font-size: max(2rem, calc(var(--fs-base) * 3.2));
}

.sg-timer.beat {
  animation: sg-beat 0.45s ease-out;
}

@keyframes sg-beat {
  from {
    transform: scale(1.25);
  }
}

.reduced-motion .sg-timer.beat {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .sg-timer.beat {
    animation: none;
  }
}

.sg-meter {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 0.3em;
  font-size: max(var(--fs-small), 0.72em);
  font-weight: 800;
  color: var(--ui-dim);
}

.sg-meter .icon {
  display: grid;
  color: var(--c);
}

.sg-meter .bar {
  flex: 1;
  height: 0.45em;
  border-radius: 1em;
  background: var(--ui-key);
  overflow: hidden;
}

.sg-meter .bar i {
  display: block;
  height: 100%;
  width: calc(var(--m, 0) * 100%);
  background: var(--c);
  border-radius: inherit;
}

.sg-meter .ready {
  display: none;
}

.sg-meter.full .ready {
  display: inline;
  color: var(--ui-text);
}

.sg-meter.full .bar {
  display: none;
}

.sg-meter.full .icon,
.sg-meter.active .icon {
  animation: sg-glow 0.9s ease-in-out infinite alternate;
}

@keyframes sg-glow {
  to {
    transform: scale(1.25);
    filter: drop-shadow(0 0 0.3em var(--c));
  }
}

.sg-bottom {
  position: absolute;
  bottom: calc(1.1em + var(--sa-b, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55em;
}

.sg-bottom .pg-hints {
  position: static;
  transform: none;
}

.sg-fraction {
  display: flex;
  gap: 0.35em;
  padding: 0.35em;
  border-radius: 0.9em;
  background: var(--ui);
  border: 1px solid var(--ui-line);
  pointer-events: auto;
}

.sg-pill {
  font-weight: 900;
  color: var(--ui-dim);
  background: transparent;
  border: 0;
  border-radius: 0.6em;
  padding: 0.35em 0.8em;
  cursor: pointer;
}

.sg-pill kbd {
  margin-inline-end: 0.45em;
}

.sg-pill.on {
  background: var(--ui-text);
  color: var(--ink);
}

.sg-pill.on kbd {
  background: var(--ui-dim);
}

.sg-ability {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin-inline-start: 0.4em;
  font-weight: 900;
  color: var(--ui-dim);
  background: transparent;
  border: 2px dashed var(--ui-line);
  border-radius: 0.6em;
  padding: 0.3em 0.7em;
  cursor: pointer;
  opacity: 0.55;
}

.sg-ability .icon {
  display: grid;
}

.sg-ability.ready {
  color: var(--on-do);
  background: var(--do);
  border-style: solid;
  border-color: transparent;
  opacity: 1;
}

.sg-token {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--c);
  color: var(--ink);
  font-size: max(var(--fs-small), 0.9em);
  box-shadow: 0 0.15em 0.4em var(--shadow);
  will-change: transform;
}

.sg-float {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  font-weight: 900;
  font-size: 1.1em;
  color: var(--c);
  text-shadow:
    0 0.06em 0 var(--shadow),
    0 0 0.25em var(--shadow);
}

/* The text animates, not .sg-float: a scale on the placed box would scale its translate too. */
.sg-float > span {
  display: block;
  animation: sg-float 1s ease-out forwards;
}

.sg-float::before {
  content: '';
}

@keyframes sg-float {
  from {
    opacity: 1;
    translate: 0 0;
    scale: 1.2;
  }
  to {
    opacity: 0;
    translate: 0 -160%;
    scale: 0.9;
  }
}

.reduced-motion .sg-float > span {
  animation-duration: 0.6s;
}

.sg-cursor {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 0;
  height: 0;
  will-change: transform;
}

.sg-cursor-ring {
  position: absolute;
  inset-inline-start: -1.3em;
  top: -1.3em;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  border: 0.22em solid var(--c);
  box-shadow:
    0 0 0 0.12em var(--shadow),
    inset 0 0 0 0.12em var(--shadow);
  transition: transform 0.12s;
}

.sg-cursor.aiming .sg-cursor-ring {
  transform: scale(0.8);
  border-style: dashed;
}

.sg-cursor-icon {
  position: absolute;
  inset-inline-start: 1em;
  top: -2.2em;
  filter: drop-shadow(0 0.1em 0.15em var(--shadow));
}

.sg-cursor-icon svg {
  width: 1.1em;
  height: 1.1em;
}

.sg-cursor-amount {
  position: absolute;
  inset-inline-start: 1.5em;
  top: 0.6em;
  padding: 0 0.4em;
  border-radius: 0.4em;
  background: var(--c);
  color: var(--ink);
  font-size: max(var(--fs-small), 0.7em);
  font-weight: 900;
  white-space: nowrap;
}

.sg-cursor.lost .sg-cursor-ring {
  border-style: dotted;
  opacity: 0.5;
}

.sg-cursor.out {
  display: none;
}

.sg-build {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  min-width: 12em;
  /* Beside its building and whole on screen: js/common.ts placeBeside (#70). */
  max-width: calc(100vw - 8px);
  max-height: calc(100vh - 8px);
  overflow-y: auto;
  padding: 0.4em;
  border-radius: 0.8em;
  background: var(--ui);
  border: 1px solid var(--ui-line);
  border-inline-start: 0.3em solid var(--c);
  box-shadow: 0 0.6em 1.6em var(--shadow);
  pointer-events: auto;
  will-change: transform;
}

.sg-build-item {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  font-size: max(var(--fs-small), 0.85em);
  font-weight: 800;
  background: transparent;
  border: 0;
  border-radius: 0.5em;
  padding: 0.4em 0.6em;
  cursor: pointer;
  text-align: start;
}

.sg-build-item .cost {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

.sg-build-item.on {
  background: var(--c);
  color: var(--ink);
}

.sg-build-item.off {
  opacity: 0.4;
  cursor: not-allowed;
}

.reduced-motion .sg-meter .icon {
  animation: none;
}