.pyr{--pyr-pad: clamp(4px, 1.4cqi, 14px);--pyr-felt-pad: clamp(5px, 1.5cqi, 16px);--pyr-card-w: clamp( 2.05rem, min( calc((100cqi - 2 * var(--pyr-pad) - 2 * var(--pyr-felt-pad)) / 7), max(calc((var(--fold, 100vh - 16rem) - 10rem) / 8.4), 2.05rem) ), 3.7rem );--pyr-u: calc(var(--pyr-card-w) / 2);--pyr-card-h: calc(var(--pyr-card-w) * 1.4);--pyr-pitch: calc(var(--pyr-card-h) * .55);--pyr-gap: clamp(2px, calc(var(--pyr-card-w) * .055), 6px);--pyr-radius: clamp(3px, calc(var(--pyr-card-w) * .08), 9px);--pyr-pile-w: max(calc(var(--pyr-card-w) * 1.12), 2.9rem);--pyr-brass: 232 184 75;--pyr-brass-deep: #B8860B;--pyr-card: #FAF7F0;--pyr-red: #D7263D;--pyr-black: #17141F;--pyr-text: #E8EEF4;--pyr-dim: #94A7B8;--pyr-ease-out: cubic-bezier(.2,.8,.3,1);--pyr-ease-back: cubic-bezier(.2,.8,.3,1.2);position:relative;display:flex;flex-direction:column;gap:clamp(var(--sp-1),1.4cqi,var(--sp-3));inline-size:100%;padding:var(--pyr-pad);color:var(--pyr-text);font:500 15px/1.3 inherit;font-family:inherit;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.pyr__bar{display:flex;align-items:center;gap:var(--sp-1) var(--sp-2);flex-wrap:wrap}.pyr__stat{display:flex;flex-direction:column;justify-content:center;min-width:3.5rem;min-height:44px;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);background:var(--scrim-2);box-shadow:var(--e-sink)}.pyr__stat span{font-size:var(--fs-1);letter-spacing:.02em;color:var(--pyr-dim);font-weight:700;white-space:nowrap}.pyr__stat b{font-size:var(--fs-4);font-variant-numeric:tabular-nums;font-weight:800;line-height:1.1}.pyr__level{display:flex;align-items:center;gap:var(--sp-2)}.pyr__seg-label{font-size:var(--fs-1);font-weight:700;letter-spacing:.02em;color:var(--pyr-dim);white-space:nowrap}.pyr__seg{min-width:168px}.pyr__chip{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-chip);background:rgb(var(--pyr-brass) / .16);color:rgb(var(--pyr-brass));font-weight:800;font-size:var(--fs-1);white-space:nowrap}.pyr__actions{margin-left:auto;display:flex;gap:var(--sp-1)}.pyr__btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);min-height:44px;min-width:44px;padding:0 var(--sp-3);border:1px solid var(--wash-4);border-radius:var(--r-sm);background:var(--wash-2);color:var(--pyr-text);font:inherit;font-weight:700;font-size:var(--fs-1);cursor:pointer;white-space:nowrap;transition:background-color .12s,transform .12s var(--pyr-ease-out)}.pyr__btn svg{flex:none}.pyr__btn:hover:not(:disabled){background:var(--wash-4)}.pyr__btn:active:not(:disabled){transform:translateY(1px)}.pyr__btn:disabled{opacity:.38;cursor:default}.pyr__btn:focus-visible,.pyr__card:focus-visible,.pyr__draw:focus-visible{outline:3px solid rgb(var(--pyr-brass));outline-offset:2px}@container (max-width: 30rem){.pyr__level{order:3;flex:1 0 100%}.pyr__seg{flex:0 1 auto;min-width:0}.pyr__btn span{display:none}.pyr__btn[data-py-action=new] span{display:inline}.pyr__btn{padding:0 var(--sp-2)}.pyr__stat{min-width:2.9rem;padding:var(--sp-1) var(--sp-2)}.pyr__stat b{font-size:var(--fs-3)}}.pyr__table{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(var(--sp-1),1.8cqi,var(--sp-row));padding:var(--pyr-felt-pad);border-radius:clamp(var(--r-sm),2cqi,var(--r-md));background:radial-gradient(ellipse at 50% 26%,rgb(255 255 255 / .06),transparent 60%),repeating-linear-gradient(45deg,rgb(255 255 255 / .014) 0 1px,transparent 1px 3px),var(--surface-bg, radial-gradient(ellipse at 50% 36%, var(--felt-lit) 0%, var(--felt) 55%, var(--felt-deep) 100%));box-shadow:var(--ring-inset),var(--e-sink-deep),var(--e-2);touch-action:manipulation}.pyr__pyramid{position:relative;flex:none;inline-size:calc(var(--pyr-card-w) * 7);block-size:calc(6 * var(--pyr-pitch) + var(--pyr-card-h))}.pyr__slot{position:absolute;left:calc((6 - var(--r)) * var(--pyr-u) + var(--c) * var(--pyr-card-w) + var(--pyr-gap) / 2);top:calc(var(--r) * var(--pyr-pitch));width:calc(var(--pyr-card-w) - var(--pyr-gap));aspect-ratio:5 / 7;pointer-events:none}.pyr__slot .pyr__card{position:absolute;inset:0;width:100%;pointer-events:auto}.pyr__piles{display:flex;align-items:flex-start;justify-content:center;gap:clamp(var(--sp-2),3cqi,var(--sp-7));inline-size:100%}.pyr__pilewrap{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1)}.pyr__pile{position:relative;width:var(--pyr-pile-w);aspect-ratio:5 / 7;border-radius:var(--pyr-radius);background:var(--scrim-1);box-shadow:inset 0 0 0 1.5px var(--wash-4),var(--e-sink)}.pyr__pile .pyr__card{position:absolute;inset:0;width:100%}.pyr__pile--stock .pyr__card{translate:calc(var(--d, 0) * -1.5px) calc(var(--d, 0) * -1.5px)}.pyr__pile--waste .pyr__card{transition:rotate .2s var(--pyr-ease-out)}.pyr__pile--waste .pyr__card:nth-last-child(2){rotate:-4deg}.pyr__pile--waste .pyr__card:nth-last-child(3){rotate:5deg}.pyr__pile--waste:after{content:"";position:absolute;inset:26%;border-radius:var(--r-sm);background:var(--wash-2);pointer-events:none;transition:opacity .14s}.pyr__pile--waste:has(.pyr__card):after{opacity:0}@container (min-width: 40rem){.pyr__table{flex-direction:row;align-items:center;gap:clamp(var(--sp-3h),4cqi,var(--sp-9))}.pyr__piles{flex-direction:column;inline-size:auto;gap:clamp(var(--sp-2),1.6cqi,var(--sp-row))}}.pyr__caption{font-size:var(--fs-1);font-weight:700;letter-spacing:.02em;color:var(--pyr-dim);white-space:nowrap}.pyr__caption b{font-variant-numeric:tabular-nums;color:var(--pyr-text)}.pyr__draw{align-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);min-width:44px;min-height:44px;padding:var(--sp-1) var(--sp-2);border:1px solid var(--pyr-brass-deep);border-radius:var(--r-sm);background:linear-gradient(170deg,rgb(var(--pyr-brass)),var(--pyr-brass-deep));color:#1a1206;font:inherit;font-weight:800;cursor:pointer;box-shadow:var(--e-1),inset 0 1px 0 var(--wash-6);transition:transform .12s var(--pyr-ease-out),filter .12s}.pyr__draw:hover{filter:brightness(1.07)}.pyr__draw:active{transform:translateY(1px)}.pyr__draw.is-pressed{transform:scale(.96)}.pyr__draw-ico{display:flex}.pyr__draw-label{font-size:var(--fs-1);line-height:1}.pyr__draw-sub{font-size:var(--fs-1);font-weight:700;opacity:.72;line-height:1}.pyr__draw.is-spent{background:var(--wash-2);border-color:var(--wash-4);color:var(--pyr-dim);box-shadow:none}.pyr__card{appearance:none;margin:0;padding:0;border:0;background:none;aspect-ratio:5 / 7;border-radius:var(--pyr-radius);perspective:700px;font:inherit;color:inherit;cursor:pointer;will-change:transform}.pyr__card.is-covered{cursor:default}.pyr__card.is-leaving{pointer-events:none;z-index:90}.pyr__card.is-buried{visibility:hidden}.pyr__in{position:absolute;inset:0;display:block;border-radius:inherit;transform-style:preserve-3d;transition:transform .22s var(--pyr-ease-back),translate .14s var(--pyr-ease-out);pointer-events:none}.pyr__card:not(.is-up) .pyr__in{transform:rotateY(180deg)}.pyr__card.is-pressed .pyr__in{transform:scale(.96)}.pyr__card:not(.is-up).is-pressed .pyr__in{transform:rotateY(180deg) scale(.96)}.pyr__face,.pyr__back{position:absolute;inset:0;display:block;border-radius:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:var(--card-shadow),0 0 0 .5px var(--scrim-1)}.pyr__face{background:linear-gradient(160deg,#fff 0%,var(--pyr-card) 60%,#f0ebdf 100%);font-weight:800;font-size:max(var(--fs-1),calc(var(--pyr-card-w) * .21));line-height:1;overflow:hidden;transition:box-shadow .14s var(--pyr-ease-out),filter .14s}.pyr__card--red .pyr__face{color:var(--pyr-red)}.pyr__card--black .pyr__face{color:var(--pyr-black)}.pyr__back{transform:rotateY(180deg);background-color:#fff;background-image:var(--gafc-back);background-size:calc(var(--pyr-card-w) * var(--gafc-back-tile)) calc(var(--pyr-card-w) * var(--gafc-back-tile));background-position:center;background-clip:content-box;padding:calc(var(--pyr-card-w) * .06)}.pyr__back:after{content:"";position:absolute;inset:calc(var(--pyr-card-w) * .06);border-radius:calc(var(--pyr-radius) * .55);box-shadow:var(--ring-inset-2),inset 0 0 0 3px var(--gafc-back-frame);pointer-events:none}.pyr__card.is-covered .pyr__face{filter:brightness(.88) saturate(.94)}.pyr__card.is-shake .pyr__face,.pyr__draw.is-shake,.pyr__btn.is-shake{box-shadow:0 0 0 2px rgb(var(--pyr-brass) / .7)}.pyr__card.is-covered .pyr__face,.pyr__card.is-covered .pyr__back{box-shadow:var(--card-shadow)}.pyr__card.is-selected .pyr__in{translate:0 -10%}.pyr__card.is-selected .pyr__face{box-shadow:0 0 0 2.5px rgb(var(--pyr-brass)),var(--e-2)}.pyr__card.is-target .pyr__in{translate:0 -5%}.pyr__card.is-target .pyr__face{box-shadow:0 0 0 1.5px rgb(var(--pyr-brass) / .9),var(--e-1)}.pyr__card.is-target:after{content:"";position:absolute;z-index:3;top:-3px;right:-3px;width:30%;max-width:14px;aspect-ratio:1;border-radius:50%;background:rgb(var(--pyr-brass));box-shadow:var(--card-shadow)}.pyr__card.is-hinted .pyr__face{box-shadow:0 0 0 2.5px rgb(var(--pyr-brass)),0 0 16px rgb(var(--pyr-brass) / .5);animation:pyr-hint-card .7s ease-in-out 2}.pyr__draw.is-hinted{box-shadow:0 0 0 3px rgb(var(--pyr-brass)),0 0 20px rgb(var(--pyr-brass) / .6);animation:pyr-hint .7s ease-in-out 2}@keyframes pyr-hint-card{0%,to{box-shadow:0 0 0 2.5px rgb(var(--pyr-brass)),0 0 16px rgb(var(--pyr-brass) / .5)}50%{box-shadow:0 0 0 3.5px rgb(var(--pyr-brass)),0 0 24px rgb(var(--pyr-brass) / .7)}}@keyframes pyr-hint{0%,to{box-shadow:0 0 0 3px rgb(var(--pyr-brass)),0 0 20px rgb(var(--pyr-brass) / .6)}50%{box-shadow:0 0 0 4px rgb(var(--pyr-brass)),0 0 28px rgb(var(--pyr-brass) / .8)}}.pyr__status{margin:0;min-height:1.4em;text-align:center;font-size:var(--fs-1);color:#e8eef4d1}.pyr__float{font-size:clamp(var(--fs-2),3.2cqi,var(--fs-4));font-weight:900;color:rgb(var(--pyr-brass));text-shadow:var(--ink-shade),0 0 14px rgb(var(--pyr-brass) / .5)}.pyr__fountain{border-radius:inherit}@media(prefers-reduced-motion:reduce){.pyr__in,.pyr__btn,.pyr__draw,.pyr__face,.pyr__pile--waste .pyr__card,.pyr__pile--waste:after{transition:none!important}.pyr__card.is-hinted .pyr__face,.pyr__draw.is-hinted{animation:none!important}.pyr__card.is-hinted .pyr__face,.pyr__draw.is-hinted{box-shadow:0 0 0 3px rgb(var(--pyr-brass))}}.pyr__stat b.is-spent{color:#ff9aa6}.pyr{--gafc-card-w: var(--pyr-card-w)}
