/* Only Snakes, the player's phone: the stage heading with its ring clock, the big die, the 1-100 track
   and the three lines under it, then the end-of-game stats. Built on the player shell (20_player_shell.css). */

/* Square chip in the header */
.gtf-os-square {
  color: var(--gtf-success);
}

/* ---------- Stage heading and ring clock ---------- */

.gtf-os-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.gtf-os-head__title {
  margin: 0;
  font-size: 34px;
}

.gtf-os-clock__ring {
  --ring: var(--gtf-success);

  display: grid;
  flex: none;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(var(--ring) calc(var(--progress, 0) * 360deg), var(--gtf-surface-4) 0);

  &.is-urgent {
    --ring: var(--gtf-orange);
  }

  &::before {
    content: "";
    grid-area: 1 / 1;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--gtf-ink);
  }
}

.gtf-os-clock__value {
  grid-area: 1 / 1;
  z-index: 1;
  font-family: var(--gtf-mono);
  font-size: 26px;
  line-height: 1;
  color: var(--gtf-cream);
}

.gtf-os-clock__ring.is-urgent .gtf-os-clock__value {
  color: var(--gtf-orange);
}

.gtf-os-stage > .gtf-pl-lede {
  min-height: 48px;
  margin: 8px 0 20px;
  font-size: 16px;
}

/* ---------- The die ---------- */

.gtf-os-die-wrap {
  position: relative;
  width: 220px;
  height: 232px;
  margin: 0 auto;
}

.gtf-os-die {
  --die-bg: var(--gtf-cream);

  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  place-items: center;
  width: 220px;
  height: 220px;
  padding: 34px;
  border: 5px solid var(--gtf-cream);
  border-radius: 40px;
  background: var(--die-bg);
  box-sizing: border-box;
}

.gtf-os-die--button {
  --die-bg: #fff;

  cursor: pointer;
  appearance: none;
  transition: transform 160ms ease;

  &:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02);
  }

  &:active:not(:disabled) {
    transform: scale(0.97);
  }

  &:disabled {
    cursor: wait;
  }

  &.is-rolling {
    animation: gtf-os-tumble 0.45s ease-in-out infinite;
  }

  &.is-landed {
    animation: gtf-os-land 0.35s ease-out;
  }
}

.gtf-os-die--snake {
  --die-bg: oklch(0.85 0.1 20);
}

.gtf-os-die__pip {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
}

/* Which of the nine grid cells hold a pip, per face */
.gtf-os-die.face-1 .gtf-os-die__pip:nth-child(5),
.gtf-os-die.face-2 .gtf-os-die__pip:is(:nth-child(1), :nth-child(9)),
.gtf-os-die.face-3 .gtf-os-die__pip:is(:nth-child(1), :nth-child(5), :nth-child(9)),
.gtf-os-die.face-4 .gtf-os-die__pip:is(:nth-child(1), :nth-child(3), :nth-child(7), :nth-child(9)),
.gtf-os-die.face-5 .gtf-os-die__pip:is(:nth-child(1), :nth-child(3), :nth-child(5), :nth-child(7), :nth-child(9)),
.gtf-os-die.face-6 .gtf-os-die__pip:is(:nth-child(1), :nth-child(3), :nth-child(4), :nth-child(6), :nth-child(7), :nth-child(9)) {
  background: var(--gtf-ink);
}

.gtf-os-die-shadow {
  position: absolute;
  right: 20px;
  bottom: 0;
  left: 20px;
  height: 16px;
  border-radius: 50%;
  background: #000;
  opacity: 0.35;
}

@keyframes gtf-os-tumble {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(10deg) scale(1.04); }
  50% { transform: rotate(-9deg) scale(0.97); }
  75% { transform: rotate(7deg) scale(1.03); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes gtf-os-land {
  0% { transform: scale(1.08) rotate(-6deg); }
  60% { transform: scale(0.97) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ---------- The 1-100 track ---------- */

.gtf-os-track {
  --trail: var(--gtf-success);
  --token-border: var(--gtf-cream);

  position: relative;
  height: 40px;
  margin: 28px 6px 0;
}

.gtf-os-track--slide {
  --trail: var(--gtf-danger-red);
  --token-border: var(--gtf-danger-red);
}

.gtf-os-track__rail,
.gtf-os-track__trail {
  position: absolute;
  top: 17px;
  left: 0;
  height: 6px;
  border-radius: 3px;
}

.gtf-os-track__rail {
  right: 0;
  background: var(--gtf-surface-2);
}

.gtf-os-track__trail {
  width: var(--to);
  background: var(--trail);
}

.gtf-os-track__token {
  position: absolute;
  top: 0;
  left: var(--to);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  border: 3px solid var(--token-border);
  border-radius: 50%;
  overflow: hidden;
  background: var(--gtf-orange);

  & .avatar-component {
    width: 100%;
    height: 100%;
    flex-basis: 100%;
    border: 0;
    border-radius: 50%;
  }

  & .avatar-component__initials {
    font-size: 14px;
    font-weight: 900;
  }
}

.gtf-os-track__end {
  position: absolute;
  top: 28px;
  font-family: var(--gtf-mono);
  font-size: 12px;
  color: var(--gtf-text-3);
  pointer-events: none;
}

.gtf-os-track__end--start { left: 0; }
.gtf-os-track__end--finish { right: 0; }

@media (prefers-reduced-motion: no-preference) {
  .gtf-os-track__token {
    animation: gtf-os-walk var(--walk) ease-in-out both;
  }

  .gtf-os-track__trail {
    animation: gtf-os-walk-trail var(--walk) ease-in-out both;
  }

  .gtf-os-track--slide .gtf-os-track__token {
    animation-name: gtf-os-slide;
  }

  .gtf-os-track--slide .gtf-os-track__trail {
    animation-name: gtf-os-slide-trail;
  }
}

@keyframes gtf-os-walk {
  from { left: var(--from); }
  to { left: var(--via); }
}

@keyframes gtf-os-walk-trail {
  from { width: var(--from); }
  to { width: var(--via); }
}

@keyframes gtf-os-slide {
  0% { left: var(--from); border-color: var(--gtf-cream); }
  40% { left: var(--via); border-color: var(--gtf-cream); }
  55% { left: var(--via); border-color: var(--gtf-danger-red); }
  100% { left: var(--to); border-color: var(--gtf-danger-red); }
}

@keyframes gtf-os-slide-trail {
  0% { width: var(--from); background: var(--gtf-success); }
  40% { width: var(--via); background: var(--gtf-success); }
  55% { width: var(--via); background: var(--gtf-danger-red); }
  100% { width: var(--to); background: var(--gtf-danger-red); }
}

/* ---------- The three lines ---------- */

.gtf-os-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 112px;
  margin-top: 20px;
  text-align: center;
}

.gtf-os-line {
  font-size: 18px;
}

.gtf-os-line--1 {
  font-size: 26px;
  font-weight: 800;
}

.gtf-os-line--muted {
  font-size: 16px;
  color: var(--gtf-text-2);
}

.gtf-os-line--danger {
  color: var(--gtf-danger-red);
}

.gtf-os-line--win {
  font-weight: 800;
  color: var(--gtf-yellow);
}

.gtf-os-note {
  text-align: center;
}

/* ---------- End of game ---------- */

.gtf-os-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 2px solid var(--gtf-surface-2);
}

.gtf-os-stats__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--gtf-text-2);
}

.gtf-os-stats__value {
  font-family: var(--gtf-mono);
  font-size: clamp(26px, 8vw, 36px);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--gtf-danger-red);
}

.gtf-os-stats__value--none {
  color: var(--gtf-text-2);
}