/* game.css - The Clockwork Automaton. Arvolve tokens from arvolve.css, plus brass for the machine. */
.cw {
  --brass: #C9A256; --brass-hi: #E9CF8E; --brass-lo: #6E4F1C;
  --plate: #15130f; --line: rgba(201, 162, 86, .22);
  position: relative; color: var(--text, #F5F5F5); font-family: var(--font, "Sora", system-ui, sans-serif);
}
.cw button { font: inherit; color: inherit; }

/* top bar: plate, lamps, spring, faults */
.cw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 14px 18px; margin-bottom: 16px;
  background: linear-gradient(180deg, #1b1915, #121110); border: 1px solid var(--line); border-radius: 12px; }
.cw-label { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #C0BDBA; }
.cw-plate { padding: 6px 14px; border-radius: 6px; background: linear-gradient(180deg, #e3c786, #b08a40); color: #1c150a; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 #000; }
.cw-plate .cw-label { color: #4a3512; }
.cw-serial { font-size: 22px; font-weight: 600; letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.cw-lamps { display: flex; gap: 16px; }
.cw-lamp { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cw-bulb { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a3630, #141210); border: 2px solid #6E4F1C; }
.cw-lamp.on .cw-bulb { background: radial-gradient(circle at 40% 35%, #fff, #8fc8ff 35%, #3195F0 70%); box-shadow: 0 0 14px rgba(49,149,240,.75); border-color: #C9A256; }
.cw-lamp .cw-label { font-weight: 600; }
.cw-lamp.on .cw-label { color: #F5F5F5; }
.cw-spring { display: flex; align-items: center; gap: 10px; }
.cw-spring-ring { width: 42px; height: 42px; }
.cw-time { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cw-late .cw-time { color: #E9CF8E; animation: cw-pulse 1s infinite; }
.cw-faults { display: flex; align-items: center; gap: 7px; }
.cw-faults .cw-label { margin-right: 4px; }
.cw-fault { width: 14px; height: 14px; border-radius: 50%; background: #1a1714; border: 2px solid #6E4F1C; }
.cw-fault.on { background: radial-gradient(circle at 40% 35%, #f6d9b0, #b86a3e 60%, #5e2e16); border-color: #E9CF8E; box-shadow: 0 0 10px rgba(184,106,62,.7); }
.cw-tools { margin-left: auto; display: flex; gap: 8px; }
.cw-small { background: transparent; border: 1px solid #494849; border-radius: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; color: #C0BDBA; }
.cw-small:hover { border-color: #3195F0; color: #F5F5F5; }

/* the bench of modules */
.cw-bench { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); transition: filter .4s, opacity .4s; }
.cw-bench.cw-n1 { grid-template-columns: minmax(0, 520px); justify-content: center; }
.cw-bench.cw-n3 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.cw-bench.cw-n3 .cw-mod-face, .cw-bench.cw-n5 .cw-mod-face { grid-row: span 2; }
.cw-bench.cw-dim { filter: blur(5px) brightness(.55); pointer-events: none; }
.cw-card { display: flex; flex-direction: column; position: relative; background: linear-gradient(180deg, #1a1814, #100f0d); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 16px; min-width: 0; }
.cw-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.cw-card header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cw-card h3 { margin: 0; font-size: 15px; font-weight: 500; flex: 1; }
.cw-num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #1c150a; background: linear-gradient(180deg, #e3c786, #a07c34); }
.cw-solved { width: 14px; height: 14px; border-radius: 50%; background: #1a1714; border: 2px solid #494849; }
.cw-solved.on { background: radial-gradient(circle at 40% 35%, #fff, #3195F0 60%); border-color: #3195F0; box-shadow: 0 0 12px rgba(49,149,240,.8); }
.cw-card.solved { border-color: rgba(49,149,240,.55); }
.cw-shake { animation: cw-shake .4s; }
.cw-hint { margin: 10px 0 0; font-size: 12px; color: #8e8b88; text-align: center; }
.cw-progress { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 12px; color: #C0BDBA; }
.cw-dot { width: 9px; height: 9px; border-radius: 50%; background: #2a2622; border: 1px solid #6E4F1C; }
.cw-dot.now { border-color: #E9CF8E; }
.cw-dot.on { background: #3195F0; border-color: #3195F0; }
.cw-progress-t { margin-left: 6px; }

/* face */
.cw-head { width: 100%; max-width: 360px; display: block; margin: 0 auto; }
.cw-head .cw-headg { transform-origin: 150px 320px; transition: transform 1.2s ease; }
.cw-head .cw-jaw { transition: transform .35s ease; }
.cw-head path, .cw-head .cw-furrow { transition: d .35s ease, opacity .3s; }
.cw-ear { transform-box: fill-box; transform-origin: center; }
.cw-head.live .cw-ear.cw { animation: cw-spin 9s linear infinite; }
.cw-head.live .cw-ear.ccw { animation: cw-spin 9s linear infinite reverse; }
.cw-won .cw-headg { transform: rotate(0deg) translateY(10px) scale(.98); }
.cw-won .cw-iris { filter: brightness(1.5); }
.cw-lost .cw-iris, .cw-lost .cw-glowc { opacity: .12; transition: opacity 1.5s; }
.cw-lost .cw-headg { transform: rotate(-6deg); }
.cw-keys { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.cw-key { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.cw-key-bow { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #F2DDA0, #C9A256 50%, #6E4F1C); box-shadow: inset 0 0 0 7px rgba(0,0,0,0), 0 2px 0 #000; position: relative; }
.cw-key-bow::after { content: ""; position: absolute; left: 50%; top: 100%; width: 6px; height: 14px; margin-left: -3px; background: linear-gradient(90deg, #6E4F1C, #E9CF8E, #6E4F1C); }
.cw-key-num { margin-top: 16px; font-size: 14px; font-weight: 600; letter-spacing: .06em; }
.cw-key:hover .cw-key-bow, .cw-key:focus-visible .cw-key-bow { box-shadow: 0 0 0 2px #3195F0, 0 2px 0 #000; }
.cw-key:active .cw-key-bow { transform: rotate(40deg); }

/* gears */
.cw-gears { width: 100%; height: auto; display: block; }
.cw-gear { cursor: pointer; outline: none; }
.cw-gear:hover path, .cw-gear:focus-visible path { filter: brightness(1.25); }
.cw-gear:focus-visible > g > path { stroke: #3195F0; stroke-width: 2.5; }
.cw-pin { opacity: 0; transition: opacity .3s; pointer-events: none; }
.cw-gear.pinned .cw-pin { opacity: 1; }

/* masks */
.cw-masks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cw-mask { position: relative; background: radial-gradient(circle at 50% 40%, #222019, #0f0e0c); border: 1px solid var(--line); border-radius: 10px; padding: 8px 4px 20px; cursor: pointer; }
.cw-mask svg { width: 100%; height: auto; display: block; }
.cw-mask-n { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 11px; color: #C0BDBA; }
.cw-mask:hover, .cw-mask:focus-visible { border-color: #3195F0; }
.cw-mask.wrong { opacity: .45; }
.cw-mask.chosen { border-color: #3195F0; box-shadow: 0 0 16px rgba(49,149,240,.45); }

/* chimes */
.cw-bells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cw-bell { background: none; border: 1px solid transparent; border-radius: 10px; padding: 4px; cursor: pointer; }
.cw-bell svg { width: 100%; height: auto; display: block; overflow: visible; }
.cw-bell:hover, .cw-bell:focus-visible { border-color: #3195F0; }
.cw-bell-glow { opacity: 0; }
.cw-bell.ring svg { animation: cw-swing .9s ease; transform-origin: 50% 0; }
.cw-bell.ring .cw-bell-glow { animation: cw-flash .9s ease; }

/* hallmarks */
.cw-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cw-tile { aspect-ratio: 1; padding: 12%; border-radius: 10px; cursor: pointer;
  background: radial-gradient(circle at 40% 30%, #1f3a5c, #0d1a2a 75%); border: 3px solid #8a6a2e; box-shadow: inset 0 0 12px rgba(0,0,0,.6); }
.cw-tile svg { width: 100%; height: 100%; display: block; }
.cw-tile:hover, .cw-tile:focus-visible { border-color: #E9CF8E; }
.cw-tile.on { border-color: #3195F0; box-shadow: 0 0 14px rgba(49,149,240,.6), inset 0 0 12px rgba(0,0,0,.6); }

/* start and end panels */
.cw-overlay { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: center; padding: 0 12px 40px; z-index: 5; }
.cw-overlay[hidden] { display: none; }
.cw-panel { max-width: 620px; width: 100%; background: rgba(12, 12, 14, .94); border: 1px solid #494849; border-radius: 14px; padding: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.cw-panel h2 { margin: 0 0 14px; font-size: 26px; font-weight: 600; line-height: 1.2; }
.cw-kicker { margin: 0 0 8px; color: #3195F0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.cw-lede { color: #C0BDBA; font-size: 17px; }
.cw-steps { margin: 0 0 18px; padding-left: 20px; color: #C0BDBA; }
.cw-steps li { margin: 6px 0; }
.cw-steps a, .cw-after a { color: #3195F0; }
.cw-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 18px; }
.cw-mode { text-align: left; padding: 10px 12px; background: rgba(73,72,73,.18); border: 1px solid #494849; border-radius: 8px; cursor: pointer; }
.cw-mode strong { display: block; font-weight: 500; }
.cw-mode span { font-size: 12px; color: #C0BDBA; }
.cw-mode.on { border-color: #3195F0; background: rgba(49,149,240,.12); }
.cw-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cw-note { color: #C0BDBA; font-size: 13px; margin: 16px 0 0; }
.cw-link { background: none; border: 0; padding: 0; color: #3195F0; cursor: pointer; text-decoration: underline; font-size: 13px; }
.cw-after { color: #C0BDBA; margin: 0 0 16px; }

@keyframes cw-spin { to { transform: rotate(360deg); } }
@keyframes cw-pulse { 50% { opacity: .55; } }
@keyframes cw-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes cw-swing { 20% { transform: rotate(8deg); } 50% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }
@keyframes cw-flash { 15% { opacity: .9; } 100% { opacity: 0; } }

@media (max-width: 900px) {
  .cw-bench, .cw-bench.cw-n3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cw-bench .cw-mod-face { grid-column: 1 / -1; grid-row: auto !important; }
}
@media (max-width: 700px) {
  .cw-overlay { position: static; padding: 0 0 16px; top: auto !important; }
  .cw-bench.cw-dim { display: none; }
}
@media (max-width: 600px) {
  .cw-bench, .cw-bench.cw-n3 { grid-template-columns: minmax(0, 1fr); }
  .cw-bar { gap: 10px 16px; padding: 10px 12px; }
  .cw-tools { margin-left: 0; }
  .cw-modes { grid-template-columns: 1fr; }
  .cw-panel { padding: 20px; }
}