style.css

*,*::before,*::after{box-sizing:border-box;user-select:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);font-family:"Lucida Sans","Lucida Sans Regular","Lucida Grande","Lucida Sans Unicode",Geneva,Verdana,sans-serif}body{position:relative;display:flex;flex-direction:column;height:100vh;width:100vw;margin:0;background-color:#fff;overflow:hidden}body>.control-panel{position:relative;display:flex;justify-content:space-between;height:48px;padding:4px 20px}@media(max-width: 512px){body>.control-panel{padding:4px 10px}}body>.control-panel>.left{display:flex;align-items:center;cursor:pointer}body>.control-panel>.left>.logo{height:100%;object-fit:contain;padding:8px}body>.control-panel>.left>.text{font-family:cursive}@media(max-width: 512px){body>.control-panel>.left>.text{display:none}}body>.control-panel>.mid{display:flex;align-items:center;gap:3px;height:100%;padding:5px;z-index:1}@media(min-width: 512px){body>.control-panel>.mid{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}}body>.control-panel>.mid>.button{display:flex;height:100%;width:25px}body>.control-panel>.mid>.button:first-child{border-radius:8px 0 0 8px}body>.control-panel>.mid>.button:last-child{border-radius:0 8px 8px 0}body>.control-panel>.mid>.algorithm{display:flex;justify-content:center;align-items:center;padding-bottom:2px;width:100px;height:100%;color:#888;font-size:.85rem;transition-duration:150ms}@media(hover: hover){body>.control-panel>.mid>.algorithm:hover{background-color:rgba(0,0,0,.0352941176)}}body>.control-panel>.right{display:flex;justify-content:flex-end;align-items:center;gap:15px}@media(max-width: 512px){body>.control-panel>.right{gap:10px}}body>.control-panel>.right>.button{height:32px;aspect-ratio:1;padding:8px;border-radius:8px}@media(max-width: 512px){body>.control-panel>.right>.button:last-child{display:none}}body>.canvas{flex-grow:1;display:flex;flex-direction:column;justify-content:center;padding:0 20px 15px}body>.canvas>.row{display:flex}body>.canvas>.row>.cell{position:relative;aspect-ratio:1}body>.canvas>.row>.cell::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:85%;width:85%;border-radius:30%;background-color:rgba(0,0,0,.0352941176)}body>.canvas>.row>.cell.source{cursor:grab}body>.canvas>.row>.cell.source::after{background-image:url("./icons/car.svg");background-position:center;background-size:70%;background-repeat:no-repeat;background-color:rgba(0,0,0,0)}body>.canvas>.row>.cell.target{cursor:grab}body>.canvas>.row>.cell.target::after{background-image:url("./icons/marker.svg");background-position:center;background-size:70%;background-repeat:no-repeat;background-color:rgba(0,0,0,0)}body>.canvas>.row>.cell.wall::after{background-color:#0c0f30}@media(hover: hover){body>.canvas>.row>.cell.wall:hover::after{opacity:.8}}body>.canvas>.row>.cell.explored::after{background-color:#1aa260;opacity:.5}@media(hover: hover){body>.canvas>.row>.cell.explored:hover::after{opacity:.8 !important}}body>.canvas>.row>.cell.explored.path::after{height:50%;width:50%;border-radius:100px;background-color:#fbbc05;opacity:1}body>.modal{position:absolute;top:0;left:0;height:100vh;width:100vw;display:none;z-index:1}body>.modal.active{display:initial}body>.modal>.background{position:absolute;top:0;left:0;height:100vh;width:100vw;background-color:rgba(255,255,255,.5647058824);backdrop-filter:blur(2px)}body>.modal>.main{position:absolute;top:50%;left:50%;max-height:95%;transform:translate(-50%, -50%);display:none;border-radius:20px;background-color:#fff;box-shadow:0 0 10px 10px rgba(0,0,0,.0352941176);max-width:90%;overflow:auto}body>.modal>.main.active{display:initial}body>.modal>.main.tutorial{width:fit-content}body>.modal>.main.tutorial[data-order="0"]{background-color:#e8f9f1}body>.modal>.main.tutorial[data-order="0"]>.body>.subtitle{color:#1aa260}body>.modal>.main.tutorial[data-order="1"]{background-color:#eef4ff}body>.modal>.main.tutorial[data-order="1"]>.body>.subtitle{color:#4c8bf5}body>.modal>.main.tutorial[data-order="2"]{background-color:#ffeeed}body>.modal>.main.tutorial[data-order="2"]>.body>.subtitle{color:#d4493f}body>.modal>.main.tutorial[data-order="3"]{background-color:#fff9e6}body>.modal>.main.tutorial[data-order="3"]>.body>.subtitle{color:#fbbc05}body>.modal>.main.tutorial>.body{display:none;flex-direction:column;align-items:center;margin:0;overflow:hidden}body>.modal>.main.tutorial>.body.active{display:flex}body>.modal>.main.tutorial>.body>.subtitle{font-size:1.5rem;margin:20px auto 10px}body>.modal>.main.tutorial>.footer{display:flex;justify-content:space-between;margin-inline:15px}body>.modal>.main.tutorial>.footer>.do-not-show{display:flex;align-items:center;gap:5px;color:#888;font-size:.9rem}body>.modal>.main.tutorial>.footer>.button-container{display:flex;gap:3px}body>.modal>.main.logo-and-copyright{width:min(90%,350px)}body>.modal>.main.logo-and-copyright>.body{display:flex;flex-direction:column;align-items:center;gap:15px;padding-top:20px}body>.modal>.main.logo-and-copyright>.body>.name-and-logo{display:flex;flex-direction:column;align-items:center;gap:10px}body>.modal>.main.logo-and-copyright>.body>.name-and-logo>.logo{height:60px;object-fit:contain}body>.modal>.main.logo-and-copyright>.body>.name-and-logo>.text{font-size:1.5rem;font-family:cursive}body>.modal>.main.logo-and-copyright>.body>.copyright-container{display:flex;gap:15px}body>.modal>.main.logo-and-copyright>.body>.copyright-container a{font-size:.8rem;color:#888}body>.modal>.main.explain-algorithm{width:min(90%,512px)}body>.modal>.main.clean-options{width:min(90%,570px)}body>.modal>.main.clean-options>.body{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:20px}body>.modal>.main.clean-options>.body>.left,body>.modal>.main.clean-options>.body .right{margin:0 auto}body>.modal>.main.clean-options>.body .option-container{display:flex;align-items:center;margin-bottom:10px}body>.modal>.main.clean-options>.body .option-container>.option-text{font-size:.9rem;margin-left:5px}body>.modal>.main.clean-options>.body .image{width:250px;aspect-ratio:1;border-radius:10px;background-size:contain;background-repeat:no-repeat}body>.modal>.main.clean-options>.body>.left .image{background-image:url("./images/retain-the-wall.webp")}body>.modal>.main.clean-options>.body>.right .image{background-image:url("./images/clean-all.webp")}body>.modal>.main.settings{width:fit-content}body>.modal>.main.settings>.body>.row{display:flex;align-items:center;margin:15px 0}body>.modal>.main.settings>.body>.row>.title{font-size:.8rem;color:#888;width:65px}body>.modal>.main.settings>.body>.row>.options{display:flex;gap:10px}body>.modal>.main.settings>.body>.row>.options>.option-container{display:flex;align-items:center}body>.modal>.main.settings>.body>.row>.options>.option-container>.option-text{padding:0 5px}body>.modal>.main>.header{display:flex;align-items:center;gap:3px;height:30px;margin:15px 20px}body>.modal>.main>.header>.icon{height:100%;aspect-ratio:1;padding:5px;color:#888}body>.modal>.main>.header>.text{font-size:1.1rem;color:#888;padding:0 5px}body>.modal>.main>.body{margin:20px 25px;text-align:justify;line-height:1.5rem}body>.modal>.main>.footer{display:flex;justify-content:flex-end;margin:15px 25px 20px;gap:10px}body>.modal>.main>.footer .button{border-radius:8px;padding:8px 15px;font-size:.9rem}.button{position:relative;color:#888;transition-duration:150ms}@media(hover: hover){.button:not(.disabled):hover::after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;border-radius:8px;background-color:rgba(0,0,0,.0352941176)}.button:not(.disabled):active::after{background-color:rgba(0,0,0,.0666666667)}}.button.disabled{color:#ddd}.button.confirm-fill{background-color:#4c8bf5;color:#fff}.button.confirm{color:#4c8bf5;font-weight:bold}.with-hint{position:relative}.with-hint::before{content:attr(data-hint-text);position:absolute;bottom:0;left:50%;transform:translate(-50%, calc(100% + 3px));display:none;padding:6px 8px;border-radius:5px;background-color:rgba(0,0,0,.4666666667);color:#fff;font-size:.7rem;white-space:nowrap;animation:fadein 300ms ease;z-index:1}@keyframes fadein{from{opacity:0}50%{opacity:0}to{opacity:1}}@media(hover: hover){.with-hint:hover:not(.disabled)::before{display:initial}}