/* Bracket: board and control-bar styles, on top of quick.css. Linked from quick.html and scoped to .br* so other games are
   untouched. Motion is switched off under prefers-reduced-motion by the rule at the end of quick.css. */
.br{--die:clamp(40px,min(14cqh,15cqw),88px);height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(6px,2cqh,16px);padding:2px 6px 0}
.br-top{display:flex;align-items:center;gap:clamp(8px,2.6cqw,20px);min-width:0;padding:4px 2px 0}
.br-dice{display:flex;gap:calc(var(--die)*.16);flex:none}
.br-die{width:var(--die);height:var(--die);border-radius:calc(var(--die)*.2);background:var(--cream);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:calc(var(--die)*.13);box-shadow:0 3px 0 #0000002e}
.br-die i{width:calc(var(--die)*.19);height:calc(var(--die)*.19);border-radius:50%;background:var(--ink);place-self:center}
.br-dice[data-state=idle] .br-die{background:var(--felt-up);box-shadow:inset 0 0 0 2px var(--line-2)}
.br-dice[data-state=idle] .br-die i{background:#f2ead955}
.br-dice[data-state=rolling] .br-die{animation:br-tumble calc(.19s*max(var(--pace,1),.35)) linear infinite alternate}
.br-dice[data-state=rolling] .br-die+.br-die{animation-duration:calc(.16s*max(var(--pace,1),.35));animation-direction:alternate-reverse}
.br-dice[data-state=landed] .br-die{animation:br-land calc(.22s*var(--pace,1)) var(--pop)}
/* After the bracket changes, the last roll stays as a faded reference with no win or loss colour. */
.br-dice[data-state=stale] .br-die{opacity:.55}
.br[data-phase=stale] .br-total{opacity:.45}
@keyframes br-tumble{0%{transform:translateY(-7%) rotate(-16deg)}50%{transform:translateY(3%) rotate(4deg)}100%{transform:translateY(-2%) rotate(15deg)}}
@keyframes br-land{0%{transform:translateY(-6%) scale(1.06)}100%{transform:none}}
.br-total{margin:0;min-width:1.1em;font:600 calc(var(--die)*.7)/1 var(--serif);text-align:center;font-variant-numeric:tabular-nums}
.br-total:empty{min-width:0}
.br-total[data-outcome=loss]{color:var(--red-text)}
.br-read{margin-left:auto;display:grid;justify-items:end;gap:3px;text-align:right;min-width:0}
.br-read p{margin:0;white-space:nowrap}
.br-name{font:600 clamp(18px,4.4cqw,26px)/1.1 var(--serif)}
.br-odds{font:500 clamp(13px,3cqw,16px)/1.25 var(--mono);color:var(--cream-2);font-variant-numeric:tabular-nums}
.br-pays{display:flex;align-items:center;gap:8px;font:500 14px/1 var(--ui);color:var(--cream-2)}
.br-mult{padding:5px 9px;border-radius:8px;background:var(--cream);color:var(--felt-deep);font:500 clamp(16px,3.8cqw,21px)/1 var(--mono);font-variant-numeric:tabular-nums}
.br-field{position:relative;display:grid;grid-template-rows:minmax(0,1fr) 52px;min-height:0;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.q-busy .br-field,.q-auto-running .br-field{cursor:default}
.br-chart{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));min-height:0}
.br-col{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:0;padding:0 2px}
.br-lab{display:grid;gap:2px;padding-bottom:5px;text-align:center;color:var(--cream-2);font:500 12px/1.1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.br-ways{font:600 12.5px/1.1 var(--ui)}
.br-narrow{display:none}
.br-bar{flex:none;height:calc((100% - 44px)*var(--w)/6);border-radius:7px 7px 3px 3px;background:#f2ead91a;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:background .15s,box-shadow .15s,opacity .2s}
.br-col[data-in] .br-bar{background:var(--cream);box-shadow:none}
.br-col[data-in] .br-lab{color:var(--cream)}
.br-col[data-anchor] .br-bar{box-shadow:inset 0 0 0 3px var(--red)}
body:not(.q-busy):not(.q-auto-running) .br-col:hover .br-bar{box-shadow:inset 0 0 0 2px var(--cream)}
body:not(.q-busy):not(.q-auto-running) .br-col[data-in]:hover .br-bar{background:#fff8ea}
.br[data-phase=landed] .br-col:not([data-hit=win]):not([data-hit=loss]) .br-bar{opacity:.62}
.br[data-phase=landed] .br-col:not([data-hit=win]):not([data-hit=loss]) .br-lab{opacity:.6}
.br-col[data-hit=win] .br-bar{background:var(--cream);box-shadow:inset 0 0 0 4px var(--win),0 0 0 3px var(--cream);animation:q-pop calc(.3s*var(--pace,1)) var(--ease)}
.br-col[data-hit=win] .br-lab{color:var(--cream)}
.br-col[data-hit=loss] .br-bar{background:var(--red);box-shadow:inset 0 0 0 2px var(--red-text);animation:q-shake calc(.32s*var(--pace,1)) var(--ease)}
.br-col[data-hit=loss] .br-lab{color:var(--red-text)}
.br-axis{position:relative;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));align-items:center}
.br-band{grid-row:1;height:42px;border-radius:10px;background:var(--cream);margin:0 1px}
.br-num{grid-row:1;position:relative;display:grid;place-items:center;height:42px;font:600 clamp(16px,3.6cqw,21px)/1 var(--serif);color:var(--cream-2);font-variant-numeric:tabular-nums}
.br-num[data-in]{color:var(--felt-deep)}
.br-num[data-hit=win]::after,.br-num[data-hit=loss]::after{content:'';position:absolute;left:22%;right:22%;bottom:5px;height:3px;border-radius:2px;background:var(--win)}
.br-num[data-hit=loss]{color:var(--red-text)}
.br-num[data-hit=loss]::after{background:var(--red-text)}
.br-thumb{position:absolute;z-index:2;top:50%;left:calc(var(--x,0)*100%/11);width:44px;height:52px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:10px;cursor:ew-resize;touch-action:none}
.br-thumb::before{content:'';width:12px;height:38px;border-radius:6px;background:var(--red);box-shadow:0 0 0 2px var(--cream),0 2px 6px #0006}
.br-thumb:hover::before{background:var(--red-up)}
.br-thumb:focus-visible{outline:none}
.br-thumb:focus-visible::before{box-shadow:0 0 0 2px var(--cream),0 0 0 5px var(--red-text)}
.q-busy .br-thumb,.q-auto-running .br-thumb{cursor:default}
/* Only auto play dims the handles; a roll's short busy spell leaves them as they are (no flicker). */
.q-auto-running .br-thumb::before{background:#6d3a33}
@container (max-width:560px){
  .br-wide{display:none}.br-narrow{display:inline}
  .br-col{padding:0 1px}
  .br-lab{font:500 var(--bz-min-text,11px)/1.1 var(--ui);letter-spacing:-.02em;gap:1px;padding-bottom:4px}
  .br-ways{font:600 var(--bz-min-text,11px)/1.1 var(--ui);letter-spacing:-.02em}
  .br-bar{height:calc((100% - 34px)*var(--w)/6);border-radius:5px 5px 2px 2px}
  .br-pays{gap:6px;font-size:13px}
}
@container (max-height:420px){.br-field{grid-template-rows:minmax(0,1fr) 48px}.br-band,.br-num{height:38px}}