#map-wrap{position:relative;width:100%;height:480px;background:#e8d5a0;border-radius:8px;overflow:hidden;cursor:crosshair;user-select:none;touch-action:none}#map-svg-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform-origin:center center;will-change:transform}#map-svg-container svg{width:100%;height:100%}.state-path{fill:#c8b060;stroke:#4a3820;stroke-width:.6;cursor:pointer;transition:fill .15s}.state-path:hover{fill:#b89840}.state-path.flash-wrong{fill:#e57373!important;transition:fill 0s}.state-path.flash-correct{fill:#66bb6a!important;transition:fill 0s}.state-path.reveal-state{fill:#ffa726!important;transition:fill 0s}.state-path.state-correct{fill:#43a047!important;opacity:.75}.state-path.state-wrong{fill:#e53935!important;opacity:.75}#map-sheep{position:absolute;font-size:28px;line-height:1;pointer-events:none;user-select:none;z-index:10;transform:translate(-50%,-50%);transition:left .6s cubic-bezier(.25,.46,.45,.94),top .6s cubic-bezier(.25,.46,.45,.94);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));will-change:left,top}#map-sheep.celebrating{animation:sheep-celebrate .6s ease-out}#map-sheep.retreating{transition:left .4s ease-in,top .4s ease-in}@keyframes sheep-celebrate{0%{transform:translate(-50%,-50%) scale(1)}25%{transform:translate(-50%,-70%) scale(1.3)}55%{transform:translate(-50%,-40%) scale(1.1)}75%{transform:translate(-50%,-65%) scale(1.2)}to{transform:translate(-50%,-50%) scale(1)}}#sign-wrap{text-align:center;margin-bottom:10px;min-height:72px;display:flex;align-items:center;justify-content:center}#state-sign{display:inline-block;background:#c0392b;color:#fff;border:4px solid #7b1c11;border-radius:6px;padding:10px 24px;font-size:22px;font-weight:700;letter-spacing:.03em;box-shadow:0 4px 12px #00000040,inset 0 1px #ffffff26;position:relative;text-shadow:0 1px 2px rgba(0,0,0,.4)}#state-sign:before,#state-sign:after{content:"";position:absolute;top:-12px;width:6px;height:12px;background:#7b1c11;border-radius:2px 2px 0 0}#state-sign:before{left:20%}#state-sign:after{right:20%}#state-sign.sign-arrive{animation:sign-arrive .55s cubic-bezier(.34,1.56,.64,1) forwards}#state-sign.sign-leave{animation:sign-leave .35s ease-in forwards}@keyframes sign-arrive{0%{transform:translate(110vw) rotate(4deg);opacity:0}70%{transform:translate(-8px) rotate(-1deg);opacity:1}to{transform:translate(0) rotate(0);opacity:1}}@keyframes sign-leave{0%{transform:translate(0);opacity:1}to{transform:translate(-110vw);opacity:0}}#timer-bar-wrap{background:#e0d8c8;border-radius:6px;height:10px;margin-bottom:10px;overflow:hidden;position:relative}#timer-bar{height:100%;width:100%;border-radius:6px;background:linear-gradient(to right,#43a047,#fdd835,#e53935);transform-origin:left center;transition:transform .1s linear}#timer-bar.urgent{animation:timer-pulse .5s ease-in-out infinite alternate}@keyframes timer-pulse{0%{filter:brightness(1)}to{filter:brightness(1.3)}}#timer-label{font-size:12px;color:var(--text-secondary);text-align:right;margin-bottom:4px}#round-display{display:flex;gap:4px;justify-content:center;margin-bottom:10px}.round-pip{width:10px;height:10px;border-radius:50%;background:#d0c8b4;transition:background .2s}.round-pip.done{background:#66bb6a}.round-pip.current{background:#ffa726}.round-pip.missed{background:#ef5350}.map-score-pop{position:absolute;z-index:20;font-weight:700;font-size:20px;color:#2e7d32;text-shadow:0 1px 3px rgba(0,0,0,.2);pointer-events:none;transform:translate(-50%,-50%);animation:map-score-float 1.1s ease-out forwards}.map-score-pop.zero{color:#c62828;font-size:15px}@keyframes map-score-float{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,calc(-50% - 60px))}}#reset-zoom{position:absolute;bottom:8px;right:8px;background:#ffffffd9;border:1px solid rgba(0,0,0,.15);border-radius:6px;padding:5px 10px;font-size:13px;cursor:pointer;z-index:15;color:#4a4a48;backdrop-filter:blur(2px);transition:background .15s}#reset-zoom:hover{background:#fff}#feedback-toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000b3;color:#fff;padding:8px 18px;border-radius:8px;font-size:15px;font-weight:600;pointer-events:none;z-index:25;opacity:0;transition:opacity .2s;white-space:nowrap}#feedback-toast.visible{opacity:1}#quiz-overlay{position:absolute;inset:0;background:#1e0f05d1;display:none;align-items:center;justify-content:center;z-index:28;backdrop-filter:blur(2px)}#quiz-overlay.visible{display:flex}#quiz-popup{background:#fff8f0;border-radius:14px;padding:18px 16px 14px;width:min(340px,90%);box-shadow:0 8px 32px #00000059;animation:popup-in .22s cubic-bezier(.34,1.56,.64,1)}@keyframes popup-in{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}#quiz-question{font-size:16px;font-weight:700;color:#2c1a06;text-align:center;margin-bottom:14px;line-height:1.35}#quiz-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.logo-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px 10px;border-radius:10px;border:2px solid #e8ddd0;background:#fff;cursor:pointer;font-family:inherit;transition:border-color .15s,transform .12s,background .15s}.logo-card:hover{border-color:#d4380d;transform:translateY(-2px);background:#fff8f0}.logo-card:active{transform:none}.logo-card.flash-wrong-card{border-color:#ef5350!important;background:#ffebee!important;animation:card-shake .35s ease-out}.logo-card.flash-correct-card{border-color:#43a047!important;background:#e8f5e9!important}@keyframes card-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.logo-img-wrap{width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:#f8f8f8;border-radius:8px;overflow:hidden}.logo-img{max-width:72px;max-height:72px;object-fit:contain}.logo-fallback{width:72px;height:72px;border-radius:50%;color:#fff;font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center}.logo-name{font-size:11px;font-weight:600;color:#4a3020;text-align:center;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#result-overlay{position:absolute;inset:0;background:#fdf6ecf5;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;gap:12px;opacity:0;pointer-events:none;transition:opacity .4s}#result-overlay.visible{opacity:1;pointer-events:all}#result-score-big{font-size:56px;font-weight:700;color:#2c2c2a;line-height:1}#result-label{font-size:18px;color:#6b6961}#result-correct{font-size:14px;color:#4a9e6b;font-weight:600}#compass{position:absolute;top:8px;left:10px;font-size:22px;pointer-events:none;opacity:.35;user-select:none;z-index:5}.state-correct-label{font-size:13px;color:#6b6961;text-align:center;min-height:20px}.mode-popup-inner{display:flex;flex-direction:column;align-items:center;width:100%}#mode-popup-title{font-size:20px;font-weight:700;margin-bottom:4px;flex:none}#mode-popup-sub{font-size:13px;color:var(--text-secondary);margin-bottom:20px}.mode-popup-score{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:16px;padding-bottom:16px;border-bottom:.5px solid var(--border);width:100%}#mode-popup-score-val{font-size:42px;font-weight:700;line-height:1}#mode-popup-score-sub{font-size:13px;color:var(--text-secondary)}.mode-btn-row{display:flex;gap:10px;width:100%;margin-bottom:14px}.name-entry{display:flex;gap:8px;width:100%;align-items:center}.name-input{flex:1;padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;background:var(--bg-soft)}.name-input:focus{outline:none;border-color:var(--info)}.card-btn{padding:10px 18px;background:#d4380d;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .15s}.card-btn:hover{background:#b82d00}@media(max-width:480px){#map-wrap{height:360px}#state-sign{font-size:18px;padding:8px 18px}#map-sheep{font-size:22px}#quiz-popup{padding:14px 12px 10px}#quiz-question{font-size:14px}.logo-img-wrap{width:56px;height:56px}.logo-img{max-width:56px;max-height:56px}.logo-fallback{width:56px;height:56px;font-size:20px}}