/* Yam's: disc score sheet on the open stage, pip dice as the only squares. */

.yams-scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  overflow: auto;
  padding: 56px 12px 72px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  color: var(--tool-text);
}

.yams-scene[hidden] {
  display: none;
}

.yams-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin: auto;
}

.yams-sheet {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.yams-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yams-row {
  display: grid;
  grid-template-columns: 64px 64px 64px;
  gap: 8px;
  align-items: center;
}

.yams-row-icon {
  display: grid;
  place-items: center;
}

/* Cells are circles by default; the square variant rounds the corners instead. */
.yams-sheet {
  --yams-cell-radius: 50%;
}

.yams-sheet.is-square {
  --yams-cell-radius: 16px;
}

.yams-row-icon .die-face,
.yams-figure {
  width: 40px;
  height: 40px;
  border-radius: var(--yams-cell-radius, 50%);
  background: var(--idle);
  color: var(--ink);
}

.yams-row-icon .die-face {
  padding: 6px;
}

.yams-row-icon .die-pip.is-on {
  background: var(--ink);
}

.yams-figure {
  display: grid;
  place-items: center;
  font: 700 13px/1 ui-sans-serif, system-ui, sans-serif;
}

.yams-sheet .yams-row-icon .die-face,
.yams-sheet .yams-figure {
  width: 64px;
  height: 64px;
}

.yams-sheet .yams-row-icon .die-face {
  padding: 8px;
}

.yams-sheet .yams-row-icon .die-pip {
  width: 11px;
  height: 11px;
}

.yams-sheet .yams-figure {
  font-size: 18px;
}

.yams-sheet .yams-figure svg {
  width: 34px;
  height: 34px;
}

.yams-figure svg {
  width: 22px;
  height: 22px;
}

.yams-figure-full svg {
  width: 30px;
  height: 20px;
}

.yams-sheet .yams-figure-full svg {
  width: 46px;
  height: 30px;
}

.yams-figure-small,
.yams-figure-large {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1;
}

.yams-figure-small svg,
.yams-figure-large svg {
  width: 16px;
  height: 16px;
}

.yams-figure-small span,
.yams-figure-large span {
  font: 700 11px/1 ui-sans-serif, system-ui, sans-serif;
}

.yams-sheet .yams-figure-small svg,
.yams-sheet .yams-figure-large svg {
  width: 26px;
  height: 26px;
}

.yams-sheet .yams-figure-small span,
.yams-sheet .yams-figure-large span {
  font-size: 14px;
}

.yams-score {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: var(--yams-cell-radius, 50%);
  background: var(--idle);
  color: var(--ink);
  font: 700 18px/1 ui-sans-serif, system-ui, sans-serif;
}

.yams-score.is-filled {
  background: var(--purple);
  color: #fff;
}

.yams-score.is-rival.is-filled {
  background: var(--red);
}

.yams-score.is-turn:not(.is-filled) {
  box-shadow: 0 0 0 2px var(--purple);
}

.yams-score.is-rival.is-turn:not(.is-filled) {
  box-shadow: 0 0 0 2px var(--red);
}

/* Bonus rows are worked out, never tapped: outlined until they are settled. */
.yams-row.is-bonus .yams-figure {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--idle);
  color: var(--tool-text);
  font-size: 15px;
  line-height: 1.05;
  text-align: center;
}

.yams-row.is-bonus .yams-figure-minmax-bonus {
  font-size: 12px;
}

.yams-score.is-progress {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--idle);
  color: var(--tool-muted);
  font-size: 13px;
}

.yams-box {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--yams-cell-radius, 50%);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.yams-box.is-scratch {
  color: var(--tool-muted);
}

.yams-score:has(.yams-box):hover {
  filter: brightness(0.96);
}

.yams-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.yams-dice {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.yams-die {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--idle);
  cursor: pointer;
}

.yams-die:hover:not(:disabled) {
  filter: brightness(0.97);
}

.yams-die.is-held {
  box-shadow: 0 0 0 3px var(--purple);
}

.yams-die:disabled {
  cursor: default;
}

.die-face {
  width: 52px;
  height: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 7px;
}

.die-pip {
  width: 9px;
  height: 9px;
  margin: auto;
  border-radius: 50%;
  background: transparent;
}

.die-pip.is-on {
  background: var(--ink);
}

.yams-roll {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
  justify-content: center;
}

.yams-rolls {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tool-solid);
  color: var(--ink);
  font: 700 12px/1 ui-sans-serif, system-ui, sans-serif;
}

.yams-die:focus-visible,
.yams-box:focus-visible,
.yams-roll:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (max-width: 680px) {
  .yams-scene {
    padding-top: 72px;
    padding-bottom: 168px;
  }

  .yams-sheet {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .yams-die {
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }

  .yams-die .die-face {
    width: 44px;
    height: 44px;
    padding: 6px;
  }

  .yams-die .die-pip {
    width: 7px;
    height: 7px;
  }

  .yams-row {
    grid-template-columns: 52px 52px 52px;
  }

  .yams-sheet .yams-row-icon .die-face,
  .yams-sheet .yams-figure,
  .yams-score,
  .yams-box {
    width: 52px;
    height: 52px;
  }

  .yams-sheet .yams-row-icon .die-face {
    padding: 6px;
  }

  .yams-sheet .yams-row-icon .die-pip {
    width: 8px;
    height: 8px;
  }

  .yams-sheet .yams-figure,
  .yams-score {
    font-size: 16px;
  }

  .yams-sheet .yams-figure svg {
    width: 28px;
    height: 28px;
  }

  .yams-sheet .yams-figure-small svg,
  .yams-sheet .yams-figure-large svg {
    width: 20px;
    height: 20px;
  }

  .yams-sheet .yams-figure-small span,
  .yams-sheet .yams-figure-large span {
    font-size: 12px;
  }

  .yams-sheet .yams-figure-full svg {
    width: 40px;
    height: 26px;
  }
}

/* A phone on its side is short. The sheet and the dice sit side by side and
   shrink to the space between the score and the roll button. */
@media (orientation: landscape) and (max-height: 560px) {
  .yams-scene {
    --yams-cell: clamp(24px, calc((100dvh - var(--scoreboard-bottom, 64px) - 108px - 28px) / 8), 48px);
    align-items: center;
    padding-top: max(8px, var(--scoreboard-bottom, 64px));
    padding-bottom: 16px;
    overflow: auto;
  }

  .yams-layout {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .yams-sheet {
    gap: 10px;
  }

  .yams-column {
    gap: 3px;
  }

  .yams-row {
    grid-template-columns: repeat(3, var(--yams-cell));
    gap: 3px;
  }

  .yams-dice {
    flex-direction: column;
    gap: 3px;
  }

  .yams-die,
  .yams-sheet .yams-row-icon .die-face,
  .yams-sheet .yams-figure,
  .yams-score,
  .yams-box {
    width: var(--yams-cell);
    height: var(--yams-cell);
  }

  .yams-die {
    border-radius: 10px;
  }

  .yams-die .die-face,
  .yams-sheet .yams-row-icon .die-face {
    width: calc(var(--yams-cell) * 0.82);
    height: calc(var(--yams-cell) * 0.82);
    padding: calc(var(--yams-cell) * 0.1);
  }

  .yams-die .die-pip,
  .yams-sheet .yams-row-icon .die-pip {
    width: calc(var(--yams-cell) * 0.14);
    height: calc(var(--yams-cell) * 0.14);
  }

  .yams-sheet .yams-figure,
  .yams-score,
  .yams-score.is-progress {
    font-size: calc(var(--yams-cell) * 0.28);
    line-height: 1;
    white-space: nowrap;
  }

  .yams-row.is-bonus .yams-figure,
  .yams-row.is-bonus .yams-figure-minmax-bonus {
    font-size: calc(var(--yams-cell) * 0.2);
    line-height: 1.05;
  }

  .yams-sheet .yams-figure svg {
    width: calc(var(--yams-cell) * 0.5);
    height: calc(var(--yams-cell) * 0.5);
  }

  .yams-sheet .yams-figure-small svg,
  .yams-sheet .yams-figure-large svg {
    width: calc(var(--yams-cell) * 0.4);
    height: calc(var(--yams-cell) * 0.4);
  }

  .yams-sheet .yams-figure-small span,
  .yams-sheet .yams-figure-large span {
    font-size: calc(var(--yams-cell) * 0.22);
  }

  .yams-sheet .yams-figure-full svg {
    width: calc(var(--yams-cell) * 0.72);
    height: calc(var(--yams-cell) * 0.46);
  }
}