/* Ongoing play: the ghost album, the Halloween level and the puzzle player. Uses the Play page palette and the quick-games tiles. */
.op-panel{margin-top:24px;border:1px solid #65563f;border-radius:8px;background:#0d202b;padding:26px 24px}
.op-panel[hidden]{display:none}
.op-panel>h2{margin:0 0 12px;font:500 clamp(26px,4.5vw,34px)/1.15 var(--serif);color:#f0e5d3;letter-spacing:-.02em}
.op-rule{margin:14px 0 18px;font-size:15px;line-height:1.55;color:#c9d2d5;max-width:640px}
.op-level{margin:0 0 6px}
.op-level-name{margin:0 0 8px;font-size:18px;color:#f0e5d3}
.op-level-name strong{color:#ffb95e;margin-right:6px}
.op-bar{appearance:none;display:block;width:100%;max-width:420px;height:12px;border:0;border-radius:12px;overflow:hidden;background:#314550;accent-color:#ff9a38}
.op-bar::-webkit-progress-bar{background:#314550}
.op-bar::-webkit-progress-value{background:#ff9a38}
.op-bar::-moz-progress-bar{background:#ff9a38}
.op-togo{margin:8px 0 0;font-size:15px;color:#d9e9df}
.op-album{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px;list-style:none;margin:0;padding:0}
.op-album:focus{outline:none}
.op-friend{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;border:1px solid #425660;border-radius:10px;background:#0a1a24;min-width:0}
.op-friend.is-next{border-style:dashed;border-color:#8a7a52;background:#112b32}
.op-fig{display:inline-flex;width:72px;height:72px}
.op-ghost{width:100%;height:100%}
.op-name{font-size:14px;line-height:1.2;color:#f0e5d3;text-align:center;overflow-wrap:anywhere}
.op-more{margin-top:14px}
.op-empty{margin:14px 0 0;font-size:15px;color:#b4c3c9}
.op-panel .button-quiet,.op-round .button,.op-round .button-quiet{min-height:48px;min-width:48px;padding:12px 18px;font-size:16px;line-height:1.3;white-space:normal}
.op-round .button{background:linear-gradient(#b44d17,#90350f);color:#fff;border-color:#f2a764}
.op-panel button:focus-visible,.op-round button:focus-visible,.garden-friend:focus-visible{outline:3px solid #f8c078;outline-offset:3px}

/* The puzzle player */
.op-round{text-align:center}
.op-prompt{margin:0 auto 12px;font-size:18px;font-weight:700;color:#f0e5d3;max-width:none}
.op-prompt:focus,.op-nice:focus{outline:none}
#play-stage .op-prompt{font-size:18px;max-width:none;margin:0 auto 12px}
.op-wait{margin:10px 0;font-size:15px;color:#c9d2d5}
.op-notice{margin:0 0 10px;padding:10px 12px;border:1px solid #927249;border-radius:5px;background:#332a1a;color:#f2dfc3;font-size:14px;line-height:1.5}
.op-error{margin:10px 0;padding:10px 12px;border:1px solid #927249;border-radius:5px;background:#332a1a;color:#f2dfc3;font-size:15px;line-height:1.5}
.op-grid{display:grid;gap:10px;margin:8px auto 14px;justify-items:center;max-width:480px}
.op-c6{grid-template-columns:repeat(3,minmax(0,1fr))}
.op-c8,.op-c10,.op-c12{grid-template-columns:repeat(4,minmax(0,1fr))}
.op-o4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:300px}
.op-o5,.op-o6,.op-o9{grid-template-columns:repeat(3,minmax(0,1fr))}
.op-o7,.op-o8{grid-template-columns:repeat(4,minmax(0,1fr))}
.op-o4 .op-tile,.op-o5 .op-tile,.op-o6 .op-tile,.op-o9 .op-tile{max-width:120px}
.op-cards .qg-card{max-width:104px}
.op-tile .op-ghost,.op-tile .qg-pumpkin{max-width:84px;max-height:84px}
.op-tile .op-ghost{max-width:90px;max-height:100px}
.qg-card .op-sym,.op-choice .op-sym,.op-step .op-sym{width:44px;height:44px;fill:none;stroke:#ffb95e;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.op-card.is-matched .op-sym{stroke:#bfe9c9}
.op-card .qg-candy{max-width:56px;max-height:56px}
.op-seq{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:8px auto 16px;padding:0;max-width:480px}
.op-step{width:54px;height:54px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;border:2px solid #566a72;border-radius:10px;background:#123040}
.op-step .qg-candy{width:38px;height:38px}
.op-step .op-sym{width:34px;height:34px}
.op-q{border-style:dashed;border-color:#ff9a38;background:#38281b;font-size:30px;font-weight:700;color:#ffb95e}
.op-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 auto 14px;max-width:420px}
.op-choice{min-height:96px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:2px solid #566a72;border-radius:12px;background:#123040;color:#f0e5d3;font:inherit;font-size:14px;cursor:pointer}
.op-choice:hover:not(:disabled){border-color:#ff9a38}
.op-choice .op-sym{width:46px;height:46px}
.op-choice .qg-candy{width:52px;height:52px}
.op-choice.is-tried{opacity:.45}
.op-choice.is-odd{border-color:#ff9a38;background:#38281b;opacity:1}
.op-choice:disabled:not(.is-odd){opacity:.5}
.op-nice{margin:8px 0 6px;font-size:21px;font-weight:700;color:#bfe9c9}
.op-note{margin:4px auto 8px;font-size:15px;line-height:1.5;color:#c9d2d5}
.op-levelup{margin:8px 0;font-size:17px;font-weight:700;color:#ffb95e}
.op-meet{padding:6px 0}
.op-meet-art{display:inline-flex;width:140px;height:140px;animation:op-pop .5s ease-out}
.op-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:10px}
.op-levelbox{margin-top:16px;text-align:left}
.op-levelbox:empty{display:none}
.op-levelbox .op-bar{max-width:none}
.qg-extra-note{margin:10px 0 0;font-size:13px;line-height:1.5;color:#b4c3c9}
@keyframes op-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}

/* The next friend in the seated garden */
.garden-album{grid-column:1/-1;display:flex;justify-content:center}
.garden-friend{display:flex;align-items:center;gap:14px;width:100%;max-width:420px;min-height:88px;padding:12px 18px;border:2px dashed #ffb95e;border-radius:44px;background:#1a2f36;color:#f5dfbb;font:inherit;text-align:left;cursor:pointer}
.garden-friend:hover:not(:disabled){background:#243e44}
.garden-friend:disabled{opacity:.7;cursor:default}
.garden-friend .op-fig{flex:none}
.garden-friend-text{display:flex;flex-direction:column;gap:2px}
.garden-friend-text strong{font-size:18px}
.garden-friend-text small{font-size:14px;color:#c8d9d4}
@media(max-width:700px){.op-panel{padding:20px 14px}.op-album{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}}
@media(max-width:420px){.op-c10{grid-template-columns:repeat(4,minmax(0,1fr))}.op-seq{gap:6px}.op-step{width:48px;height:48px}.garden-friend{padding:10px 14px;gap:10px}}
@media(prefers-reduced-motion:reduce){.op-panel *,.op-round *,.garden-friend{animation:none!important;transition:none!important}}