/* static/css/kit.css */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --ground: #120306;
  --stage-frame: linear-gradient(160deg, #6d090c, #2c0305);
  --stage-fill: radial-gradient(circle at 50% 40%, #ee1a24, #ab050e 74%);
  --phone-fill: radial-gradient(circle at 50% 28%, #ee1a24, #ab050e 80%);
  --master-fill: linear-gradient(170deg, #3a0508, #160406 70%);

  --gold: #ffe06a;
  --on-gold: #7a0a0d;
  --cyan: #7ecdd2;
  --cyan-line: #6fc4ee;
  --cyan-pale: #bfe9ff;
  --cyan-solid: #3fc6dd;
  --rose: #ff8a92;
  --card: #c00811;

  --octagon: polygon(14% 0, 86% 0, 100% 25%, 100% 75%, 86% 100%, 14% 100%, 0 75%, 0 25%);

  --display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: #fff;
  font-family: var(--display);
  -webkit-text-size-adjust: 100%;
}

/* A label in the mono face: the design's letter-spaced small caps. */
.label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* The gold double-ruled frame that wraps the question, the answer box and
   the SCORES plate. The inner rule is a pseudo-element, as in the design. */
.framed {
  position: relative;
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(0 0 0 / 16%));
  box-shadow: 0 0 16px rgb(255 180 50 / 60%), inset 0 0 16px rgb(255 180 50 / 30%);

  &::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgb(255 224 106 / 40%);
    pointer-events: none;
  }
}

/* The gold call-to-action. */
.go {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 12px;
  border: 0;
  background: var(--gold);
  box-shadow: 0 0 20px rgb(255 180 50 / 50%);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--on-gold);
  text-align: center;
  cursor: pointer;

  &:disabled {
    background: rgb(255 255 255 / 14%);
    border: 1px solid rgb(255 255 255 / 30%);
    box-shadow: none;
    color: rgb(255 255 255 / 60%);
    cursor: default;
  }
}

/* A selfie, clipped to the design's rotated square. */
.selfie {
  transform: rotate(45deg);
  overflow: hidden;
  background: #2b6b78;
  box-shadow: inset 0 0 0 2px var(--cyan-solid);

  & > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: rotate(-45deg) scale(1.42);
  }

  &.mine { background: #7a5a12; box-shadow: inset 0 0 0 2px var(--gold); }
}

/* A fault, legible from the back of the room. Never shown to a player. */
.fault {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  padding: 4vw;
  background: var(--ground);
  text-align: center;
  z-index: 10;

  & .reason { font-size: 6vw; font-weight: 800; color: var(--gold); }
  & .detail { font-family: var(--mono); font-size: 2vw; color: #fff; }
}