: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}
  }