/* THE CIPHER // THE DAILY CRYPTOGRAM (static/js/games/cipher.js). THE GRID's stage round a cipher machine: the
   tape of tiles (the code letter small in amber, yours big in holo), a lamp board whose lamps glow when a letter is in
   use, and the frequency strip. No loops. */
.cp-root { --ac: var(--holo, #4fe3ff); --aa: var(--amber, #ffb020); }
.cp-tape { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; width: 100%; max-width: 720px; padding: 14px 10px;
  background: linear-gradient(180deg, #0b1220, #070b14); border: 1px solid rgba(79, 227, 255, .4); box-shadow: inset 0 0 30px rgba(0, 0, 0, .6); }
.cp-word { display: inline-flex; gap: 3px; }
.cp-t, .cp-p { width: 30px; display: inline-flex; flex-direction: column; align-items: center; }
.cp-p { justify-content: flex-end; color: #cfe8f5; font: 700 20px var(--mono); padding-bottom: 4px; width: 12px; }
.cp-t { margin: 0; padding: 2px 0 4px; border: 0; border-bottom: 2px solid rgba(79, 227, 255, .45); background: transparent; cursor: pointer; }
.cp-t small { font: 700 11px var(--mono); color: var(--aa); letter-spacing: .05em; }
.cp-t b { font: 700 22px var(--mono); color: #e8f6ff; min-height: 28px; line-height: 28px; text-shadow: 0 0 8px rgba(79, 227, 255, .35); }
.cp-t.sel { background: rgba(255, 176, 32, .18); border-bottom-color: var(--aa); }
.cp-t.lock b { color: #7dffb0; }
.cp-t.bad b { color: var(--alert, #ff5a4a); }
.cp-t.done { cursor: default; }
.cp-lamps { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 14px; background: #05080f; border: 1px solid rgba(255, 176, 32, .35); border-radius: 10px; }
.cp-lamps > div { display: flex; gap: 6px; }
.cp-l { width: 34px; height: 34px; border-radius: 50% !important; margin: 0; padding: 0; border: 2px solid #2a3442; background: radial-gradient(circle at 40% 35%, #1b2433, #0a0f18);
  color: #8aa0b4; font: 700 14px var(--mono) !important; cursor: pointer; }
.cp-l.lit { color: #1a0d00; background: radial-gradient(circle at 40% 35%, #fff2c4, #ffb020 60%, #b06a00); border-color: #ffcf6a; box-shadow: 0 0 10px rgba(255, 176, 32, .6); }
.cp-l.mine { outline: 2px solid var(--ac); outline-offset: 2px; }
.cp-l.wide { width: 120px; border-radius: 18px; font-size: 11px !important; letter-spacing: .15em; }
@media (max-width: 520px) { .cp-l { width: min(30px, calc((100vw - 90px) / 10)); height: 30px; font-size: 12px !important; } .cp-lamps > div { gap: 4px; } .cp-lamps { padding: 10px 6px; } .cp-t { width: 24px; } .cp-t b { font-size: 18px; } }
.cp-freq { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: 100%; max-width: 720px; }
.cp-f { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 24px; height: 76px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.cp-f i { display: block; width: 12px; background: linear-gradient(0deg, rgba(255, 176, 32, .4), var(--aa)); border-radius: 2px 2px 0 0; }
.cp-f b { font: 700 11px var(--mono); color: var(--aa); }
.cp-f small { font: 700 11px var(--mono); color: #cfe8f5; }
.cp-f.sel b { color: #fff; text-shadow: 0 0 6px var(--aa); }
.cp-said { max-width: 640px; text-align: center; padding: 10px 14px; border-left: 3px solid var(--aa); background: rgba(255, 176, 32, .06); }
.cp-said q { display: block; font: 600 18px/1.45 Georgia, serif; color: #f4f0e6; }
.cp-said cite { display: block; margin-top: 6px; font: 600 11px var(--mono); letter-spacing: .12em; color: var(--aa); font-style: normal; }