/* Crazy Time bet simulator extras. Shared chrome lives in tracker.css / crazytime.css. */

.cd-crazytime-sim .cd-sim-table{
  padding:16px 16px 14px;border-radius:18px;
  background:
    radial-gradient(90% 70% at 50% 0%,rgba(78,195,232,.08),transparent 55%),
    radial-gradient(70% 80% at 80% 100%,rgba(116,60,232,.08),transparent 50%),
    linear-gradient(180deg,#141820,#0d1114);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 40px -28px rgba(0,0,0,.9);
}

.cd-crazytime-sim .cd-sim-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
}
.cd-crazytime-sim .cd-sim-row + .cd-sim-row{margin-top:12px}
@media(max-width:720px){
  .cd-crazytime-sim .cd-sim-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}

.cd-crazytime-sim .cd-sim-pad{
  position:relative;min-height:148px;padding:14px 10px 12px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:6px;border-radius:16px;cursor:pointer;overflow:hidden;
  background:
    radial-gradient(80% 70% at 50% 18%,color-mix(in srgb,var(--c) 28%,transparent),transparent 62%),
    linear-gradient(180deg,#16161f,#101018);
  border:2px solid color-mix(in srgb,var(--c) 55%,#2a2a38);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
  transition:transform .12s,border-color .12s,box-shadow .12s;
}
.cd-crazytime-sim .cd-sim-pad:hover{
  transform:translateY(-2px);
  border-color:var(--c);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent),0 10px 24px -16px var(--c);
}
.cd-crazytime-sim .cd-sim-pad.is-on{
  border-color:var(--c);
  background:
    radial-gradient(80% 70% at 50% 18%,color-mix(in srgb,var(--c) 40%,transparent),transparent 64%),
    linear-gradient(180deg,#1a1a26,#101018);
}
.cd-crazytime-sim .cd-sim-pad:active{transform:translateY(0) scale(.98)}
.cd-crazytime-sim .cd-sim-row--bonus .cd-sim-pad{min-height:160px}

.cd-crazytime-sim .cd-sim-pad__ico{
  display:block;height:52px;width:auto;max-width:120px;object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));margin:2px 0 0;
}
.cd-crazytime-sim .cd-sim-row--bonus .cd-sim-pad__ico{height:44px;max-width:140px}
.cd-crazytime-sim .cd-sim-pad__odds{
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--c) 80%,#fff);opacity:.9;
}
.cd-crazytime-sim .cd-sim-pad__pile{
  position:relative;height:34px;min-width:36px;margin-top:auto;
  display:flex;align-items:flex-end;justify-content:center;
}
.cd-crazytime-sim .cd-sim-pad__total{
  font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text);min-height:1.2em;
}
.cd-crazytime-sim .cd-sim-pad:not(.is-on) .cd-sim-pad__total{color:var(--dim);font-weight:600;font-size:11px}
.cd-crazytime-sim .cd-sim-pad__take{
  position:absolute;top:8px;right:8px;z-index:2;
  width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:14px;line-height:1;
}
.cd-crazytime-sim .cd-sim-pad__take:hover{background:rgba(255,84,112,.35);border-color:#ff5470}
.cd-crazytime-sim .cd-sim-pad__more{
  position:absolute;right:-10px;top:0;font-style:normal;font-size:10px;
  font-family:var(--font-mono);color:var(--gold);
}

.cd-crazytime-sim .cd-chip{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.22) 0 8deg, transparent 8deg 18deg),
    var(--chip,#888);
  color:var(--ink,#fff);
  font-family:var(--font-mono);font-weight:800;font-size:13px;letter-spacing:-.02em;
  border:3px dashed var(--rim,#fff);
  box-shadow:
    inset 0 0 0 4px color-mix(in srgb,var(--chip,#888) 70%,#000),
    0 4px 0 rgba(0,0,0,.35),
    0 8px 16px -8px rgba(0,0,0,.7);
}
.cd-crazytime-sim .cd-chip--onpad{
  width:28px;height:28px;font-size:10px;border-width:2px;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),0 2px 0 rgba(0,0,0,.35);
  position:absolute;left:50%;bottom:0;
}
.cd-crazytime-sim .cd-chip--i0{transform:translate(-50%,0)}
.cd-crazytime-sim .cd-chip--i1{transform:translate(calc(-50% + 5px),-6px)}
.cd-crazytime-sim .cd-chip--i2{transform:translate(calc(-50% - 4px),-12px)}
.cd-crazytime-sim .cd-chip--i3{transform:translate(calc(-50% + 3px),-18px)}
.cd-crazytime-sim .cd-chip--i4{transform:translate(calc(-50% - 2px),-24px)}

.cd-crazytime-sim .cd-sim-tray{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);
}
.cd-crazytime-sim .cd-sim-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.cd-crazytime-sim .cd-chip-btn{
  padding:0;border:0;background:transparent;border-radius:50%;cursor:pointer;
  filter:saturate(.75) brightness(.88);
  transition:transform .12s,filter .12s;
}
.cd-crazytime-sim .cd-chip-btn:hover{filter:none;transform:translateY(-3px)}
.cd-crazytime-sim .cd-chip-btn.is-on{
  filter:none;transform:translateY(-5px) scale(1.08);
}
.cd-crazytime-sim .cd-chip-btn.is-on .cd-chip{
  box-shadow:
    inset 0 0 0 4px color-mix(in srgb,var(--chip,#888) 70%,#000),
    0 0 0 3px rgba(255,194,75,.45),
    0 8px 18px -8px rgba(0,0,0,.8);
}
.cd-crazytime-sim .cd-sim-act{
  padding:9px 14px;border-radius:100px;border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
.cd-crazytime-sim .cd-sim-act:hover{color:var(--text);border-color:rgba(255,255,255,.28)}

.cd-crazytime-sim .cd-sim-toolbar{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.cd-crazytime-sim .cd-sim-n{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cd-crazytime-sim .cd-sim-custom{
  display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.06em;font-weight:700;
}
.cd-crazytime-sim .cd-sim-custom input{
  width:88px;padding:7px 10px;border-radius:100px;border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--text);font-family:var(--font-mono);font-size:13px;
}
.cd-crazytime-sim .cd-sim-cost{margin:0;font-size:12.5px;color:var(--muted);font-family:var(--font-mono)}

.cd-crazytime-sim .cd-sim-tape{min-height:72px}
.cd-crazytime-sim .seg.is-hit{
  box-shadow:0 0 0 2px color-mix(in srgb, var(--c) 70%, transparent);
  border-radius:8px;
}

.cd-crazytime-sim .cd-sim-curve{
  width:100%;height:160px;margin-top:16px;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(78,195,232,.05),transparent),var(--bg-2);
  border:1px solid var(--line);
}
.cd-crazytime-sim .cd-sim-curve-cap{
  margin:8px 0 0;font-size:11.5px;color:var(--dim);
}

.cd-simulator .page-hero a.chip:hover{color:var(--text);border-color:rgba(78,195,232,.45)}
.cd-simulator .page-hero .live-dot.stale{background:var(--gold);box-shadow:0 0 0 3px rgba(255,194,75,.16);animation:none}
.cd-simulator .page-hero .live-dot.dead{background:var(--down);box-shadow:0 0 0 3px rgba(255,84,112,.16);animation:none}
.cd-simulator .page-hero .live-dot.beat{animation:beat 2.4s infinite}

@media(max-width:640px){
  .cd-crazytime-sim .cd-sim-pad{min-height:128px;padding:10px 8px}
  .cd-crazytime-sim .cd-sim-row--bonus .cd-sim-pad{min-height:136px}
  .cd-crazytime-sim .cd-sim-pad__ico{height:40px}
  .cd-crazytime-sim .cd-chip{width:40px;height:40px;font-size:12px}
  .cd-crazytime-sim .cd-sim-tray{gap:8px}
}