/* Hi-Lo: board styles, scoped to .hl*. Linked from quick.html after quick.css. The board is a size container
   (.q-board): the ladder of this round's cards runs across the top, the shoe and the card sit on the left of the table
   and the four calls on the right, at every window size. Cards turn in 3D; Quick play and reduced motion shorten or
   remove every movement (quick.css switches all of it off under prefers-reduced-motion). */

.hl{--gap:10px;--W:min(100cqw - 4px,1100px);--toph:clamp(70px,19cqh,118px);--callw:clamp(148px,30cqw,300px);--shoew:clamp(18px,5cqw,70px);
  --ch:min(calc((100cqh - var(--toph) - var(--gap) - 12px)*.96),calc((var(--W) - var(--callw) - var(--shoew) - var(--gap)*3)/.71),430px);--cw:calc(var(--ch)*.71);
  height:100%;width:var(--W);margin:0 auto;display:grid;grid-template-rows:var(--toph) minmax(0,1fr);gap:var(--gap)}
@container (max-width:420px){.hl{--gap:7px;--callw:clamp(132px,40cqw,170px);--toph:clamp(64px,17cqh,86px)}}
@container (max-height:420px){.hl{--toph:64px;--gap:7px}}

/* The ladder: what you hold now, then every card of the round with the call that dealt it */
.hl-top{display:flex;align-items:stretch;gap:8px;min-width:0}
.hl-now{flex:none;margin:0;min-width:clamp(104px,18cqw,190px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:6px 10px;border-radius:14px;background:#10291e99;text-align:center;transition:background .2s,color .2s}
.hl-now-label{font:400 12.5px/1.15 var(--ui);color:var(--cream-2);white-space:nowrap}
.hl-now-value{font:500 clamp(18px,4.2cqh,32px)/1.05 var(--mono);font-variant-numeric:tabular-nums;color:var(--cream);white-space:nowrap}
.hl-now[data-state=idle] .hl-now-value,.hl-now[data-state=wait] .hl-now-value{font:400 15px/1.1 var(--ui);color:var(--cream-2)}
.hl-now[data-state=cash],.hl-now[data-state=paid]{background:var(--cream)}
.hl-now:is([data-state=cash],[data-state=paid]) .hl-now-label{color:#1b1a17b0}
.hl-now:is([data-state=cash],[data-state=paid]) .hl-now-value{color:var(--felt-deep)}
.hl-now[data-state=lost]{background:var(--ink);box-shadow:inset 0 0 0 1.5px var(--red-text)}
.hl-now[data-state=lost] .hl-now-value{color:var(--red-text);font:600 18px/1.1 var(--serif)}
.hl-trail{list-style:none;flex:1 1 0;min-width:0;margin:0;padding:0 2px;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
.hl-trail-empty{margin-right:auto;padding-left:24px;font:400 14px/1.3 var(--ui);color:var(--cream-2)}
.hl-step{--mh:calc(var(--toph)*.5);flex:none;display:flex;flex-direction:column;align-items:center;gap:4px}
.hl-mini{position:relative;width:calc(var(--mh)*.72);height:var(--mh);border-radius:calc(var(--mh)*.12);background:var(--cream);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;box-shadow:0 2px 6px #0006}
.hl-mini b{font:600 calc(var(--mh)*.38)/1 var(--serif)}
.hl-mini svg{width:calc(var(--mh)*.26);height:auto}
.hl-mini[data-suit=hearts],.hl-mini[data-suit=diamonds]{color:var(--red)}
.hl-tag{font:500 11.5px/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;padding:4px 6px;border-radius:999px;color:var(--cream-2)}
.hl-step[data-kind=right] .hl-tag{background:var(--cream);color:var(--felt-deep)}
.hl-step[data-kind=right]:last-child .hl-tag{box-shadow:0 0 0 2px var(--bz-gold,#e3b04b),0 0 14px #e3b04b80}
.hl-step[data-kind=wrong] .hl-tag{background:var(--ink);color:var(--red-text)}
.hl-step[data-kind=wrong] .hl-mini{box-shadow:0 0 0 2px var(--red-text)}
.hl-step[data-kind=skip] .hl-mini{opacity:.6}
.hl-step[data-new]{animation:hl-rung calc(.32s*var(--pace,1)) var(--pop) both}
@keyframes hl-rung{from{opacity:0;transform:translateX(18px) scale(.7)}}
.hl-fair{flex:none;align-self:center;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;border:0;border-radius:10px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--cream);font:600 13px/1 var(--ui)}
.hl-fair:hover{background:#f2ead914}
.hl-fair svg{width:20px;height:20px;flex:none}
@container (max-width:700px){.hl-fair span{display:none}.hl-fair{padding:0}.hl-tag{font-size:10.5px;padding:3px 5px}}
@container (max-width:420px){.hl-now{min-width:96px;padding:4px 6px}.hl-now-label{font-size:11px}.hl-now[data-state=idle] .hl-now-value,.hl-now[data-state=wait] .hl-now-value{font-size:13px}}

/* The table: shoe and card on the left, the calls on the right */
.hl-table{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) var(--callw);gap:var(--gap);align-items:center}
.hl-stage{min-width:0;height:100%;display:flex;align-items:center;justify-content:center;gap:calc(var(--gap)*1.4)}
.hl-shoe{position:relative;flex:none;width:var(--shoew);height:calc(var(--ch)*.84)}
.hl-shoe span{position:absolute;inset:0;border-radius:calc(var(--ch)*.05);background:var(--red);box-shadow:inset 0 0 0 2px #f2ead966,0 3px 8px #0006}
.hl-shoe span:nth-child(1){transform:translate(-8px,6px)}
.hl-shoe span:nth-child(2){transform:translate(-4px,3px)}
.hl-shoe span:nth-child(3){background:var(--red) url('/assets/baize-mark-v5.svg') center/70% auto no-repeat}
.hl-slot{position:relative;flex:none;width:var(--cw);height:var(--ch);perspective:1200px}
.hl-card{position:absolute;inset:0;transform-style:preserve-3d;transition:transform calc(.3s*var(--pace,1)) var(--ease);transform:rotateY(180deg)}
.hl-card[data-up=true]{transform:rotateY(0)}
.hl-top-card[data-state=hidden]{visibility:hidden;transition:none}
.hl-side{position:absolute;inset:0;border-radius:calc(var(--ch)*.06);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 10px 28px #0007,0 2px 4px #0005}
.hl-front{background:linear-gradient(160deg,#fffaf0,var(--cream) 60%,#e9dfc8);color:var(--ink)}
.hl-back{transform:rotateY(180deg);background:var(--red)}
.hl-back::before{content:'';position:absolute;inset:calc(var(--ch)*.04);border-radius:calc(var(--ch)*.035);box-shadow:inset 0 0 0 2px #f2ead980;
  background:url('/assets/baize-mark-v5.svg') center/auto 30% no-repeat,repeating-linear-gradient(45deg,#ffffff0d 0 6px,transparent 6px 12px)}
.hl-deal{animation:hl-deal calc(.2s*var(--pace,1)) var(--ease) both}
@keyframes hl-deal{from{translate:calc(var(--cw)*-.55) -4%;rotate:-7deg;opacity:.4}}
.hl-shake{animation:q-shake calc(.32s*var(--pace,1)) var(--ease)}

/* A card face */
.hl-face{position:absolute;inset:0;display:grid;place-items:center}
.hl-face[data-suit=hearts],.hl-face[data-suit=diamonds]{color:var(--red)}
.hl-pip{display:flex;flex-direction:column;align-items:center;gap:calc(var(--ch)*.02)}
.hl-pip b{font:600 calc(var(--ch)*.34)/.9 var(--serif);letter-spacing:-.03em}
.hl-pip svg{width:calc(var(--cw)*.3);height:auto}
.hl-index{position:absolute;top:calc(var(--ch)*.05);left:calc(var(--cw)*.08);display:flex;flex-direction:column;align-items:center;gap:2px}
.hl-index b{font:600 calc(var(--ch)*.12)/1 var(--serif);letter-spacing:-.04em}
.hl-index svg{width:calc(var(--ch)*.075);height:auto}
.hl-index-low{top:auto;left:auto;bottom:calc(var(--ch)*.05);right:calc(var(--cw)*.08);transform:rotate(180deg)}
.hl[data-state=lost] .hl-under .hl-front{box-shadow:inset 0 0 0 3px var(--red),0 10px 28px #0007}
.hl:is([data-state=cashed],[data-state=banked]) .hl-under .hl-front{box-shadow:inset 0 0 0 3px var(--win),0 10px 28px #0007}

/* The calls */
.hl-calls{display:grid;grid-template-rows:repeat(4,minmax(44px,1fr));gap:6px;height:min(100%,calc(var(--ch) + 8px));min-height:0}
.hl-call{min-height:44px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"icon name pays" "icon odds pays";align-items:center;column-gap:10px;row-gap:1px;padding:4px 12px;border:0;border-radius:12px;background:var(--felt-dark);color:var(--cream);text-align:left;transition:background .15s,opacity .15s,transform .15s var(--ease)}
.hl-call svg{grid-area:icon;width:30px;height:30px;padding:5px;border-radius:50%;background:var(--red);color:var(--cream)}
.hl-call[data-call=skip] svg{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.hl-call-name{grid-area:name;font:600 19px/1.1 var(--serif);white-space:nowrap}
.hl-call-odds{grid-area:odds;font:400 12px/1.2 var(--ui);color:var(--cream-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-call-pays{grid-area:pays;font:500 16px/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.hl-call[data-state=on]:hover:not([aria-disabled=true]){background:#0b1f16;transform:translateX(-2px)}
.hl-call[data-state=off]{opacity:.42;cursor:default}
.hl-call[aria-disabled=true]{cursor:default}
.hl:not([data-state=live]) .hl-call{opacity:.42}
@container (max-width:520px){
  .hl-call{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon name" "icon pays";column-gap:7px;padding:3px 8px}
  .hl-call svg{width:24px;height:24px;padding:4px}
  .hl-call-name{font-size:16px}
  .hl-call-odds{display:none}
  .hl-call-pays{font-size:13px}
}
@container (min-width:900px) and (min-height:480px){.hl-call-name{font-size:22px}.hl-call-odds{font-size:13.5px}.hl-call-pays{font-size:19px}.hl-call svg{width:36px;height:36px;padding:6px}}