/* The Cipher Lab and Break Jarvis (play/cipher-lab.html, play/break-jarvis.html). Uses the tokens from site.css,
   with a terminal green for secrets and the site's red for attacks. */
.cl-body { --cl: #35d0b4; --cl-dim: rgba(53, 208, 180, 0.16); --cl-bad: var(--signal); background: #0b0f0e; }
.cl-body [hidden] { display: none !important; }   /* grid boxes hidden until they have something to show */
.cl-label { color: var(--cl); }
.cl-hero { background: radial-gradient(ellipse at 70% 0%, rgba(53, 208, 180, 0.09), transparent 60%); }
.cl-rooms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cl-rooms a { font-family: var(--font-data); font-size: var(--step--2); text-decoration: none; color: var(--ink); border: 1px solid var(--rule); border-radius: 999px; padding: 7px 14px; }
.cl-rooms a.cl-hot { border-color: var(--cl-bad); color: #ffd2cc; box-shadow: inset 0 0 18px -10px var(--cl-bad); }
@media (hover: hover) and (pointer: fine) { .cl-rooms a:hover { border-color: var(--cl); } }
.cl-room h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); }
.cl-room .kicker { max-width: 62ch; }
.cl-room > .page, .cl-hero > .page { min-width: 0; width: 100%; }
.cl-room .page > *, .cl-hero .page > * { min-width: 0; }   /* the page is a grid: its items may shrink too */   /* chapters are flex rows: let the page shrink to the screen */

.cl-split { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 18px; }
@media (max-width: 760px) { .cl-split { grid-template-columns: 1fr; } }
.cl-wheel-box { display: grid; gap: 10px; justify-items: center; }
.cl-wheel { width: 100%; max-width: 300px; height: auto; }
.cl-ring-o { fill: #111614; stroke: var(--rule); } .cl-ring-m { fill: #0e1312; stroke: var(--cl); stroke-opacity: 0.35; } .cl-ring-i { fill: #0b0f0e; stroke: var(--rule); }
.cl-wl { font-family: var(--font-mono); font-size: 13px; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.cl-wl-c { fill: var(--cl); }
.cl-inner { transition: transform 0.45s var(--ease-out); transform-origin: 0 0; }
.cl-wc { font-family: var(--font-data); font-size: 10px; fill: var(--muted); text-anchor: middle; }
@media (prefers-reduced-motion: reduce) { .cl-inner { transition: none; } }

.cl-io { display: grid; gap: 8px; margin-top: 14px; max-width: 760px; }
.cl-field { font-family: var(--font-data); font-size: var(--step--2); color: var(--muted); display: grid; gap: 6px; margin: 6px 0 0; }
.cl-field output { color: var(--cl); font-family: var(--font-mono); }
.cl-io textarea, .cl-input { font: 400 var(--step-0)/1.5 var(--font-mono); color: var(--ink); background: #0e1312; border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; width: 100%; resize: vertical; }
.cl-io textarea:focus, .cl-input:focus { outline: 2px solid var(--cl); outline-offset: 1px; border-color: transparent; }
.cl-row { display: flex; gap: 10px; align-items: center; } .cl-row .cl-input { flex: 1; min-width: 0; }
.cl-out { font: 400 var(--step-0)/1.55 var(--font-mono); color: var(--cl); background: #0e1312; border: 1px dashed rgba(53, 208, 180, 0.35); border-radius: 6px; padding: 10px 12px; margin: 0; min-height: 2.6em; overflow-wrap: anywhere; white-space: pre-wrap; }
.cl-out mark { background: var(--cl-bad); color: #fff; border-radius: 2px; }
.cl-hex { font-size: var(--step--1); }
.cl-mystery { color: #ffd2cc; border-color: rgba(255, 74, 61, 0.4); }
.cl-found { color: var(--ink); border-style: solid; }
.cl-steps { font: 400 var(--step--1)/1.4 var(--font-mono); color: var(--muted); white-space: pre; overflow-x: auto; margin: 0; }
.cl-break { margin-top: 30px; padding: 22px; border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.015); display: grid; gap: 12px; max-width: 860px; }
.cl-break > p { color: #c8bfb1; max-width: 66ch; }
.cl-break .cta { margin: 4px 0; }
button.quiet { background: none; border: 0; color: var(--muted); font: inherit; font-family: var(--font-data); font-size: var(--step--1); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.cl-bars { width: 100%; height: auto; display: block; }
.cl-bar { fill: var(--cl); opacity: 0.8; } .cl-bar-win { fill: var(--emit); opacity: 1; }
.cl-bar-en { fill: none; stroke: #ffd2cc; stroke-width: 1.5; stroke-dasharray: 3 2; }
.cl-bl { font-family: var(--font-mono); font-size: 10px; fill: var(--muted); text-anchor: middle; } .cl-end { text-anchor: end; }
.cl-ref { stroke: #ffd2cc; stroke-dasharray: 4 3; } .cl-ref-r { stroke: var(--muted); }
.cl-legend { font-family: var(--font-data); font-size: var(--step--2); color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0; }
.cl-key { display: inline-block; width: 14px; height: 10px; } .cl-key-msg { background: var(--cl); } .cl-key-en { border: 1.5px dashed #ffd2cc; }

.cl-paint { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
@media (max-width: 640px) { .cl-paint { grid-template-columns: 1fr; } }
.cl-person { border: 1px solid var(--rule); padding: 16px; min-height: 170px; background: #0e1312; }
.cl-person h3 { font-size: var(--step-0); margin-bottom: 10px; }
.cl-eve { border-style: dashed; border-color: rgba(255, 74, 61, 0.45); }
.cl-pots { display: flex; flex-wrap: wrap; gap: 12px; }
.cl-pot { display: grid; justify-items: center; gap: 6px; font-family: var(--font-data); font-size: var(--step--2); color: var(--muted); animation: cl-in 0.5s var(--ease-out); }
.cl-swatch { width: 54px; height: 54px; border-radius: 50%; box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.cl-pot-secret .cl-swatch { outline: 2px dashed var(--ink); outline-offset: 3px; }
.cl-pot-key .cl-swatch { width: 66px; height: 66px; box-shadow: 0 0 24px rgba(255, 174, 74, 0.45), inset 0 -6px 12px rgba(0, 0, 0, 0.35); }
.cl-pot-key { color: var(--emit); }
@keyframes cl-in { from { opacity: 0; transform: scale(0.6); } }
@media (prefers-reduced-motion: reduce) { .cl-pot { animation: none; } }
.cl-say { font-size: var(--step-0); color: #c8bfb1; min-height: 3.2em; max-width: 70ch; margin: 14px 0 4px; }
.cl-keys { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: var(--step--1); }
.cl-keys dt { font-family: var(--font-data); color: var(--muted); }
.cl-keys dd { margin: 0; font-family: var(--font-mono); color: var(--cl); overflow-wrap: anywhere; }
@media (max-width: 640px) { .cl-keys { grid-template-columns: 1fr; } .cl-keys dd { margin-bottom: 8px; } }

.cl-ava { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; margin-top: 20px; align-items: start; }
@media (max-width: 760px) { .cl-ava { grid-template-columns: 1fr; } }
.cl-grid { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; aspect-ratio: 1; }
.cl-grid span { background: #17201d; border-radius: 2px; transition: background 0.35s, box-shadow 0.35s; }
.cl-grid span.on { background: #2b6b5f; }
.cl-grid span.flip { background: var(--emit); box-shadow: 0 0 8px rgba(255, 174, 74, 0.6); }
.cl-ava-side { display: grid; gap: 6px; }
.cl-big { font-family: var(--font-display); font-weight: 300; font-size: clamp(3rem, 8vw, 5rem); line-height: 1; color: var(--emit); margin: 0; font-variant-numeric: tabular-nums; }
.cl-muted { color: var(--muted); font-size: var(--step--1); margin: 0; }
.cl-notes { margin: 0; padding-left: 1.2em; color: #ffd2cc; font-size: var(--step--1); }
.cl-race { width: 100%; border-collapse: collapse; margin: 18px 0 10px; font-size: var(--step--1); }
.cl-race th { font-family: var(--font-data); font-weight: 500; color: var(--muted); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.cl-race td { padding: 12px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.cl-race td:nth-child(2) { font-family: var(--font-mono); color: var(--cl); white-space: nowrap; }
.cl-race td:nth-child(3) { font-family: var(--font-display); font-size: var(--step-0); color: var(--ink); }
@media (max-width: 640px) { .cl-race, .cl-race tbody { display: block; } .cl-race thead { display: none; } .cl-race tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 10px 0; border-bottom: 1px solid var(--rule); } .cl-race td { border: 0; padding: 2px 0; } .cl-race td:nth-child(2) { white-space: normal; } }

/* ---------- Break Jarvis ---------- */
.bj-levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 22px 0 8px; }
@media (max-width: 640px) { .bj-levels { grid-template-columns: repeat(5, minmax(44px, 1fr)); } .bj-levels small { display: none; } }
.bj-door { font: inherit; font-family: var(--font-data); color: var(--ink); background: #0e1312; border: 1px solid var(--rule); padding: 12px 8px; display: grid; gap: 4px; justify-items: center; cursor: pointer; min-height: 64px; }
.bj-door b { font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); }
.bj-door small { color: var(--muted); font-size: var(--step--2); }
.bj-door[aria-current="true"] { border-color: var(--cl); box-shadow: inset 0 0 22px -12px var(--cl); }
.bj-door.done b::after { content: " ✓"; color: var(--cl); }
.bj-door:disabled { opacity: 0.4; cursor: not-allowed; }
.bj-level h2 { margin-top: 12px; }
.bj-pipe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0 6px; }
.bj-stage { font-family: var(--font-data); font-size: var(--step--2); padding: 8px 12px; border-radius: 999px; border: 1px solid var(--rule); color: var(--muted); transition: border-color 0.3s, color 0.3s, box-shadow 0.3s; }
.bj-stage.on { border-color: var(--cl); color: var(--ink); }
.bj-stage.off { opacity: 0.35; text-decoration: line-through; }
.bj-stage.hit { border-color: var(--cl-bad); color: #fff; background: rgba(255, 74, 61, 0.18); box-shadow: 0 0 18px rgba(255, 74, 61, 0.45); }
.bj-stage.pass { border-color: var(--emit); color: var(--emit); }
.bj-arrow { color: var(--muted); font-family: var(--font-mono); }
.bj-chat { display: grid; gap: 10px; margin: 18px 0 12px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.bj-msg { max-width: 82%; padding: 10px 14px; border-radius: 12px; line-height: 1.5; font-size: var(--step--1); white-space: pre-wrap; overflow-wrap: anywhere; }
.bj-you { justify-self: end; background: #1c2522; border: 1px solid #2c3a36; }
.bj-jarvis { justify-self: start; background: #12100e; border: 1px solid var(--rule); }
.bj-block { justify-self: start; background: rgba(255, 74, 61, 0.12); border: 1px solid rgba(255, 74, 61, 0.5); color: #ffd2cc; font-family: var(--font-data); }
.bj-sys { justify-self: center; color: var(--muted); font-family: var(--font-data); font-size: var(--step--2); }
.bj-form { display: grid; gap: 8px; }
.bj-form textarea { font: 400 var(--step-0)/1.5 var(--font-body); color: var(--ink); background: #0e1312; border: 1px solid var(--rule); border-radius: 8px; padding: 12px; resize: vertical; width: 100%; }
.bj-form textarea:focus, .bj-guess input:focus { outline: 2px solid var(--cl); outline-offset: 1px; }
.bj-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.bj-count { font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted); }
.bj-guess { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); align-items: center; }
.bj-guess input { font: 500 var(--step-0)/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: #0e1312; border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; flex: 1; min-width: 160px; }
.bj-result { font-family: var(--font-data); font-size: var(--step--1); min-height: 1.4em; margin: 6px 0 0; }
.bj-result.bad { color: #ffd2cc; } .bj-result.good { color: var(--cl); }
.bj-win { margin-top: 18px; padding: 20px; border: 1px solid var(--cl); background: var(--cl-dim); display: grid; gap: 10px; animation: cl-in 0.6s var(--ease-out); }
.bj-win h3 { color: var(--cl); }
.bj-tricks { margin: 0; padding-left: 1.2em; color: #c8bfb1; display: grid; gap: 6px; }
.bj-tip { color: var(--muted); font-size: var(--step--1); }