:root{
  --bg:#000;
  --fg:#fff;
  --muted:rgba(255,255,255,0.7);

  --fruit-size:190px;
}

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--fg);
  overflow:hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.stage{
  position:relative;
  width:100%;
  height:100%;
  user-select:none;
  touch-action:none;
}

/* Title */
.title{
  position:absolute;
  top:18px;
  left:18px;
  font-size:16px;
  letter-spacing:0.06em;
  text-transform:none;
  color:rgba(255,255,255,0.92);
  pointer-events:none;
}
.title span{
  margin-left:10px;
  font-size:12px;
  letter-spacing:0.10em;
  text-transform:lowercase;
  color:rgba(255,255,255,0.35);
}

/* Hint (no border) */
.hint{
  position:absolute;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  font-size:14px;
  letter-spacing:0.08em;
  text-transform:lowercase;
  color:rgba(255,255,255,0.92);
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.09);
  backdrop-filter: blur(6px);
  pointer-events:none;
}

/* Message */
.msg{
  position:absolute;
  left:50%;
  top:68%;
  transform:translate(-50%,-50%);
  width:min(1000px,92vw);
  text-align:center;
  opacity:0;
  transition:opacity 220ms ease;
  pointer-events:none;
}
.msg.show{ opacity:1; }

.msg .no{
  font-size:clamp(22px,3.2vw,44px);
  line-height:1.15;
}

/* Full page hanger */
.hanger{
  position:absolute;
  inset:0;
}

svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

#thread{
  fill:none;
  stroke:rgba(255,255,255,0.45);
  stroke-width:2;
  stroke-linecap:round;
}

#anchorDot{
  fill:rgba(255,255,255,0.55);
}

#knot{
  fill:rgba(255,255,255,0.35);
}

/* Fruit */
.fruit{
  position:absolute;
  left:52%;
  top:110px;
  transform:translate(-50%,0);
  width:var(--fruit-size);
  height:var(--fruit-size);
  display:grid;
  place-items:center;
  font-size:calc(var(--fruit-size) * 0.78);
  cursor:grab;
  filter:drop-shadow(0 16px 42px rgba(255,255,255,0.1));
  will-change:transform;
  -webkit-tap-highlight-color: transparent;
}
.fruit:active{
  cursor:grabbing;
}

/* Mobile friendliness */
@media (max-width: 520px){
  :root{
    --fruit-size: 220px; /* bigger fruit on mobile */
  }

  .title{
    top:14px;
    left:14px;
    font-size:15px;
  }

  .hint{
    bottom:22px;
    font-size:15px;
    padding:12px 16px;
    background:rgba(255,255,255,0.11);
  }

  .msg{
    top:64%;
  }
}