@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@400;700&display=swap');:root{--bg-dark-start: #1a1a2e;--bg-dark-end: #16213e;--bg-secondary: rgba(40, 42, 54, 0.9);--bg-secondary-opaque: #282a36;--border-color: #6272a4;--text-main: #f8f8f2;--text-secondary: #bd93f9;--accent-green: #50fa7b;--accent-pink: #ff79c6;--accent-yellow: #f1fa8c;--accent-purple: #bd93f9;--accent-cyan: #8be9fd;--error-red: #ff5555;--font-primary: 'Roboto', sans-serif;--font-title: 'Orbitron', sans-serif;} *{margin: 0;padding: 0;box-sizing: border-box;user-select: none;} html{font-size: 16px;scroll-behavior: smooth;} body{font-family: var(--font-primary);color: var(--text-main);background: linear-gradient(135deg, var(--bg-dark-start), var(--bg-dark-end));display: flex;flex-direction: column;justify-content: flex-start;align-items: center;min-height: 100vh;padding: 1rem;overflow-x: hidden;} .game-container{background-color: var(--bg-secondary);padding: 1.5rem 2rem;border-radius: 15px;border: 1px solid var(--border-color);box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);max-width: 95%;width: fit-content;text-align: center;display: flex;flex-direction: column;gap: 1.5rem;animation: fadeIn 0.5s ease-out forwards;margin-top: 1rem;} header{margin-bottom: 0.5rem;} .game-title{font-family: var(--font-title);font-size: 2.5rem;letter-spacing: 2px;margin-bottom: 0.25rem;line-height: 1.2;} .title-geek{color: var(--accent-green);} .title-code{color: var(--accent-pink);} .subtitle{font-family: var(--font-title);font-size: 1.2rem;color: var(--accent-green);font-weight: 400;margin-top: 0.2rem;} .game-area-wrapper{display: flex;gap: 1.5rem;align-items: flex-start;width: 100%;justify-content: center;flex-wrap: wrap;} .board-container{flex-shrink: 0;width: clamp(280px, 80vw, 450px);} .board{display: grid;grid-template-columns: repeat(7, 1fr);grid-template-rows: repeat(7, 1fr);gap: 5px;aspect-ratio: 1 / 1;background-color: rgba(0, 0, 0, 0.1);border: 2px solid var(--border-color);padding: 5px;border-radius: 8px;} .cell{aspect-ratio: 1 / 1;border-radius: 50%;display: flex;justify-content: center;align-items: center;cursor: pointer;transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;position: relative;} .cell.invalid{background-color: transparent;border: none;cursor: default;pointer-events: none;} .cell.empty{background-color: var(--bg-secondary-opaque);border: 2px dashed var(--border-color);} .cell.empty:hover{background-color: rgba(98, 114, 164, 0.4);} .cell.peg::before{content: '';display: block;width: 75%;height: 75%;background-color: var(--accent-cyan);border-radius: 50%;box-shadow: 0 0 8px rgba(139, 233, 253, 0.7), inset 0 2px 4px rgba(0, 0, 0, 0.3);transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;z-index: 1;position: relative;} .cell.peg:hover::before{background-color: var(--accent-pink);box-shadow: 0 0 12px var(--accent-pink);} .cell.peg.selected::before{background-color: var(--accent-green);transform: scale(1.1);box-shadow: 0 0 15px var(--accent-green);} .cell.empty.highlight{background-color: rgba(80, 250, 123, 0.3);border: 2px solid var(--accent-green);box-shadow: 0 0 10px var(--accent-green);} .coordinate-label{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 0.65rem;font-weight: bold;font-family: var(--font-primary);color: var(--border-color);pointer-events: none;user-select: none;z-index: 2;opacity: 0.8;transition: opacity 0.3s ease, color 0.3s ease;text-shadow: 0 0 2px rgba(0,0,0,0.5);} .cell.peg .coordinate-label{color: var(--bg-secondary-opaque);} .score-panel{background-color: rgba(40, 42, 54, 0.7);border: 1px solid var(--border-color);border-radius: 8px;padding: 1rem;width: 220px;max-height: 450px;min-height: 150px;overflow-y: auto;flex-shrink: 0;color: var(--text-secondary);display: flex;flex-direction: column;} .score-panel h2{font-family: var(--font-title);color: var(--accent-pink);text-align: center;margin-bottom: 0.8rem;font-size: 1.2rem;letter-spacing: 1px;flex-shrink: 0;} #move-history-list{list-style: none;padding: 0;margin: 0;font-size: 0.85rem;overflow-y: auto;flex-grow: 1;} #move-history-list li{padding: 0.4rem 0.2rem;border-bottom: 1px dashed var(--border-color);line-height: 1.4;word-wrap: break-word;overflow: hidden;} #move-history-list li:last-child{border-bottom: none;} #move-history-list li#no-moves-yet{color: var(--border-color);font-style: italic;text-align: center;padding: 1rem 0;} #move-history-list li .move-coords{color: var(--accent-cyan);font-weight: bold;} #move-history-list li .peg-count{color: var(--accent-yellow);font-weight: bold;float: right;margin-left: 0.5em;} .controls{display: flex;flex-wrap: wrap;justify-content: center;gap: 0.8rem;margin-top: 1rem;} .btn{font-family: var(--font-title);background-color: var(--accent-purple);color: var(--text-main);border: none;padding: 0.7rem 1.2rem;border-radius: 5px;cursor: pointer;font-size: 0.9rem;font-weight: bold;letter-spacing: 1px;text-transform: uppercase;transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);} .btn:hover{background-color: var(--accent-pink);transform: translateY(-2px);box-shadow: 0 4px 10px rgba(255, 121, 198, 0.4);} .btn:active{transform: translateY(0);box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);} .btn:disabled{background-color: var(--border-color);color: rgba(248, 248, 242, 0.5);cursor: not-allowed;transform: none;box-shadow: none;} .status-message{color: var(--accent-yellow);font-size: 1rem;font-weight: bold;min-height: 1.5em;margin-top: 1rem;transition: color 0.3s ease;} .page-footer{width: 100%;background-color: var(--bg-secondary-opaque);color: var(--border-color);padding: 1.5rem 1rem;margin-top: 2rem;text-align: center;border-top: 1px solid var(--border-color);font-size: 0.9rem;} .footer-links{margin-bottom: 1rem;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;gap: 0.5rem 1rem;} .footer-links a{color: var(--text-main);text-decoration: none;transition: color 0.3s ease;} .footer-links a:hover{color: var(--accent-cyan);} .footer-links span{color: var(--border-color);user-select: none;display: inline-block;} .footer-links a:first-of-type + span{} .geek{font-family: var(--font-title);font-weight: bold;color: var(--accent-green);} .code{font-family: var(--font-title);font-weight: bold;color: var(--accent-pink);} .copyright{font-size: 0.85rem;color: var(--border-color);} .modal-overlay{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.7);z-index: 99;display: none;opacity: 0;transition: opacity 0.3s ease-in-out;} .modal{position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(0.9);background-color: var(--bg-secondary);border: 1px solid var(--border-color);border-radius: 10px;padding: 2rem;z-index: 100;width: 90%;max-width: 500px;box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);display: none;opacity: 0;transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;} .modal-overlay.active, .modal.active{display: block;opacity: 1;} .modal.active{transform: translate(-50%, -50%) scale(1);} .modal-content{display: flex;flex-direction: column;gap: 1rem;} .modal-content h2{font-family: var(--font-title);color: var(--accent-pink);text-align: center;margin-bottom: 0.5rem;font-size: 1.5rem;} .close-button{position: absolute;top: 10px;right: 15px;font-size: 2rem;line-height: 1;color: var(--border-color);cursor: pointer;transition: color 0.2s ease;} .close-button:hover{color: var(--accent-pink);} #past-games-list-container p{color: var(--text-secondary);margin-bottom: 0.5rem;font-size: 0.9rem;} #past-games-list{list-style: none;padding: 0;margin: 0;max-height: 150px;overflow-y: auto;border: 1px solid var(--border-color);border-radius: 5px;padding: 0.5rem;background-color: rgba(0,0,0,0.1);} #past-games-list li{padding: 0.6rem 0.8rem;border-bottom: 1px dashed rgba(98, 114, 164, 0.5);cursor: pointer;transition: background-color 0.2s ease, color 0.2s ease;color: var(--text-main);} #past-games-list li:last-child{border-bottom: none;} #past-games-list li:hover{background-color: rgba(98, 114, 164, 0.2);color: var(--accent-cyan);} #past-games-list li.selected{background-color: var(--accent-purple);color: var(--text-main);font-weight: bold;} #selected-game-details h3{color: var(--accent-yellow);font-size: 1.1rem;margin-bottom: 0.5rem;font-family: var(--font-primary);} #selected-game-moves{width: 100%;font-family: 'Courier New', Courier, monospace;font-size: 0.85rem;padding: 0.5rem;border-radius: 5px;border: 1px solid var(--border-color);background-color: var(--bg-dark-start);color: var(--text-main);resize: vertical;margin-bottom: 1rem;min-height: 80px;} .modal-btn{align-self: flex-end;background-color: var(--accent-green);color: var(--bg-secondary-opaque);} .modal-btn:hover{background-color: #8affc1;color: var(--bg-secondary-opaque);} .cell.hint-source::before{box-shadow: 0 0 15px 5px var(--accent-yellow), inset 0 0 5px var(--accent-yellow);border: 2px solid var(--accent-yellow);background-color: var(--accent-yellow);transform: scale(1.05);} .cell.empty.hint-target{background-color: rgba(241, 250, 140, 0.4);border: 2px solid var(--accent-yellow);box-shadow: 0 0 12px var(--accent-yellow);} @keyframes fadeIn{from{opacity: 0;transform: translateY(10px);} to{opacity: 1;transform: translateY(0);}} @keyframes pulse-red-error{0%{box-shadow: 0 0 0 0 rgba(255, 85, 85, 0.7);} 70%{box-shadow: 0 0 10px 15px rgba(255, 85, 85, 0);} 100%{box-shadow: 0 0 0 0 rgba(255, 85, 85, 0);}} .cell.error-pulse{animation: pulse-red-error 0.7s ease-out;} @keyframes pulse-green-success{0%{box-shadow: 0 0 0 0 rgba(80, 250, 123, 0.7);} 70%{box-shadow: 0 0 10px 15px rgba(80, 250, 123, 0);} 100%{box-shadow: 0 0 0 0 rgba(80, 250, 123, 0);}} .cell.peg.success-pulse::before{animation: pulse-green-success 0.7s ease-out;} @keyframes pulse-heart{0%, 100%{transform: scale(1);} 50%{transform: scale(1.2);}} @media (max-width: 768px){html{font-size: 14px;} .game-container{padding: 1rem;width: 95%;margin-top: 0.5rem;} .game-title{font-size: 2rem;} .subtitle{font-size: 1.1rem;} .game-area-wrapper{flex-direction: column;align-items: center;gap: 1rem;} .score-panel{width: 90%;max-width: 450px;max-height: 180px;min-height: 120px;margin-top: 1rem;} .controls{margin-top: 1rem;} .status-message{margin-top: 0.8rem;font-size: 0.95rem;}} @media (max-width: 480px){html{font-size: 13px;} body{padding: 0.5rem;} .game-container{padding: 0.8rem;gap: 1rem;width: 100%;max-width: 100%;} .game-title{font-size: 1.8rem;} .subtitle{font-size: 1rem;} .board-container{width: clamp(240px, 90vw, 320px);} .board{gap: 3px;padding: 3px;} .cell.peg::before{width: 70%;height: 70%;} .coordinate-label{font-size: 0.55rem;} .controls{gap: 0.6rem;flex-direction: column;align-items: stretch;} .btn{padding: 0.8rem 1rem;font-size: 0.85rem;} .status-message{font-size: 0.9rem;} .score-panel{max-height: 150px;width: 95%;} #move-history-list li .peg-count{font-size: 0.8rem;} .page-footer{padding: 1rem 0.5rem;font-size: 0.8rem;margin-top: 1.5rem;} .footer-links{gap: 0.3rem 0.8rem;margin-bottom: 0.8rem;} .copyright{font-size: 0.75rem;} .modal{padding: 1.5rem 1rem;width: 95%;} .modal-content h2{font-size: 1.3rem;} #past-games-list{max-height: 120px;} #selected-game-moves{font-size: 0.8rem;min-height: 60px;} .modal-btn{width: 100%;text-align: center;align-self: center;}}