/* ===== Mode select cards ===== */
.mcard{display:flex;align-items:center;gap:14px;width:100%;text-align:left;margin:0 0 14px;padding:16px;min-height:104px;border-radius:20px;border:2px solid var(--c-acc);background:var(--c-bg);color:#fff;position:relative;overflow:hidden}
.mcard .mi{font-size:46px;flex:none;width:64px;text-align:center;filter:drop-shadow(0 4px 6px #0006)}
.mcard .wt{flex:1;min-width:0}.mcard b{display:block;font-size:20px}
.mcard small{display:block;opacity:.88;font-weight:500;font-size:12.5px;margin-top:3px;line-height:1.3}
.mcard .cnt{font-size:12px;margin-top:6px;font-weight:700;color:var(--c-acc)}
.wcard .thumb{flex:none;width:72px;height:54px;border-radius:8px;border:2px solid #fff6;box-shadow:0 3px 8px #0006}
/* ===== Jigsaw stage (CSS 3D) ===== */
#jstage{flex:1;position:relative;min-height:0;overflow:hidden;touch-action:none;perspective:1500px;perspective-origin:50% 50%;cursor:grab;user-select:none}
#jstage:active{cursor:grabbing}
#jcam{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform-origin:0 0;will-change:transform}
#jtable{position:absolute;transform-style:preserve-3d}
#jtable .slab{position:absolute;inset:0;border-radius:26px;box-shadow:0 0 0 1px #0004}
#jtable .tbl,#jtable .ghost,#jtable .glow{position:absolute;left:0;top:0;pointer-events:none}
#jtable .tbl{border-radius:26px}
#jtable .ghost{opacity:0;transition:opacity .3s;transform:translateZ(.3px)}
#jtable .ghost.on{opacity:.4}
#jtable .glow{opacity:0;transform:translateZ(.6px)}
#jtable .glow.near{opacity:1}
#jtable .glow.flash{animation:gflash .7s ease-out both}
#jtable .glow.hint{animation:gpulse .55s ease-in-out infinite alternate}
@keyframes gflash{0%{opacity:1;filter:brightness(1.8)}100%{opacity:0}}
@keyframes gpulse{from{opacity:.25}to{opacity:1}}
.pc{position:absolute;left:0;top:0;transform-style:preserve-3d;pointer-events:none;will-change:transform}
.pc .sh{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;pointer-events:none}
.pc .lf{position:absolute;left:0;top:0;width:100%;height:100%;transform-style:preserve-3d}
.pc .ly{position:absolute;left:0;top:0;width:100%;height:100%;background-size:100% 100%;background-repeat:no-repeat}
.pc .top{position:absolute;left:0;top:0;width:100%;height:100%}
.pc .top.flash{animation:tflash .55s ease-out}
@keyframes tflash{0%{filter:brightness(1.9) saturate(1.3)}100%{filter:none}}
.rip{position:absolute;width:80px;height:80px;border-radius:50%;border:4px solid #fff;box-shadow:0 0 18px #fff9;pointer-events:none;transform:translateZ(14px);animation:rip .65s ease-out both}
@keyframes rip{from{opacity:.95;transform:translateZ(14px) scale(.3)}to{opacity:0;transform:translateZ(14px) scale(2.4)}}
/* controls */
.jctl{position:absolute;z-index:6;touch-action:none}
#jorbit{left:10px;bottom:10px;width:68px;height:68px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff40,#0006 70%);border:2px solid var(--acc);display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--acc);cursor:move;box-shadow:0 4px 12px #0007;backdrop-filter:blur(2px)}
#jorbit.on{background:radial-gradient(circle at 35% 30%,#ffffff70,#0008 70%);transform:scale(1.07)}
#jorbit i{position:absolute;inset:7px;border-radius:50%;border:1.5px dashed #fff5}
#jzoom{right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px}
#jzoom button{width:46px;min-height:46px;height:46px;padding:0;border-radius:50%;font-size:20px;background:#0008;border:2px solid var(--acc);color:var(--acc)}
#jwin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000a;z-index:9}
#jwin[hidden]{display:none}
#jwin>div{background:var(--panel);padding:22px 24px;border-radius:20px;text-align:center;border:2px solid var(--acc);width:min(86vw,360px)}
#jwin h2{margin:0 0 6px;font-size:24px}#jwin p{margin:8px 0 14px;opacity:.9}
#jtoast{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--acc);padding:8px 14px;border-radius:20px;font-weight:700;z-index:8;pointer-events:none;max-width:92%;text-align:center;font-size:13px}
#jtoast[hidden]{display:none}
#s-jgame nav button{font-size:13px;white-space:nowrap;padding:0 2px}
#s-jgame nav button[aria-pressed=true]{background:var(--acc);color:#1a1a1a;border-color:#fff}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:7}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:cf linear forwards}
@keyframes cf{to{top:105%;margin-left:40px;rotate:540deg}}
@media (min-width:700px){#s-jgame nav,#s-jgame .hint{max-width:640px;margin-left:auto;margin-right:auto;width:100%}}
@media (max-height:520px) and (orientation:landscape){#jorbit{width:54px;height:54px;font-size:24px}#jzoom{flex-direction:row}}

/* level map spacing so the last label above the fold is never clipped */
#jmap .mapin{margin-bottom:56px}