:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.app{max-width:1400px;margin:0 auto;padding:2rem;text-align:center;font-family:Arial,sans-serif}.main-layout{display:grid;grid-template-columns:1fr auto 1fr;gap:3rem;align-items:start;max-width:1400px;margin:0 auto}.left-panel{text-align:left}.center-panel{text-align:center;min-width:300px}.right-panel{text-align:left}@media (max-width: 1200px){.main-layout{grid-template-columns:1fr;gap:2rem;text-align:center}.left-panel,.right-panel{text-align:center}}.mode-controls{margin:1.5rem 0}.mode-button{padding:.75rem 1.5rem;font-size:1.1rem;font-weight:700;border:2px solid #2196f3;border-radius:8px;background:#f0f8ff;color:#2196f3;cursor:pointer;transition:all .3s ease}.mode-button:hover,.mode-button.active{background:#2196f3;color:#fff}.setup-controls{background:#f9f9f9;border:2px solid #ddd;border-radius:12px;padding:1.5rem;margin:1.5rem 0;max-width:700px;margin-left:auto;margin-right:auto}.control-section{margin-bottom:1.5rem}.control-section:last-child{margin-bottom:0}.control-section h3{margin:0 0 .75rem;color:#333;font-size:1.1rem}.color-palette{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.color-btn{width:40px;height:40px;border:3px solid #333;border-radius:6px;cursor:pointer;transition:all .2s ease;position:relative}.color-btn:hover{transform:scale(1.1);border-color:#666}.color-btn.selected{border-color:#2196f3;border-width:4px;transform:scale(1.1);box-shadow:0 0 0 2px #2196f3}.symbol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;max-width:650px;margin:0 auto}.symbol-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#fff;border:2px solid #eee;border-radius:8px;cursor:pointer;transition:all .2s ease;color:#333}.symbol-item:hover{border-color:#ccc;box-shadow:0 2px 4px #0000001a}.symbol-item.selected{border-color:#2196f3;border-width:3px;box-shadow:0 0 0 2px #2196f3;background:#f0f8ff}.symbol-image{width:2.5rem;height:2.5rem;object-fit:contain;border-radius:4px;border:1px solid #ddd;background:#f9f9f9;padding:.25rem;flex-shrink:0}.symbol-info{display:flex;flex-direction:column;gap:.25rem;flex:1;text-align:left}.symbol-info strong{font-size:.9rem;margin-bottom:.1rem}.symbol-info small{font-size:.75rem;color:#666}.puzzle-container{position:relative;display:inline-block;margin:2rem 0;padding:40px;border:3px solid #333;border-radius:12px;background:#f5f5f5;transition:all .5s ease}.puzzle-container.winning{border-color:gold;border-width:5px;box-shadow:0 0 20px #ffd70099;animation:winningGlow 2s ease-in-out infinite alternate}@keyframes winningGlow{0%{box-shadow:0 0 20px #ffd70099}to{box-shadow:0 0 30px #ffd700cc}}.grid{display:grid;grid-template-columns:repeat(3,60px);grid-template-rows:repeat(3,60px);gap:4px;margin:0 auto}.tile{width:60px;height:60px;border:2px solid #333;border-radius:4px;cursor:pointer;transition:all .2s ease}.tile:hover{transform:scale(1.05);border-color:#666}.tile.setup-mode{border-style:dashed}.tile.setup-mode:hover{border-color:#2196f3;border-style:solid}.corner{position:absolute;width:30px;height:30px;cursor:pointer;transition:all .2s ease}.corner:hover{transform:scale(1.1)}.corner-tile{width:100%;height:100%;border:2px solid #333;border-radius:50%;transition:all .3s ease}.corner-tile.winning{border-color:gold;border-width:3px;animation:cornerPulse 1.5s ease-in-out infinite}@keyframes cornerPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.top-left{top:10px;left:10px}.top-right{top:10px;right:10px}.bottom-left{bottom:10px;left:10px}.bottom-right{bottom:10px;right:10px}.white{background-color:#fff}.pink{background-color:#ff69b4}.green{background-color:#32cd32}.orange{background-color:orange}.blue{background-color:#4169e1}.red{background-color:#dc143c}.yellow{background-color:gold}.gray{background-color:gray}.black{background-color:#000}.purple{background-color:#8a2be2}.info{margin-top:2rem;font-size:1.1rem}.win-message{background:linear-gradient(135deg,gold,#ffeb3b);border:3px solid #ffa000;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;animation:winningBounce .6s ease-out;box-shadow:0 4px 12px #ffd70066}.win-message h2{margin:0 0 .5rem;color:#e65100;font-size:1.8rem;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.win-message p{margin:0;color:#bf360c;font-weight:700;font-size:1.2rem}@keyframes winningBounce{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}.info p{margin:.5rem 0}.info span{font-weight:700;padding:.2rem .5rem;border-radius:4px;color:#fff;border:2px solid #333}.info span.white{color:#333;background-color:#fff}.info span.yellow{color:#333;background-color:gold}.info span.gray{color:#fff;background-color:gray}.tile-legend{margin-top:1.5rem;text-align:left;max-width:600px;margin-left:auto;margin-right:auto}.legend-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1rem}.legend-tile{display:inline-block;width:20px;height:20px;border:1px solid #333;border-radius:3px;margin-right:8px;vertical-align:middle}.spoiler-section{margin-top:2rem;border:2px solid #ddd;border-radius:8px;background:#f9f9f9;width:100%;max-width:500px}.spoiler-toggle{padding:1rem;font-size:1.1rem;font-weight:700;cursor:pointer;color:#333;border-radius:6px;transition:all .3s ease;background:linear-gradient(135deg,#f0f8ff,#e8f4fd)}.spoiler-toggle:hover{background:linear-gradient(135deg,#e8f4fd,#d0e9ff);color:#2196f3}.spoiler-content{padding:1rem;border-top:1px solid #ddd;text-align:left;color:#333}.spoiler-content h3{margin-top:0;color:#333;text-align:center}.behaviors-grid,.countries-grid{display:grid;grid-template-columns:1fr;gap:.75rem;margin:1rem 0}.behavior-item,.country-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#fff;border-radius:6px;border:1px solid #eee;transition:all .2s ease;color:#333}.country-symbol-img{width:3rem;height:3rem;object-fit:contain;border-radius:4px;border:1px solid #ddd;background:#f9f9f9;padding:.25rem}.behavior-tile{display:inline-block;width:3rem;height:3rem;border:2px solid #333;border-radius:6px;flex-shrink:0}.behavior-info{display:flex;flex-direction:column;gap:.25rem;flex:1}.behavior-info strong{font-size:1rem;margin-bottom:.25rem}.behavior-info small{font-size:.85rem;color:#666}.behavior-item:hover{border-color:#ccc;box-shadow:0 2px 4px #0000001a}.country-info{display:flex;flex-direction:column;gap:.25rem;flex:1}.country-info strong{font-size:1rem;margin-bottom:.25rem}.country-info small{font-size:.85rem;color:#666;display:flex;align-items:center;gap:.5rem}.country-item:hover{border-color:#ccc;box-shadow:0 2px 4px #0000001a}.spoiler-note{margin-top:1.5rem;padding:1rem;background:#e8f4fd;border-left:4px solid #2196f3;border-radius:4px;font-size:.95rem}.solver-section{margin:1.5rem 0;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.solver-button{padding:.75rem 1.5rem;font-size:1.1rem;font-weight:700;border:2px solid #4caf50;border-radius:8px;background:#f1f8e9;color:#2e7d32;cursor:pointer;transition:all .3s ease}.solver-button:hover:not(:disabled){background:#4caf50;color:#fff}.solver-button:disabled{opacity:.6;cursor:not-allowed}.solver-toggle{padding:.5rem 1rem;font-size:1rem;border:2px solid #2196f3;border-radius:6px;background:#e3f2fd;color:#1976d2;cursor:pointer;transition:all .3s ease}.solver-toggle:hover{background:#2196f3;color:#fff}.solution-display{background:#f5f5f5;border:2px solid #ddd;border-radius:12px;padding:1.5rem;margin:1rem 0;width:100%;max-width:500px;text-align:left;color:#333}.solution-display h4{margin-top:0;color:#333;text-align:center}.solution-display h5{margin:1rem 0 .5rem;color:#444}.solution-display p{color:#333;margin:.5rem 0}.moves-list{margin-top:1rem}.moves-list ol{padding-left:1.5rem}.moves-list li{margin:.5rem 0;padding:.5rem;background:#fff;border-radius:4px;border-left:3px solid #4caf50;color:#333}.tile.highlighted{border-color:#f44!important;border-width:4px!important;box-shadow:0 0 15px #ff4444b3;animation:highlightPulse 1s ease-in-out infinite alternate;transform:scale(1.1)!important}@keyframes highlightPulse{0%{box-shadow:0 0 15px #ff4444b3}to{box-shadow:0 0 25px #ff4444e6}}.step-controls{display:flex;align-items:center;gap:.75rem;margin:1rem 0;justify-content:center;flex-wrap:wrap}.step-button{padding:.5rem 1rem;font-size:.9rem;border:2px solid #2196f3;border-radius:6px;background:#e3f2fd;color:#1976d2;cursor:pointer;transition:all .3s ease}.step-button:hover:not(:disabled){background:#2196f3;color:#fff}.step-button:disabled{opacity:.5;cursor:not-allowed;border-color:#ccc;background:#f5f5f5;color:#999}.step-indicator{font-weight:700;color:#333;font-size:.9rem;background:#f0f8ff;padding:.5rem .75rem;border-radius:4px;border:1px solid #e0e8ff}.current-step-item{background:#fff3cd!important;border-left-color:#ff9800!important;font-weight:700}.current-step{margin:1rem 0;padding:.75rem;background:#e8f5e8;border:2px solid #4caf50;border-radius:8px}.current-step h6{margin:0 0 .5rem;color:#2e7d32;font-size:1rem}.highlighted-move{margin:0;font-weight:700;font-size:1.1rem;color:#1b5e20}.state-preview{margin:1rem 0;padding:.75rem;background:#f0f8ff;border:2px solid #2196f3;border-radius:8px}.state-preview h6{margin:0 0 .75rem;color:#1976d2;font-size:1rem;text-align:center}.preview-grid{display:grid;grid-template-columns:repeat(3,30px);grid-template-rows:repeat(3,30px);gap:2px;margin:0 auto;width:fit-content}.preview-tile{width:30px;height:30px;border:1px solid #333;border-radius:3px}