/* Squizardry, coming soon: the picture reel and the stages of development (js/sqz-reel.js fills them in) */
.sqz-reel{max-width:900px;margin:0 auto;outline:none}
.sqz-frame{display:grid;position:relative;border-radius:12px;overflow:hidden;background:#120e1c;border:3px solid #2a2140;box-shadow:0 10px 30px rgba(10,6,20,.35)}
/* the pictures are stacked and cross-fade, so the next one is always ready (never a blank frame while it decodes) */
.sqz-slide{margin:0;grid-area:1/1;opacity:1;transition:opacity .35s ease}
.sqz-slide[hidden]{display:block;opacity:0;pointer-events:none}
.sqz-slide img{display:block;width:100%;height:auto;aspect-ratio:832/448;object-fit:cover;image-rendering:pixelated;filter:brightness(1.45) contrast(1.06) saturate(1.15)}  /* (brighter than the game, so the rooms read at a glance) */
.sqz-slide figcaption{padding:10px 64px 12px;background:#1a1428;color:#d9d0ee;font-size:.9rem;line-height:1.45;text-align:center}
.sqz-slide figcaption b{color:#a7e07f;font-weight:700}
.sqz-arrow{position:absolute;top:calc(50% - 30px);transform:translateY(-50%);width:44px;height:78px;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 0 3px rgba(0,0,0,.95)) drop-shadow(0 0 10px rgba(127,194,90,.35));transition:transform .15s}
.sqz-arrow svg{display:block;width:100%;height:100%}
.sqz-arrow.prev{left:10px}.sqz-arrow.prev svg{transform:scaleX(-1)}
.sqz-arrow.next{right:10px}
.sqz-arrow:hover{transform:translateY(-50%) scale(1.08)}
.sqz-arrow:focus-visible{outline:2px solid #a7e07f;outline-offset:2px;border-radius:6px}
.sqz-dots{display:flex;justify-content:center;gap:8px;margin-top:10px}
.sqz-dots button{width:10px;height:10px;border-radius:2px;border:0;padding:0;background:#4b3f68;cursor:pointer}
.sqz-dots button[aria-current]{background:#7fc25a}
@media (max-width:560px){.sqz-arrow{width:28px;height:50px;top:calc(50% - 28px)}.sqz-slide figcaption{padding:8px 12px 10px;font-size:.82rem}}

.sqz-stages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sqz-stages li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:#1d1730;color:#bfb5d6;font-size:.92rem;line-height:1.35}
.sqz-stages .n{flex-shrink:0;width:26px;height:26px;border-radius:6px;display:grid;place-items:center;background:#2c2343;color:#9c8fbd;font-weight:800;font-size:.82rem}
.sqz-stages .t{flex:1}
.sqz-stages .d{flex-shrink:0;font-size:.8rem;font-weight:700;color:#f1c96b;white-space:nowrap}
.sqz-stages .done{color:#8f86a8}.sqz-stages .done .n{background:#2f4a2a;color:#a7e07f}.sqz-stages i{font-style:normal;color:#7fc25a;margin-left:4px}
.sqz-stages .now{background:#2b2147;color:#fff;box-shadow:inset 0 0 0 2px #8b6ee0,0 0 18px rgba(139,110,224,.35)}
.sqz-stages .now .n{background:#8b6ee0;color:#fff}
.sqz-stages em{font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:#8b6ee0;color:#fff;border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:1px}
@media (max-width:420px){.sqz-stages li{flex-wrap:wrap}.sqz-stages .d{width:100%;padding-left:36px}}