/* ODDS (odds.html, js/odds.js) and THE UNLUCKY CREW (crew.html, js/crew.js): a sportsbook board without the betting. */
.od { padding: 16px 0 40px; }
.od-hero, .cr-hero { position: relative; margin: 0 -4px 12px; padding: 20px 16px 16px; border-radius: 26px; overflow: hidden; background: radial-gradient(90% 120% at 0 0, rgba(34, 197, 94, .28), transparent 60%), radial-gradient(80% 100% at 100% 100%, rgba(56, 189, 248, .22), transparent 60%), linear-gradient(160deg, #07140f, #0b0b0e); border: 1px solid rgba(74, 222, 128, .3); }
.od-hero::after, .cr-hero::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 44px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 44px); pointer-events: none; }
.od-hero > *, .cr-hero > * { position: relative; z-index: 1; }
.od-hero h1, .cr-hero h1 { margin: 6px 0; font: 900 44px/1 var(--f-serif); color: #fff; }
.od-hero h1 em, .cr-hero h1 em { font-style: italic; background: linear-gradient(180deg, #bbf7d0, #4ade80 55%, #15803d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.od-hero .lead, .cr-hero .lead { margin: 0 0 12px; color: #d6dfd9; font-size: 14px; line-height: 1.5; }
.od-stamp { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font: 700 11.5px var(--f-body); color: #bbf7d0; background: rgba(0, 0, 0, .4); border: 1px solid rgba(74, 222, 128, .3); }
.od-stamp i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; animation: odlive 1.6s ease-in-out infinite; }
@keyframes odlive { 50% { opacity: .35; } }

/* the fan poll: small on purpose */
.pl { margin: 0 0 12px; padding: 10px 12px; border-radius: 18px; background: linear-gradient(170deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .1); }
.pl-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 700 12px var(--f-body); color: var(--mute); }
.pl-h b { color: #fff; font: 800 12.5px var(--f-body); letter-spacing: .04em; }
.pl-h span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-nx { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .3); color: #fff; font: 800 15px/1 var(--f-body); cursor: pointer; }
.pl-r { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.pl-vs { font: 400 16px/1 'Bebas Neue', var(--f-head); color: var(--mute); }
.pl-t { position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; height: 40px; padding: 0 10px; border-radius: 12px; overflow: hidden; cursor: pointer; color: #fff; background: rgba(0, 0, 0, .35); border: 1px solid color-mix(in srgb, var(--tc) 60%, rgba(255, 255, 255, .2)); transition: transform .13s var(--press), border-color .2s; }
.pl-t:active { transform: scale(.95); }
.pl-t > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 55%, transparent), color-mix(in srgb, var(--tc) 25%, transparent)); transition: width .6s cubic-bezier(.2, .9, .3, 1); z-index: 0; }
.pl-t > * { position: relative; z-index: 1; }
.pl-t img { width: 24px; height: 24px; object-fit: contain; flex: none; }
.pl-t b { flex: 1; min-width: 0; text-align: left; font: 800 13.5px var(--f-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-t em { font: 400 19px/1 'Bebas Neue', var(--f-head); font-style: normal; }
.pl-t.me { border-color: #4ade80; box-shadow: 0 0 0 1px #4ade80, 0 0 14px rgba(74, 222, 128, .35); }
.pl-f { display: block; margin-top: 7px; font: 600 11px var(--f-body); color: var(--mute); }

/* the crew strip */
.od-crew { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border-radius: 18px; text-decoration: none; color: #fff; background: linear-gradient(100deg, rgba(246, 207, 95, .16), rgba(168, 85, 247, .12)); border: 1px solid rgba(246, 207, 95, .35); }
.od-meds { display: flex; flex: none; }
.od-meds i { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -7px; border-radius: 50%; font-style: normal; font-size: 13px; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 70%, #fff), color-mix(in srgb, var(--c) 60%, #000)); box-shadow: 0 0 0 2px #0b0a10; }
.od-meds i:first-child { margin-left: 0; }
.od-cw { flex: 1; min-width: 0; display: grid; }
.od-cw small { font: 800 9.5px var(--f-body); letter-spacing: .16em; color: #f6cf5f; }
.od-cw b { font: 700 13px/1.3 var(--f-body); }
.od-cw u { text-decoration: none; color: #fde68a; }
.od-crew > em { font: 800 22px var(--f-body); font-style: normal; color: #f6cf5f; }

/* league tabs */
.od-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px 2px; scrollbar-width: none; }
.od-tabs::-webkit-scrollbar { display: none; }
.od-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .35); color: #e9e4d8; font: 800 12.5px var(--f-body); cursor: pointer; }
.od-tabs button small { padding: 1px 6px; border-radius: 999px; font: 800 10px var(--f-body); background: rgba(255, 255, 255, .1); }
.od-tabs button.on { color: #04130c; background: linear-gradient(180deg, #bbf7d0, #4ade80 60%, #16a34a); border-color: transparent; }
.od-tabs button.on small { background: rgba(0, 0, 0, .15); }
.od-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; align-items: start; }
.od-empty { grid-column: 1 / -1; padding: 30px 10px; text-align: center; color: var(--mute); border: 1px dashed rgba(255, 255, 255, .15); border-radius: 18px; }

/* a game card, sportsbook-style */
.og { border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #15161b, #0d0e12); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 12px 28px rgba(0, 0, 0, .4); animation: odin .4s ease both; animation-delay: calc(var(--i) * 35ms); }
@keyframes odin { from { opacity: 0; transform: translateY(10px); } }
.og > header { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font: 700 11px var(--f-body); color: var(--mute); background: linear-gradient(90deg, color-mix(in srgb, var(--ca) 22%, transparent), transparent 45%, transparent 55%, color-mix(in srgb, var(--ch) 22%, transparent)); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.og > header span:first-child { color: #fff; font-weight: 800; }
.og-v { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.og-g { display: grid; grid-template-columns: minmax(0, 1fr) 68px 68px 64px; gap: 5px; align-items: center; padding: 8px 10px 10px; }
.og-g > small { text-align: center; font: 800 9.5px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.ot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ot img { flex: none; width: 28px; height: 28px; object-fit: contain; }
.ot span { min-width: 0; display: grid; }
.ot b { font: 800 14px/1.15 var(--f-head); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ot small { font: 600 10.5px var(--f-body); color: var(--mute); }
.oc { position: relative; display: grid; justify-items: center; gap: 1px; height: 44px; align-content: center; border-radius: 10px; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .08); transition: background .15s, border-color .15s, transform .12s var(--press); }
.oc:hover { border-color: rgba(74, 222, 128, .5); }
.oc:active { transform: scale(.94); }
.oc b { font: 800 13.5px/1 var(--f-head); }
.oc small { font: 700 10.5px var(--f-body); color: #86efac; }
.oc.on { background: rgba(74, 222, 128, .16); border-color: #4ade80; }
.oc:disabled { cursor: default; opacity: .4; }
.oc .mv { position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: #f59e0b; }
/* the math under a market */
.om { margin: 0 10px 10px; padding: 10px; border-radius: 14px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(74, 222, 128, .2); animation: odin .25s ease; }
.om-bar { display: flex; height: 24px; border-radius: 8px; overflow: hidden; font: 800 10.5px/24px var(--f-body); white-space: nowrap; }
.om-bar span { padding: 0 8px; overflow: hidden; text-overflow: ellipsis; }
.om-bar span:first-child { background: linear-gradient(90deg, var(--ca), color-mix(in srgb, var(--ca) 70%, #000)); color: #fff; min-width: 20%; }
.om-bar span:last-child { flex: 1; text-align: right; background: linear-gradient(90deg, color-mix(in srgb, var(--ch) 70%, #000), var(--ch)); color: #fff; min-width: 20%; }
.om table { width: 100%; margin-top: 8px; border-collapse: collapse; font: 600 12px var(--f-body); }
.om th, .om td { padding: 5px 4px; text-align: right; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.om th:first-child { text-align: left; color: var(--mute); font-weight: 700; }
.om thead th { color: #fff; font-weight: 800; }
.om td { color: #e9e4d8; font-variant-numeric: tabular-nums; }
.om tr.hi td { color: #86efac; font-weight: 800; }
.om tr.sb td, .om tr.sb th { color: #7dd3fc; }
.om p { margin: 8px 0 0; font: 500 12px var(--f-body); color: #cfcabe; }
/* the crew under each game */
.ocr { border-top: 1px solid rgba(255, 255, 255, .06); }
.ocr-t { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; background: none; border: 0; color: #e9e4d8; cursor: pointer; font: 600 12px var(--f-body); text-align: left; }
.ocr-m { display: flex; gap: 3px; }
.ocr-m i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font-style: normal; font-size: 12px; background: rgba(255, 255, 255, .06); filter: grayscale(1) opacity(.5); }
.ocr-m i.go, .ocr-m i.wild, .ocr-m i.lean, .ocr-m i.warn { filter: none; background: color-mix(in srgb, var(--c) 35%, transparent); box-shadow: 0 0 0 1px var(--c); }
.ocr-m i.note { filter: none; opacity: .8; }
.ocr-s { flex: 1; min-width: 0; }
.ocr-s b { color: #fde68a; }
.ocr-t em { font: 800 16px var(--f-body); font-style: normal; color: var(--mute); }
.ocr-l { display: grid; gap: 6px; margin: 0; padding: 0 10px 10px; list-style: none; }
.ocr-l li { display: flex; gap: 8px; padding: 8px; border-radius: 12px; background: rgba(0, 0, 0, .3); border-left: 3px solid var(--c); }
.ocr-l li > i { font-style: normal; font-size: 18px; }
.ocr-l span { display: grid; gap: 2px; }
.ocr-l b { font: 800 12.5px var(--f-head); color: #fff; }
.ocr-l small { font: 500 12px/1.4 var(--f-body); color: #cfcabe; }
.ocr-l li.ocr-ev { display: block; border-left-color: rgba(255, 255, 255, .2); font: 600 11px var(--f-body); color: var(--mute); }
u.go, u.wild, u.lean, u.warn, u.pass, u.note, .cr-tag { margin-left: 4px; padding: 1px 6px; border-radius: 6px; font: 800 9.5px var(--f-body); letter-spacing: .08em; text-decoration: none; vertical-align: middle; }
.go { color: #052e16; background: #4ade80; } .wild { color: #fff; background: #e11d48; } .lean { color: #241400; background: #f59e0b; }
.warn { color: #241400; background: #fde047; } .pass { color: #d4d4d8; background: rgba(255, 255, 255, .12); } .note { color: #fff; background: #7c3aed; }
.ocr-m i.go, .ocr-m i.wild, .ocr-m i.lean, .ocr-m i.warn, .ocr-m i.pass, .ocr-m i.note { color: inherit; }
.od-key { margin: 16px 0 0; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.od-key summary { cursor: pointer; font: 800 14px var(--f-head); color: #fff; }
.od-key dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 10px 0; font-size: 13px; }
.od-key dt { font-weight: 800; color: #86efac; }
.od-key dd { margin: 0; color: #cfcabe; }
.od-key a { color: #f6cf5f; font-weight: 800; font-size: 13px; }
.od-fine { margin: 18px 0 0; text-align: center; font: 500 11.5px/1.5 var(--f-body); color: var(--mute); }

/* ---------- THE UNLUCKY CREW ---------- */
.cr-hero { background: radial-gradient(90% 120% at 0 0, rgba(246, 207, 95, .3), transparent 60%), radial-gradient(80% 100% at 100% 100%, rgba(168, 85, 247, .3), transparent 60%), linear-gradient(160deg, #140f05, #0b0b0e); border-color: rgba(246, 207, 95, .35); }
.cr-hero h1 em { background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; }
.cr-meds { display: flex; gap: 6px; overflow-x: auto; margin: 4px -16px 10px; padding: 4px 16px; scrollbar-width: none; }
.cr-meds button { flex: none; display: grid; justify-items: center; gap: 5px; width: 64px; padding: 0; background: none; border: 0; cursor: pointer; transition: transform .13s var(--press); }
.cr-meds button:active { transform: scale(.92); }
.cr-meds button small { font: 800 9.5px/1.15 var(--f-body); text-align: center; color: #e9e4d8; }
.cr-ai { margin: 0; padding: 8px 12px; border-radius: 12px; font: 600 12px/1.45 var(--f-body); color: #e9d5ff; background: rgba(124, 58, 237, .18); border: 1px solid rgba(192, 132, 252, .3); }
.cr-ai a { color: #f6cf5f; }
.cr-med { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-style: normal; font-size: 23px; background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--c) 75%, #fff), color-mix(in srgb, var(--c) 55%, #000) 70%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 6px rgba(0, 0, 0, .3), 0 6px 16px color-mix(in srgb, var(--c) 40%, transparent); }
.cr-med.big { width: 58px; height: 58px; border-radius: 18px; font-size: 30px; }
/* Miss Fortune's card */
.cr-card { margin: 0 0 18px; padding: 14px; border-radius: 24px; background: radial-gradient(100% 80% at 0 0, rgba(246, 207, 95, .2), transparent 60%), linear-gradient(170deg, #1a1408, #0b0b0e 70%); border: 1px solid rgba(246, 207, 95, .45); box-shadow: 0 18px 40px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1); }
.cr-mb { display: flex; gap: 12px; align-items: flex-start; }
.cr-mb > div { flex: 1; min-width: 0; }
.cr-mb small { font: 800 10px var(--f-body); letter-spacing: .16em; color: #f6cf5f; }
.cr-mb > div > b { display: block; margin: 2px 0 4px; font: 900 26px/1.1 var(--f-serif); color: #fff; }
.cr-mb > div > b u { text-decoration: none; font: 400 30px/1 'Bebas Neue', var(--f-head); color: #fde68a; text-shadow: 0 0 14px rgba(246, 207, 95, .5); }
.cr-mb p { margin: 0; font: 500 13px/1.5 var(--f-body); color: #dcd8cf; }
.cr-mb.pass > div > b { font: 400 44px/1 'Bebas Neue', var(--f-head); letter-spacing: .06em; color: #d4d4d8; }
.cr-card h3 { margin: 14px 0 8px; font: 800 15px var(--f-head); color: #fff; }
.cr-card h3 small { font: 600 12px var(--f-body); color: var(--mute); }
.cr-top { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cr-top li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 14px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .07); animation: odin .4s ease both; animation-delay: calc(var(--i) * 80ms); }
.cr-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 900 12px var(--f-body); color: #221500; background: var(--gold-metal); }
.cr-top img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.cr-pt { flex: 1; min-width: 0; display: grid; }
.cr-pt b { font: 800 14px var(--f-head); color: #fff; }
.cr-pt b u { text-decoration: none; color: #fde68a; }
.cr-pt small, .cr-ps small { font: 600 10.5px var(--f-body); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-ps { display: grid; justify-items: end; flex: none; }
.cr-ps em { font: 400 22px/1 'Bebas Neue', var(--f-head); font-style: normal; color: #86efac; }
.cr-bob { flex: none; font-style: normal; font-size: 11px; font-weight: 900; padding: 3px 5px; border-radius: 8px; color: #241400; background: #fde047; }
.cr-bob.ok { color: #052e16; background: #4ade80; }
.cr-sum { margin: 10px 0 0; font: 600 12px var(--f-body); color: var(--mute); }
.cr-sum b { color: #fff; }
/* sections */
.cr-sec { margin: 0 0 20px; }
.cr-sec h2 { margin: 0 0 10px; font: 900 26px var(--f-serif); color: #fff; }
.cr-sec > p { margin: 0 0 10px; color: #cfcabe; font-size: 13.5px; line-height: 1.5; }
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; align-items: start; }
.cr-p { padding: 12px; border-radius: 20px; background: linear-gradient(170deg, color-mix(in srgb, var(--c) 16%, #131318), #0b0b0e 75%); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); scroll-margin-top: 60px; }
.cr-ph { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; background: none; border: 0; color: #fff; text-align: left; cursor: pointer; }
.cr-ph > span { flex: 1; min-width: 0; display: grid; }
.cr-ph b { font: 800 18px var(--f-head); }
.cr-ph small { font: 700 11px var(--f-body); color: color-mix(in srgb, var(--c) 70%, #fff); }
.cr-ph em { font: 800 20px var(--f-body); font-style: normal; color: var(--mute); }
.cr-p q { display: block; margin: 8px 0 0; font: italic 600 13.5px/1.4 var(--f-serif); color: #e9e4d8; }
.cr-pb { margin-top: 10px; display: grid; gap: 8px; }
.cr-pb > p { margin: 0; font: 500 13px/1.5 var(--f-body); color: #cfcabe; }
.cr-likes { display: flex; flex-wrap: wrap; gap: 5px; }
.cr-likes span { padding: 4px 9px; border-radius: 999px; font: 700 11px var(--f-body); color: #fff; background: color-mix(in srgb, var(--c) 25%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.cr-pb h4, .cr-desk h4 { margin: 4px 0 0; font: 800 11px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.cr-meth { margin: 0; padding-left: 18px; display: grid; gap: 3px; font: 500 12.5px/1.45 var(--f-body); color: #dcd8cf; }
.cr-desk ul { display: grid; gap: 5px; margin: 6px 0 0; padding: 0; list-style: none; }
.cr-desk li { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border-radius: 12px; background: rgba(0, 0, 0, .3); }
.cr-desk li > span:last-child { display: grid; gap: 2px; min-width: 0; }
.cr-desk li b { font: 800 12px var(--f-body); color: #fff; }
.cr-desk li small { font: 500 12px/1.4 var(--f-body); color: #cfcabe; }
.cr-tag { flex: none; margin: 1px 0 0; }
.cr-desk p, .cr-desk > small { margin: 6px 0 0; display: block; font: 600 12px var(--f-body); color: var(--mute); }
.cr-desk a { color: #f6cf5f; }
.cr-pb .btn { justify-self: start; }
.cr-sh { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.cr-sh h2 { margin: 0 0 4px; }
.cr-sh p { margin: 0; font: 500 13px/1.5 var(--f-body); color: #cfcabe; }
/* Allen's ladder */
.cr-lad { display: grid; gap: 7px; }
.cr-l { border-radius: 16px; background: linear-gradient(100deg, rgba(249, 115, 22, calc(.08 + var(--i) * .035)), rgba(255, 255, 255, .02)); border: 1px solid rgba(249, 115, 22, calc(.25 + var(--i) * .08)); overflow: hidden; }
.cr-l summary, .cr-l.off { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.cr-l summary::-webkit-details-marker { display: none; }
.cr-l.off { opacity: .45; cursor: default; }
.cr-lv { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font: 400 20px/1 'Bebas Neue', var(--f-head); color: #fff; background: linear-gradient(180deg, #fb923c, #c2410c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.cr-ln { flex: 1; min-width: 0; display: grid; }
.cr-ln b { font: 800 15px var(--f-head); color: #fff; }
.cr-ln small, .cr-lp small, .cr-lc small { font: 600 10.5px var(--f-body); color: var(--mute); }
.cr-lp, .cr-lc { display: grid; justify-items: end; flex: none; }
.cr-lp em { font: 400 24px/1 'Bebas Neue', var(--f-head); font-style: normal; color: #86efac; text-shadow: 0 0 10px rgba(74, 222, 128, .4); }
.cr-lc em { font: 800 13px/1.4 var(--f-body); font-style: normal; color: #fdba74; }
.cr-l ul { display: grid; gap: 4px; margin: 0; padding: 0 12px; list-style: none; }
.cr-l li { display: grid; grid-template-columns: 22px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(0, 0, 0, .3); }
.cr-l li img { grid-row: span 2; width: 22px; height: 22px; object-fit: contain; }
.cr-l li b { font: 800 12.5px var(--f-head); color: #fff; }
.cr-l li small { grid-column: 2; font: 600 10.5px var(--f-body); color: var(--mute); }
.cr-l li em { grid-row: 1 / span 2; grid-column: 3; font: 800 12px var(--f-body); font-style: normal; color: #86efac; }
.cr-lx { margin: 8px 12px 12px; font: 500 12px/1.45 var(--f-body); color: #cfcabe; }
/* the Hedge Master */
.cr-hg { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.cr-hg > div { padding: 12px; border-radius: 16px; background: rgba(168, 85, 247, .08); border: 1px solid rgba(192, 132, 252, .25); }
.cr-hg h4 { margin: 0 0 8px; font: 800 11px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #c084fc; }
.cr-hg p { margin: 0; font: 500 12.5px/1.5 var(--f-body); color: #cfcabe; }
.cr-mv, .cr-ex { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.cr-mv li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(0, 0, 0, .3); }
.cr-mv img { width: 24px; height: 24px; object-fit: contain; }
.cr-mv span { flex: 1; min-width: 0; display: grid; }
.cr-mv b { font: 800 12.5px var(--f-head); color: #fff; }
.cr-mv small { font: 600 10.5px var(--f-body); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-mv em { font: 700 11px var(--f-body); font-style: normal; color: #e9e4d8; white-space: nowrap; }
.cr-mv u { text-decoration: none; font: 800 11px var(--f-body); color: #fdba74; white-space: nowrap; }
.cr-ex li { padding: 7px 9px; border-radius: 10px; font: 500 12.5px var(--f-body); color: #e9e4d8; background: rgba(0, 0, 0, .3); }
.cr-hn { margin-top: 10px !important; font-style: italic; }
/* the math */
.cr-math > p { max-width: 720px; }
.cr-fx { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; }
.cr-fx > div { display: grid; gap: 5px; align-content: start; padding: 10px 12px; border-radius: 14px; background: rgba(56, 189, 248, .07); border: 1px solid rgba(56, 189, 248, .22); }
.cr-fx b { font: 800 13px var(--f-head); color: #fff; }
.cr-fx code { display: block; padding: 7px 9px; border-radius: 9px; font: 600 11.5px/1.5 ui-monospace, Menlo, Consolas, monospace; color: #7dd3fc; background: rgba(0, 0, 0, .45); }
.cr-fx small { font: 500 11.5px/1.45 var(--f-body); color: #b9c2cc; }
.cr-wx, .cr-src { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); }
.cr-wx h4, .cr-src h4 { margin: 0 0 8px; font: 800 13px var(--f-head); color: #f6cf5f; }
.cr-src h4 + ul, .cr-src ul + h4 { margin-top: 0; }
.cr-src ul + h4 { margin-top: 10px; }
.cr-wx ol, .cr-src ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; font: 500 12.5px/1.5 var(--f-body); color: #dcd8cf; }
.cr-wx b, .cr-src b { color: #fff; }
.cr-src p { margin: 10px 0 0; font: 600 12.5px var(--f-body); color: #86efac; }
.cr-rec { padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .03); border: 1px dashed rgba(255, 255, 255, .15); }
.cr-rec h2 { font-size: 20px; }
.cr-rec p { margin: 0; }
@media (max-width: 420px) { .og-g { grid-template-columns: minmax(0, 1fr) 60px 64px 56px; gap: 4px; } .ot img { width: 24px; height: 24px; } }
@media (prefers-reduced-motion: reduce) { .og, .cr-top li, .om { animation: none; } .od-stamp i { animation: none; } }

/* ---------- board, sharper: team-colour cards, monogram badges, odds cells like a real book ---------- */
.otb { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font: 800 10px/1 var(--f-body); color: #fff; letter-spacing: .02em; background: var(--tc); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 3px 8px rgba(0, 0, 0, .35); }
.og { position: relative; border-radius: 20px; background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--ca) 26%, transparent), transparent 60%), radial-gradient(70% 90% at 100% 100%, color-mix(in srgb, var(--ch) 22%, transparent), transparent 60%), linear-gradient(180deg, #14171b, #0c0e10); border-color: rgba(255, 255, 255, .1); }
.og.ex { border-style: dashed; border-color: rgba(246, 207, 95, .4); }
.og-ex { display: block; padding: 6px 12px; font: 800 9.5px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #1a1200; background: repeating-linear-gradient(135deg, #f6cf5f 0 10px, #e9bb3a 10px 20px); }
.og > header { background: none; padding: 10px 12px 4px; border-bottom: 0; }
.og > header span:first-child { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.og-g { gap: 6px; padding: 6px 12px 12px; }
.ot b { font-size: 15px; }
.oc { height: 48px; border-radius: 12px; background: linear-gradient(180deg, #1d2126, #15181c); border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.oc b { font: 800 15px/1 var(--f-body); font-variant-numeric: tabular-nums; }
.oc small { font: 700 10px var(--f-body); color: #8fd9b0; }
.oc:hover:not(:disabled) { border-color: rgba(70, 244, 156, .5); background: linear-gradient(180deg, #1f2a24, #161d19); }
.oc.on { border-color: #46f49c; background: linear-gradient(180deg, #1c3a2b, #12261c); box-shadow: 0 0 0 1px rgba(70, 244, 156, .4), 0 0 16px rgba(70, 244, 156, .2); }
.od-stamp i.ex { background: #f6cf5f; box-shadow: 0 0 8px #f6cf5f; }
/* the crew working example games when no lines are up */
.cr-exnote { margin: 0 0 10px; padding: 10px 14px; border-radius: 14px; font: 600 13px/1.45 var(--f-body); color: #ffe9a8; background: repeating-linear-gradient(135deg, rgba(246, 207, 95, .12) 0 10px, rgba(246, 207, 95, .05) 10px 20px); border: 1px dashed rgba(246, 207, 95, .5); }
.cr-dot { width: 22px; height: 22px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }