:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#213547;background-color:#f8f9fa;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1;margin:0}button{font-family:inherit}#root{width:100%;min-height:100vh}.map-container{width:100%;margin:0;border-radius:8px;padding:.5rem;background-color:#f5f5f5;flex:1;display:flex;flex-direction:column;min-height:0}@media(min-width:1024px){.map-container{margin:0}}.map-wrapper{position:relative;width:100%;flex:1;min-height:0;height:100%;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.map-svg{width:100%;height:100%;display:block;border-radius:4px}.zoom-controls{position:absolute;top:1rem;left:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:10}.zoom-button{width:40px;height:40px;border:2px solid #333;border-radius:4px;background-color:#ffffffe6;font-size:1.5rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 2px 4px #0003}.zoom-button:hover{background-color:#fff;transform:scale(1.05);box-shadow:0 4px 8px #0000004d}.zoom-button:active{transform:scale(.95)}.zoom-reset{font-size:1.2rem;margin-top:.25rem;border-top:2px solid #ccc;padding-top:.5rem}@media(max-width:640px){.zoom-controls{top:.5rem;left:.5rem;gap:.25rem}.zoom-button{width:32px;height:32px;font-size:1.2rem;border-width:1.5px}.zoom-reset{font-size:1rem;margin-top:.125rem;padding-top:.25rem}}.district-path{fill:transparent;stroke:#0000004d;stroke-width:.5;transition:all .2s ease;pointer-events:all;cursor:pointer}.map-wrapper.locate-mode .district-path{stroke:#dc354599;stroke-width:1}.map-wrapper.locate-mode .district-path:hover{fill:#dc35451a;stroke:#dc3545e6;stroke-width:1.5}.district-path:hover{fill:#fff3;stroke:#00000080;stroke-width:1}.district-path.highlighted{fill:#dc3545b3;stroke:#c82333;stroke-width:3;animation:pulse 1.5s ease-in-out infinite}.district-path.selected{fill:#28a745b3;stroke:#28a745;stroke-width:3}.district-path.wrong{fill:#ff0000d9;stroke:red;stroke-width:4;animation:wrongPulse .5s ease-in-out;filter:drop-shadow(0 0 4px rgba(255,0,0,.8))}@keyframes wrongPulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.options-panel{display:flex;flex-direction:column;gap:1rem;width:100%}@media(min-width:1024px){.options-panel{max-width:400px;margin:0}}.option-button{padding:1rem 1.5rem;font-size:1rem;font-weight:500;border:2px solid #e0e0e0;border-radius:8px;background-color:#fff;color:#333;cursor:pointer;transition:all .2s ease;text-align:center}.option-button:hover:not(:disabled){background-color:#f5f5f5;border-color:#4a90e2;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.option-button:active:not(:disabled){transform:translateY(0)}.option-button:disabled{cursor:not-allowed;opacity:.7}.option-button.correct{background-color:#4caf50;border-color:#4caf50;color:#fff;animation:correctPulse .5s ease}.option-button.incorrect{background-color:#f44336;border-color:#f44336;color:#fff;animation:incorrectShake .5s ease}.option-button.disabled{background-color:#f5f5f5;border-color:#e0e0e0;color:#999}@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes incorrectShake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}@media(max-width:640px){.option-button{padding:.875rem 1.25rem;font-size:.9375rem}}.score-panel{display:flex;justify-content:center;gap:2rem;padding:.5rem;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;flex-shrink:0}.score-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.score-label{font-size:.875rem;color:#666;font-weight:500}.score-value{font-size:1.5rem;font-weight:700;color:#333}@media(max-width:640px){.score-panel{gap:1rem;order:2}.score-label{font-size:.75rem}.score-value{font-size:1.25rem}}.game-container{display:flex;flex-direction:column;gap:.75rem;padding:0;width:100%;margin:0;flex:1;min-height:0;box-sizing:border-box;overflow-x:hidden;min-width:0}.game-content{display:flex;flex-direction:column;gap:.75rem;flex:1;min-height:0}@media(min-width:1024px){.game-content{flex-direction:row;align-items:stretch;gap:1rem}.game-content>:first-child{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}.game-content>:last-child{flex:0 0 350px}}.game-loading{display:flex;justify-content:center;align-items:center;min-height:400px;font-size:1.25rem;color:#666}.next-round-indicator{text-align:center;color:#666;font-size:.875rem;padding:.5rem;animation:fadeInOut 1s ease-in-out infinite;word-wrap:break-word;overflow-wrap:break-word;max-width:100%;box-sizing:border-box;width:100%;margin:0}@keyframes fadeInOut{0%,to{opacity:.5}50%{opacity:1}}@media(max-width:640px){.game-container{padding:.5rem;gap:.75rem;flex-direction:column}.next-round-indicator{padding:.5rem .25rem;font-size:.75rem;line-height:1.4;width:100%;margin:0;white-space:normal}}.view-mode-container{display:flex;flex-direction:column;gap:1rem;padding:.5rem;width:100%;height:100%}.view-mode-content{display:flex;flex-direction:column;gap:1rem;flex:1;min-height:0}.view-mode-header{text-align:center;padding:.5rem}.view-mode-header h2{margin:0 0 .5rem;font-size:1.5rem;color:#333}.view-mode-header p{margin:0;font-size:.875rem;color:#666}.view-mode-header p.mobile-hide{display:none}.view-mode-map-wrapper{position:relative;flex:1;min-height:0}@media(min-width:1024px){.view-mode-content{flex-direction:row;align-items:flex-start;gap:1rem}.view-mode-header{flex:0 0 250px;text-align:left;padding:1rem;background-color:#f8f9fa;border-radius:8px;position:sticky;top:1rem}.view-mode-header h2{font-size:1.25rem;margin-bottom:.75rem}.view-mode-header p{font-size:.875rem;line-height:1.5}.view-mode-header p.mobile-hide{display:block}.view-mode-map-wrapper{flex:1;min-width:0}}.district-tooltip{position:absolute;background-color:#000000d9;color:#fff;padding:.5rem 1rem;border-radius:4px;font-size:.875rem;pointer-events:none;z-index:1000;white-space:nowrap;box-shadow:0 2px 8px #0000004d;transform:translate(-50%,-100%);margin-top:-.5rem;max-width:200px;overflow:hidden;text-overflow:ellipsis}.district-clicked-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#000000d9;color:#fff;padding:1rem 2rem;border-radius:8px;font-size:1.25rem;font-weight:700;z-index:1001;box-shadow:0 4px 12px #0006;animation:fadeInOut 2s ease-in-out;pointer-events:none}@media(max-width:640px){.view-mode-header h2{font-size:1.25rem}.view-mode-header p{font-size:.75rem}.district-clicked-message{font-size:1rem;padding:.75rem 1.5rem}}.locate-mode-container{display:flex;flex-direction:column;gap:.75rem;padding:0;width:100%;margin:0;flex:1;min-height:0}.locate-mode-content{display:flex;flex-direction:column;gap:.75rem;flex:1;min-height:0}.locate-mode-instruction{text-align:center;padding:1rem;background-color:#f8f9fa;border-radius:8px}.locate-mode-instruction h2{margin:0 0 .5rem;font-size:1.5rem;color:#333}.district-name-to-find{margin:0;font-size:1.5rem;font-weight:700;color:#667eea}.locate-mode-map-wrapper{position:relative;flex:1;min-height:0}.locate-mode-loading{display:flex;justify-content:center;align-items:center;min-height:400px;font-size:1.25rem;color:#666}.celebration-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;pointer-events:none}.celebration-content{background:linear-gradient(135deg,#28a745,#20c997);color:#fff;padding:1.5rem 3rem;border-radius:12px;font-size:1.5rem;font-weight:700;display:flex;align-items:center;gap:.75rem;box-shadow:0 4px 16px #28a74566;animation:celebrationPop .5s ease-out}.celebration-icon{font-size:2rem;animation:celebrationSpin .5s ease-out}@keyframes celebrationPop{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}@keyframes celebrationSpin{0%{transform:rotate(-180deg)}to{transform:rotate(0)}}.correct-answer-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;pointer-events:none}.correct-answer-content{background-color:#dc3545f2;color:#fff;padding:1rem 2rem;border-radius:8px;font-size:1.125rem;font-weight:500;box-shadow:0 4px 12px #dc354566;animation:fadeInOut 2s ease-in-out}@keyframes fadeInOut{0%,to{opacity:0;transform:translate(-50%,-50%) scale(.9)}20%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}}@media(min-width:1024px){.locate-mode-content{flex-direction:row;align-items:stretch;gap:1rem}.locate-mode-instruction{flex:0 0 300px;display:flex;flex-direction:column;justify-content:center}.locate-mode-map-wrapper{flex:1;min-width:0}}@media(max-width:640px){.locate-mode-instruction h2,.district-name-to-find{font-size:1.25rem}.celebration-content{font-size:1.25rem;padding:1rem 2rem}.celebration-icon{font-size:1.5rem}.correct-answer-content{font-size:1rem;padding:.75rem 1.5rem}}.about-container{max-width:800px;margin:0 auto;padding:2rem 1rem}.about-content{background-color:#fff;border-radius:8px;padding:2rem;box-shadow:0 2px 8px #0000001a}.about-content h1{margin:0 0 2rem;font-size:2.5rem;color:#333;text-align:center}.about-section{margin-bottom:2rem}.about-section:last-child{margin-bottom:0}.about-section h2{margin:0 0 1rem;font-size:1.5rem;color:#667eea}.about-section p{margin:0 0 1rem;line-height:1.6;color:#555}.about-section p:last-child{margin-bottom:0}.about-section ul{margin:0 0 1rem;padding-left:1.5rem;line-height:1.8;color:#555}.about-section li{margin-bottom:.5rem}.about-section li:last-child{margin-bottom:0}.about-section strong{color:#333;font-weight:600}.about-section a{color:#667eea;text-decoration:none;font-weight:500;transition:color .2s ease}.about-section a:hover{color:#764ba2;text-decoration:underline}@media(max-width:640px){.about-container{padding:1rem .5rem}.about-content{padding:1.5rem}.about-content h1{font-size:2rem;margin-bottom:1.5rem}.about-section h2{font-size:1.25rem}}.not-found-container{display:flex;justify-content:center;align-items:center;min-height:60vh;padding:2rem}.not-found-content{text-align:center;max-width:500px}.not-found-content h1{font-size:6rem;margin:0;color:#667eea;font-weight:700;line-height:1}.not-found-content h2{font-size:2rem;margin:1rem 0 .5rem;color:#333;font-weight:600}.not-found-content p{font-size:1.125rem;color:#666;margin:0 0 2rem;line-height:1.6}.not-found-link{display:inline-block;padding:.75rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-decoration:none;border-radius:8px;font-weight:600;font-size:1.125rem;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 2px 8px #667eea4d}.not-found-link:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.not-found-link:active{transform:translateY(0)}@media(max-width:640px){.not-found-container{min-height:50vh;padding:1rem}.not-found-content h1{font-size:4rem}.not-found-content h2{font-size:1.5rem}.not-found-content p{font-size:1rem}.not-found-link{padding:.65rem 1.5rem;font-size:1rem}}.navigation{position:absolute;top:1rem;right:1rem;display:flex;justify-content:flex-end;align-items:flex-start}@media(max-width:640px){.navigation{position:relative;top:auto;right:auto;margin-top:.75rem;justify-content:center;align-items:center}}.hamburger-button{background:none;border:none;cursor:pointer;padding:.5rem;display:flex;flex-direction:column;gap:4px;justify-content:center;align-items:center;width:40px;height:40px;border-radius:4px;transition:background-color .2s ease}.hamburger-button:hover{background-color:#ffffff1a}.hamburger-line{width:24px;height:3px;background-color:#fff;border-radius:2px;transition:all .3s ease}.hamburger-button[aria-expanded=true] .hamburger-line:nth-child(1){transform:rotate(45deg) translate(8px,8px)}.hamburger-button[aria-expanded=true] .hamburger-line:nth-child(2){opacity:0}.hamburger-button[aria-expanded=true] .hamburger-line:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}.nav-menu{position:absolute;top:100%;right:0;margin-top:.5rem;background-color:#fffffff2;border-radius:8px;box-shadow:0 4px 12px #0003;min-width:150px;max-height:0;overflow:hidden;opacity:0;transform:translateY(-10px);transition:all .3s ease;z-index:1000}.nav-menu.open{max-height:400px;opacity:1;transform:translateY(0)}.nav-link{display:block;padding:.75rem 1.25rem;color:#333;text-decoration:none;transition:all .2s ease;font-weight:500;font-size:.9375rem;border-bottom:1px solid rgba(0,0,0,.05)}.nav-link:last-child{border-bottom:none}.nav-link:hover{background-color:#667eea1a;color:#667eea}.nav-link.active{background-color:#667eea26;color:#667eea;font-weight:600}@media(max-width:640px){.hamburger-button{width:36px;height:36px}.hamburger-line{width:20px;height:2.5px}.nav-menu{right:.5rem;min-width:140px}.nav-link{padding:.65rem 1rem;font-size:.875rem}}@media(min-width:641px){.nav-menu{right:0}}.app-footer{text-align:center;padding:1rem;background-color:#f8f9fa;border-top:1px solid #e9ecef;margin-top:auto}.footer-nav{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1rem;flex-wrap:wrap}.footer-link{color:#666;text-decoration:none;font-size:.875rem;font-weight:500;transition:color .2s ease}.footer-link:hover{color:#667eea}.footer-link.active{color:#667eea;font-weight:600}.app-footer p{margin:0;color:#666;font-size:.875rem}.app-footer a{color:#667eea;text-decoration:none;font-weight:500;transition:color .2s ease}.app-footer a:hover{color:#764ba2;text-decoration:underline}@media(max-width:640px){.app-footer{padding:.75rem}.footer-nav{gap:1rem;margin-bottom:.75rem}.footer-link,.app-footer p{font-size:.8125rem}}.app{min-height:100vh;display:flex;flex-direction:column;touch-action:manipulation}.app-header{text-align:center;padding:1rem 1rem .5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 8px #0000001a;position:relative}.app-header h1{margin:0 0 .5rem;font-size:2.5rem;font-weight:700}.app-header p{margin:0;font-size:1.125rem;opacity:.95}.app-main{flex:1;padding:.5rem;display:flex;flex-direction:column;min-height:0;overflow:hidden}.app-loading,.app-error{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;text-align:center;padding:2rem}.app-loading h1,.app-error h1{margin-bottom:1rem;color:#333}.app-loading p,.app-error p{color:#666;font-size:1.125rem}@media(max-width:640px){.app-header h1{font-size:2rem}.app-header p{font-size:1rem}.app-main{padding:.5rem}}