.by{place-items:center;width:100cqw;height:100cqh;display:grid;position:relative}.by-card{border:2px solid color-mix(in srgb,var(--gs-glow)60%,transparent);background:radial-gradient(90% 60% at 50% 0%,color-mix(in srgb,var(--gs-rim)22%,transparent),transparent 75%),#120b14;width:min(100cqw,30rem);height:min(100cqh,33rem);box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 26px color-mix(in srgb,var(--gs-glow)20%,transparent);border-radius:1.125rem;grid-template-rows:auto minmax(0,1fr) auto;transition:border-color .3s,box-shadow .3s;display:grid;overflow:hidden;container-type:size}.by-card[data-dealt=true]{animation:.34s cubic-bezier(.2,1.3,.4,1) by-deal}.by-card[data-result=win]{border-color:#ffd36e;box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 44px rgba(255,211,110,.55)}.by-card[data-result=lose]{border-color:rgba(255,255,255,.14);animation:.34s ease-out by-thud;box-shadow:0 12px 30px rgba(0,0,0,.55)}.by-banner{color:var(--gs-glow);letter-spacing:.08em;text-align:center;text-transform:uppercase;border-bottom:2px dashed rgba(255,255,255,.14);padding:.5rem .75rem;font-size:max(.9375rem,min(6.4cqw,1.5rem));font-weight:900;line-height:1.15}.by-banner span{display:inline-block}.by-card[data-result=win] .by-banner{color:#ffd36e;text-shadow:0 0 18px rgba(255,211,110,.75)}.by-card[data-result=win] .by-banner span{animation:.42s cubic-bezier(.2,1.5,.4,1) .18s backwards by-slam}.by-card[data-result=lose] .by-banner{color:var(--mf-text-muted)}.by-field{min-height:0;position:relative}.by-tiles,.by-keys{grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr));display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.by-tiles{gap:.375rem;padding:.5rem}.by-tile{border:1px solid color-mix(in srgb,var(--tone)28%,transparent);background:radial-gradient(70% 70% at 50% 45%,color-mix(in srgb,var(--tone)16%,transparent),transparent 80%),rgba(255,255,255,.04);border-radius:.75rem;place-items:center;min-width:0;min-height:0;transition:opacity .3s,filter .3s;display:grid}.by-mark{width:min(19cqw,26cqh);height:min(19cqw,26cqh);color:var(--tone);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--tone)55%,transparent))}.by-tile[data-hit=true]{background:radial-gradient(70% 70% at 50% 45%,color-mix(in srgb,var(--tone)34%,transparent),transparent 85%),rgba(255,211,110,.1);animation:by-hit .6s cubic-bezier(.2,1.4,.4,1)calc(.26s + var(--n)*.1s)backwards;border-color:#ffd36e;box-shadow:0 0 18px rgba(255,211,110,.65)}.by-tile[data-miss=true]{filter:saturate(.3);opacity:.45}.by-card[data-result=lose] .by-tile[data-miss=true]{opacity:.7}.by-foil{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.by-foil[data-live=true]{cursor:crosshair;touch-action:none}.by-foil[data-gone=true]{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .26s,visibility 0s linear .26s}.by-hint{opacity:0;pointer-events:none;background:rgba(255,255,255,.28);border:2px solid rgba(255,255,255,.85);border-radius:50%;width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem;animation:1.5s ease-in-out 1.1s infinite by-rub;position:absolute;top:72%;left:50%;box-shadow:0 0 16px rgba(255,255,255,.5)}.by-keys{pointer-events:none}.by-key{background:0 0;border:0;border-radius:.75rem;min-width:0}.by-key:focus-visible{outline-offset:-5px;outline:3px solid #fff;box-shadow:inset 0 0 0 8px rgba(18,11,20,.45)}.by-odds{color:var(--mf-text-muted);text-align:center;padding:.3125rem .75rem .4375rem;font-size:.6875rem;line-height:1.2}.by-dust{pointer-events:none;width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.by-progress{min-width:0;height:3.5rem;color:var(--mf-text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;flex:1;align-items:center;gap:.625rem;font-size:.875rem;font-weight:700;display:flex}.by-pips{gap:.25rem;display:inline-flex}.by-pips span{background:rgba(255,255,255,.12);border-radius:3px;width:.625rem;height:.875rem;transition:background .2s}.by-pips span[data-on=true]{background:var(--gs-glow);box-shadow:0 0 6px color-mix(in srgb,var(--gs-glow)70%,transparent)}.by-tally{border:1px solid color-mix(in srgb,var(--gs-glow)45%,transparent);color:var(--gs-glow);font-variant-numeric:tabular-nums;border-radius:999px;padding:.25rem .625rem;font-size:.75rem;font-weight:800;display:inline-block}@keyframes by-deal{0%{opacity:0;transform:translateY(-16%)rotate(-3deg)scale(.94)}}@keyframes by-thud{30%{transform:translateY(5px)}60%{transform:translateY(-2px)}}@keyframes by-slam{0%{opacity:0;transform:scale(2.1)rotate(-4deg)}}@keyframes by-hit{0%{transform:scale(.7)}45%{transform:scale(1.14)rotate(-4deg)}70%{transform:scale(.98)rotate(3deg)}}@keyframes by-rub{0%,to{opacity:0;transform:translate(-3.5rem)}20%,80%{opacity:1}50%{transform:translate(3.5rem)}}@container (height<=15rem){.by-odds{display:none}}@media (prefers-reduced-motion:reduce){.by-card,.by-tile,.by-pips span{transition:none}.by-card[data-dealt=true],.by-card[data-result=lose],.by-card[data-result=win] .by-banner span,.by-tile[data-hit=true]{animation:none}.by-foil[data-gone=true]{transition:none}.by-hint{display:none}}
