/* Dice Section */
.dice-sec{flex-shrink:0;background:#fff;border-bottom:1px solid #e8e5e0;padding:.75rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.75rem}
#dice-container{
  width:100%;height:160px;flex-shrink:0;
  cursor:pointer;              /* iOS Safari: marks element as tappable → fires click */
  touch-action:manipulation;   /* Kills 300ms double-tap delay on iOS */
  -webkit-tap-highlight-color:transparent; /* No blue flash on tap */
}
.htag{position:absolute;font-size:.65rem;font-weight:800;color:#d97706;background:#fffbeb;border:1.5px solid #d97706;padding:2px 7px;border-radius:6px;opacity:0;transition:opacity .15s;pointer-events:none;transform:translate(-50%,-50%);letter-spacing:.03em;box-shadow:0 2px 8px rgba(217,119,6,.15)}
.htag.on{opacity:1}

/* Canvas Overlays */
#canvas-layer{position:absolute;inset:0;pointer-events:none;z-index:100;overflow:hidden}
#held-overlay{position:absolute;inset:0;pointer-events:none;z-index:105;overflow:hidden}

/* Controls */
.ctrl{display:flex;align-items:center;gap:1.25rem}
.rolls-txt{font-size:.8rem;color:#bbb;font-weight:500;min-width:72px;text-align:right}
.btn-roll{background:#111;color:#fff;border-radius:50px;padding:.65rem 1.9rem;font-size:.9rem;font-weight:700;letter-spacing:.02em;transition:all .13s;min-width:130px;text-align:center}
.btn-roll:hover:not(:disabled){background:#333}
.btn-roll:active:not(:disabled){transform:scale(.97)}
.btn-roll:disabled{opacity:.28;cursor:default}

/* Scorecard */
.sc-wrap{flex:1;overflow-y:auto;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff}
table.sc{width:100%;border-collapse:collapse;min-width:240px;background:#fff}
table.sc thead th{padding:.6rem .9rem;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#ccc;text-align:center;border-bottom:2px solid #e8e5e0;white-space:nowrap;position:sticky;top:0;background:#fff;z-index:5}
table.sc thead th:first-child{text-align:left}
table.sc thead th.cur{color:#111}
table.sc tr.sect td{background:#f5f4f0;padding:.28rem .9rem;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:#ccc;border-bottom:1px solid #e8e5e0}
table.sc tr.cat td{padding:.48rem .9rem;border-bottom:1px solid #f2f0eb;font-size:.85rem}
table.sc tr.cat:hover td{background:#fafaf8}
table.sc tr.cat td.cur{background:#f6f9ff}
table.sc tr.cat:hover td.cur{background:#edf4ff}
table.sc tr.bon td{padding:.38rem .9rem;border-bottom:1px solid #e8e5e0;font-size:.78rem;background:#fafaf8}
table.sc tr.bon td.cur{background:#f4f8ff}
table.sc tr.tot td{padding:.65rem .9rem;border-top:2px solid #e8e5e0;font-weight:800;text-align:center;font-size:.88rem}
table.sc tr.tot td:first-child{text-align:left;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#ccc}
table.sc tr.tot td.cur{background:#f6f9ff}
td.cname{text-align:left!important;color:#999;font-weight:500;white-space:nowrap;font-size:.82rem!important}
td.scell{text-align:center}
.v{font-weight:700;font-variant-numeric:tabular-nums;display:inline-block;min-width:1.4rem;text-align:center}
.v.blank{color:#ddd;font-weight:400}
.v.done{color:#111}
.v.pot{color:#2563eb;cursor:pointer}
.v.pot:hover{color:#1d4ed8;text-decoration:underline}
.v.zero{color:#e0ddd8;cursor:pointer;font-weight:400;font-size:.78rem}
.v.zero:hover{color:#ccc}
.v.bon-on{color:#16a34a}
.v.bon-pr{color:#ccc;font-size:.78rem;font-weight:500}
.v.tot{font-size:.92rem}



/* Zero-score misclick confirmation bar */
#score-confirm{
  position:fixed;bottom:0;left:0;right:0;z-index:450;
  background:#1c1c1e;
  transform:translateY(100%);transition:transform .28s cubic-bezier(.32,.72,0,1);
  /* safe-area inset for notched phones */
  padding-bottom:env(safe-area-inset-bottom,0px);
}
#score-confirm.on{transform:translateY(0)}

/* Draining countdown strip at the top of the bar */
#sc-countdown{
  height:3px;background:#fbbf24;width:100%;
  transition:width 4s linear;
}
#sc-countdown.draining{width:0%}

.sc-body{
  display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;padding:.9rem 1.25rem;flex-wrap:wrap;
}
.sc-msg{font-size:.85rem;font-weight:500;color:rgba(255,255,255,.75);flex:1;min-width:0}
.sc-msg strong{color:#fbbf24}
.sc-actions{display:flex;gap:.55rem;flex-shrink:0}

#sc-cancel{
  padding:.48rem 1rem;border-radius:999px;font-size:.82rem;font-weight:600;
  color:rgba(255,255,255,.55);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);font-family:inherit;cursor:pointer;
  transition:background .13s,color .13s
}
#sc-cancel:hover{background:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}

#sc-ok{
  padding:.48rem 1.1rem;border-radius:999px;font-size:.82rem;font-weight:700;
  color:#fff;background:#dc2626;border:none;font-family:inherit;cursor:pointer;
  transition:background .13s
}
#sc-ok:hover{background:#b91c1c}

/* Highlight on the score cell that triggered the confirm bar */
td.confirm-pending{background:#fef3c7!important;outline:2px solid #fbbf24;outline-offset:-2px}


@media(max-width:500px){
  #dice-container{height:120px}
  .dice-sec{padding:.5rem;gap:.5rem}
  table.sc thead th{padding:.4rem .25rem;font-size:.55rem}
  table.sc tr.sect td{padding:.2rem .3rem;font-size:.55rem}
  table.sc tr.cat td{padding:.25rem .3rem;font-size:.75rem}
  table.sc tr.bon td{padding:.2rem .3rem;font-size:.65rem}
  table.sc tr.tot td{padding:.35rem .3rem;font-size:.75rem}
  td.cname{font-size:.7rem!important;white-space:normal;line-height:1.15;max-width:80px}
  .v{min-width:1rem;font-size:.8rem}
  .hdr{padding:.5rem .75rem}
  .btn-roll{padding:.5rem 1rem;font-size:.85rem;min-width:110px}
  .ctrl{gap:.75rem}
}