:root{font-family:"Trebuchet MS",Arial,sans-serif;background:#061842;color:#fff}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle,#174b96,#04102e 72%);padding:8px}.game{position:relative;width:min(98vw,98vh,980px);aspect-ratio:1;overflow:hidden;border-radius:2.5%;box-shadow:0 18px 55px #000a}.scene{position:absolute;inset:0;width:100%;height:100%;display:block}.piece{position:absolute;top:34%;left:calc(2% + var(--slot)*9.4%);width:11.5%;height:30%;padding:0;border:0;background:transparent;cursor:pointer;z-index:4;transition:left .8s cubic-bezier(.5,0,.2,1),top .8s cubic-bezier(.5,0,.2,1),transform .16s}.piece.right{left:calc(73% + var(--col)*11%);top:calc(35% + var(--row)*17%)}.piece:hover{transform:translateY(-2%)}.piece.selected{transform:translateY(-5%);filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 14px #ffe83a)}.sprite{position:absolute;inset:0 0 18% 0;background-image:url(characters.png);background-repeat:no-repeat;background-size:400% 100%;background-position:var(--pos) 0}.badge{position:absolute;left:50%;bottom:0;translate:-50% 0;width:34%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:var(--badge);border:.28vw solid #fff;box-shadow:0 .28vw 0 #051330;font-size:clamp(.85rem,2.4vw,1.5rem);font-weight:1000;text-shadow:0 2px 0 #0007}.piece.selected .badge{background:#ffd522;color:#102553}.flashlight{position:absolute;left:6%;top:62%;width:24%;height:14%;z-index:5;transition:left .8s ease,top .8s ease}.flashlight.right{left:76%;top:64%}.flashlight img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 9px #ffe94e)}.toast{position:absolute;z-index:9;left:50%;top:76.5%;translate:-50% 0;max-width:48%;padding:.55% 1.4%;border-radius:999px;background:#051a4edb;border:2px solid #4376bd;text-align:center;font-weight:900;font-size:clamp(.68rem,1.55vw,1rem);opacity:0;transition:opacity .2s}.toast.show{opacity:1}.toast.warn{color:#ffe36a}.reset-hit,.cross-hit{position:absolute;z-index:10;border:0;background:transparent;cursor:pointer}.reset-hit{left:2.2%;bottom:2.2%;width:15%;height:14%;border-radius:50%}.cross-hit{left:19%;bottom:2%;width:43%;height:14%;border-radius:25%}.cross-hit:disabled{cursor:not-allowed}.cross-hit:not(:disabled)::after{content:"";position:absolute;inset:1%;border-radius:25%;box-shadow:0 0 0 .35vw #fff6,0 0 1.5vw #fff;animation:pulse 1.2s infinite}@keyframes pulse{50%{opacity:.25}}.time-value,.move-value{position:absolute;z-index:7;bottom:4.1%;height:5.9%;display:grid;place-items:center;background:#08265c;color:#fff;font-size:clamp(1rem,3.2vw,2rem);font-weight:1000}.time-value{left:67.6%;width:10.2%}.move-value{left:87.5%;width:6%}.win{position:absolute;z-index:20;inset:27% 16% 22%;place-items:center;text-align:center;background:#09245df2;border:.55vw solid #ffd42a;border-radius:4%;box-shadow:0 12px 45px #000}.win:not([hidden]){display:grid}.win h2{margin:0;color:#ffd42a;font-size:clamp(2rem,6vw,4.2rem);text-shadow:0 4px 0 #4f2700}.win p{font-size:clamp(1rem,2.5vw,1.5rem);font-weight:900}.win button{border:4px solid #fff;border-radius:18px;background:#ff7108;color:#fff;padding:10px 20px;font-size:clamp(1rem,2.5vw,1.5rem);font-weight:1000;cursor:pointer}@media(max-width:650px){body{padding:0}.game{width:100vw;border-radius:0}.toast{max-width:58%;top:75.8%}.badge{border-width:2px}}

.badge{
  position:absolute;
  left:50%;
  bottom:0;
  translate:-50% 0;
  width:34%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--badge);
  border:.28vw solid #fff;
  box-shadow:0 .28vw 0 #051330;
  color:#000;
  -webkit-text-fill-color:#000;
  font-size:clamp(.85rem,2.4vw,1.5rem);
  font-weight:1000;
  text-shadow:0 2px 0 #0007;
}