@font-face {
  font-family: 'PixelTitle';
  src: local('Press Start 2P');
}
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root{
  --sky-top:#1a1a2e;
  --sky-mid:#20304f;
  --water:#0f3460;
  --water-dark:#0a2647;
  --dock:#3d3d3d;
  --dock-dark:#232323;
  --red:#e94560;
  --yellow:#f5b942;
  --white:#eaeaea;
  --rust:#8b4a3a;
  --green:#3a8b5f;
  --blue-container:#2d6a8f;
  --steel:#5a6472;
}

*{box-sizing:border-box; image-rendering: pixelated;}
html,body{margin:0;padding:0;height:100%;background:var(--sky-top);overflow:hidden;font-family:'VT323',monospace;}

#stage{
  position:relative;
  width:100%;
  height:100vh;
  min-height:600px;
  background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-mid) 62%, var(--water) 62%, var(--water-dark) 100%);
  overflow:hidden;
  cursor:default;
}

.star{
  position:absolute;
  width:2px;height:2px;
  background:var(--white);
  opacity:0.6;
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{opacity:0.2;}
  50%{opacity:0.9;}
}

#moon{
  position:absolute;
  top:6%;
  right:8%;
  width:56px;
  height:56px;
  background:var(--yellow);
  border-radius:0;
  box-shadow:
    0 0 0 4px #1a1a2e,
    0 0 30px rgba(245,185,66,0.35);
  clip-path: polygon(
    30% 0%, 70% 0%, 85% 8%, 95% 25%, 100% 50%,
    95% 75%, 85% 92%, 70% 100%, 30% 100%,
    15% 92%, 5% 75%, 0% 50%, 5% 25%, 15% 8%
  );
}

#skyline{
  position:absolute;
  bottom:38%;
  left:0;
  width:100%;
  height:120px;
  display:flex;
  align-items:flex-end;
  opacity:0.5;
}
.building{
  background:#141428;
  margin-right:14px;
  position:relative;
}
.building::after{
  content:'';
  position:absolute;
  inset:0;
  background-image: radial-gradient(circle, var(--yellow) 1px, transparent 1px);
  background-size: 12px 16px;
  opacity:0.3;
}

.wave{
  position:absolute;
  height:2px;
  background:rgba(234,234,234,0.15);
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer{
  0%{opacity:0;}
  50%{opacity:1;}
  100%{opacity:0;}
}

#dock{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:38%;
  background:repeating-linear-gradient(
    90deg,
    var(--dock) 0px, var(--dock) 78px,
    var(--dock-dark) 78px, var(--dock-dark) 82px
  );
  border-top: 4px solid #1a1a1a;
}
#dock::before{
  content:'';
  position:absolute;
  top:0;left:0;width:100%;height:6px;
  background: repeating-linear-gradient(90deg, var(--yellow) 0 20px, #1a1a1a 20px 40px);
  opacity:0.85;
}

#rail{
  position:absolute;
  top:8%;
  left:var(--gantry-left, 10px);
  right:var(--gantry-right, 10px);
  width:auto;
  height:10px;
  background: repeating-linear-gradient(90deg, var(--steel) 0 30px, #1a1a1a 30px 34px);
  box-shadow: 0 4px 0 #1a1a1a;
  z-index:5;
}

#crane{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:6;
  pointer-events:none;
}
.crane-leg{
  position:absolute;
  top:8%;
  width:14px;
  height:54%;
  background: var(--red);
  border-left:3px solid #7a1230;
  border-right:3px solid #7a1230;
}
.crane-leg::before{
  content:'';
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  background: repeating-linear-gradient(180deg, transparent 0 16px, rgba(0,0,0,0.25) 16px 18px);
}
.crane-leg::after{
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  transform: translateX(-50%);
  width:32px;
  height:10px;
  background:#7a1230;
  border:2px solid #1a1a1a;
}
#leg-left{ left:var(--leg-left-x, 20px); }
#leg-right{ left:var(--leg-right-x, calc(100% - 34px)); }

#gantry{
  position:absolute;
  top:6%;
  left:var(--gantry-left, 10px);
  right:var(--gantry-right, 10px);
  height:18px;
  background: var(--red);
  border-top:3px solid #ff6b81;
  border-bottom:3px solid #7a1230;
}
#gantry::after{
  content:'';
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  height:0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}

#cab{
  position:absolute;
  top:5.5%;
  left:calc(50% - 34px);
  width:68px;
  height:34px;
  background: var(--yellow);
  border:3px solid #1a1a1a;
  z-index:2;
}
#cab::before{
  content:'';
  position:absolute;
  top:6px;left:8px;
  width:20px;height:16px;
  background: #7fd4e0;
  border:2px solid #1a1a1a;
}

#trolley{
  position:absolute;
  top:calc(6% + 18px);
  left:50%;
  width:26px;
  margin-left:-13px;
  transition: left 1.1s cubic-bezier(.65,0,.35,1);
  z-index:4;
}
#trolley-block{
  width:26px;height:14px;
  background:#333;
  border:2px solid #111;
  margin:0 auto;
}
#cable{
  width:4px;
  background: #1a1a1a;
  margin:0 auto;
  transition: height 1.1s cubic-bezier(.65,0,.35,1);
}
#hook-assembly{
  width:44px;
  margin-left:-20px;
  position:relative;
  left:50%;
}
#spreader{
  width:44px;
  height:8px;
  background:#333;
  border:2px solid #111;
}
.hook-arm{
  position:absolute;
  bottom:-14px;
  width:6px;
  height:16px;
  background:#222;
}
.hook-arm.l{left:2px;}
.hook-arm.r{right:2px;}
.hook-arm::after{
  content:'';
  position:absolute;
  bottom:-6px;
  left:-3px;
  width:12px;
  height:10px;
  border:3px solid #222;
  border-top:none;
  border-radius:0 0 8px 8px;
}

#yard{
  position:absolute;
  bottom:6%;
  left:0;
  width:100%;
  height:32%;
  display:flex;
  justify-content:space-evenly;
  align-items:flex-end;
  gap:12px;
  z-index:3;
  padding: 0 30px;
}

.container-slot{
  position:relative;
  width:120px;
  height:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.container{
  width:120px;
  height:78px;
  position:relative;
  border:3px solid #1a1a1a;
  cursor:pointer;
  transition: transform 0.25s ease, filter 0.25s ease, opacity 0.4s ease, box-shadow .25s ease;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
}
.container:hover{
  transform: translateY(-6px);
  filter: brightness(1.15);
  box-shadow: 6px 8px 0 rgba(0,0,0,0.4);
}
.container:focus-visible{
  outline:3px solid var(--white);
  outline-offset:3px;
}
.container::before{ /* corrugation */
  content:'';
  position:absolute;
  inset:6px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.15) 0 4px, transparent 4px 14px);
}
.container .doors{
  position:absolute;
  inset:0;
  display:flex;
}
.container .doors::before,
.container .doors::after{
  content:'';
  flex:1;
  border-right:2px solid rgba(0,0,0,0.4);
}
.container .label{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:'Press Start 2P', monospace;
  font-size:9px;
  color:#fff;
  text-align:center;
  line-height:1.6;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
  padding:0 6px;
  pointer-events:none;
}
.container .rivet{
  position:absolute;
  width:4px;height:4px;
  background: rgba(0,0,0,0.35);
}

.container.hidden{
  opacity:0;
  pointer-events:none;
  transform: translateY(-6px) scale(0.9);
}

.container.selected-ghost{
  opacity:0.15;
}

.container.shake{
  animation: shake 0.35s ease;
}
@keyframes shake{
  0%,100%{ transform: translateY(0) rotate(0); }
  20%{ transform: translateY(-2px) rotate(-2deg); }
  40%{ transform: translateY(-4px) rotate(2deg); }
  60%{ transform: translateY(-2px) rotate(-1deg); }
  80%{ transform: translateY(-1px) rotate(1deg); }
}

.c-red{ background: var(--red); }
.c-yellow{ background: var(--yellow); }
.c-green{ background: var(--green); }
.c-blue{ background: var(--blue-container); }
.c-rust{ background: var(--rust); }
.c-steel{ background: var(--steel); }

#lifted-container{
  position:absolute;
  width:120px;
  height:78px;
  left:50%;
  margin-left:-60px;
  top:0;
  z-index:10;
  border:3px solid #1a1a1a;
  display:none;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
}
#lifted-container::before{
  content:'';
  position:absolute;
  inset:6px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.15) 0 4px, transparent 4px 14px);
}
#lifted-container .label{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:'Press Start 2P', monospace;
  font-size:9px;
  color:#fff;
  text-align:center;
  line-height:1.6;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
  padding:0 6px;
}

#title-wrap{
  position:absolute;
  top:16px;
  left:0;
  width:100%;
  text-align:center;
  z-index:20;
  pointer-events:none;
}
#title{
  font-family:'Press Start 2P', monospace;
  font-size:clamp(20px, 4vw, 40px);
  color:var(--yellow);
  text-shadow: 4px 4px 0 #7a1230, 4px 4px 0 #1a1a1a;
  letter-spacing:2px;
}
#subtitle{
  font-family:'VT323', monospace;
  font-size:18px;
  color:var(--white);
  letter-spacing:3px;
  margin-top:4px;
  opacity:0.8;
}

#panel-overlay{
  position:absolute;
  inset:0;
  background: rgba(10,10,20,0.75);
  z-index:30;
  display:none;
  align-items:center;
  justify-content:center;
}
#panel{
  width:min(560px, 88vw);
  max-height:80vh;
  overflow-y:auto;
  background: var(--dock);
  border:4px solid var(--yellow);
  box-shadow: 8px 8px 0 rgba(0,0,0,0.5);
  padding:28px 30px;
  position:relative;
  transform: scale(0.85);
  opacity:0;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), opacity 0.3s ease;
}
#panel-overlay.open #panel{
  transform: scale(1);
  opacity:1;
}
#panel h2{
  font-family:'Press Start 2P', monospace;
  font-size:16px;
  color:var(--yellow);
  margin:0 0 16px 0;
  line-height:1.5;
}
#panel p{
  font-family:'VT323', monospace;
  font-size:20px;
  color:var(--white);
  line-height:1.5;
  margin:0 0 14px 0;
}
#panel .tag{
  display:inline-block;
  font-family:'Press Start 2P', monospace;
  font-size:9px;
  color:#1a1a1a;
  background:var(--yellow);
  padding:5px 9px;
  margin:2px 6px 2px 0;
}
#close-btn{
  position:absolute;
  top:-16px;
  right:-16px;
  width:36px;
  height:36px;
  background:var(--red);
  border:3px solid #1a1a1a;
  color:#fff;
  font-family:'Press Start 2P', monospace;
  font-size:14px;
  cursor:pointer;
  line-height:1;
}
#close-btn:hover{ filter:brightness(1.2); }
#play-btn{
  font-family:'Press Start 2P', monospace;
  font-size:11px;
  background:var(--green);
  color:#fff;
  border:3px solid #1a1a1a;
  padding:12px 18px;
  cursor:pointer;
  margin-top:8px;
  box-shadow:3px 3px 0 rgba(0,0,0,0.4);
}
#play-btn:hover{ filter:brightness(1.15); transform:translateY(-2px); }

#hint{
  position:absolute;
  bottom:1.5%;
  left:0;
  width:100%;
  text-align:center;
  font-family:'VT323', monospace;
  font-size:16px;
  color:var(--white);
  opacity:0.55;
  z-index:20;
  letter-spacing:1px;
}

#toast{
  position:absolute;
  bottom:12%;
  left:50%;
  transform:translateX(-50%) translateY(8px);
  font-family:'Press Start 2P', monospace;
  font-size:12px;
  color:#1a1a1a;
  background:var(--yellow);
  border:3px solid #1a1a1a;
  padding:10px 16px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.4);
  opacity:0;
  pointer-events:none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index:25;
  text-align:center;
  max-width:80vw;
  white-space:nowrap;
}
#toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

@media (max-width: 720px){
  #yard{ gap:14px; padding:0 10px; }
  .container, .container-slot{ width:78px; }
  .container{ height:52px; }
  #crane{ width:100%; }
  .container .label{ font-size:6px; }
  #lifted-container{ width:78px; height:52px; margin-left:-39px; }
  #lifted-container .label{ font-size:6px; }
  #toast{ font-size:10px; white-space:normal; }
}