/* Dice: board and bar styles, scoped to .dc*. Linked from quick.html after quick.css.
   Payout first (slider and two typed figures), two roll buttons in the bar (under and over, each with its line), both
   win zones drawn at once on two 0 to 100 bars, the big roll number, and the recent rolls. */

/* Bar: two roll buttons, each showing its own line. The way rolled last carries a cream ring. */
.dc-rolls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;min-width:0;max-width:420px}
.dc-roll{min-height:44px;min-width:0;padding:3px 10px;border:0;border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  box-shadow:inset 0 -3px 0 #0003,inset 0 1px 0 #ffffff22;transition:transform .12s var(--ease),filter .12s}
.dc-roll[data-side=under]{background:#2f7a57;color:var(--cream)}
.dc-roll[data-side=over]{background:#c9973f;color:var(--ink)}
.dc-roll:hover:not(:disabled){filter:brightness(1.1)}
.dc-roll:active:not(:disabled){transform:translateY(1px) scale(.98)}
.dc-roll[data-current]{box-shadow:inset 0 -3px 0 #0003,0 0 0 2px var(--felt-deep),0 0 0 4px var(--cream)}
.dc-roll:disabled{opacity:.5;filter:saturate(.6)}
.dc-roll-dir{display:flex;align-items:center;gap:5px;font:600 14.5px/1.1 var(--ui);white-space:nowrap}
.dc-roll-dir svg{width:13px;height:13px;flex:none}
.dc-roll-line{font:600 17px/1 var(--mono);font-variant-numeric:tabular-nums}
@media (max-width:380px){.dc-roll{padding:3px 7px}.dc-roll-dir{font-size:13px}.dc-roll-line{font-size:15px}}
@media (orientation:landscape) and (max-height:500px){.dc-rolls{max-width:none}.dc-roll-dir svg{display:none}}

/* Board */
.dc{position:relative;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);container-type:size}
.dc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0;min-height:44px}
.dc-recent{list-style:none;margin:0;padding:4px 0;display:flex;flex-wrap:wrap;gap:4px;height:36px;overflow:hidden;min-width:0;flex:1 1 auto}
.dc-recent li{padding:5px 8px;border-radius:999px;font:600 12.5px/1 var(--mono);font-variant-numeric:tabular-nums}
.dc-recent li[data-win=true]{background:#f0c46a;color:var(--ink)}
.dc-recent li[data-win=false]{background:#10291ecc;color:var(--cream-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.dc-recent li:first-child{animation:q-pill-in .3s var(--pop)}
.dc-fair{flex:none}
.dc-centre{align-self:center;justify-self:center;width:min(100%,860px);display:flex;flex-direction:column;align-items:center;gap:min(2.4cqh,18px);padding:0 4px;min-height:0}
.dc-figure{margin:0;font:600 min(21cqh,24cqw,160px)/1 var(--serif);font-variant-numeric:tabular-nums lining-nums;color:var(--cream);text-shadow:0 4px 0 #0b1f1666;white-space:nowrap}
.dc-figure[data-state=idle]{color:var(--cream-2);opacity:.5}
.dc-figure[data-state=win]{color:#f0c46a}
.dc-figure[data-state=loss]{color:var(--red-text)}
.dc-figure[data-state=stale]{color:var(--cream-2);opacity:.6}
.dc-sub{margin:calc(-1*min(1.4cqh,10px)) 0 0;font:500 16px/1.2 var(--ui);color:var(--cream-2);min-height:1.2em}
.dc-pop{animation:dc-pop calc(.34s*var(--pace,1)) var(--pop)}
.dc-shake{animation:q-shake calc(.32s*var(--pace,1)) var(--ease)}
@keyframes dc-pop{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1)}}

/* The scale: two bars, under (win zone on the left) and over (win zone on the right), the die above them */
.dc-scale{--under:.495;--over:.505;--roll:.5;--pad:0px;position:relative;width:100%;padding-top:44px;display:grid;gap:7px}
.dc-bar{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:10px}
.dc-bar-label{font:500 13px/1 var(--ui);color:var(--cream-2);text-align:right;white-space:nowrap}
.dc-bar-label b{font:600 14px var(--mono);color:var(--cream)}
.dc-track{position:relative;height:14px;border-radius:999px;background:#5b2420;box-shadow:inset 0 2px 0 #0004;overflow:hidden}
.dc-win{position:absolute;top:0;bottom:0}
.dc-bar[data-side=under] .dc-win{left:0;width:calc(var(--under)*100%);background:linear-gradient(#4aa37a,#2f7a57)}
.dc-bar[data-side=over] .dc-win{right:0;width:calc((1 - var(--over))*100%);background:linear-gradient(#f3cd7c,#c9973f)}
.dc-scale[data-played=under] .dc-bar[data-side=over],.dc-scale[data-played=over] .dc-bar[data-side=under]{opacity:.45}
.dc-ticks{position:relative;height:16px;margin-left:106px}
.dc-ticks span{position:absolute;left:calc(var(--at)*100%);transform:translateX(-50%);font:400 12px var(--mono);color:#cfc6b0b0}
.dc-die{position:absolute;top:0;left:calc(106px + var(--roll)*(100% - 106px));margin-left:-28px;width:56px;height:36px;display:grid;place-items:center;border-radius:10px;
  background:var(--cream);color:var(--ink);box-shadow:0 4px 10px #0007,inset 0 -3px 0 #0002;font:600 15px/1 var(--mono);font-variant-numeric:tabular-nums;pointer-events:none}
.dc-die::after{content:'';position:absolute;bottom:-6px;left:50%;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:inherit;border-top-color:var(--cream)}
.dc-die[data-state=win]{background:#f0c46a}.dc-die[data-state=win]::after{border-top-color:#f0c46a}
.dc-die[data-state=loss]{background:var(--ink);color:var(--red-text)}.dc-die[data-state=loss]::after{border-top-color:var(--ink)}
.dc-die[data-state=stale]{opacity:.55}

/* Payout first: a log-scale slider */
.dc-payout{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:10px;width:100%}
.dc-slider-label{font:500 13px/1 var(--ui);color:var(--cream-2);text-align:right}
.dc-slider{--fill:30%;-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
.dc-slider::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--cream) var(--fill),#10291e var(--fill));box-shadow:inset 0 1px 0 #0004}
.dc-slider::-moz-range-track{height:8px;border-radius:999px;background:#10291e}
.dc-slider::-moz-range-progress{height:8px;border-radius:999px;background:var(--cream)}
.dc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;border:0;
  background:radial-gradient(circle,var(--red) 0 30%,var(--cream) 31% 42%,var(--red) 43%);box-shadow:0 0 0 2px var(--cream),0 3px 8px #0008}
.dc-slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;border:0;background:radial-gradient(circle,var(--red) 0 30%,var(--cream) 31% 42%,var(--red) 43%);box-shadow:0 0 0 2px var(--cream)}
.dc-slider:disabled{opacity:.5}

/* Payout, chance (both typed) and the win */
.dc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.dc-field{margin:0;display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0;padding:6px 8px 8px;border-radius:12px;background:#10291e66;font:400 12.5px/1.15 var(--ui);color:var(--cream-2);text-align:center}
.dc-in{position:relative;display:flex}
.dc-in input{width:100%;min-width:0;height:40px;border-radius:8px;border:1.5px solid var(--line-2);background:var(--felt-dark);padding:0 22px 0 8px;font:500 17px var(--mono);font-variant-numeric:tabular-nums;text-align:center;color:var(--cream)}
.dc-in input:focus{border-color:var(--cream);outline:0}
.dc-in i{position:absolute;right:9px;top:50%;transform:translateY(-50%);font:500 15px var(--mono);font-style:normal;color:var(--cream-2);pointer-events:none}
.dc-profit{justify-content:space-between}
.dc-profit-value{display:flex;align-items:center;justify-content:center;height:40px;font:600 17px var(--mono);font-variant-numeric:tabular-nums;color:#f0c46a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.q-busy .dc-stats,body.q-auto-running .dc-stats,body.q-busy .dc-payout,body.q-auto-running .dc-payout{pointer-events:none}
body.q-auto-running .dc-stats,body.q-auto-running .dc-payout{opacity:.6}
body.q-busy .lb-rail,body.q-auto-running .lb-rail{pointer-events:none}

@container (max-width:520px){
  .dc-bar,.dc-payout{grid-template-columns:70px minmax(0,1fr);gap:8px}
  .dc-ticks{margin-left:78px}
  .dc-die{left:calc(78px + var(--roll)*(100% - 78px));width:52px;margin-left:-26px;font-size:14px}
  .dc-bar-label,.dc-slider-label{font-size:11.5px}.dc-bar-label b{font-size:12.5px}
  .dc-field{padding:5px 5px 6px;font-size:11.5px}.dc-in input{font-size:15px;padding:0 18px 0 4px}.dc-in input[data-long]{font-size:12.5px;padding-right:15px}.dc-in i{right:6px}
  .dc-profit-value{font-size:15px}.dc-sub{font-size:14px}
  .dc-recent li:nth-child(n+5){display:none}
}
@container (max-height:420px){.dc-sub{display:none}.dc-scale{padding-top:40px;gap:5px}.dc-payout .dc-slider{height:40px}.dc-centre{gap:6px}.dc-ticks{display:none}}
@container (max-height:340px){.dc-stats{display:none}}