:root{
    --felt:#0a7d43; --felt2:#076231; --felt-dark:#043c1e;
    --line:#f6edc9; --gold:#e8c56a; --red:#c62828; --redlite:#e53935;
    --ink:#062916;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:
      radial-gradient(ellipse at 50% -10%,#26262e,#0a0a0d 65%);
    color:#f4e9c8;min-height:100vh;padding:14px;
    -webkit-user-select:none;user-select:none;
  }
  .wrap{max-width:1120px;margin:0 auto}
  h1{
    font-family:Georgia,"Times New Roman",serif;text-align:center;margin:.1em 0;
    font-size:26px;letter-spacing:1px;color:var(--gold);text-shadow:0 2px 6px rgba(0,0,0,.6)
  }
  .sub{text-align:center;font-size:12px;color:#b9a978;margin-bottom:10px;letter-spacing:.5px}

  /* ---------- HUD ---------- */
  .hud{
    display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
    background:linear-gradient(#20130c,#160c07);border:1px solid #3a2a18;border-radius:12px;
    padding:10px 14px;margin-bottom:12px;box-shadow:0 6px 18px rgba(0,0,0,.5)
  }
  .stat{display:flex;flex-direction:column;align-items:center;min-width:92px}
  .stat .lbl{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#a08a5c}
  .stat .val{font-size:22px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
  .stat .val.neg{color:#e57373}
  .point-ind{display:flex;align-items:center;gap:8px}
  .puck{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:15px;border:3px solid #222;letter-spacing:.5px}
  .puck.off{background:#111;color:#e0e0e0;border-color:#000}
  .puck.on{background:#f5f5f5;color:#0a7a34;border-color:#0a7a34;box-shadow:0 0 14px rgba(120,255,160,.5)}

  /* ---------- Chips ---------- */
  .chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
  .chip{width:52px;height:52px;border-radius:50%;cursor:pointer;position:relative;
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;
    border:3px dashed rgba(255,255,255,.75);box-shadow:0 3px 6px rgba(0,0,0,.5);transition:transform .1s}
  .chip:hover{transform:translateY(-3px)}
  .chip.sel{outline:3px solid var(--gold);outline-offset:2px;transform:translateY(-4px)}
  .chip[data-v="1"]{background:#e9edf0;color:#222;border-color:#9aa}
  .chip[data-v="5"]{background:#c0392b}
  .chip[data-v="25"]{background:#1f7a45}
  .chip[data-v="100"]{background:#2c2c2c}
  .chip[data-v="500"]{background:#6a2fb0}
  .chip .txt{text-shadow:0 1px 2px rgba(0,0,0,.6)}

  /* ---------- Table (wood rail + felt) ---------- */
  .rail{
    background:
      repeating-linear-gradient(90deg,#5a3618,#5a3618 8px,#6b4321 8px,#6b4321 16px);
    background-blend-mode:multiply;
    padding:18px;border-radius:120px/80px;
    box-shadow:inset 0 0 0 3px #2c1a0c,inset 0 0 40px rgba(0,0,0,.6),0 12px 34px rgba(0,0,0,.7);
    position:relative
  }
  .rail::before{ /* padded leather bumper */
    content:"";position:absolute;inset:8px;border-radius:112px/72px;
    box-shadow:inset 0 0 22px rgba(0,0,0,.6);pointer-events:none;
    background:linear-gradient(180deg,rgba(120,74,34,.25),rgba(0,0,0,.25))
  }
  .felt{
    position:relative;
    background:
      radial-gradient(ellipse at 50% 8%,var(--felt) 0%,var(--felt2) 55%,var(--felt-dark) 100%);
    border-radius:70px 70px 70px 70px / 50px 50px 50px 50px;padding:22px 26px 22px;
    box-shadow:inset 0 0 60px rgba(0,0,0,.55),inset 0 0 0 3px rgba(246,237,201,.25);
    outline:2px solid rgba(246,237,201,.35);outline-offset:-10px
  }

  /* generic printed cell */
  .cell{
    border:2px solid var(--line);color:var(--line);text-align:center;cursor:pointer;position:relative;
    transition:background .12s;background:rgba(0,0,0,.04)
  }
  .cell:hover{background:rgba(246,237,201,.16)}
  .cell.disabled{opacity:.38;cursor:not-allowed}
  .cell.hot{box-shadow:0 0 0 3px var(--gold),0 0 18px rgba(232,197,106,.85) inset;animation:flash .5s}
  @keyframes flash{0%{background:rgba(232,197,106,.55)}100%{background:rgba(0,0,0,.04)}}
  .cell.marked{box-shadow:0 0 0 3px #7bd88f inset}
  .stencil{ /* the classic stencilled lettering */
    font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:1px;
    color:var(--line);text-shadow:0 1px 0 rgba(0,0,0,.35)
  }
  .odds{font-size:10px;color:#e7d9a6;margin-top:1px}

  /* ---- top place-number boxes ---- */
  .placeRow{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:0 0 8px;
    border:2px solid var(--line);border-radius:70px 70px 8px 8px / 44px 44px 8px 8px;overflow:hidden}
  .num-box{border:0;border-right:2px solid var(--line);min-height:74px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:rgba(0,0,0,.04)}
  .num-box:last-child{border-right:0}
  .num-box .big-n{font-family:Georgia,serif;font-weight:800;font-size:30px;color:var(--gold);line-height:1;
    text-shadow:0 1px 2px rgba(0,0,0,.5)}
  .num-box .place-lbl{font-size:9px;color:#d9c891;letter-spacing:2px;margin-bottom:2px}

  /* ---- middle: COME + DON'T COME on left, prop center on right ---- */
  .mid{display:grid;grid-template-columns:1fr 1.5fr;gap:8px;margin-bottom:8px}
  .leftcol{display:grid;grid-template-rows:auto 1fr;gap:8px}
  .dontcome{min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:6px}
  .come{border-radius:6px;display:flex;align-items:center;justify-content:center}
  .come .stencil{font-size:40px}
  .dontcome .stencil{font-size:16px}

  /* ---- center proposition (stickman) area ---- */
  .propbox{
    border:2px solid var(--line);border-radius:6px;padding:6px;display:flex;flex-direction:column;gap:6px;
    background:
      radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.05),rgba(0,0,0,.06))
  }
  .hardrow{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
  .prop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    border:2px solid var(--line);border-radius:6px;padding:6px 4px;min-height:56px}
  .prop .lab{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--line)}
  .prop .odds{font-size:10px;color:#e7d9a6}
  .hornrow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .band{ /* red stencilled bands: SEVEN / ANY CRAPS */
    border:2px solid var(--line);border-radius:6px;min-height:38px;
    display:flex;align-items:center;justify-content:center;gap:10px;
    background:repeating-linear-gradient(45deg,rgba(198,40,40,.30),rgba(198,40,40,.30) 10px,rgba(198,40,40,.18) 10px,rgba(198,40,40,.18) 20px)
  }
  .band .stencil{font-size:19px;color:#ffdede;text-shadow:0 1px 2px rgba(0,0,0,.6)}
  .band .odds{color:#ffd9d9;margin:0}

  /* mini dice with pips */
  .dpair{display:flex;gap:4px}
  .mdie{width:20px;height:20px;background:#fbfbfb;border-radius:4px;display:grid;
    grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:2px;gap:1px;
    box-shadow:0 1px 2px rgba(0,0,0,.5),inset 0 0 2px rgba(0,0,0,.2)}
  .mdie.red{background:#e53935}
  .mpip{width:4px;height:4px;border-radius:50%;background:#161616;align-self:center;justify-self:center;visibility:hidden}
  .mdie.red .mpip{background:#fff}
  .mpip.on{visibility:visible}

  /* ---- field band ---- */
  .field{border:2px solid var(--line);border-radius:6px;min-height:64px;margin-bottom:8px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;position:relative}
  .field:hover{background:rgba(246,237,201,.16)}
  .field .stencil{font-size:15px;letter-spacing:2px}
  .field .fnums{display:flex;gap:10px;align-items:center;font-family:Georgia,serif;font-weight:800;font-size:20px;color:var(--gold)}
  .field .diamond{border:2px solid var(--line);border-radius:50%;width:30px;height:30px;
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px}
  .field .fpay{font-size:9px;color:#e7d9a6;letter-spacing:1px}

  /* ---- pass line / don't pass — curved bands hugging the rail ---- */
  .lines{display:flex;flex-direction:column;gap:0}
  .lineband{position:relative;border:2px solid var(--line);cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:background .12s}
  .lineband:hover{background:rgba(246,237,201,.16)}
  .dc-row{display:grid;grid-template-columns:1fr;gap:6px;margin-bottom:6px}
  .odds-strip{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px}
  .dontpass{min-height:52px;border-radius:8px 8px 6px 6px}
  .dontpass .stencil{font-size:17px}
  .passline{min-height:64px;border-radius:8px 8px 70px 70px/8px 8px 44px 44px;
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.05))}
  .passline .stencil{font-size:26px;letter-spacing:3px}
  .arrow{color:var(--redlite);font-size:22px;margin:0 12px}
  .subpay{font-size:10px;color:#e7d9a6;display:block}

  /* bet markers (chips placed on the layout) */
  .betmark{position:absolute;bottom:3px;right:3px;background:var(--gold);color:#3a2600;font-weight:800;
    font-size:11px;border-radius:20px;padding:1px 7px;border:2px solid #7a5a12;
    box-shadow:0 2px 4px rgba(0,0,0,.5);min-width:22px;pointer-events:none;z-index:3}
  .betmark.odds{background:#7bd88f;color:#083;border-color:#0a7a34}
  .betmark.dc{background:#9ec5ff;color:#123;border-color:#3b6ea5}
  .betmark.top{bottom:auto;top:3px}

  /* ---------- Dice rolling on the felt ---------- */
  .dicelayer{position:absolute;inset:0;pointer-events:none;z-index:30;overflow:hidden;
    border-radius:inherit}
  .tdie{position:absolute;left:0;top:0;width:60px;height:60px;
    background:linear-gradient(145deg,#fff,#dedede);border-radius:12px;
    box-shadow:0 8px 16px rgba(0,0,0,.6),inset 0 0 5px rgba(0,0,0,.18);
    display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
    padding:8px;gap:2px;opacity:0;will-change:transform}
  .tdie.show{opacity:1}
  .pip{width:11px;height:11px;background:#161616;border-radius:50%;align-self:center;justify-self:center;visibility:hidden}
  .pip.on{visibility:visible}
  /* landing shadow that pulses when dice settle */
  .land-flash{position:absolute;border-radius:50%;background:radial-gradient(rgba(0,0,0,.35),transparent 70%);
    width:140px;height:60px;opacity:0;z-index:29;pointer-events:none}

  /* ---------- Controls ---------- */
  .controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;margin-top:16px}
  .btn{background:linear-gradient(#e8c56a,#c79a2f);color:#3a2600;border:none;border-radius:10px;
    padding:14px 26px;font-size:17px;font-weight:800;cursor:pointer;letter-spacing:.5px;
    box-shadow:0 4px 0 #8a6a1a,0 6px 12px rgba(0,0,0,.4);transition:transform .05s}
  .btn:active{transform:translateY(3px);box-shadow:0 1px 0 #8a6a1a}
  .btn:disabled{filter:grayscale(.6);cursor:not-allowed;opacity:.7}
  .btn.sec{background:linear-gradient(#5a4a34,#3a2c1c);color:#f4e9c8;box-shadow:0 4px 0 #241a10,0 6px 12px rgba(0,0,0,.4)}
  .btn.sm{padding:9px 14px;font-size:13px}

  .log{margin-top:12px;background:rgba(0,0,0,.35);border:1px solid #3a2a18;border-radius:10px;
    padding:8px 12px;font-size:13px;min-height:44px;line-height:1.5;text-align:center}
  .log .win{color:#7bd88f;font-weight:700}
  .log .lose{color:#e57373;font-weight:700}
  .log .info{color:#e8c56a}
  .hint{font-size:11px;color:#a08a5c;text-align:center;margin-top:8px;line-height:1.5}
  .foot{text-align:center;font-size:11px;color:#6f5f42;margin-top:14px}
  .toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:#111;border:1px solid var(--gold);
    color:var(--gold);padding:8px 16px;border-radius:20px;font-size:13px;font-weight:600;opacity:0;
    transition:opacity .3s;pointer-events:none;z-index:50}
  .toast.show{opacity:1}
  @media(max-width:760px){
    .mid{grid-template-columns:1fr}
    .come .stencil{font-size:28px}
    .die{width:52px;height:52px}.pip{width:9px;height:9px}
    .passline .stencil{font-size:20px}
  }

/* ---------- v1.1 usability additions ---------- */
.modebar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:14px 0 2px}
.mode-label{font-size:12px;font-weight:800;color:#d9c891;letter-spacing:.7px;text-transform:uppercase}
.modebtn{border:1px solid #7e6740;background:#2d2419;color:#eadfbf;border-radius:18px;padding:7px 11px;cursor:pointer;font-size:12px;font-weight:700}
.modebtn.active{background:#e8c56a;color:#352400;border-color:#e8c56a;box-shadow:0 0 0 2px rgba(232,197,106,.16)}
.beginner{font-size:12px;color:#d9c891;display:flex;gap:5px;align-items:center;margin-left:4px}
.inspector{margin-top:12px;border:1px solid #6a5634;background:rgba(0,0,0,.28);border-radius:8px;padding:9px 12px;font-size:12px;color:#ddd0aa;text-align:center;min-height:20px}
.stats{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:8px;padding:7px 10px;border-top:1px solid #3a2d1b;border-bottom:1px solid #3a2d1b;font-size:11px;color:#a99467}
.stats b{color:#d9c891}
.cell.legal-target,.lineband.legal-target{box-shadow:inset 0 0 0 2px rgba(123,216,143,.45)}
.cell.mode-target{box-shadow:inset 0 0 0 3px rgba(232,197,106,.60)}
.betmark.dc.odds{background:#b8d4ff;color:#123;border-color:#3b6ea5}
body.remove-mode #table [data-bet]{cursor:not-allowed}
body.remove-mode #table [data-bet].marked,body.remove-mode #table [data-bet]:has(.betmark){cursor:pointer}
@media(max-width:760px){.modebar{align-items:stretch}.modebtn{flex:1 1 42%}.beginner{flex:1 1 100%;justify-content:center}.stats{gap:6px 12px}}

.strategybar{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin:10px 0 4px}
.historypanel{margin:10px auto 0;max-width:980px;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:9px 12px;background:rgba(0,0,0,.16)}
.historyhead{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:13px;margin-bottom:7px}
.historyhead span{opacity:.72}
.rollhistory{display:flex;gap:5px;flex-wrap:wrap;min-height:28px}
.historyroll{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:50%;background:#f4f0df;color:#111;font-weight:800;border:2px solid rgba(0,0,0,.25);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.historyroll.seven{outline:2px solid #ffd85a}
.historyroll.craps{border-style:dashed}
@media(max-width:620px){.historyhead{align-items:flex-start;flex-direction:column}.strategybar .btn{flex:1 1 140px}}

.presetbar{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin:8px 0}
.distributionpanel{margin:10px auto 0;max-width:980px;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:9px 12px;background:rgba(0,0,0,.16)}
.distribution{height:96px;display:flex;align-items:flex-end;justify-content:space-between;gap:4px}
.distcol{flex:1;min-width:20px;height:92px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px}
.distbar{width:min(28px,80%);min-height:4px;border-radius:5px 5px 2px 2px;background:currentColor;opacity:.72}
.distcount,.distlabel{font-size:11px;line-height:1}
.distcount{opacity:.72}
.distlabel{font-weight:800}
.shortcuthelp{max-width:980px;margin:8px auto 0;text-align:center;font-size:12px;opacity:.72}
@media(max-width:620px){.presetbar .btn{flex:1 1 145px}.shortcuthelp{padding:0 8px}}

.advisor{max-width:980px;margin:10px auto 0;padding:11px 14px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(0,0,0,.2);line-height:1.4}
.advisor>div:first-child{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.advisor-tag{font-size:11px;font-weight:800;letter-spacing:.08em;border:1px solid currentColor;border-radius:999px;padding:2px 7px;opacity:.85}
.sessionrecords{max-width:980px;margin:8px auto 0;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:12px;opacity:.88}
@media(max-width:620px){.sessionrecords{gap:8px 14px}.advisor{margin-left:6px;margin-right:6px}}

.sessionbar{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin:8px auto;max-width:980px}
.sessionbar label{font-size:12px;font-weight:700;display:flex;gap:5px;align-items:center}
.sessionbar select{background:rgba(0,0,0,.35);color:inherit;border:1px solid rgba(255,255,255,.25);border-radius:5px;padding:5px 7px}
.goalstatus{max-width:980px;margin:7px auto 0;text-align:center;font-size:12px;opacity:.78;padding:5px 8px;border-radius:6px}
.goalstatus.goal-hit{font-weight:800;opacity:1;border:1px solid currentColor}

.workingbar{display:flex;gap:9px;align-items:center;justify-content:center;flex-wrap:wrap;margin:8px auto;max-width:980px;padding:7px 9px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
@media(max-width:620px){.workingbar .btn{flex:1 1 90px}}

.strategyselect{display:flex;gap:9px;align-items:center;justify-content:center;flex-wrap:wrap;margin:8px auto;max-width:980px}
.strategyselect select{background:rgba(0,0,0,.35);color:inherit;border:1px solid rgba(255,255,255,.25);border-radius:5px;padding:6px 8px}
.strategyselect #strategyProgress{font-size:12px;opacity:.72}
.strategycoach{max-width:980px;margin:7px auto 0;padding:8px 11px;border-left:3px solid currentColor;background:rgba(0,0,0,.14);font-size:13px;line-height:1.4}

.tablelimits{display:flex;gap:9px;align-items:center;justify-content:center;flex-wrap:wrap;margin:8px auto;max-width:980px}
.tablelimits label{font-size:12px;font-weight:700;display:flex;gap:5px;align-items:center}
.tablelimits select{background:rgba(0,0,0,.35);color:inherit;border:1px solid rgba(255,255,255,.25);border-radius:5px;padding:6px 8px}
.payoutsummary{max-width:980px;margin:7px auto 0;padding:8px 11px;background:rgba(0,0,0,.16);border-radius:7px;font-size:13px}

.betledger{max-width:980px;margin:8px auto 0;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:9px 12px;background:rgba(0,0,0,.14)}
.ledgerlist{display:flex;flex-direction:column;gap:6px}
.ledgerrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;background:rgba(255,255,255,.04)}
.ledgername{display:flex;flex-direction:column;gap:1px;font-size:12px}
.ledgername span{opacity:.72}
.ledgertools{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.ledgerbtn{font:inherit;font-size:11px;padding:4px 7px;border-radius:5px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25);color:inherit;cursor:pointer}
.ledgerbtn:hover{background:rgba(255,255,255,.1)}
@media(max-width:620px){.ledgerrow{align-items:flex-start;flex-direction:column}.ledgertools{justify-content:flex-start}}

.trendpanel{max-width:980px;margin:9px auto 0;padding:8px 12px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(0,0,0,.12)}
.trendtrack{height:10px;position:relative;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.trendzero{position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(255,255,255,.65);z-index:2}
.trendfill{position:absolute;height:100%;background:currentColor;opacity:.8;border-radius:999px}
.trendfill.negative{opacity:.45}
.trendmarks{display:flex;justify-content:space-between;font-size:10px;opacity:.6;margin-top:3px}