/* The Muck odds calculator (muckgto-odds.php, assets/muck-odds.js; Shaun, 2026-10-20). Cards are the articles'
   (assets/card-visuals.css, four-colour); this is the page around them. odc- */
body{margin:0}   /* the header edge to edge like Learn and How it's solved: the browser's 8px margin inset it (Shaun, 2026-10-21) */
.odc{max-width:1180px;margin:0 auto;padding:var(--muck-space-6,28px) 16px 64px;color:var(--muck-text)}
.odc-head{max-width:1180px;margin:0 auto}
.odc-head h1{margin:0 0 var(--muck-space-2,8px);font-size:clamp(30px,5vw,44px);line-height:1.05;letter-spacing:-.02em}
.odc-head p{margin:0 0 var(--muck-space-5,20px);color:var(--muck-text-2);font-size:16px;line-height:1.55;max-width:600px}

/* the deck: a row per suit */
.odc-deck{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:1040px;margin:0 auto;padding:var(--muck-space-4,16px);border:1px solid var(--muck-line);border-radius:var(--muck-radius-card);background:var(--muck-surface-1);overflow-x:auto}
.odc-suit{display:flex;gap:6px}
.odc-deck .acd--md{width:44px;height:60px;border-radius:6px}.odc-deck .acd--md b{font-size:19px}.odc-deck .acd--md i{font-size:15px}
.odc-pick{border:0;padding:0;cursor:pointer;transition:transform var(--muck-dur-fast,.12s),opacity var(--muck-dur-fast,.12s)}
.odc-pick:not(:disabled):hover{transform:translateY(-2px)}
.odc-pick:focus-visible{outline:2px solid var(--muck-gold);outline-offset:2px}
.odc-pick.is-used{opacity:.18;cursor:default}

/* the table: the board in the middle, the hands around it */
.odc-felt{position:relative;max-width:1040px;margin:var(--muck-space-5,20px) auto 0;aspect-ratio:2.3;border-radius:999px;border:10px solid #2a2017;background:radial-gradient(ellipse at center,#1d4a34 0%,#143a29 62%,#0f2c20 100%);box-shadow:inset 0 0 40px #0008}
.odc-board{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.odc-board-row{display:flex;gap:6px}
.odc-board-labels{display:grid;grid-template-columns:144px 44px 44px;gap:6px;color:#cfe3d6;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:center}
.odc-pod{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;min-width:150px;padding:10px 12px;border:1px solid var(--muck-line-strong);border-radius:var(--muck-radius-card);background:color-mix(in srgb,var(--muck-bg) 88%,transparent)}
.odc-pod-head{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font-size:13px}
.odc-x{width:22px;height:22px;border:0;border-radius:50%;background:transparent;color:var(--muck-text-3);font-size:16px;line-height:1;cursor:pointer}
.odc-x:hover{color:var(--muck-text);background:var(--muck-surface-2)}
.odc-pod-cards{display:flex;gap:6px}
/* seats: two face each other, more go round */
.odc-felt[data-n="2"] .odc-pod[data-seat="0"]{left:50%;top:82%}.odc-felt[data-n="2"] .odc-pod[data-seat="1"]{left:50%;top:18%}
.odc-felt[data-n="3"] .odc-pod[data-seat="0"]{left:50%;top:82%}.odc-felt[data-n="3"] .odc-pod[data-seat="1"]{left:18%;top:28%}.odc-felt[data-n="3"] .odc-pod[data-seat="2"]{left:82%;top:28%}
.odc-felt[data-n="4"] .odc-pod[data-seat="0"]{left:30%;top:80%}.odc-felt[data-n="4"] .odc-pod[data-seat="1"]{left:30%;top:20%}.odc-felt[data-n="4"] .odc-pod[data-seat="2"]{left:70%;top:20%}.odc-felt[data-n="4"] .odc-pod[data-seat="3"]{left:70%;top:80%}
.odc-felt[data-n="5"] .odc-pod[data-seat="0"]{left:50%;top:82%}.odc-felt[data-n="5"] .odc-pod[data-seat="1"]{left:12%;top:58%}.odc-felt[data-n="5"] .odc-pod[data-seat="2"]{left:30%;top:19%}.odc-felt[data-n="5"] .odc-pod[data-seat="3"]{left:70%;top:19%}.odc-felt[data-n="5"] .odc-pod[data-seat="4"]{left:88%;top:58%}
.odc-felt[data-n="6"] .odc-pod[data-seat="0"]{left:30%;top:81%}.odc-felt[data-n="6"] .odc-pod[data-seat="1"]{left:10%;top:50%}.odc-felt[data-n="6"] .odc-pod[data-seat="2"]{left:30%;top:19%}.odc-felt[data-n="6"] .odc-pod[data-seat="3"]{left:70%;top:19%}.odc-felt[data-n="6"] .odc-pod[data-seat="4"]{left:90%;top:50%}.odc-felt[data-n="6"] .odc-pod[data-seat="5"]{left:70%;top:81%}

/* card slots */
.odc-felt .acd--lg{width:44px;height:60px}.odc-felt .acd--lg b{font-size:20px}.odc-felt .acd--lg i{font-size:15px}
.odc-slot{display:grid;place-items:center;width:44px;height:60px;padding:0;border:1px dashed #ffffff40;border-radius:6px;background:#0000002e;color:#ffffff80;cursor:pointer;font:inherit}
.odc-slot.is-full{border:0;background:none}
.odc-slot.is-active{border:2px solid var(--muck-gold);background:color-mix(in srgb,var(--muck-gold) 12%,transparent)}
.odc-slot:focus-visible{outline:2px solid var(--muck-gold);outline-offset:2px}
.odc-plus{font-size:18px;line-height:1}
.odc-slot--sm{width:34px;height:46px}

/* each hand's odds */
.odc-odds{width:100%;min-height:30px}
.odc-nums{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.odc-win{font-size:17px;font-weight:800;color:var(--muck-text)}
.odc-tie{font-size:11px;color:var(--muck-text-3)}
.odc-bar{height:4px;margin-top:4px;border-radius:2px;background:var(--muck-line)}
.odc-bar i{display:block;height:100%;border-radius:2px;background:var(--muck-text-3)}
.odc-odds.is-best .odc-win{color:var(--muck-gold)}
.odc-odds.is-best .odc-bar i{background:var(--muck-gold)}

/* buttons and dead cards */
.odc-tools{max-width:1040px;margin-left:auto;margin-right:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--muck-space-3,12px);margin-top:var(--muck-space-4,16px)}
.odc-buttons{display:flex;flex-wrap:wrap;gap:8px}
.odc-dead{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.odc-dead .odc-slot{border-color:var(--muck-line-strong);background:var(--muck-surface-1);color:var(--muck-text-3)}
.odc-dead-label{margin-right:4px;color:var(--muck-text-3);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.odc-status{max-width:1040px;min-height:20px;margin:var(--muck-space-3,12px) auto 0;color:var(--muck-text-3);font-size:13px}

/* phones: the hands stack under the board */
@media (max-width:760px){
  .odc-felt{aspect-ratio:auto;border-radius:var(--muck-radius-card);border-width:6px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px}
  .odc-board{position:static;transform:none;grid-column:1/-1;margin-bottom:6px}
  .odc-felt .odc-pod{position:static;transform:none;min-width:0}
  .odc-deck{gap:4px;padding:10px}
  .odc-suit{gap:3px}
  .odc-deck .acd--md{width:22px;height:30px}.odc-deck .acd--md b{font-size:12px}.odc-deck .acd--md i{font-size:10px}
  .odc-felt .acd--lg,.odc-felt .odc-slot{width:36px;height:50px}
  .odc-board-labels{grid-template-columns:120px 36px 36px}
}

/* Layout v2 (2026-10-20): the table on the left, a compact deck beside it */
.odc-main{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:start;max-width:1180px;margin:0 auto}
.odc-left{min-width:0}
.odc-left .odc-felt{margin-top:0;max-width:none;aspect-ratio:1.7}
.odc-left .odc-tools,.odc-left .odc-status{max-width:none}
.odc-side{position:sticky;top:76px;padding:14px;border:1px solid var(--muck-line);border-radius:var(--muck-radius-card);background:var(--muck-surface-1)}
.odc-side-label{margin:0 0 10px;color:var(--muck-text-3);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.odc-side .odc-deck{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:3px;max-width:none;margin:0;padding:0;border:0;background:none;overflow:visible}
.odc-side .odc-suit{display:contents}
.odc-side .odc-deck .acd--md{width:100%;height:auto;aspect-ratio:5/7;border-radius:4px}
.odc-side .odc-deck .acd--md b{font-size:14px}.odc-side .odc-deck .acd--md i{font-size:11px}
@media (max-width:1100px){
  .odc-main{grid-template-columns:minmax(0,1fr)}
  .odc-left .odc-felt{aspect-ratio:2.1}
  .odc-side .odc-deck{max-width:640px;margin:0 auto}
  /* in the page under the table, not pinned over it: pinned, it covered the hands at the top of the page */
  .odc-side{position:static;margin:16px 0 0;padding:12px}
  .odc-side-label{display:none}
}

/* Five or six hands (Shaun, 2026-10-20: "overlap"): compact boxes, and if any still touch at this width, muck-odds.js
   switches the table to the stacked grid (.odc-felt--grid), the same as phones */
.odc-felt[data-n="5"] .odc-pod,.odc-felt[data-n="6"] .odc-pod{min-width:0;width:128px;gap:4px;padding:7px 8px}
.odc-felt[data-n="5"] .odc-pod-head,.odc-felt[data-n="6"] .odc-pod-head{font-size:12px}
.odc-felt[data-n="5"] .odc-pod .acd--lg,.odc-felt[data-n="6"] .odc-pod .acd--lg,
.odc-felt[data-n="5"] .odc-pod .odc-slot,.odc-felt[data-n="6"] .odc-pod .odc-slot{width:36px;height:50px}
.odc-felt[data-n="5"] .odc-pod .acd--lg b,.odc-felt[data-n="6"] .odc-pod .acd--lg b{font-size:17px}
.odc-felt[data-n="5"] .odc-win,.odc-felt[data-n="6"] .odc-win{font-size:15px}
.odc-felt[data-n="5"] .odc-tie,.odc-felt[data-n="6"] .odc-tie{font-size:10px}
.odc-felt[data-n="6"] .odc-pod[data-seat="1"]{left:9%}.odc-felt[data-n="6"] .odc-pod[data-seat="4"]{left:91%}
.odc-felt[data-n="6"] .odc-pod[data-seat="0"],.odc-felt[data-n="6"] .odc-pod[data-seat="2"]{left:31%}
.odc-felt[data-n="6"] .odc-pod[data-seat="3"],.odc-felt[data-n="6"] .odc-pod[data-seat="5"]{left:69%}
.odc-felt.odc-felt--grid{aspect-ratio:auto;border-radius:var(--muck-radius-card,14px);border-width:6px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:14px}
.odc-felt.odc-felt--grid .odc-board{position:static;transform:none;grid-column:1/-1;margin-bottom:6px}
.odc-felt.odc-felt--grid .odc-pod{position:static;transform:none;width:auto;min-width:0}
.odc-felt[data-n="5"] .odc-nums,.odc-felt[data-n="6"] .odc-nums{flex-direction:column;align-items:flex-start;gap:0}
.odc-felt[data-n="5"] .odc-tie,.odc-felt[data-n="6"] .odc-tie{white-space:nowrap}

/* Bigger cards (Shaun, 2026-10-29: "i feel like the cards are puny"): the table's cards and board slots 60x84 (were 44x60),
   the side deck's column wider so its 52 cards grow with it. Phones and the 5-6 hand compact boxes keep their own sizes. */
@media (min-width:761px){
  .odc-felt .acd--lg,.odc-felt .odc-slot{width:60px;height:84px;border-radius:7px}
  .odc-felt .acd--lg b{font-size:28px}.odc-felt .acd--lg i{font-size:21px}
  .odc-pod{min-width:170px}
}
@media (min-width:1101px){
  .odc-main{grid-template-columns:minmax(0,1fr) 470px;max-width:1260px}
  .odc-side .odc-deck{gap:4px}
  .odc-side .odc-deck .acd--md{border-radius:5px}
  .odc-side .odc-deck .acd--md b{font-size:18px}.odc-side .odc-deck .acd--md i{font-size:14px}
}
/* five or six hands: bigger too (Shaun: "it needs to account for 6 too"): 44x60, the most that keeps six in the oval at
   1440 (measured); muck-odds.js still stacks the table into the grid at widths where they'd touch */
@media (min-width:761px){
  .odc-felt[data-n="5"] .odc-pod,.odc-felt[data-n="6"] .odc-pod{width:136px}
  .odc-felt[data-n="5"] .odc-pod .acd--lg,.odc-felt[data-n="6"] .odc-pod .acd--lg,
  .odc-felt[data-n="5"] .odc-pod .odc-slot,.odc-felt[data-n="6"] .odc-pod .odc-slot{width:44px;height:60px}
  .odc-felt[data-n="5"] .odc-pod .acd--lg b,.odc-felt[data-n="6"] .odc-pod .acd--lg b{font-size:20px}
  .odc-felt[data-n="5"] .odc-pod .acd--lg i,.odc-felt[data-n="6"] .odc-pod .acd--lg i{font-size:15px}
}
/* phones: the hands' cards and the board's slots 46x64 (were 36x50), two hands to a row still fit; the deck's 13 to a row
   already fills the screen's width */
@media (max-width:760px){
  .odc-felt .acd--lg,.odc-felt .odc-slot,
  .odc-felt[data-n="5"] .odc-pod .acd--lg,.odc-felt[data-n="6"] .odc-pod .acd--lg,
  .odc-felt[data-n="5"] .odc-pod .odc-slot,.odc-felt[data-n="6"] .odc-pod .odc-slot{width:46px;height:64px;border-radius:6px}
  .odc-felt .acd--lg b,.odc-felt[data-n="5"] .odc-pod .acd--lg b,.odc-felt[data-n="6"] .odc-pod .acd--lg b{font-size:22px}
  .odc-felt .acd--lg i,.odc-felt[data-n="5"] .odc-pod .acd--lg i,.odc-felt[data-n="6"] .odc-pod .acd--lg i{font-size:17px}
}
/* Hand boxes with room (Shaun, 2026-10-29: "sloppy padding and weird yellow outline"): 16px all round, the cards, the odds
   and the bar spaced evenly; heads-up has no name row (muck-odds.js), so the cards sit 16px from the top too. A full card
   no longer wears the gold ring (only an empty slot can take the next card). */
.odc-pod{gap:12px;padding:16px}
.odc-pod-head{margin-bottom:-2px}
.odc-odds{min-height:32px}
.odc-bar{margin-top:8px}
/* the Win · Tie line never breaks mid-phrase: where it doesn't fit beside the big number it drops under it whole */
.odc-nums{flex-wrap:wrap;column-gap:8px;row-gap:2px}
.odc-tie span{white-space:nowrap}
.odc-win.odc-win--none{color:var(--muck-text-3)}
@media (min-width:761px){
  .odc-felt[data-n="5"] .odc-pod,.odc-felt[data-n="6"] .odc-pod{gap:8px;padding:10px 12px}
}
@media (max-width:760px){
  .odc-felt .odc-pod{gap:10px;padding:14px}
}