/* 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 { 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; }