.chain-lab{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:36px;margin:32px 0;--view:0deg}.chain-copy h2{font-size:clamp(28px,3vw,40px);letter-spacing:-.04em;line-height:1.12;margin:16px 0}.chain-copy p{color:var(--muted)}.chain-copy .small{font-size:14px}.chain-workspace{min-width:0}.chain-scene{display:flex;justify-content:center;gap:42px;padding:45px 20px 30px;perspective:700px;background:radial-gradient(ellipse at center,var(--tint),transparent 70%);border-radius:16px;min-height:170px}.chain-block{position:relative;flex:0 0 70px;width:70px;height:76px;padding:0!important;border:0!important;background:transparent!important;transform-style:preserve-3d;transform:rotateX(-15deg) rotateY(calc(-25deg + var(--view)));transition:transform .3s;cursor:pointer;color:white}.block-front{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#276d60;border:1px solid #75c5ac;border-radius:5px;box-shadow:0 16px 22px #0002}.block-front small{font-size:10px;letter-spacing:.12em}.block-front strong{font-size:27px;line-height:1.2}.block-front>span{font-size:13px}.block-top{position:absolute;inset:0;background:#65af9b;transform:rotateX(90deg) translateZ(38px);height:70px;border-radius:5px}.block-side{position:absolute;inset:0;background:#19483f;transform:rotateY(90deg) translateZ(35px);border-radius:5px}.chain-block[aria-pressed=true]{transform:translateY(-10px) rotateX(-15deg) rotateY(calc(-25deg + var(--view)))}.chain-block[aria-pressed=true] .block-front{outline:3px solid var(--accent);outline-offset:5px}.chain-block[data-state=changed] .block-front{background:#805b1a}.chain-block[data-state=broken] .block-front{background:#a03f46}.chain-angle{display:flex;align-items:center;gap:16px;font-size:14px}.chain-angle input{min-width:0;width:100%;accent-color:var(--accent)}.chain-detail{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px;margin:14px 0}.chain-detail dl{margin:12px 0 0;font-size:14px}.chain-detail dl>div{display:flex;justify-content:space-between;gap:12px;margin:8px 0}.chain-detail dt{color:var(--muted)}.chain-detail dd{margin:0;text-align:right;overflow-wrap:anywhere}.chain-actions{display:flex;flex-wrap:wrap;gap:10px}.chain-actions button{min-height:44px}.chain-status{font-size:14px;min-height:65px;line-height:1.6;margin-bottom:0}.map-lesson,.badge-item,.quest-home,.card{transition:box-shadow .2s,translate .2s}.map-lesson:hover,.badge-item:hover,.card:hover{translate:0 -3px;box-shadow:0 10px 22px #0001}.earned .badge-emblem{filter:drop-shadow(0 3px 7px #b8904840)}.qcm-feedback[data-result=correct]{animation:answer-arrive .25s ease-out}@keyframes answer-arrive{from{opacity:.4;translate:0 5px}to{opacity:1;translate:0 0}}@media(max-width:800px){.chain-lab{grid-template-columns:1fr;gap:12px;padding:24px}.chain-copy .small{margin-bottom:0}}@media(max-width:380px){.chain-lab{padding:18px}.chain-scene{gap:24px;padding:40px 5px 22px}.chain-block{flex-basis:57px;width:57px}.chain-detail dl>div{flex-direction:column;gap:2px}.chain-detail dd{text-align:left}}@media(prefers-reduced-motion:reduce){.chain-block,.map-lesson,.badge-item,.quest-home,.card{transition:none}.qcm-feedback[data-result=correct]{animation:none}.map-lesson:hover,.badge-item:hover,.card:hover{translate:none}}
