/* Keyhole Games: the frame and home page pieces on top of the inherited site.css and fx.css (2026-10-23).
   The header Join box, the phone bottom bar, the join sheet, Calm mode, the first-load key turn, the hero's Today's puzzle
   card with Join a game and Host a party, the game bands and the finale key turn. Colours and fonts come from brand.css. */

@property --kghole { syntax: '<length>'; inherits: false; initial-value: 0px; }

/* ---------- Header: the mark, the hubs, the Join box and the account ---------- */
.top .brand b { font-size: 1.35rem; white-space: nowrap; }
.nav { gap: 1.1rem; }
.nav .links { gap: 1.15rem; }
.kg-join { position: relative; display: flex; align-items: stretch; height: 2.75rem; border-radius: 0.5rem; border: 1.5px solid #6c7273;
  background: linear-gradient(180deg, #101314, #1c2123); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6); }
.kg-join:focus-within { border-color: var(--gold); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(227, 167, 47, 0.25); }
.kg-join input { width: 5.4rem; min-width: 0; border: 0; background: transparent; color: var(--gold-ink); padding: 0 0.2rem 0 0.75rem;
  font: 700 1.15rem/1 var(--mono); letter-spacing: 0.28em; text-transform: uppercase; outline: none; }
.kg-join input::placeholder { color: #7b7a70; letter-spacing: 0.2em; }
.kg-join button { flex: none; min-width: 3.4rem; border: 0; border-left: 1.5px solid #6c7273; border-radius: 0 0.4rem 0.4rem 0; cursor: pointer;
  font: 800 0.95rem/1 var(--body); color: #8f8a7c; background: linear-gradient(180deg, #2a2f31, #1a1e20); transition: color 200ms ease, background 200ms ease; }
.kg-join.is-full button { color: var(--on-gold); background: linear-gradient(180deg, #f6d878, #e3a72f); }
.kg-join-msg { position: absolute; left: 0; top: calc(100% + 0.35rem); white-space: nowrap; font: 700 0.8rem/1.2 var(--mono); color: #ffb4a3; pointer-events: none; }
.kg-join-msg:empty { display: none; }
.kg-join.is-shake { animation: kg-shake 360ms ease; }
@keyframes kg-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.kg-acct { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.85rem; border-radius: 0.5rem;
  border: 1.5px solid #6c7273; color: #ece4d2; text-decoration: none; font-weight: 700; font-size: 0.92rem; }
.kg-acct:hover, .kg-acct[aria-current="page"] { border-color: var(--gold); color: var(--gold-ink); }
.kg-acct-ic svg { width: 1.2rem; height: 1.2rem; display: block; }
.kg-acct-init { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--gold); color: #1b1408;
  font: 800 0.92rem/1 var(--mono); }
.kg-acct.is-in .kg-acct-ic { display: none; }
@media (max-width: 999px) { .nav .links { display: none; } }
@media (max-width: 760px) {
  .top .wrap { gap: 0.5rem; }
  .top .brand { gap: 0.4rem; min-width: 0; }
  .top .brand svg { width: 1.55rem; }
  .top .brand b { font-size: 1.12rem; }
  .nav { gap: 0.45rem; }
  .kg-join { height: 2.75rem; }
  .kg-join input { width: 4.4rem; font-size: 1rem; letter-spacing: 0.2em; padding-left: 0.55rem; }
  .kg-join button { min-width: 2.9rem; font-size: 0.88rem; }
  /* Signed out, phones show "Sign in" beside the bowler so the way in is plain (Scott, 2026-10-24); signed in, the initial alone */
  .kg-acct { padding: 0 0.6rem; gap: 0.35rem; font-size: 0.82rem; white-space: nowrap; }
  .kg-acct.is-in { padding: 0; width: 2.75rem; }
  .kg-acct.is-in .kg-acct-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .top .menu-btn { display: none; }
}
@media (max-width: 359px) { .top .brand b { display: none; } }
@media (max-width: 400px) {
  .kg-acct:not(.is-in) .kg-acct-ic { display: none; }
  .top .wrap { gap: 0.35rem; }
  .top .brand b { font-size: 1rem; }
  .kg-join input { width: 3.9rem; letter-spacing: 0.14em; }
}

/* ---------- The bottom bar on phones and tablets: Play (the menu), Join, Today, Me ---------- */
.kg-bar { display: none; }
@media (max-width: 999px) {
  .kg-bar { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 0.3rem max(0.4rem, env(safe-area-inset-right)) calc(0.3rem + env(safe-area-inset-bottom)) max(0.4rem, env(safe-area-inset-left));
    background-image: var(--grain), linear-gradient(180deg, #23292b, #121516); border-top: 1px solid #4b5254; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5); }
  body { padding-bottom: calc(3.9rem + env(safe-area-inset-bottom)); }
  .runner { bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
  .mnav { display: block; }
  .mnav[hidden] { display: none; }
}
.kg-bar-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-height: 3.2rem; padding: 0.2rem 0;
  border: 0; border-radius: 0.5rem; background: none; color: #d9d1bf; text-decoration: none; font: 700 0.78rem/1 var(--body); letter-spacing: 0.04em; cursor: pointer;
  width: auto; height: auto; }
.kg-bar-btn svg { width: 1.45rem; height: 1.45rem; }
.kg-bar-btn[aria-current="page"], .kg-bar-btn[aria-expanded="true"] { color: var(--gold-ink); }
.kg-bar-btn[aria-expanded="true"] { background: rgba(227, 167, 47, 0.12); }
.kg-bar .menu-btn { display: flex; border: 0; }
.kg-bar-btn:active { transform: translateY(1px); }

/* ---------- The join sheet ---------- */
.kg-sheet { width: min(26rem, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); padding: 0; border: 1px solid #6b4d10; border-radius: 0.9rem; color: var(--ink);
  background: url("topo.svg") center / cover no-repeat, radial-gradient(120% 90% at 50% 0%, #2a3134, #121516 75%); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(240, 194, 90, 0.15) inset; }
.kg-sheet::backdrop { background: rgba(8, 10, 11, 0.72); backdrop-filter: blur(3px); }
.kg-sheet[open] { animation: kg-sheet-in 320ms cubic-bezier(.2, .9, .3, 1.15); }
@keyframes kg-sheet-in { from { opacity: 0; transform: translateY(24px) scale(0.96); } }
.kg-sheet-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 1.8rem 1.4rem 1.5rem; text-align: center; }
.kg-sheet-in h2 { margin: 0; font-size: clamp(2.2rem, 9vw, 2.8rem); }
.kg-sheet-in > p { margin: 0; color: var(--muted); }
.kg-sheet-mark { width: 3rem; height: auto; filter: drop-shadow(0 0 16px rgba(240, 194, 90, 0.5)); }
.kg-sheet-x { position: absolute; top: 0.5rem; right: 0.5rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: none; color: #d9d1bf; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.kg-sheet-x:hover { color: var(--gold-ink); }
.kg-join-sheet { width: 100%; height: 3.6rem; margin-top: 0.4rem; }
.kg-join-sheet input { flex: 1; width: auto; text-align: center; font-size: 1.7rem; letter-spacing: 0.5em; padding-left: 0.9rem; }
.kg-join-sheet button { min-width: 5.2rem; font-size: 1.05rem; }
.kg-join-sheet .kg-join-msg { left: 50%; transform: translateX(-50%); }
.kg-sheet-fine { margin-top: 0.9rem !important; font-family: var(--mono); font-size: 0.8rem; }

/* ---------- Footer: Calm mode switch ---------- */
.kg-calm { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.2rem; border: 0; background: none; cursor: pointer;
  color: #a9a190; font: inherit; font-size: 0.95rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(169, 161, 144, 0.4); }
.kg-calm::after { content: "Off"; display: inline-block; min-width: 2.4rem; padding: 0.1rem 0.45rem; border-radius: 999px; border: 1.5px solid #5d6668;
  font: 700 0.72rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: #a9a190; }
.kg-calm[aria-pressed="true"]::after { content: "On"; color: var(--on-gold); background: var(--gold); border-color: var(--gold); }
.kg-calm:hover { color: var(--gold-ink); }

/* Calm mode: nothing moves, nothing loops; a fade is the most it does */
html.calm *, html.calm *::before, html.calm *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
html.calm body::before { animation: none !important; }

/* ---------- First-load screen: the key turns ---------- */
.kg-splash { display: none; }
.kg-splash-on .kg-splash { position: fixed; inset: 0; z-index: 2147483600; display: grid; place-items: center; pointer-events: auto; --kx: 50%; --ky: 42%;
  background: url("topo.svg") center / cover no-repeat, radial-gradient(120% 80% at 50% 42%, #1f2527, #0c0e0f 70%);
  -webkit-mask: radial-gradient(circle at var(--kx) var(--ky), transparent var(--kghole), #000 calc(var(--kghole) + 1px));
  mask: radial-gradient(circle at var(--kx) var(--ky), transparent var(--kghole), #000 calc(var(--kghole) + 1px));
  animation: kgs-failsafe 0s linear 1.8s forwards; }
.kg-splash-on body { overflow: hidden; }
@keyframes kgs-failsafe { to { visibility: hidden; pointer-events: none; } }
.kgs-in { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding: 1rem; text-align: center; }
.kgs-lock { position: relative; width: clamp(6.2rem, 26vw, 8.6rem); aspect-ratio: 108 / 132; }
.kgs-mark { position: relative; z-index: 1; display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 26px rgba(240, 194, 90, 0.5)); }
.kgs-key { position: absolute; z-index: 3; width: 115%; height: auto; left: -60.3%; top: 18.55%; transform-origin: 94.3% 50%; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.6)); opacity: 0; }
.kgs-light { position: absolute; z-index: 2; left: 48.15%; top: 33.33%; width: 0; height: 0; pointer-events: none; }
.kgs-light::before, .kgs-light::after { content: ""; position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; }
.kgs-light::before { width: 20rem; height: 20rem; background: radial-gradient(circle, #fffbe8 0 6%, rgba(255, 236, 170, 0.9) 14%, rgba(240, 194, 90, 0.45) 34%, transparent 66%); }
.kgs-light::after { width: 44rem; height: 44rem; background: repeating-conic-gradient(from 0deg, rgba(255, 240, 190, 0.34) 0 4deg, transparent 4deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 8%, transparent 62%); mask: radial-gradient(circle, #000 8%, transparent 62%); }
.kgs-title { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 0.9;
  font-size: clamp(2.7rem, 11vw, 6rem); color: #efe6d0; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); }
.kgs-title span { display: inline-block; opacity: 0; }
.kgs-title .kgs-gap { width: 0.28em; }
.kgs-title .kgs-gold { color: #f0c25a; text-shadow: 0 0 24px rgba(240, 194, 90, 0.5), 0 4px 0 rgba(0, 0, 0, 0.5); }
.kgs-sub { margin: 0; font-family: var(--mono); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; font-size: clamp(0.7rem, 2.2vw, 0.9rem); color: var(--gold-ink); opacity: 0; }

/* the timeline (keyhole.js adds .kgs-play): mark pops 0 to 0.38 s, key slides 0.18 to 0.6 s, turns 0.62 to 0.88 s,
   light pours 0.8 to 1.2 s, the page opens from the keyhole 1.05 to 1.49 s */
.kgs-play.kg-splash { animation: kgs-iris 440ms cubic-bezier(.7, 0, .2, 1) 1050ms forwards, kgs-failsafe 0s linear 1.8s forwards; }
.kgs-play .kgs-mark { animation: kgs-pop 380ms cubic-bezier(.3, 1.6, .5, 1) both; }
.kgs-play .kgs-key { opacity: 1; animation: kgs-slide 430ms cubic-bezier(.2, .9, .25, 1) 180ms both, kgs-turn 270ms cubic-bezier(.45, 1.7, .5, 1) 620ms forwards; }
.kgs-play .kgs-light::before { animation: kgs-light 420ms ease-out 800ms forwards; }
.kgs-play .kgs-light::after { animation: kgs-rays 700ms ease-out 820ms forwards; }
.kgs-play .kgs-title span { animation: kgs-slam 460ms cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(220ms + var(--i) * 28ms); }
.kgs-play .kgs-sub { animation: kgs-fadein 360ms ease 620ms both; }
.kgs-play .kgs-in { animation: kgs-out 420ms ease 1050ms forwards; }
.kg-splash.kgs-skip { animation: kgs-iris 280ms cubic-bezier(.7, 0, .2, 1) forwards !important; }
@keyframes kgs-pop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes kgs-slide { from { translate: -70vw 0; } to { translate: 0 0; } }
@keyframes kgs-turn { from { rotate: 0deg; } to { rotate: 90deg; } }
@keyframes kgs-light { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes kgs-rays { 0% { transform: translate(-50%, -50%) scale(0.2) rotate(0deg); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1) rotate(25deg); opacity: 1; } }
@keyframes kgs-slam { 0% { transform: translateY(-0.8em) scale(1.7) rotate(-8deg); opacity: 0; } 60% { transform: translateY(0) scale(0.92, 1.08); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes kgs-fadein { from { opacity: 0; letter-spacing: 0.6em; } to { opacity: 1; letter-spacing: 0.24em; } }
@keyframes kgs-out { to { transform: scale(1.12); opacity: 0; } }
@keyframes kgs-iris { to { --kghole: 160vmax; } }
/* Reduced motion and Calm mode: the mark and the name, then a fade */
.kg-splash-calm .kg-splash * { animation: none !important; }
.kg-splash-calm .kgs-key, .kg-splash-calm .kgs-light { display: none; }
.kg-splash-calm .kgs-title span, .kg-splash-calm .kgs-sub { opacity: 1; }
.kg-splash-calm .kgs-play.kg-splash, .kg-splash-calm .kg-splash.kgs-skip { -webkit-mask: none; mask: none; animation: kgs-fade 300ms ease 420ms forwards, kgs-failsafe 0s linear 1.8s forwards !important; }
.kg-splash-calm .kg-splash.kgs-skip { animation-delay: 0s !important; }
@keyframes kgs-fade { to { opacity: 0; } }

/* ---------- Hero: the rotating line, or the tagline when nothing moves ---------- */
.kg-hero h1 .kg-reel-line { display: none; }
.kg-hero h1 .kg-static-line { display: inline; }
.fx .kg-hero h1 .kg-reel-line { display: inline; }
.fx .kg-hero h1 .kg-static-line { display: none; }
html.calm .kg-hero h1 .kg-reel-line { display: none; }
html.calm .kg-hero h1 .kg-static-line { display: inline; }
.kg-hero h1 .kg-static-line .hl1 { display: block; }
.kg-hero .lede { max-width: 33rem; }
@media (min-width: 900px) { .kg-hero .hero-grid { grid-template-columns: 1.08fr 0.92fr; } }

/* The launcher column: Today's puzzle, then the two big buttons */
.kg-launcher { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 30rem; justify-self: center; }
.kg-big-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.kg-big { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.65rem; align-items: center; text-align: left;
  min-height: 4.4rem; padding: 0.75rem 0.9rem; border-radius: 0.7rem; cursor: pointer; text-decoration: none; font: inherit; overflow: hidden;
  transition: transform 160ms ease, box-shadow 200ms ease, filter 200ms ease; }
.kg-big svg { grid-row: 1 / 3; width: 1.9rem; height: 1.9rem; }
.kg-big b { font-family: var(--display-plain); font-weight: 900; text-transform: uppercase; font-size: 1.32rem; line-height: 1; letter-spacing: 0.02em; }
.kg-big small { font-size: 0.82rem; line-height: 1.2; opacity: 0.85; }
.kg-big-join { color: #f0c25a; border: 1px solid #121516; background: linear-gradient(180deg, #2a2f31, #121516); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 8px 18px rgba(60, 35, 0, 0.45); }
.kg-big-host { color: #2a1c04; border: 1.5px solid rgba(42, 28, 4, 0.55); background: linear-gradient(180deg, #fff6dc, #f1e1b6); box-shadow: 0 1px 0 #fff inset, 0 8px 18px rgba(60, 35, 0, 0.3); }
.kg-big::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 48%, transparent 64%); transform: translateX(-120%); }
.kg-big:hover { transform: translateY(-2px); filter: brightness(1.05); }
.kg-big:hover::before, .kg-big:focus-visible::before { transition: transform 700ms ease; transform: translateX(120%); }
.kg-big:active { transform: translateY(1px); }

/* ---------- Today's puzzle card: a paper ticket with a brass cylinder that rolls to TODAY ---------- */
.kg-today { --rh: 3.1rem; position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding: 1.15rem 1.2rem 1.1rem; border-radius: 0.6rem; color: var(--paper-ink);
  background: var(--grain), linear-gradient(180deg, #f3e7c6, #e6d5aa); border: 1px solid #b8a985; transform: rotate(-1deg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 22px 44px rgba(70, 40, 0, 0.55); }
.kg-today::before { content: ""; position: absolute; inset: 0.45rem; border: 1.5px dashed rgba(91, 82, 68, 0.35); border-radius: 0.4rem; pointer-events: none; }
.fx .kg-today { animation: sheet-float 7s ease-in-out infinite; }
.kgt-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.kgt-eyebrow { margin: 0; font-family: var(--mono); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-muted); }
.kgt-num { margin: 0; padding: 0.15rem 0.6rem; border-radius: 999px; font: 700 0.95rem/1.3 var(--mono); color: #2a1c04; background: linear-gradient(180deg, #f6d878, #e3a72f); border: 1px solid #8a6414; }
.kgt-h { margin: -0.2rem 0 0; font-size: clamp(2.2rem, 7vw, 2.9rem); color: #1d1405; text-shadow: none; }
.kgt-stage { position: relative; padding: 0.9rem 0.6rem 1.5rem; border-radius: 0.5rem;
  background: radial-gradient(120% 120% at 50% 0%, #2e3537, #141819 70%); border: 1px solid #0b0d0e; box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.5); }
.kgt-cyl { position: relative; display: flex; justify-content: center; align-items: stretch; margin: 0 auto; width: max-content; cursor: pointer;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.65)); }
.kgt-cap { width: 1.1rem; border-radius: 0.5rem; background: linear-gradient(180deg, #6b4d10, #c9962c 22%, #f6d878 45%, #b9831c 70%, #4a3208); }
.kgt-cap-l { margin-right: 2px; border-radius: 0.6rem 0.2rem 0.2rem 0.6rem; }
.kgt-cap-r { margin-left: 2px; border-radius: 0.2rem 0.6rem 0.6rem 0.2rem; }
.kgt-ring { position: relative; width: 2.55rem; height: var(--rh); overflow: hidden; margin: 0 1px; border-radius: 0.18rem;
  background: linear-gradient(180deg, #5a400c, #c08d26 16%, #fbe39a 46%, #e3a72f 60%, #9a6c16 84%, #4a3208); box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.35), inset -1px 0 0 rgba(0, 0, 0, 0.4); }
.kgt-ring::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.5)); }
.kgt-strip { display: block; transform: translateY(calc(var(--n) * -1 * var(--rh))); }
.kgt-strip b { display: grid; place-items: center; height: var(--rh); font-family: var(--display); font-weight: 900; font-size: 1.85rem; line-height: 1; color: #24180a; text-shadow: 0 1px 0 rgba(255, 245, 210, 0.55); }
.kgt-glint { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 0.5rem; }
.kgt-glint::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 30%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 240, 0.55), transparent); transform: skewX(-18deg); }
.fx.kg-ready .kgt-glint::before { animation: kgt-glint 6s ease-in-out 2.2s infinite; }
@keyframes kgt-glint { 0%, 70% { left: -40%; } 100% { left: 120%; } }
.kgt-roll .kgt-strip { animation: kgt-roll 1150ms cubic-bezier(.15, .75, .25, 1.08) both; animation-delay: calc(var(--i) * 110ms); }
@keyframes kgt-roll { from { transform: translateY(0); } to { transform: translateY(calc(var(--n) * -1 * var(--rh))); } }
.kgt-stamp { position: absolute; right: 0.6rem; bottom: -1.1rem; margin: 0; display: flex; flex-direction: column; align-items: center; padding: 0.25rem 0.7rem 0.2rem;
  border: 3px double #a5281e; border-radius: 0.35rem; color: #a5281e; background: #f6ecd2; transform: rotate(-6deg); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); }
.kgt-stamp b { font-family: var(--display-plain); font-weight: 900; text-transform: uppercase; font-size: 1.25rem; line-height: 1; letter-spacing: 0.04em; }
.kgt-stamp span { font: 700 0.68rem/1.2 var(--mono); letter-spacing: 0.3em; }
.kgt-roll .kgt-stamp { animation: kgt-thunk 420ms cubic-bezier(.3, 1.6, .5, 1) 950ms both; }
@keyframes kgt-thunk { 0% { transform: rotate(-14deg) scale(1.9); opacity: 0; } 100% { transform: rotate(-6deg) scale(1); opacity: 1; } }
.kgt-chips { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.kgt-chips li { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.7rem; border-radius: 999px; font: 700 0.82rem/1.3 var(--mono); letter-spacing: 0.04em; }
.kgt-kind { color: #ece4d2; background: #262b2d; }
.kgt-streak { color: #7a2a0c; background: rgba(224, 87, 62, 0.14); border: 1px solid rgba(165, 40, 30, 0.35); }
.kgt-streak svg { width: 1rem; height: 1rem; color: #d2541f; }
.fx.kg-ready .kgt-streak svg { animation: kgt-flame 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes kgt-flame { 50% { transform: scale(1.12, 0.94) rotate(-4deg); } }
.is-solved .kgt-streak { color: #0e4f38; background: rgba(46, 160, 110, 0.15); border-color: rgba(14, 79, 56, 0.35); }
.kgt-play { width: 100%; min-height: 3.2rem; font-size: 1.08rem; }
.kgt-fine { margin: 0; font-family: var(--mono); font-size: 0.78rem; color: var(--paper-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .kgt-strip, .kgt-stamp { animation: none !important; } .kgt-glint::before { display: none; } }

/* Phones: the two big buttons come first, under the headline, so nobody scrolls to start; Today's puzzle sits under them */
@media (max-width: 899px) {
  .kg-launcher { max-width: 34rem; }
  .kg-big-row { order: -1; }
  .kg-today { transform: none; }
}
@media (max-width: 600px) {
  .kg-hero { padding-top: 1.6rem; }
  .kg-hero .hero-grid { gap: 1.3rem; }
  .kg-hero-copy { gap: 0.9rem !important; }
  .kg-hero h1 { font-size: clamp(2.7rem, 13.4vw, 3.4rem); }
  .kg-hero .lede { font-size: 1rem; line-height: 1.45; }
  .kg-hero .ticks { display: none; }
  .kg-big { min-height: 4rem; padding: 0.6rem 0.7rem; column-gap: 0.5rem; }
  .kg-big svg { width: 1.6rem; height: 1.6rem; }
  .kg-big b { font-size: 1.12rem; }
  .kg-big small { font-size: 0.74rem; }
  .kg-today { --rh: 2.8rem; padding: 1rem; }
  .kgt-ring { width: 2.25rem; }
  .kgt-strip b { font-size: 1.6rem; }
}

/* ---------- Game bands ---------- */
.kg-pack .copy { display: flex; flex-direction: column; gap: 0.55rem; }
.kg-pack .town, .kg-sotl .town { margin: 0; }
.kg-fan { list-style: none; margin: 0.3rem 0 0.4rem; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
.kg-fan li { min-width: 0; }
.kg-fan a { display: block; border-radius: 0.3rem; overflow: hidden; box-shadow: 0 4px 10px rgba(40, 25, 0, 0.35); transition: transform 200ms cubic-bezier(.3, 1.6, .5, 1); }
.kg-fan img { display: block; width: 100%; height: auto; aspect-ratio: 896 / 1206; object-fit: cover; }
.kg-fan a:hover, .kg-fan a:focus-visible { transform: translateY(-5px) rotate(-2deg); }
@media (min-width: 900px) {
  .kg-fan { display: flex; gap: 0; padding-left: 0.6rem; }
  .kg-fan li { flex: 1; margin-left: -0.6rem; }
  .kg-fan li:nth-child(odd) a { transform: rotate(-3deg); }
  .kg-fan li:nth-child(even) a { transform: rotate(2.5deg) translateY(4px); }
  .kg-fan a:hover, .kg-fan a:focus-visible { transform: translateY(-10px) rotate(0deg) scale(1.08); position: relative; z-index: 2; }
}
.kg-sotl { --accent: #c4161c; --accent-ink: #ff6b5e; }
.kg-sotl .tab { color: #fff; background: linear-gradient(180deg, #c4161c, #8e0f13); }
.kg-sotl .town { color: #a3121a; }
.kg-sotl .title { color: #3a0d0d; }

/* For work: a gold band, like the top of the page, with the office art cropped above its title (no text over images) */
.kg-work { position: relative; z-index: 1; isolation: isolate; color: #2a1c04; padding-block: calc(clamp(2.5rem, 6vw, 4rem) + 3.5vw) calc(clamp(2.5rem, 6vw, 4rem) + 3.5vw) !important; margin-block: 1.5rem; }
.kg-work::before { content: ""; position: absolute; z-index: -1; left: 50%; width: 130vw; transform: translateX(-50%); top: 0; bottom: 0;
  background: url("topo.svg") center / cover no-repeat, var(--grain), radial-gradient(120% 90% at 65% 40%, #f6d878, #e3a72f 55%, #b9831c);
  background-blend-mode: multiply, normal, normal; clip-path: polygon(0 3.5vw, 100% 0, 100% calc(100% - 3.5vw), 0 100%); box-shadow: inset 0 40px 60px rgba(90, 55, 0, 0.18); }
.kg-work::after { display: none; }
.kg-work .stop-mark { display: none; }
.kg-work .eyebrow { color: #4a3208; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.kg-work h2 { color: #1d1405; text-shadow: 0 3px 0 rgba(255, 245, 210, 0.35); margin: 0; }
.kg-work-sub { margin: 0; font-family: var(--display-plain); font-weight: 800; text-transform: uppercase; font-size: 1.35rem; letter-spacing: 0.03em; color: #fff; text-shadow: 0 2px 0 rgba(90, 55, 0, 0.45); }
.kg-work p { color: #3d2a08; margin: 0; max-width: 36rem; }
.kg-soon { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 0.3rem; color: #f0c25a; background: #1d1405; font-size: 0.72rem; letter-spacing: 0.14em; }
.kg-work-in { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 800px) { .kg-work-in { grid-template-columns: minmax(14rem, 22rem) 1fr; gap: 2.6rem; } }
.kg-work-art { margin: 0; border-radius: 0.6rem; overflow: hidden; aspect-ratio: 4 / 3.1; transform: rotate(-1.5deg); border: 3px solid #1d1405;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 22px 44px rgba(70, 40, 0, 0.5); }
.kg-work-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 4%; }
.kg-work .btn.gold { color: #f0c25a; border-color: #121516; background: linear-gradient(180deg, #2a2f31, #121516); box-shadow: 0 6px 16px rgba(60, 35, 0, 0.45); }
.kg-work .btn.gold::after { filter: invert(1) sepia(1) saturate(4) hue-rotate(5deg); }

/* Quick answers */
.kg-faq { max-width: 50rem; }

/* ---------- Finale: the light floods in from the keyhole and the key turns ---------- */
.kg-finale .fin-flood { gap: 0.9rem; }
.kg-finale.is-live .fin-flood { clip-path: circle(var(--flood, 0%) at 50% 34%); }
.kgf-lock { position: relative; width: clamp(5.5rem, 16vw, 7.5rem); aspect-ratio: 108 / 132; margin-bottom: 0.4rem; }
.kgf-mark { position: relative; z-index: 1; display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 12px rgba(60, 35, 0, 0.5)); }
.kgf-key { position: absolute; z-index: 3; width: 115%; height: auto; left: -60.3%; top: 18.55%; transform-origin: 94.3% 50%; rotate: 0deg;
  filter: drop-shadow(0 4px 5px rgba(60, 35, 0, 0.45)); transition: rotate 520ms cubic-bezier(.45, 1.7, .5, 1) 150ms; }
.kg-finale.is-open .kgf-key, .kg-finale:not(.is-live) .kgf-key { rotate: 90deg; }
.kgf-rays { position: absolute; z-index: 0; left: 48.15%; top: 33.33%; width: 34rem; height: 34rem; border-radius: 50%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0.3);
  background: radial-gradient(circle, #fffbe8 0 5%, rgba(255, 251, 232, 0.75) 12%, transparent 40%), repeating-conic-gradient(from 0deg, rgba(255, 251, 232, 0.55) 0 5deg, transparent 5deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 64%); mask: radial-gradient(circle, #000 10%, transparent 64%); transition: opacity 600ms ease 350ms, transform 900ms cubic-bezier(.2, .8, .2, 1) 350ms; }
.kg-finale.is-open .kgf-rays, .kg-finale:not(.is-live) .kgf-rays { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.fx .kg-finale.is-open .kgf-rays { animation: kgf-spin 30s linear 1s infinite; }
@keyframes kgf-spin { to { transform: translate(-50%, -50%) scale(1) rotate(360deg); } }
.kg-finale .fin-flood h2 { font-size: clamp(2.6rem, 9.5vw, 6.4rem); max-width: 14ch; }
.kg-finale .fin-ctas .btn { min-height: 3.2rem; }
.kg-finale .fin-ctas .btn.dark { font: inherit; font-weight: 700; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .kgf-key, .kgf-rays { transition: none; } }

/* fixes after the first stills (2026-10-23) */
.kg-bar .menu-btn span { display: inline; width: auto; height: auto; border-radius: 0; background: none; transform: none !important; opacity: 1 !important; transition: none; }
@media (max-width: 600px) { .kg-hero .eyebrow { font-size: 0.72rem; letter-spacing: 0.1em; } }
@media (min-width: 900px) { .kg-today { --rh: 3.7rem; } .kgt-ring { width: 3rem; } .kgt-strip b { font-size: 2.2rem; } .kgt-cap { width: 1.3rem; } .kgt-stage { padding: 1.1rem 0.6rem 1.7rem; } }
.case.kg-sotl > .tab { color: #fff !important; letter-spacing: 0.14em; }
/* 44 px taps everywhere on the Keyhole frame and home page */
.kg-join, .kg-join-top { height: 2.9rem; }
.top .brand { min-height: 2.75rem; }
.nav .links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.kg-home .case .more { display: inline-flex; align-items: center; min-height: 2.75rem; }
.fin-sticky .fx-snd, .snd-btn.fx-snd { min-width: 2.75rem; min-height: 2.75rem; }
footer .brand { min-height: 2.75rem; }
.kgf-lock { width: clamp(4.6rem, 13vh, 7.5rem); }
.skip-link { min-height: 2.75rem; }
.kg-finale .fin-flood { overflow: hidden; }

/* ======================================================================
   Round 2 (Scott's notes, 2026-10-23)
   ====================================================================== */
/* 1. The key goes INTO the lock, never turns: it drops in above the keyhole, then slides down into it and is gone (the clip's
   bottom edge is the keyhole's centre) */
.kgs-keyclip { position: absolute; z-index: 3; left: 33.15%; width: 30%; top: -125%; height: 158.33%; overflow: hidden; pointer-events: none; }
.kgs-keyclip .kgs-key { position: absolute; left: 0; top: auto; bottom: 0; width: 100%; height: auto; opacity: 1; transform: translateY(-160%); rotate: none; translate: none;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.6)); }
.kgs-play .kgs-keyclip .kgs-key { animation: kgs-drop 380ms cubic-bezier(.2, .9, .3, 1.05) 140ms forwards, kgs-in 300ms cubic-bezier(.55, 0, .8, .3) 560ms forwards; }
@keyframes kgs-drop { from { transform: translateY(-160%); } to { transform: translateY(-36%); } }
@keyframes kgs-in { from { transform: translateY(-36%); } to { transform: translateY(104%); } }
.kgs-play .kgs-mark { animation: kgs-pop 380ms cubic-bezier(.3, 1.6, .5, 1) both, kgs-clunk 300ms cubic-bezier(.3, 1.7, .5, 1) 840ms; }
@keyframes kgs-clunk { 40% { transform: scale(1.1, 0.92); } }
.kg-splash-calm .kgs-keyclip { display: none; }

/* the finale: the key slides home into the keyhole as the light fills the screen */
.kgf-keyclip { position: absolute; z-index: 3; left: 33.15%; width: 30%; top: -125%; height: 158.33%; overflow: hidden; pointer-events: none; }
.kgf-keyclip .kgf-key { position: absolute; left: 0; top: auto; bottom: 0; width: 100%; height: auto; rotate: none; transform: translateY(-36%); transition: transform 520ms cubic-bezier(.55, 0, .8, .3) 120ms; }
.kg-finale.is-open .kgf-keyclip .kgf-key, .kg-finale:not(.is-live) .kgf-keyclip .kgf-key { rotate: none; transform: translateY(104%); }
.kg-finale.is-open .kgf-mark { animation: kgs-clunk 320ms cubic-bezier(.3, 1.7, .5, 1) 600ms; }
.kg-finale .kgf-lock { margin-top: 3.5rem; }

/* 2. The cylinder rolls to the date, FRI-23-OCT; the side stamp is gone */
.kgt-dash { align-self: center; width: 0.55rem; height: 0.32rem; margin: 0 2px; border-radius: 2px; background: linear-gradient(180deg, #f6d878, #9a6c16); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.kg-today { --rh: 3.2rem; }
.kgt-ring { width: 2.35rem; }
.kgt-strip b { font-size: 1.75rem; }
.kgt-stage { padding: 1rem 0.5rem; }
@media (min-width: 900px) { .kg-today { --rh: 3.5rem; } .kgt-ring { width: 2.55rem; } .kgt-strip b { font-size: 1.95rem; } .kgt-cap { width: 1.1rem; } .kgt-stage { padding: 1.1rem 0.5rem; } }
@media (max-width: 600px) { .kg-today { --rh: 2.7rem; } .kgt-ring { width: 1.78rem; margin: 0 1px; } .kgt-strip b { font-size: 1.38rem; } .kgt-cap { width: 0.8rem; } .kgt-dash { width: 0.4rem; } }
.kgt-count { margin: 0; padding: 0.15rem 0.6rem; border-radius: 999px; font: 700 0.8rem/1.3 var(--mono); color: #0b3a40; background: rgba(46, 230, 255, 0.25); border: 1px solid rgba(11, 58, 64, 0.4); }

/* 9. Two words that roll on their own */
.kg-slot { position: relative; display: inline-grid; vertical-align: bottom; overflow: hidden; padding-block: 0.06em; margin-block: -0.06em; transition: width 320ms cubic-bezier(.3, .7, .2, 1); }
.kg-slot .kgw { grid-area: 1 / 1; white-space: nowrap; transform-origin: 0 50%; transition: transform 340ms cubic-bezier(.3, .7, .2, 1), opacity 260ms ease; }
.kg-slot .kgw.in { transform: translateY(105%); opacity: 0; }
.kg-slot .kgw.out { transform: translateY(-105%); opacity: 0; }
.kg-slot.kg-tick .kgw.on { animation: reel-glow 900ms ease-out; }
.kg-slot[role="button"] { cursor: pointer; border-radius: 0.12em; }
.kg-slot:focus-visible { outline: 3px solid var(--gold); outline-offset: 0.08em; }
.kg-slot-b { text-align: left; }
.kg-paused::after { content: ""; position: absolute; right: 0.06em; top: 0.12em; width: 0.14em; height: 0.28em; border-left: 0.05em solid currentColor; border-right: 0.05em solid currentColor; opacity: 0.6; }

/* 10. Between pages: the page closes on the keyhole, then the new page opens from it (under 400 ms in all) */
@view-transition { navigation: auto; }
::view-transition { background: #0c0e0f url("pin.svg") 50% 50% / 3.4rem auto no-repeat; }
::view-transition-old(root) { animation: kg-lock 170ms cubic-bezier(.6, 0, .9, .4) both; }
::view-transition-new(root) { animation: kg-unlock 210ms cubic-bezier(.1, .6, .3, 1) 20ms both; }
@keyframes kg-lock { from { clip-path: circle(150% at 50% 50%); } to { clip-path: circle(0% at 50% 50%); } }
@keyframes kg-unlock { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(150% at 50% 50%); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- Hub heroes: a big picture with the title and pitch beside it, or under it on phones, never over it ---------- */
.kg-hub-hero { position: relative; display: grid; gap: 1.1rem; align-items: center; padding-block: 1rem 2rem; }
@media (min-width: 860px) { .kg-hub-hero { grid-template-columns: 1.15fr 0.85fr; gap: 2.4rem; padding-block: 1.5rem 3rem; } }
.kg-hh-art { position: relative; margin: 0; border-radius: 0.9rem; overflow: hidden; aspect-ratio: 16 / 10.5; border: 3px solid #2a2f31;
  box-shadow: 0 0 0 1px rgba(240, 194, 90, 0.25), 0 26px 50px rgba(0, 0, 0, 0.55); transform: rotate(-0.6deg); }
.kg-hh-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fx .kg-hh-art { animation: kg-hh-in 800ms cubic-bezier(.2, .9, .25, 1.05) both; }
@keyframes kg-hh-in { from { opacity: 0; transform: translateY(26px) rotate(-0.6deg) scale(0.97); } }
.kg-hh-copy { display: flex; flex-direction: column; gap: 0.8rem; }
.kg-hh-copy h1 { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, 6.5vw, 4.4rem); line-height: 0.9; color: #efe6d0; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55); }
.kg-hh-copy .lede { margin: 0; color: #d9d1bf; }
.kg-hh-ctas { margin: 0.2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.kg-hh-ctas .btn:not(.gold) { font: inherit; font-weight: 700; cursor: pointer; }
.kg-hh-slot { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #1c2123 0 18px, #20262a 18px 36px); border-style: dashed; border-color: #6c7273; }
.kg-hh-slot-in { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1rem; text-align: center; }
.kg-hh-slot-in svg { width: 2.6rem; height: auto; opacity: 0.8; }
.kg-hh-slot-in b { font: 900 1.6rem/1 var(--display); text-transform: uppercase; color: #f0c25a; }
.kg-hh-slot-in small { font: 700 0.78rem/1.3 var(--mono); color: #a7a191; max-width: 22rem; }
@media (max-width: 600px) { .kg-hub-hero { padding-top: 0.4rem; } .kg-hh-art { aspect-ratio: 16 / 9.5; } .kg-hh-copy h1 { font-size: clamp(2.3rem, 11vw, 3rem); } .kg-hh-copy .lede { font-size: 1rem; line-height: 1.45; } }
.party-hub .kg-hub-hero + .stop { margin-top: 0; }
.kgm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.8rem; }
.kgm-soon { display: flex; flex-direction: column; gap: 0.3rem; text-decoration: none; color: #ece4d2; }
.kgm-soon img { display: block; width: 100%; height: auto; border-radius: 0.5rem; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5); transition: transform 200ms ease; }
.kgm-soon:hover img { transform: translateY(-4px) rotate(-1deg); }
.kgm-soon b { font: 800 1rem/1.1 var(--display-plain); text-transform: uppercase; }
.kgm-soon span { font: 700 0.72rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #f0c25a; }

/* ---------- /daily/ (round 2): the code-drawn hero, your day, today's board, the set, the bridges ---------- */
.kgd-hero-grid { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 860px) { .kgd-hero-grid { grid-template-columns: 1fr 1fr; gap: 2.6rem; } }
.kg-daily .dw-launch h1 { font-size: clamp(2.8rem, 7vw, 4.6rem); }
.kgd-art { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 1rem 0 0.5rem; }
.kgd-art::before { content: ""; position: absolute; inset: 8% 4% 6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(240, 194, 90, 0.28), transparent); }
.fx .kgd-art::before { animation: g-breathe 7s ease-in-out infinite alternate; }
.kgd-cal { position: relative; display: flex; flex-direction: column; align-items: center; width: 11.5rem; padding: 1.3rem 1rem 0.9rem; border-radius: 0.6rem; color: #201d17; transform: rotate(-3deg);
  background: var(--grain), linear-gradient(180deg, #f6ecd2, #e6d5aa); box-shadow: 0 1px 0 #fff inset, 0 20px 40px rgba(0, 0, 0, 0.55); border-top: 1.6rem solid #a5281e; }
.kgd-cal-rings { position: absolute; top: -2.1rem; left: 0; right: 0; display: flex; justify-content: space-around; }
.kgd-cal-rings i { width: 0.6rem; height: 1.3rem; border-radius: 0.3rem; background: linear-gradient(90deg, #5a400c, #f6d878, #9a6c16); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); }
.kgd-cal-dow { font: 700 0.85rem/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: #5b5244; }
.kgd-cal-day { font: 900 5.4rem/0.95 var(--display); color: #1d1405; }
.kgd-cal-mon { font: 700 0.85rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #a5281e; }
.kgd-cylcard { margin-top: -1.2rem; padding: 0.6rem; transform: rotate(1.5deg); background: transparent; border: 0; box-shadow: none; }
.kgd-cylcard::before { display: none; }
.kgd-cylcard .kgt-stage { box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.8), 0 18px 36px rgba(0, 0, 0, 0.5); }
@media (max-width: 859px) { .kgd-art { order: 2; } .kgd-cal { width: 9.5rem; } .kgd-cal-day { font-size: 4.4rem; } }
.kgd-two { display: grid; gap: 2rem; }
@media (min-width: 860px) { .kgd-two { grid-template-columns: 0.9fr 1.1fr; gap: 2.6rem; align-items: start; } }
.kgd-result { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.3rem; }
.kgd-r-state { margin: 0; font: 900 1.6rem/1 var(--display); text-transform: uppercase; color: #efe6d0; }
.kgd-result.is-solved .kgd-r-state { color: #2ee6ff; text-shadow: 0 0 18px rgba(46, 230, 255, 0.35); }
.kgd-r-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.kgd-r-nums p { margin: 0; display: flex; flex-direction: column; padding: 0.6rem 0.8rem; border-radius: 0.6rem; background: rgba(0, 0, 0, 0.3); border: 1px solid #3d4446; }
.kgd-r-nums b { font: 900 2.4rem/1 var(--display); color: #f0c25a; font-variant-numeric: tabular-nums; }
.kgd-r-nums span { font: 700 0.72rem/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #a7a191; }
.kgd-week { margin: 0; display: flex; gap: 0.4rem; }
.kgd-week i { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; font: 700 0.75rem/1 var(--mono); font-style: normal; color: rgba(236, 228, 210, 0.6); border: 2px solid rgba(236, 228, 210, 0.25); }
.kgd-week i.on { background: #e3a72f; border-color: #f0c25a; color: #16191a; }
.kgd-week i.today { outline: 2px solid rgba(46, 230, 255, 0.6); outline-offset: 2px; }
.kgd-r-go { margin: 0; }
.kgd-board { padding: 1.1rem 1.2rem; min-height: 10rem; }
.kgd-b-wait { margin: 0; color: #a7a191; }
.kgd-b-sample { margin: 0 0 0.7rem; padding: 0.35rem 0.7rem; border-radius: 0.4rem; font: 700 0.72rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #1d1405; background: repeating-linear-gradient(135deg, #f0c25a 0 10px, #e3a72f 10px 20px); }
.kgd-b-you { margin: 0 0 0.6rem; color: #2ee6ff; font-weight: 700; }
.kgd-b-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; counter-reset: none; }
.kgd-b-list li { display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: 0.6rem; min-height: 2.6rem; padding: 0.25rem 0.7rem; border-radius: 0.5rem; background: rgba(0, 0, 0, 0.28); border: 1px solid #343b3d; }
.kgd-b-rank { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; font: 900 1rem/1 var(--display-plain); color: #d9d1bf; border: 2px solid #4b5254; }
.kgd-b-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kgd-b-time { font: 700 1rem/1 var(--mono); font-variant-numeric: tabular-nums; color: #f0c25a; }
.kgd-b-list li.gold .kgd-b-rank { color: #1d1405; background: linear-gradient(180deg, #f6d878, #e3a72f); border-color: #8a6414; }
.kgd-b-list li.silver .kgd-b-rank { color: #1d1d1d; background: linear-gradient(180deg, #f1f1f1, #b9bcc0); border-color: #7d8084; }
.kgd-b-list li.bronze .kgd-b-rank { color: #2a1206; background: linear-gradient(180deg, #f3c29a, #c8733a); border-color: #7a3d14; }
.kgd-b-list li.gold { border-color: rgba(240, 194, 90, 0.5); box-shadow: 0 0 18px rgba(240, 194, 90, 0.12); }
.fx .kgd-b-list li { animation: dwm-rise 420ms cubic-bezier(.2, .9, .3, 1.1) both; animation-delay: calc(var(--n, 0) * 60ms); }
@keyframes dwm-rise { from { opacity: 0; transform: translateY(10px); } }
.kgd-b-guests { margin: 0.7rem 0 0; font: 700 0.85rem/1.3 var(--mono); color: #a7a191; }
.kgd-set { display: grid; gap: 1rem; }
@media (min-width: 760px) { .kgd-set { grid-template-columns: repeat(3, 1fr); } }
.kgd-set-card { position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.2rem; border-radius: 0.8rem; border: 1px dashed #5d6668; background: rgba(0, 0, 0, 0.25); }
.kgd-set-card.is-live { border: 1px solid rgba(240, 194, 90, 0.55); background: var(--grain), linear-gradient(180deg, #2b3133, #1c2022); box-shadow: 0 0 26px rgba(240, 194, 90, 0.1); }
.kgd-set-card h3 { margin: 0; color: #efe6d0; font-size: 1.5rem; }
.kgd-set-card p { margin: 0; }
.kgd-set-k { font: 700 0.75rem/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #f0c25a; }
.kgd-set-card .btn { align-self: flex-start; margin-top: auto; }
.kgd-soon { margin-top: auto !important; font: 700 0.8rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #a7a191; }
/* Keep playing on /daily/ (Scott, 2026-10-23: "These are too small on desktop"): big art cards, art on top, words and a button under it */
.kgd-bridges { display: grid; gap: 1rem; }
@media (min-width: 640px) { .kgd-bridges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; } }
@media (min-width: 1100px) { .kgd-bridges { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; } }
.kgd-bridge { display: flex; flex-direction: column; overflow: hidden; border-radius: 0.9rem; text-decoration: none; color: #ece4d2;
  background: linear-gradient(180deg, #262c2e, #171b1c); border: 1px solid #3d4446; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.kgd-bridge:hover { transform: translateY(-3px); border-color: #e3a72f; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), 0 0 22px rgba(240, 194, 90, 0.12); }
.kgd-bridge:focus-visible { outline: 3px solid #2ee6ff; outline-offset: 3px; }
.kgd-b-art { display: block; aspect-ratio: 16 / 9; background: #121516; overflow: hidden; }
.kgd-b-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: transform 400ms ease; }
.kgd-bridge:hover .kgd-b-art img { transform: scale(1.03); }
.kgd-bridge.is-sotl .kgd-b-art img { object-position: 50% 22%; }
.kgd-bridge.is-sotl { border-color: #6d1012; background: linear-gradient(180deg, #2a1012, #140809); }
.kgd-b-body { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; padding: 0.9rem 1rem 1rem; }
.kgd-b-k { font: 700 0.7rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #f0c25a; }
.kgd-bridge.is-sotl .kgd-b-k { color: #ff6b5e; }
.kgd-b-body b { font: 900 1.6rem/0.98 var(--display); text-transform: uppercase; color: #efe6d0; }
.kgd-b-body small { color: #b9b19c; font-size: 0.9rem; line-height: 1.4; }
.kgd-b-body .btn { align-self: flex-start; margin-top: auto; min-height: 2.75rem; padding: 0.4rem 1.1rem; }
.kgd-b-body small + .btn { margin-top: 0.5rem; }
.kgd-b-body .btn.gold { padding-right: 2.3rem; }
@media (min-width: 640px) { .kgd-b-art { aspect-ratio: auto; height: 15rem; } }
@media (min-width: 1100px) { .kgd-b-art { height: 21rem; } .kgd-b-body b { font-size: 1.85rem; } }
@media (prefers-reduced-motion: reduce) { .kgd-bridge, .kgd-b-art img { transition: none; } .kgd-bridge:hover .kgd-b-art img { transform: none; } }
.kg-daily .d-prop { display: none; }

/* ---------- The Locksmith's hidden keys: every pin on the side line is a button ---------- */
.stop-mark.kk-pin { cursor: pointer; min-height: 2.9rem; min-width: 2.9rem; border-radius: 50%; }
.stop-mark.kk-pin:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.kk-pin svg { pointer-events: none; }
.kk-clip { position: absolute; left: 0.85rem; width: 0.9rem; top: -3.2rem; height: 4.15rem; overflow: hidden; pointer-events: none; z-index: 3; }
.kk-clip svg { position: absolute; left: 0; bottom: 0; width: 100% !important; height: auto; margin: 0 !important; transform: none !important; translate: 0 -140%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)) !important; opacity: 1 !important; }
.kk-pin.is-go .kk-clip svg { animation: kk-keyin 520ms cubic-bezier(.55, 0, .8, .3) forwards; }
@keyframes kk-keyin { 0% { translate: 0 -140%; } 45% { translate: 0 -30%; } 100% { translate: 0 104%; } }
.kk-pin.is-go > svg { animation: kk-pop 420ms cubic-bezier(.3, 1.7, .5, 1) 380ms; }
@keyframes kk-pop { 40% { transform: scale(1.25); filter: drop-shadow(0 0 14px rgba(255, 230, 150, 0.95)); } }
.kk-pin.is-found > svg { filter: drop-shadow(0 0 10px rgba(240, 194, 90, 0.9)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)) !important; opacity: 1 !important; }
.kk-letter { position: absolute; left: 0.6rem; top: 3.1rem; display: none; min-width: 1.7rem; height: 1.7rem; padding: 0 0.3rem; border-radius: 0.35rem; place-items: center;
  font: 900 1.15rem/1 var(--display); color: #1d1405; background: linear-gradient(180deg, #f6d878, #e3a72f); box-shadow: 0 0 14px rgba(240, 194, 90, 0.6); }
.kk-pin.is-found .kk-letter { display: grid; }
.kk-pin.is-go.is-found .kk-letter { animation: kk-letter 460ms cubic-bezier(.3, 1.6, .5, 1) 500ms both; }
@keyframes kk-letter { from { transform: scale(0) rotate(-20deg); } }
.kk-cap { position: absolute; left: 0.2rem; top: 5rem; z-index: 5; width: max-content; max-width: 15rem; padding: 0.35rem 0.6rem; border-radius: 0.4rem; pointer-events: none;
  font: 700 0.8rem/1.3 var(--mono); color: #1d1405; background: #f6ecd2; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(4px); transition: opacity 200ms ease, transform 200ms ease; }
.kk-cap:empty { display: none; }
.kk-say .kk-cap { opacity: 1; transform: none; }
/* the key ring */
.kk-ring { position: fixed; z-index: 65; left: max(0.8rem, env(safe-area-inset-left)); top: calc(var(--hdr, 3.6rem) + 0.8rem); display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.8rem 0.4rem 0.5rem;
  border-radius: 999px; color: #ece4d2; background: linear-gradient(180deg, #2a2f31, #15181a); border: 1px solid rgba(240, 194, 90, 0.5); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); animation: kk-ring-in 400ms cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes kk-ring-in { from { opacity: 0; transform: translateX(-20px); } }
.kk-ring-ic svg { display: block; width: 0.75rem; height: auto; transform: rotate(-35deg); }
.kk-ring-t { display: flex; flex-direction: column; gap: 0.15rem; }
.kk-ring-t b { font: 700 0.78rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #f0c25a; }
.kk-ring-l { display: flex; gap: 2px; }
.kk-ring-l i { width: 0.95rem; height: 1.05rem; border-radius: 2px; display: grid; place-items: center; font: 900 0.72rem/1 var(--display); font-style: normal; color: #1d1405; background: rgba(236, 228, 210, 0.15); }
.kk-ring-l i.on { background: #e3a72f; }
.kk-ring-go { display: inline-flex; align-items: center; min-height: 2.75rem; margin-left: 0.3rem; padding: 0 0.8rem; border-radius: 999px; color: #1d1405; background: linear-gradient(180deg, #f6d878, #e3a72f); font-weight: 800; text-decoration: none; }
.kk-ring.is-all { border-color: #2ee6ff; box-shadow: 0 0 22px rgba(46, 230, 255, 0.3), 0 8px 22px rgba(0, 0, 0, 0.5); }
@media (max-width: 1099px) { .kk-ring { top: auto; bottom: calc(4.6rem + env(safe-area-inset-bottom)); } }
/* every key found: the side line lights end to end */
@media (min-width: 1100px) {
  .kk-all .trail::after { height: calc(100% - 5rem) !important; background: linear-gradient(180deg, #fffbe8, #f6d878 20%, #e3a72f 50%, #2ee6ff 80%, #fffbe8); background-size: 100% 300%; }
  .fx.kk-all .trail::after { animation: kk-line 3s linear infinite; }
}
@keyframes kk-line { to { background-position: 0 300%; } }
/* Calm mode and reduced motion: a plain glow */
html.calm .kk-clip, .kk-calm .kk-clip { display: none; }
@media (prefers-reduced-motion: reduce) { .kk-clip { display: none; } .kk-pin.is-go > svg, .kk-ring { animation: none !important; } }

/* ---------- The vault ---------- */
.kk-vault { min-height: calc(100svh - 10rem); display: grid; place-items: center; padding-block: 2.5rem 3rem; }
.kk-v-in { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; text-align: center; max-width: 30rem; }
.kk-v-in h1 { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, 9vw, 4rem); line-height: 0.9; color: #efe6d0; }
.kk-v-in .dwm-lock { width: 6rem; margin-top: 4rem; }
.kk-v-form { width: 100%; max-width: 22rem; height: 3.6rem; }
.kk-v-form input { flex: 1; width: auto; text-align: center; font-size: 1.5rem; letter-spacing: 0.4em; }
.kk-v-msg { margin: 0; min-height: 1.4em; color: #ffb4a3; font-family: var(--mono); }
.kk-v-done { display: none; flex-direction: column; align-items: center; gap: 0.9rem; width: 100%; }
.kk-vault.is-open .kk-v-done { display: flex; animation: dwm-up 420ms ease 1500ms both; }
.kk-vault.is-open .kk-v-form, .kk-vault.is-open .kk-v-ask, .kk-vault.is-open .kk-v-msg { display: none; }
.kk-v-word { display: none !important; }
.kk-vault.is-open .kk-v-word { display: flex !important; }
.kk-v-badge { margin: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.7rem; align-items: center; text-align: left; padding: 0.7rem 1rem; border-radius: 0.8rem;
  border: 1.5px solid #2ee6ff; background: rgba(46, 230, 255, 0.08); }
.kk-v-badge svg { grid-row: 1 / 3; width: 2rem; height: auto; }
.kk-v-badge b { font: 900 1.3rem/1 var(--display); text-transform: uppercase; color: #efe6d0; }
.kk-v-badge span { font-size: 0.85rem; color: #a7a191; }
.kk-v-card { position: relative; width: 100%; max-width: 20rem; }
.kk-v-btns { margin: 0; display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
.kk-v-form.is-shake { animation: kg-shake 360ms ease; }
.kgd-set-card .btn.small { min-height: 2.75rem; } .kg-daily .dw-launch { max-width: none; }
@media (max-width: 1099px) { .kk-ring:not(.is-all) { display: none; } .kk-ring-l { display: none; } }

/* ======================================================================
   Round 3 (Scott, 2026-10-23: "its such a long scroll to get anywhere"): a compact middle
   ====================================================================== */
.kg-home > .stop { padding-block: clamp(1.6rem, 4vw, 3rem); }
.kg-sec-h { margin: 0 0 1rem; font-size: clamp(1.9rem, 5vw, 2.8rem); }
.kg-more { margin: 0.7rem 0 0; }
.kg-more a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; color: var(--gold-ink); text-decoration: none; }
.kg-more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* How it works: one strip of three */
.kg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.kg-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.8rem 0.4rem 0.7rem; text-align: center; border-radius: 0.7rem;
  background-image: var(--rivets), var(--grain), linear-gradient(180deg, #2b3133, #1c2022); border: 1px solid #3d4446; }
.kg-step-ic { position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; color: var(--gold-ink); filter: drop-shadow(0 0 6px rgba(240, 194, 90, 0.25)); }
.kg-step-ic svg { width: 2.5rem; height: 2.5rem; }
.kg-step-ic i { position: absolute; right: -0.35rem; top: -0.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; display: grid; place-items: center; font: 900 0.72rem/1 var(--display-plain); font-style: normal; color: #1d1405; background: var(--gold); }
.kg-steps b { font: 800 0.98rem/1.05 var(--display-plain); text-transform: uppercase; letter-spacing: 0.02em; color: #efe6d0; }
.kg-steps span:not(.kg-step-ic) { font-size: 0.8rem; line-height: 1.3; color: #b9b19c; }
@media (min-width: 760px) { .kg-steps { gap: 1rem; } .kg-steps li { flex-direction: row; text-align: left; align-items: center; gap: 0.9rem; padding: 1rem 1.1rem; } .kg-steps li > b, .kg-steps li > span:not(.kg-step-ic) { display: block; } .kg-steps li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.9rem; } .kg-step-ic { grid-row: 1 / 3; } .kg-steps b { font-size: 1.15rem; align-self: end; } .kg-steps span:not(.kg-step-ic) { font-size: 0.92rem; align-self: start; } }

/* The games: tabs and 2 by 2 tiles */
.kg-tablist { display: none; }
.kg-tabs.is-js .kg-tablist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.3rem; padding: 0.3rem; margin-bottom: 0.9rem; border-radius: 0.8rem; background: rgba(0, 0, 0, 0.35); border: 1px solid #3d4446; }
.kg-tablist [role="tab"] { min-height: 2.9rem; border: 0; border-radius: 0.55rem; cursor: pointer; background: none; color: #d9d1bf; font: 800 0.95rem/1 var(--display-plain); text-transform: uppercase; letter-spacing: 0.04em; }
.kg-tablist [role="tab"][aria-selected="true"] { color: #1d1405; background: linear-gradient(180deg, #f6d878, #e3a72f); box-shadow: 0 4px 14px rgba(227, 167, 47, 0.3); }
.kg-tablist [role="tab"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.kg-panel + .kg-panel { margin-top: 1.4rem; }
.kg-tabs.is-js .kg-panel + .kg-panel { margin-top: 0; }
.kg-panel[hidden] { display: none; }
.kg-panel-h { margin: 0 0 0.6rem; font-size: 1.2rem; color: var(--gold-ink); }
.kg-tabs.is-js .kg-panel-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kg-panel.kg-in { animation: kg-up 300ms ease both; }
@keyframes kg-up { from { opacity: 0; transform: translateY(10px); } }
.kg-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
@media (min-width: 760px) { .kg-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.kg-tile { position: relative; display: flex; flex-direction: column; gap: 0.15rem; min-height: 44px; padding-bottom: 0.55rem; border-radius: 0.7rem; overflow: hidden; text-decoration: none; color: #ece4d2;
  background: linear-gradient(180deg, #262c2e, #171b1c); border: 1px solid #3d4446; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.kg-tile:hover, .kg-tile:focus-visible { transform: translateY(-3px); border-color: #e3a72f; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); }
.kg-tile img, .kg-tile-art { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 14%; }
.kg-tile b { padding: 0.4rem 0.6rem 0; font: 800 1rem/1.05 var(--display-plain); text-transform: uppercase; letter-spacing: 0.02em; }
.kg-tile-tag { padding: 0 0.6rem; font: 700 0.72rem/1.3 var(--mono); letter-spacing: 0.06em; color: #f0c25a; }
.kg-tile-wide { grid-column: 1 / -1; }
.kg-tile-art { position: relative; background: radial-gradient(90% 90% at 50% 40%, #2e3537, #121516); }
.kg-tile-wide .kg-tile-art { aspect-ratio: 8 / 3; }
.kg-tile-art::after { content: ""; position: absolute; inset: 0; margin: auto; width: 46%; height: 46%; background: center / contain no-repeat; }
.kg-tile-today .kg-tile-art::after { width: 80%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%235a400c'/%3E%3Cstop offset='.45' stop-color='%23fbe39a'/%3E%3Cstop offset='1' stop-color='%234a3208'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='5' width='10' height='40' rx='4' fill='url(%23b)'/%3E%3Cg fill='url(%23b)'%3E%3Crect x='14' y='5' width='26' height='40' rx='2'/%3E%3Crect x='44' y='5' width='26' height='40' rx='2'/%3E%3Crect x='74' y='5' width='26' height='40' rx='2'/%3E%3Crect x='104' y='5' width='26' height='40' rx='2'/%3E%3Crect x='134' y='5' width='26' height='40' rx='2'/%3E%3Crect x='164' y='5' width='26' height='40' rx='2'/%3E%3C/g%3E%3Crect x='190' y='5' width='10' height='40' rx='4' fill='url(%23b)'/%3E%3Cg font-family='Arial Black,Arial' font-weight='900' font-size='22' fill='%2324180a' text-anchor='middle'%3E%3Ctext x='27' y='33'%3EP%3C/text%3E%3Ctext x='57' y='33'%3EL%3C/text%3E%3Ctext x='87' y='33'%3EA%3C/text%3E%3Ctext x='117' y='33'%3EY%3C/text%3E%3Ctext x='147' y='33'%3E%3F%3C/text%3E%3Ctext x='177' y='33'%3E!%3C/text%3E%3C/g%3E%3C/svg%3E"); }
.kg-tile-cyl .kg-tile-art::after, .kg-tile-quiz .kg-tile-art::after { opacity: 0.55; background-image: url("pin.svg"); }
.kg-tile-quiz .kg-tile-art { background: radial-gradient(90% 90% at 50% 40%, #12383d, #0b1c1f); }
.kg-packrow { display: grid; grid-template-columns: 3.6rem 1fr auto; gap: 0.8rem; align-items: center; margin-bottom: 0.7rem; padding: 0.55rem 0.7rem; border-radius: 0.7rem;
  background: var(--grain), linear-gradient(180deg, #f3e7c6, #e6d5aa); color: #201d17; border: 1px solid #b8a985; }
.kg-packrow img { width: 100%; height: auto; border-radius: 0.3rem; box-shadow: 0 4px 10px rgba(40, 25, 0, 0.35); }
.kg-packrow > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.kg-packrow b { font: 900 1.35rem/1 var(--display); text-transform: uppercase; color: #1d1405; }
.kg-pl { font: 700 0.74rem/1.25 var(--mono); color: #4a3208; }
.kg-soonchip { align-self: flex-start; margin-top: 0.15rem; padding: 0.05rem 0.45rem; border-radius: 0.3rem; font: 700 0.66rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #f0c25a; background: #1d1405; }
.kg-packrow .btn.small { min-height: 2.75rem; padding: 0.35rem 0.9rem; color: #f0c25a; background: linear-gradient(180deg, #2a2f31, #121516); border-color: #121516; }
@media (max-width: 420px) { .kg-packrow { grid-template-columns: 3rem 1fr; } .kg-packrow .btn.small { grid-column: 1 / -1; } }

/* Two compact banners */
.kg-banners { display: grid; gap: 0.8rem; }
@media (min-width: 900px) { .kg-banners { grid-template-columns: 1fr 1fr; gap: 1.2rem; } }
.kg-banner { display: grid; grid-template-columns: 4.6rem 1fr; grid-template-rows: auto auto; column-gap: 0.9rem; row-gap: 0.55rem; align-items: center; padding: 0.7rem; border-radius: 0.8rem;
  text-decoration: none; color: #ece4d2; border: 1px solid #3d4446; background: linear-gradient(180deg, #262c2e, #171b1c); transition: transform 180ms ease, border-color 180ms ease; }
.kg-banner:hover { transform: translateY(-2px); border-color: #e3a72f; }
.kg-banner img { grid-row: 1 / 3; width: 100%; height: 100%; max-height: 6.4rem; object-fit: cover; object-position: 50% 10%; border-radius: 0.45rem; }
.kg-banner-t { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.kg-banner-k { font: 700 0.68rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #f0c25a; }
.kg-banner-t b { font: 900 1.55rem/0.95 var(--display); text-transform: uppercase; color: #efe6d0; }
.kg-banner-t > span:last-child { font-size: 0.84rem; line-height: 1.3; color: #b9b19c; }
.kg-banner .btn.small { justify-self: start; min-height: 2.75rem; padding: 0.35rem 1rem; }
.kg-banner-work { background: var(--grain), radial-gradient(120% 120% at 80% 30%, #f6d878, #e3a72f 55%, #b9831c); color: #2a1c04; border-color: #8a6414; }
.kg-banner-work .kg-banner-k { color: #4a3208; }
.kg-banner-work .kg-banner-t b { color: #1d1405; }
.kg-banner-work .kg-banner-t > span:last-child { color: #3d2a08; }
.kg-banner-work .btn.small { color: #f0c25a; background: linear-gradient(180deg, #2a2f31, #121516); border-color: #121516; }
.kg-banner-sotl { border-color: #6d1012; background: linear-gradient(180deg, #2a1012, #140809); }
.kg-banner-sotl .kg-banner-k { color: #ff6b5e; }

/* Quick answers: three */
.kg-faq-sec .faq details { margin: 0; }
.kg-faq { display: grid; gap: 0.5rem; }

/* The finale on phones: one screen, the countdown plays by itself when it comes into view */
@media (max-width: 760px) {
  .kg-finale.kg-fin-phone .fin-track { height: auto !important; }
  .kg-finale.kg-fin-phone .fin-sticky { position: relative !important; height: auto !important; overflow: hidden; display: block !important; }
  .kg-finale.kg-fin-phone .fin-flood { position: relative !important; inset: auto !important; clip-path: circle(0% at 50% 30%); padding: 3rem 1rem 3.2rem; }
  .kg-finale.kg-fin-phone.kg-fin-go .fin-flood { animation: kg-fin-flood 700ms cubic-bezier(.3, .7, .2, 1) 1000ms forwards; }
  .kg-finale.kg-fin-phone.kg-fin-done .fin-flood, .kg-finale.kg-fin-phone:not(.is-live) .fin-flood { clip-path: none !important; }
  .kg-finale.kg-fin-phone .fin-count { display: grid !important; place-items: center; position: absolute !important; inset: 0; z-index: 2; pointer-events: none; }
  .kg-finale.kg-fin-phone .fin-count b { grid-area: 1 / 1; opacity: 0 !important; transform: scale(0.6) !important; font: 900 9rem/1 var(--display); color: #efe6d0; text-shadow: 0 0 40px rgba(240, 194, 90, 0.4); transition: none !important; }
  .kg-finale.kg-fin-phone.kg-fin-go .fin-count b { animation: kg-fin-num 340ms ease-out both; }
  .kg-finale.kg-fin-phone.kg-fin-go .fin-count b[data-n="2"] { animation-delay: 330ms; }
  .kg-finale.kg-fin-phone.kg-fin-go .fin-count b[data-n="1"] { animation-delay: 660ms; }
  .kg-finale.kg-fin-phone.kg-fin-go .kgf-keyclip .kgf-key, .kg-finale.kg-fin-phone.kg-fin-done .kgf-keyclip .kgf-key { transform: translateY(104%); transition-delay: 1500ms; }
  .kg-finale.kg-fin-phone.kg-fin-go .kgf-rays, .kg-finale.kg-fin-phone.kg-fin-done .kgf-rays { opacity: 1; transform: translate(-50%, -50%) scale(1); transition-delay: 1700ms; }
  .kg-finale.kg-fin-phone .fin-launch, .kg-finale.kg-fin-phone .fx-snd { display: none !important; }
  .kg-finale.kg-fin-phone .kgf-lock { margin-top: 2.2rem; }
}
@keyframes kg-fin-flood { from { clip-path: circle(0% at 50% 30%); } to { clip-path: circle(150% at 50% 30%); } }
@keyframes kg-fin-num { 0% { opacity: 0; transform: scale(0.6); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.kg-tile img { height: auto; }
/* round 3 tightening for phones: about five screens in all */
@media (max-width: 760px) {
  .kg-home > .stop { padding-block: 1.1rem; }
  .kg-sec-h { margin-bottom: 0.6rem; font-size: 1.75rem; }
  .kg-steps li { padding: 0.6rem 0.3rem 0.55rem; gap: 0.2rem; }
  .kg-step-ic { width: 2.5rem; height: 2.5rem; } .kg-step-ic svg { width: 2.1rem; height: 2.1rem; }
  .kg-steps b { font-size: 0.88rem; } .kg-steps span:not(.kg-step-ic) { font-size: 0.74rem; }
  .kg-tile img, .kg-tile-art { aspect-ratio: 16 / 10; }
  .kg-tile b { font-size: 0.92rem; padding-top: 0.3rem; } .kg-tile { padding-bottom: 0.4rem; gap: 0.1rem; }
  .kg-packrow { grid-template-columns: 2.6rem 1fr auto; gap: 0.6rem; padding: 0.45rem 0.55rem; }
  .kg-packrow .btn.small { grid-column: auto; padding: 0.3rem 0.7rem; font-size: 0.85rem; }
  .kg-packrow b { font-size: 1.15rem; } .kg-pl { font-size: 0.66rem; } .kg-soonchip { display: none; }
  .kg-more { margin-top: 0.3rem; }
  .kg-banners { gap: 0.6rem; }
  .kg-banner { grid-template-columns: 3.8rem 1fr; padding: 0.55rem; row-gap: 0.35rem; }
  .kg-banner img { max-height: 5.2rem; }
  .kg-banner-t b { font-size: 1.35rem; } .kg-banner-t > span:last-child { font-size: 0.78rem; }
  .kg-faq summary { min-height: 2.75rem; }
  .kg-finale.kg-fin-phone .fin-flood { padding: 2.2rem 1rem 2.4rem; gap: 0.7rem; }
  .kg-finale.kg-fin-phone .kgf-lock { margin-top: 1.6rem; width: 4.4rem; }
  .kg-finale .fin-flood h2 { font-size: 2.5rem; }
}
@media (max-width: 760px) {
  .kg-faq summary { padding: 0.55rem 0.9rem; font-size: 0.98rem; }
  .kg-tiles { gap: 0.5rem; }
  footer .wrap { padding-block: 1.8rem 1.6rem; gap: 1.1rem; }
}
.kg-banner .btn.small.gold { padding-right: 2.3rem; }

/* Hidden keys on phones: the keyhole O in a title is the hiding place (round 3) */
.kk-o { position: relative; display: inline-block; cursor: pointer; border-radius: 0.15em; animation: kk-breathe 4.5s ease-in-out infinite; }
.kk-o::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 2.75rem); height: max(100%, 2.75rem); transform: translate(-50%, -50%); }
.kk-o:focus-visible { outline: 3px solid var(--gold); outline-offset: 0.06em; }
@keyframes kk-breathe { 0%, 100% { text-shadow: 0 0 0 rgba(240, 194, 90, 0); } 50% { text-shadow: 0 0 0.18em rgba(240, 194, 90, 0.55); } }
html.calm .kk-o, .kk-calm .kk-o { animation: none; text-shadow: 0 0 0.12em rgba(240, 194, 90, 0.35); }
@media (prefers-reduced-motion: reduce) { .kk-o { animation: none; text-shadow: 0 0 0.12em rgba(240, 194, 90, 0.35); } }
.kk-o .kk-clip { left: 50%; width: 0.32em; margin-left: -0.16em; top: -1.15em; height: 1.5em; }
.kk-o .kk-clip svg { width: 100% !important; }
.kk-o.is-go { animation: kk-opop 420ms cubic-bezier(.3, 1.7, .5, 1) 420ms; }
@keyframes kk-opop { 40% { transform: scale(1.25); text-shadow: 0 0 0.3em rgba(255, 230, 150, 0.95); } }
.kk-o.is-found { color: #f6d878; text-shadow: 0 0 0.16em rgba(240, 194, 90, 0.6); animation: none; }
.kk-o .kk-letter { left: auto; right: -0.9rem; top: -0.7rem; font-size: 1rem; min-width: 1.5rem; height: 1.5rem; text-shadow: none; letter-spacing: 0; }
.kk-o .kk-cap { left: 0; top: 110%; font-size: 0.8rem; text-transform: none; letter-spacing: 0; text-shadow: none; line-height: 1.3; white-space: normal; }
/* the key ring on phones: small, top left, after the first find */
@media (max-width: 1099px) {
  .kk-ring, .kk-ring:not(.is-all) { display: flex; top: calc(var(--hdr, 3.6rem) + 0.45rem); bottom: auto; left: 0.5rem; padding: 0.25rem 0.6rem 0.25rem 0.4rem; gap: 0.4rem; }
  .kk-ring-l { display: flex; } .kk-ring-l i { width: 0.8rem; height: 0.9rem; font-size: 0.62rem; }
  .kk-ring-t b { font-size: 0.68rem; }
  .kk-ring-go { min-height: 2.75rem; padding: 0 0.7rem; font-size: 0.85rem; }
}
.kk-o .kk-cap { left: 50%; transform: translateX(-50%); max-width: 12rem; text-align: center; } .kk-say.kk-o .kk-cap { transform: translateX(-50%); }

/* ======================================================================
   Round 4 (Scott, 2026-10-23: "the images are too small here")
   ====================================================================== */
/* Banners: on phones the art sits full width on top, the words and the button under it (never over it) */
@media (max-width: 899px) {
  .kg-banner { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 0.6rem; padding: 0 0 0.85rem; overflow: hidden; }
  .kg-banner img { grid-row: auto; width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
  .kg-banner-t, .kg-banner .btn.small { margin-inline: 0.9rem; }
  .kg-banner-t b { font-size: 1.6rem; }
  .kg-banner-t > span:last-child { font-size: 0.86rem; }
  .kg-banner-sotl img { object-position: 50% 30%; }
}
/* desktop: the art beside the words, at a generous size */
@media (min-width: 900px) {
  .kg-banner { grid-template-columns: 11rem 1fr; padding: 0.8rem; }
  .kg-banner img { max-height: 8.5rem; height: 8.5rem; }
}
.kg-banner-work img { object-position: 57% 50%; }
/* the For work painting is landscape: tiles and the band crop it well */
.kg-tile-land img { object-position: 57% 50%; }
.kg-work-art-land { aspect-ratio: 16 / 10; }
.kg-work-art-land img { object-position: 57% 50%; }

/* The pill at the bottom left was the inherited "back to the top" runner. Phones and tablets have the bottom bar, so it
   goes there; on desktop it stays in its corner, clear of the content. */
@media (max-width: 999px) { .runner { display: none !important; } }

/* The key ring: small, top right under the header, dismissable, only after the first find */
.kk-ring { left: auto !important; right: max(0.6rem, env(safe-area-inset-right)) !important; top: calc(var(--hdr, 3.6rem) + 0.5rem) !important; bottom: auto !important; }
.kk-ring[hidden] { display: none !important; }
.kk-ring-x { flex: none; width: 2.75rem; height: 2.75rem; margin: -0.4rem -0.6rem -0.4rem -0.2rem; border: 0; border-radius: 50%; background: none; color: #a7a191; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.kk-ring-x:hover { color: #f0c25a; }
@media (max-width: 1099px) {
  .kk-ring { padding: 0.15rem 0.5rem 0.15rem 0.35rem !important; gap: 0.3rem !important; opacity: 0.94; }
  .kk-ring-l { display: none !important; }
  .kk-ring-ic svg { width: 0.6rem; }
  .kk-ring-t b { font-size: 0.66rem; }
  .kk-ring-go { min-height: 2.75rem; font-size: 0.8rem; padding: 0 0.6rem; }
}
/* desktop: the back-to-top runner shrinks to a small round button at the right edge, outside the content column */
@media (min-width: 1000px) {
  .runner { left: auto !important; right: max(0.4rem, calc((100vw - 74rem) / 2 - 3.2rem)) !important; width: 2.9rem !important; height: 2.9rem !important; padding: 0 !important; justify-content: center; border-radius: 50% !important; }
  .runner-track { flex: none !important; width: 1.3rem; height: 1.3rem; background: none !important; }
  .runner-fill, .runner-x { display: none !important; }
  .runner-pin { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 1.15rem !important; }
}

/* Daily set (2026-10-23): the ticket's count links to the set on /daily/ */
a.kgt-count { white-space: nowrap; text-decoration: none; }
a.kgt-count:hover { text-decoration: underline; }
@media (max-width: 420px) { .kgt-eyebrow { letter-spacing: 0.08em; font-size: 0.7rem; } }

/* How it works (2026-10-24) */
.kg-hw-steps { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .kg-hw-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; } }
.kg-hw-step { display: grid; grid-template-columns: 3rem 1fr; gap: 0.8rem; align-items: start; padding: 1rem; border-radius: 0.9rem; background: linear-gradient(180deg, #262c2e, #171b1c); border: 1px solid rgba(240, 194, 90, 0.4); }
.kg-hw-n { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; font: 900 1.4rem/1 var(--display); color: #2a1c04; background: linear-gradient(180deg, #f6d878, #e3a72f); }
.kg-hw-step h3 { margin: 0.2rem 0 0.35rem; font: 900 1.35rem/1 var(--display); text-transform: uppercase; color: #efe6d0; }
.kg-hw-step p { margin: 0; color: #c9c1ad; line-height: 1.45; }

/* Join a game (2026-10-24) */
.kg-join-page { min-height: 70vh; display: grid; place-items: center; padding-block: 2rem 3rem; }
.kg-jp { width: 100%; max-width: 32rem; text-align: center; display: grid; gap: 0.8rem; justify-items: center; }
.kg-jp h1 { margin: 0; }
.kg-jp-form { width: 100%; display: grid; gap: 0.7rem; justify-items: center; }
.kg-jp-form[hidden] { display: none; }
.kg-jp-label { font: 700 0.75rem/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #f0c25a; }
.kg-jp-code { width: min(100%, 17rem); padding: 0.5rem 0.4rem 0.45rem 0.9rem; border-radius: 0.9rem; border: 2px solid rgba(240, 194, 90, 0.7); background: #121516; color: #fff3c4;
  font: 900 clamp(2.8rem, 15vw, 4rem)/1 var(--display); letter-spacing: 0.42em; text-align: center; text-transform: uppercase; }
.kg-jp-code::placeholder { color: rgba(240, 194, 90, 0.25); }
.kg-jp-code:focus { outline: 3px solid #2ee6ff; outline-offset: 3px; }
.kg-jp-go { min-width: 12rem; }
.kg-jp-msg { min-height: 1.3em; margin: 0; color: #ffb4a3; font: 700 0.9rem/1.3 var(--mono); }
.kg-jp-wait { display: grid; gap: 0.7rem; justify-items: center; padding: 1.4rem 1.2rem; border-radius: 1rem; background: linear-gradient(180deg, #262c2e, #171b1c); border: 1px solid rgba(46, 230, 255, 0.45); }
.kg-jp-wait[hidden] { display: none; }
.kg-jp-wait svg { width: 3rem; height: auto; }
.kg-jp-wait h2 { margin: 0; font: 900 1.7rem/1.05 var(--display); text-transform: uppercase; }
.kg-jp-wait h2:focus { outline: none; }
.kg-jp-wait p { margin: 0; color: #c9c1ad; }
.kg-jp-wait b { letter-spacing: 0.2em; color: #fff3c4; }
.kg-jp-help { margin: 0.6rem 0 0; color: #a7a191; font-size: 0.9rem; }

/* Deck the Desks at Christmas (Scott, 2026-10-23): deep green ground, code-drawn fairy lights along the top, a Santa hat on
   the art's corner. Brass stays the accent. Calm mode and reduced motion: the lights stay lit and still. */
.kg-xmas { position: relative; color: #f6efdc; border-color: #0b4a33 !important;
  background: radial-gradient(120% 90% at 85% 0%, rgba(255, 214, 120, 0.12), transparent 55%),
              repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 7px),
              linear-gradient(180deg, #11523a, #0a3a29 70%, #082e21) !important; }
.kg-xmas .kg-banner-k, .kg-xmas .eyebrow { color: #f6d878 !important; }
.kg-xmas .kg-banner-t b, .kg-xmas h1, .kg-xmas h2 { color: #fff7e2 !important; }
.kg-xmas .kg-banner-t > span:last-child, .kg-xmas p { color: #e8dfc6; }
.kg-xmas .btn.small:not(.gold) { color: #2a1c04 !important; background: linear-gradient(180deg, #f6d878, #e3a72f) !important; border-color: #8a6414 !important; }
.kg-lights { position: absolute; left: 0; right: 0; top: 0; height: 26px; display: flex; justify-content: space-around; align-items: flex-start; pointer-events: none; z-index: 3;
  background: radial-gradient(120% 22px at 50% -10px, transparent 60%, rgba(10, 20, 14, 0.9) 61%, rgba(10, 20, 14, 0.9) 64%, transparent 65%) repeat-x; background-size: 11.1% 26px; }
.kg-lights i { width: 8px; height: 12px; margin-top: 9px; border-radius: 50% 50% 45% 45%; background: #fff4c8; box-shadow: 0 0 8px 2px rgba(255, 236, 170, 0.75);
  animation: kg-twinkle 2.6s ease-in-out infinite; }
.kg-lights i:nth-child(4n+2) { background: #ff5a4f; box-shadow: 0 0 8px 2px rgba(255, 90, 79, 0.7); animation-delay: -0.7s; }
.kg-lights i:nth-child(4n+3) { background: #4fe08a; box-shadow: 0 0 8px 2px rgba(79, 224, 138, 0.65); animation-delay: -1.4s; }
.kg-lights i:nth-child(4n) { background: #f6c64a; box-shadow: 0 0 8px 2px rgba(246, 198, 74, 0.75); animation-delay: -2s; }
.kg-lights i:nth-child(odd) { margin-top: 13px; }
.kg-lights i:nth-child(n+13) { display: none; }
@media (min-width: 700px) { .kg-lights i:nth-child(n+13) { display: block; } }
@keyframes kg-twinkle { 0%, 100% { opacity: 1; } 45% { opacity: 0.45; } 55% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) { .kg-lights i { animation: none; } }
.calm .kg-lights i, [data-calm=on] .kg-lights i { animation: none; }
.kg-xmas-art { position: relative; display: block; }
.kg-santa { position: absolute; left: -6px; top: -14px; width: 54px; height: auto; transform: rotate(-22deg); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45)); z-index: 2; pointer-events: none; }
.kg-banner.kg-xmas { overflow: visible; padding-top: 1.4rem; }
.kg-banner.kg-xmas .kg-xmas-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; border-radius: 0.45rem; }
.kg-banner.kg-xmas .kg-xmas-art { grid-row: 1 / 3; }
.kg-work.kg-xmas { padding-top: 2rem; border-radius: 1rem; }
.kg-tile-xmas img { object-position: 55% 50%; }
.wx-hero.kg-xmas { padding-top: 2.2rem; }
.wx-hero.kg-xmas .wx-art img { width: 100%; height: auto; border-radius: 0.8rem; }
.wx-hero.kg-xmas .wx-art { aspect-ratio: 1376 / 768; overflow: visible; align-self: center; }
.wx-hero.kg-xmas .wx-art img { height: 100%; object-fit: cover; border-radius: 0.4rem; }
.wx-hero.kg-xmas .wx-art .kg-santa { left: -14px; top: -20px; width: 62px; }

/* The Locksmith peeking from behind Today's puzzle (2026-10-24, peek.js places him in the room the screen has) */
.kg-today-wrap { position: relative; }
.kg-today-wrap > .kg-today { z-index: 1; }
.fx .kg-today { animation: none; }
.fx .kg-today-wrap { animation: sheet-float 7s ease-in-out infinite; }
.kg-peek { position: absolute; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s ease, transform 0.6s cubic-bezier(.2, .9, .3, 1.1); }
.kg-peek[hidden] { display: none; }
.kg-peek-tip { transform: translateX(-28%); } .kg-peek-psst { transform: translateX(28%); } .kg-peek-corner, .kg-peek-rise { transform: translateY(32%); }
.kg-peek.is-in { opacity: 1; transform: none; }
.kg-peek.is-still { transition: none; }
.kg-peek-btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; }
.kg-peek-btn:focus-visible { outline: 3px solid #2ee6ff; outline-offset: 2px; border-radius: 0.6rem; }
.kg-peek img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)); }
.kg-peek-say { position: absolute; z-index: 3; margin: 0; padding: 0.6rem 0.8rem; border-radius: 0.8rem; background: #fff7e2; color: #2a1c04; font-weight: 700; font-size: 0.92rem; line-height: 1.3;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); }
.kg-peek-say[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .kg-peek { transition: none; } .fx .kg-today-wrap { animation: none; } }
.calm .kg-peek { transition: none; }
.calm .kg-today-wrap { animation: none !important; }
@media (min-width: 900px) { .kg-hero .kg-launcher { margin-top: 4.5rem; } }   /* room above the card for the Locksmith to rise (2026-10-24) */

/* Hidden-key O (site review item 1, 2026-10-24): the word never splits, a 44 px hit area, a hidden real button, a toast caption */
.kk-word { white-space: nowrap; }
.kk-o { position: relative; }
.kk-o::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.kk-o-btn { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kk-o-btn:focus-visible { position: static; width: auto; height: auto; margin: 0.4rem 0 0; padding: 0.3rem 0.8rem; clip: auto; overflow: visible; border-radius: 999px;
  background: #f0c25a; color: #2a1c04; font: 700 0.85rem/1.3 var(--mono); outline: 3px solid #2ee6ff; outline-offset: 2px; }
.kk-toast { position: fixed; left: 50%; z-index: 2500; margin: 0; max-width: min(90vw, 26rem); padding: 0.55rem 0.9rem; border-radius: 0.8rem; transform: translate(-50%, -8px);
  background: #fff7e2; color: #2a1c04; font-weight: 700; font-size: 0.92rem; line-height: 1.3; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.kk-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .kk-toast { transition: none; } }

/* The key ring in the header (site review item 9, 2026-10-24) */
.kk-keyring { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: 0.35rem; padding: 0; border-radius: 999px;
  border: 1px solid rgba(240, 194, 90, 0.55); background: rgba(18, 21, 22, 0.8); cursor: pointer; inset: auto; box-shadow: none; transform: none; }
.kk-keyring .kk-keyring-ic svg { width: 12px; height: auto; display: block; transform: rotate(35deg); }
.kk-keyring .kk-keyring-n { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #f0c25a; color: #2a1c04; font: 800 0.72rem/18px var(--mono); }
.kk-keyring.is-all { border-color: #2ee6ff; box-shadow: 0 0 12px rgba(46, 230, 255, 0.4); }
.kk-keyring.is-bump { animation: kk-bump 0.5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes kk-bump { 40% { transform: scale(1.25); } }
.kk-keyring:focus-visible { outline: 3px solid #2ee6ff; outline-offset: 2px; }
.kk-sheet { position: fixed; right: 12px; z-index: 2600; width: min(92vw, 22rem); padding: 0.9rem 1rem; border-radius: 0.9rem; background: linear-gradient(180deg, #262c2e, #171b1c);
  border: 1px solid rgba(240, 194, 90, 0.55); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); color: #efe6d0; display: grid; gap: 0.6rem; }
.kk-sheet[hidden] { display: none; }
.kk-sheet p { margin: 0; }
.kk-sheet-h { display: flex; justify-content: space-between; align-items: center; font: 700 0.95rem/1.3 var(--mono); }
.kk-sheet-x { width: 36px; height: 36px; border-radius: 999px; border: 1px solid #4b5254; background: none; color: #efe6d0; font-size: 1.3rem; cursor: pointer; }
.kk-sheet .kk-sheet-l { display: flex; gap: 0.3rem; }
.kk-sheet .kk-sheet-l i { display: grid; place-items: center; width: 2rem; height: 2.4rem; border-radius: 0.4rem; border: 1px dashed #6b6450; font: 900 1.3rem/1 var(--display); font-style: normal; color: #f0c25a; }
.kk-sheet .kk-sheet-l i.on { border: 1px solid #f0c25a; background: rgba(240, 194, 90, 0.12); }
.kk-sheet-hint { font-size: 0.88rem; color: #c9c1ad; }
.kk-sheet-hint a { color: #f0c25a; }
@media (prefers-reduced-motion: reduce) { .kk-keyring.is-bump { animation: none; } }
@media (max-width: 420px) { .kk-has-ring .kg-join-top { display: none; } }   /* phones join from the bottom bar; the key ring takes the header space */

/* A short footer (site review item 10, 2026-10-24): about 220 px on phones, one row of columns on desktop */
.foot-row { display: none; }
@media (max-width: 759px) {
  footer .wrap { padding-block: 1rem 1.1rem !important; gap: 0.6rem !important; }
  footer .foot-cols { display: none !important; }
  footer .foot-row { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
  footer .foot-row a { display: inline-flex; align-items: center; min-height: 2.75rem; color: #ece4d2; font-weight: 700; font-size: 0.95rem; text-decoration: none; }
  footer .small-print { font-size: 0.82rem; line-height: 1.4; margin: 0; }
  footer .foot-base { margin: 0 !important; padding-top: 0.5rem !important; gap: 0.2rem 0.9rem !important; flex-wrap: wrap; }
  footer .brand b { font-size: 1.05rem; }
}
@media (min-width: 760px) {
  footer .wrap { padding-block: 1.6rem 1.2rem !important; display: grid !important; grid-template-columns: minmax(14rem, 1fr) 2fr; gap: 1rem 2.5rem !important; align-items: start; }
  footer .foot-base { grid-column: 1 / -1; margin: 0 !important; }
}
@media (max-width: 759px) {
  footer .wrap > .stack { gap: 0.35rem !important; }
  footer .brand { min-height: 2.2rem; }
  footer .small-print { font-family: var(--body, system-ui), sans-serif; font-size: 0.8rem; line-height: 1.35; color: #b9b19c; }
  footer .foot-row { gap: 0 0.85rem; }
  footer .foot-row a { min-height: 2.5rem; font-size: 0.92rem; }
  footer .foot-base { padding-top: 0.35rem !important; font-size: 0.8rem; }
  footer .foot-base > span { flex-basis: 100%; }
}
@media (min-width: 760px) { footer .foot-cols li { margin: 0; } footer .foot-cols a { padding-block: 0.2rem; } }

/* The finale is one screen at every size (site review item 11, 2026-10-24): the 3, 2, 1 plays on its own when it comes into view */
@media (min-width: 761px) {
  .kg-finale.kg-fin-phone .fin-track { height: auto !important; }
  .kg-finale.kg-fin-phone .fin-sticky { position: relative !important; height: auto !important; overflow: hidden; display: block !important; }
  .kg-finale.kg-fin-phone .fin-flood { position: relative !important; inset: auto !important; clip-path: circle(0% at 50% 30%); padding: 3rem 1rem 3.2rem; }
  .kg-finale.kg-fin-phone.kg-fin-go .fin-flood { animation: kg-fin-flood 700ms cubic-bezier(.3, .7, .2, 1) 1000ms forwards; }
  .kg-finale.kg-fin-phone.kg-fin-done .fin-flood, .kg-finale.kg-fin-phone:not(.is-live) .fin-flood { clip-path: none !important; }
  .kg-finale.kg-fin-phone .fin-count { display: grid !important; place-items: center; position: absolute !important; inset: 0; z-index: 2; pointer-events: none; }
  .kg-finale.kg-fin-phone .fin-count b { grid-area: 1 / 1; opacity: 0 !important; transform: scale(0.6) !important; font: 900 9rem/1 var(--display); color: #efe6d0; text-shadow: 0 0 40px rgba(240, 194, 90, 0.4); transition: none !important; }
  .kg-finale.kg-fin-phone.kg-fin-go .fin-count b { animation: kg-fin-num 340ms ease-out both; }
  .kg-finale.kg-fin-phone.kg-fin-go .fin-count b[data-n="2"] { animation-delay: 330ms; }
  .kg-finale.kg-fin-phone.kg-fin-go .fin-count b[data-n="1"] { animation-delay: 660ms; }
  .kg-finale.kg-fin-phone.kg-fin-go .kgf-keyclip .kgf-key, .kg-finale.kg-fin-phone.kg-fin-done .kgf-keyclip .kgf-key { transform: translateY(104%); transition-delay: 1500ms; }
  .kg-finale.kg-fin-phone.kg-fin-go .kgf-rays, .kg-finale.kg-fin-phone.kg-fin-done .kgf-rays { opacity: 1; transform: translate(-50%, -50%) scale(1); transition-delay: 1700ms; }
  .kg-finale.kg-fin-phone .fin-launch, .kg-finale.kg-fin-phone .fx-snd { display: none !important; }
  .kg-finale.kg-fin-phone .kgf-lock { margin-top: 2.2rem; }
  .kg-finale.kg-fin-phone .fin-flood { padding: 4.5rem 1rem 4.5rem; min-height: min(100vh - 4rem, 46rem); justify-content: center; width: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; }
  .kg-finale.kg-fin-phone .fin-sticky, .kg-finale.kg-fin-phone .fin-track { width: 100% !important; max-width: none !important; }
}

/* The Play launcher at the top of the menu sheet (site review item 12, 2026-10-24) */
.kg-launch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 1rem; }
.kg-launch-go { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; min-height: 4.2rem; padding: 0.6rem 0.8rem; border-radius: 0.8rem;
  text-decoration: none; color: #efe6d0; background: linear-gradient(180deg, #2b3133, #1c2022); border: 1px solid rgba(240, 194, 90, 0.45); }
.kg-launch-go:active { transform: translateY(1px); background: #262c2e; }
.kg-launch-go small { font: 700 0.66rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #f0c25a; }
.kg-launch-go b { font: 900 1.1rem/1.05 var(--display); text-transform: uppercase; }
.kg-launch-cont { grid-column: 1 / -1; border-color: #2ee6ff; }
.kg-launch-cont[hidden] { display: none; }
.kg-launch-ring { position: absolute; right: 0.6rem; top: 50%; width: 1.9rem; height: 1.9rem; margin-top: -0.95rem; border-radius: 50%;
  background: conic-gradient(#2ee6ff calc(var(--p) * 1%), rgba(240, 194, 90, 0.2) 0); -webkit-mask: radial-gradient(circle, transparent 55%, #000 57%); mask: radial-gradient(circle, transparent 55%, #000 57%); }
.kg-launch-daily b { padding-right: 2.2rem; }

/* Party hub poster tiles (site review item 7, 2026-10-24) */
.pgx-row:has(> .pgt) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
@media (min-width: 760px) { .pgx-row:has(> .pgt) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; } }
@media (min-width: 1100px) { .pgx-row:has(> .pgt) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pgt { display: flex; flex-direction: column; gap: 0.4rem; text-decoration: none; color: #efe6d0; min-width: 0; }
.pgt-art { position: relative; display: block; aspect-ratio: 896 / 1206; border-radius: 0.6rem; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); background: #141718; }
.pgt-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
a.pgt:hover .pgt-art img { transform: scale(1.03); }
a.pgt:focus-visible { outline: 3px solid #2ee6ff; outline-offset: 3px; border-radius: 0.6rem; }
.pgt-ribbon { position: absolute; right: 0; top: 0.7rem; padding: 0.2rem 0.6rem 0.2rem 0.7rem; border-radius: 0.4rem 0 0 0.4rem; font: 800 0.72rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); }
.pgt-free { background: #2fae67; color: #04180c; }
.pgt-soon { background: #c9c1ad; color: #1d1a12; }
.pgt-facts { display: flex; flex-wrap: wrap; gap: 0.15rem 0.7rem; font-size: 0.82rem; color: #c9c1ad; }
.pgt-facts span { display: inline-flex; align-items: center; gap: 0.25rem; }
.pgt-facts .d-icon { width: 0.95rem; height: 0.95rem; color: #f0c25a; }
@media (prefers-reduced-motion: reduce) { .pgt-art img { transition: none; } }

/* Quick fixes from the site review (2026-10-24) */
/* 20: a two-tone focus ring that shows on gold and on charcoal */
:focus-visible { outline: 2px solid #1b1406 !important; outline-offset: 2px; box-shadow: 0 0 0 4px #fff7e2 !important; }
.kk-sheet-try { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* 21: no text under 12 px, mono labels tracked at 0.12 em or less, eyebrows on one line on phones */
.eyebrow, .kgsh-k, .kgd-set-k, .kgt-eyebrow, .kg-banner-k, .kgd-b-k, .tab, .tag-aud, .chip, .mitd-chips li, .pl-tag { letter-spacing: 0.1em !important; }
.cover-badge, .cover-badge b, .cover-badge i, .kgsh-badge, .tag-aud, .mitd-chips li, .pl-tag, .tab { font-size: max(12px, 0.75rem) !important; }
@media (max-width: 600px) { .eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } }
/* 22: breadcrumbs on one baseline, the last crumb shortened, a separator never alone */
.crumbs ol { display: flex !important; flex-wrap: nowrap !important; align-items: baseline; gap: 0 0.4rem; min-width: 0; margin: 0; padding: 0; list-style: none; }
.crumbs li { white-space: nowrap; flex: none; }
.crumbs li[aria-current] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 26: jumped-to headings land below the sticky header */
:where(h1, h2, h3, section[id], [id].stop) { scroll-margin-top: 84px; }
.kgsh-badge { font-size: 0.56rem !important; letter-spacing: 0.04em !important; white-space: nowrap; }
@media (min-width: 760px) { .kgsh-badge { font-size: 0.66rem !important; } }
@media (max-width: 600px) { .kgsh .lede { display: none; } .kgsh .split { margin-bottom: 0.6rem !important; } .kgsh-sets { display: none; } }

/* The 404: the Locksmith's three keys (site review item 24, 2026-10-24) */
.k4 { min-height: 70vh; display: grid; place-items: center; padding-block: 2.5rem 3rem; }
.k4-in { width: 100%; max-width: 46rem; text-align: center; display: grid; gap: 0.8rem; justify-items: center; }
.k4-in h1 { margin: 0; }
.k4-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; width: 100%; margin-top: 0.6rem; }
.k4-key { display: grid; justify-items: center; gap: 0.3rem; padding: 1rem 0.4rem 0.9rem; border-radius: 0.9rem; text-decoration: none; color: #efe6d0;
  background: linear-gradient(180deg, #262c2e, #171b1c); border: 1px solid rgba(240, 194, 90, 0.45); transition: transform 0.15s, border-color 0.2s; }
.k4-key:hover { transform: translateY(-3px); border-color: #f0c25a; }
.k4-svg { display: block; width: 2.6rem; height: 8.3rem; }
.k4-svg svg { width: 100%; height: 100%; transition: transform 0.4s cubic-bezier(.5, 0, .75, 0); }
.k4-key:hover .k4-svg svg { transform: rotate(-8deg); }
.k4-key.is-turn .k4-svg svg { transform: translateY(22%) rotate(90deg); }
.k4-key b { font: 900 1.15rem/1.05 var(--display); text-transform: uppercase; }
.k4-key small { font-size: 0.8rem; color: #b9b19c; }
.k4-more { margin: 0.6rem 0 0; color: #b9b19c; font-size: 0.92rem; }
.k4-more a { color: #f0c25a; }
@media (prefers-reduced-motion: reduce) { .k4-key, .k4-svg svg { transition: none; } }
.k4-in h1 { font: 900 clamp(2.6rem, 10vw, 4.2rem)/0.95 var(--display); text-transform: uppercase; color: #f6efdc; }
/* 27: the account form first on phones (site review, 2026-10-24) */
@media (max-width: 760px) {
  [data-signed-out] .account-grid { display: flex !important; flex-direction: column; gap: 1rem; }
  [data-signed-out] .account-grid > .account-card { order: -1; }
  [data-signed-out] .page-head .lede { display: none; }
  [data-signed-out] .page-head { margin-bottom: 0.6rem; }
}

/* Brass and Ink (2026-10-24): every gold button's glyph is Go unless its label asks for Play, Email or Share; the stop marks are the keyhole */
.btn.gold::after { background: currentColor !important; -webkit-mask: var(--ki-mask-go) center / contain no-repeat; mask: var(--ki-mask-go) center / contain no-repeat; opacity: 0.9; }
.btn.gold.ki-play::after { -webkit-mask-image: var(--ki-mask-play); mask-image: var(--ki-mask-play); }
.btn.gold.ki-email::after { -webkit-mask-image: var(--ki-mask-email); mask-image: var(--ki-mask-email); }
.btn.gold.ki-share::after { -webkit-mask-image: var(--ki-mask-share); mask-image: var(--ki-mask-share); }
.stop-mark .ki-stop { display: block; width: 100%; height: auto; aspect-ratio: 1; --ki-accent: #e3a72f; color: #1b1406; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45)); }
.kg-bar-btn .ki, .kg-acct-ic .ki { width: 1.5rem; height: 1.5rem; }

/* The Locksmith on phones (Scott, 2026-10-24): room above the card for him, and the screen edge crops a leaning pose without a sideways scroll */
@media (max-width: 899px) {
  .kg-today-wrap { margin-top: 60px; }   /* set in CSS, not by script, so nothing shifts when he appears */
  main { overflow-x: clip; }   /* clip the Locksmith's peek at the page edge, not the hero, so the gold band runs edge to edge (2026-10-24) */
  .kg-peek-phone.kg-peek-tip { transform: translateX(30%); } .kg-peek-phone.kg-peek-psst { transform: translateX(-30%); }
  .kg-peek-phone.is-in { transform: none; }
}

/* The home card sells the whole daily set (Scott, 2026-10-24) */
.kgt-set { display: flex; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.kgt-set li { position: relative; flex: 1 1 0; min-width: 0; max-width: 3.4rem; aspect-ratio: 4 / 5; border-radius: 0.3rem; overflow: hidden; background: #1b1f21; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); }
.kgt-set a { display: block; width: 100%; height: 100%; }
.kgt-set img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kgt-set li.is-done::after { content: ''; position: absolute; inset: 0; background: rgba(11, 42, 46, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ee6ff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 60% no-repeat; }
.kgt-set li.is-done { box-shadow: 0 0 0 2px #2ee6ff; }

/* Hidden keys on phones (Scott, 2026-10-24): a brass keyhole set into the header mark, the footer mark or a poster corner, and a glint now and then on every hiding place */
.kk-spot { position: absolute; right: -6px; bottom: -6px; z-index: 3; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #f0c25a 45%, #a86d10); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45); }
.kk-spot svg { width: 14px; height: 14px; fill: #1b1406; }
.kk-spot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.kgsh-poster .kk-spot { right: 8px; bottom: auto; top: 34px; }
.kk-o::after, .kk-spot::after { content: ''; position: absolute; right: -0.25em; top: -0.2em; width: 0.5em; height: 0.5em; min-width: 12px; min-height: 12px; pointer-events: none; opacity: 0;
  background: #fff7d6; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px #ffe08a);
  animation: kk-glint 6.5s ease-in-out infinite; }
.kk-spot::after { right: -5px; top: -6px; }
@keyframes kk-glint { 0%, 86%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 90% { opacity: 1; transform: scale(1.1) rotate(45deg); } 95% { opacity: 0.6; transform: scale(0.8) rotate(90deg); } }
.kk-o.is-found::after, .kk-spot.is-found::after { animation: none; opacity: 0; }
.kk-spot.is-found { background: radial-gradient(circle at 35% 30%, #d9fbff, #2ee6ff 45%, #0b8fa3); }
@media (prefers-reduced-motion: reduce) { .kk-o::after, .kk-spot::after { animation: none; opacity: 0.85; transform: none; } }
html.calm .kk-o::after, html.calm .kk-spot::after { animation: none; opacity: 0.85; }
@media (min-width: 1100px) { .kk-spot { display: none; } }

/* The hero's changing words as brass letter tumblers (Scott, 2026-10-24): a fixed row of wheels per slot, so the headline never moves */
.kg-slot.kg-tumbler { display: inline-block; overflow: visible; padding: 0; margin: 0; transition: none; width: auto !important; vertical-align: baseline; }
.kgtw-row { display: inline-flex; gap: 0.04em; vertical-align: -0.12em; }
.kgtw { position: relative; display: inline-block; width: 0.6em; height: 0.98em; overflow: hidden; border-radius: 0.08em;
  background: linear-gradient(180deg, #7a5410 0%, #f6d878 22%, #e3a72f 50%, #c98a1c 78%, #6b4a12 100%);
  box-shadow: inset 0 0.03em 0 rgba(255, 246, 210, 0.6), inset 0 -0.04em 0 rgba(60, 36, 4, 0.6), 0 0.03em 0.05em rgba(0, 0, 0, 0.35); }
.kgtw-s { display: flex; flex-direction: column; transition: transform 760ms cubic-bezier(.25, .85, .3, 1.08); transition-delay: calc(var(--i) * 55ms); }
.kgtw-s b { display: grid; place-items: center; height: 0.98em; font-size: 1em; line-height: 1; color: #1d1405; font-weight: inherit; text-shadow: 0 0.02em 0 rgba(255, 240, 200, 0.4); }
.kg-slot-b .kgtw { background: linear-gradient(180deg, #050606 0%, #2a2f31 24%, #1b1f21 55%, #0d0f10 100%); box-shadow: inset 0 0.03em 0 rgba(240, 194, 90, 0.35), 0 0.03em 0.05em rgba(0, 0, 0, 0.35); }
.kg-slot-b .kgtw-s b { color: #f6c64a; text-shadow: 0 0 0.12em rgba(240, 194, 90, 0.35); }
.kgtw-row::after { content: ''; position: absolute; }
.kg-hero h1 .kg-slot.kg-tumbler .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .kgtw-s { transition: none; } }
@media (max-width: 600px) { .kgtw { width: 0.5em; height: 0.86em; } .kgtw-s b { height: 1.0488em; font-size: 0.82em; } .kgtw-row { gap: 0.03em; vertical-align: -0.08em; } }

/* Tumblers: tiles only for letters (CEO, 2026-10-24: blank tiles looked broken). Spare wheels fold to nothing, so the gap sits at the
   end of the line, after ROOM., and each line is kept on one row so nothing else moves */
.kgtw-row { gap: 0 !important; }
.kgtw { margin-right: 0.04em; transition: width 360ms cubic-bezier(.3, .8, .3, 1), margin 360ms cubic-bezier(.3, .8, .3, 1), opacity 240ms ease; }
.kgtw.is-blank { width: 0 !important; margin-right: 0; opacity: 0; box-shadow: none !important; background: none !important; }
.kg-hero h1 .kg-reel-line .hl1, .kg-hero h1 .kg-reel-line .gold { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .kgtw { transition: none; } }

/* Home hero, 2026-10-24 (Scott: "the page width dosn't fill the screen and the text is hard on the edges"; "the your XXX is the XXX room. are off in height"):
   the copy sits a little in from the edge on phones, and the tumbler words are exactly the fixed words' cap height on the same baseline. */
@media (max-width: 760px) { .kg-hero .hero-grid { padding-inline: 4px; } }
.kg-hero h1 .kgtw { height: 0.84em; width: 0.5em; }
.kg-hero h1 .kgtw-s b { height: 1.05em; font-size: 0.8em; line-height: 1; }
.kg-hero h1 .kgtw-row { vertical-align: 0.07em; }

/* Party Pack 01 banner above its row on the home page (2026-10-24) */
.kg-pack-banner { display: block; margin-bottom: 0; border-radius: 0.7rem 0.7rem 0 0; overflow: hidden; }
.kg-pack-banner img { display: block; width: 100%; height: auto; aspect-ratio: 1376 / 620; object-fit: cover; }
.kg-pack-banner + .kg-packrow { position: relative; border-radius: 0 0 0.7rem 0.7rem; }
.kg-pack-banner + .kg-packrow > img { display: none; }
.kg-pack-banner + .kg-packrow { grid-template-columns: 1fr auto; }
@media (max-width: 420px) { .kg-pack-banner + .kg-packrow { grid-template-columns: 1fr; } }

/* The headline pin as a hidden-key spot (2026-10-24): it breathes a faint brass glow, the key slides into it, found it glows gold */
.kg-pin-spot { position: relative; display: inline-flex; }
.kg-pin-spot.kk-o { animation: kk-pinbreathe 4.5s ease-in-out infinite; text-shadow: none; border-radius: 50%; }
.kg-pin-spot.kk-o .kk-clip { top: -1.25em; }
.kg-pin-spot.kk-o.is-found { animation: none; text-shadow: none; filter: drop-shadow(0 0 0.18em rgba(240, 194, 90, 0.95)); }
.kg-pin-spot.kk-o .kk-letter { right: -1.1rem; top: -0.4rem; }
@keyframes kk-pinbreathe { 0%, 100% { filter: drop-shadow(0 0 0 rgba(240, 194, 90, 0)); } 50% { filter: drop-shadow(0 0 0.14em rgba(255, 220, 140, 0.85)); } }
html.calm .kg-pin-spot.kk-o { animation: none; }
@media (prefers-reduced-motion: reduce) { .kg-pin-spot.kk-o { animation: none; } }

/* Home Daily tab: every daily's painted poster (2026-10-24). Today's puzzle wide on top, the others four across on every screen */
.kg-tiles-daily { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kg-tiles-daily .kg-tile-dwide img { aspect-ratio: 8 / 3; object-position: 50% 30%; }
.kg-tiles-daily .kg-tile-d img { aspect-ratio: 4 / 5; object-position: 50% 20%; }
@media (max-width: 759px) {
  .kg-tiles-daily { gap: 0.45rem; }
  .kg-tiles-daily .kg-tile-d b { padding: 0.3rem 0.35rem 0; font-size: 0.72rem; }
  .kg-tiles-daily .kg-tile-d .kg-tile-tag { display: none; }
}

/* Party Pack 01 panel on the home page (2026-10-24): name and price left, the ten cards fanned right; stacked on phones */
.kg-pack-hero { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: end; gap: 1rem; margin-bottom: 0.9rem; padding: 1.1rem 1.1rem 0;
  border-radius: 0.9rem; overflow: hidden; text-decoration: none; color: #ece4d2; border: 1px solid rgba(227, 167, 47, 0.55);
  background: radial-gradient(70% 90% at 70% 100%, rgba(227, 167, 47, 0.38), transparent 70%), linear-gradient(180deg, #262c2e, #141718); }
.kg-pack-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding-bottom: 1.2rem; align-self: center; }
.kg-pack-k { font: 700 0.72rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #f0c25a; }
.kg-pack-copy b { font: 900 clamp(2.2rem, 5vw, 3.6rem)/0.92 var(--display); text-transform: uppercase; color: #f6e7c1; }
.kg-pack-copy .kg-pl { font: 700 0.78rem/1.35 var(--mono); color: #d8cfb9; }
.kg-pack-copy .btn.small { margin-top: 0.35rem; min-height: 2.75rem; padding: 0.35rem 1rem; background: linear-gradient(180deg, #f6d878, #e3a72f); color: #1d1405; border-color: #b9831c; }
.kg-pack-fan { display: block; width: 100%; height: auto; align-self: end; transition: transform 220ms ease; transform-origin: 50% 100%; }
.kg-pack-hero:hover .kg-pack-fan, .kg-pack-hero:focus-visible .kg-pack-fan { transform: translateY(-4px) scale(1.015); }
@media (max-width: 759px) {
  .kg-pack-hero { grid-template-columns: 1fr; gap: 0.4rem; padding: 1rem 1rem 0; }
  .kg-pack-copy { padding-bottom: 0.2rem; }
  .kg-pack-copy b { font-size: 2.3rem; }
}
@media (prefers-reduced-motion: reduce) { .kg-pack-fan { transition: none; } }

/* Every home tile the same tall poster shape, like the dailies (Scott, 2026-10-24: "we need them to be all the same, the poster size, taller size") */
.kg-tile img, .kg-tile .kg-tile-art { aspect-ratio: 4 / 5; object-position: 50% 30%; }
.kg-tile.kg-tile-land img { object-position: 50% 50%; }
.kg-tile-wide img, .kg-tile-wide .kg-tile-art { aspect-ratio: 8 / 3; }

/* For work page: the Deck the Desks section is one green band edge to edge, not a green box on the gold band (Scott, 2026-10-24) */
.kg-work.kg-xmas { background: none !important; border: 0 !important; border-radius: 0; }
.kg-work.kg-xmas::before { background: radial-gradient(90% 70% at 80% 0%, #1d4a3c 0%, #11523a 45%, #082e21 100%), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 7px);
  background-blend-mode: normal; clip-path: none; box-shadow: inset 0 1px 0 #2c5446, inset 0 -1px 0 #2c5446; }
.kg-work.kg-xmas > .kg-lights { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); }
.kg-lights-bottom { top: auto; bottom: 0; transform: scaleY(-1); }
.kg-work.kg-xmas > .kg-lights-bottom { transform: translateX(-50%) scaleY(-1); }

/* Who and how long under each game tile (2026-10-24) */
.kg-tile-meta { padding: 0.1rem 0.6rem 0; font: 600 0.74rem/1.3 var(--body, system-ui); color: #b9b2a0; }
@media (max-width: 420px) { .kg-tile-meta { font-size: 0.68rem; padding-inline: 0.5rem; } }

/* The Launch Party (beta) band (2026-10-25; briefs/launch-party-2026-10-25.md): home, party games, every pack game page and
   the Work Christmas page, only while it is on (build date, then /prices launchParty.live) */
.kg-lp { position: relative; z-index: 3; box-sizing: border-box; display: flex; align-items: center; gap: 0.9rem 1.2rem; width: min(100% - 2rem, 72rem); margin: 0.9rem auto 0.4rem;
  padding: 0.85rem 1rem 0.85rem 1.1rem; border: 1px solid #3f7a52; border-left-width: 4px; border-radius: 0.6rem;
  background: linear-gradient(100deg, #1d3424, #121c16); color: #e9f5ec; }
.kg-home > .kg-lp { width: 100%; margin-top: 0.4rem; }
@media (min-width: 900px) { .kg-home > .kg-lp { margin-bottom: 6.5rem; } }   /* the Locksmith peeks over the hero's top edge */
.kg-lp-in { flex: 1 1 auto; min-width: 0; }
.kg-lp p { margin: 0; }
.kg-lp-t { font-size: 0.98rem; line-height: 1.45; }
.kg-lp-t b { color: #bff0cc; }
.kg-lp-f { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem !important; font-size: 0.86rem; line-height: 1.4; color: #c9dccf; }
.kg-lp a:not(.btn) { color: #bff0cc; text-decoration: underline; text-underline-offset: 0.15em; }
.kg-lp-badge { flex: none; display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; font: 800 0.66rem/1 var(--mono);
  color: #2a1c04; background: radial-gradient(circle at 35% 30%, #fff3c4, #f0c25a 45%, #a86d10); box-shadow: inset 0 0 0 2px #6b4d10; }
.kg-lp-go { flex: none; }
.kg-lpchip { color: #bff0cc; background: #1d3424; }
@media (max-width: 640px) {
  .kg-lp { flex-direction: column; align-items: stretch; width: calc(100% - 2rem); padding: 0.8rem 0.9rem; }
  .kg-lp-go { align-self: flex-start; }
}

/* How to play (2026-10-25): the phone + any screen = a games console art, the three setups, Stuck. Brass and Ink. */
.kgw-art { margin: 1.4rem auto 0; padding: 0; width: 100%; max-width: 56rem; }
.kgw-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.kgw-stack { display: none !important; max-width: 19rem; margin-inline: auto; }
@media (max-width: 700px) { .kgw-hero .kgw-art .kgw-wide { display: none; } .kgw-hero .kgw-art .kgw-stack { display: block !important; } }
.kgw-hero { display: grid; justify-items: center; text-align: center; padding-block: 1.2rem 2rem; }
.kgw-hero h1 { font-size: clamp(2.5rem, 8vw, 4.6rem); line-height: 0.95; margin: 0.2rem 0 0.6rem; }
.kgw-hero .lede { max-width: 34rem; margin: 0 auto; }
.kgw-ctas { margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.kgw-bob { animation: kgw-bob 3.6s ease-in-out infinite; }
.kgw-tilt { transform-origin: 50% 100%; transform-box: fill-box; animation: kgw-tilt 5s ease-in-out infinite; }
.kgw-dots circle { transform-box: fill-box; transform-origin: center; animation: kgw-pulse 2.4s ease-in-out infinite; }
.kgw-dots circle:nth-child(2) { animation-delay: 0.5s; } .kgw-dots circle:nth-child(3) { animation-delay: 1s; }
.kgw-dash { stroke-dasharray: 4 8; animation: kgw-dash 1.4s linear infinite; }
@keyframes kgw-bob { 50% { transform: translateY(-5px); } }
@keyframes kgw-tilt { 50% { transform: rotate(-3deg); } }
@keyframes kgw-pulse { 50% { transform: scale(1.22); } }
@keyframes kgw-dash { to { stroke-dashoffset: -24; } }
html.calm .kgw-art *, html.calm .kgw-mini * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .kgw-art *, .kgw-mini * { animation: none !important; } }

.kgw-tablist { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.2rem; }
.kgw-tab { min-height: 2.9rem; padding: 0.4rem 1.1rem; border-radius: 999px; border: 1.5px solid #5d6668; background: rgba(0, 0, 0, 0.3); color: #efe6d0; font: 900 1.05rem/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
.kgw-tab:hover { border-color: #f0c25a; color: #f0c25a; }
.kgw-tab[aria-selected="true"] { color: #2a1c04; background: linear-gradient(180deg, #f6d878, #e3a72f); border-color: #e3a72f; }
.kgw-tab:focus-visible { outline: 3px solid #f0c25a; outline-offset: 2px; }
@media (max-width: 520px) { .kgw-tab { flex: 1 1 100%; } }
.kgw-panel + .kgw-panel { margin-top: 2.2rem; }
.kgw-js .kgw-panel + .kgw-panel { margin-top: 0; }
.kgw-ph { margin: 0; font: 900 clamp(1.5rem, 4.5vw, 2rem)/1 var(--display); text-transform: uppercase; color: #f0c25a; }
.kgw-js .kgw-ph { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kgw-pl { margin: 0.3rem 0 1rem; color: #c9c1ad; }
.kgw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.kgw-steps li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 7rem; gap: 0.9rem; align-items: center; padding: 0.9rem 1rem; border-radius: 0.9rem; background: linear-gradient(180deg, #262c2e, #171b1c); border: 1px solid rgba(240, 194, 90, 0.4); }
.kgw-n { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; font: 900 1.4rem/1 var(--display); color: #2a1c04; background: linear-gradient(180deg, #f6d878, #e3a72f); }
.kgw-st h4 { margin: 0 0 0.25rem; font: 900 1.25rem/1.05 var(--display); text-transform: uppercase; color: #efe6d0; }
.kgw-st p { margin: 0; color: #c9c1ad; line-height: 1.45; }
.kgw-st a { color: #f0c25a; }
.kgw-mini { display: block; width: 100%; height: auto; }
@media (max-width: 600px) { .kgw-steps li { grid-template-columns: 2.6rem minmax(0, 1fr); } .kgw-g { grid-column: 2; max-width: 7.5rem; } }
.kgw-note { margin: 1rem 0 0; padding: 0.9rem 1rem; border-radius: 0.9rem; border: 1px dashed rgba(240, 194, 90, 0.55); color: #d9d1bf; line-height: 1.45; }
.kgw-note b { color: #f0c25a; }
.kgw-daily { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-top: 1rem; padding: 0.9rem 1rem; border-radius: 0.9rem; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(239, 230, 208, 0.18); }
.kgw-daily-g { width: 4.6rem; flex: none; }
.kgw-daily p { margin: 0; flex: 1 1 14rem; color: #d9d1bf; line-height: 1.45; }
.kgw-stuck details { border-bottom: 1px solid rgba(239, 230, 208, 0.16); padding: 0.2rem 0; }
.kgw-stuck summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; font: 900 1.2rem/1.1 var(--display); text-transform: uppercase; color: #efe6d0; }
.kgw-stuck summary:focus-visible { outline: 3px solid #f0c25a; outline-offset: 2px; }
.kgw-stuck p { margin: 0.2rem 0 0.9rem; color: #c9c1ad; line-height: 1.5; max-width: 44rem; }

/* The home band */
.kg-ctrl-in { display: grid; gap: 1.2rem; align-items: center; }
@media (min-width: 860px) { .kg-ctrl-in { grid-template-columns: 1.25fr 0.75fr; gap: 2.4rem; } }
.kg-ctrl .kgw-art { margin: 0; max-width: none; }
.kg-ctrl-copy .lede { margin: 0 0 1rem; }

/* a TV is optional (Scott, 2026-10-25) */
.kgw-notv, .kg-ctrl-notv { margin: .6rem auto 0; max-width: 40rem; padding: .55rem .9rem; border: 1px solid rgba(248, 208, 106, .35); border-radius: .8rem; background: rgba(248, 208, 106, .07); color: var(--ink, #f6ecd3); }
.kgw-notv b, .kg-ctrl-notv b { color: var(--gold, #f8d06a); }
.kg-ctrl-notv { margin-left: 0; }