/* Dhemetra Roulette — overrides (keeps the same base look) */

.roulette-hero{ margin-top: 18px; }

.notice-crude{
  background: linear-gradient(180deg, rgba(201,168,106,.10), rgba(0,0,0,0));
  border: 1px solid rgba(201,168,106,.28);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: var(--shadow);
}
.notice-crude strong{ color: var(--accent); }

.form-row{ display:grid; grid-template-columns: 1fr; gap:10px; }
.form-row.inline{ grid-template-columns: 1fr 1fr; }
@media (max-width: 520px){ .form-row.inline{ grid-template-columns: 1fr; } }

.input, .select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(201,168,106,.32);
  background: rgba(0,0,0,.20);
  color: var(--ink);
  font-family: inherit;
}
.input::placeholder{ color: rgba(239,230,215,.55); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(201,168,106,.36);
  background: linear-gradient(180deg, rgba(201,168,106,.16), rgba(0,0,0,.08));
  color: var(--ink);
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
.btn:hover{ border-color: rgba(201,168,106,.55); }
.btn:active{ transform: translateY(1px); }
.btn.primary{
  background: linear-gradient(180deg, rgba(231,214,176,.22), rgba(201,168,106,.14));
}
.btn.danger{ border-color: rgba(220,120,120,.40); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

.badge{
  display:inline-flex; align-items:center; gap:8px;
  border: 1px solid rgba(201,168,106,.30);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(0,0,0,.20);
}
.badge b{ color: var(--accent); }

/* Money emphasis (clearer gold count) */
.money-cards{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin: 10px 0 12px; }
.money-card{
  border: 1px solid rgba(201,168,106,.30);
  border-radius: 16px;
  padding: 12px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(201,168,106,.06));
  box-shadow: 0 10px 22px rgba(0,0,0,.42);
}
.money-card.is-table{ border-color: rgba(231,214,176,.48); box-shadow: 0 12px 26px rgba(0,0,0,.50), 0 0 22px rgba(201,168,106,.14); }
.money-card.is-mini{ grid-column: 1 / -1; padding: 10px 12px; background: rgba(0,0,0,.14); }
.money-label{ font: 800 12px "Cinzel", serif; letter-spacing:.18em; text-transform:uppercase; color: var(--muted); }
.money-value{ margin-top: 6px; display:flex; align-items:baseline; gap:8px; }
.money-value span{ font: 900 30px "Cinzel", serif; letter-spacing:.02em; color: var(--accent); text-shadow: 0 2px 0 #000, 0 0 16px rgba(201,168,106,.24); }
.money-value small{ color: rgba(239,230,215,.78); font-weight:700; }
@media (max-width: 560px){
  .money-cards{ grid-template-columns: 1fr; }
  .money-card.is-mini{ grid-column: auto; }
  .money-value span{ font-size: 28px; }
}

.roulette-layout{ display:grid; gap:14px; grid-template-columns: 1.15fr .85fr; align-items:start; }
@media (max-width: 980px){ .roulette-layout{ grid-template-columns: 1fr; } }

.wheel-wrap{
  position:relative;
  aspect-ratio: 1/1;
  max-width: 520px;
  margin: 8px auto 0;
}

/* Visual landing indicator (segment highlight + die value) */
.wheel-highlight{
  position:absolute; inset:0;
  z-index: 4;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  --hl: rgba(231,214,176,.28);
  /* highlight the segment centered on the pointer (36deg wide) */
  /* Start offset aligns segment 0 center to the pointer (top). */
  background: conic-gradient(from -18deg, var(--hl) 0 36deg, rgba(0,0,0,0) 36deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 56%, #000 58% 100%);
  mask: radial-gradient(circle, transparent 0 56%, #000 58% 100%);
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 22px rgba(231,214,176,.25));
  transition: opacity .15s ease;
}
.wheel-highlight.on{ opacity: 1; animation: wedgePulse .95s ease-out 1; }
@keyframes wedgePulse{
  0%{ filter: drop-shadow(0 0 0 rgba(231,214,176,0)); }
  35%{ filter: drop-shadow(0 0 26px rgba(231,214,176,.35)); }
  100%{ filter: drop-shadow(0 0 12px rgba(231,214,176,.20)); }
}

.die-badge{
  position:absolute;
  z-index: 5;
  top: 34px; left: 50%; transform: translateX(-50%);
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(201,168,106,.55);
  background: rgba(0,0,0,.55);
  box-shadow: 0 14px 30px rgba(0,0,0,.60);
  pointer-events:none;
  opacity:0;
}
.die-badge span{ font: 900 14px "Cinzel", serif; letter-spacing:.12em; text-transform:uppercase; color: var(--accent); }
.die-badge.on{ opacity: 1; animation: badgePop .28s ease-out 1; }
@keyframes badgePop{
  from{ transform: translateX(-50%) translateY(-6px) scale(.96); opacity:0; }
  to{ transform: translateX(-50%) translateY(0) scale(1); opacity:1; }
}

.wheel{
  position: relative;
  z-index: 1;
  width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid rgba(201,168,106,.40);
  box-shadow: 0 18px 55px rgba(0,0,0,.65), 0 0 25px rgba(201,168,106,.18);
  /* Segment 0 (rosso) is centered under the pointer when rotation = 0. */
  background: conic-gradient(from -18deg,
    #8f1d1d 0 36deg,
    #1e4c8a 36deg 72deg,
    #8f1d1d 72deg 108deg,
    #1e4c8a 108deg 144deg,
    #8f1d1d 144deg 180deg,
    #1e4c8a 180deg 216deg,
    #8f1d1d 216deg 252deg,
    #1e4c8a 252deg 288deg,
    #8f1d1d 288deg 324deg,
    #1e4c8a 324deg 360deg
  );
  transform: rotate(0deg);
  transition: transform 4.2s cubic-bezier(.09,.82,.16,1);
  will-change: transform;
}

.wheel::after{
  content:"";
  position:absolute; inset: 12%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 0 22px rgba(0,0,0,.8);
}

.wheel-hub{
  position:absolute; inset: 40%;
  z-index: 3;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), rgba(0,0,0,.25)),
              radial-gradient(circle at 50% 60%, rgba(201,168,106,.22), rgba(0,0,0,.10));
  border: 1px solid rgba(201,168,106,.45);
  box-shadow: inset 0 0 18px rgba(0,0,0,.75);
}

.pointer{
  position:absolute;
  top: -4px; left: 50%; transform: translateX(-50%);
  z-index: 6;
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 28px solid rgba(201,168,106,.92);
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.55));
}

.controls{
  display:grid; gap:10px;
}

.color-pills{ display:flex; gap:10px; flex-wrap:wrap; }
.color-pill{
  padding: 10px 12px; border-radius: 999px;
  border: 1px solid rgba(201,168,106,.22);
  background: rgba(0,0,0,.20);
  cursor:pointer;
  font: 900 12px "Cinzel", serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(239,230,215,.92);
  text-shadow: 0 1px 0 #000;
}
.color-pill[data-color="rosso"]{
  background: linear-gradient(180deg, rgba(143,29,29,.92), rgba(95,18,18,.78));
  border-color: rgba(143,29,29,.70);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 10px 22px rgba(0,0,0,.45);
}
 
.color-pill[data-color="blu"]{
  background: linear-gradient(180deg, rgba(30,76,138,.92), rgba(16,38,74,.82));
  border-color: rgba(30,76,138,.80);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), 0 10px 22px rgba(0,0,0,.45);
}
.color-pill:hover{ filter: brightness(1.05); }
.color-pill:active{ transform: translateY(1px); }
.color-pill.active{
  outline: 2px solid rgba(231,214,176,.80);
  box-shadow: 0 0 0 3px rgba(0,0,0,.28) inset, 0 0 22px rgba(201,168,106,.26);
}

.die-card{
  border: 1px solid rgba(201,168,106,.30);
  border-radius: 18px;
  padding: 14px;
  background: rgba(0,0,0,.18);
}

.result{
  border-radius: 18px;
  border: 1px solid rgba(201,168,106,.24);
  background: rgba(0,0,0,.14);
  padding: 14px;
  min-height: 88px;
}

.result .big{
  font-family: "Cinzel", serif;
  font-weight: 900;
  letter-spacing: .06em;
}

.shake{
  animation: shake .35s ease-in-out 1;
}
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  50%{ transform:translateX(6px); }
  75%{ transform:translateX(-4px); }
}

.flash-win{
  animation: flashWin .9s ease-out 1;
}
@keyframes flashWin{
  0%{ box-shadow: 0 0 0 rgba(201,168,106,0); }
  30%{ box-shadow: 0 0 40px rgba(231,214,176,.35); }
  100%{ box-shadow: 0 0 0 rgba(201,168,106,0); }
}

.table-events{ margin-top: 8px; }
.table-events table{ width:100%; border-collapse: collapse; overflow:hidden; border-radius: 14px; }
.table-events th, .table-events td{
  padding: 10px 10px; text-align:left;
  border-bottom: 1px solid rgba(255,255,255,.06);
  vertical-align: top;
}
.table-events th{ font: 700 12px "Cinzel", serif; letter-spacing:.18em; text-transform:uppercase; color: var(--muted); }
.table-events td small{ color: rgba(239,230,215,.65); }
.delta-pos{ color: #d7bc85; }
.delta-neg{ color: #d08a8a; }

/* Hall of Fame */
.hof{ margin-top: 12px; }
.hof-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; align-items:start; }
@media (max-width: 980px){ .hof-grid{ grid-template-columns: 1fr; } }
.hof-sub{
  margin: 2px 0 10px;
  font: 900 12px "Cinzel", serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.hof-table{ width:100%; border-collapse: collapse; overflow:hidden; border-radius: 14px; }
.hof-table th, .hof-table td{
  padding: 10px 10px; text-align:left;
  border-bottom: 1px solid rgba(255,255,255,.06);
  vertical-align: top;
}
.hof-table th{ font: 700 12px "Cinzel", serif; letter-spacing:.18em; text-transform:uppercase; color: var(--muted); }
.hof-table td small{ color: rgba(239,230,215,.65); }

.sound-toggles{ display:flex; gap:10px; flex-wrap:wrap; }
.toggle{
  display:flex; align-items:center; gap:8px;
  border: 1px solid rgba(201,168,106,.25);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(0,0,0,.14);
}
.toggle input{ accent-color: var(--gold); }

.hidden{display:none !important;}