/* Limbo: board and option styles, scoped to .lb*. Linked from quick.html after quick.css. */

/* Options: the target box with ½ and 2× either side */
.lb-opts{display:flex;align-items:center;gap:10px;min-width:0}
.lb-target-label{font:500 14px var(--ui);color:var(--cream-2)}
.lb-target{flex:1 1 auto;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:4px;min-width:0;max-width:340px}
.lb-target>button{height:44px;border:0;border-radius:10px;background:var(--felt-up);font:500 16px/1 var(--mono);color:var(--cream)}
.lb-target>button:hover:not(:disabled){background:#316b53}
.lb-target>button:disabled{opacity:.45}
.lb-input-wrap{position:relative;display:flex;align-items:center;min-width:0}
.lb-input-wrap input{width:100%;height:44px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--felt-dark);padding:0 30px 0 12px;font:600 18px var(--mono);font-variant-numeric:tabular-nums;text-align:center;color:var(--cream)}
.lb-input-wrap input:focus{border-color:var(--cream);outline:0}
.lb-input-wrap input:disabled{opacity:.6}
.lb-input-wrap span{position:absolute;right:12px;font:500 17px var(--mono);color:var(--cream-2);pointer-events:none}
@media (max-width:420px){.lb-target-label{display:none}.lb-target{max-width:none}}
@media (orientation:landscape) and (max-height:500px){.lb-target-label{display:none}.lb-target{max-width:none}}

/* Board */
.lb{position:relative;height:100%;display:grid;place-items:center;container-type:size}
.lb-corner{position:absolute;z-index:2;top:2px;right:0}
.lb-centre{width:min(100%,820px);display:flex;flex-direction:column;align-items:center;gap:min(3.2cqh,22px);padding:0 4px}
.lb-figure{--chars:5;margin:0;display:flex;align-items:baseline;justify-content:center;white-space:nowrap;
  font:600 min(26cqh,calc(150cqw/var(--chars)),190px)/1 var(--serif);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em;color:var(--cream);
  text-shadow:0 4px 0 #0b1f1666;transition:color .12s}
.lb-x{font-size:.62em;margin-left:.04em;opacity:.8}
.lb-figure[data-state=idle]{color:var(--cream-2);opacity:.55}
.lb-figure[data-state=passing],.lb-figure[data-state=win]{color:#f0c46a}
.lb-figure[data-state=loss]{color:var(--red-text)}
.lb-figure[data-state=stale]{color:var(--cream-2);opacity:.6}
.lb-pop{animation:lb-pop calc(.34s*var(--pace,1)) var(--pop)}
.lb-shake{animation:q-shake calc(.32s*var(--pace,1)) var(--ease)}
@keyframes lb-pop{0%{transform:scale(1)}45%{transform:scale(1.09)}100%{transform:scale(1)}}
.lb-sub{margin:calc(-1*min(2cqh,14px)) 0 0;font:500 16px/1.2 var(--ui);color:var(--cream-2);min-height:1.2em}

/* The rail: a log scale from 1x, the target pin above it, the climbing needle on it, ticks under it */
.lb-rail{--target:.3;--needle:0;position:relative;width:100%;padding:34px 14px 22px;touch-action:none;cursor:pointer}
.lb-track{position:relative;height:14px;border-radius:999px;background:var(--felt-dark);box-shadow:inset 0 2px 0 #0004;overflow:hidden}
.lb-win{position:absolute;inset:0 0 0 calc(var(--target)*100%);background:repeating-linear-gradient(135deg,#d6a44355 0 8px,#d6a44330 8px 16px)}
.lb-fill{position:absolute;inset:0 calc((1 - var(--needle))*100%) 0 0;background:var(--cream);border-radius:999px;opacity:.9}
.lb-rail[data-result=win] .lb-fill{background:#f0c46a}
.lb-rail[data-result=loss] .lb-fill{background:var(--red-text)}
.lb-rail[data-result=idle] .lb-fill,.lb-rail[data-result=stale] .lb-fill{opacity:.35}
.lb-needle{position:absolute;top:calc(34px + 7px);left:calc(14px + var(--needle)*(100% - 28px));width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  background:radial-gradient(circle,var(--red) 0 34%,var(--cream) 35% 44%,var(--red) 45%);box-shadow:0 0 0 2px var(--cream),0 3px 8px #0008;pointer-events:none}
.lb-rail[data-result=idle] .lb-needle{opacity:.6}
.lb-pin{position:absolute;top:0;left:calc(14px + var(--target)*(100% - 28px));height:48px;width:44px;margin-left:-22px;display:flex;justify-content:center;outline-offset:0;border-radius:8px}
.lb-pin::after{content:'';position:absolute;top:24px;bottom:6px;left:50%;width:3px;margin-left:-1.5px;background:var(--red-up);border-radius:2px}
.lb-pin-flag{position:absolute;top:0;padding:3px 8px;border-radius:7px;background:var(--red);color:var(--cream);font:600 13px/1.2 var(--mono);white-space:nowrap;box-shadow:0 2px 6px #0006}
.lb-ticks{position:relative;height:16px;margin-top:6px}
.lb-ticks span{position:absolute;left:calc(var(--at)*100%);transform:translateX(-50%);font:400 12px var(--mono);color:#cfc6b0b0;white-space:nowrap}
.lb-ticks span:first-child{transform:none}
.lb-ticks span:last-child{transform:translateX(-100%)}
.lb-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin:0}
.lb-stats div{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px;border-radius:12px;background:#10291e66;min-width:0}
.lb-stats dt{font:400 12.5px/1.15 var(--ui);color:var(--cream-2)}
.lb-stats dd{margin:0;font:500 19px/1.1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@container (max-width:420px){.lb-stats dd{font-size:16px}.lb-stats div{padding:6px 4px}.lb-sub{font-size:14px}}
@container (max-height:330px){.lb-stats{display:none}.lb-rail{padding-top:30px;padding-bottom:16px}}