@import"https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Noto+Sans+KR:wght@500;700;800&display=swap";:root{font-family:Manrope,Noto Sans KR,sans-serif;color:#edf0ed;background:#141b21;--yellow: #efbc43;--red: #df4e48;--green: #55c38a}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(#10171db5,#10171db5),url(../assets/backdrop.webp) center/cover fixed}button{font:inherit}header{height:68px;padding:0 clamp(12px,4vw,52px);display:flex;align-items:center;justify-content:space-between;background:#111a20ed;border-bottom:1px solid #b1883f}.brand{display:flex;align-items:center;gap:10px}.brand>span{width:38px;height:38px;background:var(--yellow);color:#182026;border-radius:5px;display:grid;place-items:center}.brand svg{width:21px}.brand strong{display:block;font-size:15px}.brand small,.stage small{display:block;color:#9fadb3;font-size:9px;text-transform:uppercase}.stage{text-align:center}.stage strong{font-size:14px}.icon{width:40px;height:40px;border:1px solid #65747b;border-radius:5px;background:#243139;color:#fff;display:grid;place-items:center;cursor:pointer}.icon svg{width:18px}.shell{min-height:calc(100svh - 68px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px}.stats{width:min(70vh,680px,92vw);display:flex;justify-content:space-between;padding:6px 3px;color:#bbc5c9;font-size:11px}.stats b{color:#fff}.board-wrap{width:min(70vh,680px,92vw);aspect-ratio:1;padding:clamp(14px,2.5vw,26px);background:#252c31df;border:1px solid #77838a;border-radius:6px;box-shadow:0 24px 80px #000b}.board{width:100%;height:100%;position:relative;background:repeating-linear-gradient(0deg,#ffffff0b 0 1px,transparent 1px calc(100% / 6)),repeating-linear-gradient(90deg,#ffffff0b 0 1px,transparent 1px calc(100% / 6)),radial-gradient(circle at 50% 45%,#2c3740,#12191e 72%);border:2px solid #a6afb2;overflow:visible}.board:before{content:"";position:absolute;right:-28px;top:calc(100% / 3);width:30px;height:calc(100% / 6);background:#182a25;border-block:3px solid var(--green)}.exit{position:absolute;right:-22px;top:calc(41.67% - 5px);font-size:8px;color:var(--green);transform:rotate(90deg);z-index:2}.car{--gap: 5px;position:absolute;left:calc(var(--x) * 100% / 6 + var(--gap));top:calc(var(--y) * 100% / 6 + var(--gap));width:calc((var(--length)) * 100% / 6 - var(--gap) * 2);height:calc(100% / 6 - var(--gap) * 2);border:1px solid #ffffff77;border-radius:6px;background:linear-gradient(165deg,#9ec9e0 0,#9ec9e0 12%,#527f99 27%,#28485b 72%,#182b36);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:5px;box-shadow:inset 0 2px #ffffff78,inset 0 -6px 10px #07121978,0 7px 10px #0009;cursor:grab;touch-action:none;z-index:2}.car.vertical{width:calc(100% / 6 - var(--gap) * 2);height:calc((var(--length)) * 100% / 6 - var(--gap) * 2);flex-direction:column}.car .glass{width:18%;height:70%;background:linear-gradient(135deg,#d6f6ff 0,#d6f6ff 16%,#163649 22%,#163649 70%,#06151f);border:1px solid #bdefff66;box-shadow:inset 0 0 6px #71d5ff55;border-radius:3px}.car.vertical .glass{width:70%;height:18%}.car b.lamp{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffe58b;box-shadow:0 0 7px #ffd451}.car.horizontal b.left{right:5px;top:5px}.car.horizontal b.right{right:5px;bottom:5px}.car.vertical b.left{bottom:5px;left:5px}.car.vertical b.right{bottom:5px;right:5px}.car span{font-size:clamp(6px,1.2vmin,10px);font-weight:800}.car.target{background:linear-gradient(155deg,#ffb19b 0,#ffb19b 12%,#ee5e50 28%,#9f202d 74%,#5f111a);z-index:3}.car.c1{background:linear-gradient(155deg,#ffe29a,#d89d37 42%,#795014)}.car.c2{background:linear-gradient(155deg,#9ff1da,#3e9f8d 42%,#185446)}.car.c3{background:linear-gradient(155deg,#bac6ff,#6573b3 42%,#30396e)}.car.c4{background:linear-gradient(155deg,#e7baf0,#a167ad 42%,#573060)}.car.c5{background:linear-gradient(155deg,#d2e1df,#7c8f92 42%,#3e5053)}.car.selected{outline:3px solid #f7cb5b;outline-offset:1px;filter:brightness(1.08)}.car:focus-visible{outline:3px solid #f7cb5b;outline-offset:2px}.car.dragging{cursor:grabbing;filter:brightness(1.15);z-index:5}.car.hint{animation:pulse .45s 2}.controls{height:60px;display:flex;align-items:center;gap:10px}.controls>button:not(.icon){height:40px;padding:0 16px;border:1px solid #6f7d82;border-radius:5px;background:#243139;color:#fff;display:flex;align-items:center;gap:7px;cursor:pointer}.controls .primary{background:var(--yellow)!important;color:#172027!important;border:0!important;font-weight:800}.controls svg{width:17px}#toast{position:fixed;bottom:75px;left:50%;transform:translate(-50%,15px);opacity:0;background:#eff2ed;color:#172027;padding:9px 14px;border-radius:5px;font-size:11px;font-weight:800;transition:.2s}#toast.show{opacity:1;transform:translate(-50%)}dialog{width:min(370px,88vw);border:1px solid #879399;border-radius:6px;background:#152028;color:#fff;text-align:center;padding:28px;box-shadow:0 30px 100px #000}dialog::backdrop{background:#070c10cc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}dialog small{font-size:10px;color:var(--green)}.rating{margin-top:10px;color:#f6c94e;font-size:30px;letter-spacing:0;text-shadow:0 0 18px #efbc4370}html[data-render-profile=local-ultra] .car{box-shadow:inset 0 2px #fff9,inset 0 -8px 12px #0712198c,0 9px 15px #000a,0 0 20px #9bd9ff12}dialog h2{margin:5px}dialog p{color:#b6c1c5;font-size:13px}dialog button{width:100%;height:42px;margin-top:12px;border:0;border-radius:5px;background:var(--yellow);font-weight:800;color:#172027}@keyframes pulse{50%{box-shadow:0 0 0 5px #efbc4355,0 0 30px #efbc43}}@media(max-width:600px){header{height:58px;padding:0 10px}.brand>span{width:34px;height:34px}.brand strong{font-size:13px}.brand small{display:none}.shell{min-height:calc(100svh - 58px);padding:5px}.stats{width:min(78svh,90vw);padding:3px}.board-wrap{width:min(78svh,90vw);padding:11px}.controls{height:52px}.controls>button:not(.icon){padding:0 10px}.car{--gap: 3px;padding:3px}.car i{border-radius:2px}.stage small{display:none}}@media(orientation:landscape)and (max-height:600px){header{height:48px;padding:0 10px}.brand small,.stage small{display:none}.brand>span{width:32px;height:32px}.shell{height:calc(100svh - 48px);min-height:0;padding:3px;overflow:hidden}.stats,.board-wrap{width:min(48vw,calc(100svh - 116px))}.stats{padding:2px}.board-wrap{padding:8px}.controls{height:40px}.controls .icon{width:34px;height:34px}.controls>button:not(.icon){height:34px;padding:0 9px}.car{--gap: 3px}}
