*{box-sizing:border-box}
html,body{margin:0;background:#1479b4;font-family:Arial,Helvetica,sans-serif;color:#123f78}
body{min-height:100vh}
@media (min-width:761px){
  html,body{
    width:100%;
    height:100%;
    overflow:hidden;
  }
  body{
    display:flex;
    align-items:flex-start;
    justify-content:center;
  }
  .desktop-frame{
    position:relative;
    margin:0 auto;
  }
  .stage{
    position:absolute !important;
    left:0;
    top:0;
    width:1536px !important;
    height:1024px !important;
    aspect-ratio:auto !important;
    margin:0 !important;
    transform-origin:top left;
  }
}
.stage{
  width:min(96vw,1380px);
  aspect-ratio:3/2;
  margin:1.5vh auto;
  position:relative;
  overflow:hidden;
  border-radius:24px;
  background:url("../assets/image-1.png") center/cover no-repeat;
}
.header{
  position:absolute;left:22%;right:16%;top:2.2%;height:12%;
  background:rgba(255,250,240,.96);border:4px solid #e3b05b;border-radius:22px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:8px 16px;box-shadow:0 4px 0 #a36c2b55;
}
.header h1{margin:0;font-size:clamp(20px,2.8vw,40px);color:#164d91}
.header p{margin:4px 0 0;font-size:clamp(13px,1.6vw,24px);font-weight:800;color:#ec7216}

.status{
  position:absolute;left:31%;right:31%;top:17.5%;height:6.3%;
  background:rgba(228,245,255,.97);border:3px solid #8dc6ea;border-radius:16px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:900;font-size:clamp(12px,1.45vw,22px);
}

.menu{
  position:absolute;left:3.7%;top:36%;width:17%;height:41%;
  background:linear-gradient(90deg,#b36b2d,#df9442 48%,#b36b2d);
  border:5px solid #7f451d;border-radius:20px;padding:11px;
  box-shadow:0 5px 0 #5c3217;
}
.menu-title{
  height:17%;display:flex;align-items:center;justify-content:center;
  font-size:clamp(16px,1.8vw,27px);font-weight:900;color:#fff;text-shadow:0 2px #6b3a18;
}
.mode{
  display:block;width:100%;height:25%;margin:5% 0;border:4px solid #fff8;border-radius:16px;
  color:#fff;font-weight:900;font-size:clamp(13px,1.55vw,23px);cursor:pointer;box-shadow:0 3px 0 #0003;
}
.mode.shape{background:#1977d0} .mode.size{background:#55bd38} .mode.color{background:#f18a17}
.mode.active{outline:4px solid white}

.board{
  position:absolute;left:24.3%;top:25%;width:51.5%;height:32%;
  background:rgba(255,250,240,.95);border:4px solid #e1b260;border-radius:24px;padding:2.2%;
}
.items{width:100%;height:100%;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:3%}
.card{
  border:2px solid #ded5c6;border-radius:15px;background:#fff;display:grid;place-items:center;
  cursor:grab;touch-action:none;user-select:none;box-shadow:0 2px 5px #0002;
}
.card.dragging{opacity:.35}
.geo{width:48%;aspect-ratio:1;background:var(--c);border:2px solid #0002;pointer-events:none}
.geo.circle{border-radius:50%}
.geo.triangle{width:0;height:0;background:transparent;border:0;border-left:28px solid transparent;border-right:28px solid transparent;border-bottom:50px solid var(--c)}
.geo.small{transform:scale(.67)} .geo.medium{transform:scale(.86)} .geo.large{transform:scale(1.06)}

.bins{
  position:absolute;left:22.5%;top:60.5%;width:57%;height:22%;
  display:grid;grid-template-columns:repeat(3,1fr);gap:4%;
}
.bin{
  position:relative;border:5px solid #9c6230;border-radius:18px;
  background:rgba(255,248,213,.97);box-shadow:inset 0 0 0 5px #f0cf85;
  display:flex;align-items:center;justify-content:center;padding-top:14%;
  font-weight:900;color:#174d91;font-size:clamp(13px,1.6vw,24px);text-align:center;
}
.bin:before{
  content:"";position:absolute;top:7%;left:11%;right:11%;height:10%;
  border-radius:50%;background:#60371d;
}
.bin.hover{transform:scale(1.025);outline:5px solid #fff}
.bin.good{background:#d6f4cc} .bin.bad{background:#ffd4d4}

.mascot{
  position:absolute;right:3.5%;top:31%;width:16%;height:53%;
  display:flex;align-items:flex-end;justify-content:center;pointer-events:none;
}
.mascot img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 4px 4px #0003)}

.footer{
  position:absolute;left:7%;right:7%;bottom:2.2%;height:10%;
  display:grid;grid-template-columns:17% 1fr 17% 15%;gap:1.4%;align-items:center;
}
.counter,.progress-wrap,.replay,.sound{
  background:rgba(255,250,240,.96);border:3px solid #e1b15d;border-radius:16px;height:100%;
}
.counter{display:flex;align-items:center;justify-content:center;text-align:center;font-weight:900;font-size:clamp(11px,1.25vw,19px)}
.progress-wrap{display:flex;align-items:center;justify-content:center;padding:0 3%;gap:2%}
.dot{flex:1;max-width:30px;aspect-ratio:1;border-radius:50%;background:#bbb;border:2px solid #eee}
.dot.ok{background:#55bd38}
.replay{background:#167dcc;color:#fff;font-weight:900;font-size:clamp(11px,1.25vw,19px);cursor:pointer}
.sound{width:100%;background:#315eb8;color:#fff;font-size:clamp(20px,2.6vw,40px);display:grid;place-items:center}

.end{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#0d3b70cc;z-index:20}
.end.show{display:flex}
.end-card{width:min(500px,86%);background:white;border-radius:24px;padding:28px;text-align:center}
.end-card h2{font-size:clamp(28px,4vw,52px);margin:0 0 10px;color:#164d91}
.end-card button{border:0;border-radius:12px;background:#51bb37;color:#fff;padding:12px 24px;font-size:18px;font-weight:900;cursor:pointer}

@media (max-width:760px){
  body{background:#2aa7df}
  .stage{
    width:100%;
    min-height:760px;
    height:auto;
    aspect-ratio:auto;
    margin:0;
    border-radius:0;
    background-position:center top;
  }
  .header{left:3%;right:3%;top:2%;height:11%;padding:5px 10px}
  .header h1{font-size:clamp(18px,5vw,24px)}
  .header p{font-size:clamp(12px,3.7vw,16px)}

  .status{left:3%;right:3%;top:14%;height:7%;font-size:clamp(13px,4vw,18px)}

  .menu{
    left:3%;right:3%;top:22%;width:auto;height:8%;
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
    background:none;border:0;box-shadow:none;padding:0;
  }
  .menu-title{display:none}
  .mode{height:100%;margin:0;border-width:3px;font-size:clamp(12px,3.8vw,17px)}

  .board{
    left:3%;top:32%;width:94%;height:23%;padding:2.5%;
  }
  .items{gap:2%}
  .card{border-radius:11px}
  .geo.triangle{border-left-width:18px;border-right-width:18px;border-bottom-width:34px}

  .bins{
    left:3%;top:57.5%;width:94%;height:20%;gap:2%;
    padding-right:15%;
  }
  .bin{border-width:3px;box-shadow:inset 0 0 0 3px #f0cf85;font-size:clamp(12px,3.7vw,17px)}

  .mascot{
    display:flex !important;
    right:0 !important;
    top:auto !important;
    bottom:11.5% !important;
    width:27% !important;
    height:34% !important;
    z-index:7;
  }
  .mascot img{
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:right bottom !important;
  }

  .footer{
    left:3%;right:3%;bottom:3%;height:14%;
    grid-template-columns:18% 1fr 27%;
    grid-template-rows:1fr 1fr;
    gap:8px;
  }
  .sound{grid-row:1 / 3;grid-column:1}
  .counter:first-of-type{grid-column:2;grid-row:1}
  .progress-wrap{grid-column:2 / 4;grid-row:2}
  #errors{grid-column:3;grid-row:1}
  .replay{display:none !important}
  .counter{font-size:clamp(11px,3.3vw,15px)}
  .dot{max-width:24px}
}

@media (max-width:430px){
  .stage{min-height:680px}
  .board{height:22%}
  .bins{top:57%;height:19%;padding-right:14%}
  .mascot{
    width:26% !important;
    height:31% !important;
    bottom:12% !important;
  }
}

@media (min-width:761px){
  .header{
    left:21% !important;
    right:16% !important;
    top:2.5% !important;
    height:11.5% !important;
    padding:8px 24px !important;
  }
  .header h1{
    font-size:34px !important;
    line-height:1.08 !important;
    white-space:nowrap !important;
  }
  .header p{
    font-size:20px !important;
    line-height:1.1 !important;
    margin-top:5px !important;
  }

  .status{
    left:30% !important;
    right:30% !important;
    top:16.2% !important;
    height:6.2% !important;
    font-size:18px !important;
    line-height:1.12 !important;
    padding:5px 14px !important;
  }

  .board{
    top:24.5% !important;
  }

  .menu{
    top:35.5% !important;
  }

  .bins{
    top:60% !important;
  }

  .mascot{
    top:30% !important;
    height:52% !important;
  }

  .footer{
    left:6% !important;
    right:6% !important;
    bottom:2.5% !important;
    height:8.5% !important;
    display:grid !important;
    grid-template-columns:13% 34% 18% 16% 13% !important;
    gap:1.5% !important;
    align-items:stretch !important;
  }

  .sound{
    grid-column:1 !important;
    width:100% !important;
    height:100% !important;
  }

  #count{
    grid-column:2 !important;
    width:auto !important;
    height:100% !important;
  }

  .progress-wrap{
    grid-column:3 !important;
    width:auto !important;
    height:100% !important;
  }

  #errors{
    grid-column:4 !important;
    width:auto !important;
    height:100% !important;
  }

  .replay{
    position:static !important;
    grid-column:5 !important;
    width:100% !important;
    height:100% !important;
  }

  .counter{
    font-size:17px !important;
    line-height:1.1 !important;
  }

  .dot{
    max-width:22px !important;
  }
}

.mascot{
  overflow:visible !important;
}
.mascot img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  background:transparent !important;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.16)) !important;
  transition:opacity .14s ease !important;
}
.mascot img.state-change{
  animation:girlState .34s ease-out;
}
@keyframes girlState{
  0%{opacity:.45}
  100%{opacity:1}
}

@media (max-width:760px){
  .mascot{
    right:0 !important;
    bottom:20% !important;
    width:25% !important;
    height:31% !important;
    z-index:7 !important;
  }
  .replay{
    display:none !important;
  }
}
@media (max-width:430px){
  .mascot{
    right:0 !important;
    bottom:20.5% !important;
    width:24% !important;
    height:29% !important;
  }
}