MarkOrps/discrete-equations-labyrinth-runner

1/* Animation for scrolling equations */2@keyframes scroll {3    0% {4        transform: translateY(0);5    }6    100% {7        transform: translateY(-100%);8    }9}10 11.animate-scroll .equation-column {12    animation: scroll 20s linear infinite;13}14 15/* Custom styles for equations */16.equation {17    font-family: 'Space Mono', monospace;18    color: rgba(255, 255, 255, 0.1);19    margin-bottom: 2rem;20    font-size: 1.2rem;21    white-space: nowrap;22}23 24/* Responsive adjustments */25@media (max-width: 640px) {26    .equation {27        font-size: 0.8rem;28    }29}30/* Button hover effects */31.hover-glow:hover {32    box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);33}34/* Player option buttons */35.player-option, .mode-option {36    position: relative;37    display: inline-block;38    margin: 0.5rem;39    cursor: pointer;40    text-decoration: none;41}42/* Animation for content transitions */43#initial-content, #player-selection {44    transition: all 0.3s ease-out;45}46/* Game board styles */47#maze-container {48    display: grid;49    grid-template-columns: repeat(10, 1fr);50    grid-template-rows: repeat(10, 1fr);51    gap: 2px;52}53#maze-container div {54    transition: all 0.2s ease;55    position: relative;56}57 58#maze-container div:hover {59    transform: scale(1.05);60    z-index: 1;61    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);62}63 64/* Player position indicator */65.player-indicator {66    position: absolute;67    bottom: 100%;68    left: 50%;69    transform: translateX(-50%);70    width: 100%;71    text-align: center;72    background: rgba(0, 0, 0, 0.7);73    color: white;74    font-size: 0.8rem;75    padding: 2px 4px;76    border-radius: 4px;77    margin-bottom: 4px;78    font-weight: bold;79    white-space: nowrap;80}81#dice-circle {82    transition: transform 0.3s ease;83}84 85#dice-circle:hover {86    transform: scale(1.05);87}88 89#roll-button {90    transition: all 0.2s ease;91}92 93#roll-button:disabled {94    opacity: 0.7;95    transform: none;96    cursor: not-allowed;97}98 99#roll-button:active {100    transform: scale(0.95);101}102/* Footer position */103#guide-footer {104    transition: opacity 0.3s ease;105}106 107/* Responsive adjustments for player selection */108@media (max-width: 640px) {109    .player-option {110        margin: 0.5rem 0;111    }112}113