/* The code wheel (assets/wheel-view.js), to the Cylinder standard, 2026-10-24.
   Scott, 2026-10-24: "lets make the winder bigger, can we make it look cooler? even like the gold of the cylinder game?"
   Phone: the clue, the coded word, the big wheel, the tumblers and the foot in one column, no scroll at 375 by 667.
   Desktop: the game window widens for the wheel; the wheel fills the left, the clue, word and tumblers sit on the right. */

.kw-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the card ---------- */
.cipher.kw { display: flex; flex-direction: column; gap: 0.55rem; }
.cipher.kw .kw-lbl { margin: 0 0 0.2rem; font: 700 0.66rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #8a6a22; }
.cipher.kw .kw-clue { position: relative; padding: 0.45rem 0.7rem 0.5rem; border-radius: 0.6rem; color: #1c140a;
  background: linear-gradient(180deg, #f7e2a4 0%, #e3b75a 45%, #c8923a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -2px 0 rgba(90, 58, 12, 0.45), 0 3px 10px rgba(0, 0, 0, 0.45); }
.cipher.kw .kw-clue::before, .cipher.kw .kw-clue::after { content: ''; position: absolute; top: 50%; width: 0.4rem; height: 0.4rem; margin-top: -0.2rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff4cc, #8a5c18 70%); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }
.cipher.kw .kw-clue::before { left: 0.3rem; } .cipher.kw .kw-clue::after { right: 0.3rem; }
.cipher.kw .kw-clue-k { margin: 0 0 0.12rem 0.35rem; font: 700 0.62rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #6a4410; }
.cipher.kw .kw-clue-t { margin: 0 0.35rem; font-size: 0.92rem; line-height: 1.28; font-weight: 700; }
.cipher.kw .kw-hint { margin: 0.3rem 0.35rem 0; padding-top: 0.3rem; border-top: 1px solid rgba(90, 58, 12, 0.35); font-size: 0.82rem; line-height: 1.3; color: #5a1d10; }
.cipher.kw .kw-hint[hidden] { display: none; }

/* the coded word on brass tiles, and the tumblers under it, column for column */
.cipher.kw .kw-coded, .cipher.kw .kw-tstrip { display: flex; justify-content: center; gap: 0.25rem; }
.cipher.kw .kw-coded { list-style: none; margin: 0; padding: 0; }
.cipher.kw .kw-coded li { flex: 0 1 2.6rem; min-width: 0; height: 2.2rem; display: grid; place-items: center; border-radius: 0.35rem; cursor: pointer;
  font: 900 1.4rem/1 var(--display); color: #1c140a; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.45);
  background: linear-gradient(180deg, #fff1c0 0%, #e9b850 32%, #b8862e 72%, #7a5212 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 2px 5px rgba(0, 0, 0, 0.5); transition: box-shadow 160ms, transform 160ms; }
.cipher.kw .kw-coded li.on { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 0 0 2px #f8d06a, 0 0 14px rgba(248, 208, 106, 0.55); }

/* the wheel */
.cipher.kw .kw-wheel { position: relative; width: min(100%, 26rem); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab; }
.cipher.kw .kw-wheel:active { cursor: grabbing; }
.cipher.kw .kw-wheel:focus-visible { outline: 3px solid #f0c25a; outline-offset: 2px; }
.kw-box { position: absolute; inset: 0; }
/* the solve: light floods out past the wheel (the 3D light stays inside its canvas; this halo carries it out) */
.cipher.kw .kw-wheel::after { content: ''; position: absolute; left: 50%; top: 50%; width: min(150%, 150vmin); aspect-ratio: 1; transform: translate(-50%, -50%) scale(0.4);
  border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity 900ms ease, transform 1200ms cubic-bezier(.2, .8, .3, 1);
  background: radial-gradient(circle, rgba(220, 255, 255, 0.75) 0%, rgba(170, 250, 255, 0.35) 22%, rgba(170, 250, 255, 0.12) 45%, rgba(170, 250, 255, 0) 70%); }
.cipher.kw .kw-wheel.kw-lit::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cipher.kw.spooky .kw-wheel::after { background: radial-gradient(circle, rgba(255, 230, 190, 0.75) 0%, rgba(255, 170, 60, 0.35) 22%, rgba(255, 140, 40, 0.12) 45%, rgba(255, 140, 40, 0) 70%); }
[data-calm=on] .cipher.kw .kw-wheel.kw-lit::after, .dw-calm .cipher.kw .kw-wheel.kw-lit::after { opacity: 0.45; transform: translate(-50%, -50%) scale(0.8); }
@media (prefers-reduced-motion: reduce) { .cipher.kw .kw-wheel::after { transition: opacity 400ms ease; transform: translate(-50%, -50%) scale(0.8); } }
.kw-box canvas { position: absolute; left: 0; top: 0; display: block; }

/* the tumblers: a canvas of brass drums under a row of real buttons (touch, keys, screen readers) */
.cipher.kw .kw-answer { position: relative; }
.cipher.kw .kw-tumblers { position: relative; height: 3.75rem; }
.kw-tcanvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.cipher.kw .kw-tstrip { position: absolute; inset: 0; }
.cipher.kw .kw-tum { flex: 0 1 2.6rem; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0.35rem; background: transparent; color: transparent;
  cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.cipher.kw .kw-tum:focus { outline: none; }
.cipher.kw .kw-tum:focus-visible { outline: 3px solid #f0c25a; outline-offset: 1px; }
.cipher.kw .kw-status { position: absolute; right: 0; top: -0.2rem; z-index: 2; margin: 0; padding: 0.2rem 0.5rem; border-radius: 999px; background: rgba(18, 21, 22, 0.88);
  font: 700 0.66rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #ffb3aa; transform: translateY(-100%); pointer-events: none; }
.cipher.kw .kw-status:empty { display: none; }
.cipher.kw .kw-drawer { display: flex; gap: 0.4rem; margin-top: 0.35rem; }
.cipher.kw .kw-drawer[hidden] { display: none; }
.cipher.kw .kw-drawer input { flex: 1; min-width: 0; min-height: 2.75rem; padding: 0 0.7rem; border-radius: 0.5rem; border: 1px solid #8a6a22; background: #121516; color: #fff3c4;
  font: 700 1.1rem/1 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; }
.cipher.kw .kw-drawer input:focus { outline: 2px solid #f0c25a; outline-offset: 1px; }
.cipher.kw .kw-done { min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 1px solid #f0c25a; background: rgba(240, 194, 90, 0.14); color: #f0c25a; font: 700 0.85rem/1 var(--body); cursor: pointer; }

/* the foot: clock, tries, sound, Type, Hint */
.cipher.kw .cipher-foot { display: flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0; border: 0; }
.cipher.kw .cipher-foot .clock { font: 700 1.2rem/1 var(--mono); color: #f0c25a; min-width: 3.4rem; }
.cipher.kw .cipher-foot .clock small { margin-left: 0.2rem; font-size: 0.7rem; color: #ffb3aa; }
.cipher.kw .kw-tries { display: inline-flex; gap: 0.3rem; margin-right: auto; }
.cipher.kw .kw-tries i { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 2px solid #8a6a22; background: transparent; }
.cipher.kw .kw-tries i.on { border-color: #f0c25a; background: radial-gradient(circle at 35% 35%, #fff4cc, #e3a72f 60%, #8a5c18); }
.cipher.kw .kw-type, .cipher.kw .hint-btn, .cipher.kw .snd-btn { min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.85rem; border-radius: 999px; border: 1px solid #4b5254;
  background: rgba(18, 21, 22, 0.8); color: #ece4d2; font: 700 0.8rem/1 var(--body); cursor: pointer; }
.cipher.kw .snd-btn { padding: 0; display: grid; place-items: center; }
.cipher.kw .snd-btn svg { width: 1.2rem; height: 1.2rem; }
.cipher.kw .kw-type[aria-expanded="true"] { border-color: #f0c25a; color: #f0c25a; }
.cipher.kw .kw-type:disabled, .cipher.kw .hint-btn:disabled { opacity: 0.45; cursor: default; }

/* ---------- in the game window (assets/daily-window.js) ---------- */
.dw-play .cipher-solo .cipher.kw { flex: 1; min-height: 0; gap: 0.5rem; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; color: #ece4d2;
  animation: none !important; transform: none !important; }
.dw-play .cipher.kw::before, .dw-play .cipher.kw::after { display: none; }
.dw-play .cipher.kw > .keeper { display: none; }   /* the window's how-to line says it */
.dw-play .cipher.kw .kw-lbl { color: #b7a77f; }
.dw-play .cipher.kw .kw-wheel { flex: 1 1 0; min-height: 9rem; width: 100%; aspect-ratio: auto; border-radius: 0; }
.dw-play .cipher.kw .bats { display: none; }
@media (max-height: 700px) and (max-width: 899px) {
  .dw-play .cipher.kw { gap: 0.4rem; }
  .dw-play .cipher.kw .kw-lbl { display: none; }
  .cipher.kw .kw-clue-t { font-size: 0.86rem; }
  .cipher.kw .kw-coded li { height: 2rem; font-size: 1.25rem; }
  .cipher.kw .kw-tumblers { height: 3.5rem; }
}

/* desktop: a wider window, the wheel on the left */
@media (min-width: 900px) and (min-height: 640px) {
  html.kw-on .dw-screen { width: min(66rem, calc(100vw - 3rem)); }
}
@media (min-width: 900px), (orientation: landscape) and (max-height: 520px) {
  .dw-play .cipher.kw { display: grid; column-gap: 1.4rem; row-gap: 0.7rem; align-content: start;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem); grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas: "wheel clue" "wheel coded" "wheel answer" "wheel ." "wheel foot"; }
  .dw-play .cipher.kw .kw-clue { grid-area: clue; }
  .dw-play .cipher.kw .kw-coded-wrap { grid-area: coded; }
  .dw-play .cipher.kw .kw-wheel { grid-area: wheel; min-height: 0; height: 100%; }
  .dw-play .cipher.kw .kw-answer { grid-area: answer; }
  .dw-play .cipher.kw .cipher-foot { grid-area: foot; flex-wrap: wrap; }
  .dw-play .cipher.kw .kw-clue-t { font-size: 1.02rem; }
  .dw-play .cipher.kw .kw-tumblers { height: 4.2rem; }
  .dw-play .cipher.kw .kw-coded li { height: 2.5rem; font-size: 1.55rem; }
  .dw-play .cipher.kw .kw-coded li, .dw-play .cipher.kw .kw-tum { flex-basis: 2.85rem; }
}

/* ---------- the haunted wheel (31 October) ---------- */
.cipher.kw.spooky .kw-clue { color: #f2e6cf; background: linear-gradient(180deg, #4a3a5a 0%, #2a1f33 100%); box-shadow: inset 0 1px 0 rgba(255, 179, 71, 0.35), 0 0 0 1px #6d5786, 0 3px 10px rgba(0, 0, 0, 0.5); }
.cipher.kw.spooky .kw-clue-k { color: #ffb347; }
.cipher.kw.spooky .kw-hint { color: #ffb347; border-top-color: rgba(255, 179, 71, 0.3); }
.cipher.kw.spooky .kw-coded li { color: #140904; background: linear-gradient(180deg, #e0a860 0%, #b07a3a 40%, #6a4420 100%); }
.cipher.kw.spooky .kw-tries i.on { background: radial-gradient(circle at 35% 35%, #ffd9a0, #f07f1a 60%, #7a3606); border-color: #f07f1a; }
.cipher.kw.spooky .cipher-foot .clock { color: #ffb347; }

@media (prefers-reduced-motion: reduce) { .cipher.kw .kw-coded li { transition: none; } }