:root { color-scheme: dark; --bg:#09090c; --surface:#121116; --raised:#19171f; --border:#302c39; --text:#f6f4f8; --muted:#a19aa9; --purple:#a985ff; --purple-dark:#31234d; --red:#ed5b67; --green:#4cde91; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
header { display:flex; align-items:center; justify-content:space-between; height:72px; padding:0 max(24px,calc((100vw - 1180px)/2)); border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:900; letter-spacing:.07em; }
.brand > span { display:grid; place-items:center; width:30px; height:30px; color:#fff; background:var(--purple); border-radius:8px; }
.brand strong,.eyebrow { color:var(--purple); }
nav { display:flex; gap:26px; color:var(--muted); font-size:13px; font-weight:700; }
nav a:hover { color:var(--text); }
.hero { max-width:1180px; margin:0 auto; padding:90px 24px 65px; }
.eyebrow { margin:0 0 12px; font-size:11px; font-weight:900; letter-spacing:.18em; }
.hero h1 { margin:0; font-size:clamp(48px,7vw,78px); line-height:1; letter-spacing:-.055em; }
.hero h1 span { color:var(--purple); }
.hero > p:last-child { max-width:680px; margin:24px 0 0; color:var(--muted); font-size:17px; }
.calculator { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(340px,.75fr); gap:24px; max-width:1180px; margin:0 auto; padding:0 24px 90px; align-items:start; }
.table-panel,.results { background:var(--surface); border:1px solid var(--border); border-radius:18px; }
.panel-heading { display:flex; align-items:end; justify-content:space-between; padding:26px 28px; border-bottom:1px solid var(--border); }
.panel-heading h2 { margin:0; font-size:30px; }
.panel-heading button { padding:8px 13px; color:var(--muted); background:transparent; border:1px solid var(--border); border-radius:7px; cursor:pointer; font-size:12px; }
.poker-table { display:flex; align-items:center; gap:20px; min-height:240px; padding:30px 28px; background:radial-gradient(circle at center,rgba(169,133,255,.15),transparent 65%); }
.card-zone > p { margin:0 0 10px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.1em; }
.slots { display:flex; gap:7px; }
.card-slot { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; width:68px; height:96px; padding:8px; background:var(--raised); border:1px dashed #48414f; border-radius:8px; cursor:pointer; font-family:Georgia,serif; font-size:24px; font-weight:700; }
.card-slot small { color:var(--muted); font-family:Inter,sans-serif; font-size:8px; letter-spacing:.08em; }
.card-slot > span { align-self:center; color:#514a57; }
.card-slot.active { border:2px solid var(--purple); box-shadow:0 0 0 3px rgba(169,133,255,.14); }
.card-slot.filled { color:#111; background:#f7f7f4; border-style:solid; }
.card-slot.filled.red { color:#d53340; }
.card-slot.filled small { color:currentColor; opacity:.55; }
.card-slot.filled > span { color:currentColor; font-size:33px; }
.versus { color:var(--purple); font-size:20px; }
.deck-picker { padding:26px 28px 30px; border-top:1px solid var(--border); }
.picker-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:17px; }
.picker-heading h3 { margin:0; font-size:15px; }
.picker-heading p { margin:0; color:var(--muted); font-size:11px; }
.deck { display:grid; grid-template-columns:repeat(13,1fr); gap:6px; }
.deck-card { min-width:0; height:48px; padding:3px; background:var(--raised); border:1px solid var(--border); border-radius:6px; cursor:pointer; font-size:13px; font-weight:800; }
.deck-card.red { color:var(--red); }
.deck-card:hover:not(:disabled) { border-color:var(--purple); transform:translateY(-1px); }
.deck-card:disabled { opacity:.18; cursor:not-allowed; }
.results { position:sticky; top:20px; min-height:610px; padding:26px; }
.result-heading { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.result-heading p { margin:0; }
.status-dot { width:7px; height:7px; background:#f3b64d; border-radius:50%; box-shadow:0 0 9px #f3b64d; }
.results.ready .status-dot { background:var(--green); box-shadow:0 0 9px var(--green); }
.empty-result { display:grid; place-items:center; min-height:500px; text-align:center; }
.empty-result > div { color:var(--purple); font-size:52px; }
.empty-result > div span { color:var(--red); }
.empty-result h2 { margin:5px 0; font-size:20px; }
.empty-result p { max-width:270px; margin:0; color:var(--muted); font-size:13px; }
#odds-result { padding-top:35px; }
.result-label { margin:0; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.12em; }
#current-hand { margin:4px 0 22px; color:var(--purple); font-size:38px; letter-spacing:-.04em; }
.improve-card { display:flex; align-items:center; justify-content:space-between; padding:15px; background:var(--purple-dark); border-radius:9px; font-size:12px; }
.improve-card strong { color:#cbb6ff; font-size:24px; }
.distribution-heading { display:flex; align-items:end; justify-content:space-between; margin:26px 0 13px; }
.distribution-heading h3 { margin:0; font-size:15px; }
.distribution-heading span { color:var(--muted); font-size:10px; }
.probability-row { margin-bottom:11px; }
.probability-copy { display:flex; justify-content:space-between; margin-bottom:5px; font-size:11px; }
.probability-copy span { color:var(--muted); }
.probability-track { height:6px; overflow:hidden; background:#242129; border-radius:20px; }
.probability-bar { height:100%; min-width:0; background:var(--purple); border-radius:20px; }
.calculation-note { margin:20px 0 0; color:var(--muted); font-size:10px; }
.info { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1180px; margin:0 auto; padding:70px 24px; border-top:1px solid var(--border); }
.info div { padding:24px; background:var(--surface); border:1px solid var(--border); border-radius:12px; }
.info span { color:var(--purple); font-size:11px; font-weight:900; }
.info h3 { margin:12px 0 5px; }
.info p { margin:0; color:var(--muted); font-size:13px; }
footer { display:flex; justify-content:space-between; max-width:1180px; margin:0 auto; padding:30px 24px; color:var(--muted); border-top:1px solid var(--border); font-size:12px; }
footer a { color:var(--purple); font-weight:800; }
@media(max-width:960px){.calculator{grid-template-columns:1fr}.results{position:static}.poker-table{overflow-x:auto}.info{grid-template-columns:1fr}}
@media(max-width:650px){nav a:nth-child(2){display:none}.hero{padding-top:65px}.calculator{padding:0 14px 65px}.panel-heading,.deck-picker{padding:22px 16px}.poker-table{display:block;padding:24px 16px}.versus{margin:14px 0}.board-zone{min-width:370px}.deck{grid-template-columns:repeat(7,1fr)}.picker-heading{display:block}.picker-heading p{margin-top:4px}footer{display:block}}