/* The collection shares the existing violet, lime and warm neutral palette. */
.path-art,.code-art,.rule-art{gap:14px;position:relative;overflow:hidden}.path-art{background:linear-gradient(135deg,#223e3b,#172b2e)}.path-art>span{display:grid;place-items:center;width:54px;height:54px;border:2px solid #b9dd97;border-radius:12px;color:#dbf6bd;font-size:28px;font-weight:800}.path-art>b{color:#c4e8a7;font-size:32px}.code-art{background:linear-gradient(135deg,#3a2c4e,#24223d)}.code-art>i{display:grid;place-items:center;width:48px;height:64px;border:1px solid #bb9ce5;border-radius:12px;background:#a68ac326;color:#e5cbff;font-size:32px;font-style:normal}.rule-art{background:linear-gradient(135deg,#493323,#2d2635)}.rule-art>b{font-size:88px;color:#ffce98}.rule-art>span{font-size:24px;font-weight:750;letter-spacing:.06em;color:#ede3fa;transform:rotate(-8deg)}
.route-target{text-align:center;font-size:18px;color:#e0efc9;font-weight:650}.route-board{display:grid;grid-template-columns:repeat(var(--route-size),minmax(0,1fr));gap:5px;width:100%;max-width:340px;margin:20px auto;padding:7px;background:#131721;border:1px solid #64587c;border-radius:14px}.route-tile{display:grid;place-items:center;aspect-ratio:1;min-width:0;border:1px solid #6d607e;border-radius:7px;background:#302c40;color:#d4c8eb;font-family:inherit;font-size:18px;font-weight:700;line-height:1;padding:0;cursor:pointer}.route-tile.blocked{background:repeating-linear-gradient(45deg,#1b1927,#1b1927 5px,#343041 5px,#343041 7px);color:#c4bacb;cursor:default}.route-tile.visited{background:#bede99;color:#20311b;border-color:#e5f6d3}.route-tile.current{outline:3px solid #f8f5ff;outline-offset:-4px}.route-tile.goal{border:2px dashed #e5c080;color:#ffe0b1}.route-tile.goal.visited{color:#20311b}.route-tile:not(.blocked):hover{filter:brightness(1.15)}.route-tile:focus-visible,.route-board:focus-visible{outline:3px solid #d9baff;outline-offset:2px}.path-controls{max-width:520px;margin:auto}.path-controls>.submit-answer{width:100%;justify-content:center;min-height:48px;margin-top:18px}.route-status{font-size:16px;line-height:1.5;color:#e0efc9;text-align:center;min-height:48px}.route-actions{display:flex;justify-content:center;gap:12px}.route-actions button{min-height:44px}.path-controls .input-help{text-align:center}
.code-slots{display:flex;justify-content:center;gap:12px;margin:18px 0}.code-slot{display:grid;text-align:center;gap:6px;min-width:54px;padding:12px;border:1px solid #bba0de;border-radius:12px;background:#33293f}.code-slot small{font-size:12px;color:#d5c1ed;letter-spacing:.12em}.code-slot strong{font-size:30px;color:#f3e7ff}.code-clues{max-width:500px;margin:22px auto;text-align:left;line-height:1.7;padding-left:30px;font-size:17px;color:#f0eaf7}.code-clues li{padding-left:6px;margin:8px 0}.code-clues li::marker{color:#d2b4ff;font-weight:700}
.switch-rule{font-size:clamp(17px,2vw,21px);font-weight:650;line-height:1.5;padding:16px 20px;border:1px solid #a391c0;border-radius:12px;background:#3d3151;color:#faf4ff;max-width:560px;margin:10px auto 20px;text-align:center}.switch-stage{min-height:170px;display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap;padding:20px;max-width:560px;margin:auto;border-radius:20px;background:radial-gradient(ellipse at top,#332947,#191925);border:1px solid #4b3d60}.switch-arrow{font-size:100px;line-height:1;color:#d0edac}.switch-word{font-size:clamp(24px,4vw,38px);font-weight:750;color:#ede2ff;letter-spacing:.04em;overflow-wrap:anywhere}.switch-distraction{font-size:68px;font-weight:750;color:#f3bb8c;line-height:1}.switch-big{font-size:72px;font-weight:750;color:#d6bdfb;line-height:1}.switch-small{font-size:30px;font-weight:750;color:#c7e7aa}.switch-shape{width:120px;height:120px;fill:#bba0e0;stroke:#f0e5ff;stroke-width:2}.switch-dots{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 10px;color:#d0edac;font-size:28px;line-height:1.3}
@media(max-width:600px){.path-art,.code-art,.rule-art{gap:6px}.path-art>span{width:30px;height:38px;font-size:20px}.path-art>b{font-size:20px}.code-art>i{width:26px;height:44px;font-size:22px}.rule-art>b{font-size:56px}.rule-art>span{font-size:16px}.code-slots{gap:7px}.code-slot{min-width:40px;padding:8px}.code-slot strong{font-size:26px}.code-clues{font-size:16px;padding-left:23px}.route-board{gap:4px;padding:5px}.route-tile{border-radius:5px;font-size:16px}.switch-stage{gap:18px;padding:16px}.switch-rule{padding:14px}.switch-arrow{font-size:80px}}
