/* play/3d/p3.css - Museum Mosaic games in 3D (Bob 69). * The mode is set in 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. */ .mm-tile .mm-front{background:#B74343 url(/play/assets/memory-match/card-back-color.webp) center/100% 100% no-repeat;box-shadow:inset 0 0 0 1px #efe5cf;} .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){ .mm-tile .mm-front{background-image:url(/play/assets/memory-match/card-back-color-512.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:radial-gradient(ellipse at 43% 60%,#332521 0%,#191310 29%,#0e0b09 58%,#090706 100%); } 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;transition:opacity .45s ease;} 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; /* the still poster is plain CSS (an SVG poster with a raster and a blur filter cost 1 to 3 s of render delay on mobile Lighthouse): a warm pool on the table under a dark gallery, where the scene fades in */ background: radial-gradient(ellipse 46% 34% at 50% 62%, #4a3f27 0%, #262216 55%, transparent 100%), linear-gradient(180deg, #0b0908 0%, #0b0908 34%, #16130d 36%, #1b1811 70%, #0c0a08 100%); 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;} }