/* CHAIN REACTION 2: hardware group (BOLTS, PLUGS, GAUGE, BIG BUTTON, PASSWORD) */

/* shared: manual chips */
.c2hw-chip { display: inline-block; width: 18px; height: 18px; border-radius: 4px; vertical-align: -3px; margin-right: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.25); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.c2hw-col { white-space: nowrap; }
.c2hw-table td.act { white-space: nowrap; }

/* ---------- BOLTS ---------- */
.c2bo-mod { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; }
.c2bo-bay { position: absolute; left: 44px; top: 44px; width: 312px; height: 312px; display: grid; place-items: center; }
.c2bo-baylabel { position: absolute; bottom: 64px; font: 800 13px var(--mono); letter-spacing: 3px; color: #6b7178; }
.c2bo-clip { position: absolute; top: 138px; width: 22px; height: 36px; border-radius: 3px; background: linear-gradient(90deg, #8d6a1c, #e6c35d 45%, #9a7420); box-shadow: 0 2px 3px rgba(0,0,0,.7); }
.c2bo-clip.l { left: 70px; } .c2bo-clip.r { right: 70px; }
.c2bo-fuse { position: relative; display: flex; align-items: center; z-index: 1; }
.c2bo-endcap { display: block; width: 26px; height: 46px; border-radius: 4px; background: linear-gradient(180deg, #f2e2a6, #c9a136 45%, #7d5f15); box-shadow: 0 2px 4px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.6); }
.c2bo-glass { position: relative; width: 132px; height: 38px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(160,175,190,.12) 40%, rgba(255,255,255,.08) 70%, rgba(0,0,0,.2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.c2bo-glass b { display: block; width: 120px; height: 3px; border-radius: 2px; background: #6b6f73; }
.c2bo-bay.lit .c2bo-glass { background: linear-gradient(180deg, rgba(200,255,215,.45), rgba(34,197,94,.35) 45%, rgba(10,80,40,.35)); box-shadow: 0 0 18px rgba(34,197,94,.55), inset 0 0 0 1px rgba(200,255,215,.5); }
.c2bo-bay.lit .c2bo-glass b { background: #c9ffd9; box-shadow: 0 0 8px #22c55e, 0 0 3px #fff; }
.c2bo-hatch { position: absolute; left: 24px; top: 24px; width: 352px; height: 352px; border-radius: 12px; z-index: 2;
  background: var(--grain), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 5px), linear-gradient(165deg, #7c838a 0%, #5d646b 45%, #464c52 100%);
  box-shadow: 0 6px 12px rgba(0,0,0,.55), inset 0 1.5px 0 rgba(255,255,255,.35), inset 0 -3px 5px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.35);
  transition: transform 500ms cubic-bezier(.35,.1,.25,1), filter 500ms; }
/* open = slid left into the frame with a lip showing; click it to shut (it used to swing out over the next module) */
.c2bo-hatch.open { transform: translateX(calc(-100% + 12px)); filter: brightness(.75); cursor: pointer; }
.c2bo-hatch.unlocked { cursor: pointer; }
.slot.solved .c2bo-hatch.unlocked { pointer-events: auto; } /* a solved module ignores clicks, but the hatch still opens and shuts */
.c2bo-hatch::after { content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 96px; margin-top: -48px; border-radius: 3px;
  background: repeating-linear-gradient(180deg, #2a2e33 0 3px, #9aa1a8 3px 7px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.c2bo-hinge { position: absolute; left: -6px; top: 96px; width: 10px; height: 160px; border-radius: 4px;
  background: repeating-linear-gradient(180deg, #a3aab1 0 30px, #2a2e33 30px 33px), linear-gradient(90deg, #6b7178, #c9ced3, #6b7178); background-blend-mode: multiply; box-shadow: 0 2px 3px rgba(0,0,0,.6); }
.c2bo-stencil { position: absolute; left: 0; right: 0; top: 156px; text-align: center; font: 900 30px var(--sans); letter-spacing: 10px; color: rgba(20,22,25,.45); text-shadow: 0 1px 0 rgba(255,255,255,.18); }
.c2bo-hole, .c2bo-bolt { position: absolute; width: 74px; height: 74px; }
.c2bo-c0 { left: 12px; top: 12px; } .c2bo-c1 { right: 12px; top: 12px; } .c2bo-c2 { left: 12px; bottom: 12px; } .c2bo-c3 { right: 12px; bottom: 12px; }
.c2bo-hole { border-radius: 50%; background: radial-gradient(circle, #050607 0 12px, #2c3035 13px 15px, #0d0f11 16px 17px, rgba(0,0,0,.35) 18px 24px, transparent 25px); }
.c2bo-name { position: absolute; width: 98px; text-align: center; font: 800 14px var(--mono); letter-spacing: 2px; color: #1c1f23; text-shadow: 0 1px 0 rgba(255,255,255,.22); }
.c2bo-n0 { left: 0; top: 92px; } .c2bo-n1 { right: 0; top: 92px; } .c2bo-n2 { left: 0; bottom: 92px; } .c2bo-n3 { right: 0; bottom: 92px; }
.c2bo-bolt { border: none; padding: 0; background: none; border-radius: 50%; cursor: pointer; filter: drop-shadow(0 3px 2px rgba(0,0,0,.65)); transition: transform 70ms; }
.c2bo-bolt:active { transform: translateY(2px) scale(.98); }
.c2bo-bolt svg { width: 100%; height: 100%; display: block; }
.c2bo-head .c2bo-washer { fill: #2e3237; }
.c2bo-head .c2bo-washer-top { fill: #8d949b; stroke: #50565d; stroke-width: 1.5; }
.c2bo-head .c2bo-cap { fill: #c3c8cd; stroke: #565c63; stroke-width: 2.5; }
.c2bo-head .c2bo-face { fill: #d7dbdf; stroke: rgba(0,0,0,.18); stroke-width: 1.5; }
.c2bo-head .c2bo-recess { fill: #1d2024; stroke: #6b7178; stroke-width: 1; }
.c2bo-head .c2bo-shine { fill: rgba(255,255,255,.4); }
.c2bo-bolt.out { animation: c2bo-out 560ms cubic-bezier(.4,.1,.6,1) forwards; pointer-events: none; }
.c2bo-bolt.back { animation: c2bo-back 220ms ease-out; }
.c2bo-bolt.jam { animation: c2bo-jam 160ms linear; }
@keyframes c2bo-out {
  0% { transform: rotate(0) scale(1); filter: drop-shadow(0 3px 2px rgba(0,0,0,.65)); }
  55% { transform: rotate(-720deg) scale(1.16); filter: drop-shadow(0 12px 6px rgba(0,0,0,.5)); opacity: 1; }
  100% { transform: rotate(-760deg) translateY(60px) scale(.9); opacity: 0; visibility: hidden; } }
@keyframes c2bo-back { from { transform: rotate(540deg) scale(1.16); opacity: .2; } to { transform: rotate(0) scale(1); opacity: 1; } }
@keyframes c2bo-jam { 0% { transform: rotate(0); } 35% { transform: rotate(-14deg); } 70% { transform: rotate(5deg); } 100% { transform: rotate(0); } }
.c2bo-mcell { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.c2bo-icon { width: 34px; height: 34px; flex: none; }

/* ---------- PLUGS ---------- */
.c2pl-mod { position: absolute; inset: 0; border-radius: 10px; }
.c2pl-svg { width: 400px; height: 400px; display: block; }
.c2pl-strip { fill: #1b1e22; stroke: rgba(255,255,255,.12); stroke-width: 1; filter: drop-shadow(0 -2px 0 rgba(0,0,0,.5)); }
.c2pl-num { font: 900 26px var(--mono); fill: #e9e6dc; text-anchor: middle; }
.c2pl-jack { fill: #33383e; stroke: #5c6168; stroke-width: 2; }
.c2pl-hole { fill: #050607; stroke: #8a9198; stroke-width: 3; }
.c2pl-pin { fill: #c9a136; }
.c2pl-hit { fill: transparent; stroke: none; pointer-events: all; cursor: pointer; }
.c2pl-sock:hover .c2pl-jack { stroke: #8a9198; }
.c2pl-cable path { fill: none; stroke-linecap: round; }
.c2pl-cab-shadow { stroke: rgba(0,0,0,.45); stroke-width: 17; transform: translateY(5px); }
.c2pl-cab-core { stroke-width: 12; }
.c2pl-cab-shine { stroke: rgba(255,255,255,.32); stroke-width: 2.5; transform: translate(-3px, -1px); }
.c2pl-inner { filter: drop-shadow(0 4px 3px rgba(0,0,0,.6)); }
.c2pl-tip { fill: #d9b54a; stroke: #7d5f15; stroke-width: 1; }
.c2pl-plug.in .c2pl-tip { display: none; }
.c2pl-body { stroke: rgba(0,0,0,.5); stroke-width: 2; }
.c2pl-grip { fill: rgba(0,0,0,.3); }
.c2pl-gloss { fill: rgba(255,255,255,.38); }
.c2pl-boot { fill: #1d1f22; }
.c2pl-ring { fill: none; stroke: transparent; stroke-width: 3; }
.c2pl-plug.sel .c2pl-ring { stroke: var(--k-amber); }
.c2pl-plug.sel .c2pl-inner { filter: drop-shadow(0 12px 6px rgba(0,0,0,.5)); }
.c2pl-testbox { position: absolute; right: 18px; bottom: 22px; display: flex; align-items: center; gap: 12px; padding: 10px 14px 14px 16px; }
.c2pl-test { width: 86px; height: 52px; font-size: 18px; color: #8a9096; }
.c2pl-test.ready { color: #f0f2f4; }

/* ---------- GAUGE ---------- */
.c2ga-mod { position: absolute; inset: 0; border-radius: 10px; }
.c2ga-svg { width: 400px; height: 400px; display: block; }
.c2ga-bezel { fill: #23262a; stroke: #6b7178; stroke-width: 3; filter: drop-shadow(0 4px 4px rgba(0,0,0,.6)); }
.c2ga-face { fill: #ece7da; stroke: #0e1012; stroke-width: 3; }
.c2ga-zone { stroke: rgba(0,0,0,.4); stroke-width: 1.5; }
.c2ga-zlabel { font: 900 13px var(--sans); letter-spacing: 1px; fill: #15171a; text-anchor: middle; dominant-baseline: central; }
.c2ga-tick { stroke: #2a2e33; stroke-width: 2; }
.c2ga-tick.major { stroke-width: 4; }
.c2ga-unit { font: 800 12px var(--mono); letter-spacing: 4px; fill: #7a7e83; text-anchor: middle; }
.c2ga-needle { transform-box: view-box; transform-origin: 200px 236px; }
.c2ga-needle.rest { transition: transform 300ms cubic-bezier(.3,.7,.4,1); }
.c2ga-npath { fill: #1b1d20; stroke: #000; stroke-width: 1; }
.c2ga-nshadow { fill: rgba(0,0,0,.22); }
.c2ga-hub { fill: #3a3f45; stroke: #111; stroke-width: 2; }
.c2ga-hubcap { fill: var(--k-amber); }
.c2ga-ventbox { position: absolute; left: 92px; right: 92px; bottom: 26px; height: 78px; display: flex; align-items: center; justify-content: center; gap: 18px; }
.c2ga-vent { width: 140px; height: 54px; font-size: 22px; letter-spacing: 4px; }

/* ---------- BIG BUTTON ---------- */
.c2bb-mod { position: absolute; inset: 0; border-radius: 10px; }
.c2bb-well { position: absolute; left: 44px; top: 82px; width: 224px; height: 224px; border-radius: 50%; display: grid; place-items: center;
  background: repeating-conic-gradient(from 0deg, #2a2e33 0 4deg, #3d4248 4deg 8deg); box-shadow: inset 0 4px 12px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.15), 0 0 0 4px #1c1f22, 0 0 0 6px #6b7178; }
.c2bb-btn { position: relative; width: 180px; height: 180px; border-radius: 50%; border: none; padding: 0; cursor: pointer; touch-action: none; transform: translateY(-7px);
  background: radial-gradient(circle at 50% 38%, var(--hi) 0%, var(--c) 48%, var(--lo) 100%);
  box-shadow: 0 9px 0 var(--side), 0 14px 18px rgba(0,0,0,.65), inset 0 3px 2px rgba(255,255,255,.45), inset 0 -6px 10px rgba(0,0,0,.25);
  transition: transform 70ms, box-shadow 70ms; }
.c2bb-btn.down { transform: translateY(2px); box-shadow: 0 0 0 var(--side), 0 2px 4px rgba(0,0,0,.6), inset 0 3px 6px rgba(0,0,0,.3); }
.c2bb-btn.done { box-shadow: 0 9px 0 var(--side), 0 14px 18px rgba(0,0,0,.65), inset 0 3px 2px rgba(255,255,255,.45), 0 0 0 4px var(--k-live); }
.c2bb-cap { position: absolute; inset: 22px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.22), transparent 60%); box-shadow: inset 0 -2px 3px rgba(255,255,255,.18), inset 0 2px 4px rgba(0,0,0,.18); }
.c2bb-word { font: 900 34px var(--sans); letter-spacing: 3px; color: var(--ink2); }
.c2bb-red { --hi: #ff8a7e; --c: #d8352a; --lo: #9c2018; --side: #5e120d; --ink2: rgba(255,255,255,.92); }
.c2bb-blue { --hi: #7fb0ff; --c: #2f6fd6; --lo: #1d478e; --side: #12295a; --ink2: rgba(255,255,255,.92); }
.c2bb-yellow { --hi: #fff1a8; --c: #f2c230; --lo: #c08f10; --side: #6b4f06; --ink2: rgba(25,22,10,.82); }
.c2bb-white { --hi: #ffffff; --c: #eceae2; --lo: #bdb9ab; --side: #6e6a5d; --ink2: rgba(25,25,28,.82); }
.c2bb-stripbox { position: absolute; left: 306px; top: 90px; width: 52px; height: 208px; padding: 10px 11px; box-sizing: border-box; }
.c2bb-strip { display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px; height: 100%; }
.c2bb-strip i { display: block; border-radius: 4px; background: linear-gradient(180deg, #3a2a0c, #22180a); box-shadow: inset 0 1px 2px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08); transition: background 60ms, box-shadow 60ms; }
.c2bb-strip.on i { background: linear-gradient(180deg, #ffe6a0, #f0c14b 50%, #c98f12); box-shadow: 0 0 10px rgba(240,193,75,.75), inset 0 1px 0 rgba(255,255,255,.6); }

/* ---------- PASSWORD ---------- */
.c2pw-mod { position: absolute; inset: 0; border-radius: 10px; }
.c2pw-bank { position: absolute; left: 22px; right: 22px; top: 40px; height: 246px; display: flex; justify-content: center; gap: 9px; padding: 12px 10px; box-sizing: border-box; }
.c2pw-wheel { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.c2pw-up, .c2pw-dn { width: 58px; height: 46px; border: none; border-radius: 8px; cursor: pointer; font: 800 18px var(--sans); color: #e9ebee;
  background: linear-gradient(180deg, #4a5056, #2c3035 70%, #23262a); box-shadow: 0 4px 0 #0b0b0b, 0 5px 8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.25); transition: transform 60ms, box-shadow 60ms; }
.c2pw-up:active, .c2pw-dn:active { transform: translateY(4px); box-shadow: 0 0 0 #0b0b0b, 0 1px 3px rgba(0,0,0,.6), inset 0 2px 4px rgba(0,0,0,.4); }
.c2pw-drum { width: 58px; height: 118px; border-radius: 6px; overflow: hidden; position: relative;
  background: linear-gradient(180deg, #121314 0%, #bdb9ad 20%, #fffdf6 50%, #bdb9ad 80%, #121314 100%);
  box-shadow: inset 0 0 0 3px #15171a, inset 0 0 0 5px #5c6168, 0 1px 0 rgba(255,255,255,.15); }
.c2pw-drum::after { content: ''; position: absolute; left: 0; right: 0; top: 39px; height: 40px; border-top: 1px solid rgba(0,0,0,.25); border-bottom: 1px solid rgba(0,0,0,.25); pointer-events: none; }
.c2pw-roll { display: flex; flex-direction: column; align-items: center; }
.c2pw-roll span { height: 39px; line-height: 39px; display: block; font-family: var(--mono); font-weight: 800; }
.c2pw-cur { font-size: 36px; color: #15171a; height: 40px !important; line-height: 40px !important; }
.c2pw-ghost { font-size: 22px; color: rgba(30,30,30,.35); }
.c2pw-drum.tu .c2pw-roll { animation: c2pw-tu 90ms ease-out; }
.c2pw-drum.td .c2pw-roll { animation: c2pw-td 90ms ease-out; }
@keyframes c2pw-tu { from { transform: translateY(16px); } to { transform: none; } }
@keyframes c2pw-td { from { transform: translateY(-16px); } to { transform: none; } }
.c2pw-foot { position: absolute; left: 0; right: 0; bottom: 34px; display: flex; justify-content: center; align-items: center; gap: 18px; padding-left: 36px; }
.c2pw-submit { width: 170px; height: 54px; font-size: 20px; letter-spacing: 3px; }
.c2pw-mword { font-family: var(--mono); font-size: 22px; letter-spacing: 3px; }