/* Craps table + bet explorer */
.cr-layout { grid-template-columns: minmax(0, 1fr) 380px; }

.cr-status { display: flex; gap: 12px; align-items: stretch; }
.cr-phase { flex: 1; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel); }
.cr-phase b { font-size: 18px; letter-spacing: 0.05em; }
.cr-phase.on { border-color: rgba(217, 174, 85, 0.7); background: rgba(217, 174, 85, 0.08); }
.cr-onTable { padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel); min-width: 130px; }
.cr-onTable .tile-value { font-size: 18px; }

.cr-puck { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-weight: 900; font-size: 13px; letter-spacing: 0.05em; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.cr-puck.on { background: #fafafa; color: #111; border: 3px solid #111; }
.cr-puck.off { background: #111; color: #fafafa; border: 3px solid #fafafa; }

/* felt */
.cr-felt { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 12px; padding: 14px; }
.cr-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cr-spot {
  appearance: none; font: inherit; color: #f4f8f4; cursor: pointer; text-align: center;
  background: rgba(255, 255, 255, 0.03); border: 2px solid var(--felt-line); border-radius: 10px;
  padding: 8px 6px; min-height: 44px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: background 0.12s, box-shadow 0.12s;
}
.cr-spot:hover { background: rgba(255, 255, 255, 0.10); }
.cr-spot.sel { box-shadow: 0 0 0 2px var(--gold-2); }
.cr-spot.flash { animation: crflash 0.4s 3; }
@keyframes crflash { 50% { background: rgba(241, 207, 133, 0.45); } }
.cr-spot-label { font-weight: 800; letter-spacing: 0.07em; font-size: 14px; }
.cr-spot-sub { font-size: 11px; opacity: 0.8; letter-spacing: 0.02em; }
.cr-stack { display: flex; justify-content: center; margin-top: 2px; }
.cr-stack .chip, .cr-num .chip { pointer-events: none; }
.remove-mode .cr-spot.has { box-shadow: 0 0 0 2px var(--red); }
.remove-mode .cr-spot:not(.has) { opacity: 0.55; }
.cr-dim { opacity: 0.55; font-size: 11px; letter-spacing: 0.06em; }

.cr-nums { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.cr-num { border: 2px solid var(--felt-line); border-radius: 10px; padding: 4px; display: flex; flex-direction: column; gap: 4px; position: relative; min-width: 0; background: rgba(0,0,0,0.08); }
.cr-num.is-point { border-color: #fff; background: rgba(255, 255, 255, 0.10); }
.cr-dcstrip { min-height: 26px; display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; border-bottom: 1px dashed rgba(255,255,255,0.35); padding-bottom: 3px; font-size: 10px; }
.cr-place { border: 0; min-height: 64px; }
.cr-place .cr-spot-label { font-size: 26px; font-family: Georgia, "Times New Roman", serif; color: #fff4c9; }
.cr-buy { min-height: 30px; padding: 2px; border-width: 1px; }
.cr-buy .cr-spot-label { font-size: 11px; }
.cr-comeon { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; font-size: 10px; background: rgba(0,0,0,0.18); border-radius: 8px; padding: 3px; }
.cr-num .cr-puck { position: absolute; top: -12px; right: -8px; width: 34px; height: 34px; font-size: 11px; }

.cr-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 8px; }
.cr-come { min-height: 64px; }
.cr-come .cr-spot-label { font-size: 22px; font-family: Georgia, serif; color: #ffd76a; }
.cr-dc .cr-spot-label, .cr-dp .cr-spot-label { font-size: 12px; }
.cr-field { min-height: 60px; }
.cr-field .cr-spot-label { font-size: 20px; font-family: Georgia, serif; color: #ffd76a; }
.cr-row4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 8px; }
.cr-bigs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cr-big .cr-spot-label { font-size: 12px; color: #ff9d95; }
.cr-dpwrap, .cr-passwrap { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.cr-dpwrap > .cr-spot, .cr-passwrap > .cr-spot { flex: 1; min-width: 0; }
.cr-pass { min-height: 64px; }
.cr-pass .cr-spot-label { font-size: 24px; font-family: Georgia, serif; color: #fff; letter-spacing: 0.12em; }
.cr-passwrap .cr-dim { align-self: center; max-width: 180px; }

.cr-oddsctl { display: flex; align-items: center; gap: 4px; }
.cr-odds { min-height: 40px; padding: 4px 8px; border-style: dashed; }
.cr-odds .cr-spot-label { font-size: 11px; }
.cr-num .cr-odds { min-height: 30px; padding: 2px 5px; }
.cr-max { min-height: 30px; padding: 3px 8px; font-size: 12px; }
.cr-num .cr-max { min-height: 26px; padding: 2px 5px; font-size: 10.5px; }

/* beginner emphasis */
.beginner .cr-spot.begin { border-color: var(--gold-2); box-shadow: 0 0 0 1px rgba(241, 207, 133, 0.35), 0 0 16px rgba(241, 207, 133, 0.25); }
.beginner .cr-oddsctl.begin .cr-odds { border-color: var(--gold-2); }
.beginner .exotic { opacity: 0.75; }

/* propositions */
.cr-props { border: 2px solid var(--felt-line); border-radius: 12px; padding: 8px; background: rgba(0,0,0,0.15); align-self: start; }
.cr-props.exotic-box { background: rgba(60, 10, 10, 0.25); border-color: rgba(255, 157, 149, 0.6); }
.cr-props.exotic-box .cr-spot { opacity: 0.82; }
.cr-props-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; margin-bottom: 6px; }
.cr-props-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cr-props-grid .cr-spot { min-height: 50px; padding: 4px; }
.cr-props-grid .cr-spot .cr-spot-label { font-size: 12px; color: #ffe08a; }
.cr-props-grid .wide { grid-column: span 2; }

/* controls */
.cr-controls .chip-selector { gap: 6px; }
.cr-roll { min-width: 120px; letter-spacing: 0.12em; }
.cr-hint { margin-top: 8px; }

/* dice */
.cr-dice-panel { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cr-dice { display: flex; gap: 16px; justify-content: center; padding: 6px 0; }
.cr-die { width: 64px; height: 64px; background: linear-gradient(145deg, #fff, #e3e3e3); border-radius: 12px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 9px; box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 -3px 0 rgba(0,0,0,0.12); }
.cr-die span { display: block; }
.cr-die span.pip { width: 12px; height: 12px; border-radius: 50%; background: #b3121b; place-self: center; }
.cr-dice.rolling .cr-die { animation: crshake 0.14s infinite; }
@keyframes crshake { 0% { transform: rotate(-8deg) translateY(-2px); } 50% { transform: rotate(8deg) translateY(2px); } 100% { transform: rotate(-8deg); } }
.cr-rolltext { font-size: 20px; font-weight: 700; min-height: 28px; text-align: center; }

.cr-rules { margin: 0 0 8px; padding-left: 18px; }
.cr-rules li { margin-bottom: 4px; }
.cr-ovl th { width: 46%; text-transform: none; font-size: 12.5px; letter-spacing: 0; color: var(--muted); }
.cr-overlay .callout { margin-top: 10px; }
.cr-events { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13.5px; }
.cr-events li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--grid); }
.cr-events .ev-win span:last-child { color: #7ee08b; }
.cr-events .ev-lose span:last-child { color: #ff8a84; }
.cr-events .ev-move span:last-child, .cr-events .ev-off span:last-child, .cr-events .ev-returned span:last-child, .cr-events .ev-push span:last-child { color: var(--muted); }
.cr-net { margin-top: 8px; }
.cr-hist { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.cr-h { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 7px; background: var(--panel-3); font-weight: 700; font-size: 13px; }
.cr-h.seven { background: rgba(242, 92, 84, 0.25); color: #ff9d95; }
.cr-h.pt { background: rgba(217, 174, 85, 0.16); color: var(--gold-2); }
.cr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-challenge { border-color: var(--gold); margin-bottom: 16px; }
.cr-challenge .progress { margin: 8px 0; }
.cr-qopts { grid-template-columns: 1fr 1fr; }

/* ---------- explorer ---------- */
.cx-panel { min-width: 0; }
.cx-panel .panel-head { flex-wrap: wrap; }
.cx-panel .seg { flex-wrap: wrap; max-width: 100%; }
.cx-table th[data-sort] { cursor: pointer; user-select: none; }
.cx-table th[data-sort]:hover { color: var(--text); }
.cx-table th.sorted::after { content: " ▾"; }
.cx-table th.sorted.asc::after { content: " ▴"; }
.cx-table tr.cx-detail td { color: var(--muted); font-size: 12.5px; padding-top: 0; }
.cx-cards { display: none; gap: 10px; }
.cx-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.cx-card h3 { margin: 0 0 6px; display: flex; justify-content: space-between; gap: 8px; }
.cx-card dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 8px 0 0; font-size: 13px; }
.cx-card dt { color: var(--muted); }
.cx-card dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cx-edgebar { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; margin-top: 4px; min-width: 60px; }
.cx-edgebar > div { height: 100%; background: var(--amber); }
.cx-ways { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.cx-ways span { width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; }
.cx-ways .w { background: var(--a-stand); } .cx-ways .l { background: var(--a-hit); }
.cx-math { font-family: var(--mono); font-size: 13px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; overflow-x: auto; }

@media (max-width: 1100px) {
  .cr-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .cr-felt { grid-template-columns: minmax(0, 1fr); padding: 8px; border-width: 6px; }
  .cr-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
  .cr-num .cr-puck { top: -8px; right: -4px; }
  .cr-place .cr-spot-label { font-size: 22px; }
  .cr-props-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cr-props-grid .wide { grid-column: span 2; }
  .cr-status { flex-direction: column; }
  .cx-table-wrap { display: none; }
  .cx-cards { display: grid; }
}
@media (max-width: 480px) {
  .cr-row2, .cr-row4 { grid-template-columns: minmax(0, 1fr); }
  .cr-props-grid { grid-template-columns: 1fr 1fr; }
  .cr-passwrap, .cr-dpwrap { flex-direction: column; }
  .cr-qopts { grid-template-columns: 1fr; }
  .cr-die { width: 54px; height: 54px; padding: 7px; }
  .cr-die span.pip { width: 10px; height: 10px; }
  .cr-controls .row.between { flex-direction: column; align-items: stretch; }
  .cr-roll { width: 100%; }
}

/* Buy / Lay row inside each number box */
.cr-buylay { display: flex; gap: 4px; }
.cr-buylay > * { flex: 1; }
.cr-lay .cr-spot-label { letter-spacing: 0.08em; }