/* The Odds page (the-odds.html). Scoped under .dice-body, a wrapper inside the site <main>. Fonts come from styles.css. */
.dice-body{--ink:#121110;--char:#1d1b19;--char2:#2a2724;--ivory:#F5F1E8;--warm:#FBF9F4;--muted:#b9b0a2;--gold:#bf8f18;--gold2:#d9a62a;--sz:clamp(78px,24vw,124px);
margin:0;background:var(--ink);color:var(--ivory);font:400 16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
.dice-body *,.dice-body *::before,.dice-body *::after{box-sizing:border-box}
.dice-body img{max-width:100%;height:auto;display:block}
.dice-body a{color:inherit}
.dice-body h1,.dice-body h2,.dice-body h3{font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.9;margin:0}
.dice-body :focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.dice-top{position:absolute;top:0;left:0;right:0;z-index:5;padding:calc(14px + env(safe-area-inset-top)) 20px 0}
.dice-top img{width:132px}
.dice-kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold2);margin:0 0 14px;font-weight:600}
.dice-lede{color:var(--muted);max-width:34ch;margin:10px auto 0;font-size:16px}
/* hero */
.dice-hero{min-height:calc(100svh - 64px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:56px 20px 40px;
background:radial-gradient(120% 70% at 50% 0%,#2b2621 0%,var(--ink) 62%);position:relative}
.dice-hero h1{font-size:clamp(76px,22vw,190px);color:var(--warm);line-height:.86}
.dice-hero h1 span{color:var(--gold)}
.dice-hero-dice{margin:34px 0 18px}
.dice-cue{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
.dice-cue span{display:inline-block;animation:diceBob 1.6s ease-in-out infinite;color:var(--gold2)}
@keyframes diceBob{50%{transform:translateY(5px)}}
/* dice */
.dice-pair{display:flex;gap:calc(var(--sz)*.32);justify-content:center;perspective:900px}
.dice-die{width:var(--sz);height:var(--sz);position:relative}
.dice-cube{position:absolute;inset:0;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(32deg)}
.dice-hero-dice .d1 .dice-cube{transform:rotateX(-22deg) rotateY(28deg) rotateZ(-8deg)}
.dice-hero-dice .d2 .dice-cube{transform:rotateX(-30deg) rotateY(-52deg) rotateZ(10deg)}
.dice-face{position:absolute;inset:0;border-radius:16%;background:radial-gradient(circle at 30% 25%,#3a3632 0%,#1a1816 55%,#0b0a09 100%);
box-shadow:inset 0 0 0 1.5px rgba(191,143,24,.35),inset 0 0 calc(var(--sz)*.18) rgba(0,0,0,.65);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:15%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.dice-face i{width:62%;height:62%;margin:auto;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f1cf6e,var(--gold) 55%,#7d5d0e);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.dice-core{position:absolute;inset:3%;background:#0b0a09;transform:translateZ(0)}
.dice-die{--h:calc(var(--sz)/2)}
.f1{transform:translateZ(var(--h))}
.f6{transform:rotateY(180deg) translateZ(var(--h))}
.f3{transform:rotateY(90deg) translateZ(var(--h))}
.f4{transform:rotateY(-90deg) translateZ(var(--h))}
.f5{transform:rotateX(90deg) translateZ(var(--h))}
.f2{transform:rotateX(-90deg) translateZ(var(--h))}
/* pip layouts */
.f1 i{grid-area:2/2}
.f2 i:nth-child(1){grid-area:1/1}.f2 i:nth-child(2){grid-area:3/3}
.f3 i:nth-child(1){grid-area:1/1}.f3 i:nth-child(2){grid-area:2/2}.f3 i:nth-child(3){grid-area:3/3}
.f4 i:nth-child(1){grid-area:1/1}.f4 i:nth-child(2){grid-area:1/3}.f4 i:nth-child(3){grid-area:3/1}.f4 i:nth-child(4){grid-area:3/3}
.f5 i:nth-child(1){grid-area:1/1}.f5 i:nth-child(2){grid-area:1/3}.f5 i:nth-child(3){grid-area:2/2}.f5 i:nth-child(4){grid-area:3/1}.f5 i:nth-child(5){grid-area:3/3}
.f6 i:nth-child(1){grid-area:1/1}.f6 i:nth-child(2){grid-area:2/1}.f6 i:nth-child(3){grid-area:3/1}.f6 i:nth-child(4){grid-area:1/3}.f6 i:nth-child(5){grid-area:2/3}.f6 i:nth-child(6){grid-area:3/3}
.dice-die::after{content:"";position:absolute;left:8%;right:8%;bottom:calc(var(--sz)*-.32);height:14%;border-radius:50%;background:radial-gradient(rgba(0,0,0,.6),transparent 70%);transform:scale(var(--shadow,1));opacity:var(--shop,1)}
/* scroll roll: static list by default */
.dice-roll{padding:40px 20px 30px;background:var(--char)}
.dice-table{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 0 34px}
.dice-count{font:14px/1 "Bebas Neue",Impact,sans-serif;letter-spacing:.2em;color:var(--muted);margin:30px 0 0}
.dice-cards{display:grid;gap:16px;max-width:560px;margin:0 auto}
.dice-card{background:linear-gradient(180deg,var(--char2),#201e1b);border:1px solid rgba(191,143,24,.28);border-radius:14px;padding:22px 22px 18px;text-align:left}
.dice-num{font:400 clamp(64px,19vw,104px)/.9 "Bebas Neue",Impact,sans-serif;color:var(--gold);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.dice-text{font-size:17px;line-height:1.45;margin:10px 0 12px;color:var(--warm)}
.dice-src{font-size:11.5px;line-height:1.45;color:var(--muted);margin:0}
.dice-src a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.dice-quiz,.dice-play,.dice-end{padding:72px 20px;text-align:center}
.dice-quiz h2,.dice-play h2{font-size:clamp(52px,14vw,96px);color:var(--warm)}
.dice-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;background:var(--gold);color:#16140f;border:0;font:600 15px/1 Inter,system-ui,sans-serif;letter-spacing:.04em;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s,background .2s}
.dice-btn:hover{background:var(--gold2)}.dice-btn:active{transform:scale(.96)}
.dice-btn.ghost{background:transparent;color:var(--warm);border:1.5px solid rgba(245,241,232,.4)}
/* quiz */
.dice-quiz{background:var(--char)}
.dice-q{max-width:540px;margin:28px auto 0;background:var(--char2);border-radius:14px;padding:22px;text-align:left;border:1px solid rgba(245,241,232,.08)}
.dice-qn{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold2);margin:0 0 8px;font-weight:600}
.dice-q h3{font:600 19px/1.35 Inter,system-ui,sans-serif;text-transform:none;letter-spacing:0;color:var(--warm)}
.dice-opts{display:grid;gap:10px;margin-top:16px}
.dice-opt{min-height:50px;border-radius:10px;border:1.5px solid rgba(245,241,232,.22);background:transparent;color:var(--warm);font:500 16px/1.2 Inter,system-ui,sans-serif;text-align:left;padding:12px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,border-color .2s}
.dice-opt:disabled{cursor:default}
.dice-opt.right{border-color:var(--gold);background:rgba(191,143,24,.18)}
.dice-opt.wrong{border-color:#8a4b3c;background:rgba(138,75,60,.22);text-decoration:line-through;text-decoration-color:rgba(245,241,232,.45)}
.dice-ans{margin:14px 0 0;color:var(--warm);font-size:15px;line-height:1.5;border-left:3px solid var(--gold);padding-left:12px}
.dice-score{font:400 30px/1 "Bebas Neue",Impact,sans-serif;color:var(--gold);letter-spacing:.04em;margin:28px 0 0;min-height:30px}
/* playbook */
.dice-play{background:var(--ivory);color:#23211F}
.dice-play h2{color:#121110}.dice-play .dice-lede{color:#5E574F}
.dice-plays{list-style:none;padding:0;margin:30px auto 0;max-width:560px;display:grid;gap:12px;text-align:left}
.dice-plays li{display:flex;gap:16px;align-items:flex-start;background:#FBF9F4;border:1px solid #D9D0BF;border-radius:12px;padding:18px}
.dice-pn{flex:none;width:38px;height:38px;border-radius:50%;background:#121110;color:var(--gold2);display:grid;place-items:center;font:400 22px/1 "Bebas Neue",Impact,sans-serif}
.dice-plays h3{font-size:26px;color:#121110}
.dice-plays p{margin:4px 0 0;font-size:15px;line-height:1.5;color:#3d3833}
/* end */
.dice-end{background:radial-gradient(120% 80% at 50% 100%,#2b2621 0%,var(--ink) 65%);padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.dice-end h2{font-size:clamp(60px,17vw,130px);color:var(--warm)}
.dice-ctas{display:flex;flex-direction:column;gap:12px;align-items:center;margin:30px auto 0;max-width:340px}
.dice-ctas .dice-btn{width:100%}
.dice-small{margin:24px 0 0;font-size:14px;color:var(--muted)}
.dice-small a{color:var(--warm)}
.dice-fine{max-width:44ch;margin:26px auto 0;font-size:11.5px;line-height:1.5;color:#8c8375}
@media(min-width:760px){.dice-top{padding-left:40px}.dice-top img{width:160px}.dice-ctas{flex-direction:row;max-width:none;justify-content:center}.dice-ctas .dice-btn{width:auto}}
@media(prefers-reduced-motion:reduce){.dice-cue span{animation:none}.dice-card{transition:none}}

/* TIYL Financial book section */
.dice-tiyl{padding:72px 20px;text-align:center;background:var(--char);border-top:1px solid rgba(191,143,24,.25)}
.dice-tiyl h2{font-size:clamp(52px,14vw,96px);color:var(--warm)}
.dice-tiyl-wrap{max-width:760px;margin:32px auto 0;display:grid;gap:28px;justify-items:center}
.dice-tiyl-cover{display:block;width:min(62vw,240px);border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(191,143,24,.35);transition:transform .2s}
.dice-tiyl-cover:active{transform:scale(.98)}
.dice-tiyl-cover img{width:100%;border-radius:4px}
.dice-tiyl-copy{max-width:38ch}
.dice-tiyl-copy p{margin:0 0 14px;color:var(--ivory);font-size:16px;line-height:1.55}
.dice-tiyl-copy em{font-style:normal;color:var(--warm);font-weight:600}
.dice-tiyl .dice-tiyl-from{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);font-weight:600;margin-bottom:16px}
.dice-tiyl .dice-ctas{margin-top:22px}
.dice-tiyl .dice-small{margin-top:16px}
@media (min-width:760px){.dice-tiyl-wrap{grid-template-columns:240px 1fr;text-align:left;align-items:center}.dice-tiyl-copy{max-width:none}}

/* stat cards: each card rolls its own pair of dice once when it scrolls into view (no pinning, no scroll handlers) */
.dice-roll{padding:56px 20px 64px}
.dice-cards{gap:20px}
.dice-mini{--sz:clamp(46px,13vw,58px);gap:calc(var(--sz)*.42);justify-content:flex-start;height:calc(var(--sz)*1.55);padding:calc(var(--sz)*.08) 0 0 calc(var(--sz)*.12);margin:0 0 10px;perspective:600px}
.dice-mini .dice-die::after{bottom:calc(var(--sz)*-.36)}
.dice-mini .dice-cube{transform:translateY(0) rotateX(-18deg) rotateY(24deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.dice-num{height:.9em;white-space:nowrap}
.dice-io .dice-card{opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.dice-io .dice-card.in{opacity:1;transform:none}
.dice-io .dice-card .dice-num{opacity:.35;transition:opacity .3s ease}
.dice-io .dice-card.landed .dice-num{opacity:1}
.dice-io .dice-card .dice-mini .dice-cube{transform:translateY(-70%) rotateX(-18deg) rotateY(24deg) rotateX(calc(var(--rx,0deg) - 540deg)) rotateY(calc(var(--ry,0deg) + 450deg))}
.dice-io .dice-card .dice-mini .d2 .dice-cube{transform:translateY(-70%) rotateX(-18deg) rotateY(24deg) rotateX(calc(var(--rx,0deg) + 450deg)) rotateY(calc(var(--ry,0deg) - 540deg))}
.dice-io .dice-card.in .dice-mini .dice-cube{will-change:transform;animation:diceRollA .8s cubic-bezier(.25,.6,.3,1) both}
.dice-io .dice-card.in .dice-mini .d2 .dice-cube{animation-name:diceRollB;animation-delay:.06s}
.dice-io .dice-card.landed .dice-mini .dice-cube{will-change:auto}
.dice-io .dice-card.in .dice-mini .dice-die::after{animation:diceShadow .8s cubic-bezier(.25,.6,.3,1) both}
@keyframes diceRollA{
0%{transform:translateY(-70%) rotateX(-18deg) rotateY(24deg) rotateX(calc(var(--rx,0deg) - 540deg)) rotateY(calc(var(--ry,0deg) + 450deg))}
55%{transform:translateY(0) rotateX(-18deg) rotateY(24deg) rotateX(calc(var(--rx,0deg) - 40deg)) rotateY(calc(var(--ry,0deg) + 30deg))}
75%{transform:translateY(-14%) rotateX(-18deg) rotateY(24deg) rotateX(calc(var(--rx,0deg) - 10deg)) rotateY(calc(var(--ry,0deg) + 8deg))}
100%{transform:translateY(0) rotateX(-18deg) rotateY(24deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}}
@keyframes diceRollB{
0%{transform:translateY(-70%) rotateX(-18deg) rotateY(24deg) rotateX(calc(var(--rx,0deg) + 450deg)) rotateY(calc(var(--ry,0deg) - 540deg))}
55%{transform:translateY(0) rotateX(-18deg) rotateY(24deg) rotateX(calc(var(--rx,0deg) + 30deg)) rotateY(calc(var(--ry,0deg) - 40deg))}
75%{transform:translateY(-14%) rotateX(-18deg) rotateY(24deg) rotateX(calc(var(--rx,0deg) + 8deg)) rotateY(calc(var(--ry,0deg) - 10deg))}
100%{transform:translateY(0) rotateX(-18deg) rotateY(24deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}}
@keyframes diceShadow{0%{transform:scale(.5);opacity:.3}55%{transform:scale(1);opacity:1}75%{transform:scale(.85);opacity:.8}100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){
.dice-io .dice-card,.dice-io .dice-card .dice-num{opacity:1;transform:none;transition:none}
.dice-io .dice-card .dice-mini .dice-cube,.dice-io .dice-card .dice-mini .d2 .dice-cube{animation:none;transform:translateY(0) rotateX(-18deg) rotateY(24deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.dice-io .dice-card .dice-mini .dice-die::after{animation:none}}

/* inside the site shell */
.dice-body{display:block;position:relative}
.dice-body section{margin:0}

/* sweep Oct 26: ".dice-body a{color:inherit}" was turning the gold "Get the book" button text ivory (2.6:1). Dark text on gold, like every other gold button */
.dice-body a.dice-btn{color:#16140f}
.dice-body a.dice-btn.ghost{color:var(--warm)}