.attempt-column{display:flex;flex-direction:column;align-items:center;margin:0 2px;padding:6px;border-radius:8px;transition:all .3s ease;min-width:50px;border:2px solid #8b4513;box-shadow:0 0 0 2px #8b4513}.attempt-column.current-attempt{background-color:#007bff1a;border:2px solid #007bff;box-shadow:0 0 0 2px #007bff4d}.guess-column{display:flex;flex-direction:column;align-items:center;gap:3px}.empty-pin{width:32px;height:32px;background:#f8f9fa;border:3px dashed #ddd;border-radius:50%}.pin{width:35px;height:35px;border-radius:50%;margin:0 3px;display:inline-block;position:relative;cursor:pointer;transition:all .3s ease;border:3px solid #ddd;box-shadow:inset 0 2px 4px #0000001a 0 2px 8px #0003}.guess-column .pin{width:32px;height:32px;margin:0}.pin:hover{transform:translateY(-2px);box-shadow:inset 0 2px 4px #0000001a 0 4px 12px #0000004d}.secret-pin{background:#6c757d;position:relative}.secret-pin::after{content:'?';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-weight:700;font-size:16px}.secret-pin.revealed::after{display:none}.color-pin{width:45px;height:45px;border-radius:50%;margin:0 5px 5px 0;display:inline-block;cursor:pointer;transition:all .3s ease;border:3px solid #fff;box-shadow:inset 0 3px 6px #0000001a 0 3px 12px #0003}.color-pin:hover{transform:scale(1.1);box-shadow:inset 0 3px 6px #0000001a 0 6px 16px #0000004d}.color-pin.red{background:linear-gradient(45deg,#ff6b6b 25%,#ff8e8e 25%,#ff8e8e 50%,#ff6b6b 50%,#ff6b6b 75%,#ff8e8e 75%);background-size:8px 8px}.color-pin.blue{background:linear-gradient(45deg,#4dabf7 25%,#74c0fc 25%,#74c0fc 50%,#4dabf7 50%,#4dabf7 75%,#74c0fc 75%);background-size:8px 8px}.color-pin.green{background:linear-gradient(45deg,#51cf66 25%,#8ce99a 25%,#8ce99a 50%,#51cf66 50%,#51cf66 75%,#8ce99a 75%);background-size:8px 8px}.color-pin.yellow{background:linear-gradient(45deg,#ffd43b 25%,#ffe066 25%,#ffe066 50%,#ffd43b 50%,#ffd43b 75%,#ffe066 75%);background-size:8px 8px}.color-pin.purple{background:linear-gradient(45deg,#da77f2 25%,#e599f7 25%,#e599f7 50%,#da77f2 50%,#da77f2 75%,#e599f7 75%);background-size:8px 8px}.color-pin.white{background:linear-gradient(45deg,#dee2e6 25%,#f8f9fa 25%,#f8f9fa 50%,#dee2e6 50%,#dee2e6 75%,#f8f9fa 75%);background-size:8px 8px;border-color:#fff}.pin.red{background:linear-gradient(45deg,#ff6b6b 25%,#ff8e8e 25%,#ff8e8e 50%,#ff6b6b 50%,#ff6b6b 75%,#ff8e8e 75%);background-size:8px 8px;border-color:#fff}.pin.blue{background:linear-gradient(45deg,#4dabf7 25%,#74c0fc 25%,#74c0fc 50%,#4dabf7 50%,#4dabf7 75%,#74c0fc 75%);background-size:8px 8px;border-color:#fff}.pin.green{background:linear-gradient(45deg,#51cf66 25%,#8ce99a 25%,#8ce99a 50%,#51cf66 50%,#51cf66 75%,#8ce99a 75%);background-size:8px 8px;border-color:#fff}.pin.yellow{background:linear-gradient(45deg,#ffd43b 25%,#ffe066 25%,#ffe066 50%,#ffd43b 50%,#ffd43b 75%,#ffe066 75%);background-size:8px 8px;border-color:#fff}.pin.purple{background:linear-gradient(45deg,#da77f2 25%,#e599f7 25%,#e599f7 50%,#da77f2 50%,#da77f2 75%,#e599f7 75%);background-size:8px 8px;border-color:#fff}.pin.white{background:linear-gradient(45deg,#dee2e6 25%,#f8f9fa 25%,#f8f9fa 50%,#dee2e6 50%,#dee2e6 75%,#f8f9fa 75%);background-size:8px 8px;border-color:#fff}.game-board{background:#8b4513;padding:15px;border-radius:15px;box-shadow:inset 0 4px 8px #0000004d;min-height:180px;height:auto;overflow-x:auto;overflow-y:hidden;max-width:100%;width:500px;margin:0 auto}.attempt-row{display:flex;align-items:center;justify-content:space-between;background:#d2b48c;padding:8px;margin-bottom:8px;border-radius:10px;box-shadow:0 2px 4px #0003}.code-row{display:flex;align-items:center;justify-content:center;margin-bottom:10px}.feedback-pins{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;width:50px}.feedback-pins.feedback-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;width:32px;height:32px;gap:2px;align-items:center;justify-items:center}.feedback-pin{width:10px;height:10px;border-radius:50%;margin:1px;border:1px solid #333}.feedback-pin.orange{background:linear-gradient(135deg,#ff8a65,#f4511e)}.feedback-pin.white{background:#fff}.feedback-pin.empty{background:transparent;border:1px dashed #999}.feedback-pin-sample{width:14px;height:14px;border-radius:50%;display:inline-block;flex-shrink:0}.feedback-pin-sample.orange{background:linear-gradient(135deg,#ff8a65,#f4511e);border:1px solid #333}.feedback-pin-sample.white{background:#fff;border:1px solid #333}.color-palette{background:#f8f9fa;padding:15px;border-radius:15px;text-align:center}.colors{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.pin.next-input{border:3px solid #007bff;box-shadow:0 0 0 2px #007bff4d;animation:pulse-border 1.5s infinite}@keyframes pulse-border{0%{box-shadow:0 0 0 2px #007bff4d}50%{box-shadow:0 0 0 4px #007bff80}100%{box-shadow:0 0 0 2px #007bff4d}}@keyframes bounce{0%,20%,60%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}80%{transform:translateY(-5px)}}.pin.bounce{animation:bounce .6s}@media (max-width: 768px){.pin{width:30px;height:30px;margin:0 2px}.color-pin{width:40px;height:40px;margin:0 3px 3px 0}.colors{justify-content:center;gap:5px;width:50%}.game-board{padding:8px}.attempt-column{margin:0 0 0 2px;padding:4px;min-width:37px}.guess-column{gap:2px}.guess-column .pin{width:28px;height:28px}.empty-pin{width:28px;height:28px}.feedback-pins.feedback-grid{width:28px;height:28px;gap:1px}.feedback-pin{width:8px;height:8px}.color-palette{padding:10px}.feedback-pins{width:40px}.feedback-pin{width:8px;height:8px}}