*,*:before,*:after{box-sizing:border-box}body{font-family:Roboto,Arial,sans-serif;color:#2f4f4f;background-color:#e0f2f1;margin:0;padding:0;line-height:1.6}header{text-align:center;padding:15px 10px;margin-bottom:15px}header h1{font-size:2.2em;color:#004d40;margin-bottom:.15em;margin-top:0}header h2{font-size:1.3em;color:#00695c;font-weight:400;margin-top:0;margin-bottom:0}.app-container{max-width:800px;margin:10px auto;padding:15px;border-radius:8px}.options{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:15px;margin-bottom:15px;padding:12px;background-color:#fff;border-radius:8px;box-shadow:0 1px 5px #00000014}.btn,button#mix,button#solve{background-color:#ffdab9;color:#2f4f4f;border:none;padding:8px 16px;border-radius:8px;font-size:.95em;font-family:inherit;cursor:pointer;transition:background-color .3s ease,transform .2s ease,box-shadow .2s ease;box-shadow:0 2px 4px #0000001a}.btn:hover,button#mix:hover,button#solve:hover{background-color:bisque;transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.btn:active,button#mix:active,button#solve:active{transform:translateY(0);box-shadow:0 2px 4px #0000001a}.btn:disabled,button#mix:disabled,button#solve:disabled{opacity:.6;cursor:not-allowed;background-color:khaki;box-shadow:none;transform:translateY(0)}input#moves{padding:8px;border-radius:8px;border:1px solid #CFD8DC;font-size:.95em;font-family:inherit;max-width:110px;text-align:center}input#moves:focus{outline:none;border-color:#00796b;box-shadow:0 0 0 2px #00796b33}p#moves_num,p#bot_message{min-height:1.2em;font-size:.95em;color:#2f4f4f;margin:0;padding:5px 0;text-align:center;flex-basis:100%}footer{text-align:center;margin-top:20px;padding:10px;font-size:.8em;color:#555;border-top:1px solid #CFD8DC}footer a{color:#00796b;text-decoration:none;font-weight:500;transition:color .3s ease}footer a:hover{color:#004d40;text-decoration:underline}ul{list-style:none}.game{width:300px;height:300px;margin:25px auto 35px;perspective:1000px}.game ul{margin:0 auto;width:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;border:2px solid #333;border-radius:10px;background-color:#bdbdbd;padding:4px;transform-style:preserve-3d;transform:rotateX(20deg);box-shadow:0 10px 20px #0000001a,0 6px 6px #00000026}.square{width:92px;height:92px;list-style:none;border:1px solid #D8BFD8;text-align:center;font-size:2.2em;font-weight:700;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;background-color:#e6e6fa;color:#3a3a3a;transform-style:preserve-3d;transform:translateZ(5px);box-shadow:0 2px 5px #0003;transition:transform .3s ease-out,box-shadow .3s ease-out,background-color .3s ease}.square:hover{background-color:#f0f0ff;transform:translateZ(15px) scale(1.05);box-shadow:0 8px 15px #0000004d}.square div{width:100%;height:100%;border-radius:6px;display:flex;align-items:center;justify-content:center}.square div.success{background-color:#66bb6a!important;color:#fff!important;box-shadow:0 0 10px #66bb6a}#pc-1{background-color:#ffccbc}#pc-2{background-color:#ffcdd2}#pc-3{background-color:#d1c4e9}#pc-4{background-color:#c5cae9}#pc-5{background-color:#bbdefb}#pc-6{background-color:#b2ebf2}#pc-7{background-color:#c8e6c9}#pc-8{background-color:#fff9c4}.square.free{background:#eceff1!important;border-color:#cfd8dc;box-shadow:inset 0 0 10px #0000001a;cursor:default;transform:translateZ(0) scale(1)}.square.free:hover{transform:translateZ(0) scale(1);box-shadow:inset 0 0 10px #0000001a}.square.free div{color:transparent;background-color:transparent!important}.square div{color:#424242}#bot_message.win-display{text-align:center;padding:25px;background-color:#e6ffe6f7;border:1px solid #81C784;border-radius:12px;box-shadow:0 5px 20px #00640040;margin:20px auto;max-width:320px;position:relative;z-index:200}#bot_message.win-display h1{color:#388e3c;margin-top:0;margin-bottom:15px;font-size:2.2em;font-weight:700}#bot_message.win-display .btn#play_again{background-color:#66bb6a;color:#fff;font-size:1.1em;padding:12px 25px;margin-top:10px}#bot_message.win-display .btn#play_again:hover{background-color:#4caf50;box-shadow:0 6px 12px #0003}@media screen and (max-height: 900px){header{padding:12px 10px;margin-bottom:12px}header h1{font-size:2em;margin-bottom:.1em}header h2{font-size:1.2em}.app-container{margin:8px auto;padding:12px}.game{width:280px;height:280px;margin:20px auto 30px}.square{width:86px;height:86px;font-size:2em}.options{margin-top:12px;margin-bottom:12px;padding:10px;gap:10px}footer{margin-top:15px;padding:8px;font-size:.75em}}@media screen and (max-height: 700px){body{font-size:.9em}header h1{font-size:1.8em}header h2{font-size:1.1em}.game{width:260px;height:260px;margin:15px auto 25px}.square{width:80px;height:80px;font-size:1.8em}}