/* Today's puzzle game window (Scott, 2026-10-20: "is the daily game in popup screen kind of like the other games? the promo
   it created made it looks that way. so I think we should"). The page (/daily/) keeps its words and cards; today's card
   plays in this full-screen window (assets/daily-window.js), dressed like the motion director's promo: charcoal, gold, cream,
   the stencil face, a gold-rimmed screen on a big display. One screen at a time, no scrolling at 375 by 667. */

/* ---------- the page: the launch panel ---------- */
.dw-launch { display: grid; gap: 0.9rem; max-width: 40rem; }
.dw-launch > * { margin: 0; }
.dw-launch h1 { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 0.92; font-size: clamp(2.6rem, 10vw, 4.2rem); }
.dw-today { display: flex; flex-wrap: wrap; gap: 0.4rem; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.dw-today:empty { display: none; }
.dw-today span { padding: 0.2rem 0.6rem; border-radius: 999px; background: #22292a; border: 1px solid #3a4244; color: #ece4d2; }
.dw-today span.dw-t-gold { background: #e3a72f; border-color: #e3a72f; color: #1d1405; font-weight: 700; }
.dw-today span.dw-t-done { background: #1f8f5a; border-color: #1f8f5a; color: #fff; }
.dw-cta { font-size: 1.25rem; min-height: 3.6rem; padding-inline: 2rem; letter-spacing: 0.04em; }
.dw-on .dw-cta { animation: dw-beat 1.6s ease-in-out 1.2s infinite; }
@keyframes dw-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.dw-calm .dw-cta { animation: none; }
.dw-on .dw-inline:empty { display: none; }
@media (min-width: 980px) { .dw-launch > :not(.dw-go) { max-width: calc(100% - 16rem); } }

/* ---------- the window ---------- */
html.dw-open, html.dw-open body { overflow: hidden; }
.dw { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: rgba(8, 10, 11, 0.9); color: #ece4d2;
  font-family: var(--body); -webkit-tap-highlight-color: transparent; opacity: 0; transition: opacity 220ms ease; }
.dw[hidden] { display: none; }
.dw.is-on { opacity: 1; }
.dw *, .dw *::before, .dw *::after { box-sizing: border-box; }
@supports (backdrop-filter: blur(4px)) { .dw { backdrop-filter: blur(6px); } }
.dw-screen { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden;
  background: radial-gradient(120% 60% at 50% 0%, #252b2c 0%, #16191a 60%, #111415 100%); }
@media (min-width: 700px) and (min-height: 640px) {
  .dw-screen { width: min(30rem, calc(100vw - 3rem)); height: min(54rem, calc(100dvh - 3rem)); border-radius: 1.6rem;
    box-shadow: 0 0 0 3px rgba(227, 167, 47, 0.7), 0 0 0 11px #0b0d0e, 0 30px 80px rgba(0, 0, 0, 0.75), 0 0 120px rgba(227, 167, 47, 0.18); }
}
/* the top bar: the mark, the puzzle number, Read it again, and the close button */
.dw-top { position: relative; z-index: 3; flex: none; display: flex; align-items: center; gap: 0.55rem; min-height: 3.4rem; padding: 0.35rem 0.5rem 0.35rem 0.85rem;
  padding-top: max(0.35rem, env(safe-area-inset-top)); }
.dw-top svg { flex: none; width: 1.35rem; height: 1.65rem; }
.dw-brand { margin: 0; flex: 1; min-width: 0; font: 900 1.05rem/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-brand b { color: #f0c25a; font-weight: 900; }
.dw-again, .dw-x { flex: none; min-width: 2.75rem; min-height: 2.75rem; border-radius: 999px; border: 1px solid #4b5254; background: rgba(18, 21, 22, 0.8); color: #ece4d2;
  font: 700 0.82rem/1 var(--body); cursor: pointer; }
.dw-again { padding: 0 0.9rem; }
.dw-again[hidden] { display: none; }
.dw-x { width: 2.75rem; padding: 0; font-size: 1.5rem; line-height: 1; }
.dw-again:hover, .dw-x:hover, .dw-again:focus-visible, .dw-x:focus-visible { border-color: #f0c25a; color: #f0c25a; }
.dw :focus-visible { outline: 3px solid #f0c25a; outline-offset: 3px; }
/* the progress bar for the whole round */
.dw-prog { position: relative; z-index: 3; flex: none; height: 4px; margin: 0 0.85rem; border-radius: 4px; background: rgba(236, 228, 210, 0.12); overflow: hidden; }
.dw-prog i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #c48e1f, #f0c25a); border-radius: 4px; transition: width 420ms cubic-bezier(.3, .8, .3, 1); }

/* the faces: one at a time, flipped like a card */
.dw-faces { position: relative; flex: 1; min-height: 0; perspective: 1400px; }
.dw-face { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.75rem; padding: 0.85rem 1rem; padding-bottom: max(0.9rem, env(safe-area-inset-bottom));
  overflow: hidden; backface-visibility: hidden; transform-origin: 50% 50%; }
.dw-face[hidden] { display: none; }
.dw-face.dw-in { animation: dw-flipin 300ms cubic-bezier(.2, .8, .3, 1) both; }
.dw-face.dw-out { animation: dw-flipout 200ms cubic-bezier(.6, 0, .8, .4) both; pointer-events: none; }
@keyframes dw-flipin { from { transform: rotateY(-80deg) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dw-flipout { from { transform: none; opacity: 1; } to { transform: rotateY(80deg) scale(0.96); opacity: 0; } }
.dw-calm .dw-face.dw-in { animation: dw-fadein 220ms ease both; }
.dw-calm .dw-face.dw-out { animation: dw-fadeout 160ms ease both; }
@keyframes dw-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes dw-fadeout { from { opacity: 1; } to { opacity: 0; } }
.dw-face > * { margin: 0; }
.dw-face .dw-fill { flex: 1; min-height: 0; }

/* buttons: 44 px and up */
.dw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.9rem; padding: 0.6rem 1.3rem; border-radius: 999px; cursor: pointer;
  font: 800 1rem/1.1 var(--body); text-decoration: none; text-align: center; color: #ece4d2; border: 1.5px solid #5d6466; background: rgba(255, 255, 255, 0.04); }
.dw-btn:hover { border-color: #f0c25a; color: #fff; }
.dw-btn.gold { color: #1d1405; border-color: #8a6a22; background: linear-gradient(180deg, #f6d878, #e3a72f 55%, #c48e1f); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 8px 22px rgba(227, 167, 47, 0.28); }
.dw-btn.gold:hover { color: #1d1405; filter: brightness(1.06); }
.dw-btn.big { width: 100%; min-height: 3.5rem; font: 900 1.45rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.dw-btn:disabled { opacity: 0.55; cursor: default; }
.dw-row { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.dw-row .dw-btn { flex: 1 1 9rem; }

/* ---------- face 1: the start card ---------- */
.dw-start { justify-content: center; text-align: center; align-items: center; }
.dw-cal { position: relative; width: min(46vw, 10.5rem); aspect-ratio: 0.84; border-radius: 0.9rem; background: linear-gradient(180deg, #f6eed9, #e9dcbb); color: #1d1b17;
  display: grid; grid-template-rows: auto 1fr auto; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4); transform: rotate(-3deg); flex: none; }
.dw-cal::before, .dw-cal::after { content: ""; position: absolute; top: -0.45rem; width: 0.55rem; height: 1.1rem; border-radius: 0.3rem; background: linear-gradient(#8b8371, #3c3324); }
.dw-cal::before { left: 26%; } .dw-cal::after { right: 26%; }
.dw-cal .m { border-radius: 0.9rem 0.9rem 0 0; background: #e3a72f; color: #2a1c04; font: 900 0.95rem/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.65rem 0 0.5rem; }
.dw-cal .d { align-self: center; font: 900 clamp(3.6rem, 22vw, 5.4rem)/0.9 var(--display); }
.dw-cal .w { font: 700 0.7rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #5d584c; padding-bottom: 0.75rem; }
.dw-cal-stamp { position: absolute; right: -1.1rem; bottom: 1.6rem; transform: rotate(-12deg); padding: 0.3rem 0.55rem 0.15rem; border-radius: 0.4rem; background: #f0c25a; color: #16191a;
  font: 900 1.5rem/1 var(--display); box-shadow: 0 0 0 4px #16191a, 0 10px 24px rgba(0, 0, 0, 0.5); }
.dw-kicker { font: 700 0.74rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #f0c25a; }
.dw-title { font: 900 clamp(2rem, 9.5vw, 2.8rem)/0.92 var(--display); text-transform: uppercase; letter-spacing: 0.01em; max-width: 22rem; }
.dw-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; }
.dw-chip { padding: 0.2rem 0.6rem; border-radius: 999px; font: 700 0.7rem/1.3 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; background: #22292a; border: 1px solid #3a4244; }
.dw-chip.gold { background: #e3a72f; border-color: #e3a72f; color: #1d1405; }
.dw-chip.easy { background: #1f8f5a; border-color: #1f8f5a; color: #fff; }
.dw-chip.medium { background: #b88a2a; border-color: #b88a2a; color: #1d1405; }
.dw-chip.hard { background: #a5432e; border-color: #a5432e; color: #fff; }
.dw-chip.done { background: #1f8f5a; border-color: #1f8f5a; color: #fff; }
.dw-chip.fire { color: #f0c25a; }
.dw-how { color: #c9c0ac; font-size: 0.95rem; max-width: 22rem; }
.dw-yday { font: 0.78rem/1.4 var(--mono); color: #a7a191; max-width: 22rem; }
.dw-yday:empty { display: none; }
.dw-start .dw-btn.big { max-width: 22rem; margin-top: 0.3rem; }
.dw-start .dw-out { font-size: 0.9rem; color: #ffb3aa; }
.dw-start .dw-out:empty { display: none; }

/* ---------- face 2: the story ---------- */
.dw-story { justify-content: center; }
.dw-paper { position: relative; padding: 1.3rem 1.2rem 1.4rem; border-radius: 0.8rem; background: linear-gradient(180deg, #f4ead1, #e6d8b4); color: #2a2620;
  font-size: 1.08rem; line-height: 1.5; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); transform: rotate(-0.6deg); overflow: auto; max-height: 100%; }
.dw-paper p { margin: 0 0 0.7rem; } .dw-paper p:last-child { margin: 0; }
.dw-paper .dw-tag { display: block; margin-bottom: 0.7rem; font: 700 0.7rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #8a6a22; }

/* ---------- face 3: the puzzle (today's card, moved in from the page) ---------- */
.dw-play { padding-top: 0.5rem; gap: 0; }
.dw-play > .d-box, .dw-play > .cb-card, .dw-play > .cipher-solo { flex: 1; min-height: 0; max-width: none; width: 100%; margin: 0; display: flex; flex-direction: column; }
/* the page's own headings and result boxes step aside: the start card and the win screen say it */
.dw-play .d-box > .eyebrow, .dw-play .d-box > .d-name, .dw-play .d-box > .d-meta, .dw-play .d-intro > p:first-child,
.dw-play [data-d-result], .dw-play [data-cb-win], .dw-play #win, .dw-play .cb-tag, .dw-play .cb-card > h2, .dw-play .cb-intro > p:first-child,
.dw-play .cipher > .stamp-red, .dw-play .cipher > .eyebrow, .dw-play .cipher > h2, .dw-play .cipher > .daily-tag, .dw-play .cracked-stamp { display: none !important; }
.dw-play .d-intro, .dw-play .cb-intro { padding: 1.2rem; text-align: center; background: none; border: 0; box-shadow: none; }
.dw-play [data-d-play], .dw-play .cb-play { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dw-play [data-d-play][hidden], .dw-play .cb-play[hidden] { display: none; }
.dw-play .cb-card { gap: 0.4rem; padding: 0; background: none; border: 0; box-shadow: none; }
.dw-play .cb-card::before, .dw-play .cb-card::after { display: none; }
.dw-play .d-bar { flex: none; margin: 0 0 0.45rem; min-height: 2.75rem; gap: 0.6rem; }
.dw-play .d-bar .d-clock { color: #f0c25a; font-size: 1.35rem; }
.dw-play .d-giveup, .dw-play .hint-btn { min-height: 2.75rem; padding: 0.35rem 0.95rem; border-radius: 999px; font-size: 0.8rem; }
.dw-play .hint-btn { margin-left: auto; }
.dw-play .cb-hintline { flex: none; margin-bottom: 0.45rem; font-size: 0.9rem; color: #ece4d2; }
.dw-play .d-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.dw-play .d-stage.dw-scroll, .dw-play .d-stage[data-dw-scroll] { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.dw-play .d-stage .hk-stop { transform-origin: 50% 0; margin: 0 auto; padding: 0.9rem; }
.dw-play .d-stage .hk-prompt { font-size: 0.98rem; }
.dw-play.dw-has-story .d-stage .hk-prompt { display: none; }
/* the code days: the six codes made shorter so they fit one phone screen */
.dw-play .n-flag-hoist { gap: 0.5rem; }
.dw-play .n-flag-hoist-sky { padding: 0.9rem 0 0.7rem; }
.dw-play .n-flag-hoist-mast { gap: 0.12rem; }
.dw-play .n-flag-hoist-cloth svg { width: 3.4rem; height: 2.27rem; }
.dw-play .n-flag-hoist-letter { font-size: 1.35rem; }
.dw-play .n-flag-hoist-key { grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); gap: 0.25rem; padding: 0.4rem; }
.dw-play .n-flag-hoist-card { font-size: 0.85rem; }
.dw-play .n-flag-hoist-card svg { width: 2.5rem; height: 1.67rem; }
.dw-play .hk-morse-player { gap: 0.5rem; }
.dw-play .hk-morse-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 0.3rem; margin-top: 0.3rem; font-size: 0.8rem; }
.dw-play .hk-morse-grid b { width: 0.9rem; }

/* the keeper's wheel (Saturdays) on a phone screen */
.dw-play .cipher-solo .cipher { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0.9rem 0.9rem 0.7rem; }
.dw-play .cipher .keeper { margin: 0; font-size: 0.86rem; line-height: 1.4; }
.dw-play .cipher .cipher-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.dw-play .cipher .wheel { width: min(70vw, 34vh, 17rem); height: auto; flex: none; }
.dw-play .cipher .cipher-body > .stack { width: 100%; gap: 0.5rem !important; }
.dw-play .cipher .hint { margin: 0; font-size: 0.85rem; }
.dw-play .cipher .cipher-foot { margin: 0; }
.dw-play .cipher .turn { min-width: 2.75rem; min-height: 2.75rem; }

/* ---------- face 4: the win, or not today ---------- */
.dw-win { justify-content: center; align-items: center; text-align: center; gap: 0.6rem; }
.dw-stampbox { position: relative; height: 5.6rem; display: grid; place-items: center; width: 100%; }
.dw-stamp { display: inline-block; padding: 0.12em 0.3em 0.02em; border-radius: 0.7rem; background: #f0c25a; color: #16191a; font: 900 clamp(3rem, 15vw, 4.2rem)/0.95 var(--display);
  text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; box-shadow: 0 0 0 6px #16191a, 0 0 0 9px rgba(240, 194, 90, 0.55), 0 22px 50px rgba(0, 0, 0, 0.6);
  transform: rotate(-7deg); }
.dw-stamp.is-slam { animation: dw-slam 420ms cubic-bezier(.2, 1.35, .4, 1) both; }
@keyframes dw-slam { 0% { transform: rotate(-16deg) scale(2.3); opacity: 0; } 55% { opacity: 1; } 100% { transform: rotate(-7deg) scale(1); opacity: 1; } }
.dw-calm .dw-stamp.is-slam { animation: dw-fadein 300ms ease both; }
.dw-stamp.soft { background: transparent; color: #ece4d2; box-shadow: 0 0 0 3px rgba(236, 228, 210, 0.7); transform: rotate(-4deg); }
.dw-reveal { font: 900 1.35rem/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.02em; max-width: 22rem; }
.dw-reveal:empty { display: none; }
.dw-streak { display: grid; justify-items: center; gap: 0.4rem; }
.dw-streak[hidden] { display: none; }
.dw-streak-n { display: flex; align-items: center; gap: 0.45rem; }
.dw-streak-n svg { width: 2.4rem; height: 3rem; filter: drop-shadow(0 0 14px rgba(240, 140, 40, 0.65)); }
.dw-streak-n b { font: 900 3.6rem/0.9 "Big Shoulders Display", var(--display); color: #fff3d8; font-variant-numeric: tabular-nums; }
.dw-streak-n span { font: 700 0.8rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #c9c0ac; text-align: left; }
.dw-days { display: flex; gap: 0.35rem; }
.dw-days i { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid rgba(236, 228, 210, 0.3); display: grid; place-items: center; font: 700 0.7rem/1 var(--mono); font-style: normal; color: rgba(236, 228, 210, 0.6); }
.dw-days i.on { background: #e3a72f; border-color: #f0c25a; color: #16191a; }
.dw-days i.today { box-shadow: 0 0 0 3px rgba(240, 194, 90, 0.35); }
.dw-line { color: #ece4d2; font-size: 1rem; max-width: 22rem; }
.dw-small { color: #a7a191; font-size: 0.86rem; max-width: 22rem; }
.dw-small:empty { display: none; }
/* the rating, mirrored to the page's own (daily.js sends it) */
.dw-rate { display: grid; gap: 0.45rem; justify-items: center; width: 100%; max-width: 22rem; padding: 0.7rem 0.6rem; border-radius: 0.8rem; background: rgba(0, 0, 0, 0.28); border: 1px solid #3a4244; }
.dw-rate[hidden] { display: none; }
.dw-rate p { margin: 0; font-size: 0.9rem; }
.dw-stars { display: flex; gap: 0.25rem; }
.dw-stars button { width: 2.75rem; height: 2.75rem; border-radius: 0.5rem; border: 1px solid #3a4244; background: #15191a; color: #4b5254; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.dw-stars button[aria-pressed="true"] { color: #f0c25a; border-color: #b88a2a; }
.dw-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; }
.dw-tags button { min-height: 2.75rem; padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid #4b5254; background: transparent; color: #d9d1bf; font: inherit; font-size: 0.82rem; cursor: pointer; }
.dw-tags button[aria-pressed="true"] { background: #f0c25a; border-color: #f0c25a; color: #1d1405; font-weight: 700; }
.dw-rate .dw-btn { min-height: 2.75rem; padding-block: 0.4rem; }
.dw-rate .dw-out { font-size: 0.85rem; color: #ffb3aa; min-height: 1rem; }
.dw-rate .dw-out:empty { display: none; }
.dw-thanks { color: #6fcf97; font-weight: 700; }
.dw-thanks[hidden] { display: none; }
.dw-win .dw-btn.big { max-width: 22rem; }
.dw-spark { position: absolute; left: 50%; top: 22%; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #f0c25a; opacity: 0; pointer-events: none; }

/* ---------- face 5: the share card ---------- */
.dw-share { justify-content: center; align-items: center; gap: 0.9rem; }
.dw-card { position: relative; width: min(100%, 19rem); padding: 1.1rem 1.2rem 1rem; border-radius: 1.1rem; text-align: center; overflow: hidden;
  background: radial-gradient(130% 80% at 50% 0%, #2e3537, #16191a 70%); box-shadow: 0 0 0 2px rgba(240, 194, 90, 0.75), 0 22px 50px rgba(0, 0, 0, 0.6); }
.dw-card > * { margin: 0; }
.dw-card-brand { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font: 900 0.95rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.dw-card-brand svg { width: 1.1rem; height: 1.35rem; }
.dw-card-k { margin-top: 0.8rem; font: 900 1.6rem/0.95 var(--display); text-transform: uppercase; color: #f0c25a; }
.dw-card-date { margin-top: 0.3rem; font: 700 0.7rem/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #a7a191; }
.dw-card-type { margin-top: 0.7rem; font-weight: 700; color: #ece4d2; }
.dw-card-time { font: 900 4.4rem/0.95 "Big Shoulders Display", var(--display); color: #fff3d8; font-variant-numeric: tabular-nums; margin-top: 0.3rem; }
.dw-card-time.small { font-size: 2.2rem; line-height: 1.05; }
.dw-card-sub { font: 700 0.78rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #c9c0ac; }
.dw-card-url { margin-top: 0.8rem; display: inline-block; padding: 0.3rem 0.7rem; border-radius: 0.4rem; background: #f0c25a; color: #16191a; font: 700 0.78rem/1 var(--mono); letter-spacing: 0.04em; }
.dw-card-stamp { position: absolute; right: -0.55rem; top: 0.5rem; transform: rotate(12deg); padding: 0.12rem 0.4rem 0.03rem; border: 3px solid rgba(240, 194, 90, 0.8); border-radius: 0.35rem;
  color: rgba(240, 194, 90, 0.9); font: 900 0.85rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; }
.dw-share .dw-row { width: min(100%, 22rem); }
.dw-share .dw-btn.big { width: min(100%, 22rem); }

/* fireworks from the keeper's wheel play over the window, not behind it; Calm mode has none */
.dw-open .fx-canvas { z-index: 3100; }
.dw-calm .fx-canvas { display: none; }

@media (max-height: 640px) {
  .dw-cal { width: min(36vw, 8rem); }
  .dw-cal .d { font-size: 3.4rem; }
  .dw-title { font-size: 1.9rem; }
  .dw-stampbox { height: 4.4rem; }
  .dw-stamp { font-size: 2.8rem; }
  .dw-streak-n b { font-size: 2.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dw-face.dw-in, .dw-face.dw-out, .dw-stamp.is-slam { animation-duration: 1ms; }
  .dw-cta { animation: none; }
}
/* the puzzles' own small buttons grow to 44 px in the window */
.dw .dw-play .hk-btn, .dw .dw-play .hk-input { min-height: calc(2.75rem / var(--dw-s, 1)); }
.dw .dw-play .hk-btn { min-width: calc(2.75rem / var(--dw-s, 1)); }
.dw-play .cipher .snd-btn { min-width: 2.75rem; min-height: 2.75rem; }

/* ======================================================================
   Keyhole round 2 (2026-10-23): straight into the puzzle, the cracked moment, the next games
   ====================================================================== */
/* /daily/#play (Play on the home page): the page stays dark until the puzzle window is up, so nothing shows in between; never longer than 1.5 s, script or no script */
.dw-straight body { background: #0c0e0f; }
.dw-straight body > :not(.dw) { visibility: hidden; animation: dw-straight-fs 0s linear 1.5s forwards; }
@keyframes dw-straight-fs { to { visibility: visible; } }
/* the card's own start panel never shows inside the window: Play has already pressed it */
.dw .d-intro, .dw .cb-intro { display: none !important; }
.dw-loading { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 0.8rem; padding: 1rem; text-align: center;
  background: radial-gradient(120% 80% at 50% 30%, #222a2c, #121516 75%); }
.dw-loading[hidden] { display: none; }
.dw-loading p { margin: 0; font: 700 0.9rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #f0c25a; }
.dw-loader svg { width: 3rem; height: 3.6rem; animation: dw-loader 1s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(240, 194, 90, 0.5)); }
@keyframes dw-loader { 50% { transform: translateY(-6px) scale(1.05); } }
.dw-calm .dw-loader svg { animation: none; }

/* The cracked moment */
.dw-win { justify-content: flex-start; overflow-y: auto; gap: 0.55rem; padding-top: 0.6rem; }
.dwm { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding-top: 0.2rem; }
.dwm-lock { position: relative; width: clamp(4.3rem, 18vw, 5.4rem); aspect-ratio: 108 / 132; margin-top: 0.4rem; }
.dwm-mark { position: relative; z-index: 2; display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 18px rgba(240, 194, 90, 0.45)); }
.dwm-keyclip { position: absolute; z-index: 3; left: 33.15%; width: 30%; top: -120%; height: 153.33%; overflow: hidden; pointer-events: none; }
.dwm-key { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; transform: translateY(-38%); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
.dwm-burst { position: absolute; z-index: 1; left: 48.15%; top: 33.33%; width: 16rem; height: 16rem; border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #fffbe8 0 7%, rgba(255, 236, 170, 0.85) 16%, rgba(240, 194, 90, 0.35) 38%, transparent 66%); }
.dwm-ring { position: absolute; z-index: 1; left: 48.15%; top: 33.33%; width: 5rem; height: 5rem; border-radius: 50%; border: 3px solid #f6d878; transform: translate(-50%, -50%) scale(0.2); opacity: 0; pointer-events: none; }
.dwm-sparks { position: absolute; z-index: 4; left: 48.15%; top: 33.33%; width: 0; height: 0; pointer-events: none; }
.dwm-spark, .dwm-conf { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; }
.dwm-conf { width: 7px; height: 12px; border-radius: 2px; }
.dwm-word { margin: 0.1rem 0 0; display: flex; justify-content: center; font: 900 clamp(3rem, 15vw, 4.4rem)/0.9 var(--display); text-transform: uppercase; letter-spacing: 0.02em;
  color: #f6d878; text-shadow: 0 4px 0 #5a3d06, 0 0 28px rgba(240, 194, 90, 0.45); }
.dwm-word span { display: inline-block; opacity: 0; }
.dwm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; width: 100%; max-width: 20rem; margin: 0.2rem auto 0 !important; }
.dwm-stats p { margin: 0; display: flex; flex-direction: column; align-items: center; padding: 0.35rem 0.4rem; border-radius: 0.7rem; background: rgba(236, 228, 210, 0.07); border: 1px solid rgba(240, 194, 90, 0.25); }
.dwm-stats b { font: 900 2.1rem/1 var(--display); color: #efe6d0; font-variant-numeric: tabular-nums; }
.dwm-stats span { font: 700 0.7rem/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #b9b19c; }
.dwm-nextdaily { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; min-height: 2.9rem; padding: 0.4rem 1rem; border-radius: 999px; text-decoration: none;
  color: #ece4d2; border: 1.5px solid #2ee6ff; background: rgba(46, 230, 255, 0.08); }
.dwm-nextdaily b { font-family: var(--display-plain); text-transform: uppercase; letter-spacing: 0.04em; }
.dwm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; width: 100%; }
.dwm-card { display: flex; flex-direction: column; gap: 0.15rem; min-height: 44px; padding: 0 0 0.45rem; border-radius: 0.6rem; overflow: hidden; text-decoration: none; text-align: left; color: #ece4d2;
  background: linear-gradient(180deg, #262c2e, #171b1c); border: 1px solid #3d4446; transition: transform 160ms ease, border-color 160ms ease; }
.dwm-card:hover, .dwm-card:focus-visible { border-color: #e3a72f; transform: translateY(-2px); }
.dwm-card img { display: block; width: 100%; height: 4.2rem; object-fit: cover; object-position: 50% 12%; }
.dwm-card b { padding: 0.25rem 0.5rem 0; font: 800 0.88rem/1.05 var(--display-plain); text-transform: uppercase; letter-spacing: 0.02em; }
.dwm-card span { padding: 0 0.5rem; font-size: 0.7rem; line-height: 1.25; color: #b9b19c; }
.dw-ratebox { width: 100%; text-align: center; }
.dw-ratebox summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; color: #f0c25a; font-weight: 700; }

/* the timeline (celebrate() adds .is-go): the key goes home 0.08 to 0.64 s, light and ring at 0.6 s, CRACKED from 0.7 s,
   the numbers at 1.15 s, every button by 1.9 s; a tap jumps to the end */
.dwm.is-go .dwm-key { animation: dwm-keyin 560ms cubic-bezier(.5, 0, .75, 0) 80ms forwards; }
.dwm.is-go .dwm-mark { animation: dwm-clunk 420ms cubic-bezier(.3, 1.7, .5, 1) 600ms both; }
.dwm.is-go .dwm-burst { animation: dwm-burst 900ms ease-out 600ms both; }
.dwm.is-go .dwm-ring { animation: dwm-ring 800ms ease-out 620ms both; }
.dwm.is-go .dwm-word span { animation: dwm-slam 480ms cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(700ms + var(--i) * 45ms); }
.dw-win.dw-in .dwm-stats { animation: dwm-up 380ms ease 1150ms both; }
.dw-win.dw-in .dw-days { animation: dwm-up 380ms ease 1300ms both; }
.dw-win.dw-in .dwm ~ .dw-small { animation: dwm-up 380ms ease 1400ms both; }
.dw-win.dw-in .dwm ~ .dw-btn.gold { animation: dwm-up 380ms ease 1500ms both; }
.dw-win.dw-in .dwm-nextdaily { animation: dwm-up 380ms ease 1600ms both; }
.dw-win.dw-in .dwm ~ .dwm-cards { animation: dwm-up 420ms ease 1700ms both; }
.dw-win.dw-in .dwm ~ .dw-ratebox { animation: dwm-up 380ms ease 1900ms both; }
@keyframes dwm-keyin { from { transform: translateY(-38%); } to { transform: translateY(102%); } }
@keyframes dwm-clunk { 0% { transform: scale(1); } 40% { transform: scale(1.14, 0.9); } 100% { transform: scale(1); filter: drop-shadow(0 0 26px rgba(240, 194, 90, 0.75)); } }
@keyframes dwm-burst { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.55; } }
@keyframes dwm-ring { 0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(3.4); opacity: 0; } }
@keyframes dwm-slam { 0% { transform: translateY(-0.6em) scale(1.8) rotate(-10deg); opacity: 0; } 60% { transform: scale(0.92, 1.08); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes dwm-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.dwm-skip .dwm *, .dwm-skip > * { animation-delay: 0s !important; animation-duration: 1ms !important; }
/* Calm mode and reduced motion: a fade, no key, no ring, no sparks */
.dw-calm .dwm-keyclip, .dw-calm .dwm-ring, .dw-calm .dwm-sparks { display: none; }
.dw-calm .dwm.is-go .dwm-mark, .dw-calm .dwm.is-go .dwm-word span, .dw-calm .dw-win.dw-in > * { animation: dw-calmfade 300ms ease both !important; }
.dw-calm .dwm-word span { opacity: 1; }
.dw-calm .dwm.is-go .dwm-burst { animation: none; transform: translate(-50%, -50%) scale(0.8); opacity: 0.35; }
@keyframes dw-calmfade { from { opacity: 0; } to { opacity: 1; } }
@media (max-height: 700px) { .dwm-lock { width: 3.9rem; } .dwm-word { font-size: clamp(2.6rem, 13vw, 3.6rem); } .dwm-stats b { font-size: 1.8rem; } .dwm-card img { height: 3.4rem; } }

/* Scott, 2026-10-23 ("too small on desktop"): the three bridge cards get bigger art where the window has the room */
@media (min-width: 900px) and (min-height: 760px) { .dwm-card img { height: 7.5rem; } .dwm-card b { font-size: 1rem; } .dwm-card span { font-size: 0.78rem; } }

/* How to play on the puzzle screen and the "?" rules sheet (Scott, 2026-10-23: "needs to be on the game page. I had no idea what to do") */
.dw-help { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid #4b5254; background: rgba(18, 21, 22, 0.8); color: #f0c25a; font: 800 1.15rem/1 var(--display-plain); cursor: pointer; }
.dw-help:hover, .dw-help:focus-visible, .dw-help[aria-expanded="true"] { border-color: #f0c25a; background: rgba(240, 194, 90, 0.12); }
.dw-help[hidden] { display: none; }
.dw-top .dw-help { margin-left: auto; }
.dw-top .dw-help + .dw-again:not([hidden]) { margin-left: 0.4rem; }
.dw-howline { flex: none; margin: 0 0 0.35rem; padding: 0.32rem 0.6rem; border-radius: 0.6rem; background: rgba(240, 194, 90, 0.08); border: 1px solid rgba(240, 194, 90, 0.28);
  font-size: 0.8rem; line-height: 1.3; color: #ece4d2; }
.dw-howline[hidden] { display: none; }
.dw-rules { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 1rem; background: rgba(8, 10, 11, 0.78); }
.dw-rules[hidden] { display: none; }
.dw-rules-card { width: 100%; max-width: 24rem; max-height: 100%; overflow: auto; display: grid; gap: 0.6rem; padding: 1.1rem 1.1rem 1rem; border-radius: 1rem;
  background: linear-gradient(180deg, #262c2e, #171b1c); border: 1px solid rgba(240, 194, 90, 0.55); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
.dw-rules-card h2 { margin: 0; font: 900 1.6rem/1 var(--display); text-transform: uppercase; color: #efe6d0; }
.dw-rules-card h2:focus { outline: none; }
.dw-rules-how { margin: 0; font-weight: 700; color: #f0c25a; }
.dw-rules-card ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 0.9rem; line-height: 1.4; color: #cfc6b2; }
.dw-rules-card .dw-btn { justify-self: stretch; }

/* A wrong answer on a code day reacts (site review item 3, 2026-10-24) */
.cb-shake { animation: cb-shake 0.36s; }
@keyframes cb-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.cb-nope { margin: 0 0 0.4rem; min-height: 0; color: #ffb4a3; font-weight: 700; font-size: 0.88rem; line-height: 1.3; }
.cb-nope:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .cb-shake { animation: none; } }