body.pyramid-page{--card-width-min:40px;--card-width-pref:11vmin;--card-width-max:80px;--card-aspect-ratio:1.42;--card-width:clamp(var(--card-width-min), var(--card-width-pref), var(--card-width-max));--card-height:calc(var(--card-width) * var(--card-aspect-ratio));--gap:clamp(8px, 2vmin, 15px);--vertical-overlap:calc(var(--card-height) * .45)}.pyramid-page .pyramid-board{width:100%;max-width:800px;min-height:calc(var(--vertical-overlap) * 6 + var(--card-height));margin:0 auto;position:relative}.pyramid-page .pyramid-board .card{--row-total-width:calc((var(--r) + 1) * var(--card-width) + var(--r) * var(--gap));--left-offset:calc(50% - (var(--row-total-width) / 2) + var(--c) * (var(--card-width) + var(--gap)));--top-offset:calc(var(--r) * var(--vertical-overlap));left:var(--left-offset);top:var(--top-offset);position:absolute}.pyramid-page .slot,.pyramid-page .card{width:var(--card-width);height:var(--card-height);border-radius:6px}.pyramid-page .pyramid-top-row{justify-content:space-between;width:100%;max-width:800px;margin:0 auto 20px;padding:0 10px;display:flex}.pyramid-page .pyramid-group{gap:var(--gap);display:flex}.pyramid-page .slot{color:#ffffff80;text-align:center;cursor:pointer;border:2px dashed #ffffff4d;justify-content:center;align-items:center;font-size:clamp(.7rem,2vw,1rem);display:flex;position:relative}.pyramid-page .slot .card{text-align:left;position:absolute;top:0;left:0;box-shadow:-2px 2px 5px #00000080}.pyramid-page .card.back{background:var(--card-back-bg);border:var(--card-back-border);box-shadow:var(--card-back-shadow);cursor:pointer}.pyramid-page .card.back:before{content:"";inset:calc(var(--card-width) * .07);border:1.5px solid var(--card-back-frame);border-radius:calc(var(--card-radius,6px) * .6);pointer-events:none;position:absolute}.pyramid-page .card.back *{display:none}.pyramid-page .card.dimmed{filter:brightness(.6);cursor:not-allowed}.pyramid-page .card.selected{border-color:#0f9;transform:translateY(-5px);box-shadow:0 0 15px #0f9,inset 0 0 10px #00ff9980}