/* CHAIN REACTION 2: classic group (COLOUR PADS, MAZE, CHESS, MAP) */

/* ---------- COLOUR PADS ---------- */
.c2s-mod { position: absolute; inset: 0; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.c2s-top { display: flex; align-items: center; gap: 14px; }
.c2s-step { display: inline-flex; align-items: center; gap: 6px; font: 800 15px var(--mono); color: #d8dde2; }
.c2s-step .k-led { width: 14px; height: 14px; }
.c2s-grid { display: grid; grid-template-columns: 136px 136px; gap: 18px; padding: 18px 18px 22px; }
.c2s-pad { position: relative; width: 136px; height: 128px; border: none; padding: 0; border-radius: 14px; cursor: pointer; background: #0d0e10;
  box-shadow: 0 6px 0 #070708, 0 8px 12px rgba(0,0,0,.7); transition: transform 70ms, box-shadow 70ms; }
.c2s-pad:active { transform: translateY(5px); box-shadow: 0 1px 0 #070708, 0 2px 4px rgba(0,0,0,.7); }
/* the cap: a translucent coloured keycap, dark until it is lit from below */
.c2s-cap { position: absolute; inset: 0; border-radius: 14px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px;
  background: repeating-radial-gradient(circle at 50% 45%, rgba(255,255,255,.05) 0 1px, transparent 1px 4px), linear-gradient(180deg, var(--c2s-hi) 0%, var(--c2s-mid) 55%, var(--c2s-lo) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.28), inset 0 -3px 5px rgba(0,0,0,.45); filter: brightness(.42) saturate(.75); transition: filter 70ms; }
.c2s-name { font: 800 13px var(--mono); letter-spacing: 3px; color: rgba(0,0,0,.55); text-shadow: 0 1px 0 rgba(255,255,255,.25); }
.c2s-pad.lit .c2s-cap { filter: brightness(1.18) saturate(1.1); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 0 26px rgba(255,255,255,.55), inset 0 -3px 5px rgba(0,0,0,.25); }
.c2s-pad.red { --c2s-hi: #ff8a7f; --c2s-mid: #e8463b; --c2s-lo: #a8251c; }
.c2s-pad.blue { --c2s-hi: #8db8ff; --c2s-mid: #3a7ee0; --c2s-lo: #1f4f9c; }
.c2s-pad.green { --c2s-hi: #8ae6a6; --c2s-mid: #2fb45a; --c2s-lo: #1a7a3b; }
.c2s-pad.yellow { --c2s-hi: #fff0a6; --c2s-mid: #f2c230; --c2s-lo: #b8860b; }
.c2s-pad.red.lit { box-shadow: 0 6px 0 #070708, 0 0 30px rgba(232,70,59,.75); }
.c2s-pad.blue.lit { box-shadow: 0 6px 0 #070708, 0 0 30px rgba(58,126,224,.75); }
.c2s-pad.green.lit { box-shadow: 0 6px 0 #070708, 0 0 30px rgba(47,180,90,.75); }
.c2s-pad.yellow.lit { box-shadow: 0 6px 0 #070708, 0 0 30px rgba(242,194,48,.75); }
.c2s-pad.lit:active { box-shadow: 0 1px 0 #070708, 0 0 30px rgba(255,255,255,.35); }
.c2s-table td { font-size: 22px; }

/* ---------- MAZE ---------- */
.c2z-mod { position: absolute; inset: 0; border-radius: 10px; display: grid; grid-template-columns: 70px 1fr 70px; grid-template-rows: 70px 1fr 70px; align-items: center; justify-items: center; }
.c2z-board { grid-column: 2; grid-row: 2; padding: 6px; background: #121518; }
.c2z-svg { display: block; width: 248px; height: 248px; }
.c2z-key { width: 60px; height: 58px; font-size: 22px; }
.c2z-up { grid-column: 2; grid-row: 1; } .c2z-down { grid-column: 2; grid-row: 3; }
.c2z-left { grid-column: 1; grid-row: 2; } .c2z-right { grid-column: 3; grid-row: 2; }
.c2z-lab { font: 800 16px var(--mono); fill: #c9ced4; text-anchor: middle; }
.c2z-dot { fill: #3d454e; }
.c2z-goal { fill: none; stroke: var(--k-amber); stroke-width: 4; stroke-linejoin: round; }
.c2z-goal.done { stroke: var(--k-live); fill: rgba(127,212,138,.25); }
.c2z-me { fill: #f4f5f6; stroke: #0b0c0e; stroke-width: 1.5; transition: x 90ms, y 90ms; }
.c2z-me.done { fill: var(--k-live); }
.c2z-hit { stroke: var(--k-alarm); stroke-width: 7; stroke-linecap: round; opacity: 0; }
.c2z-hit.show { animation: c2zhit 1.1s; }
@keyframes c2zhit { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.c2z-wall { stroke: #111; stroke-width: 5; stroke-linecap: round; fill: none; }
/* manual */
.c2z-list { display: grid; grid-template-columns: repeat(3, 250px); gap: 18px; margin-top: 16px; }
.c2z-card { background: #f4f1e8; color: #111; border-radius: 12px; padding: 8px 10px; }
.c2z-card-h { font: 900 24px var(--mono); letter-spacing: 2px; margin: 2px 4px 2px; }
.c2z-card .c2z-svg { width: 230px; height: 230px; }
.c2z-card .c2z-lab { fill: #333; }
.c2z-card .c2z-dot { fill: #bbb; }
body.print .c2z-list { grid-template-columns: repeat(3, 210px); gap: 10px; }
body.print .c2z-card { border: 1px solid #bbb; break-inside: avoid; }
body.print .c2z-card .c2z-svg { width: 190px; height: 190px; }

/* ---------- CHESS ---------- */
.c2c-mod { position: absolute; inset: 0; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.c2c-well { padding: 4px; border-radius: 8px; background: #1b1e22; box-shadow: inset 0 3px 10px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.12); }
.c2c-mod .c2c-svg { display: block; width: 352px; height: 352px; }
.c2c-rim { fill: #2a1d12; }
.c2c-sq.light { fill: #e9dcc0; } .c2c-sq.dark { fill: #a7845c; }
.c2c-sq.sel { fill: var(--k-amber); }
.c2c-sq.done { fill: var(--k-live); }
.c2c-label { font: 800 13px var(--mono); fill: #d8dde2; text-anchor: middle; }
.c2c-piece { font-size: 32px; text-anchor: middle; font-family: 'Segoe UI Symbol', 'Apple Symbols', 'DejaVu Sans', 'Noto Sans Symbols 2', sans-serif; paint-order: stroke; stroke-width: 1.6px; pointer-events: none; }
.c2c-piece.w { fill: #fff; stroke: #111; }
.c2c-piece.b { fill: #111; stroke: #d6d6d6; }
.c2c-hit { fill: transparent; cursor: pointer; }
.c2c-hit:hover { fill: rgba(240,193,75,.22); }
.c2c-hint { font: 700 12px var(--mono); letter-spacing: 1px; color: #c9ced4; }
.c2c-arrow { stroke-width: 8; stroke-linecap: round; }
.c2c-arrow.best, .c2c-head.best { stroke: #1d5fd6; fill: #1d5fd6; }
.c2c-arrow.second, .c2c-head.second { stroke: #ff7a12; fill: #ff7a12; }
.c2c-arrow.second { stroke-dasharray: 12 7; stroke-linecap: butt; }
.c2c-head { stroke: none !important; }
/* manual */
.c2c-rule td { font-size: 24px; }
.c2c-big { font-size: 34px; letter-spacing: 1px; }
.c2c-big.best { color: #5b9bff; } .c2c-big.second { color: #ff8a1f; }
.c2c-list { display: grid; grid-template-columns: repeat(3, minmax(260px, 330px)); gap: 20px; margin-top: 16px; }
.c2c-card { background: #1a1d22; border-radius: 12px; padding: 12px; }
.c2c-card-h { font-weight: 800; font-size: 19px; margin-bottom: 6px; }
.c2c-card .c2c-svg { width: 100%; height: auto; display: block; }
.c2c-card .c2c-label { fill: #c9ced4; }
.c2c-legend { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 17px; }
.c2c-legend span { display: flex; align-items: center; gap: 8px; }
.c2c-legend i { display: inline-block; width: 30px; height: 6px; border-radius: 3px; }
.c2c-legend .best i { background: #1d5fd6; }
.c2c-legend .second i { background: repeating-linear-gradient(90deg, #ff7a12 0 9px, transparent 9px 13px); }
body.print .c2c-list { grid-template-columns: repeat(3, 1fr); gap: 10px; }
body.print .c2c-card { background: #f3f3f3; color: #111; break-inside: avoid; }
body.print .c2c-card .c2c-label { fill: #333; }
body.print .c2c-big.best { color: #1d5fd6; } body.print .c2c-big.second { color: #d45f00; }

/* ---------- MAP ---------- */
.c2m-mod { position: absolute; inset: 0; border-radius: 10px; display: flex; flex-direction: column; align-items: center; padding-top: 6px; gap: 4px; }
.c2m-mapwell { padding: 4px; border-radius: 8px; background: #1b1e22; box-shadow: inset 0 3px 10px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.12); }
.c2m-mapwell .survey-map { display: block; width: 336px; height: 210px; border-radius: 5px; }
.c2m-mod .map-pin circle:not(.c2m-pinhit) { r: 13px; }
.c2m-mod .map-pin text { font-size: 14px; }
.c2m-pinhit { fill: transparent; stroke: none; cursor: pointer; }
.c2m-mod .map-pin circle.c2m-pinhit { fill: transparent; stroke: none; }
.c2m-bottom { display: flex; align-items: center; gap: 14px; }
.c2m-dial { width: 176px; height: 176px; display: block; }
.c2m-bezel { fill: #23272c; stroke: #6b7178; stroke-width: 2; }
.c2m-face { fill: #15181b; stroke: #050607; stroke-width: 2; }
.c2m-skirt { fill: #0a0b0c; }
.c2m-cap { fill: #c8ccd1; stroke: #7d848b; stroke-width: 1; }
.c2m-capg { transition: transform 60ms; }
.c2m-pos text { font: 800 13px var(--mono); fill: #1c1f23; text-anchor: middle; pointer-events: none; }
.c2m-pos.sel .c2m-capg { transform: translateY(3px); }
.c2m-pos.sel .c2m-cap { fill: var(--k-amber); stroke: #8a6d00; }
.c2m-hit { fill: transparent; cursor: pointer; }
.c2m-mode { font: 900 21px var(--mono); text-anchor: middle; letter-spacing: 1px; fill: #e9ebee; }
.c2m-mode.mirrored { fill: var(--k-amber); font-size: 16px; letter-spacing: 0; }
.c2m-side { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.c2m-read { font-size: 15px; letter-spacing: 1px; padding: 6px 10px; min-width: 168px; line-height: 1.4; }
.c2m-read b { font-weight: 800; }
.c2m-confirm { width: 168px; height: 54px; font: 800 18px var(--mono); letter-spacing: 3px; }
.c2m-confirm.done { color: #1d5c32; }
/* manual */
.c2m-ref { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; margin: 10px 0 16px; }
.c2m-refmap .survey-map { width: 520px; height: 325px; border-radius: 8px; display: block; }
.c2m-ref .lm-legend { max-width: 320px; }
.c2m-photos { display: grid; grid-template-columns: repeat(3, 300px); gap: 14px; margin: 8px 0 16px; }
.c2m-photo { margin: 0; background: #efe6cf; padding: 6px; border-radius: 4px; color: #111; }
.c2m-photo svg { display: block; width: 100%; height: auto; }
.c2m-photo figcaption { font: 900 22px var(--mono); letter-spacing: 2px; padding: 4px 4px 0; }
.c2m-dials { display: flex; flex-wrap: wrap; gap: 14px; }
.c2m-dials .dial-fig { margin: 0; flex: 1 1 400px; max-width: 460px; }
body.print .c2m-refmap .survey-map { width: 400px; height: 250px; }
body.print .c2m-dials .dial-pic { width: 180px; height: 180px; }
body.print .c2m-photos { grid-template-columns: repeat(3, 1fr); gap: 8px; }
body.print .c2m-photo { border: 1px solid #bbb; break-inside: avoid; }
body.print .c2m-dials .dial-fig { break-inside: avoid; }
.c2m-mod .map-n.small, .c2m-refmap .map-n.small { display: none; } /* the tiny W/E letters collide with the WATER TOWER label at this size */
.c2s-name { color: rgba(0,0,0,.62); }