*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  background:#100d15;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  font-family:Verdana, sans-serif;
}
#game{
  width:min(100vw,540px);
  aspect-ratio:941/1672;
  max-height:100vh;
  position:relative;
  overflow:hidden;
  background:#201723;
}
#uiBg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  user-select:none;
  pointer-events:none;
  image-rendering:auto;
}
.hit{
  position:absolute;
  border:0;
  background:transparent;
  color:transparent;
  cursor:pointer;
  z-index:30;
  padding:0;
  font-size:0;
}

/* Top text: aligned to the baked boxes */
#cultureText{
  position:absolute;

  left:6.4%;
  top:6.95%;

  width:18%;
  height:4.1%;

  z-index:10;

  color:#ffe9a8;

  text-align:center;

  font-weight:900;

  font-size:clamp(12px,2.9vw,18px);

  line-height:.9;

  text-shadow:2px 2px #2c160b;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;
}

#cultureText span{
  display:none;
}

#mediumText{
  position:absolute;

  right:6.2%;
  top:7.35%;

  width:16.8%;
  height:3.6%;

  z-index:10;

  color:#d6ff9b;

  text-align:center;

  font-weight:900;

  font-size:clamp(7px,1.55vw,10px);

  line-height:1;

  text-shadow:1px 1px #2c160b;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:flex-start;

  overflow:hidden;

  padding-top:.25%;
}

#mediumText span{

  color:#ffe3a2;

  font-size:clamp(6px,1.25vw,8px);

  line-height:1;

  margin:0;
  padding:0;
}

#mediumText b{

  display:block;

  max-width:100%;

  line-height:0.8;

  margin-top:0px;

  font-size:clamp(7px,1.55vw,10px);

  overflow:hidden;

  white-space:normal;

  word-break:keep-all;
}

/* medium button text overlays */
.mediumHit{
  top:39.1%;
  height:4.1%;
  z-index:35;
  color:#fff8d0;
  font-size:clamp(11px,2.2vw,15px);
  font-weight:900;
  text-shadow:2px 2px #2a160b;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
}
#basicBtn{
  left:11.0%;
  top:39.5%;
  width:22.2%;
}

#richBtn{
  left:38.0%;
  top:39.5%;
  width:22.2%;
}

#selectiveBtn{
  left:66.8%;
  top:39.5%;
  width:20.5%;

  font-size:clamp(9px,1.8vw,12px);
}.mediumHit.selected{
  filter:drop-shadow(0 0 4px #fff38f);
}

/* Petri dish overlays: matched to empty glass dish interiors */
.dishZone{
  position:absolute;

  width:18.8%;
  height:11%;

  border-radius:50%;

  z-index:12;

  overflow:visible;

  cursor:pointer;
}

#dishZone1{left:11.5%;top:48%;}
#dishZone2{left:40.6%;top:48%;}
#dishZone3{left:68.8%;top:48%;}
.mediumFill{
  position:absolute;

  left:-7%;
  top:0%;

  width:108%;
  height:82%;

  border-radius:50%;

  opacity:0;

  transition:
    opacity .18s,
    background .18s;

  box-shadow:
    inset 0 0 16px rgba(255,255,255,.42),
    inset 0 -7px 10px rgba(0,0,0,.18);

  pointer-events:none;
}
.mediumFill.basic{
  opacity:.9;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,226,170,.98) 0%,
      rgba(238,185,112,.94) 58%,
      rgba(202,139,74,.9) 100%
    );
}

.mediumFill.rich{
  opacity:.92;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,230,72,.98) 0%,
      rgba(255,162,35,.96) 58%,
      rgba(213,98,20,.92) 100%
    );
}

.mediumFill.selective{
  opacity:.92;

  background:
    radial-gradient(
      ellipse at center,
      rgba(159,255,193,.98) 0%,
      rgba(62,214,129,.96) 58%,
      rgba(22,139,87,.92) 100%
    );
}.colonyLayer{
  position:absolute;
  inset:0;
}
.colonyImg{
  position:absolute;

  left:-12%;
  top:-26%;

  width:128%;
  height:150%;

  object-fit:contain;

  animation:growColony 3s forwards ease-out;

  image-rendering:auto;
}

/* colony growth animation */
@keyframes growColony{
  0%{transform:scale(.15); opacity:.35;}
  55%{transform:scale(.55); opacity:.85;}
  100%{transform:scale(1); opacity:1;}
}

/* colony 이미지 파일명 기준 위치/크기 조정 */

/* CLEAN / RARE: 적당히 크게, 더 위로 */
.colonyImg[src*="colony_normal"],
.colonyImg[src*="colony_rare"]{
  left:-18% !important;
  top:-80% !important;

  width:130% !important;
  height:253% !important;
object-fit:fill !important;
}

/* CONTAM: 크기 유지, 더 위로 */
.colonyImg[src*="colony_contam"]{

  left:-6% !important;
  top:-20% !important;

  width:108% !important;
  height:122% !important;

  object-fit:fill !important;
}
/* Dish labels aligned with the baked label boxes */
.dishText{
  position:absolute;
  z-index:20;
  width:18.5%;
  text-align:center;
  font-weight:900;
  text-shadow:1.5px 1.5px #20110a;
  pointer-events:none;
}
#mediumLabel1,#resultLabel1,#actionLabel1{left:12.1%;}
#mediumLabel2,#resultLabel2,#actionLabel2{left:40.8%;}
#mediumLabel3,#resultLabel3,#actionLabel3{left:69.6%;}
.mediumLabel{
  top:57.5%;
  color:#ffe7ab;
  font-size:clamp(8px,1.65vw,11px);
  line-height:1.05;

}
.resultLabel{

  top:60.8%;

  color:#ded7d1;

  font-size:clamp(8px,1.65vw,11px);

  line-height:1;

  text-align:center;

  font-weight:900;

  text-shadow:1.5px 1.5px #20110a;

  letter-spacing:.3px;

  transform:translateX(-5%);
}.actionLabel{
  top:63%;
  color:#f4e2bd;
  font-size:clamp(7px,1.45vw,9px);
}
.resultLabel.clean{color:#9ef57f;}
.resultLabel.rare{color:#ff93d4;}
.resultLabel.contam{color:#d62b2b;}
.resultLabel.dead{color:#d7d7d7;}

/* Bottom hit areas; images/text are baked in the background */
.toolHit{
  top:73.45%;
  height:6.9%;
  z-index:34;
}
#sporeBtn{left:5.1%;width:25.8%;}
#storageBtn{left:34.5%;width:30.0%;}
#autoclaveBtn{left:66.0%;width:28.9%;}

/* Moving researcher: small, safe zone between dishes and buttons */
#researcherWrap{
  position:absolute;
  left:45.2%;
  top:64.0%;
  width:12.2%;
  height:8.2%;
  z-index:22;
  pointer-events:none;
  transform:translateX(-50%);
  transition:left .45s ease;
}
#researcher{
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:auto;
}
#bubble{
  position:absolute;
  left:65%;
  top:0%;
  background:#fff3d9;
  color:#3d291b;
  border:2px solid #7d5638;
  border-radius:10px;
  padding:4px 7px;
  font-size:clamp(7px,1.7vw,10px);
  font-weight:800;
  white-space:nowrap;
  display:none;
}

/* Dialogue text overlays aligned to the baked message box */
#mainText,#memeText,#scienceText{
  position:absolute;
  left:28.3%;
  width:49%;
  z-index:20;
  pointer-events:none;
  text-shadow:2px 2px #1f1520;
  line-height:1.08;
}
#mainText{
  top:87.1%;

  color:#ffe8b7;

  font-size:clamp(18px,4.2vw,26px);

  font-weight:900;
}

#memeText{
  top:90.8%;

  color:#ff8fbf;

  font-size:clamp(12px,2.7vw,17px);

  font-weight:900;

  letter-spacing:.5px;
}

#scienceText{
  top:93.3%;

  color:#c0b6cc;

  font-size:clamp(9px,2vw,12px);

  font-weight:700;
}

#endingOverlay{
  position:absolute;
  inset:0;
  z-index:100;

  display:none;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.58);
}

#endingCard{
  position:relative;

  width:min(72vw, 430px);

  aspect-ratio:1 / 1.15;

  background-image:url("assets/ending_popup.webp");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
#endingText{
  position:absolute;
  left:12%;
  top:26%;
  width:76%;

  text-align:center;

  color:#ffe8b7;
  font-weight:900;
  text-shadow:2px 2px #2c160b;

 font-size:clamp(10px,2.1vw,18px);
  line-height:1.35;
}

#endingSubText{
  position:absolute;
  left:12%;
  top:49%;
  width:76%;

  text-align:center;

  color:#ff9bd6;
  font-weight:900;
  text-shadow:2px 2px #2c160b;

 font-size:clamp(7px,1.5vw,12px);
  line-height:1.35;
}

#endingRestart{
  position:absolute;
  left:28%;
  bottom:12%;
  width:44%;
  height:11%;

  border:0;
  background:transparent;
  cursor:pointer;
}

#endingRestart{
  position:absolute;

  left:27%;
  bottom:11%;

  width:18%;
  height:8%;

  border:0;
  background:transparent;

  cursor:pointer;
}

#endingExit{
  position:absolute;

  left:55%;
  bottom:11%;

  width:18%;
  height:8%;

  border:0;
  background:transparent;

  cursor:pointer;
}

/* ENDING POPUP FIX - large card */

#endingOverlay{
  position:absolute;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.58);
  pointer-events:auto;
}

#endingCard{
  position:relative;

  width:220%;
  max-width:620px;

  aspect-ratio:1 / 1.18;

  background-image:url("assets/ending_popup.webp");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;

  pointer-events:auto;
}

#endingText{
  position:absolute;
  left:16%;
  top:41%;
  width:68%;

  text-align:center;
  color:#fff4dc;
  font-weight:900;

  font-size:clamp(10px,2.2vw,14px);
  line-height:1.22;

  text-shadow:
    1px 1px #3b1b08,
    0 0 5px rgba(255,215,110,.45);
}

#endingSubText{
  position:absolute;

  left:17%;
  top:50%;

  width:66%;

  text-align:center;

  color:#7b4a2b;

  font-weight:700;

  font-size:clamp(10px,2.4vw,15px);

  line-height:1.2;

  text-shadow:none;

  -webkit-text-stroke:0px transparent;

  filter:none;
}
#endingRestart{
  position:absolute;

  left:30%;
 bottom:22%;

  width:17%;
  height:6%;

  z-index:10000;
  border:0;

background:transparent;

  cursor:pointer;
  pointer-events:auto;
}

#endingExit{
  position:absolute;

  left:52%;
  bottom:22%;

  width:17%;
  height:6%;

  z-index:10000;
  border:0;

  background:transparent;

  cursor:pointer;
  pointer-events:auto;
}

button,
.dishZone{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}