@font-face { font-family: Plex; src: url(fonts/plex-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Plex; src: url(fonts/plex-mono-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

html, body { margin: 0; height: 100%; overflow: hidden; background: #d6d7d9; font-family: Plex, ui-monospace, monospace; }
#play { position: fixed; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overflow: hidden; }
#mat { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.noise {
  position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.05), rgba(0,0,0,.22));
}
#board { position: absolute; background: rgba(244,238,223,.9); outline: 1.5px dashed rgba(255,255,255,.75); outline-offset: 0; pointer-events: none; }
#ghost { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .3; filter: saturate(1.5) contrast(1.05); }
#ghost:not([src]) { display: none; }

.piece { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; transform-origin: 50% 50%;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)) drop-shadow(0 3px 4px rgba(0,0,0,.2)); }
.piece svg { display: block; overflow: visible; }
.piece .hit { pointer-events: fill; cursor: grab; }
.piece.lift { filter: drop-shadow(0 4px 3px rgba(0,0,0,.28)) drop-shadow(0 14px 14px rgba(0,0,0,.3)); }
.piece.lift .hit { cursor: grabbing; }
.piece.placed { filter: none; }
.piece.placed .hit { pointer-events: none; stroke: rgba(0,0,0,.07); }
.piece.settle svg { animation: settle 170ms ease-out; }
@keyframes settle { 0% { transform: scale(1.025); } 55% { transform: scale(.985); } 100% { transform: scale(1); } }

.tag { position: absolute; top: 12px; z-index: 4000; pointer-events: none; background: #f4eedf; color: #1b1b1b;
  font-weight: 600; line-height: 1; padding: 7px 10px 6px; box-shadow: 0 2px 3px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.06); white-space: nowrap; }
#title { left: 28px; font-size: 11px; transform: rotate(1deg); letter-spacing: .04em; }
#counter { right: 12px; font-size: 13px; transform: rotate(-2deg); }
#counter b { color: #ff4f8b; font-weight: 600; }
#hint { position: absolute; left: 28px; right: 12px; bottom: 8px; z-index: 5; pointer-events: none; color: rgba(255,255,255,.72);
  font-size: 11px; line-height: 1.3; }

#stamp { position: absolute; z-index: 3000; pointer-events: none; color: #ff4f8b; display: none; transform: rotate(-9deg);
  filter: drop-shadow(0 0 1.5px #f4eedf) drop-shadow(0 0 5px rgba(244,238,223,.85)) drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
#stamp svg { background: rgba(244,238,223,.72); }
#stamp svg { display: block; width: 100%; height: auto; }
#stamp.on { display: block; animation: thunk 360ms cubic-bezier(.5,0,.75,.4) both; }
@keyframes thunk {
  0% { transform: rotate(-9deg) scale(2.3); opacity: 0; }
  62% { transform: rotate(-9deg) scale(.95); opacity: 1; }
  80% { transform: rotate(-9deg) scale(1.025); }
  100% { transform: rotate(-9deg) scale(1); opacity: 1; }
}
#again { position: absolute; z-index: 3001; display: none; font: 600 15px/1 Plex, monospace; color: #1b1b1b; background: #f4eedf;
  border: 2px solid #1b1b1b; border-radius: 0; padding: 12px 18px; cursor: pointer; box-shadow: 3px 3px 0 #1b1b1b; touch-action: manipulation; }
#again.on { display: block; animation: rise 260ms 380ms ease-out both; }
#again:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #1b1b1b; }
@keyframes rise { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* ---------- peek ---------- */
#peekimg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 140ms; z-index: 2900; }
#board.peeking { z-index: 2900; }
#board.peeking #peekimg { opacity: .92; }
#peek { top: auto; bottom: 10px; right: 12px; font: 600 13px/1 Plex, monospace; border: 2px solid #1b1b1b; padding: 9px 14px 8px;
  pointer-events: auto; cursor: pointer; transform: rotate(1.5deg); box-shadow: 2px 2px 0 #1b1b1b; touch-action: none; z-index: 4001; }
#peek:active { transform: rotate(1.5deg) translate(1px,1px); box-shadow: 1px 1px 0 #1b1b1b; }
#hint { right: 110px; bottom: 14px; }
#play.done #peek, #play.done #hint { visibility: hidden; }
#counter.bump b { display: inline-block; animation: bump 260ms ease-out; }
@keyframes bump { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* ---------- the box lid ---------- */
#lid { position: absolute; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 56px 18px 30px;
  background: rgba(20,45,33,.38); transition: background 400ms; }
#lid.off { background: rgba(20,45,33,0); pointer-events: none; }
#lid .box { position: relative; width: min(100%, 420px, calc(100vh - 330px)); min-width: min(100%, 280px); background: #f4eedf; color: #1b1b1b;
  transform: rotate(-1.5deg); box-shadow: 0 2px 0 #d9cfb6, 0 3px 0 #c9bd9f, 0 18px 30px rgba(0,0,0,.4);
  padding: 12px 12px 0; transition: transform 600ms cubic-bezier(.5,0,.8,.3), opacity 500ms 100ms; }
#lid .box::after { content: ""; position: absolute; inset: 5px; border: 1.5px solid #1b1b1b; pointer-events: none; }
#lid.off .box { transform: translateY(-120vh) rotate(8deg); opacity: 0; }
#lid .art { position: relative; aspect-ratio: 1; overflow: hidden; border: 1.5px solid #1b1b1b; background: #f4eedf; }
#lid .art img { display: block; width: 100%; height: 100%; object-fit: cover; }
#lid .reg { position: absolute; width: 14px; height: 14px; border: 1.5px solid #1b1b1b; border-radius: 50%; mix-blend-mode: multiply; }
#lid .reg::before, #lid .reg::after { content: ""; position: absolute; background: #1b1b1b; }
#lid .reg::before { left: 50%; top: -5px; bottom: -5px; width: 1.5px; margin-left: -.75px; }
#lid .reg::after { top: 50%; left: -5px; right: -5px; height: 1.5px; margin-top: -.75px; }
#lid .r1 { top: 8px; left: 8px; } #lid .r2 { bottom: 8px; right: 8px; }
#lid[hidden] { display: none; }
#lid .label { position: relative; padding: 10px 6px 14px; display: flex; flex-direction: column; gap: 8px; }
#lid .series { font-size: 10px; letter-spacing: .18em; font-weight: 600; display: flex; align-items: center; gap: 8px; }
#lid .series span { color: #ff4f8b; }
#lid h1 { margin: 0; font: 600 clamp(19px, 5.6vw, 26px)/1.05 Plex, monospace; letter-spacing: -.01em; }
#lid .inks { display: inline-flex; margin-left: auto; }
#lid .inks b { width: 12px; height: 12px; border-radius: 50%; mix-blend-mode: multiply; margin-right: -4px; }
#lid .inks b:nth-child(1) { background: #ff4f8b; } #lid .inks b:nth-child(2) { background: #ffd23f; } #lid .inks b:nth-child(3) { background: #2a5bd7; }
#lid .row { display: flex; align-items: center; gap: 10px; }
#lid .cap { width: 58px; flex: none; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; opacity: .7; }
#lid .pics, #lid .levels { display: flex; gap: 6px; flex: 1; min-width: 0; }
#lid .pic { width: 44px; height: 44px; padding: 0; border: 2px solid transparent; outline: 1px solid rgba(27,27,27,.35); background: #f4eedf; cursor: pointer; touch-action: manipulation; }
#lid .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
#lid .pics { flex-wrap: wrap; }
#lid .pic.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #1b1b1b;
  border: 1.5px dashed #1b1b1b; outline: none; font: 600 20px/1 Plex, monospace; }
#lid .pic.add span { font-size: 8px; letter-spacing: .06em; font-weight: 600; }
#lid .pic.add:hover, #lid .pic.add:focus-visible { background: #fff7e6; color: #ff4f8b; border-color: #ff4f8b; }
#lid .pic.mine { position: relative; }
#lid .pic .del { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: #1b1b1b; color: #f4eedf;
  font: 600 13px/18px Plex, monospace; text-align: center; cursor: pointer; }
#lid .pic.busy { opacity: .5; pointer-events: none; }
#picnote { font-size: 10px; line-height: 1.3; min-height: 0; color: #c2185b; }
#picnote:empty { display: none; }
#lid .pic[aria-checked="true"] { border-color: #1b1b1b; outline: 2px solid #ff4f8b; outline-offset: 1px; }
#lid .lvl { flex: 1; min-width: 0; padding: 6px 2px 5px; border: 1.5px solid #1b1b1b; background: #f4eedf; color: #1b1b1b; cursor: pointer;
  font: 600 15px/1 Plex, monospace; display: flex; flex-direction: column; align-items: center; gap: 3px; touch-action: manipulation; }
#lid .lvl span { font-size: 9px; font-weight: 400; letter-spacing: .04em; }
#lid .lvl[aria-checked="true"] { background: #1b1b1b; color: #f4eedf; }
#lid .lvl[aria-checked="true"] b { color: #ff4f8b; }
#lid .go { display: flex; gap: 8px; margin-top: 4px; }
#go, #resume { flex: 1; font: 600 15px/1 Plex, monospace; color: #1b1b1b; background: #ffd23f; border: 2px solid #1b1b1b;
  padding: 13px 12px; cursor: pointer; box-shadow: 3px 3px 0 #1b1b1b; touch-action: manipulation; white-space: nowrap; }
#resume { background: #f4eedf; }
#go:active, #resume:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #1b1b1b; }
#title { pointer-events: auto; cursor: pointer; border: 0; font-family: Plex, monospace; }
#title::after { content: " ▾"; color: #ff4f8b; }
@media (orientation: landscape) and (max-height: 560px) {
  #lid { padding: 40px 18px 12px; }
  #lid .box { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; width: min(100%, 680px); padding: 12px; }
  #lid .art { height: calc(100vh - 78px); width: auto; }
  #lid .label { justify-content: center; padding: 4px; gap: 7px; }
}

/* ===== v3: 3D pieces, sparkle, living picture ===== */
.piece { transform-style: preserve-3d; backface-visibility: hidden;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)) drop-shadow(0 3px 4px rgba(0,0,0,.28)); }
.piece .sheen { opacity: .35; mix-blend-mode: screen; transition: opacity 200ms; pointer-events: none; }
.piece.lift { filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)) drop-shadow(6px 22px 16px rgba(0,0,0,.42)) drop-shadow(0 0 10px rgba(255,240,200,.35)); }
.piece.lift .sheen { opacity: 1; }
.piece.placed { filter: none; }
.piece.placed .sheen { opacity: 0; }
.piece.glint .sheen { opacity: 1; animation: glint 850ms ease-in-out; }
@keyframes glint { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
.piece.settle svg { animation: settle3d 260ms ease-out; }
@keyframes settle3d { 0% { transform: scale(1.05); } 45% { transform: scale(.975); } 75% { transform: scale(1.01); } 100% { transform: scale(1); } }

#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4500; }

#final { position: absolute; z-index: 2950; display: none; pointer-events: none; perspective: 900px; }
#final.on { display: block; }
#final img, #final video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#final video { opacity: 0; transition: opacity 600ms 900ms; }
#final.hasvid.reveal video { opacity: 1; }
#final.reveal { animation: reveal3d 1100ms cubic-bezier(.2,.9,.25,1) both; box-shadow: 0 18px 40px rgba(0,0,0,.45); transform-style: preserve-3d; }
@keyframes reveal3d {
  0% { transform: perspective(900px) rotateX(0) rotateY(0) scale(1); }
  35% { transform: perspective(900px) rotateX(14deg) rotateY(-18deg) scale(1.06) translateZ(40px); }
  70% { transform: perspective(900px) rotateX(-4deg) rotateY(6deg) scale(1.03); }
  100% { transform: perspective(900px) rotateX(0) rotateY(0) scale(1); }
}
#final .shine, #lid .shine { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.1) 55%, transparent 65%);
  background-size: 300% 100%; background-position: 120% 0; mix-blend-mode: screen; }
#final.reveal .shine { animation: sweep 1400ms 500ms ease-in-out both; }
#lid .shine { animation: sweep 3600ms 600ms ease-in-out infinite; }
@keyframes sweep { 0% { background-position: 120% 0; } 45%, 100% { background-position: -40% 0; } }

/* box: living art + 3D lid */
#lid { perspective: 1100px; }
#lid .art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#lid .box { transform-origin: 50% 0; transform: rotateX(8deg) rotateZ(-1.5deg); animation: boxin 900ms cubic-bezier(.2,1.2,.3,1) both; }
@keyframes boxin { from { transform: rotateX(60deg) rotateZ(-6deg) translateY(-40px); opacity: 0; } to { transform: rotateX(8deg) rotateZ(-1.5deg); opacity: 1; } }
#lid.off .box { animation: none; transform: rotateX(-75deg) rotateZ(6deg) translateY(-50vh) translateZ(160px); opacity: 0;
  transition: transform 850ms cubic-bezier(.55,0,.75,.35), opacity 450ms 380ms; }
#lid .pic.wide { width: 62px; }
#lid.wide .box { width: min(100%, 520px, calc((100vh - 300px) * 1.5)); }
@media (orientation: landscape) and (max-height: 560px) {
  #lid.wide .box { width: min(100%, 760px); }
  #lid.wide .art { height: auto; width: min(52vw, calc((100vh - 78px) * 1.5)); }
}
@media (prefers-reduced-motion: reduce) { #lid .shine { animation: none; } }

/* ===== v4: depth at rest, living board ===== */
#ghostvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 800ms; filter: saturate(1.6) contrast(1.05); }
#board.live #ghostvid { opacity: .32; }
#board.live #ghost { opacity: 0; }
#play.done #ghostvid { opacity: 0; }
.piece:not(.placed):not(.lift) > svg { animation: bob 4s ease-in-out infinite; animation-delay: var(--d, 0s); transform-origin: 50% 50%; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(.8deg); } }
.piece:not(.placed) { filter: drop-shadow(0 2px 0 rgba(0,0,0,.3)) drop-shadow(2px 8px 7px rgba(0,0,0,.34)); }
.piece.lift { filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)) drop-shadow(8px 26px 18px rgba(0,0,0,.45)) drop-shadow(0 0 12px rgba(255,240,200,.4)); }
.piece.placed .edge { display: none; }

/* v4: light mat and glossy print */
#play.lightmat #board { outline-color: rgba(27,27,27,.45); }
#play.gloss .piece .sheen { opacity: .6; }
#play.gloss .piece.placed .sheen { opacity: .28; }
#play.gloss .piece .gl { opacity: 1; }
.piece .gl { opacity: 0; pointer-events: none; mix-blend-mode: screen; }
#final .gloss { position: absolute; inset: 0; pointer-events: none; display: none;
  background: linear-gradient(160deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.1) 28%, transparent 42%, transparent 70%, rgba(255,255,255,.08) 100%); mix-blend-mode: screen; }
#final.glossy .gloss { display: block; }
#lid .art.glossy::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.1) 28%, transparent 42%); mix-blend-mode: screen; }
#play.lightmat #hint { color: rgba(27,27,27,.7); }

/* v5: no moving glare; static gloss only on loose pieces */
.piece .sheen, .shine { display: none !important; animation: none !important; }
#play.gloss .piece.placed .gl { opacity: 0; }