/* LoadTronic – MAKE BEATS DICE (/make-beats-dice)
   Links Kategorien · Mitte Würfel-Bühne (dunkles Navy wie der Drum-Kit-Spot) · rechts Ergebnisse.
   Recording Mode (html.dice-rec): feste 1920 × 1080-Fläche für OBS, auf das Fenster skaliert. */
:root{
  --card-border: rgba(11,18,32,.08);
  --card-shadow: 0 8px 32px rgba(10,15,25,.06);
  --orange1: #E06853;
  --orange2: #F2BA44;
  --stage-bg: radial-gradient(75% 70% at 50% 46%, #1d4b6e 0%, #13304a 50%, #0d1d30 100%);
}
.dice [hidden], .dice-toast[hidden]{ display: none !important; }
.dice-inner{ padding-bottom: clamp(40px, 6vw, 72px); }

/* ---------- Kopf ---------- */
.dice-head{ text-align: center; padding: 18px 0 22px; }
.dice-back{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; color: var(--muted);
  padding: 6px 12px; border-radius: 999px;
  transition: color .15s ease, background .15s ease;
}
.dice-back:hover{ color: var(--hero2); background: rgba(63,104,174,.08); }
.dice-head h1{
  margin: 6px 0 10px;
  font-size: clamp(36px, 5.4vw, 66px);
  font-weight: 980; letter-spacing: -.02em; line-height: 1;
}
.dice-head h1 span{
  background: linear-gradient(135deg, var(--hero1), var(--hero2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dice-lead{ margin: 0 auto; max-width: 60ch; color: var(--muted); font-size: 16px; font-weight: 600; line-height: 1.55; }

/* ---------- Raster ---------- */
.dice-app{
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 300px;
  grid-template-areas: "cats stage results";
  gap: 18px;
  align-items: stretch;
}
.dice-cats-panel{ grid-area: cats; }
.dice-stage{ grid-area: stage; }
.dice-results-panel{ grid-area: results; }
.dice-rec-brand, .dice-rec-tools, .dice-rec-url{ display: none; }

.dice-panel{
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 22px;
  box-shadow: var(--card-shadow);
  padding: 18px 16px;
  min-width: 0;
}
.dice-panel h2{ margin: 0; font-size: 18px; font-weight: 950; letter-spacing: -.01em; }
.dice-panel-sub{ margin: 4px 0 14px; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.4; }

/* ---------- Kategorien ---------- */
.dice-cats{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }   /* minmax: lange Soundnamen dürfen die Spalte nicht verbreitern */
.dice-cat{
  min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 10px 9px 12px;
  border-radius: 14px; border: 1px solid transparent;
  background: #f6f7f9; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.dice-cat:hover{ background: #eef3f9; }
.dice-cat:active{ transform: scale(.985); }
.dice-cat:focus-visible, .dice-item-btn:focus-visible, .dice-btn:focus-visible, .dice-pick:focus-visible{ outline: 3px solid var(--hero1); outline-offset: 2px; }
.dice-cat.is-active{
  background: linear-gradient(135deg, rgba(32,181,225,.12), rgba(63,104,174,.14));
  border-color: rgba(63,104,174,.38);
}
.dice-cat-main{ display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.dice-cat-name{ font-size: 15px; font-weight: 900; line-height: 1.2; }
.dice-cat-meta{
  margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dice-cat.is-done .dice-cat-meta{ color: #2d5597; }
.dice-cat.is-joker .dice-cat-meta{ color: #c2572f; }
.dice-cat-state{
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 950; color: #fff;
  border: 2px dashed rgba(11,18,32,.16);
}
.dice-cat.is-done .dice-cat-state{ border: 0; background: linear-gradient(135deg, var(--hero1), var(--hero2)); box-shadow: 0 4px 12px rgba(32,120,190,.3); }
.dice-cat.is-joker .dice-cat-state{ background: linear-gradient(135deg, var(--orange1), var(--orange2)); box-shadow: 0 4px 12px rgba(224,104,83,.3); font-size: 13px; }

/* ---------- Bühne ---------- */
.dice-stage{
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  min-height: clamp(580px, 74vh, 720px);
  padding: 22px 22px 24px;
  border-radius: 28px;
  overflow: hidden;
  color: #fff;
  background: var(--stage-bg);
  background-repeat: no-repeat;
  box-shadow: 0 24px 70px rgba(10,30,60,.28);
  isolation: isolate;
}
.dice-stage::after{
  /* Joker: kurzes oranges Aufleuchten der Bühne */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 45%, rgba(242,170,68,.38), rgba(224,104,83,.12) 55%, transparent 80%);
  opacity: 0;
}
.dice-stage.is-joker-fx::after{ animation: diceJokerFlash 2.4s ease-out; }
@keyframes diceJokerFlash{ 0%{ opacity: 0; } 12%{ opacity: 1; } 100%{ opacity: 0; } }

/* Kopf der Bühne: links Platzhalter, Mitte Kategorie, rechts Vollbild – feste Spalten, nichts überlappt */
.dice-stage-top{
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 8px;
  align-items: start; text-align: center; padding-top: 4px;
}
.dice-top-main{ min-width: 0; }
.dice-cat-switch{ display: inline-flex; align-items: center; gap: 10px; max-width: 100%; }
.dice-cat-title{
  margin: 0; min-width: 0;
  font-size: clamp(22px, 2.4vw, 36px); font-weight: 950;
  letter-spacing: .03em; text-transform: uppercase; line-height: 1.05;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dice-arrow{ flex-shrink: 0; }
.dice-full{
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.85); padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .15s ease, color .15s ease;
}
.dice-full svg{ width: 18px; height: 18px; display: block; }
.dice-full:hover{ background: rgba(255,255,255,.16); color: #fff; transform: scale(1.06); }
.dice-full:focus-visible, .dice-arrow:focus-visible{ outline: 3px solid var(--hero1); outline-offset: 2px; }
.dice-arrow{
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07);
  color: #fff; font: inherit; font-size: 22px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 0 3px;
  cursor: pointer; transition: background .15s ease;
}
.dice-arrow:hover{ background: rgba(255,255,255,.16); }
.dice-odds{ margin: 8px 0 0; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.62); text-wrap: balance; }
.dice-odds-part{ white-space: nowrap; }

/* Das Canvas liegt über der ganzen Bühne (der Würfel darf beim Wurf über den Titel fliegen); die Würfelfläche ist .dice-canvas-wrap */
.dice-canvas{ position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; display: block; pointer-events: none; }
.dice-stage > *:not(.dice-canvas){ position: relative; z-index: 1; }
.dice-stage > .dice-canvas-wrap{ z-index: auto; }   /* kein eigener Stapel – „JOKER!“ liegt über dem Würfel */
.dice-canvas-wrap{ flex: 1 1 auto; min-height: 300px; cursor: pointer; }
.dice-stage.is-rolling .dice-canvas-wrap{ cursor: default; }
.dice-stage.is-thud .dice-canvas-wrap{ animation: diceThud .2s ease-out; }
@keyframes diceThud{ 0%{ transform: translateY(0); } 35%{ transform: translateY(3px); } 100%{ transform: translateY(0); } }

.dice-joker-burst{
  position: absolute; left: 0; right: 0; top: 2%; z-index: 4;
  text-align: center; pointer-events: none;
  font-size: clamp(40px, 5vw, 64px); font-weight: 980; letter-spacing: .04em;
  background: linear-gradient(135deg, #FFE7A8, var(--orange2) 45%, var(--orange1));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 18px rgba(224,104,83,.45));
  opacity: 0;
}
.dice-stage.is-joker-fx .dice-joker-burst{ animation: diceJokerText 2.2s cubic-bezier(.2,.9,.2,1); }
@keyframes diceJokerText{
  0%{ opacity: 0; transform: scale(.4) rotate(-8deg); }
  18%{ opacity: 1; transform: scale(1.15) rotate(3deg); }
  30%{ transform: scale(1) rotate(0); }
  75%{ opacity: 1; transform: scale(1); }
  100%{ opacity: 0; transform: scale(1.05) translateY(-10px); }
}

/* alle möglichen Ergebnisse der Kategorie – das gewürfelte leuchtet */
.dice-chips{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.dice-chip{
  min-width: 34px; height: 28px; padding: 0 8px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.72); font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums;
  transition: transform .3s cubic-bezier(.2,.9,.2,1), background .3s ease, color .3s ease, box-shadow .3s ease;
}
.dice-chip--joker{ color: var(--orange2); border-color: rgba(242,186,68,.35); }
.dice-chip.is-hit{ background: #fff; color: #0b1220; transform: scale(1.14); box-shadow: 0 0 0 4px rgba(32,181,225,.3), 0 6px 18px rgba(32,181,225,.45); }
.dice-chip--joker.is-hit{ background: linear-gradient(135deg, var(--orange1), var(--orange2)); color: #fff; border-color: transparent; box-shadow: 0 0 0 4px rgba(242,186,68,.3), 0 6px 18px rgba(242,140,68,.5); }
.dice-chip.is-picked{ border-color: var(--orange2); color: #fff; background: rgba(242,186,68,.22); }

.dice-result{ text-align: center; margin-top: 14px; min-height: 58px; transition: opacity .2s ease; }
.dice-result.is-hidden{ opacity: 0; }
.dice-result.is-reveal{ animation: diceReveal .55s cubic-bezier(.2,.9,.2,1); }
@keyframes diceReveal{ 0%{ opacity: 0; transform: translateY(12px) scale(.92); } 100%{ opacity: 1; transform: none; } }
.dice-result-kicker{
  display: block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.dice-result-main{ display: block; margin-top: 4px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 950; letter-spacing: -.01em; line-height: 1.15; }
.dice-result-main--wait{ color: rgba(255,255,255,.42); }
.dice-result.is-joker .dice-result-main, .dice-result.is-joker .dice-result-kicker{ color: #FFD48A; }

/* Joker: Sound selbst wählen */
.dice-joker{
  margin: 12px auto 0; max-width: 560px; width: 100%;
  padding: 12px 14px 14px; border-radius: 18px;
  background: rgba(242,186,68,.1); border: 1px solid rgba(242,186,68,.42);
  text-align: center;
  animation: diceReveal .45s cubic-bezier(.2,.9,.2,1);
}
.dice-stage.has-picker .dice-result{ display: none; }   /* die Auswahl sagt schon „Pick any …“ */
html.dice-rec .dice-stage.has-picker .dice-chips{ display: none; }
.dice-joker-title{ margin: 0 0 10px; font-size: 14px; font-weight: 900; color: #FFD48A; }
.dice-joker-list{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.dice-pick{
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08);
  color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.dice-pick b{ font-weight: 950; color: #FFD48A; }
.dice-pick:hover{ background: rgba(255,255,255,.18); }
.dice-pick:active{ transform: scale(.96); }
.dice-pick.is-on{ background: linear-gradient(135deg, var(--orange1), var(--orange2)); border-color: transparent; }
.dice-pick.is-on b{ color: #fff; }
.dice-joker-change{
  display: block; margin: 6px auto 0; padding: 4px 8px;
  background: none; border: 0; color: rgba(255,255,255,.62);
  font: inherit; font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

.dice-roll-row{ display: flex; justify-content: center; margin-top: 16px; }
.dice-roll{
  min-width: 260px; height: 58px; padding: 0 30px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(135deg, var(--hero1), var(--hero2));
  color: #fff; font: inherit; font-size: 17px; font-weight: 950; letter-spacing: .08em;
  box-shadow: 0 14px 40px rgba(32,181,225,.35), inset 0 1px 0 rgba(255,255,255,.35);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
.dice-roll:hover:not(:disabled){ transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 18px 48px rgba(32,181,225,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.dice-roll:active:not(:disabled){ transform: scale(.97); }
.dice-roll:disabled{ cursor: default; opacity: .7; }
.dice-roll.is-next, .dice-roll.is-done{
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24);
  box-shadow: none; letter-spacing: .02em;
}
.dice-roll.is-next:hover{ background: rgba(255,255,255,.18); box-shadow: none; }
.dice-roll.is-done{ opacity: 1; color: #9be7c0; }

/* ---------- Ergebnisse ---------- */
.dice-res-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dice-progress-num{ font-size: 13px; font-weight: 900; color: var(--hero2); font-variant-numeric: tabular-nums; }
.dice-progress{ height: 6px; margin-top: 10px; border-radius: 999px; background: rgba(11,18,32,.07); overflow: hidden; }
.dice-progress span{ display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--hero1), var(--hero2)); transition: width .5s cubic-bezier(.2,.9,.2,1); }

.dice-shared{
  margin-top: 14px; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(32,181,225,.1), rgba(63,104,174,.12));
  border: 1px solid rgba(63,104,174,.25);
}
.dice-shared strong{ font-size: 14px; font-weight: 900; }
.dice-shared p{ margin: 4px 0 10px; font-size: 13px; color: var(--muted); font-weight: 600; line-height: 1.45; }
.dice-shared-btns{ display: grid; gap: 6px; }

.dice-list{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.dice-empty{
  padding: 16px 14px; border-radius: 14px; border: 2px dashed rgba(11,18,32,.1);
  color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.45; text-align: center;
}
.dice-item-btn{
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 14px; border: 1px solid transparent;
  background: #f6f7f9; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.dice-item-btn:hover{ background: #eef3f9; }
.dice-item.is-active .dice-item-btn{ border-color: rgba(63,104,174,.3); background: rgba(63,104,174,.07); }
.dice-item.is-new .dice-item-btn{ animation: diceItemIn .6s cubic-bezier(.2,.9,.2,1); }
@keyframes diceItemIn{
  0%{ opacity: 0; transform: translateX(14px); box-shadow: 0 0 0 0 rgba(32,181,225,0); }
  40%{ opacity: 1; transform: none; box-shadow: 0 0 0 4px rgba(32,181,225,.28); }
  100%{ box-shadow: 0 0 0 0 rgba(32,181,225,0); }
}
.dice-item-n{
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(11,18,32,.07); font-size: 11px; font-weight: 900; color: rgba(11,18,32,.6);
}
.dice-item-txt{ display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dice-item-cat{ font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dice-item-sound{ font-size: 14px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.dice-item-sound b{ color: var(--hero2); font-weight: 950; }
.dice-joker-pill{
  flex-shrink: 0; padding: 4px 8px; border-radius: 999px;
  background: linear-gradient(135deg, var(--orange1), var(--orange2)); color: #fff;
  font-size: 10px; font-weight: 900; letter-spacing: .04em;
}

.dice-actions{ display: grid; gap: 8px; margin-top: 16px; }
.dice-btn{
  min-height: 44px; padding: 0 14px; border-radius: 12px;
  border: 1px solid rgba(11,18,32,.12); background: #fff; color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 900; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;
}
.dice-btn:hover:not(:disabled){ background: #f3f6fa; }
.dice-btn:active:not(:disabled){ transform: scale(.98); }
.dice-btn:disabled{ opacity: .45; cursor: default; }
.dice-btn--primary{ border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--hero1), var(--hero2)); box-shadow: 0 8px 22px rgba(32,140,200,.22); }
.dice-btn--primary:hover:not(:disabled){ background: linear-gradient(135deg, var(--hero1), var(--hero2)); filter: brightness(1.06); }
.dice-btn.is-confirm{ background: #fff2ee; border-color: var(--orange1); color: #b9442c; }

.dice-toast{
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 2000;
  transform: translate(-50%, 12px); opacity: 0;
  padding: 12px 18px; border-radius: 999px;
  background: #0b1220; color: #fff; font-size: 14px; font-weight: 800;
  box-shadow: 0 14px 40px rgba(10,15,25,.3);
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.9,.2,1);
}
.dice-toast.is-in{ opacity: 1; transform: translate(-50%, 0); }
.dice-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Tablet ---------- */
@media (max-width: 1099px){
  .dice-app{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "stage stage" "cats results";
  }
}
/* ---------- Handy ---------- */
@media (max-width: 740px){
  .dice-head{ padding: 4px 0 16px; }
  .dice-lead{ font-size: 15px; }
  .dice-app{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "cats" "results"; gap: 14px; }
  .dice-stage{ min-height: 0; padding: 18px 14px 18px; border-radius: 24px; }
  .dice-full{ display: none; }   /* 16:9-Vollbild ist für Computer/OBS gedacht */
  .dice-stage-top{ grid-template-columns: 0 minmax(0, 1fr) 0; gap: 0; }
  .dice-canvas-wrap{ flex: 0 0 auto; height: 280px; min-height: 0; }
  .dice-roll{ width: 100%; min-width: 0; }
  .dice-cats{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dice-cat{ padding: 8px 8px 8px 10px; gap: 6px; }
  .dice-cat-name{ font-size: 14px; }
  .dice-cat-meta{ font-size: 11px; }
  .dice-cat-state{ width: 26px; height: 26px; font-size: 10px; }
  .dice-joker-burst{ top: 4%; }
}
@media (max-width: 430px){
  /* lange Namen („PERCUSSIONS“, „OPEN HI-HATS“) passen auch auf 320 px ungekürzt */
  .dice-cat-switch{ gap: 6px; }
  .dice-cat-title{ font-size: min(26px, 6.2vw); letter-spacing: .01em; }
  .dice-arrow{ width: 32px; height: 32px; }
}
@media (max-width: 374px){
  .dice-cats{ grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Recording Mode: 1920 × 1080 für OBS ---------- */
html.dice-rec, html.dice-rec body{ overflow: hidden; background: #0d1d30; }
html.dice-rec .pillwrap, html.dice-rec .mob-nav-wrap, html.dice-rec .dice-head,
html.dice-rec main.dice > footer, html.dice-rec .dice-full, html.dice-rec .dice-actions,
html.dice-rec .dice-panel-sub, html.dice-rec .dice-shared, html.dice-rec .dice-joker-change{ display: none !important; }
html.dice-rec .dice-frame{ position: fixed; inset: 0; z-index: 50; background: var(--stage-bg); background-repeat: no-repeat; }
html.dice-rec:not(.dice-rec-awake){ cursor: none; }
html.dice-rec .dice-app{
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--rec-scale, 1));
  grid-template-columns: 440px minmax(0, 1fr) 440px;
  grid-template-areas: "cats stage results";
  gap: 44px;
  padding: 148px 64px 96px;
  color: #fff;
}
html.dice-rec .dice-rec-brand{
  display: flex; align-items: center; gap: 18px;
  position: absolute; left: 64px; top: 44px;
}
html.dice-rec .dice-rec-brand img{ width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 8px 24px rgba(32,181,225,.3); }
html.dice-rec .dice-rec-brand strong{ display: block; font-size: 36px; font-weight: 980; letter-spacing: .03em; line-height: 1.05; }
html.dice-rec .dice-rec-brand span{ display: block; margin-top: 4px; font-size: 17px; font-weight: 700; color: rgba(255,255,255,.58); }
html.dice-rec .dice-rec-tools{
  display: flex; gap: 10px; position: absolute; right: 64px; top: 52px;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
html.dice-rec.dice-rec-awake .dice-rec-tools{ opacity: 1; pointer-events: auto; }
.dice-rec-tool{
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1);
  color: #fff; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
}
.dice-rec-tool:hover{ background: rgba(255,255,255,.2); }
.dice-rec-tool.is-confirm{ background: rgba(224,104,83,.85); border-color: transparent; }
html.dice-rec .dice-rec-url{
  display: block; position: absolute; left: 0; right: 0; bottom: 36px;
  text-align: center; font-size: 20px; font-weight: 800; letter-spacing: .04em; color: rgba(255,255,255,.45);
}

html.dice-rec .dice-panel{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: none; color: #fff;
  border-radius: 28px; padding: 26px 24px;
}
html.dice-rec .dice-panel h2{ font-size: 26px; margin-bottom: 18px; }
html.dice-rec .dice-res-head h2{ margin-bottom: 0; }
html.dice-rec .dice-cats{ gap: 8px; }
html.dice-rec .dice-cat{ padding: 10px 12px 10px 18px; border-radius: 16px; background: rgba(255,255,255,.05); color: #fff; }
html.dice-rec .dice-cat:hover{ background: rgba(255,255,255,.09); }
html.dice-rec .dice-cat.is-active{ background: rgba(32,181,225,.2); border-color: rgba(32,181,225,.7); }
html.dice-rec .dice-cat-name{ font-size: 22px; }
html.dice-rec .dice-cat-meta{ font-size: 15px; color: rgba(255,255,255,.55); }
html.dice-rec .dice-cat.is-done .dice-cat-meta{ color: #8fdcf6; }
html.dice-rec .dice-cat.is-joker .dice-cat-meta{ color: #FFD48A; }
html.dice-rec .dice-cat-state{ width: 40px; height: 40px; font-size: 15px; border-color: rgba(255,255,255,.22); }
html.dice-rec .dice-cat.is-joker .dice-cat-state{ font-size: 18px; }

html.dice-rec .dice-stage{ min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
html.dice-rec .dice-stage::after{ inset: -150px -40px -100px; }
html.dice-rec .dice-stage-top{ grid-template-columns: 52px minmax(0, 1fr) 52px; }
html.dice-rec .dice-cat-title{ font-size: 64px; }
html.dice-rec .dice-arrow{ width: 52px; height: 52px; font-size: 32px; }
html.dice-rec .dice-odds{ font-size: 20px; margin-top: 10px; }
html.dice-rec .dice-chips{ gap: 10px; margin-top: 8px; }
html.dice-rec .dice-chip{ min-width: 52px; height: 42px; font-size: 18px; padding: 0 12px; }
html.dice-rec .dice-result{ min-height: 100px; margin-top: 20px; }
html.dice-rec .dice-result-kicker{ font-size: 18px; }
html.dice-rec .dice-result-main{ font-size: 50px; margin-top: 6px; }
html.dice-rec .dice-canvas-wrap{ min-height: 200px; }
html.dice-rec .dice-joker{ max-width: 860px; padding: 18px 20px 20px; }
html.dice-rec .dice-joker-title{ font-size: 22px; margin-bottom: 14px; }
html.dice-rec .dice-pick{ font-size: 18px; padding: 10px 16px; }
html.dice-rec .dice-roll-row{ margin-top: 24px; }
html.dice-rec .dice-roll{ min-width: 440px; height: 84px; font-size: 27px; }
html.dice-rec .dice-joker-burst{ font-size: 110px; top: 4%; }

html.dice-rec .dice-progress{ background: rgba(255,255,255,.1); margin-top: 14px; }
html.dice-rec .dice-progress-num{ font-size: 20px; color: #8fdcf6; }
html.dice-rec .dice-list{ gap: 8px; margin-top: 20px; }
html.dice-rec .dice-empty{ border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.55); font-size: 19px; padding: 22px 18px; }
html.dice-rec .dice-item-btn{ padding: 9px 14px; gap: 14px; background: rgba(255,255,255,.05); color: #fff; border-radius: 16px; }
html.dice-rec .dice-item.is-active .dice-item-btn{ background: rgba(32,181,225,.16); border-color: rgba(32,181,225,.5); }
html.dice-rec .dice-item-n{ width: 32px; height: 32px; font-size: 15px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); }
html.dice-rec .dice-item-cat{ font-size: 13px; color: rgba(255,255,255,.55); }
html.dice-rec .dice-item-sound{ font-size: 21px; }
html.dice-rec .dice-item-sound b{ color: #8fdcf6; }
html.dice-rec .dice-joker-pill{ font-size: 13px; padding: 5px 10px; }

@media (prefers-reduced-motion: reduce){
  .dice-stage.is-joker-fx::after, .dice-stage.is-thud .dice-canvas-wrap, .dice-item.is-new .dice-item-btn{ animation: none; }
  .dice-result.is-reveal, .dice-joker{ animation-duration: .01ms; }
  .dice-stage.is-joker-fx .dice-joker-burst{ animation: diceJokerFade 1.6s linear; }
  @keyframes diceJokerFade{ 0%, 80%{ opacity: 1; } 100%{ opacity: 0; } }
}