/* ==========================================================================
   Crazy Time bet simulator — redesign on the tracker's system.
   Loads after crazytime-tracker.css (.ctx tokens, head, tickets, cards,
   range tabs, tables, note, tooltip) and adds only the simulator pieces,
   prefixed csx- and scoped under .csx.
   ========================================================================== */

/* ---------- board: bet | result ---------- */
.csx-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:26px}
.csx-bet,.csx-result{padding:16px 18px 16px;display:flex;flex-direction:column;gap:14px;min-width:0}
.csx-result{background:linear-gradient(180deg,var(--card-2),var(--card));border-color:var(--hair-2);box-shadow:0 0 0 1px rgba(123,77,242,.12),0 24px 60px -30px rgba(79,150,242,.45)}
.csx-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.csx-card-head h2{font-size:17px;font-weight:700}
.csx-card-head p{margin-top:2px;font-size:13px;color:var(--ink-3);max-width:52ch}
.csx-cost{font-size:13px;color:var(--ink-3);white-space:nowrap;padding:6px 10px;border-radius:999px;background:var(--card-2);border:1px solid var(--hair)}
.csx-cost b{color:#fff;font-weight:700}

/* pads */
.csx-pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.csx-pad{--c:#8A90A8;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:14px 8px 12px;border-radius:14px;text-align:center;
	background:radial-gradient(90% 70% at 50% 0%,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%),var(--card-2);
	border:1px solid color-mix(in srgb,var(--c) 30%,var(--hair));transition:transform .16s,border-color .16s,box-shadow .16s;cursor:pointer}
.csx-pad:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c) 60%,transparent)}
.csx-pad:focus-visible{outline:2px solid var(--cyan,#4FC7EA);outline-offset:2px}
.csx-pad.is-on{border-color:color-mix(in srgb,var(--c) 75%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent),0 16px 34px -20px color-mix(in srgb,var(--c) 80%,transparent)}
.csx-pad .ct-ticket{cursor:pointer}
.csx-pad-name{font-size:14px;font-weight:700;color:#fff;line-height:1.1;margin-top:2px}
.csx-pad-pays{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.csx-pad-stake{margin-top:4px;min-height:34px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px}
.csx-pad-stake b{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.csx-pad-empty{font-size:12px;color:var(--ink-4)}
.csx-pad-pile{position:relative;height:22px;width:60px;margin-top:10px}
.csx-pad-pile em{position:absolute;right:-4px;top:-2px;font-style:normal;font-size:10.5px;font-weight:700;color:var(--ink-2)}
.csx-chip-pad{position:absolute;left:50%;width:22px;height:22px;font-size:9px;transform:translateX(-50%)}
.csx-chip-i0{bottom:0}.csx-chip-i1{bottom:4px}.csx-chip-i2{bottom:8px}.csx-chip-i3{bottom:12px}
.csx-pad-take{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:15px;line-height:1;font-weight:700;color:#fff;background:rgba(0,0,0,.45);border:1px solid var(--hair-2);opacity:.75;transition:opacity .16s,background .16s;z-index:2}
.csx-pad:hover .csx-pad-take,.csx-pad-take:hover{opacity:1;background:var(--down,#FF5C7A);border-color:transparent}

/* chips */
.csx-chip{--chip:#6A6A85;--ink:#fff;--rim:#9A9AB4;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--chip);color:var(--ink);font-size:12.5px;font-weight:800;font-style:normal;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
	box-shadow:inset 0 0 0 3px var(--chip),inset 0 0 0 4.5px var(--rim),0 2px 4px rgba(0,0,0,.45);border:2px dashed var(--rim)}
.csx-tray{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--hair)}
.csx-chips{display:flex;gap:6px;flex-wrap:wrap}
.csx-chip-btn{border-radius:50%;padding:2px;transition:transform .14s}
.csx-chip-btn:hover{transform:translateY(-2px)}
.csx-chip-btn.is-on{box-shadow:0 0 0 2px var(--card),0 0 0 4px #fff;transform:translateY(-3px)}
.csx-chip-btn:focus-visible{outline:2px solid var(--cyan,#4FC7EA);outline-offset:2px}
.csx-tray-acts{display:flex;gap:6px}
.csx-tray-acts .ct-btn[disabled]{opacity:.45;cursor:default;transform:none}
.csx-presets{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.csx-presets .ct-lbl{margin-right:4px}
.csx-presets button{padding:6px 11px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-2);background:var(--card-2);border:1px solid var(--hair);transition:background .14s,color .14s,border-color .14s}
.csx-presets button:hover{color:#fff;border-color:var(--hair-2);background:var(--surface-3,#293046)}

/* result */
.csx-window{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;min-width:0;max-width:100%}
.csx-window .ct-range{flex-wrap:wrap;flex:0 1 auto;max-width:100%}
.csx-window .ct-range button{padding:5px 10px;font-size:13px}
.csx-custom{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3)}
.csx-custom input{width:64px;padding:6px 9px;border-radius:999px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);background:var(--card-2);border:1px solid var(--hair);text-align:center;font-variant-numeric:tabular-nums}
.csx-custom input.is-on{border-color:var(--cyan,#4FC7EA);color:#fff}
.csx-custom input:focus-visible{outline:2px solid var(--cyan,#4FC7EA);outline-offset:1px}
.csx-hero{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:14px 16px 12px;border-radius:12px;background:var(--card);border:1px solid var(--hair)}
.csx-hero b{font-family:var(--font-display,"Sora",sans-serif);font-size:clamp(34px,3vw,44px);font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.csx-hero span{font-size:13.5px;color:var(--ink-3);min-width:0}
.csx-hero span b{font-family:inherit;font-size:inherit;letter-spacing:0;font-weight:700;color:#fff}
.csx-hero.is-up{border-color:rgba(46,212,127,.4);background:linear-gradient(135deg,rgba(46,212,127,.12),transparent 60%),var(--card)}
.csx-hero.is-up>b{color:var(--grn)}
.csx-hero.is-down{border-color:rgba(255,92,122,.4);background:linear-gradient(135deg,rgba(255,92,122,.12),transparent 60%),var(--card)}
.csx-hero.is-down>b{color:#FF7A94}
.csx-hero.is-empty>b{color:var(--ink-3)}
.csx-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.csx-kpi{display:flex;flex-direction:column;min-width:0;padding:10px 12px;border-radius:10px;background:var(--card);border:1px solid var(--hair)}
.csx-kpi b{font-size:22px;font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csx-kpi b.c-up{color:var(--grn)}
.csx-kpi b.c-down{color:#FF7A94}
.csx-kpi span{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-top:3px}
.csx-kpi small{font-size:11.5px;color:var(--ink-4);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csx-curve-wrap{margin-top:auto;display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.csx-curve{display:block;width:100%;height:auto;flex:1 1 auto;min-height:150px;aspect-ratio:640/150;border-radius:10px;background:var(--card);border:1px solid var(--hair)}
.csx-curve .grid{stroke:rgba(255,255,255,.22);stroke-dasharray:3 4}
.csx-curve .area{opacity:.16}
.csx-curve .line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.csx-curve .ax{font-size:10.5px;fill:var(--ink-4);font-family:var(--font-body,Inter,sans-serif)}
.csx-curve .empty{font-size:12.5px;fill:var(--ink-4);font-family:var(--font-body,Inter,sans-serif)}
.csx-cap{margin-top:6px;font-size:12px;color:var(--ink-4)}

/* ranged results — Cash Hunt / Crazy Time pay by the player's pick, so the
   hero, KPIs, curve and spot table read worst pick → best pick */
.csx-hero.is-range>b{font-size:clamp(24px,2.1vw,34px)}
.csx-hero.is-range>i{font-style:normal;font-size:13px;font-weight:600;color:var(--ink-4);letter-spacing:.02em}
.csx-hero>b.r-up{color:var(--grn)}
.csx-hero>b.r-down{color:#FF7A94}
.csx-hero.is-mixed{border-color:rgba(245,196,81,.35);background:linear-gradient(135deg,rgba(245,196,81,.07),transparent 60%),var(--card)}
.csx-kpi b.is-range{font-size:16px;white-space:normal;line-height:1.3}
.csx-curve .band{fill:#4FC7EA;opacity:.12;stroke:none}
.csx-plrange{display:inline-flex;flex-direction:column;align-items:flex-end;font-size:13px;line-height:1.35}
.csx-plrange .up{color:var(--grn)}
.csx-plrange .down{color:#FF7A94}
.csx-plrange span+span::before{content:"to ";font-weight:600;font-size:10.5px;color:var(--ink-4)}

/* ---------- tape + spot table ---------- */
.csx-cols{align-items:start}
.csx-tapecard{overflow:hidden}
.csx-tape{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:9px 7px;padding:14px 16px 16px}
.csx-tape .ct-ticket{width:100%;cursor:default}
.csx-tape .ct-ticket.is-hit{box-shadow:0 0 0 2px rgba(245,196,81,.85),0 8px 18px -10px rgba(245,196,81,.8)}
.csx-tape .ct-ticket.is-hit .cap{background:linear-gradient(135deg,var(--gold,#F5C451),#FF9F43);color:#0B0B13;border-color:transparent}
.csx-tape .ct-ticket.is-new{animation:csxPop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes csxPop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
.csx-spotcard{overflow:hidden}
.csx-spots td,.csx-spots th{padding-left:10px;padding-right:10px}
.csx-spots{table-layout:auto}
.csx-spots tr.is-off td{color:var(--ink-4)}
.csx-spots tr.is-on td:first-child{box-shadow:inset 3px 0 0 var(--c)}
.csx-spots tr.is-on td{color:var(--ink)}
.csx-spots td.up b{color:var(--grn)}
.csx-spots td.down b{color:#FF7A94}
.csx-spot{display:inline-flex;align-items:center;gap:9px}
.csx-spot b{font-weight:600;color:#fff}
.csx-spots tr.is-off .csx-spot b{color:var(--ink-3)}
.csx-spots tr.is-off .ct-ticket{opacity:.7}

/* ---------- responsive ---------- */
@media (max-width:1240px){
	.csx-cols{grid-template-columns:1fr}
}
@media (max-width:1040px){
	.csx-board{grid-template-columns:1fr}
	.csx-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
	.csx-curve{flex:0 0 auto}
}
@media (max-width:760px){
	.csx-pads{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
	.csx-pad{padding:12px 6px 10px}
	.csx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
	.csx-hero b{font-size:32px}
	.csx-tray{flex-direction:column;align-items:stretch}
	.csx-tray-acts{justify-content:space-between}
	.csx-tray-acts .ct-btn{flex:1;justify-content:center}
	.csx-tape{grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:7px 6px;padding:12px}
}