@charset "UTF-8";

.table-cloth:has(.deck-wheel) {
  padding-top: 11px;
  border-top: 1px solid #c8a97738;
  background: radial-gradient(ellipse at 50% 44%, #c69e5033, transparent 46%);
}

.deck-wheel {
  position: relative;
  width: min(100%, 1080px);
  height: 455px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50% 50% 12px 12px / 12% 12% 12px 12px;
  outline: none;
}

.deck-wheel:focus-visible { outline: 1px solid #e6c98c; outline-offset: -5px; }
.deck-wheel.dealt { animation: wheelArrive .32s ease both; }

.wheel-stage {
  position: absolute;
  inset: 0 0 68px;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
  perspective: 1100px;
}

.wheel-stage:active { cursor: grabbing; }

.wheel-dial {
  position: absolute;
  top: 53%;
  left: 50%;
  width: min(93%, 900px);
  height: 340px;
  border: 1px solid #d3b57970;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse at 50% 50%, #b9914d18 0 4%, #0b151a99 5% 38%, transparent 60%),
    repeating-conic-gradient(from -90deg, #cbae7059 0 .18deg, transparent .18deg 4.615deg);
  -webkit-mask-image: radial-gradient(ellipse, transparent 0 67%, #000 68% 70%, transparent 70.5% 85%, #000 86% 89%, transparent 89.5%);
  mask-image: radial-gradient(ellipse, transparent 0 67%, #000 68% 70%, transparent 70.5% 85%, #000 86% 89%, transparent 89.5%);
  pointer-events: none;
}

.wheel-stage::before,
.wheel-stage::after {
  content: "";
  position: absolute;
  top: 53%;
  left: 50%;
  width: min(79%, 760px);
  height: 290px;
  border: 1px solid #c2a57052;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.wheel-stage::after {
  width: min(58%, 560px);
  height: 215px;
  border-color: #d7c08d29;
  box-shadow: 0 0 0 1px #090d12ad, 0 0 50px #bd985b13;
}

.wheel-sigil {
  position: absolute;
  top: 43%;
  left: 50%;
  color: #d5bd8b8a;
  font: 36px/1 Georgia, serif;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 30px #d4b26f65;
  pointer-events: none;
}

.deck-wheel .deck-slot {
  position: absolute;
  top: 47%;
  left: 50%;
  display: block;
  flex: none;
  width: 102px;
  height: 153px;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid #c1a670;
  border-radius: 6px;
  background: #0a1622;
  box-shadow: 0 14px 24px #000a, 0 1px 0 #ead8a37d inset;
  transform: translate(-50%, -50%) translate3d(var(--wheel-x, 0px), var(--wheel-y, 0px), 0) rotate(var(--wheel-rotation, 0deg)) scale(var(--wheel-scale, 1));
  transform-origin: 50% 100%;
  transition: transform .24s cubic-bezier(.18,.78,.23,1), opacity .2s ease, box-shadow .24s ease;
  cursor: pointer;
}

.deck-wheel .deck-slot img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; pointer-events: none; }
.deck-wheel .deck-slot span { left: 0; right: 0; bottom: -24px; color: #c8c2b2; text-align: center; font-size: 10px; text-shadow: 0 1px 3px #000; }
.deck-wheel .deck-slot.is-hidden { opacity: 0; pointer-events: none; visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .deck-wheel .deck-slot:not(.selected):hover { transform: translate(-50%, -50%) translate3d(var(--wheel-x), calc(var(--wheel-y) - 13px), 0) rotate(var(--wheel-rotation)) scale(var(--wheel-scale)); box-shadow: 0 20px 29px #000c, 0 0 18px #d2b77a3c; }
}
.deck-wheel.is-dragging .deck-slot:not(.is-hidden) { transition: none; will-change: transform; }
.deck-wheel.is-dragging .deck-slot { cursor: grabbing; }
.deck-wheel .deck-slot.selected { border-color: #f2d79b; box-shadow: 0 0 0 2px #e0c586, 0 24px 40px #000c, 0 0 36px #d9b67591; }
.deck-wheel .deck-slot.selected span { color: #f4deb0; font-weight: 600; }
.deck-page.is-revealing .deck-slot:not(.selected) { opacity: 0; }
.deck-page.is-revealing .deck-slot.selected {
  transform: translate(-50%,-50%) translate3d(var(--wheel-x),calc(var(--wheel-y) - 44px),0) rotate(0deg) scale(1.25);
  box-shadow: 0 0 0 2px #f4dda4, 0 32px 55px #000d, 0 0 70px #e3c58482;
  transition: transform .41s cubic-bezier(.22,.75,.2,1), box-shadow .41s ease;
}
.deck-page.is-revealing .wheel-controls { opacity: 0; transition: opacity .25s ease; }

.wheel-controls {
  position: absolute;
  right: 0;
  bottom: 13px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  height: 40px;
  color: #d3c09a;
}

.wheel-controls::before,
.wheel-controls::after { content: ""; width: min(15vw, 140px); height: 1px; background: linear-gradient(90deg, transparent, #b49a6a7d); }
.wheel-controls::after { transform: rotate(180deg); }
.wheel-controls button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #bea6735a; border-radius: 50%; background: #081118ca; color: #e0cb99; font: 19px Georgia, serif; }
.wheel-controls button:hover { background: #2e2b20; border-color: #d3b679; }
.wheel-count { font: 13px Georgia, serif; letter-spacing: .13em; font-variant-numeric: tabular-nums; min-width: 65px; }

@keyframes wheelArrive { from { opacity: .78; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 620px) {
  .table-cloth:has(.deck-wheel) { margin-top: 19px; padding-top: 4px; }
  .deck-wheel { height: 385px; }
  .wheel-stage { bottom: 58px; }
  .wheel-dial { width: 490px; max-width: none; height: 290px; }
  .wheel-stage::before { width: 410px; height: 250px; }
  .wheel-stage::after { width: 300px; height: 183px; }
  .wheel-sigil { top: 42%; font-size: 26px; }
  .deck-wheel .deck-slot { top: 49%; width: 89px; height: 134px; }
  .wheel-controls { bottom: 5px; gap: 13px; }
  .wheel-controls::before,.wheel-controls::after { width: 30px; }
  .wheel-count { font-size: 12px; }
  .deck-page .deck-reveal { width: min(90%, 300px); margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .deck-wheel,.deck-wheel .deck-slot { animation: none !important; transition: none !important; filter: none !important; }
}