:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f3f4f6;
  color: #24262d;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
.brand {
  position: absolute;
  top: 30px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.4px;
  white-space: nowrap;
}
.brand img { width: 38px; height: 38px; object-fit: contain; }
main {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.dice-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 200px;
  height: 200px;
  perspective: 800px;
  isolation: isolate;
}
.dice-stage::before {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 0;
  width: 142px;
  height: 20px;
  border-radius: 50%;
  background: #32332f18;
  filter: blur(9px);
}
.die {
  display: grid;
  place-items: center;
  width: 180px;
  height: 180px;
  border: 0;
  border-radius: 20px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease;
}
.cube {
  position: relative;
  width: 118px;
  height: 118px;
  transform-style: preserve-3d;
  transform: var(--pose, rotateX(-24deg) rotateY(-30deg) rotateZ(4deg));
}
.cube-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  border: 4px solid #100e0d;
  border-radius: 16px 20px 15px 18px;
  padding: 17px;
  background: #fff;
  backface-visibility: hidden;
}
.front { transform: translateZ(58px); background: #fff; }
.back { transform: rotateY(180deg) translateZ(58px); }
.right { transform: rotateY(90deg) translateZ(58px); background: #fff; }
.left { transform: rotateY(-90deg) translateZ(58px); }
.top { transform: rotateX(90deg) translateZ(58px); background: #fff; }
.bottom { transform: rotateX(-90deg) translateZ(58px); }
.pip {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #100e0d;
}
.die:focus-visible { outline: 3px solid #667085; outline-offset: 7px; }
.die:disabled { cursor: wait; }
@media (hover: hover) {
  .die:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.015);
  }
}
.die:active:not(:disabled) { transform: translateY(2px); }
.result {
  height: 82px;
  width: 100%;
  margin-top: 18px;
  text-align: center;
}
#message {
  height: 36px;
  margin: 0;
  color: #717580;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
}
#message.is-five { color: #a34c20; font-size: 26px; font-weight: 600; }
#message.is-out { color: #24262d; font-size: 22px; font-weight: 600; }
#instruction { margin: 6px 0 0; min-height: 20px; color: #717580; font-size: 12px; line-height: 20px; }
.result.drink #message { animation: drink-pop .65s ease-out both; }
.result.everyone #message { color: #9b381f; animation: everyone-pop .8s ease-out both; }
.dice-stage.drink::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 194px;
  height: 194px;
  border: 2px solid #c478444d;
  border-radius: 50%;
  pointer-events: none;
  animation: drink-ring 1.15s ease-out 2 forwards;
}
.dice-stage.everyone::after { border-color: #b3453d77; animation: drink-ring .9s ease-out 3 forwards; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.die.rolling { animation: toss 1.2s linear both; }
.die.rolling .cube { animation: cube-spin 1.2s linear both; }
.dice-stage.rolling::before { animation: toss-shadow 1.2s linear both; }
@keyframes toss {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2,.65,.35,1); }
  38% { transform: translateY(-145px) scale(1.05); animation-timing-function: cubic-bezier(.6,0,.85,.45); }
  65% { transform: translateY(5px) scale(1.08,.92); animation-timing-function: ease-out; }
  77% { transform: translateY(-25px) scale(.98,1.02); animation-timing-function: ease-in; }
  88% { transform: translateY(2px) scale(1.04,.96); animation-timing-function: ease-out; }
  95% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
@keyframes cube-spin {
  0% { transform: var(--from); }
  38% { transform: rotateX(160deg) rotateY(240deg) rotateZ(90deg); }
  65% { transform: var(--pose); }
  77% { transform: var(--pose) rotateZ(-8deg); }
  88% { transform: var(--pose) rotateZ(4deg); }
  100% { transform: var(--pose); }
}
@keyframes toss-shadow {
  0%, 65%, 88%, 100% { transform: scale(1); opacity: 1; }
  38% { transform: scale(.45); opacity: .2; }
  77% { transform: scale(.8); opacity: .65; }
}
@keyframes drink-pop {
  0% { opacity: 0; transform: translateY(10px) scale(.7); }
  55% { opacity: 1; transform: translateY(-3px) scale(1.15); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes everyone-pop {
  0% { opacity: 0; transform: scale(.65) rotate(-4deg); }
  35% { opacity: 1; transform: scale(1.12) rotate(3deg); }
  60% { transform: scale(.98) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes drink-ring {
  0% { transform: scale(.75); opacity: .8; }
  100% { transform: scale(1.3); opacity: 0; }
}
@media (max-width: 520px) {
  .brand { top: 22px; left: 20px; }
}
@media (max-height: 520px) {
  .brand { top: 16px; left: 20px; transform: none; font-size: 15px; }
  .brand img { width: 30px; height: 30px; }
  @keyframes toss {
    0% { transform: translateY(0); }
    38% { transform: translateY(-60px); }
    65% { transform: translateY(4px) scale(1.08,.92); }
    77% { transform: translateY(-16px); }
    90% { transform: translateY(2px); }
    100% { transform: translateY(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .dice-stage.drink::after { display: none; }
  .die:hover:not(:disabled), .die:active:not(:disabled) { transform: none; }
}