/* Artefact Mayhem: find the silhouette in the jumbled collage (Bob 66, 1 Oct 2026). Phones first. */
.game-toolbar.fo-status{row-gap:4px}
@media(max-width:1100px){#fo-magnifier .tool-label,#fo-reset .tool-label{display:none}#fo-magnifier,#fo-reset{width:44px;padding:8px}}
.fo-status .fo-stat{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 4px}
.fo-status .fo-stat b{font-size:14px}
@media(max-width:700px){
  .game-toolbar.fo-status{flex-wrap:wrap}
  .game-toolbar.fo-status #fo-count{flex:1 1 100%;margin-right:0;padding:0 4px}
  .fo-status .fo-stat{margin-right:auto}
}

.fo-play{margin-top:10px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
/* the tray stays under the top edge while the collage is panned and zoomed */
.fo-tray{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:8px 10px;min-height:72px;background:#0d0d0d;color:#efe5cf;border-radius:12px;box-shadow:0 6px 18px #0004}
.fo-target-sil{width:56px;height:56px;flex:none;object-fit:contain;background:#efe5cf;border-radius:8px;padding:5px;pointer-events:none}
.fo-target-text{margin:0;display:flex;flex-direction:column;min-width:0;flex:1}
.fo-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.fo-target-text b{font-size:17px}
.fo-btn,.fo-tab{min-height:44px;min-width:44px;padding:8px 14px;border-radius:8px;border:1px solid #173f3540;background:var(--paper,#fffef4);color:#173f35;font:inherit;font-size:14px;cursor:pointer}
.fo-tray .fo-btn{background:transparent;color:#efe5cf;border-color:#efe5cf66}
.fo-tabs{display:flex;gap:8px;margin:10px 0}
.fo-tab[aria-pressed=true]{background:#173f35;color:#fffef4}
.fo-tab-hint{animation:fo-tab-pulse 1.4s ease-in-out infinite}
@keyframes fo-tab-pulse{50%{box-shadow:0 0 0 5px #f4534055}}

.fo-field{width:min(100%,max(300px,calc((100svh - 150px) * .707)));margin-inline:auto;position:relative;border-radius:12px;overflow:hidden;background:#111;outline-offset:3px}
.fo-viewport{position:relative;width:100%;aspect-ratio:900/1273;overflow:hidden;touch-action:pan-y pinch-zoom;cursor:crosshair;-webkit-user-select:none;user-select:none}
.fo-viewport.zoomable{touch-action:none;cursor:grab}
.fo-layer{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.fo-layer[hidden]{display:none}
.fo-layer img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
.fo-outlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fo-outline{fill:rgba(255,236,170,.16);stroke:#fff3c2;vector-effect:non-scaling-stroke;stroke-width:3px;filter:drop-shadow(0 0 4px #ffd36a)}
.fo-field.fo-unavailable{opacity:.55;pointer-events:none}

/* hint: a soft pulse over the quadrant that holds the shape */
.fo-pulse{position:absolute;width:50%;height:50%;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(255,236,170,.4),rgba(255,236,170,0) 68%);animation:fo-pulse 1.8s ease-in-out infinite}
.fo-pulse.fo-q-left{left:0}.fo-pulse.fo-q-right{left:50%}.fo-pulse.fo-q-top{top:0}.fo-pulse.fo-q-bottom{top:50%}
@keyframes fo-pulse{50%{opacity:.25;transform:scale(1.08)}}

.fo-shake{animation:fo-shake .36s}
@keyframes fo-shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.fo-penalty{position:absolute;left:50%;top:14px;transform:translateX(-50%);padding:4px 12px;border-radius:99px;background:#f45340;color:#fff;font-weight:700;font-size:14px;pointer-events:none;animation:fo-rise .9s forwards}
@keyframes fo-rise{to{opacity:0;top:0}}

.fo-crosshair{position:absolute;left:0;top:0;width:34px;height:34px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #000a;pointer-events:none;display:none}
.fo-crosshair.show{display:block}
.fo-lens{position:absolute;left:0;top:0;width:200px;height:200px;border-radius:50%;overflow:hidden;pointer-events:none;opacity:0;border:3px solid #efe5cf;box-shadow:0 8px 24px #0008;z-index:4;background:#111}
.fo-lens img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;pointer-events:none}
@media(any-pointer:coarse){.fo-lens,#fo-magnifier{display:none}}

.fo-sils-wrap{margin-top:18px}
/* the label card slides in over the bottom of the screen */
.fo-label{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;width:min(92vw,420px);padding:10px 12px;border-radius:14px;background:#fffef4;color:#173f35;border:2px solid #173f35;box-shadow:0 10px 30px #0006;animation:fo-label-in .3s}
.fo-label[hidden]{display:none}
.fo-label-photo{width:64px;height:64px;object-fit:cover;border-radius:8px;flex:none}
.fo-label p{margin:0;display:flex;flex-direction:column;flex:1;min-width:0}
.fo-label-name{font-size:17px}
.fo-label-museum{font-size:13px;opacity:.85}
.fo-label-close{min-width:44px;min-height:44px;font-size:24px;line-height:1;border:0;background:transparent;color:inherit;cursor:pointer}
@keyframes fo-label-in{from{opacity:0;transform:translate(-50%,12px)}}
.fo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* "Your finds": a card joins the table only once its artefact has been found */
.fo-card:not(.matched){display:none}
.fo-cards:not(:has(.matched)){min-height:0}
@media(max-width:699px){html.p3-webgl main .p3-stage[data-p3-scene="mayhem"]{height:min(72svh,640px)}}
.fo-silhouettes .fo-sil-btn:focus-visible,.fo-field:focus-visible{outline:3px solid #f45340;outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .fo-pulse,.fo-tab-hint,.fo-label{animation:none}
  .fo-shake{animation:none;outline:3px solid #f45340}
  .fo-penalty{animation:none;opacity:.9}
}