/* The daily shelf on /daily/ and the full-screen game window (Web Designer, 2026-10-23). Charcoal and brass, the Keyhole look. */
.kgsh-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: 0.8rem;
  background: linear-gradient(180deg, #23282b, #1a1e20); border: 1px solid rgba(240, 194, 90, 0.35); position: relative; }
.kgsh-bar.is-full { border-color: rgba(46, 230, 255, 0.6); box-shadow: 0 0 24px rgba(46, 230, 255, 0.12); }
.kgsh-count { margin: 0; font: 700 0.9rem/1.3 var(--mono); letter-spacing: 0.06em; color: #efe6d0; }
.kgsh-count b { color: #f0c25a; font-size: 1.1rem; }
.kgsh-dots { display: flex; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.kgsh-dots li { width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 2px solid #8a6414; background: transparent; }
.kgsh-dots li.on { background: radial-gradient(circle at 35% 30%, #fff3c4, #f0c25a 40%, #b9821f); border-color: #f0c25a; }
.kgsh-bar.is-full .kgsh-dots li.on { background: #2ee6ff; border-color: #2ee6ff; }
.kgsh-stamp { margin: 0 0 0 auto; }
.kgsh-stamp span { display: inline-block; padding: 0.15rem 0.6rem; border: 3px double #2ee6ff; border-radius: 0.35rem; color: #2ee6ff; transform: rotate(-6deg);
  font: 900 1.05rem/1.1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.kgsh-stamp.kgsh-slam span { animation: kgsh-slam 0.5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes kgsh-slam { 0% { transform: rotate(-6deg) scale(2.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(-6deg) scale(1); } }
.kgsh-sets { flex-basis: 100%; margin: 0; font-size: 0.85rem; color: #a7a191; }
.kgsh-test { flex-basis: 100%; margin: 0; font: 700 0.7rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #2ee6ff; }

.kgsh-shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .kgsh-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.kgsh-shelf li { display: flex; }
.kgsh-tile { position: relative; flex: 1; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.55rem 0.55rem 0.7rem; border-radius: 0.8rem; text-decoration: none; color: #efe6d0;
  background: var(--grain, none), linear-gradient(180deg, #2b3133, #1c2022); border: 1px solid rgba(240, 194, 90, 0.45); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s; min-height: 44px; }
.kgsh-tile:hover { transform: translateY(-2px); border-color: #f0c25a; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 18px rgba(240, 194, 90, 0.15); }
.kgsh-tile:focus-visible { outline: 3px solid #2ee6ff; outline-offset: 3px; }
.kgsh-art { display: block; aspect-ratio: 16 / 10; border-radius: 0.55rem; background: radial-gradient(ellipse at 50% 40%, #2a3134, #141718 75%); overflow: hidden; margin-bottom: 0.25rem; }
.kgsh-art svg { display: block; width: 100%; height: 100%; }
.kgsh-k { font: 700 0.66rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #f0c25a; }
.kgsh-t { font-family: var(--display); font-weight: 800; font-size: 1.1rem; line-height: 1.1; color: #efe6d0; }
.kgsh-line { display: none; font-size: 0.88rem; line-height: 1.35; color: #c9c1ad; }
@media (min-width: 760px) { .kgsh-line { display: block; } .kgsh-t { font-size: 1.25rem; } }
.kgsh-state { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.7rem; border-radius: 999px;
  font: 700 0.78rem/1.4 var(--mono); letter-spacing: 0.06em; color: #2a1c04; background: linear-gradient(180deg, #f6d878, #e3a72f); }
.kgsh-state svg { width: 0.95rem; height: 0.95rem; }
.kgsh-tile.is-done { border-color: rgba(46, 230, 255, 0.55); }
.kgsh-tile.is-done .kgsh-state { color: #0b2a2e; background: #2ee6ff; }
.kgsh-tile.is-soon { opacity: 0.6; border-style: dashed; pointer-events: none; }
.kgsh-tile.is-soon .kgsh-state { color: #a7a191; background: none; border: 1px dashed #5d6668; }
.kgsh-streak { display: inline-flex; align-items: center; gap: 0.25rem; font: 700 0.72rem/1.3 var(--mono); color: #ffb37a; }
.kgsh-streak:empty { display: none; }
.kgsh-streak svg { width: 0.85rem; height: 0.85rem; }

/* the full-screen game window */
.kgw { position: fixed; inset: 0; z-index: 3000; background: #121314; opacity: 0; transition: opacity 0.2s ease; }
.kgw.is-on { opacity: 1; }
.kgw[hidden] { display: none; }
.kgw-frame { display: block; width: 100%; height: 100%; border: 0; background: #121314; }
.kgw-load { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.kgw.is-loading .kgw-load { opacity: 1; }
.kgw.is-loading .kgw-frame { opacity: 0; }
.kgw-load svg { width: 3.4rem; height: auto; color: #f0c25a; fill: #f0c25a; animation: kgw-pulse 1s ease-in-out infinite alternate; }
@keyframes kgw-pulse { from { opacity: 0.35; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
html.kgw-open, html.kgw-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .kgw { transition: none; } .kgw-load svg, .kgsh-stamp.kgsh-slam span { animation: none; } .kgsh-tile { transition: none; } }
.calm .kgw-load svg, .calm .kgsh-stamp.kgsh-slam span { animation: none; }

/* the key into the lock (Scott, 2026-10-23): the keyhole at the tap, the key slides in, the game opens out of the keyhole */
.kgk { position: fixed; z-index: 3100; left: 50%; top: 50%; width: 64px; height: 78px; margin: -39px 0 0 -32px; pointer-events: none; opacity: 0; }
.kgk.is-go { animation: kgk-in 520ms cubic-bezier(.2, .8, .2, 1) forwards; }
.kgk.is-out { animation: kgk-out 220ms ease forwards; }
.kgk-mark { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 18px var(--kgk-c, #f0c25a)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)); }
.kgk-keyclip { position: absolute; left: 41%; top: -46px; width: 18%; height: 88px; overflow: hidden; }
.kgk-key { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; transform: translateY(-100%); }
.kgk.is-go .kgk-key { animation: kgk-key 300ms cubic-bezier(.5, 0, .75, 0) 90ms forwards; }
@keyframes kgk-in { 0% { opacity: 0; transform: scale(0.6); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(1.06); } }
@keyframes kgk-out { from { opacity: 1; transform: scale(1.06); } to { opacity: 0; transform: scale(1.6); } }
@keyframes kgk-key { from { transform: translateY(-100%); } to { transform: translateY(8%); } }
.kgw.kgw-key { opacity: 1; clip-path: circle(0 at var(--kgw-x, 50%) var(--kgw-y, 50%)); transition: clip-path 300ms cubic-bezier(.6, 0, .3, 1);
  background: radial-gradient(circle at var(--kgw-x, 50%) var(--kgw-y, 50%), var(--kgw-c, #f0c25a) 0, rgba(18, 19, 20, 0.96) 22%, #121314 45%); }
.kgw.kgw-key.is-on { clip-path: circle(var(--kgw-r, 150vmax) at var(--kgw-x, 50%) var(--kgw-y, 50%)); }
.kgw.kgw-key.is-closing { transition: clip-path 230ms cubic-bezier(.5, 0, .9, .4); clip-path: circle(0 at var(--kgw-x, 50%) var(--kgw-y, 50%)); }
.kgw.kgw-key .kgw-load svg { color: var(--kgw-c, #f0c25a); fill: var(--kgw-c, #f0c25a); }
@media (prefers-reduced-motion: reduce) { .kgk { display: none; } .kgw.kgw-key { clip-path: none; transition: opacity 0.2s; } }
.calm .kgk { display: none; }

/* The Locksmith's Dailies posters on the shelf (2026-10-24): 4:5 paintings; badge, type and title in code, Keyhole Stencil */
.kgsh-poster { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 0.55rem; overflow: hidden; background: #141718; margin-bottom: 0.3rem; }
.kgsh-poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.kgsh-tile:hover .kgsh-poster img { transform: scale(1.03); }
.kgsh-badge { position: absolute; left: 0.45rem; top: 0.45rem; padding: 0.18rem 0.5rem; border-radius: 999px; border: 1px solid rgba(240, 194, 90, 0.8);
  background: rgba(14, 15, 16, 0.78); color: #f0c25a; font: 800 0.56rem/1.2 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.kgsh-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 0.15rem; padding: 2.2rem 0.6rem 0.6rem;
  background: linear-gradient(180deg, transparent, rgba(10, 11, 12, 0.82) 45%, rgba(10, 11, 12, 0.94)); }
.kgsh-cap .kgsh-k { color: #f0c25a; font-size: 0.6rem; }
.kgsh-cap .kgsh-t { font-family: var(--display); font-weight: 900; font-size: 1.15rem; line-height: 0.95; text-transform: uppercase; color: #f6efdc; }
@media (min-width: 760px) { .kgsh-badge { font-size: 0.66rem; } .kgsh-cap { padding: 3rem 0.85rem 0.8rem; } .kgsh-cap .kgsh-k { font-size: 0.68rem; } .kgsh-cap .kgsh-t { font-size: 1.55rem; } }
@media (prefers-reduced-motion: reduce) { .kgsh-poster img { transition: none; } .kgsh-tile:hover .kgsh-poster img { transform: none; } }

/* Collectable progress (site review item 13, 2026-10-24): a key per daily on the ring, a CRACKED stamp on each finished poster */
.kgsh-dots li { width: 0.9rem; height: 1.6rem; border: 0; border-radius: 0; background: rgba(240, 194, 90, 0.25);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 140'%3E%3Cpath d='M15 30V132H29V124H37V117H29V110H40V102H29V30Z'/%3E%3Ccircle cx='22' cy='20' r='17'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 140'%3E%3Cpath d='M15 30V132H29V124H37V117H29V110H40V102H29V30Z'/%3E%3Ccircle cx='22' cy='20' r='17'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s cubic-bezier(.2, 1.5, .4, 1), background 0.3s; }
.kgsh-dots li.on { background: #f0c25a; transform: translateY(2px) rotate(-8deg); }
.kgsh-bar.is-full .kgsh-dots li.on { background: #2ee6ff; }
.kgsh-tile.is-done .kgsh-poster::after { content: 'Cracked'; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-12deg); padding: 0.2rem 0.7rem;
  border: 3px double #2ee6ff; border-radius: 0.35rem; color: #2ee6ff; background: rgba(10, 11, 12, 0.55); font: 900 1.25rem/1.1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.kgsh-tile:hover .kgsh-poster { animation: kgsh-rattle 0.4s; }
@keyframes kgsh-rattle { 25% { transform: rotate(-1deg); } 75% { transform: rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { .kgsh-tile:hover .kgsh-poster { animation: none; } .kgsh-dots li { transition: none; } }
.calm .kgsh-tile:hover .kgsh-poster { animation: none; }