.pyramid { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 18px; align-items: start; margin: 10px 0 20px; }
.pyramid .game { display: grid; gap: 12px; }
.pyramid .under { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 12px; align-items: stretch; }
.pyramid .mat .corner { position: absolute; right: 14px; top: 10px; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.8); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.pyramid button.hidden { display: none; }
.pyramid .board h3 { margin: 0 0 8px; } .pyramid .board ol { margin: 0; padding-left: 20px; } .pyramid .board li { font-size: 14px; padding: 4px 0; border-top: 1px solid #eee5d8; } .pyramid .board li a { font-weight: bold; color: #3C2F2F; text-decoration: none; } .pyramid .board li small { color: #8a7a68; } .pyramid .board .when { float: right; color: #999; font-size: 12px; }
.pyramid .mat { position: relative; background: radial-gradient(ellipse at 50% 30%, #2f7a3c, #1f5a2a 70%, #163f1e); border-radius: 18px; padding: 40px 16px 16px; box-shadow: inset 0 0 60px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.25); }
.pyramid .mat h2 { position: absolute; left: 18px; top: 12px; margin: 0; font: 700 15px Georgia, serif; color: #cfe8cf; letter-spacing: .04em; }
.pyramid .steps { margin-top: 0; }
.pyramid .prow { display: flex; justify-content: center; gap: 8px; margin: 0 0 7px; }
.pyramid .step { flex: 0 1 92px; min-width: 54px; height: 30px; border-radius: 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); box-shadow: 0 4px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35); position: relative; }
.pyramid .step b { font-size: 17px; color: #fff; } .pyramid .step small { font-size: 10px; color: #fff; opacity: .95; margin-left: 4px; }
.pyramid .step { flex-direction: row; gap: 2px; } .pyramid .step.z5 b { font-size: 20px; }
.pyramid .z1 { background: linear-gradient(#b5b5b5, #8c8c8c); } .pyramid .z2 { background: linear-gradient(#2fbf2f, #0f8f0f); } .pyramid .z3 { background: linear-gradient(#3b6cff, #0247FE); }
.pyramid .z4 { background: linear-gradient(#a65cf0, #7a1fd6); } .pyramid .z5 { background: linear-gradient(#f0d06a, #c9a227); } .pyramid .z6 { background: linear-gradient(#e2525c, #a3151e); } .pyramid .z7 { background: linear-gradient(#555, #111); }
.pyramid .step.done { opacity: .55; filter: saturate(.6); }
.pyramid .step.done::after { content: "\2713"; position: absolute; top: -7px; right: -5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #1f5a2a; font-size: 12px; line-height: 18px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.pyramid .step.here { outline: 3px solid #fff; outline-offset: 2px; transform: translateY(-3px); }
.pyramid .step.fell { outline: 3px solid #d3212d; outline-offset: 2px; }
.pyramid .step.fell::after { content: "\2717"; position: absolute; top: -7px; right: -5px; width: 18px; height: 18px; border-radius: 50%; background: #d3212d; color: #fff; font-size: 12px; line-height: 18px; text-align: center; }
.pyramid .step.lock { opacity: .35; }
.pyramid .picks { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 18px 0 6px; } .pyramid .picks form { margin: 0; }
.pyramid .lpick { border: 0; padding: 0; background: none; cursor: pointer; width: 96px; border-radius: 9px; overflow: hidden; box-shadow: 4px 7px 14px rgba(0,0,0,.45); transition: transform .15s, box-shadow .15s; }
.pyramid .lpick img { width: 100%; display: block; }
.pyramid .lpick:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 6px 12px 20px rgba(0,0,0,.5); }
.pyramid .lpick.idle { cursor: default; opacity: .5; } .pyramid .lpick.idle:hover { transform: none; box-shadow: 4px 7px 14px rgba(0,0,0,.45); }
.pyramid .picks.waiting .lpick { pointer-events: none; opacity: .85; }
.pyramid .picks .lslot { width: 96px; container-type: inline-size; } .pyramid .picks .lslot .card { width: 96px; max-width: none; }
.pyramid .picks .lslot .card .card-front { transform: rotateY(180deg); }
.pyramid .picks .card-back { padding: 0; background: transparent; border: 0; border-radius: 9px; overflow: hidden; box-shadow: 4px 7px 14px rgba(0,0,0,.45); }
.pyramid .picks .card-back .card-image { width: 100%; height: 100%; object-fit: cover; }
.pyramid .lface { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; }
.pyramid .lface b { font-size: 22px; letter-spacing: .06em; } .pyramid .lface small { font-size: 12px; margin-top: 6px; }
.pyramid .lface.bonus { background: linear-gradient(160deg, #f3d978, #c99a22); } .pyramid .lface.bonus b { color: #fff !important; opacity: 1 !important; text-shadow: 0 1px 3px rgba(0,0,0,.5) !important; } .pyramid .lface.bonus small { color: #1a1208 !important; opacity: 1 !important; text-shadow: none !important; font-weight: bold; } .pyramid .lface.stop { background: linear-gradient(160deg, #d3212d, #7a0f15); }
.pyramid .say { text-align: center; color: #fff; margin: 12px 0 0; font-size: 15px; line-height: 1.4; } .pyramid .say b { color: #fff; }

.pyramid .jar, .pyramid .haul { background: #fff8ec; border: 1px solid #e3d6c2; border-radius: 14px; padding: 12px; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.pyramid .jar { text-align: center; display: flex; flex-direction: column; justify-content: center; } .pyramid .jar b.ask { font-size: 22px; font-family: Georgia, serif; } .pyramid .jar .choice { margin-top: auto; padding-top: 10px; } .pyramid .jar b { display: block; font-size: 30px; margin-top: 2px; color: #3C2F2F; } .pyramid .jar span { color: #7a6a58; font-size: 13px; }
.pyramid .jar.lost b { text-decoration: line-through; color: #b3261e; }
.pyramid .haul h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8a7a68; } .pyramid .haul p { margin: 0; font-size: 14px; line-height: 1.45; color: #5a4a3a; }
.pyramid .railrow { display: flex; gap: 6px; flex-wrap: wrap; }
.pyramid .railcard { width: 72px; text-decoration: none; }
.pyramid .railcard .card-front { position: relative; transform: none; backface-visibility: visible; pointer-events: auto; width: 100%; height: auto; aspect-ratio: 750 / 1050; border-radius: 5px; padding: 5%; box-shadow: 1px 2px 5px rgba(0,0,0,.3); }
.pyramid .railcard .card-image { width: 100%; height: 100%; object-fit: contain; display: block; }
.pyramid .haul.lost .railcard { opacity: .5; filter: grayscale(.6); }
.pyramid .choice { display: flex; gap: 10px; align-items: stretch; } .pyramid .choice form { flex: 1; margin: 0; }
.pyramid .choice button { width: 100%; height: 100%; border: 0; border-radius: 12px; padding: 11px 8px; font: 700 14px Arial, sans-serif; cursor: pointer; }
.pyramid .choice button small { display: block; font-weight: normal; font-size: 13px; margin-top: 2px; } .pyramid .choice button.go small { color: #fff; }
.pyramid .choice button.go { background: #d3212d; color: #fff; } .pyramid .choice button.start { background: #177c28; color: #fff; } .pyramid .choice button.keep { background: #d3212d; color: #fff; } .pyramid .choice button[disabled] { opacity: .45; cursor: default; }
.pyramid .railrow:empty { min-height: 100px; }
@media (max-width: 760px) { .pyramid { grid-template-columns: 1fr; } .pyramid .under { grid-template-columns: 1fr; } .pyramid .step { height: 26px; } .pyramid .step b { font-size: 11px; } .pyramid .step small { font-size: 10px; } .pyramid .lpick, .pyramid .picks .lslot, .pyramid .picks .lslot .card { width: 72px; } }

/* the old ladder page, kept until production runs the pyramid; harmless beside it */

.ladder { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; justify-content: center; margin: 10px 0 20px; }
.ladder .rungs { display: flex; flex-direction: column; gap: 2px; width: 140px; }
.ladder .rung { display: flex; justify-content: space-between; padding: 1px 8px; border-radius: 4px; color: #fff; font-size: 12px; line-height: 17px; opacity: .45; }
.ladder .rung.done { opacity: .8; } .ladder .rung .zn small { opacity: .75; font-size: 11px; margin-left: 2px; } .ladder .rung.here { opacity: 1; outline: 2px solid #3C2F2F; }
.ladder .rung.z1 { background: #9a9a9a; } .ladder .rung.z2 { background: #00a300; } .ladder .rung.z3 { background: #0247FE; } .ladder .rung.z4 { background: #8A2BE2; }
.ladder .rung.z5 { background: #c9a227; } .ladder .rung.z6 { background: #D3212D; } .ladder .rung.z7 { background: #222; }
.ladder .lbody { flex: 1; min-width: 280px; max-width: 560px; display: grid; gap: 14px; }
.ladder .picks { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 10px 0; } .ladder .picks form { margin: 0; }
.ladder .lpick { border: 0; padding: 0; background: none; cursor: pointer; width: 96px; border-radius: 10px; overflow: hidden; box-shadow: 4px 6px 12px rgba(0,0,0,.2); }
.ladder .lpick img { width: 100%; display: block; }

.ladder .lpick { transition: box-shadow .15s, filter .15s; } .ladder .lpick:hover { box-shadow: 4px 9px 18px rgba(0,0,0,.32); filter: brightness(1.06); }

.ladder .lflip { display: flex; justify-content: center; margin: 8px 0 12px; }
.ladder .lflip .card { width: 190px; max-width: none; }
.ladder .lface { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; }
.ladder .lface b { font-size: 30px; letter-spacing: .06em; } .ladder .lface small { font-size: 14px; margin-top: 6px; }
.ladder .lface.bonus { background: linear-gradient(160deg, #e8c75a, #b38a1c); } .ladder .lface.stop { background: linear-gradient(160deg, #d3212d, #7a0f15); }
.ladder .lchoice { display: flex; gap: 12px; justify-content: center; align-items: center; } .ladder .lchoice form { margin: 0; }
.lrail .railrow { display: flex; gap: 10px; flex-wrap: wrap; }
.lrail .railcard { width: 76px; text-decoration: none; }
.lrail .railcard .card-front { position: relative; transform: none; backface-visibility: visible; pointer-events: auto; width: 100%; height: auto; aspect-ratio: 750 / 1050; border-radius: 6px; padding: 5%; box-shadow: 2px 3px 6px rgba(0,0,0,.25); }
.lrail .railcard .card-image { width: 100%; height: 100%; object-fit: contain; display: block; }

.ladder .picks .lslot { width: 96px; } .ladder .picks .lslot .card { width: 96px; max-width: none; }
.ladder .lpick.idle { cursor: default; opacity: .55; } .ladder .lpick.idle:hover { box-shadow: 4px 6px 12px rgba(0,0,0,.2); filter: none; }
.ladder .picks.waiting .lpick { pointer-events: none; opacity: .85; }

.ladder .picks .card-back { padding: 0; background: transparent; border: 0; border-radius: 10px; overflow: hidden; box-shadow: 4px 6px 12px rgba(0,0,0,.2); }
.ladder .picks .card-back .card-image { width: 100%; height: 100%; object-fit: cover; }
.lrail h3 small { text-transform: none; letter-spacing: 0; font-weight: normal; margin-left: 6px; }
.lrail .biscuits { margin: 0 0 10px; font-size: 26px; font-weight: bold; color: #3C2F2F; } .lrail.lost .biscuits { text-decoration: line-through; color: #b3261e; } .lrail.lost .railcard { opacity: .55; filter: grayscale(.6); }
.lrail .biscuits + .railrow { margin-top: 4px; }

.ladder .picks .lslot { container-type: inline-size; }
.ladder .picks .lslot .card .card-front { transform: rotateY(180deg); }
.pyramid .step.bone { background: none; box-shadow: none; flex: 0 0 92px; height: 44px; }
.pyramid .step.bone svg { width: 80px; height: 40px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.pyramid .step.bone.here { outline: none; transform: translateY(-3px) scale(1.06); }
.pyramid .step.bone.done::after, .pyramid .step.bone.fell::after { top: 0; right: 4px; }
.pyramid .mat .corner { width: 92px; height: 92px; right: 12px; top: 10px; }
.pyramid .board, .pyramid .board h3, .pyramid .board ol, .pyramid .board li { text-align: left; } .pyramid .board li a { display: inline-block; }
.lslot .card { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.lslot .card .card-back { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
.lslot .card .card-back, .lslot .card .card-front, .lslot .card .card-back *, .lslot .card .card-front * { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.lslot .card .card-back .card-image { z-index: auto; }
.lslot .card .card-back { overflow: visible; }
.pyramid .picks .lslot .card .card-back .card-image { border-radius: 9px; }
.ladder .picks .lslot .card .card-back .card-image { border-radius: 10px; }
.pyramid .nextstep, .ladder .nextstep { animation: ladderLate .3s 2.5s both; } @keyframes ladderLate { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
.pyramid #autonext { text-align: center; margin: 12px 0 0; } .pyramid #autonext button.nextstep { padding: 12px 28px; border: 0; border-radius: 999px; background: #d3212d; color: #fff; font: 600 16px Arial, Helvetica, sans-serif; cursor: pointer; }