/* Random Number Generator. JS sets --fs and --cols on .rn-results to fit the
   numbers into the space left; the board of drawn numbers is its own size
   container. */

.rn {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  gap: clamp(8px, 2.4cqmin, 26px);
  padding: clamp(8px, 2.4cqmin, 26px) clamp(8px, 2.4cqmin, 26px) calc(clamp(36px, 8.4cqmin, 84px) + 2 * clamp(8px, 2.6cqmin, 28px));
}
.rn.has-board { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); }
.rn-main { display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1.4cqmin, 14px); min-height: 0; min-width: 0; }
.rn-top { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(4px, 1.2cqmin, 12px); max-width: 100%; }
.rn-range { cursor: pointer; font-variant-numeric: tabular-nums; transition: background .12s; }
.rn-range:hover { background: color-mix(in srgb, var(--cat) 24%, var(--stage-bg)); }
.rn-left { background: transparent; font-variant-numeric: tabular-nums; }
.rn-left.is-out { background: var(--cat); color: #fff; border-color: transparent; }
.rn-area { position: relative; flex: 1 1 0; min-height: 0; width: 100%; }
.rn-hint { flex: none; color: color-mix(in srgb, var(--stage-ink) 55%, transparent); font-size: clamp(12px, 2.7cqmin, 26px); }

/* ---- the odometer ---- */
.rn-results {
  --fs: 80px; --cols: 1;
  height: 100%; display: grid; grid-template-columns: repeat(var(--cols), auto);
  justify-content: center; align-content: center; gap: calc(var(--fs) * .28);
  font-size: var(--fs);
}
.rn-tile {
  justify-self: center; display: inline-flex; align-items: center; gap: .055em;
  padding: .13em .15em; border-radius: .2em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 72%, #fff), var(--cat) 48%, color-mix(in srgb, var(--cat) 68%, #000));
  box-shadow: inset 0 .025em 0 rgba(255, 255, 255, .5), inset 0 -.03em 0 rgba(0, 0, 0, .2), 0 .05em .16em rgba(10, 20, 35, .3);
}
.rn-wheel {
  position: relative; display: block; width: .68em; height: 1.12em; overflow: hidden; border-radius: .07em;
  background: linear-gradient(180deg, #0d1219, #283241 50%, #0d1219); color: #fff;
  font: 600 1em/1.12 var(--font-display); font-variant-numeric: tabular-nums; text-align: center;
  box-shadow: inset 0 0 0 .012em rgba(255, 255, 255, .1);
}
.rn-wheel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(255, 255, 255, .04) 30%, transparent 50%, rgba(255, 255, 255, .03) 70%, rgba(0, 0, 0, .6));
}
.rn-roll { display: block; will-change: transform; }
.rn-cell { display: block; height: 1.12em; line-height: 1.12em; }
.rn-sign { display: block; width: .5em; text-align: center; color: #fff; font: 600 1em/1 var(--font-display); text-shadow: 0 .03em .05em rgba(0, 0, 0, .3); transition: opacity .25s; }
.rn-sign.is-wait { opacity: 0; }
.rn-wheel.is-landed { animation: rn-land .3s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes rn-land { 0% { transform: translateY(0); } 35% { transform: translateY(.05em); } 100% { transform: none; } }
.rn-tile.is-q .rn-wheel { width: .82em; color: rgba(255, 255, 255, .75); }
.rn-results.is-done .rn-tile { animation: rn-glow 1.1s ease-out; }
@keyframes rn-glow {
  0% { box-shadow: inset 0 .025em 0 rgba(255, 255, 255, .5), 0 0 0 0 color-mix(in srgb, var(--cat) 70%, transparent); }
  100% { box-shadow: inset 0 .025em 0 rgba(255, 255, 255, .5), 0 0 0 .14em color-mix(in srgb, var(--cat) 0%, transparent); }
}

/* ---- typing the range ---- */
.rn-edit { display: flex; align-items: center; gap: clamp(4px, 1.2cqmin, 12px); }
.rn-edit .rn-edit-in {
  flex: none; width: 5.4em; min-height: 0; padding: .2em .3em; text-align: center; border-radius: 10px;
  font: 600 clamp(16px, 4.2cqmin, 44px)/1.1 var(--font-display); font-variant-numeric: tabular-nums;
  border: 2px solid var(--line); background: var(--field); color: var(--ink); -moz-appearance: textfield; appearance: textfield;
}
.rn-edit .rn-edit-in::-webkit-outer-spin-button, .rn-edit .rn-edit-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rn-edit .rn-edit-in:focus { outline: none; border-color: var(--cat); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat) 25%, transparent); }
.rn-edit-to { font-weight: 600; color: color-mix(in srgb, var(--stage-ink) 60%, transparent); font-size: clamp(13px, 3cqmin, 30px); }
.rn-edit-ok { flex: none; min-width: 0 !important; width: clamp(36px, 8.4cqmin, 84px); min-height: clamp(36px, 7cqmin, 70px); padding: 0; }

/* ---- earlier draws ---- */
.rn-hist {
  flex: none; display: flex; align-items: center; gap: .45em; max-width: 100%; overflow: hidden; padding-top: .2em;
  font-size: clamp(12px, 2.5cqmin, 24px); font-variant-numeric: tabular-nums;
  -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent);
}
.rn-hist-label { flex: none; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; font-size: .8em; color: color-mix(in srgb, var(--stage-ink) 50%, transparent); }
.rn-hist-chip { flex: none; padding: .18em .7em; border-radius: 999px; white-space: nowrap; font-weight: 600; background: color-mix(in srgb, var(--stage-ink) 7%, transparent); }

/* ---- the board of drawn numbers ---- */
.rn-board {
  display: none; flex-direction: column; min-height: 0; min-width: 0;
  padding: clamp(6px, 1.8cqmin, 18px); border-radius: clamp(10px, 2.4cqmin, 22px);
  background: color-mix(in srgb, var(--stage-ink) 4%, var(--stage-bg)); border: 1px solid var(--line);
}
.rn.has-board .rn-board { display: flex; }
.rn-board-title {
  flex: none; margin-bottom: .5em; text-align: center;
  font: 650 clamp(11px, 2.2cqmin, 22px)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  color: color-mix(in srgb, var(--stage-ink) 55%, transparent);
}
.rn-cells-wrap { flex: 1 1 0; min-height: 0; container-type: size; }
.rn-cells {
  --bc: 10; --br: 10;
  height: 100%; display: grid; grid-template-columns: repeat(var(--bc), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr);
  gap: max(2px, 1cqmin);
}
.rn-c {
  display: grid; place-items: center; border-radius: 28%; min-width: 0;
  font: 600 min(calc(44cqw / var(--bc)), calc(50cqh / var(--br)))/1 var(--font-display); font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--stage-ink) 38%, transparent); background: color-mix(in srgb, var(--stage-ink) 5%, transparent);
  transition: background .3s, color .3s;
}
.rn-c.is-used { background: color-mix(in srgb, var(--cat) 24%, var(--stage-bg)); color: var(--stage-ink); }
.rn-c.is-last { background: var(--cat); color: #fff; animation: t-pop .45s cubic-bezier(.2, 1.6, .4, 1); }

@container (orientation: portrait) {
  .rn.has-board { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, .9fr); }
}
@container (max-height: 380px) or (max-width: 440px) {
  .rn.has-board { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .rn.has-board .rn-board { display: none; }
}
@container (max-height: 420px) {
  .rn-hint { display: none; }
}
@container (max-height: 330px) {
  .rn-hist { display: none; }
}
@container (max-height: 240px) {
  .rn-top { display: none; }
  .rn-main { gap: 0; }
}
@container (max-width: 400px) {
  .rn-count { display: none; }
}