/* play/3d/p3.css - Museum Mosaic games in 3D (Bob 69).
 * The mode is set in <head> by gate.js before the first paint, so every rule
 * here reserves its space from the start (CLS 0):
 *   html.p3-webgl  the three.js table (canvas fades in over a warm still)
 *   html.p3-css    the 2.5D CSS table (same DOM game, tilted, with depth)
 *   html.p3-plain  reduced motion: the plain game, nothing added
 */

/* The same foil print in every mode the DOM card is actually seen in. In
   webgl mode the DOM game is clipped to 1x1px from first paint (below) and
   never shown, so this rule stays out of that mode: it was a genuine second
   download of card-back-color.webp racing the WebGL table's own texture
   fetch of the same file for a picture nobody sees (item 6, 30 Sep). */
.mm-tile .mm-front{background-color:#B74343;box-shadow:inset 0 0 0 1px #efe5cf;}
html:not(.p3-webgl) .mm-tile .mm-front{background-image:url(/_v/a7b70b9cdc/play/assets/memory-match/card-back-color.webp);background-position:center;background-size:100% 100%;background-repeat:no-repeat;}
.mm-tile .mm-front .mm-mark{display:none;}
.mm-grid{gap:8px;grid-template-columns:repeat(4,1fr);}
.mm-grid[data-level="2"]{grid-template-columns:repeat(5,1fr);}
.mm-grid[data-level="3"]{grid-template-columns:repeat(6,1fr);}
.mm-grid[data-level="4"]{grid-template-columns:repeat(8,1fr);}
.mm-tile{aspect-ratio:10/13;}
.mm-back img{object-fit:contain;}
.mm-grid:empty{aspect-ratio:40/39;}
.mm-levels{display:flex;gap:6px;flex-wrap:wrap;}
.mm-page .mm-levels button{border:1px solid var(--ink);border-radius:8px;background:transparent;color:var(--ink);padding:6px 12px;}
.mm-page .mm-levels button[aria-pressed="true"]{background:var(--ink);color:var(--paper);}
.mm-levels small{display:block;font-size:11px;font-weight:400;}
.mm-page button:disabled{opacity:.45;cursor:not-allowed;}
#mm-level-note{display:none;flex-basis:100%;margin:0;font-size:12px;font-weight:400;line-height:1.4;}
#mm-next{min-height:44px;padding:8px 16px;margin-left:12px;border-radius:24px;background:var(--yellow);color:var(--ink);}
@media(max-width:599px) and (orientation:portrait){
  html:not(.p3-webgl) .mm-tile .mm-front{background-image:url(/_v/a7b70b9cdc/play/assets/memory-match/card-back-color.webp);}
  .mm-grid{gap:5px;grid-template-columns:repeat(3,1fr);}
  .mm-grid[data-level="2"]{grid-template-columns:repeat(4,1fr);}
  .mm-grid[data-level="3"]{grid-template-columns:repeat(5,1fr);}
  .mm-grid:empty{aspect-ratio:30/52;}
  .mm-page .status-bar{gap:8px;padding:8px;}
  .mm-levels{width:100%;display:grid;grid-template-columns:repeat(4,1fr);}
  .mm-page .mm-levels button{padding:5px 3px;}
  #mm-level-note{display:block;}
}
@media(orientation:landscape) and (max-height:500px){
  .mm-grid[data-level="4"]{grid-template-columns:repeat(12,1fr);}
}

/* Full-bleed stages use --p3-vw, the page's CLIENT width set by the rig gate
   (100vw includes a classic vertical scrollbar: the stage overflowed by its
   width, a horizontal scrollbar at every desktop width on Windows). The stable
   gutter makes the client width known before the content arrives (CLS 0). */
html{scrollbar-gutter:stable;}

/* ---------------- the stage ---------------- */
.p3-stage{display:none;}
html.p3-webgl .p3-stage{
  display:block;
  position:relative;
  /* the table breaks out of the text column: it is the page's object */
  width:min(1240px, 96vw);
  margin:18px 0 8px calc(50% - min(620px, 48vw));
  aspect-ratio:1.6;
  max-height:calc(100svh - 110px);
  border-radius:18px;
  overflow:hidden;
  /* the shelf retains its original still */
  background:
    radial-gradient(120% 90% at 50% 40%, #16664f 0%, #0d4a3a 58%, transparent 59%),
    linear-gradient(180deg, #9c6a40, #7c4f2c);
  box-shadow:inset 0 0 0 1px rgba(23,63,53,.25);
}
@media (max-aspect-ratio:9/10), (max-width:640px){
  /* a phone: the table fills the width, edge to edge, in thumb reach */
  html.p3-webgl .p3-stage{width:var(--p3-vw,100vw);margin-left:calc(50% - var(--p3-vw,100vw) / 2);border-radius:0;aspect-ratio:.56;max-height:calc(100svh - 60px);}
}
/* the full-screen table runs into the dark footer: no cream band. The page's
   90px bottom padding stays (so the footer never peeks in under the table and
   gets pushed when the leaderboard panel opens: a layout shift) but is painted
   in the footer's ink, so the table meets one continuous dark ground. */
html.p3-webgl main:has(.p3-stage[data-p3-scene="memory"]){background:linear-gradient(to bottom,transparent calc(100% - 90px),var(--ink) calc(100% - 90px));}
html.p3-webgl .p3-stage[data-p3-scene="memory"]{
  width:var(--p3-vw,100vw);height:100svh;max-height:none;aspect-ratio:auto;
  margin:12px 0 0 calc(50% - var(--p3-vw,100vw) / 2);border-radius:0;box-shadow:none;
  background:#090706;
}
html.p3-webgl .p3-stage[data-p3-scene="memory"]::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 75% 80% at 50% 52%,transparent 52%,#06030399 100%);
}
.p3-canvas{display:block;width:100%;height:100%;opacity:0;}
html.p3-live .p3-canvas{opacity:1;}

/* in 3D the DOM game stays: it keeps the rules, the counter and the keyboard
   (its buttons remain focusable; the focused card rises on the table), it is
   only taken out of sight */
html.p3-webgl .p3-stage ~ .mm-grid,
html.p3-webgl .p3-dom-game{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip-path:inset(50%) !important;
  white-space:nowrap;
}
/* a small hint of how to lean and turn the table */
.p3-hint{display:none;}
html.p3-live .p3-hint{
  display:block;
  position:absolute;
  left:14px;
  top:12px;
  margin:0;
  padding:6px 10px;
  border-radius:8px;
  background:rgba(250,247,239,.86);
  color:#173c32;
  font:700 13px/1.3 Arial,Helvetica,sans-serif;
  pointer-events:none;
}

/* Memory's overlay mirrors the accessible DOM game; all numeric art controls
   are supplied as custom properties from gallery.js LOOK after deferred boot. */
.p3-memory-hud{display:none;}
html.p3-live .p3-memory-hud{
  display:grid;grid-template-columns:auto 1fr;align-items:baseline;
  position:absolute;z-index:2;top:var(--p3-hud-inset);left:var(--p3-hud-inset);
  gap:var(--p3-hud-gap);color:var(--p3-hud-color);pointer-events:none;
  font-family:Arial,Helvetica,sans-serif;text-shadow:var(--p3-hud-shadow);
}
.p3-memory-label{font-size:var(--p3-hud-label-size);text-transform:uppercase;letter-spacing:var(--p3-hud-tracking);}
.p3-memory-level{font-size:var(--p3-hud-numeral-size);font-variant-numeric:tabular-nums;line-height:1;}
.p3-memory-counter{grid-column:1 / -1;font-size:var(--p3-hud-status-size);font-variant-numeric:tabular-nums;}
html.p3-live [data-p3-scene="memory"] .p3-hint{
  z-index:2;top:auto;bottom:var(--p3-hint-bottom);left:var(--p3-hint-left);
  padding:0;border-radius:0;background:none;color:var(--p3-hud-color);
  font-weight:400;font-size:var(--p3-hint-size);letter-spacing:var(--p3-hint-tracking);
  text-shadow:var(--p3-hint-shadow);opacity:var(--p3-hint-opacity);
  transition:opacity var(--p3-hint-fade) ease;
  animation:p3-memory-hint-out var(--p3-hint-fade) ease var(--p3-hint-hold) forwards;
}
html.p3-live [data-p3-scene="memory"].p3-hint-dismissed .p3-hint{animation:none;opacity:0;}
@keyframes p3-memory-hint-out{to{opacity:0;visibility:hidden;}}
@media(max-width:599px){
  html.p3-live .p3-memory-hud{top:var(--p3-hud-phone-inset);left:var(--p3-hud-phone-inset);}
}
@media(prefers-reduced-motion:reduce){
  .p3-memory-hud,html.p3-live [data-p3-scene="memory"] .p3-hint{display:none;animation:none;}
}

/* ---------------- the landing shelf ---------------- */
html.p3-css .p3-stage[data-p3-scene="landing"]{
  display:block;
  position:relative;
  width:min(1240px, 96vw);
  margin:10px 0 0 calc(50% - min(620px, 48vw));
  aspect-ratio:2.5;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg,#f1e7d3 0%,#e6d7bb 62%,#9c6a40 62.5%,#7c4f2c 70%,#efe4cf 70.5%);
}
@media (max-width:700px){
  html.p3-css .p3-stage[data-p3-scene="landing"]{aspect-ratio:.74;width:var(--p3-vw,100vw);margin-left:calc(50% - var(--p3-vw,100vw) / 2);border-radius:0;}
}
/* The gradient still reserves the final viewport before deferred scene boot. */
html.p3-webgl .p3-stage[data-p3-scene="landing"]{
  display:block;position:relative;width:var(--p3-vw,100vw);height:100svh;max-height:none;aspect-ratio:auto;
  margin:10px 0 0 calc(50% - var(--p3-vw,100vw) / 2);border-radius:0;box-shadow:none;overflow:hidden;
  background:linear-gradient(180deg,transparent 84%,#382012 84.2%,#100804 92%,#b8955a 92.2%,#050303 92.5%),
    radial-gradient(ellipse at 46% 30%,#30110c,#120705 60%,#050303);
}
html.p3-webgl .p3-stage[data-p3-scene="landing"]::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 48%,transparent 50%,#05030366 100%);
}
.p3-shelf-hud{position:absolute;left:28px;top:26px;z-index:2;color:#efe5cf;pointer-events:none;text-shadow:0 2px 12px #000c;opacity:0;}
html.p3-live .p3-shelf-hud{opacity:1;}
.p3-shelf-eyebrow{margin-bottom:7px;font:700 10.5px/1 Arial,Helvetica,sans-serif;letter-spacing:.2em;opacity:.62;}
.p3-shelf-title{font:400 19px/1.25 Georgia,serif;opacity:.9;}
@media(max-width:699px) and (orientation:portrait){
  html.p3-webgl .p3-stage[data-p3-scene="landing"]{
    background:linear-gradient(180deg,transparent 52%,#382012 52.2%,#100804 57%,#b8955a 57.2%,transparent 57.5%,transparent 90%,#382012 90.2%,#100804 95%,#b8955a 95.2%,#050303 95.5%),
      radial-gradient(ellipse at 46% 30%,#30110c,#120705 60%,#050303);
  }
  .p3-shelf-hud{left:20px;top:22px;}
  .p3-shelf-title{font-size:17px;}
}

/* the game names on the shelf: page text (crisp at any zoom), placed by the
   scene over its boxes. Desktop: the name pops above a box on hover or
   keyboard focus. Phone: every name sits under its box, always shown. */
.p3-name{position:absolute;left:0;top:0;z-index:2;pointer-events:none;transform:translate(-50%,-100%) scale(.86);opacity:0;
  box-sizing:border-box;padding:7px 12px;border-radius:6px;background:#150c08e8;color:#efe5cf;font:400 17px/1.2 Georgia,serif;white-space:nowrap;
  text-shadow:0 2px 8px #000;transition:opacity .16s ease,transform .28s cubic-bezier(.34,1.56,.64,1);}
.p3-name.on{opacity:1;transform:translate(-50%,-100%) scale(1);}
.p3-name.under{opacity:0;transform:translate(-50%,0);white-space:normal;text-align:center;padding:4px 3px;
  background:#150c08d9;color:#efe5cf;font-size:16px;line-height:1.15;}
html.p3-live .p3-name.under{opacity:1;}

/* ---------------- 2.5D: the CSS table (no WebGL) ---------------- */
html.p3-css .mm-grid{
  transform-style:preserve-3d;
  transform:perspective(1400px) rotateX(var(--p3-rx, 14deg)) rotateY(var(--p3-ry, 0deg));
  transform-origin:50% 40%;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
  padding:14px;
  border-radius:16px;
  background:radial-gradient(130% 100% at 50% 30%, #362a26 0%, #221c1a 100%);
  box-shadow:0 30px 60px -30px rgba(33,22,21,.6),inset 0 0 0 6px #191413,inset 0 0 0 7px #b7955b,inset 0 0 0 10px #73302f;
}
/* the tiles sit just above the table's plane: in preserve-3d, coplanar
   children lose hit-testing to their parent (taps fell through at some rows) */
html.p3-css .mm-tile{transform:translateZ(2px);}
html.p3-css .mm-tile button{box-shadow:0 6px 10px -4px rgba(0,0,0,.45);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;}
html.p3-css .mm-tile.flipped button{transform:translateZ(18px);box-shadow:0 16px 18px -8px rgba(0,0,0,.45);}
html.p3-css .mm-tile.matched button{transform:translateZ(6px);box-shadow:0 0 0 2px #ffb45a,0 0 22px 2px rgba(255,180,90,.7);}
/* the shelf is a flat layer (reliable hit-testing), its boxes turn in its
   perspective; only the boxes take the pointer */
.p3-css-shelf{position:absolute;inset:0;pointer-events:none;transform:rotateX(var(--p3-rx,0deg)) rotateY(var(--p3-ry,0deg));display:flex;align-items:flex-end;justify-content:center;gap:4%;padding:0 5% 11%;perspective:900px;}
.p3-css-box{pointer-events:auto;display:block;width:18%;aspect-ratio:.78;border-radius:6px;background-size:cover;background-position:center;transform-origin:50% 100%;
  transform:translateZ(2px) rotateY(var(--p3-ry,0deg)) rotateX(4deg);box-shadow:10px 14px 22px -10px rgba(40,24,12,.55), inset 0 0 0 5px #f7f1e3;transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.p3-css-box:hover{transform:rotateY(var(--p3-ry,0deg)) rotateX(-6deg) translateY(-10px) translateZ(26px);}
/* the 2.5D shelf carries each game's name under its box, always */
.p3-css-name{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);width:118%;text-align:center;
  padding:4px 10px;border-radius:10px;background:rgba(251,246,232,.95);color:#173f35;font:700 15px/1.25 Arial,Helvetica,sans-serif;}
@media (max-width:700px){
  .p3-css-shelf{flex-wrap:wrap;align-content:flex-start;row-gap:17%;padding:5% 5% 0;}
  .p3-css-name{font-size:14px;width:112%;}
  .p3-css-box{width:36%;}
}

@media (prefers-reduced-motion:reduce){
  .p3-canvas,.p3-css-box,html.p3-css .mm-grid,html.p3-css .mm-tile button{transition:none;}
}

/* a phone held sideways (Bob 86 R2 lab): the 8 x 6 table in a 280 px strip made
   cards 22 to 30 px; give the table the whole screen height and deal 12 x 4 */
@media (orientation:landscape) and (max-height:500px){
  html.p3-webgl .p3-stage[data-p3-scene="memory"]{width:var(--p3-vw,100vw);margin-left:calc(50% - var(--p3-vw,100vw) / 2);border-radius:0;aspect-ratio:auto;height:calc(100svh - 8px);max-height:none;}
}

/* Artefact Mayhem, every mode: the two collage pages are lazy images with no
   size attributes, so the live page jumped when they arrived (CLS 0.44 at
   1440 on 8cc6081e). Reserve their real 900 x 1273 shape from first paint. */
.fo-collage img{aspect-ratio:900/1273;height:auto;}

/* Mayhem reserves its complete viewport before deferred scene construction. */
html.p3-webgl .p3-stage[data-p3-scene="mayhem"]{
  width:var(--p3-vw,100vw);height:100svh;max-height:none;aspect-ratio:auto;
  margin:12px 0 0 calc(50% - var(--p3-vw,100vw) / 2);border-radius:0;box-shadow:none;
  background:#090807;
  isolation:isolate;
}
/* fixed, not absolute: the game focuses the next silhouette after each match,
   and focusing a 1px control below the stage scrolled the page under the
   player's finger. Keyboard users are brought to the stage by mayhem.js. */
html.p3-webgl [data-p3-scene="mayhem"] ~ :is(.fo-collage,#fo-sils,#fo-cards,.play-h-lg,.play-h-md){
  position:fixed !important;top:0 !important;left:0 !important;width:1px !important;height:1px !important;
  padding:0 !important;margin:0 !important;overflow:hidden !important;
  clip-path:inset(50%) !important;white-space:nowrap;
}
.p3-mayhem-hud,.p3-mayhem-tray{position:absolute;z-index:2;color:#f3ead3;font-family:Arial,Helvetica,sans-serif;opacity:0;transition:opacity .45s;}
html.p3-live :is(.p3-mayhem-hud,.p3-mayhem-tray){opacity:1;}
.p3-mayhem-hud{inset:26px 32px auto;pointer-events:none;text-shadow:0 2px 10px #000;}
.p3-mayhem-hud p{padding:0;margin:0;}
.p3-mayhem-eyebrow{font-size:11px;letter-spacing:.17em;}
.p3-mayhem-title{font:26px/1.25 Georgia,serif;margin-top:8px !important;max-width:80%;}
.p3-mayhem-count{display:block;margin-top:10px;font-size:13px;font-variant-numeric:tabular-nums;}
.p3-mayhem-reset{position:absolute;right:0;top:0;min-height:48px;padding:8px 0;background:none;border:0;border-bottom:1px solid #f3ead355;color:inherit;font:13px Arial;pointer-events:auto;cursor:pointer;}
.p3-mayhem-hint{max-width:590px;font-size:13px;line-height:1.35;margin-top:8px !important;}
.p3-mayhem-tray{inset:auto 0 0;min-height:68px;padding:8px 32px;display:flex;align-items:center;gap:16px;background:linear-gradient(#09080700,#090807cf);}
.p3-mayhem-step{font-size:12px;line-height:1.3;white-space:nowrap;}
.p3-mayhem-step:last-child{margin-left:auto;}
.p3-mayhem-sils{display:flex;gap:7px;}
.p3-mayhem-sil{position:relative;flex:0 0 48px;width:48px;height:48px;padding:5px;background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;color:#f3ead3;cursor:pointer;}
.p3-mayhem-icon{display:block;width:100%;height:100%;background:#f3ead3;mask:var(--sil) center/contain no-repeat;}
.p3-mayhem-sil[aria-pressed="true"]{border-bottom-color:#f7d38e;filter:drop-shadow(0 0 5px #ffce7955);}
.p3-mayhem-sil.matched .p3-mayhem-icon{opacity:.35;}
.p3-mayhem-check{display:none;position:absolute;right:0;bottom:3px;font-size:12px;color:#fff2d4;}
.p3-mayhem-sil.matched .p3-mayhem-check{display:block;}
html.p3-css #fo-cards{transform-style:preserve-3d;transform:perspective(1600px) rotateX(var(--p3-rx,7deg)) rotateY(var(--p3-ry,0deg));transform-origin:50% 40%;transition:transform .25s ease;padding:14px;background:#202219;border:8px solid #62452c;border-radius:12px;box-shadow:0 25px 50px -25px #18150faa,inset 0 0 0 1px #b7955b;}
html.p3-css #fo-cards .fo-card{transform:translateZ(2px);box-shadow:2px 7px 12px #0005;}
html.p3-css #fo-cards .fo-card.matched{box-shadow:0 0 0 2px #b7955b,2px 7px 12px #0005;}
@media(max-width:699px) and (orientation:portrait){
  html.p3-webgl .p3-stage[data-p3-scene="mayhem"]{background:radial-gradient(ellipse 60% 30% at 50% 58%, #4a3f27 0%, #262216 55%, transparent 100%),linear-gradient(180deg,#0b0908 0%,#0b0908 22%,#16130d 25%,#1b1811 80%,#0c0a08 100%);}
  .p3-mayhem-hud{inset:18px 18px auto;}
  .p3-mayhem-eyebrow{font-size:9px;letter-spacing:.1em;padding-right:75px !important;}
  .p3-mayhem-title{font-size:21px;max-width:100%;padding-right:84px !important;margin-top:12px !important;}
  .p3-mayhem-count{font-size:12px;margin-top:8px;}
  .p3-mayhem-reset{top:-10px;font-size:12px;}
  .p3-mayhem-hint{font-size:11px;}
  .p3-mayhem-tray{padding:6px 16px 8px;display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;background:#090807aa;}
  .p3-mayhem-step{font-size:10px;}
  .p3-mayhem-step:last-child{grid-column:2;grid-row:1;text-align:right;white-space:normal;}
  .p3-mayhem-sils{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:repeat(4,48px);justify-content:space-around;gap:0;}
  .p3-mayhem-sil{height:48px;}
}
@media(prefers-reduced-motion:reduce){
  .p3-mayhem-hud,.p3-mayhem-tray,html.p3-css #fo-cards{transition:none;}
}

/* Reserve a real band above the canvas, so view controls never cover cards,
   even after a close zoom. The stage still owns the full-bleed dimensions. */
.p3-memory-viewport{position:absolute;inset:112px 0 0;}
html.p3-live .p3-memory-hud{top:12px;line-height:1.2;}
.p3-memory-view-buttons{grid-column:1 / -1;display:flex;gap:8px;pointer-events:auto;}
.p3-memory-view-buttons button{
  min-width:44px;min-height:44px;padding:0 10px;border:1px solid #efe5cf40;
  border-radius:4px;background:transparent;color:inherit;font:400 13px/1 Arial,Helvetica,sans-serif;
}
.p3-memory-view-buttons button:hover{background:#efe5cf12;}
.p3-memory-view-buttons button:focus-visible{outline:2px solid #efe5cf;outline-offset:2px;}
[data-p3-scene="memory"]:focus-visible{outline:2px solid #efe5cf;outline-offset:-3px;}
@media(max-width:599px),(orientation:landscape) and (max-height:500px){
  .p3-memory-viewport{top:76px;}
  html.p3-live .p3-memory-hud{right:var(--p3-hud-phone-inset);top:12px;left:var(--p3-hud-phone-inset);}
  .p3-memory-view-buttons{position:absolute;right:0;top:0;gap:6px;}
  .p3-memory-counter{margin-top:12px;}
}
@media(orientation:landscape) and (max-height:500px){
  /* a phone held sideways: one 44px HUD row, so the table keeps its height
     (a 60px band shrank the smallest card to 43.7px at 740x360) */
  .p3-memory-viewport{top:46px;}
  html.p3-live .p3-memory-hud{top:1px;grid-template-columns:auto auto 1fr;align-items:center;}
  .p3-memory-counter{grid-column:auto;margin-top:0;}
}

/* No accidental blue selection (Vivek 30 Sep 18:4x): the WebGL/CSS 3D table
   canvas never starts a text selection or a drag-select while a visitor
   orbits or taps the scene. */
.p3-canvas{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* Keep the dealt board intact while its phone layout is unavailable. */
.mm-board{position:relative;}
.mm-rotation-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(9,7,6,.94);color:#fff;text-align:center;font-size:20px;line-height:1.5;}
.mm-rotation-overlay[hidden]{display:none;}
html.p3-webgl .mm-rotation-overlay{left:calc(50% - var(--p3-vw,100vw) / 2);width:var(--p3-vw,100vw);box-sizing:border-box;}
@media(max-width:599px) and (orientation:portrait){
  .mm-page #mm-level-note{display:block;margin:8px 0 12px;}
}