.modern .welcome-puzzle{ width: 100%; max-width: 900px; margin: 0 auto; text-align: center; perspective: 1100px; font-family: 'Patrick Hand', cursive; font-weight: 400; font-synthesis: none; }
.modern .puzzle-scene{ position: relative; transform-origin: center 35%; }
.modern .puzzle-heading{ margin: 0 0 18px; transform-origin: center; }
.modern .puzzle-title-row{ display: flex; align-items: center; justify-content: center; gap: clamp(8px,1.3vw,16px); }
.modern .puzzle-alarm{ display: block; flex: 0 0 clamp(42px,6vw,66px); width: clamp(42px,6vw,66px); aspect-ratio: 88 / 92; transform-origin: 50% 83%; pointer-events: none; filter: drop-shadow(0 5px 4px #0706053d); }
.modern .puzzle-alarm svg{ display: block; width: 100%; height: 100%; overflow: visible; }
.modern .puzzle-alarm-rings{ opacity: .8; }
.modern .puzzle-solved .puzzle-alarm-rings{ opacity: 0; }
.modern .puzzle-heading h2{ margin: 0; color: #fff0c8; font: 400 clamp(2rem,4.9vw,3.3rem)/1.1 'Patrick Hand',cursive; letter-spacing: -.015em; text-shadow: 0 3px 0 #6557404d; }
.modern .puzzle-instruction{ margin: 9px 0 0; color: #e7dcc1; font: 400 1.2rem/1.35 'Patrick Hand',cursive; text-wrap: balance; }
.modern .puzzle-key-help{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.modern .puzzle-waiting .puzzle-heading, .modern .puzzle-waiting .puzzle-card{ opacity: 0; }
.modern .puzzle-board{ position: relative; display: grid; justify-items: center; gap: 12px; width: 100%; margin: 0 auto; }
.modern .puzzle-card{
  --puzzle-face-top: #ffedc1; --puzzle-face-bottom: #ffdc99;
  --puzzle-edge: #e8bd79; --puzzle-side: #c89460; --puzzle-base: #8f6260;
  --puzzle-relief: inset 0 2px 1px #fff9e8d9, inset 0 -2px 1px #60554124,
    0 2px 0 var(--puzzle-edge), 0 5px 0 var(--puzzle-side), 0 8px 0 var(--puzzle-side),
    0 10px 0 var(--puzzle-base), 0 11px 0 1px #0e0c099c;
  position: relative; min-height: 52px; max-width: calc(100% - 16px); padding: 12px 28px;
  border: 1px solid #fff5d5b8; border-radius: 17px;
  background: linear-gradient(155deg, var(--puzzle-face-top), var(--puzzle-face-bottom)); color: #48343a;
  font: 400 2rem/1.12 'Patrick Hand',cursive; letter-spacing: -.01em; text-shadow: 0 1px #ffffff55;
  box-shadow: var(--puzzle-relief), 0 15px 5px #08070536, 0 23px 24px #0707053d;
  overflow-wrap: anywhere;
}
.modern .puzzle-card-0{ --puzzle-card-width: 180px; }
.modern .puzzle-card-1{ --puzzle-card-width: 225px; --puzzle-face-top: #f8ebcd; --puzzle-face-bottom: #e8d3a3; --puzzle-edge: #d6c395; --puzzle-side: #b29e70; --puzzle-base: #5e5039; color: #3e3626; }
.modern .puzzle-card-2{ --puzzle-card-width: 270px; --puzzle-face-top: #ffd9b8; --puzzle-face-bottom: #f4b184; --puzzle-edge: #e39d7b; --puzzle-side: #bd7b6d; --puzzle-base: #855768; color: #5f3c31; }
.modern .puzzle-card-3{ --puzzle-card-width: 160px; --puzzle-face-top: #c8eedc; --puzzle-face-bottom: #a1d7c1; --puzzle-edge: #88bea8; --puzzle-side: #639586; --puzzle-base: #446c6b; color: #244e43; }
.modern .puzzle-card-4{ --puzzle-card-width: 205px; --puzzle-face-top: #f8cee0; --puzzle-face-bottom: #e5a0bf; --puzzle-edge: #cf8fa6; --puzzle-side: #aa6880; --puzzle-base: #60523a; color: #50432b; }
.modern .puzzle-ready .puzzle-board{ display: block; height: var(--puzzle-height, clamp(300px, 60svh, 620px)); }
.modern .puzzle-ready .puzzle-card{ position: absolute; left: 0; top: 0; width: min(var(--puzzle-card-width, 270px), calc(100% - 24px)); max-width: none; cursor: grab; touch-action: none; user-select: none; transform: translate3d(calc(var(--puzzle-x) - 50%), calc(var(--puzzle-y) - 50%), 0) rotate(var(--puzzle-active-angle, var(--puzzle-angle, 0deg))); }
.modern .puzzle-ready .puzzle-card.is-dragging{ --puzzle-active-angle: 0deg; cursor: grabbing; box-shadow: var(--puzzle-relief), 0 22px 9px #08070538, 0 36px 34px #07070552; }
.modern .puzzle-card:focus-visible{ outline: 3px solid #fff6d3; outline-offset: 5px; }
.modern .puzzle-completion{ position: relative; z-index: 30; min-height: calc(5rem + 40px); padding: 12px 8px 10px; transform-origin: 50% 35%; }
.modern .puzzle-status{ min-height: 1.5em; margin: 0; color: #efe4c9; font: 400 1.05rem/1.4 'Patrick Hand',cursive; }
.modern .puzzle-scroll-cue{ position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-width: 194px; min-height: 58px; margin: 12px auto 0; padding: 8px 10px 8px 25px; border: 1px solid #fff5ce; border-radius: 22px; background: linear-gradient(150deg,#fff0bd,#ffdb96); color: #42392a; box-shadow: inset 0 2px 1px #fff9e3, inset 0 -2px 1px #d79b6140, 0 6px 0 #ad7b81, 0 8px 0 1px #12110d, 0 14px 26px #0a090755, 0 0 28px #ffdc8b15; font: 400 1.35rem/1.25 'Patrick Hand',cursive; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.modern .puzzle-scroll-cue[hidden]{ display: none; }
.modern .puzzle-scroll-cue::before{ content: ''; position: absolute; inset: -60% -20%; z-index: -1; pointer-events: none; background: linear-gradient(110deg,transparent 40%,#ffffff99 50%,transparent 60%); transform: translateX(-100%); }
.modern .puzzle-cue-label{ letter-spacing: -.015em; text-shadow: 0 1px #ffffff88; }
.modern .puzzle-cue-arrow{ display: grid; place-items: center; flex: 0 0 38px; height: 38px; border: 1px solid #ffffff77; border-radius: 14px; background: #70604518; box-shadow: inset 0 1px 3px #95607529, 0 1px #ffffff88; }
.modern .puzzle-cue-arrow svg{ display: block; }
.modern .puzzle-scroll-cue:focus-visible{ outline: 3px solid #ffecc0; outline-offset: 10px; }
.modern .puzzle-scroll-cue:active{ transform: translateY(5px); box-shadow: inset 0 2px 1px #ffffff99, 0 1px 0 #ad7b81, 0 3px 0 1px #12110d, 0 6px 14px #0a090740; }
.modern.motion-on .puzzle-scroll-cue{ transition: transform 220ms cubic-bezier(.2,1.4,.4,1), box-shadow 220ms ease; }
.modern.motion-on .puzzle-cue-arrow svg{ transition: transform 280ms cubic-bezier(.2,1.6,.4,1); }
.modern.motion-on .puzzle-scroll-cue::before{ transition: transform 620ms ease; }
@media (hover: hover){.modern .puzzle-scroll-cue:hover:not(:active){ transform: translateY(-2px); box-shadow: inset 0 2px 1px #fff9e3, 0 8px 0 #ad7b81, 0 10px 0 1px #12110d, 0 17px 30px #0a090755, 0 0 32px #ffdc8b30; }
.modern .puzzle-scroll-cue:hover::before{ transform: translateX(100%); }
.modern .puzzle-scroll-cue:hover .puzzle-cue-arrow svg{ transform: translateY(3px); }

}
.modern .puzzle-solved .puzzle-card{ opacity: 1; cursor: default; touch-action: pan-y; box-shadow: var(--puzzle-relief),0 0 0 2px #fff8d5d9,0 0 24px #fff0bea6,0 0 60px #f2d28780,0 17px 20px #08070640; }
.modern .puzzle-solved .puzzle-instruction{ visibility: hidden; }
.modern .puzzle-complete .puzzle-card{ box-shadow: var(--puzzle-relief),0 0 0 1px #fff1d65c,0 0 27px #f0daa740,0 17px 18px #08070644; }
.modern .puzzle-complete .puzzle-completion{ transform: translateY(calc(-1 * var(--puzzle-completion-lift, 0px))); }
.modern .puzzle-solved .puzzle-status{ display: none; }
.modern .puzzle-heading h2:focus{ outline: none; }
.modern .puzzle-complete .puzzle-scroll-cue{ display: flex; width: fit-content; }
.modern .puzzle-complete .puzzle-scroll-cue[hidden]{ display: none; }
.modern dialog.puzzle-retry-dialog{ width: min(380px, calc(100% - 32px)); max-height: calc(100svh - 32px); margin: auto; padding: 30px 24px 27px; border: 1px solid #eddcb4b0; border-radius: 32px; background: radial-gradient(ellipse at 50% 0, #5b4d36, transparent 75%), #14120e; color: #fff0d2; text-align: center; box-shadow: inset 0 2px #ffffff22, 0 9px 0 #0b0a08, 0 25px 80px #070605a6; animation: none; overflow-y: auto; }
.modern dialog.puzzle-retry-dialog::backdrop{ background: #0a0907c9; }
.modern .puzzle-retry-art{ position: relative; display: grid; place-items: center; width: 104px; height: 95px; margin: 0 auto 13px; }
.modern .puzzle-retry-art span{ display: grid; place-items: center; width: 74px; height: 74px; border: 1px solid #fff2b9; border-radius: 26px; background: linear-gradient(150deg, #ffecb0, #e7b36f); color: #544a3a; font: 3.7rem/.8 sans-serif; box-shadow: inset 0 2px #ffffff99, 0 5px 0 #956073, 0 12px 24px #0d0c0955; transform: rotate(-9deg); }
.modern .puzzle-retry-art i, .modern .puzzle-retry-art b{ position: absolute; right: -5px; top: 4px; color: #fff1d0; font: 1.6rem/1 sans-serif; }
.modern .puzzle-retry-art b{ left: -7px; right: auto; top: 63px; font-size: 1.1rem; color: #ffe4a5; }
.modern .puzzle-retry-dialog h2{ margin: 0 0 23px; font: 400 clamp(2rem, 7.5vw, 2.6rem)/1.15 'Patrick Hand',cursive; color: #fff0c9; letter-spacing: -.01em; text-wrap: balance; }
.modern .puzzle-retry-button{ min-height: 48px; padding: 12px 31px; border: 1px solid #fff0b4; border-radius: 18px; background: linear-gradient(#ffe8a9,#edc888); color: #3e3629; font: 400 1.25rem/1.25 'Patrick Hand',cursive; box-shadow: inset 0 2px #ffffff99, 0 4px 0 #ac7c8e, 0 9px 16px #0807054d; }
.modern .puzzle-retry-button:active{ transform: translateY(3px); box-shadow: inset 0 2px #ffffff99, 0 1px 0 #ac7c8e; }
.modern .puzzle-retry-button:focus-visible{ outline: 3px solid #fff1bd; outline-offset: 5px; }
.modern.motion-on:not(.document-hidden) dialog.puzzle-retry-dialog[open]{ animation: puzzle-retry-in 360ms cubic-bezier(.2,.8,.25,1.15); }
@keyframes puzzle-retry-in{ from { opacity: 0; transform: translateY(15px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modern .puzzle-particles{ position: absolute; inset: 0; pointer-events: none; z-index: 100; overflow: hidden; }
.modern .puzzle-particles i{ position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 2px; background: var(--burst-color); box-shadow: 0 0 6px #ffffff33; animation: puzzle-burst 480ms cubic-bezier(.1,.65,.3,1) both; }
.modern.motion-on:not(.document-hidden) .is-celebrating .puzzle-card{ animation: puzzle-jiggle 600ms ease both; }
.modern.motion-on .puzzle-complete .puzzle-scene{ opacity: calc(1 - var(--puzzle-exit, 0)); transform: translateZ(calc(var(--puzzle-exit, 0) * -180px)) scale(calc(1 - var(--puzzle-exit, 0) * .1)); }
@keyframes puzzle-jiggle{ 0%,100% { translate: 0 0; rotate: 0deg; } 18%,52% { translate: -7px -2px; rotate: -1deg; } 35%,68% { translate: 7px 2px; rotate: 1deg; } 84% { translate: -3px 0; rotate: -.5deg; } }
@keyframes puzzle-burst{ from { opacity: 1; transform: translate3d(0,0,0) scale(.6); } to { opacity: 0; transform: translate3d(var(--burst-x),var(--burst-y),0) rotate(110deg) scale(.15); } }
@media (max-width: 600px){.modern .puzzle-title-row h2{ min-width: 0; text-wrap: balance; }
.modern .puzzle-instruction{ font-size: 1.05rem; }
.modern .puzzle-heading{ margin-bottom: 12px; }
.modern .puzzle-card{ min-height: 44px; padding: 9px 18px; border-radius: 14px; font-size: clamp(1.3rem, 6vw, 1.8rem); }

}
@media (prefers-reduced-motion: reduce){.modern .puzzle-complete .puzzle-scene{ opacity: 1; transform: none; }
.modern .puzzle-card, .modern .puzzle-particles i{ animation: none !important; }
.modern.motion-on .puzzle-scroll-cue, .modern.motion-on .puzzle-cue-arrow svg, .modern.motion-on .puzzle-scroll-cue::before{ transition: none; }
.modern.motion-on:not(.document-hidden) dialog.puzzle-retry-dialog[open]{ animation: none; }

}
@media (max-height: 760px){.modern .puzzle-alarm{ flex-basis: 42px; width: 42px; }
.modern .puzzle-heading{ margin-bottom: 10px; }
.modern .puzzle-heading h2{ font-size: 2rem; }
.modern .puzzle-instruction{ margin-top: 5px; font-size: .98rem; line-height: 1.25; }
.modern .puzzle-card{ min-height: 44px; padding: 8px 18px; font-size: 1.5rem; }

}